:root{--hg:#f6f4ef;--flaeche:#fff;--text:#22282a;--leise:#5d6669;--linie:#dcd8cf;--akzent:#2f5d62;--akzent-text:#fff;--fehler:#a33a2c;--ok:#2e6b3a;--warnung:#8a5a00;--warnung-hg:#fbf0d9;--markiert:#f6d7a7;--radius:14px;--nav-hoehe:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--hg:#161b1d;--flaeche:#1f2628;--text:#e8e6e1;--leise:#a3aaa9;--linie:#333c3e;--akzent:#7fb8b0;--akzent-text:#10201f;--fehler:#f08a7a;--ok:#8fd19e;--warnung:#f0c36a;--warnung-hg:#3a3020;--markiert:#6b4a1a}}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--hg);min-height:100dvh;color:var(--text);-webkit-text-size-adjust:100%;margin:0}.kopf{z-index:1;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--hg);border-bottom:1px solid var(--linie);position:sticky;top:0}.kopf h1{margin:0;font-size:1.1rem;font-weight:600}main{max-width:640px;padding:16px 16px calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 24px);margin:0 auto}h2{margin:0 0 8px;font-size:1.2rem}a{color:var(--akzent)}.karte,.leer{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:20px}.leer{text-align:center}.leer p{color:var(--leise)}label{margin:16px 0;font-weight:500;display:block}label small{color:var(--leise);font-weight:400;display:block}input,textarea,select{width:100%;min-height:48px;font:inherit;color:inherit;background:var(--hg);border:1px solid var(--linie);border-radius:10px;margin-top:6px;padding:12px;display:block}input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,.knopf:focus-visible,.nav a:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}.knopf{min-height:48px;font:inherit;color:var(--akzent-text);background:var(--akzent);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 22px;font-weight:600;text-decoration:none;display:inline-flex}.knopf:disabled{opacity:.6}.knopf.zweitrangig{color:var(--akzent);border:2px solid var(--akzent);background:0 0}.fehler{color:var(--fehler)}.el{letter-spacing:.01em;font-family:Noto Serif,Georgia,Times New Roman,serif;font-size:1.25em;line-height:1.6}.nav{padding-bottom:env(safe-area-inset-bottom);background:var(--flaeche);border-top:1px solid var(--linie);display:flex;position:fixed;bottom:0;left:0;right:0}.nav[hidden]{display:none}.nav a{min-height:var(--nav-hoehe);color:var(--leise);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.75rem;text-decoration:none;display:flex}.nav a[aria-current=page]{color:var(--akzent);font-weight:600}.nav svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}h3{margin:20px 0 8px;font-size:1.05rem}main>*+*{margin-top:16px}.leise{color:var(--leise)}.mitte{text-align:center}.gross{font-size:1.6rem}p.gross{margin:8px 0}.el.gross{font-size:2rem;line-height:1.3}.el-text{font-family:Noto Serif,Georgia,serif}.reihe{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.reihe.zwischen{justify-content:space-between}.reihe.zwischen .knopf{flex:1}.knopf.klein{min-height:44px;padding:0 16px;font-size:.95rem}.knopf.breit{width:100%;display:flex}.knopf+.knopf{margin-left:0}.schalter{align-items:center;gap:10px;min-height:44px;margin:10px 0;font-weight:400;display:flex}.schalter input{flex:none;width:24px;height:24px;min-height:0;margin:0}input[type=radio]{vertical-align:middle;width:22px;height:22px;min-height:0;margin:0;display:inline-block}textarea{resize:vertical;min-height:80px}.ok{color:var(--ok)}.falsch{color:var(--fehler)}.fast{color:var(--warnung)}mark{background:var(--markiert);color:inherit;border-radius:4px;padding:0 3px}.hinweis{background:var(--hg);border-left:4px solid var(--akzent);border-radius:6px;padding:8px 12px}.toast{left:16px;right:16px;bottom:calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 12px);z-index:5;background:var(--text);max-width:600px;color:var(--hg);border-radius:var(--radius);margin:0 auto;padding:14px 16px;position:fixed}.fortschritt{color:var(--leise);margin:0 0 8px;font-size:.9rem}.naechster{color:inherit;border:2px solid var(--akzent);flex-direction:column;gap:4px;text-decoration:none;display:flex}.naechster small{color:var(--leise);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.naechster strong{font-size:1.3rem}.naechster .knopf{align-self:flex-start;margin-top:10px}.schrittleiste{gap:8px;margin-bottom:0;padding:0;list-style:none;display:grid}.schrittleiste a{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);min-height:60px;color:inherit;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex}.schrittleiste a>span:nth-child(2){flex-direction:column;flex:1;display:flex}.schrittleiste small{color:var(--leise)}.schrittleiste .marke{border:2px solid var(--linie);border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-weight:700;display:grid}.schrittleiste .erledigt .marke{background:var(--ok);border-color:var(--ok);color:var(--flaeche)}.schrittleiste .jetzt a{border:2px solid var(--akzent)}.schrittleiste .jetzt .marke{border-color:var(--akzent)}.schrittleiste .status{color:var(--leise);font-size:.8rem}.schrittleiste .jetzt .status{color:var(--akzent);font-weight:600}.balken{background:var(--hg);border-radius:4px;height:8px;overflow:hidden}.balken span{background:var(--akzent);height:100%;display:block}.einheiten{gap:8px;margin:0;padding:0;list-style:none;display:grid}.einheiten a{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);min-height:60px;color:inherit;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex}.einheiten a.aktuell{border:2px solid var(--akzent)}.einheiten .nr{background:var(--hg);border-radius:50%;flex:none;place-items:center;width:32px;height:32px;font-weight:600;display:grid}.einheiten .titel{flex-direction:column;flex:1;display:flex}.einheiten small{color:var(--leise)}.etikett{border:1px solid var(--linie);white-space:nowrap;border-radius:999px;padding:2px 10px;font-size:.8rem}.etikett.entwurf{color:var(--leise);border-style:dashed}.etikett.laeuft{border-color:var(--akzent);color:var(--akzent)}.etikett.fertig{background:var(--ok);border-color:var(--ok);color:var(--flaeche)}.brotkrumen{color:var(--leise);font-size:.9rem}.brotkrumen a{color:var(--akzent)}.einheit-titel{margin-top:4px;font-size:1.4rem}.entwurf-hinweis{border:2px dashed var(--akzent)}.lernziele summary,.melden summary{cursor:pointer;padding:10px 0}.reiter{-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.reiter a{border:1px solid var(--linie);min-height:44px;color:inherit;background:var(--flaeche);border-radius:999px;flex:none;align-items:center;gap:4px;padding:0 14px;text-decoration:none;display:flex}.reiter a[aria-current=page]{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent);font-weight:600}.haken{color:var(--ok);font-weight:700}.reiter a[aria-current=page] .haken{color:inherit}#schritt>*+*{margin-top:16px}.abschluss{padding-top:8px}.audio{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}.lautschrift{color:var(--leise);margin:0}.bedeutung{font-size:1.15rem;font-weight:500}.beispiel{border-top:1px solid var(--linie);margin-top:12px;padding-top:8px}.beispiel p{margin:4px 0}.ag{background:var(--hg);border-radius:8px;padding:8px 12px}.ag-label{text-transform:uppercase;letter-spacing:.04em;margin-right:6px;font-size:.75rem;font-weight:700;display:inline-block}.ag.warnung,.ag.wandel{background:var(--warnung-hg);border:2px solid var(--warnung)}.ag.warnung .ag-label,.ag.wandel .ag-label{color:var(--warnung)}.melden{color:var(--leise);margin-top:12px;font-size:.9rem}.melden form{gap:8px;display:grid}.dialog{gap:12px;margin:0;padding:0;list-style:none;display:grid}.dialog li{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);gap:10px;padding:12px;display:flex}.dialog li.spielt{border:2px solid var(--akzent)}.dialog .sprecher{background:var(--hg);border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.dialog p{margin:0 0 4px}.dialog.ohne-uebersetzung .uebersetzung{display:none}.uebersetzung{color:var(--leise)}.glossen{flex-wrap:wrap;gap:6px;margin:6px 0;display:flex}.glosse{border:1px solid var(--linie);border-radius:8px;padding:2px 8px;font-size:.9rem}.glosse summary{cursor:pointer;align-items:center;min-height:32px;font-family:Noto Serif,Georgia,serif;list-style:none;display:flex}.glosse summary::-webkit-details-marker{display:none}.glosse[open]{background:var(--hg)}.erklaerung ul{padding-left:20px}.muster{gap:12px;margin:0;padding:0;list-style:none;display:grid}.muster p{margin:0}.aufgabe{gap:6px;display:flex}.aufgabe p{margin:0}.vorgabe{color:var(--leise)}.uebung .knopf{margin-top:4px}.el-eingabe{font-family:Noto Serif,Georgia,serif;font-size:1.2rem}.wahl .knopf{flex:1;font-size:1.4rem}.aufnahme{border:1px dashed var(--linie);border-radius:10px;margin:12px 0;padding:12px}.aufnahme small{color:var(--leise);display:block}.frage{font-size:1.2rem;font-weight:500}.wiederholung{text-align:center}.wiederholung .audio{justify-content:center}.wiederholung form{text-align:left;margin-top:12px}.bewertung{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.bewertung .knopf{padding:0 4px;font-size:.95rem}.bewertung .vorschlag{background:var(--akzent);color:var(--akzent-text)}.auswahl{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.auswahl label{align-items:center;gap:8px;min-height:44px;margin:0;font-weight:400;display:flex}.meldung:empty{display:none}.aufnahme{border-top:1px solid var(--linie);margin-top:12px;padding-top:12px}.aufnahme-knopf{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.aufnahme.nimmt-auf .aufnahme-knopf{background:var(--fehler);border-color:var(--fehler);color:var(--flaeche)}.aufnahme-zeit{font-variant-numeric:tabular-nums;color:var(--leise)}.aufnahme-status:empty{display:none}.aufnahme-hilfe{color:var(--leise);font-size:.9rem}.aufnahme-hilfe summary{cursor:pointer;padding:8px 0}.pegel{background:var(--hg);border-radius:4px;height:8px;margin:8px 0;overflow:hidden}.pegel span{background:var(--ok);width:0;height:100%;transition:width 80ms linear;display:block}.woerter{line-height:2.2}.wort{vertical-align:top;border-radius:6px;flex-direction:column;align-items:center;padding:0 4px;line-height:1.3;display:inline-flex}.wort small{color:var(--leise);font-family:system-ui,sans-serif;font-size:.75rem}.wort.ok{color:var(--ok)}.wort.falsch{color:var(--fehler);background:var(--markiert)}.wort.fehlt{color:var(--leise);border:1px dashed var(--linie);text-decoration:line-through}.wiederholung .aufnahme .reihe{justify-content:center}.spickzettel summary{cursor:pointer;font-weight:600}.spickzettel ul{margin-bottom:0;padding-left:20px}.transkript{gap:8px;margin:12px 0 0;padding:0;list-style:none;display:grid}.transkript:empty{display:none}.transkript li{background:var(--hg);border-radius:10px;gap:10px;padding:8px 12px;display:flex}.transkript li.tom{border-left:4px solid var(--akzent)}.transkript .wer{width:28px;color:var(--leise);flex:none;padding-top:3px;font-size:.8rem;font-weight:700}.transkript .el-text{font-size:1.1rem}.fehlerliste{gap:8px;padding-left:20px;display:grid}.fehlerliste small{color:var(--leise);display:block}.zusatz{color:inherit;flex-direction:column;gap:2px;text-decoration:none;display:flex}.optionen{gap:8px;margin-top:12px;display:grid}.optionen .knopf{height:auto;min-height:52px;padding:8px 16px;line-height:1.3}.optionen .vorschlag,.reihe .vorschlag{background:var(--akzent);color:var(--akzent-text)}.einheiten .test{border-style:dashed}.einheiten .test.gesperrt{min-height:60px;color:var(--leise);border:1px dashed var(--linie);border-radius:var(--radius);background:0 0;align-items:center;gap:12px;padding:12px 14px;display:flex}.einheiten .test .titel{flex-direction:column;flex:1;display:flex}.diagramme{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 20px;display:grid}.diagramm{margin:12px 0 0}.diagramm figcaption{font-size:.95rem;font-weight:600}.diagramm svg{width:100%;height:auto;display:block;overflow:visible}.diagramm text{fill:var(--leise);font-variant-numeric:tabular-nums;font-size:10px}.diagramm .gitter{stroke:var(--linie);stroke-width:1px;stroke-dasharray:2 3}.diagramm .achse{stroke:var(--linie);stroke-width:1px}.diagramm .linie{fill:none;stroke:var(--akzent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.diagramm .punkt{fill:var(--akzent);stroke:var(--flaeche);stroke-width:2px}.diagramm .saeule{fill:var(--akzent)}.tabelle-alternativ summary{cursor:pointer;color:var(--leise);padding:10px 0}.tabelle-rahmen{overflow-x:auto}.tabelle{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.tabelle th,.tabelle td{border-bottom:1px solid var(--linie);text-align:left;white-space:nowrap;padding:6px 8px}.tabelle td{text-align:right}.diagramm figcaption .leise{font-weight:400}.gross small{font-size:1rem;display:block}