/* 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}
/* Hauptknopf im Lernbereich in Markenviolett statt Schwarz (Tassilo 08.10.2026: "nicht ganz so dunkel, etwas mehr bunt, aber dezent"). */
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf.haupt:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.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}

/* Bereichswechsel Woche | Lernen - wie im Wochenplan. */
.bereich{display:inline-flex;background:#f2f4f7;border-radius:10px;padding:3px;gap:2px}
.bereich a{padding:6px 11px;border-radius:8px;font-weight:600;font-size:.85rem;color:var(--leise);text-decoration:none}
.bereich a[aria-current]{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(16,24,40,.1)}
@media(max-width:420px){.kopf-marke > span:last-child{display:none} .bereich a{padding:6px 9px}}

/* Naechste Pruefungen auf der Startseite: fuehren zur Schrittkette im Wochenplan. */
.pruefungen{display:grid;gap:8px;margin:14px 0}
.pruefung-karte{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linie);
  border-left:3px solid var(--fachfarbe,#c9343a);border-radius:12px;padding:10px 12px}
.pruefung-link{flex:1;min-width:0;display:grid;gap:2px;color:inherit;text-decoration:none}
.pruefung-link small{color:#c9343a;font-weight:650;font-size:.75rem;letter-spacing:.02em}
.pruefung-link strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pruefung-stand{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--leise);min-width:0}
.pruefung-stand .balken{--p:0;flex:none;width:56px;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--fachfarbe,var(--akzent)) calc(var(--p)*1%),#eaecf0 0)}

/* Gemerkte Fragen (KIG-LRN-0044): bald anstehender Test = Wiedervorlage, gelb markiert. */
.pruefung-link small.pruefung-gemerkt{color:var(--warn);font-weight:500}
.gemerkt{margin:0 0 14px}
.gemerkt-gruppe{border-left:3px solid var(--linie);padding:2px 0 2px 10px;margin:6px 0 12px}
.gemerkt-gruppe.bald{border-left-color:var(--warn);background:var(--warn-hell)}
.gemerkt-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gemerkt-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.gemerkt-liste li > span{display:grid;gap:1px;min-width:0;overflow-wrap:anywhere}
.gemerkt-liste strong{font-size:.92rem;font-weight:600}
.gemerkt-liste small{color:var(--leise);font-size:.75rem}
.gemerkt-liste .textknopf{font-size:.8rem;padding:4px;max-width:7.5em;text-align:right}

/* Handy: der Kopf passt in eine Zeile (Tassilo 04.10.: "sitzt oben noch nicht richtig").
   Punkte heute stehen ohnehin gross auf der Startkarte - im Kopf entfallen sie. */
@media (max-width:480px){
  .kopf{padding:8px 12px;gap:8px}
  .kopf-werte{gap:6px;min-width:0}
  .kopf-werte .wert:nth-of-type(2){display:none}
  .wert{padding:3px 8px}
  .ring{width:36px;height:36px} .ring > span{width:29px;height:29px}
  .bereich a{padding:6px 8px;font-size:.82rem}
}

/* Rueckmeldung direkt unter den Antworten statt am unteren Bildschirmrand
   (Tassilo 04.10.: "Antwort direkt oben") - auf grossen Bildschirmen lag sie sonst
   eine halbe Seite unter der Frage. Die Lektion scrollt als Ganzes. */
.lektion{grid-template-rows:auto auto 1fr;overflow:auto}
.frage{overflow:visible}
.lektion-unten{align-self:start;margin:0 18px 18px;border:1px solid var(--linie);border-radius:16px}

/* Nachlesen und Pause in der Lektion (Tassilo 04.10.). */
.lektion-kopf .kopf-text{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);
  background:#fff;border-radius:99px;padding:6px 12px;font-weight:600;font-size:.85rem;color:var(--tinte);cursor:pointer}
.lektion-kopf .kopf-text .ikon{width:16px;height:16px}
@media (max-width:420px){.lektion-kopf .kopf-text span:last-child{display:none}}
.nachlesen{position:absolute;inset:0;z-index:5;background:var(--grund);overflow:auto;padding:0 18px 24px}
.nachlesen-kopf{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 0;background:var(--grund);border-bottom:1px solid var(--linie);margin-bottom:12px}
.nachlesen-kopf strong{display:block;font-size:1.05rem}
.pause-blatt{position:absolute;inset:0;z-index:6;background:rgba(16,24,40,.45);display:grid;place-items:end center;
  padding:16px;animation:hochfahren .15s ease-out}
.pause-karte{width:min(440px,100%);background:#fff;border-radius:20px;padding:22px;display:grid;gap:10px;
  box-shadow:0 20px 60px rgba(16,24,40,.25)}
.pause-karte h2{margin:0}
.pause-karte p{margin:0 0 6px}
.knopf.leise{border-color:transparent;color:var(--schlecht);background:transparent}
@media (min-width:600px){.pause-blatt{place-items:center}}
.pause-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--akzent);
  border-radius:14px;padding:12px 14px;margin:14px 0}
