/* lernen.css — der Lernbereich im Stil des Wochenplans.
   Ruhig und gut lesbar: Inter bzw. die Systemschrift, normale Strichstaerken, Farbe als Akzent
   (Streifen, Symbol, Fortschritt) statt als Flaeche. Fachfarben kommen aus derselben Gruppen-
   logik wie im Kalender (server/katalog: Sprachen violett, MINT gruen, Gesellschaft bernstein,
   Musisches rosa, Sport tuerkis, Werte schiefergrau). Vorgabe Tassilo 04.10.2026: "farbig,
   aber nicht zu bunt, professionelle Icons wie im Kalender, gut leserlich, nicht so viel Fett". */

:root{
  --tinte:#101828; --leise:#667085; --linie:#e4e7ec; --papier:#fff; --grund:#f4f6fb;
  --akzent:#6d5dfc; --akzent-hell:#f1efff; --akzent-dunkel:#4f46e5;
  --gut:#059669; --gut-hell:#ecfdf5; --schlecht:#dc2626; --schlecht-hell:#fef2f2;
  --warn:#d97706; --warn-hell:#fffbeb; --irrtum:#be185d; --irrtum-hell:#fdf2f8;
  --schatten:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
  --rund:16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; color:var(--tinte); background:var(--grund);
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 92% 0,#ece9ff 0,transparent 24rem),var(--grund)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.01em;line-height:1.2;font-weight:650}
h3{font-size:1rem;margin:4px 0 10px}
b,strong{font-weight:600}
a{color:var(--akzent-dunkel);font-weight:500}
code{background:#f2f4f7;border-radius:6px;padding:1px 6px;font-size:.88em}
.klein{color:var(--leise);font-size:.875rem}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);margin:0}

/* --- Symbole ------------------------------------------------------------- */
.ikon{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
[data-ikon]{display:inline-flex;align-items:center}
.marke{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--tinte);color:#fff}
.marke .ikon{width:18px;height:18px}
.marke.gross{width:56px;height:56px;border-radius:14px}
.marke.gross .ikon{width:28px;height:28px}

/* --- Knoepfe: flach, wie im Kalender ------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linie);
  border-radius:12px;padding:11px 16px;font-weight:600;font-size:.95rem;background:var(--papier);color:var(--tinte);
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s}
.knopf:hover{border-color:#cfd4dc;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.knopf.haupt{background:var(--tinte);border-color:var(--tinte);color:#fff}
.knopf.haupt:hover{background:#1d2939}
.knopf.gut{background:var(--gut);border-color:var(--gut);color:#fff}
.knopf.schlecht{background:var(--schlecht);border-color:var(--schlecht);color:#fff}
.knopf.irrtum{background:var(--irrtum);border-color:var(--irrtum);color:#fff}
.knopf.knopf:disabled{background:#f2f4f7;border-color:var(--linie);color:#98a2b3;cursor:not-allowed;box-shadow:none}
.knopf.breit{width:100%} .knopf.gross{padding:14px 18px;font-size:1rem}
.textknopf{background:none;border:0;color:var(--akzent-dunkel);font-weight:600;cursor:pointer;padding:8px}
.abzeichen{background:rgba(255,255,255,.18);border-radius:99px;padding:1px 9px;font-size:.85rem;font-weight:600}

/* --- Anmeldung ----------------------------------------------------------- */
.tor{min-height:100vh;display:grid;place-items:center;padding:20px}
.tor-karte{background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:30px 26px;width:min(420px,100%);
  box-shadow:var(--schatten);text-align:center}
.tor-titel{font-size:1.75rem;margin-top:14px}
.tor-unter{color:var(--leise);margin:6px 0 22px}
.stapel{display:grid;gap:12px;text-align:left}
label{display:grid;gap:6px;font-weight:500;font-size:.9rem}
input,textarea,select{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;background:#fff;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-hell)}
.meldung{border-radius:10px;padding:10px 12px;font-weight:500;margin:12px 0 0;font-size:.92rem}
.meldung.rot{background:var(--schlecht-hell);color:#b42318} .meldung.gruen{background:var(--gut-hell);color:#047857}

/* --- Kopf ----------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf-marke{display:flex;align-items:center;gap:10px;background:none;border:0;font-weight:650;font-size:1.05rem;cursor:pointer;padding:0}
.kopf-werte{display:flex;align-items:center;gap:8px}
.wert{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--linie);border-radius:99px;padding:4px 10px;font-size:.9rem;background:#fff}
.wert .ikon{color:var(--leise)} .wert b{font-weight:600}
.ring{--p:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--akzent) calc(var(--p)*1%),#e9e7fb 0)}
.kopf-knopf{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--linie);background:#fff;color:var(--tinte)}
.kopf-knopf .ikon{width:20px;height:20px}
.ring > span{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:600;letter-spacing:-.02em}
.ring.voll > span{color:var(--akzent-dunkel)} .ring.voll .ikon{width:18px;height:18px}

main{max-width:880px;margin:0 auto;padding:20px 16px 110px}

/* --- Start --------------------------------------------------------------- */
.begruessung{margin:4px 0 16px}
.begruessung h1{font-size:1.75rem;margin-top:4px}
.ziel-karte{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--rund);
  margin-bottom:18px;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten)}
.ziel-ring{--p:0;width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#fff 80%,transparent 81% 100%),conic-gradient(var(--akzent) calc(var(--p)*1%),#e9e7fb 0)}
.ziel-ring > span{font-size:1.3rem;font-weight:650;line-height:1} .ziel-ring small{font-size:.7rem;color:var(--leise)}
.ziel-text{display:grid;gap:2px} .ziel-text strong{font-size:1.05rem} .ziel-text span{color:var(--leise);font-size:.9rem}

.fach{margin-top:12px;background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);padding:0 14px}
.fach-titel{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;padding:12px 0;cursor:pointer;list-style:none}
.fach-titel::-webkit-details-marker{display:none}
.fach-titel::after{content:"";width:8px;height:8px;border-right:1.75px solid var(--leise);border-bottom:1.75px solid var(--leise);
  transform:rotate(45deg);margin-left:6px;transition:transform .15s}
details.fach[open] > .fach-titel::after{transform:rotate(-135deg)}
.fach-titel .fach-ikon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:color-mix(in srgb,var(--fachfarbe) 12%,#fff);color:var(--fachfarbe)}
.fach-zahl{margin-left:auto;font-size:.82rem;color:var(--leise);font-weight:400}
.themen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:2px 0 14px}
.thema-karte{position:relative;text-align:left;border:1px solid var(--linie);border-left:4px solid var(--fachfarbe);
  border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--papier);display:grid;gap:8px;transition:box-shadow .15s,border-color .15s}
