/* =========================================================================
   Brüche / Teiler und Vielfache / Erweitern und Kürzen – Lernziele 6.1
   Freundliches Schulbuch-Design, zwei Niveaus als Farbcode.
   ========================================================================= */

:root {
  --papier:        #fffdf6;
  --karte:         #ffffff;
  --text:          #2c2a26;
  --text-leise:    #6b6558;
  --linie:         #e6e0d2;

  /* Grundanforderungen: limettengelb-grün */
  --grund:         #a7c810;
  /* Für gefärbte Modellteile etwas tiefer: sonst heben sie sich auf hellem
     Grund zu wenig von den leeren Teilen ab (nötig sind 3:1). */
  --grund-modell:  #7d9a0a;
  --grund-hell:    #f4fadd;
  --grund-dunkel:  #5f7404;

  /* Erweiterte Anforderungen: grün */
  --erw:           #2fa060;
  --erw-modell:    #23794a;
  --erw-hell:      #e6f6ec;
  --erw-dunkel:    #1d6b3f;

  /* Diese beiden sind zugleich die Schriftfarbe der Rückmeldung – deshalb
     dunkel genug für Text (4.5:1), nicht nur für Rahmen (3:1). */
  --richtig:       #19783f;
  --richtig-hell:  #e4f7ea;
  --nochmal:       #a55407;
  --nochmal-hell:  #fdf0df;
  --info:          #2b6cb0;
  --info-hell:     #e8f1fb;

  --fokus:         #1b4ed8;
  /* Farben der SVG-Modelle */
  --svg-leer:      #fffdf6;
  --svg-strich:    #3b372f;
  --svg-kante:     #6b6558;
  --w-leer-front:  #f3efe3;
  --w-leer-deck:   #fffdf6;
  --w-leer-seite:  #ddd6c6;
  --w-voll-front:  #2b8154;
  --w-voll-deck:   #3aa367;
  --w-voll-seite:  #1f6340;

  --radius:        16px;
  --schatten:      0 2px 10px rgba(70, 60, 30, .08);
}

/* Dunkelmodus: automatisch nach Systemeinstellung … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --papier:       #1e1c19;
    --karte:        #2a2722;
    --text:         #f3efe6;
    --text-leise:   #b3ab9b;
    --linie:        #453f36;
    --grund-hell:   #333a16;
    --grund-dunkel: #d7ea77;
    --erw-hell:     #1c3a28;
    --erw-dunkel:   #8fe0b0;
    --richtig-hell: #1b3a27;
    --richtig:      #7fe0a4;
    --nochmal-hell: #3d2c14;
    --nochmal:      #f5bd6e;
    --info-hell:    #1f2f42;
    --info:         #9dc6f2;
    --fokus:        #8ab4ff;
    --grund-modell: #a7c810;
    --erw-modell:   #4fc98a;
    --svg-leer:     #3a352c;
    --svg-strich:   #d8d1c1;
    --svg-kante:    #a49c8b;
    --w-leer-front: #3a352c;
    --w-leer-deck:  #4a4437;
    --w-leer-seite: #2e2a23;
    --w-voll-front: #35a068;
    --w-voll-deck:  #52c185;
    --w-voll-seite: #2e9761;
    --schatten:     0 2px 10px rgba(0, 0, 0, .35);
  }
}
/* … oder per Knopf erzwungen. */
:root[data-theme="dunkel"] {
  --papier:       #1e1c19;
  --karte:        #2a2722;
  --text:         #f3efe6;
  --text-leise:   #b3ab9b;
  --linie:        #453f36;
  --grund-hell:   #333a16;
  --grund-dunkel: #d7ea77;
  --erw-hell:     #1c3a28;
  --erw-dunkel:   #8fe0b0;
  --richtig-hell: #1b3a27;
  --richtig:      #7fe0a4;
  --nochmal-hell: #3d2c14;
  --nochmal:      #f5bd6e;
  --info-hell:    #1f2f42;
  --info:         #9dc6f2;
  --fokus:      #8ab4ff;
  --grund-modell: #a7c810;
  --erw-modell:   #4fc98a;
  --svg-leer:   #3a352c;
  --svg-strich:   #d8d1c1;
  --svg-kante:  #a49c8b;
  --w-leer-front: #3a352c;
  --w-leer-deck:  #4a4437;
  --w-leer-seite: #2e2a23;
  --w-voll-front: #35a068;
  --w-voll-deck:  #52c185;
  --w-voll-seite: #2e9761;
  --schatten:     0 2px 10px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; line-height: 1.2; margin: 0; }