.pause-hinweis > div{flex:1;min-width:150px;display:grid}
.pause-hinweis small{color:var(--leise)}
.urteil .textknopf{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:0}
.urteil .textknopf .ikon{width:16px;height:16px}

/* Ein Tag des Lernpfads: zwei Teile, Lernen und Test. */
.tag-teil{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:16px;margin:14px 0;display:grid;gap:10px}
.tag-teil-kopf{display:flex;align-items:center;gap:10px}
.tag-teil-kopf h3{margin:0;font-size:1.1rem;flex:1}
.tag-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fachfarbe,var(--akzent));
  color:#fff;font-weight:700;font-size:.85rem}
.tag-stand{font-weight:600;color:var(--gut);font-size:.9rem}
.tag-teil .stoff{display:grid;gap:10px}

.frage .ueberspringen{justify-self:start;color:var(--leise);font-weight:500;font-size:.88rem;padding:4px 0;
  text-decoration:underline;text-underline-offset:3px}

/* Fehler melden */
.urteil-knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.urteil-knoepfe .textknopf{margin-top:0}
.urteil .leise-knopf{color:var(--leise);font-weight:500}
.pause-karte .feld{display:grid;gap:6px;font-weight:600}
.pause-karte textarea{width:100%;border:1px solid var(--linie);border-radius:12px;padding:10px;font:inherit;resize:vertical}
.fehler-zeile{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--linie);padding:10px 0}
.fehler-zeile > div{display:grid;gap:2px;min-width:0}
.fehler-zeile small{color:var(--leise)}
.fehler-zeile p{margin:2px 0 0}
.karte .abzeichen{background:var(--schlecht-hell);color:#b42318}
#toast{pointer-events:none}  /* Hinweis darf keinen Klick schlucken (lag ueber "Pausieren") */

/* Hilfe im Lernbereich */
.hilfe-rund{font-weight:800;font-size:1.05rem}
.hilfe-dialog{border:0;border-radius:20px;padding:0;width:min(520px,calc(100% - 24px));max-height:85vh}
.hilfe-dialog form{padding:18px;display:grid;gap:10px}
.hilfe-kopf{display:flex;justify-content:space-between;align-items:center}
.hilfe-kopf h2{margin:0}
.hilfe-karten{display:grid;gap:8px}
.hilfe-karte{border:1px solid var(--linie);border-radius:14px;padding:10px 14px;background:#fff}
.hilfe-karte summary{cursor:pointer;font-weight:600}
.hilfe-karte ol{margin:8px 0 2px;padding-left:20px;display:grid;gap:6px}
@media (max-width:420px){.kopf .wert:first-of-type{display:none}}

/* Schaubild: Bild mit nummerierten Hinweisen */
.schaubild-buehne{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--linie)}
.schaubild-buehne img{display:block;width:100%;height:auto}
.schaubild-punkt{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  border:2px solid #fff;background:var(--tinte);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(16,24,40,.3);cursor:pointer;padding:0}
.schaubild-punkt.markiert{background:var(--fachfarbe,var(--akzent));transform:translate(-50%,-50%) scale(1.25);
  box-shadow:0 0 0 4px rgba(255,255,255,.8),0 2px 8px rgba(16,24,40,.35)}
.frage .schaubild-punkt{cursor:default}
.schaubild-text{background:#f8f9fc;border-radius:12px;padding:10px 12px;margin-top:8px;display:grid;gap:4px}
.schaubild-text .textknopf{justify-self:start;padding:4px 0}
.quelle-zeile{color:var(--leise)}
/* Videos und Simulationen als Karten, abspielen auf Klick */
.medien-flaeche{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1d2939,#475467);
  display:grid;place-items:center;margin-bottom:8px}
.medien.simulation .medien-flaeche{aspect-ratio:16/10;background:linear-gradient(135deg,#065986,#0e9384)}
.medien-flaeche iframe{width:100%;height:100%;border:0;background:#000}
.medien-start{display:grid;justify-items:center;gap:8px;color:#fff;background:none;border:0;cursor:pointer;
  font-weight:600;text-decoration:none;font-size:1rem}
.medien-start .ikon{width:48px;height:48px;padding:12px;border-radius:50%;background:rgba(255,255,255,.18)}

/* Lektion: Pause und Hilfe gut sichtbar (Tassilo 04.10.) */
.lektion-kopf .pause-knopf{margin-left:0}
.lektion-kopf .pause-knopf .ikon{width:16px;height:16px}
.lektion-kopf .fortschritt{flex:1;min-width:0}
.lektion-kopf .hilfe-klein{margin-left:0;font-weight:800;min-width:34px;justify-content:center}
@media (max-width:420px){
  .lektion-kopf{gap:8px;padding:12px}
  .lektion-kopf .pause-knopf span:last-child{display:inline}
  .lektion-kopf .kopf-text{padding:6px 9px}
}

/* Zuordnen nach der Antwort: jedes Paar selbst markiert */
.paar.paar-richtig{border-color:var(--gut);background:var(--gut-hell);border-width:2px}
.paar.paar-falsch{border-color:var(--schlecht);background:var(--schlecht-hell);border-width:2px}
.paar-loesung{display:block;margin-top:4px;font-size:.78rem;font-weight:700;color:#067647}

/* 🔴 Lektion nie breiter als der Bildschirm (Tassilo 04.10.: auf seinem Handy liefen Zuordnen
   und Kopf rechts hinaus - bei groesserer Schrift drueckten lange Woerter wie
   "Superpositionsprinzip" die Spalten auseinander). Spalten duerfen schrumpfen, Woerter brechen. */
.lektion{grid-template-columns:minmax(0,1fr)}
.lektion > *{min-width:0}
.frage,.frage-text,.option,.paar,.urteil,.lektion-unten{overflow-wrap:anywhere;hyphens:auto}
.paare{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.paar{min-width:0;padding:10px 8px}
.lektion-kopf{min-width:0}
.fortschritt{min-width:0;overflow:hidden}
.fortschritt i{min-width:3px}
@media (max-width:420px){
  .lektion-kopf .kopf-text{flex:none;padding:6px 8px}
  .lektion-kopf{gap:6px;padding:10px}
}

/* Eigene Mediathek und Vorlesen */
.medien-flaeche.eigen{background:#000;display:block}
.medien-flaeche.eigen video{width:100%;height:100%;display:block;background:#000}
.medien.audio .medien-flaeche.eigen{aspect-ratio:auto;background:#f2f4f7;padding:12px}
.medien.audio audio{width:100%}
.quelle-zeile a{color:inherit}
.vorlesen{display:inline-flex;align-items:center;gap:4px;padding:4px 0;margin-top:4px}
.vorlesen .ikon{width:16px;height:16px}
.vorlesen.laeuft{color:var(--gut)}

/* iPhone als Web-App (Matteo, iPhone 12 mini, 04.10.2026):
   - Felder unter 16 px laesst Safari beim Antippen hineinzoomen - und es bleibt gezoomt.
   - Kerbe und Home-Leiste: Abstand ueber env(safe-area-inset-*), viewport-fit=cover ist gesetzt.
   - Dialoge nie hoeher als der sichtbare Bereich (dvh beachtet die Safari-Leisten). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:800px){input,select,textarea{font-size:16px}}
dialog{max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}   /* wie styles.css: ein Scrollbereich, iOS */
html:has(dialog[open]){overflow:hidden}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.kopf{padding-top:max(10px,env(safe-area-inset-top))}
.tor{padding-top:max(20px,env(safe-area-inset-top))}
.lektion{padding-top:env(safe-area-inset-top)}

/* Aus deinen Unterlagen (KIG-LRN-0029): Merksaetze, Karteikarten, Beispiele. */
.u-block{background:var(--akzent-hell);border:1px solid var(--linie);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.u-block h3{margin:0 0 4px;font-size:1.05rem}
.u-block h4{margin:14px 0 6px;font-size:.92rem}
.u-liste{margin:0;padding-left:20px;display:grid;gap:4px}
.u-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.u-karte{min-height:84px;border:1px solid var(--linie);border-radius:12px;background:#fff;padding:10px;text-align:left;
  display:grid;align-content:center;gap:4px;cursor:pointer;overflow-wrap:anywhere}
.u-karte .u-rueck{display:none;font-size:.85rem;color:var(--tinte)}
.u-karte.um{background:#fff;border-color:var(--akzent)}
.u-karte.um strong{font-size:.8rem;color:var(--leise)}
.u-karte.um .u-rueck{display:block}

/* Grafik mit Unterschrift und Quelle (ADR 0016) */
.grafik-karte{margin:0}
.grafik-karte img{display:block;max-width:100%;height:auto;border-radius:10px;background:#fff;margin:6px auto}
.grafik-karte figcaption{margin-top:4px}

/* Gefuehrte Schautafel (ADR 0017) */
.vortrag-knopf{margin:0 0 8px}
.vortrag-untertitel{margin:6px 0 0;padding-top:6px;border-top:1px dashed var(--linie);font-size:.95rem}
.schaubild-buehne.vortrag-laeuft .schaubild-punkt:not(.markiert){opacity:.45}
.vortrag-knopf .ki-hinweis{font-size:.7rem;font-weight:500;opacity:.75;margin-left:6px}

/* Herkunftsnachweis (ADR 0019) */
.herkunft-zeile a{color:inherit}
.herkunft-eintrag{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--linie);overflow-wrap:anywhere}
.herkunft-eintrag small{color:var(--leise)}
.herkunft-eintrag small.rot{color:var(--irrtum)}

/* Anleitung auf der Anmeldeseite (Tassilo 05.10.) */
.tor{gap:28px;align-content:start}
.anleitung{width:min(760px,100%);margin:0 auto 32px}
.anleitung h2{font-size:1.25rem;margin:0 0 12px;text-align:center}
.anleitung-schritte{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.anleitung-schritte li{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:14px 16px}
.anleitung-schritte h3{margin:0 0 4px;font-size:1rem;display:flex;align-items:center;gap:8px}
.anleitung-schritte h3 span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#101828;color:#fff;font-size:.85rem}
.anleitung-schritte p{margin:0 0 10px;color:#667085;font-size:.9rem}
.anleitung-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.anleitung-bilder img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e4e7ec;box-shadow:0 6px 16px rgba(16,24,40,.08)}
.anleitung-quelle{font-size:.75rem;color:#667085;text-align:center;margin:10px 0 0}
.anleitung-quelle a{color:inherit}

/* Grosses Bild der Anleitung: mit X, Tippen daneben oder Zurueck schliesst (Tassilo 05.10.) */
dialog.bild-gross{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;
  display:none;place-items:center;overflow:hidden}
dialog.bild-gross[open]{display:grid}
dialog.bild-gross::backdrop{background:rgba(16,24,40,.85)}
dialog.bild-gross img{max-width:min(92vw,520px);max-height:calc(100dvh - 96px);width:auto;height:auto;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);background:#fff}
.bild-gross-zu{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:48px;height:48px;border-radius:50%;
  border:0;background:#fff;color:#101828;font-size:1.4rem;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:2}

/* Hinweis private Seite (Tassilo 05.10.) und Bot-Falle */
.privat-banner{margin:0 auto;text-align:center;font-weight:800;letter-spacing:.06em;font-size:.8rem;color:#b54708;
  background:#fffaeb;border:1px solid #fedf89;border-radius:999px;padding:6px 14px;width:fit-content;max-width:100%}
.falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.konto-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linie);overflow-wrap:anywhere}
.konto-zeile small{display:block;color:var(--leise)}
.konto-zeile.still{opacity:.55}

/* Marke hab's gecheckt (KIG-LRN-0065): Wortmarke auf der Anmeldung, App-Symbol im Kopf. */
.marke-logo{display:block;width:150px;height:auto;margin:0 auto 4px}
.marke-symbol{display:block;width:32px;height:32px;border-radius:9px}

/* Testkarte klappt nach unten auf (KIG-LRN-0068): Ziel, Schritte, "geschrieben", Gefuehl, Note. */
.pruefung-karte{display:block}
.pruefung-zeile{display:flex;align-items:center;gap:10px}
button.pruefung-link{background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer}
.pruefung-karte.erledigt{border-left-style:dashed}
.pruefung-karte.offen{box-shadow:var(--schatten)}
.pk-details{display:grid;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);font-size:.92rem}
.pk-ziel{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pk-ziel > span{font-weight:600;margin-right:4px}
.pk-wahl,.pk-smiley{border:1px solid var(--linie);background:#fff;border-radius:99px;padding:6px 12px;font:inherit;cursor:pointer}
.pk-wahl.aktiv,.pk-smiley.aktiv{border-color:var(--akzent);background:var(--akzent-hell);color:var(--akzent-dunkel);font-weight:600}
.pk-wahl:disabled{opacity:.4;cursor:not-allowed}
.pk-schritte{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pk-schritte li{display:flex;align-items:center;gap:8px}
.pk-schritte li.fertig > span:last-child{color:var(--leise);text-decoration:line-through}
.pk-haken{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;border:1px solid var(--linie);
  background:#fff;font:inherit;color:var(--gut);cursor:pointer;padding:0}
span.pk-haken{cursor:default}
.pk-fertig{justify-self:start}
.pk-form{display:grid;gap:10px;background:var(--grund);border-radius:12px;padding:12px}
.pk-smileys{display:flex;gap:6px;flex-wrap:wrap}
.pk-smiley{font-size:1.4rem;padding:4px 10px}
.pk-reihe{display:flex;flex-wrap:wrap;gap:12px}
.pk-zahl{width:84px}
.pk-auswahl{width:auto}
.pk-vergleich b{font-weight:700}
.pk-wochenplan{font-size:.85rem;color:var(--akzent-dunkel)}
.pk-form label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-weight:500}
.pk-form select,.pk-form input{width:auto;min-width:0}

/* Kennzahlen nur oben in der Leiste (Tassilo 05.10.): die Startkarte traegt nur noch "Wiederholen". */
.ziel-karte.nur-knopf{display:flex;justify-content:flex-start;padding:12px}
.ziel-karte.nur-knopf #s-wiederholen{grid-column:auto}
/* Testkarte auf dem Handy: "Als Naechstes" hoechstens zwei Zeilen */
.pruefung-stand{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pruefung-stand .balken{display:inline-block;vertical-align:middle;margin-right:6px}
.kopf{position:sticky}
.kopf-werte{position:relative}
.ziel-karte.nur-knopf{background:none;border:0;box-shadow:none;padding:0}

/* Leiste auf dem Handy wie im Wochenplan: kompakt, "?" im Menue, Serie/Punkte nur breit. */
.kopf-marke{flex:none}
@media(max-width:560px){
  .kopf{padding-left:10px;padding-right:10px}
  .kopf-werte{gap:5px}
  .kopf-werte .wert{display:none}
  #k-hilfe{display:none}
  .kopf-knopf{width:32px;height:32px}
  .ring{width:34px;height:34px} .ring > span{width:27px;height:27px;font-size:.6rem}
  .kopf .bereich{padding:2px} .kopf .bereich a{padding:6px 8px;font-size:.8rem}
  .marke-symbol{width:30px;height:30px}
  .kh-knopf{height:32px;padding:0 6px;font-size:.82rem;gap:3px}
}
.freigabe-form{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.freigabe-form input{flex:1 1 220px;min-width:0}
.pk-smiley .strich{width:28px;height:28px}
.pk-smiley{color:#475467;line-height:0;padding:6px 10px}
.pk-smiley.aktiv{color:var(--akzent-dunkel)}
.pk-gefuehl .strich{width:20px;height:20px;margin:0 2px}

/* --- Fach-Kacheln (web/fach-kacheln.js, 08.10.2026) ------------------------------------------------------
   Nach dem Muster der myOnny-Kacheln "Wer ist da": viel Information auf kleiner Flaeche - Punkte fuer die
   letzten Tests, Balken fuer den Lernstand, der Rand als Zustand. Raster 8: Abstand 8, Innenabstand 16. */
.fk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin-top:8px}
.fk-kachel{display:grid;gap:8px;align-content:start;min-width:0;text-align:left;font:inherit;color:var(--tinte);cursor:pointer;
  padding:16px;border-radius:12px;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);
  transition:box-shadow .15s,border-color .15s}
.fk-kachel:hover{border-color:#cfd4dc}
.fk-kachel.bald{border:2px solid #f04438;padding:15px}
.fk-kachel.dringend{border:2px solid #f04438;padding:15px;background:#fef3f2}
.fk-kopf{display:flex;align-items:center;gap:8px;min-width:0}
.fk-ikon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;
  background:color-mix(in srgb,var(--fachfarbe) 12%,#fff);color:var(--fachfarbe)}
.fk-ikon.gross{width:48px;height:48px;border-radius:12px}
.fk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.fk-schnitt{margin-left:auto;flex:none;font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:99px;background:#f2f4f7;
  font-variant-numeric:tabular-nums}
.fk-zeile{display:flex;align-items:center;gap:8px;min-height:24px}
.fk-punkte{display:flex;align-items:center;gap:6px;min-width:0}
.fk-punkte small{font-size:.75rem;color:var(--leise)}
.fk-punkt{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:#d0d5dd}
.fk-punkt.gut{background:#12b76a} .fk-punkt.mittel{background:#f79009} .fk-punkt.schwach{background:#f04438}
.fk-punkt.offen{background:transparent;border:2px solid #98a2b3;width:12px;height:12px;box-sizing:border-box}
.fk-punkt.kommt{background:transparent;border:2px dashed var(--fachfarbe,#6d5dfc);box-sizing:border-box}
.fk-punkt.getroffen{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--tinte)}
.fk-balken{display:grid;gap:4px}
.fk-balken small,.fk-naechster{font-size:.75rem;color:var(--leise)}
.fk-kachel.bald .fk-naechster,.fk-kachel.dringend .fk-naechster{color:#b42318;font-weight:700}
.fk-fachkopf{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:16px;border-radius:var(--rund);
  background:var(--papier);border:1px solid var(--linie)}
.fk-fachkopf h2{margin:0;font-size:1.25rem}
.fk-abschnitt{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--leise);margin:24px 0 8px}
.fk-tests{display:grid;gap:8px}
.fk-test{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:12px;border:1px solid var(--linie);
  background:var(--papier);font:inherit;color:var(--tinte);text-align:left;cursor:pointer}
.fk-test small{margin-left:auto;color:var(--leise);font-size:.85rem}
.fk-test.kommt{border-color:#fda29b}
@media(max-width:420px){.fk-raster{grid-template-columns:1fr 1fr}.fk-kachel{padding:12px}.fk-kachel.bald,.fk-kachel.dringend{padding:11px}}
.fk-weitere{margin-top:24px;border-top:1px solid var(--linie);padding-top:8px}
.fk-weitere > summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;padding:8px 0;list-style:none}
.fk-weitere > summary::-webkit-details-marker{display:none}
.fk-weitere > summary b{font-size:.95rem} .fk-weitere > summary small{color:var(--leise);font-size:.8rem}
.fk-weitere .fk-kachel{box-shadow:none;opacity:.92}

/* --- Test-Kacheln (web/test-kacheln.js, 08.10.2026) ------------------------------------------------------
   Gleiche Familie wie die Fach-Kacheln: Fach + Countdown, Thema, Schritte als Punkte, Stand. Klick klappt die
   Pruefungskarte darunter auf (Ziel, Schritte, Gefuehl, Note). */
.tk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.tk-kachel{display:grid;gap:8px;align-content:start;min-width:0;text-align:left;font:inherit;color:var(--tinte);cursor:pointer;
  padding:16px;border-radius:12px;background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--fachfarbe);
  box-shadow:var(--schatten)}
.tk-kachel.dringend{border-color:#f04438;border-left-color:#f04438;background:#fef3f2}
.tk-kachel.geschrieben{border-style:dashed;border-left-style:solid;box-shadow:none}
.tk-kachel.gewaehlt{outline:2px solid var(--tinte);outline-offset:2px}
.tk-kopf{display:flex;align-items:baseline;gap:8px;min-width:0}
.tk-fach{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.tk-wann{margin-left:auto;flex:none;font-size:.8rem;font-weight:700;color:var(--leise)}
.tk-kachel.dringend .tk-wann{color:#b42318}
.tk-art{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.tk-text{font-size:.85rem;color:var(--leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-schritte{display:flex;flex-wrap:wrap;gap:4px;min-height:12px}
.tk-schritt{width:12px;height:12px;border-radius:50%;background:#e4e7ec;box-sizing:border-box}
.tk-schritt.fertig{background:var(--fachfarbe)}
.tk-schritt.jetzt{background:#fff;border:2px solid var(--fachfarbe)}
.tk-stand{font-size:.75rem;color:var(--leise)}
.tk-stand.offen{color:#b54708;font-weight:700}
#s-pruefung-detail:not(:empty){margin-top:8px}
@media(max-width:420px){.tk-raster{grid-template-columns:1fr 1fr}.tk-kachel{padding:12px}}

/* --- Tagesquiz (web/quiz.js, ADR 0039) ------------------------------------------------------------------
   Grosse Tippflaechen (mind. 48 px), Mathe in grosser Schrift, keine Tastatur. Raster 8. */
.qz-kachel{display:flex;align-items:center;gap:16px;width:100%;margin:8px 0 16px;padding:16px;border-radius:16px;cursor:pointer;
  font:inherit;text-align:left;color:var(--tinte);background:linear-gradient(135deg,#f4f3ff 0%,#eef4ff 55%,#ecfdf3 100%);
  border:1px solid #e0dcff;box-shadow:var(--schatten)}
.qz-kachel.neu{background:linear-gradient(135deg,#ebe9fe 0%,#e0eaff 55%,#d1fadf 100%);border-color:#d9d6fe}
.qz-kachel-ikon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--akzent);color:#fff}
.qz-kachel-text{display:grid;gap:2px;min-width:0} .qz-kachel-text small{color:var(--leise);font-size:.8rem}
.qz-kachel-los{margin-left:auto;flex:none;padding:8px 16px;border-radius:99px;background:var(--akzent);color:#fff;font-weight:700}
.qz-kopf{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin-bottom:16px}
.qz-kopf .qz-balken{grid-column:1/-1}
.qz-stand{justify-self:end;font-size:.85rem;color:var(--leise)}
.qz-balken{display:block;height:6px;border-radius:99px;background:#e4e7ec;overflow:hidden}
.qz-balken i{display:block;height:100%;background:#6d5dfc;transition:width .2s}
.qz-chips{display:flex;flex-wrap:wrap;gap:8px}
.qz-chip{min-height:40px;padding:8px 16px;border-radius:99px;border:1px solid var(--linie);background:#fff;font:inherit;cursor:pointer}
.qz-chip.aktiv{background:var(--akzent-hell);border-color:var(--akzent);color:var(--akzent-dunkel);font-weight:600}
.qz-los{width:100%;margin-top:24px;min-height:48px}
.qz-karte{display:grid;gap:16px;padding:24px 16px;border-radius:16px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)}
.qz-frage{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.qz-aufgabe{font-size:1.75rem;font-weight:700;text-align:center;padding:16px 8px;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;touch-action:pan-y;user-select:none}
.qz-optionen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qz-vergleich-feld{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qz-vergleich-feld .qz-option{min-height:96px;font-size:1.15rem}
.qz-option{min-height:56px;padding:8px;border-radius:12px;border:2px solid var(--linie);background:#fff;font:inherit;font-size:1.2rem;
  font-weight:600;color:var(--tinte);cursor:pointer;font-variant-numeric:tabular-nums}
.qz-option:disabled{cursor:default}
.qz-option.gut,.qz-paar.gut{border-color:#12b76a;background:#ecfdf3;color:#067647}
.qz-option.falsch,.qz-paar.falsch{border-color:#f04438;background:#fef3f2;color:#b42318}
.qz-paare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qz-spalte{display:grid;gap:8px;align-content:start}
.qz-paar{position:relative;min-height:48px;padding:8px 8px 8px 32px;border-radius:12px;border:2px solid var(--linie);background:#fff;
  font:inherit;font-size:1.05rem;font-weight:600;cursor:pointer;text-align:left}
.qz-paar.aktiv{border-color:#6d5dfc}
.qz-paar::before{content:attr(data-nr);position:absolute;left:8px;top:50%;translate:0 -50%;display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;font-size:.75rem;background:#eef0f4;color:var(--tinte)}
.qz-paar[data-nr=""]::before{content:"";background:transparent;border:1.5px dashed #98a2b3;box-sizing:border-box}
.qz-paar:not([data-nr=""])::before{background:#6d5dfc;color:#fff}
.qz-rueck:empty{display:none}
.qz-rueck{display:grid;gap:8px}
.qz-urteil{margin:0;font-size:1.15rem;font-weight:700} .qz-urteil.gut{color:#067647} .qz-urteil.falsch{color:#b42318}
.qz-fehlvorstellung{margin:0;padding:8px 16px;border-radius:12px;background:#fffaeb;color:#93370d}
.qz-erklaerung{margin:0;color:var(--leise)}
.qz-fehler{color:#b42318}
.qz-weiter{justify-self:end;min-width:144px;min-height:48px}
.qz-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qz-zahlen span{display:grid;padding:8px;border-radius:12px;border:1px solid var(--linie);text-align:center}
.qz-zahlen b{font-size:1.25rem} .qz-zahlen small{font-size:.75rem;color:var(--leise)}
.qz-zahlen .gut b{color:#067647} .qz-zahlen .falsch b{color:#b42318}
.qz-knoepfe{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:420px){.qz-zahlen{grid-template-columns:repeat(2,1fr)}.qz-aufgabe{font-size:1.5rem}.qz-paare{gap:8px}}
.qz-beenden{background:none;border:0;padding:8px 0;font:inherit;font-weight:700;color:var(--tinte);cursor:pointer;justify-self:start}

/* --- "Ich": je Einstellung eine Karte mit Erklaerung (Familientest 08.10.2026: "Was ist das?") ---------- */
button.ring{border:0;padding:0;font:inherit;cursor:pointer}
.ich-karte{display:grid;gap:16px}
.ich-kopf{display:flex;align-items:flex-start;gap:16px}
.ich-kopf h3{margin:0 0 4px}
.ich-kopf p{margin:0}
.ich-ikon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--akzent-hell);color:var(--akzent)}
.ich-stand{margin:0;padding:8px 16px;border-radius:12px;background:var(--akzent-hell);color:var(--akzent-dunkel);font-weight:600}
.ich-karte .ziel-wahl{margin:0}
.ziel-wahl button.aktiv{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent);background:var(--akzent-hell)}
.ich-karte .schalter{align-items:flex-start;margin:0}
.ich-karte .schalter input{margin-top:4px}

/* Notizzettel fuer Nebenrechnungen (web/quiz.js) - nur auf dem iPad. Kariert wie ein Rechenheft. */
.qz-notiz{margin-top:16px;border-radius:16px;border:1px solid var(--linie);background:#fff;overflow:hidden}
.qz-notiz-leiste{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--linie)}
.qz-notiz-leiste small{margin-right:auto;color:var(--leise);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.qz-notiz-knopf{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--linie);
  background:#fff;color:var(--tinte);cursor:pointer}
.qz-notiz-knopf.aktiv{background:var(--akzent-hell);border-color:var(--akzent);color:var(--akzent-dunkel)}
.qz-notiz-flaeche{display:block;width:100%;height:320px;touch-action:none;cursor:crosshair;
  background-image:linear-gradient(#eef0f4 1px,transparent 1px),linear-gradient(90deg,#eef0f4 1px,transparent 1px);
  background-size:20px 20px}

/* Tagestest aus eigenen Unterlagen (web/quiz.js): lange Antworten untereinander, Aufdecken. */
.qz-optionen.lang{grid-template-columns:1fr}
.qz-optionen.lang .qz-option{font-size:.95rem;font-weight:500;text-align:left;padding:8px 16px;min-height:48px;line-height:1.35}
.qz-aufdecken{display:grid;gap:16px}
.qz-zeigen{justify-self:center;min-width:192px}
.qz-antwort{margin:0;padding:16px;border-radius:12px;background:#f4f3ff;color:#101828;font-size:1rem;line-height:1.45}
.qz-aufgabe{overflow-wrap:anywhere}
.qz-typ-aufdecken .qz-aufgabe,.qz-typ-auswahl .qz-aufgabe{font-size:clamp(1.15rem,4.5vw,1.75rem)}
/* Lernziel auf der Pruefungskarte: eine Zeile, Strich-Icon (08.10.2026). */
.pk-wahl{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:6px 12px;font-size:.85rem}
.pk-wahl .strich{width:16px;height:16px}
.ki-marke{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:#f4f3ff;color:#3e1c96;font-size:.75rem;font-weight:600}
.ki-marke .strich{width:14px;height:14px}
/* "Als Naechstes" auf der Pruefungskarte (web/wegweiser.js) - eine Hauptaktion. */
.pk-weiter{display:grid;gap:4px;padding:16px;border-radius:12px;background:linear-gradient(135deg,#f4f3ff,#ecfdf3);border:1px solid #e0dcff}
.pk-weiter small{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#6d5dfc;font-weight:700}
.pk-weiter p{margin:0;color:#475467;font-size:.9rem}
.pk-weiter .knopf{justify-self:start;margin-top:8px}
/* Test im Fokus (08.10.2026): nur der gewaehlte Test, alles andere der Startseite weg; "Alle Tests" fuehrt zurueck. */
#v-start.test-fokus > :not(#s-pruefungen){display:none}
.fk-zurueck{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:8px 0 8px -8px;padding:8px;border:0;
  background:none;color:#5b4bdb;font:inherit;font-weight:600;cursor:pointer}
.fk-zurueck svg{width:20px;height:20px}
/* Lerntag in der Schrittliste der Pruefungskarte: ganze Zeile antippbar, fuehrt zum Tag. */
.pk-tag{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 8px 0 0;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-tag .pk-tag-pfeil{display:inline-flex;flex:none;color:#6d5dfc}
.pk-tag .strich{width:16px;height:16px}
.pk-schritte li.fertig .pk-tag > span:first-child{color:var(--leise);text-decoration:line-through}