.thema-karte:hover{box-shadow:var(--schatten);border-color:#cfd4dc;border-left-color:var(--fachfarbe)}
.thema-karte strong{font-size:.95rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.thema-karte small{color:var(--leise);font-size:.8rem}
.balken-klein{height:6px;border-radius:99px;background:#eef0f4;overflow:hidden;display:flex}
.balken-klein i{display:block;height:100%} .balken-klein .s{background:var(--fachfarbe)}
.balken-klein .l{background:color-mix(in srgb,var(--fachfarbe) 35%,#fff)}
.leer{text-align:center;color:var(--leise);padding:30px}

/* --- Thema --------------------------------------------------------------- */
.thema-kopf{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:var(--rund);margin-bottom:14px;
  background:var(--papier);border:1px solid var(--linie);border-top:4px solid var(--fachfarbe,var(--akzent))}
.thema-kopf small{color:var(--leise);font-size:.82rem} .thema-kopf h2{font-size:1.3rem;margin-top:2px}
.thema-kopf .klein{margin:4px 0 0}
.thema-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;flex:none;
  background:color-mix(in srgb,var(--fachfarbe,var(--akzent)) 12%,#fff);color:var(--fachfarbe,var(--akzent))}
.thema-symbol .ikon{width:22px;height:22px}
.zurueck{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--linie);background:#fff;cursor:pointer;display:grid;place-items:center}
.reiter{display:inline-flex;gap:4px;background:#eceef3;border-radius:12px;padding:4px;margin-bottom:16px}
.reiter-knopf{display:inline-flex;align-items:center;gap:7px;border:0;background:none;border-radius:9px;padding:8px 14px;font-weight:500;cursor:pointer;color:var(--leise)}
.reiter-knopf.aktiv{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(16,24,40,.1)}

.pfad{display:grid;gap:0;padding:4px 0 30px}
.stufe{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;position:relative}
.stufe::before{content:"";position:absolute;left:21px;top:42px;bottom:-6px;width:2px;background:var(--linie)}
.stufe:last-child::before{display:none}
.stufe-huelle{display:grid;place-items:center}
.stufe button{width:44px;height:44px;border-radius:50%;border:2px solid var(--fachfarbe,var(--akzent));background:#fff;
  color:var(--fachfarbe,var(--akzent));cursor:pointer;display:grid;place-items:center}
.stufe button .ikon{width:20px;height:20px}
.stufe.geschafft button{background:var(--fachfarbe,var(--akzent));color:#fff}
.stufe.jetzt button{background:var(--tinte);border-color:var(--tinte);color:#fff;box-shadow:0 0 0 5px var(--akzent-hell)}
.stufe.zu button{border-color:var(--linie);color:#98a2b3;cursor:not-allowed}
.stufe > span{padding:10px 0 22px;font-size:.92rem;color:var(--tinte)}
.stufe > span small{display:block;color:var(--leise);font-size:.8rem}
.stufe.zu > span{color:var(--leise)}

.stoff{display:grid;gap:10px}
.stoff-block{background:#fff;border-radius:12px;padding:14px 16px;border:1px solid var(--linie)}
.stoff-block h4{margin:0 0 6px;font-size:.98rem;font-weight:600}
.stoff-block img{max-width:100%;height:auto;display:block;margin:6px auto;border-radius:8px}
.stoff-block a{display:inline-flex;align-items:center;gap:7px}
.stoff-zwischen{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1rem;margin-top:12px;color:var(--tinte)}
.stoff-zwischen .ikon{color:var(--fachfarbe,var(--akzent))}
.md p{margin:6px 0;line-height:1.6} .md ul,.md ol{margin:6px 0;padding-left:22px;line-height:1.6}
.md h5{margin:12px 0 4px;font-size:.95rem;font-weight:600}
details summary{cursor:pointer;font-weight:500}

/* --- Rangliste ----------------------------------------------------------- */
.seitentitel{font-size:1.5rem;margin:4px 0 16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--linie);background:#fff;border-radius:99px;padding:6px 14px;font-weight:500;cursor:pointer}
.chips button.aktiv{background:var(--tinte);border-color:var(--tinte);color:#fff}
.umschalter{display:inline-flex;background:#eceef3;border-radius:12px;padding:4px;margin-bottom:14px}
.umschalter button{border:0;background:none;border-radius:9px;padding:7px 14px;font-weight:500;cursor:pointer;color:var(--leise)}
.umschalter button.aktiv{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(16,24,40,.1)}
.rangliste{list-style:none;padding:0;margin:0 0 14px;background:#fff;border:1px solid var(--linie);border-radius:var(--rund);overflow:hidden}
.rangliste li{display:grid;grid-template-columns:30px 34px 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--linie)}
.rangliste li:first-child{border-top:0}
.rangliste li.ich{background:var(--akzent-hell)}
.rangliste .nr{font-weight:600;color:var(--leise);text-align:center}
.rangliste li.p1 .nr{color:#b45309} .rangliste li.p2 .nr{color:#64748b} .rangliste li.p3 .nr{color:#9a3412}
.rangliste .kopfbild{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.85rem;color:#fff;background:var(--fachfarbe,var(--akzent))}
.rangliste .serie{display:inline-flex;align-items:center;gap:4px;color:var(--leise);font-size:.88rem}
.rangliste .pkt{font-weight:600}
.zeile-knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.code-karte{margin:14px 0;padding:16px;border-radius:var(--rund);text-align:center;background:#fff;border:1px dashed var(--akzent)}
.code-karte b{display:block;font-size:1.8rem;letter-spacing:.18em;font-family:ui-monospace,Consolas,monospace;margin:6px 0;color:var(--akzent-dunkel)}
.karte{background:#fff;border-radius:var(--rund);padding:18px;border:1px solid var(--linie);margin-top:16px}
.reihe{display:flex;gap:8px;margin-bottom:12px} .reihe input{flex:1}
.blase{color:var(--leise)}

/* --- Inhalte ------------------------------------------------------------- */
.datei{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px dashed #cfd4dc;border-radius:12px;padding:12px;margin:10px 0;cursor:pointer;background:#fcfcfd}
.datei input{border:0;padding:4px 0;background:none;box-shadow:none}
.ergebnis-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.zahl{border-radius:99px;padding:3px 10px;font-weight:500;font-size:.85rem;border:1px solid var(--linie);background:#fff}
.zahl.neu{color:#047857;border-color:#a7f3d0} .zahl.geaendert{color:var(--akzent-dunkel);border-color:#c7d2fe}
.zahl.zurueck{color:#b45309;border-color:#fde68a} .zahl.still,.zahl.gleich{color:var(--leise)}
.fehlerliste{background:var(--schlecht-hell);color:#b42318;border-radius:10px;padding:10px 14px 10px 30px;font-size:.88rem;max-height:260px;overflow:auto}
.warnliste{background:var(--warn-hell);color:#92400e;border-radius:10px;padding:10px 14px 10px 30px;font-size:.88rem}
.inhalt-zeile{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie)}
.inhalt-zeile small{color:var(--leise);display:block} .inhalt-zeile.still{opacity:.5}

/* --- Ich ----------------------------------------------------------------- */
.ziel-wahl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.ziel-wahl button{border:1px solid var(--linie);background:#fff;border-radius:12px;padding:10px 4px;cursor:pointer;display:grid;gap:2px}
.ziel-wahl button b{font-weight:600} .ziel-wahl button span{font-size:.8rem;color:var(--leise)}
.ziel-wahl button.aktiv{border-color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.schalter{display:flex;align-items:center;gap:10px;font-weight:500;margin-top:8px} .schalter input{width:20px;height:20px;accent-color:var(--akzent)}
#ich-stufe{margin-bottom:14px}

/* --- Untere Leiste ---------------------------------------------------------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:4px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--linie)}
.leiste button{flex:1;max-width:140px;border:0;background:none;border-radius:10px;padding:6px;
  font-weight:500;font-size:.75rem;color:var(--leise);cursor:pointer;display:grid;justify-items:center;gap:3px}
.leiste button .ikon{width:22px;height:22px}
.leiste button.aktiv{color:var(--tinte)} .leiste button.aktiv .ikon{color:var(--akzent)}

/* --- Lektion ------------------------------------------------------------- */
.lektion{position:fixed;inset:0;z-index:40;background:var(--grund);display:grid;grid-template-rows:auto 1fr auto;max-width:760px;margin:0 auto}
.lektion-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px}
.schliessen{border:0;background:none;color:var(--leise);cursor:pointer;width:36px;height:36px;display:grid;place-items:center}
.schliessen .ikon{width:22px;height:22px}
.fortschritt{flex:1;display:flex;gap:3px;height:8px}
.fortschritt i{flex:1;border-radius:99px;background:#e4e7ec;transition:background .25s}
.fortschritt i.richtig{background:var(--fachfarbe,var(--gut))}
.fortschritt i.falsch{background:var(--schlecht)}
.combo{font-size:.85rem;color:var(--leise);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.frage{overflow:auto;padding:4px 18px 18px;display:grid;align-content:start;gap:14px}
.frage-art{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent)}
.frage-art.irrtum{color:var(--irrtum)}
.frage-text{font-size:1.25rem;font-weight:550;line-height:1.4}
.frage img{max-width:100%;max-height:240px;margin:0 auto;display:block;border-radius:10px;border:1px solid var(--linie)}
.optionen{display:grid;gap:8px}
.option{text-align:left;border:1px solid var(--linie);background:#fff;border-radius:12px;padding:12px 14px;
  font-size:1rem;cursor:pointer;display:flex;gap:12px;align-items:center;transition:border-color .1s,background .1s;line-height:1.45}
.option kbd{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--linie);display:grid;place-items:center;
  font-family:inherit;font-size:.8rem;color:var(--leise)}
.option:hover{border-color:#cfd4dc}
.option.gewaehlt{border-color:var(--akzent);background:var(--akzent-hell)}
.option.gewaehlt kbd{border-color:var(--akzent);color:var(--akzent-dunkel)}
.option.richtig{border-color:var(--gut);background:var(--gut-hell)} .option.richtig kbd{border-color:var(--gut);color:var(--gut)}
.option.falsch{border-color:var(--schlecht);background:var(--schlecht-hell)} .option.falsch kbd{border-color:var(--schlecht);color:var(--schlecht)}
.luecke-satz{font-size:1.2rem;line-height:2}
.luecke-satz input{display:inline-block;width:9em;min-width:6ch;max-width:100%;border-width:0 0 2px;border-radius:0;
  border-color:var(--akzent);padding:2px 6px;font-size:1.1rem;text-align:center;background:var(--akzent-hell);box-shadow:none}
.hinweis{display:flex;gap:8px;align-items:flex-start;color:var(--leise);font-size:.92rem}
.hinweise{display:grid;gap:8px}
.paare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paare .spalte{display:grid;gap:8px;align-content:start}
.paar{border:1px solid var(--linie);background:#fff;border-radius:12px;padding:11px;cursor:pointer;text-align:center}
.paar.gewaehlt{border-color:var(--akzent);background:var(--akzent-hell)}
.paar.verbunden{border-color:var(--paarfarbe);background:color-mix(in srgb,var(--paarfarbe) 10%,#fff)}
textarea.offen{min-height:110px;resize:vertical}
.muster{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--akzent);border-radius:12px;padding:12px 14px}
.muster b{display:block;color:var(--akzent-dunkel);margin-bottom:4px;font-weight:600}

.lektion-unten{padding:14px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:#fff;display:grid;gap:10px}
.sicher-frage{font-weight:500;text-align:center;color:var(--leise);font-size:.92rem}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:8px} .drei{display:grid;gap:8px}
.lektion-unten.gut{background:var(--gut-hell);border-color:#a7f3d0}
.lektion-unten.schlecht{background:var(--schlecht-hell);border-color:#fecaca}
.lektion-unten.irrtum{background:var(--irrtum-hell);border-color:#fbcfe8}
.urteil{display:flex;gap:12px;align-items:flex-start;animation:hochfahren .2s ease-out}
.urteil .gross-symbol .ikon{width:28px;height:28px}
.lektion-unten.gut .gross-symbol{color:var(--gut)} .lektion-unten.schlecht .gross-symbol{color:var(--schlecht)}
.lektion-unten.irrtum .gross-symbol{color:var(--irrtum)}
.urteil strong{display:block;font-size:1.1rem;font-weight:600}
.lektion-unten.gut strong{color:#047857} .lektion-unten.schlecht strong{color:#b42318} .lektion-unten.irrtum strong{color:#9d174d}
.urteil p{margin:4px 0 0}
.punkte-flug{position:fixed;z-index:60;font-weight:600;font-size:1rem;color:var(--akzent-dunkel);pointer-events:none;
  animation:fliegen .9s ease-out forwards}
@keyframes fliegen{from{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}
@keyframes hochfahren{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.wackeln{animation:wackeln .3s}
@keyframes wackeln{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}

/* --- Ende ---------------------------------------------------------------- */
.ende{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:20px;background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
.ende-karte{background:#fff;border-radius:20px;padding:26px 22px;width:min(420px,100%);text-align:center;box-shadow:0 24px 60px rgba(16,24,40,.25);
  display:grid;gap:14px;justify-items:center;animation:hochfahren .25s ease-out}
.ende-karte .marke{background:var(--gut)}
.ende-karte h1{font-size:1.4rem}
.ende-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.ende-wert{border-radius:12px;padding:10px 4px;border:1px solid var(--linie);display:grid}
.ende-wert small{font-size:.75rem;color:var(--leise)} .ende-wert b{font-size:1.4rem;font-weight:600}
.ende-satz{color:var(--leise);margin:0}

/* --- Konfetti (nur beim Tagesziel) und Hinweise ------------------------------- */
.konfetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.konfetti i{position:absolute;top:-20px;width:7px;height:11px;border-radius:2px;animation:fallen var(--dauer,2.4s) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fallen{to{transform:translate(var(--dx,0),110vh) rotate(var(--dreh,540deg))}}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:80;background:var(--tinte);color:#fff;
  border-radius:10px;padding:10px 16px;box-shadow:var(--schatten);max-width:90vw;font-size:.92rem}

@media (min-width:900px){ main{padding-top:28px} .begruessung h1{font-size:2rem} }
@media (max-width:560px){
  .kopf-marke > span:last-child{display:none}
  .ziel-karte{grid-template-columns:auto 1fr}
  .ziel-karte #s-wiederholen{grid-column:1/-1}
  .themen{grid-template-columns:1fr}
  .ziel-wahl{grid-template-columns:1fr 1fr}
  .frage-text{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 🔴 MUSS GANZ UNTEN STEHEN UND !important TRAGEN - dieselbe Lehre wie in
   styles.css vom 20.09.2026: jede eigene display-Regel schlaegt sonst [hidden]. */
[hidden]{display:none !important}