a { color: var(--info); }

/* Sichtbarer Fokusrahmen überall.
   Kein label:focus-within – sonst bekommen bei den Feldern in einem <label>
   (ggT/kgV) Feld und Label gleichzeitig einen Rahmen. Die Ja/Nein-Felder
   haben ihre eigene Regel (.chip input:focus-visible + span). */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 8px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--karte); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

/* Text, der nur für Screenreader da ist: «✔ 3» allein sagt nichts, und ein
   title-Tooltip gibt es auf dem Handy gar nicht. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------- Kopfzeile ----------------------------- */
.kopf {
  background: linear-gradient(135deg, #a7c810 0%, #5fb85c 55%, #2fa060 100%);
  color: #14260a;
  padding: 26px 18px 30px;
}
.kopf-inhalt { max-width: 940px; margin: 0 auto; }
.kopf-fach {
  margin: 0 0 6px; font-weight: 700; font-size: .85rem;
  letter-spacing: .09em; text-transform: uppercase; opacity: .8;
}
.kopf h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); }
.countdown {
  margin: 12px 0 0; font-size: 1.1rem; font-weight: 600;
  background: rgba(255, 255, 255, .75); color: #23400e;
  display: inline-block; padding: 7px 16px; border-radius: 99px;
}
.kopf-leiste { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.badge {
  background: #14260a; color: #f2ffd6; padding: 7px 15px;
  border-radius: 99px; font-size: .95rem; font-weight: 600;
}
.theme-knopf {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, .8); color: #23400e;
  border: 2px solid rgba(20, 38, 10, .25); border-radius: 99px;
  padding: 7px 15px; min-height: 40px;
}
.theme-knopf { text-decoration: none; display: inline-flex; align-items: center; }
/* Ein verstecktes Element bleibt versteckt – auch wenn die Regel darüber
   ihm ein display gibt (sonst zeigte sich der Dunkelmodus-Knopf trotzdem). */
