/* -----------------------------------------------------------------
   Grundvariablen
----------------------------------------------------------------- */
:root{
  --cw-font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  --cw-font-size:1rem;
  --cw-color-text:#222;
  --cw-color-bg:#fff;
  --cw-color-primary:#0073aa;
  --cw-color-border:#333;
  --cw-color-info-bg:#fbfbfb;
  --cw-color-info-border:#ddd;
  --cw-spacing-xs:.25rem;
  --cw-spacing-sm:.45rem;
  --cw-spacing-md:.75rem;
  --cw-spacing-lg:1rem;
}

/* -----------------------------------------------------------------
   Basis
----------------------------------------------------------------- */
body{
  font-family:var(--cw-font-family);
  line-height:1.45;
  color:var(--cw-color-text);
  background:var(--cw-color-bg);
}

/* -----------------------------------------------------------------
   Checklist / Statements
----------------------------------------------------------------- */
.cw-checklist{
  margin-bottom:var(--cw-spacing-lg);
}

/* Titel der Aussage */
.cw-statement__title{
  margin:.75rem 0 .75rem;           /* mehr Abstand nach unten */
  font-size:2rem;              /* mindestens so groß wie Fließtext */
  font-weight:600;
  line-height:1.4;
}


.cw-statement__text{
  margin:0 0 var(--cw-spacing-md);
}

/* -----------------------------------------------------------------
   Klickbarer Begriff im Fließtext
----------------------------------------------------------------- */
.cw-term-toggle{
  all:unset;
  display:inline;
  cursor:pointer;
}

.cw-term{
  font-weight:600;
  padding-bottom:2px;
  border-bottom:2px dashed currentColor;
}

/* -----------------------------------------------------------------
   Infobox
----------------------------------------------------------------- */
.cw-info-box{
  margin-top:var(--cw-spacing-sm);
  padding:var(--cw-spacing-md);
  border:1px solid var(--cw-color-info-border);
  background:var(--cw-color-info-bg);
  border-radius:4px;
  font-size:.95rem;
  position:relative;
}

.cw-info-close{
  position:absolute;
  top:.35rem;
  right:.35rem;
  background:none;
  border:none;
  padding:.15rem;
  cursor:pointer;
  font-size:1.05rem;
  line-height:1;
}

/* -----------------------------------------------------------------
   Antwort-Buttons
----------------------------------------------------------------- */
.cw-controls{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  margin-top:.6rem;
}

.cw-answer-btn{
  padding:var(--cw-spacing-sm) var(--cw-spacing-lg);
  border:1px solid var(--cw-color-border);
  background:var(--cw-color-bg);
  color:inherit;
  border-radius:4px;
  cursor:pointer;
  font:inherit;
}

.cw-answer-btn[aria-pressed="true"]{
  background:var(--cw-color-primary);
  color:#fff;
  border-color:var(--cw-color-primary);
}


/* -----------------------------------------------------------------
   Hinweis-Box bei falscher Antwort
----------------------------------------------------------------- */
/* Hinweis-Box bei falscher Aussage */
.cw-false-msg{
  display:none;
  margin-top:.5rem;
  padding:.75rem;
  border:1px solid #e6cb00;   /* leicht dunklerer Rahmen */
  background:#F5F37D;        /* deine Wunschfarbe */
  border-radius:4px;
  font-size:1rem;
  color:#000;                /* gute Lesbarkeit auf Gelb */
}


/* -----------------------------------------------------------------
   Fokus (Accessibility)
----------------------------------------------------------------- */
.cw-term-toggle:focus-visible,
.cw-answer-btn:focus-visible,
.cw-info-close:focus-visible{
  outline:2px solid var(--cw-color-primary);
  outline-offset:2px;
}


/* -----------------------------------------------------------------
   Terminal-Box nach End-Statement
----------------------------------------------------------------- */
.cw-terminal-box{
  margin-top:.75rem;
  padding:.85rem;
  border:1px solid #2b8e2b;    /* dezenter Grünton */
  background:#e8f7e8;
  border-radius:4px;
  font-size:1rem;
  color:#084008;
}

/* -----------------------------------------------------------------
   Utility – für [hidden]
----------------------------------------------------------------- */
[hidden]{
  display:none !important;
}