[hidden] { display: none !important; }
.theme-knopf:hover { background: #fff; }

/* ------------------------------ Inhalt ------------------------------ */
.inhalt { max-width: 940px; margin: 0 auto; padding: 22px 16px 40px; }
.einleitung {
  background: var(--info-hell); border-left: 6px solid var(--info);
  border-radius: 12px; padding: 14px 18px; margin: 0 0 26px;
}

/* Niveaus */
.niveau { border-radius: var(--radius); padding: 4px 0 18px; margin-bottom: 34px; }
.niveau-kopf { padding: 18px 20px 6px; }
.niveau-kopf h2 { font-size: 1.6rem; }
.niveau-kopf p { margin: 6px 0 0; color: var(--text-leise); }

.niveau-grund { background: var(--grund-hell); border: 3px solid var(--grund); }
.niveau-grund .niveau-kopf h2 { color: var(--grund-dunkel); }
.niveau-grund .nummer { background: var(--grund); color: #1d2600; }
.niveau-grund .modell .voll { fill: var(--grund-modell); }

.niveau-erw { background: var(--erw-hell); border: 3px solid var(--erw); }
.niveau-erw .niveau-kopf h2 { color: var(--erw-dunkel); }
.niveau-erw .nummer { background: var(--erw); color: #fff; }
.niveau-erw .modell .voll { fill: var(--erw-modell); }

/* Übungskarten */
.uebung {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  margin: 16px 14px; padding: 16px 18px 12px;
  scroll-margin-top: 14px;
}
.uebung-kopf { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.uebung-kopf > div { flex: 1 1 240px; }
/* h2 auf der Tagesseite, h3 im freien Üben – gleiche Optik. */
.uebung-kopf h2, .uebung-kopf h3 { font-size: 1.25rem; }
.nummer {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  font-family: 'Baloo 2', sans-serif;
}
.lernziel { margin: 4px 0 0; color: var(--text-leise); font-size: .94rem; }
/* Emoji vor dem Übungstitel: eigene Schriftkette, damit es überall bunt erscheint */
.icon { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-style: normal; }
/* Punkte-Chip im Übungskopf. Achtung: NICHT «.zaehler» nennen – diese Klasse
   gehört zum Zähler eines Bruchs (siehe .bruch .zaehler). */
.punkte-chip {
  flex: 0 0 auto; background: var(--richtig-hell); color: var(--richtig);
  border-radius: 99px; padding: 5px 13px; font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.quelle { margin: 8px 2px 0; font-size: .8rem; color: var(--text-leise); font-style: italic; }

/* ----------------------------- Aufgaben ----------------------------- */
.aufgabe { margin-top: 14px; }
.frage { margin: 0 0 12px; font-size: 1.08rem; font-weight: 600; line-height: 2.1; }
.hinweis { margin: 10px 0 0; font-size: .9rem; color: var(--text-leise); }
.schritt-marken { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 8px 0 0; font-size: .85rem; color: var(--text-leise); }

.modell-box { display: flex; justify-content: center; padding: 8px 0 14px; }
.modell { width: 100%; max-width: 200px; height: auto; }
.modell-breit { max-width: 340px; }
.modell-wuerfel { max-width: 330px; }
.modell-paar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.modell-paar .modell-box { padding: 8px 0; }
.pfeil { font-size: 1.8rem; color: var(--text-leise); }

/* SVG-Teile */
.modell .teil { stroke: var(--svg-kante); stroke-width: 1.5; }
.modell .leer { fill: var(--svg-leer); }
.modell .voll { fill: var(--grund-modell); }
.modell .haupt { stroke: var(--svg-strich); stroke-width: 3; fill: none; }
.modell .strecke-linie { stroke: var(--svg-strich); stroke-width: 2; }
.modell .mark { font-family: 'Nunito', sans-serif; font-size: 15px; fill: var(--text-leise); }

/* Würfelgebäude */
.modell-wuerfel polygon, .modell-wuerfel rect { stroke: var(--svg-strich); stroke-width: 1.6; }
.w-leer.front { fill: var(--w-leer-front); }
.w-leer.deck  { fill: var(--w-leer-deck); }
.w-leer.seite { fill: var(--w-leer-seite); }
.w-voll.front { fill: var(--w-voll-front); }
.w-voll.deck  { fill: var(--w-voll-deck); }
.w-voll.seite { fill: var(--w-voll-seite); }

/* ------------------------- Brüche und Eingaben ------------------------- */
.rechnung {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px;
  background: var(--papier); border: 2px dashed var(--linie);
  border-radius: 12px; padding: 14px 12px;
}
.rechnung-spalten { gap: 14px 30px; }
.op { font-size: 1.5rem; font-weight: 700; font-family: 'Baloo 2', sans-serif; }
.zahl { font-size: 1.6rem; font-weight: 700; font-family: 'Baloo 2', sans-serif; }
.einheit { font-size: 1.15rem; font-weight: 600; color: var(--text-leise); }

/* Bruch als echter Stapel */
.bruch {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  line-height: 1.05;
}
.bruch .zaehler, .bruch .nenner { font-size: 1.7rem; padding: 0 .28em; }
.bruch .strich {
  display: block; width: 100%; min-width: 2.1em; height: 3px;
  background: currentColor; border-radius: 3px; margin: 3px 0;
}
.bruch.klein .zaehler, .bruch.klein .nenner { font-size: 1.15rem; }
.bruch.klein .strich { height: 2px; }
.bruch-eingabe .strich { min-width: 4.6em; height: 4px; }

.feld {
  font: inherit; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.35rem;
  width: 4.6em; min-height: 50px; text-align: center;
  color: var(--text); background: var(--karte);
  border: 2px solid var(--linie); border-radius: 10px; padding: 4px 6px;
}
.feld-breit { width: 5.4em; }
.feld:focus { border-color: var(--fokus); }
.feld::placeholder { color: var(--text-leise); opacity: .6; }
.feld-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }

/* Ja/Nein-Auswahl */
.wahl { gap: 14px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; min-width: 120px; min-height: 54px;
  padding: 8px 22px; border-radius: 99px; font-size: 1.2rem; font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
  background: var(--karte); border: 3px solid var(--linie);
}
.chip input:checked + span { background: var(--info-hell); border-color: var(--info); color: var(--info); }
.chip input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ----------------------------- Feedback ----------------------------- */
.feedback {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 0; padding: 13px 16px; border-radius: 12px;
  font-weight: 600; border: 2px solid transparent;
}
.fb-icon { font-size: 1.25rem; line-height: 1.2; }
.fb-richtig { background: var(--richtig-hell); border-color: var(--richtig); color: var(--richtig); }
.fb-falsch  { background: var(--nochmal-hell); border-color: var(--nochmal); color: var(--nochmal); }
.fb-leer    { background: var(--info-hell);    border-color: var(--info);    color: var(--info); }

/* ------------------------------ Knöpfe ------------------------------ */
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px;
  border-radius: 99px; border: 2px solid transparent;
  background: var(--karte); color: var(--text);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn-pruefen { background: var(--erw); border-color: var(--erw-dunkel); color: #fff; font-size: 1.05rem; }
.btn-hilfe   { background: var(--info-hell); border-color: var(--info); color: var(--info); }
.btn-neu     { background: var(--karte); border-color: var(--linie); color: var(--text-leise); }
.btn-reset   { background: var(--karte); border-color: var(--linie); color: var(--text-leise); font-size: .95rem; }

/* --------------------------- Lösungsweg --------------------------- */
.loesungsweg {
  margin-top: 16px; padding: 14px 18px;
  background: var(--info-hell); border-left: 6px solid var(--info); border-radius: 12px;
}
/* h3 auf der Tagesseite, h4 im freien Üben – gleiche Optik. */
.loesungsweg h3, .loesungsweg h4 { font-size: 1.1rem; margin-bottom: 6px; }
.loesungsweg ol { margin: 0; padding-left: 22px; }
.loesungsweg li { margin: 5px 0; }

/* --------------------------- Merkkarte --------------------------- */
.abschluss {
  background: var(--karte); border: 3px dashed var(--grund);
  border-radius: var(--radius); padding: 18px 20px 22px; margin-bottom: 24px;
}
.abschluss h2 { font-size: 1.45rem; margin-bottom: 8px; }
.merkkarte { margin: 0 0 16px; padding-left: 22px; }
.merkkarte li { margin: 7px 0; }
.reset-form { margin-top: 8px; }

.zurueck { text-align: center; margin: 8px 0 0; }
.zurueck a { font-weight: 700; text-decoration: none; }
.zurueck a:hover { text-decoration: underline; }

.fuss {
  text-align: center; padding: 18px 16px 28px;
  color: var(--text-leise); font-size: .85rem;
}

/* --------------------------- Kleine Schirme --------------------------- */
@media (max-width: 560px) {
  .uebung { margin: 12px 8px; padding: 14px 12px 10px; }
  .rechnung { gap: 8px 10px; padding: 12px 8px; }
  .bruch .zaehler, .bruch .nenner { font-size: 1.45rem; }
  .feld { width: 3.9em; font-size: 1.2rem; }
  .knoepfe .btn { flex: 1 1 100%; }
  .pfeil { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}

/* =========================================================================
   Trainingsplan (index.php), Trainingstag (tag.php) und freies Üben
   ========================================================================= */

/* ---------------------------- Stufen-Chips ---------------------------- */
.chip-stufe {
  background: #14260a; color: #f2ffd6; padding: 7px 15px;
  border-radius: 99px; font-size: .95rem; font-weight: 700;
}
.chip-heute, .chip-morgen, .chip-vorbei {
  display: inline-block; margin-left: 8px; padding: 3px 12px;
  border-radius: 99px; font-size: .8rem; font-weight: 700;
  vertical-align: middle;
}
.chip-heute  { background: var(--nochmal); color: #fff; }
.chip-morgen { background: var(--info); color: #fff; }
.chip-vorbei { background: var(--linie); color: var(--text-leise); }

/* ---------------------------- Fortschritt ---------------------------- */
.fortschritt {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--schatten);
}
.fortschritt-klein { box-shadow: none; background: transparent; border: none; padding: 4px 0 0; margin-bottom: 10px; }
.fortschritt-text {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  font-size: .95rem; margin-bottom: 8px;
}
.balken { height: 12px; background: var(--linie); border-radius: 99px; overflow: hidden; }
.balken-fuellung {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--grund), var(--erw));
}

/* ---------------------------- Plan-Liste ---------------------------- */
.plan-liste { list-style: none; margin: 0 0 28px; padding: 0; }
.plan-tag {
  position: relative;                 /* Anker für das Häkchen oben rechts */
  background: var(--karte); border: 3px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 18px 20px 16px; margin-bottom: 18px;
}
.plan-stufe-1 { border-color: var(--grund); }
.plan-stufe-2 { border-color: var(--erw); }
.plan-stufe-3 { border-color: var(--info); }
.plan-dran { box-shadow: 0 0 0 4px var(--nochmal-hell), var(--schatten); }
.plan-fertig { background: var(--richtig-hell); }

.plan-kopf { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding-right: 32px; }
.plan-nummer {
  flex: 0 0 auto; background: var(--text); color: var(--papier);
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 6px 14px; border-radius: 99px;
}
.plan-stufe-1 .plan-nummer { background: var(--grund); color: #1d2600; }
.plan-stufe-2 .plan-nummer { background: var(--erw); color: #fff; }
.plan-stufe-3 .plan-nummer { background: var(--info); color: #fff; }
.plan-titel-box { flex: 1 1 240px; }
.plan-titel-box h2 { font-size: 1.4rem; }
.plan-datum { margin: 2px 0 0; color: var(--text-leise); font-size: .95rem; }
/* Häkchen immer oben rechts in der Karte – sonst rutscht es auf dem Handy
   als eigene Zeile unter das Datum. */
.plan-haken { position: absolute; top: 14px; right: 14px; font-size: 1.6rem; color: var(--richtig); line-height: 1; }
.plan-fokus { margin: 10px 0 14px; }

.plan-fakten {
  list-style: none; margin: 0 0 6px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.plan-fakten li {
  flex: 1 1 120px; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 12px; padding: 9px 12px; text-align: center;
}
.fakt-wert {
  display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 1.15rem; line-height: 1.2;
}
.fakt-label { display: block; font-size: .78rem; color: var(--text-leise); }

/* ------------------------- Freies Üben (Box) ------------------------- */
.frei-box {
  background: var(--karte); border: 3px dashed var(--info);
  border-radius: var(--radius); padding: 18px 20px 20px; margin-bottom: 24px;
}
.frei-box h2 { font-size: 1.45rem; margin-bottom: 8px; }
.rubrik-spickzettel {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rubrik-spickzettel a {
  display: inline-block; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 99px; padding: 7px 14px; font-size: .88rem; font-weight: 600;
  text-decoration: none; color: var(--text); min-height: 38px;
}
.rubrik-spickzettel a:hover { border-color: var(--info); color: var(--info); }

/* --------------------------- Trainingstag --------------------------- */
.kopf-tag { background: linear-gradient(135deg, #2fa060 0%, #3aa7a0 60%, #2b6cb0 100%); color: #062018; }
.kopf-tag .countdown, .kopf-tag .theme-knopf { color: #062018; }
.kopf-tag .badge { background: #062018; color: #e8fff5; }

.uebung-solo { margin: 0 0 18px; padding: 18px 20px 14px; }
.uebung-solo .punkte-chip { background: var(--grund-hell); color: var(--grund-dunkel); }
.uebung-solo .punkte-chip-erw { background: var(--erw-hell); color: var(--erw-dunkel); }
.solo-grund .nummer { background: var(--grund); color: #1d2600; }
.solo-erw .nummer { background: var(--erw); color: #fff; }
.solo-erw .modell .voll { fill: var(--erw-modell); }
.hinweis-mitte { text-align: center; max-width: 620px; margin: 0 auto 18px; }

/* ------------------------- Tagesauswertung ------------------------- */
.abschluss-tag { border-color: var(--erw); }
.abschluss-tag h2 { font-size: 1.7rem; }
.ergebnis-zahlen { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 18px; }
.ergebnis-kachel {
  flex: 1 1 150px; background: var(--papier); border: 2px solid var(--linie);
  border-radius: 14px; padding: 14px 12px; text-align: center;
}
.ergebnis-kachel .gross {
  display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.7rem;
  line-height: 1.1; color: var(--erw-dunkel);
}
.ergebnis-kachel .klein { display: block; font-size: .82rem; color: var(--text-leise); margin-top: 4px; }
.abschluss-text { margin: 0 0 18px; font-weight: 600; }
.rubrik-titel { font-size: 1.2rem; margin-bottom: 8px; }
.rubrik-liste { list-style: none; margin: 0 0 18px; padding: 0; }
.rubrik-liste li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linie);
  margin-bottom: 7px; background: var(--papier);
}
.rubrik-liste li.rubrik-ok { border-color: var(--richtig); background: var(--richtig-hell); }
.rubrik-liste li.rubrik-offen { border-color: var(--nochmal); background: var(--nochmal-hell); }
.rubrik-icon { font-size: 1.1rem; width: 1.3em; text-align: center; }
.rubrik-name { flex: 1 1 200px; font-weight: 600; }
.rubrik-zahl { font-family: 'Baloo 2', sans-serif; font-weight: 700; }
.rubrik-link { font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rubrik-link:hover { text-decoration: underline; }

.knoepfe-mitte { justify-content: center; align-items: center; }
.knoepfe-mitte form { margin: 0; }
.reset-mitte { text-align: center; margin-bottom: 12px; }

/* --------------------------- Stufenwahl --------------------------- */
.stufen-wahl {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 22px; box-shadow: var(--schatten);
}
.stufen-label { font-weight: 700; }
.btn-stufe {
  min-height: 46px; padding: 10px 18px; font-size: .95rem;
  border-color: var(--linie); color: var(--text-leise);
}
.btn-stufe-aktiv { background: var(--info-hell); border-color: var(--info); color: var(--info); }
.stufen-hinweis { flex: 1 1 100%; margin: 0; }

@media (max-width: 560px) {
  .plan-tag { padding: 14px 13px 12px; }
  .plan-fakten li { flex: 1 1 45%; }
  .knoepfe-mitte .btn, .knoepfe-mitte form { flex: 1 1 100%; }
  .knoepfe-mitte form .btn { width: 100%; }
}

/* Der Fortschrittsbalken des Trainingstags trägt die Farbe seiner Stufe –
   gleiche Zuordnung wie die Tageskarten im Plan (siehe .plan-stufe-*). */
body.stufe-1 .balken-fuellung { background: linear-gradient(90deg, var(--grund), #d4e86a); }
body.stufe-2 .balken-fuellung { background: linear-gradient(90deg, var(--erw), #74d6a0); }
body.stufe-3 .balken-fuellung { background: linear-gradient(90deg, var(--info), #85b8ec); }

/* Bestes Ergebnis eines Tages (bleibt sichtbar, auch wenn ein neuer Versuch läuft) */
.plan-bestes {
  margin: 8px 0 0; padding: 7px 12px; font-size: .92rem;
  background: var(--richtig-hell); color: var(--richtig);
  border-radius: 10px; font-weight: 600;
}

/* Schwachstellen-Übersicht auf der Planseite */
.schwach-box {
  background: var(--karte); border: 3px solid var(--nochmal);
  border-radius: var(--radius); padding: 18px 20px 20px; margin-bottom: 24px;
}
.schwach-box h2 { font-size: 1.35rem; margin-bottom: 8px; color: var(--nochmal); }
.schwach-box p { margin-bottom: 14px; }

/* =========================================================================
   Druckansicht: gedruckt wird die Merkkarte für die Prüfung – Bedienelemente,
   Aufgaben und Navigation gehören nicht auf Papier.
   ========================================================================= */
@media print {
  /* Papier ist immer hell. Ohne diese Rücksetzung druckt der Dunkelmodus
     schwarze Kästen mit heller Schrift – viel Toner und schlecht lesbar. */
  :root, :root[data-theme="dunkel"], :root:not([data-theme="hell"]) {
    --papier: #fff; --karte: #fff; --text: #000; --text-leise: #333;
    --linie: #999; --grund-hell: #fff; --erw-hell: #fff;
    --richtig-hell: #fff; --nochmal-hell: #fff; --info-hell: #fff;
    --svg-leer: #fff; --svg-strich: #000; --svg-kante: #555;
    --w-leer-front: #fff; --w-leer-deck: #fff; --w-leer-seite: #eee;
    /* Auch alle übrigen Töne, die sich im Dunkelmodus ändern, auf die hellen
       Werte – sonst drucken etwa die Zähler-Chips fast schwarz. */
    --grund-dunkel: #5f7404; --erw-dunkel: #1d6b3f;
    --grund-modell: #7d9a0a; --erw-modell: #23794a;
    --richtig: #19783f; --nochmal: #a55407; --info: #2b6cb0; --fokus: #1b4ed8;
    --w-voll-front: #2b8154; --w-voll-deck: #3aa367; --w-voll-seite: #1f6340;
    --schatten: none;
  }
  .kopf, .einleitung, .plan-liste, .frei-box, .schwach-box, .stufen-wahl,
  .uebung, .niveau-kopf, .knoepfe, .reset-form, .zurueck, .fuss, .skip,
  .fortschritt, .theme-knopf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .inhalt { max-width: none; padding: 0; }
  .niveau { border: none; background: none; padding: 0; margin: 0; }
  .abschluss {
    border: 1px solid #444; border-radius: 0; padding: 12px 14px;
    page-break-inside: avoid; background: none;
  }
  .abschluss h2 { font-size: 14pt; }
  .merkkarte li { margin: 5px 0; }
  a { color: #000; text-decoration: none; }

  /* Der Trainingsplan soll aufs Papier passen: ausgedruckt hängt er am
     Kühlschrank und beantwortet die Frage «was ist wann dran». Ohne diese
     Ausnahmen käme ein leeres Blatt aus dem Drucker, weil die allgemeinen
     Druckregeln oben genau die Teile ausblenden, aus denen der Plan besteht. */
  .seite-plan .kopf,
  .seite-plan .einleitung,
  .seite-plan .plan-liste { display: block !important; }
  .seite-plan .kopf {
    background: none !important; color: #000; box-shadow: none;
    padding: 0 0 10px; border-bottom: 1px solid #444; margin-bottom: 10px;
  }
  .seite-plan .kopf h1 { font-size: 16pt; margin: 0 0 4px; }
  .seite-plan .kopf-leiste, .seite-plan .theme-knopf { display: none !important; }
  .seite-plan .plan-liste { list-style: none; padding: 0; margin: 0; }
  .seite-plan .plan-tag {
    page-break-inside: avoid; break-inside: avoid;
    border: 1px solid #444; border-radius: 0; background: none;
    padding: 8px 10px; margin: 0 0 8px;
  }
  .seite-plan .plan-tag h2 { font-size: 12pt; margin: 0; }
  .seite-plan .plan-fakten { display: flex; gap: 14px; flex-wrap: wrap; padding: 0; list-style: none; }
  .seite-plan .plan-haken, .seite-plan .fortschritt { display: none !important; }
  /* Markierungen als Rahmen statt als Farbfläche: spart Toner und bleibt auch
     auf einem Schwarz-Weiss-Drucker lesbar. */
  /* Der Abschlusskasten wird gern ausgedruckt (er steht am Ende des Plans) –
     darum ausdrücklich ohne Farbfläche, unabhängig vom eingestellten Thema. */
  .plan-fertig-box, .schwach-box {
    background: none !important; border: 1px solid #444; color: #000;
    page-break-inside: avoid; break-inside: avoid;
  }
  .chip-heute, .chip-morgen, .chip-vorbei, .badge, .punkte-chip {
    background: none !important; color: #000 !important;
    border: 1px solid #666; font-weight: 700;
  }
}

/* Rückfrage vor dem Löschen des Fortschritts */
.reset-frage {
  background: var(--nochmal-hell); border: 3px solid var(--nochmal);
  border-radius: var(--radius); padding: 18px 20px; margin: 26px 0 10px;
  text-align: center;
}
.reset-frage h2 { margin: 0 0 8px; }
.reset-frage p { margin: 0 auto 14px; max-width: 60ch; }
/* Bei einer unwiderruflichen Aktion muss die sichere Wahl ins Auge springen
   und die löschende deutlich anders aussehen – sonst trifft ein schneller
   Klick das Falsche. */
.reset-frage .btn-neu {
  background: var(--erw); border-color: var(--erw-dunkel); color: #fff; font-weight: 700;
}
.reset-frage .btn-reset {
  background: var(--karte); border-color: var(--nochmal); color: var(--nochmal);
  font-weight: 600;
}

/* Abschluss des ganzen Trainingsplans */
.plan-fertig-box {
  background: var(--erw-hell); border: 3px solid var(--erw);
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0;
  text-align: center;
}
.plan-fertig-box h3 { margin: 0 0 8px; font-size: 1.25rem; }
.plan-fertig-box p { margin: 0 auto 8px; max-width: 62ch; }
.plan-fertig-box p:last-child { margin-bottom: 0; }