@font-face{font-family:Jakarta;src:url('assets/jakarta.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:DMSerif;src:url('assets/fonts/dm-serif-display.woff2') format('woff2');font-weight:400;font-display:swap}

/* ── Markenpalette (Palette 28.09.2026 + Dämmerblau als 5. Farbe) ─────────────────────── */
:root{
  --nacht:#1C1D40;      /* leicht vertieftes Space Indigo für die Website */
  --daemmer:#3E4C80;    /* 5. Farbe: Brücke Nacht↔Himmel; Links, Fokus, Sekundärtext */
  --himmel:#D2E1EE;     /* Pale Sky · ruhige Flächen, Auswahl */
  --wolke:#F6F8FC;      /* Platinum · Lese- und Lerngrund */
  --gold:#D9BF8C;       /* Soft Fawn · Wortmarke und warme Akzente */
  --gold-hell:#F5ECD9;
  --gold-text:#725421;  /* lesbarer Goldton auf hellen Flächen */
  --magenta:#B33D50;    /* App-Links · entsättigte Variante des gewählten Rottons */
  --magenta-hover:#9C3042;
  --schatten:0 12px 36px -14px rgba(28,29,64,.18),0 3px 10px rgba(28,29,64,.04);

  /* abgeleitete Stufen */
  --nacht-2:#2A2B57;
  --nacht-linie:rgba(210,225,238,.16);
  --himmel-hell:#E4EDF6;
  --papier:#FFFFFF;
  --linie:#D5DEEA;
  --text-leise:#4A5670;     /* 7.3:1 auf Wolkenweiß */
  --text-nacht-leise:#A9B8CE;

  /* Zustände – funktional, keine Markenfarben */
  --richtig:#2D6A58;
  --richtig-flaeche:#E3F0EB;
  --falsch:#A2433F;
  --falsch-flaeche:#F7E7E5;
  --zoegern:#9A5B1E;        /* Orange-Familie wie Ductus-Strichfolge */
  --zoegern-flaeche:#F6EBDD;

  --sans:Jakarta,"Helvetica Neue",Arial,sans-serif;
  --display:DMSerif,Georgia,"Times New Roman",serif;
  --display-gewicht:400;
  --ja:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Shippori Mincho","Noto Serif JP",serif;
  --ja-sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --rand:clamp(20px,6vw,96px);
  --breit:1240px;
  --abschnitt-abstand:clamp(56px,6vw,80px);
  --spalten-abstand:clamp(32px,5vw,64px);
  --karten-rand:clamp(24px,2.5vw,32px);
  --uebungs-breite:360px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--wolke);color:var(--nacht);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--daemmer);outline-offset:3px;border-radius:4px}
.nacht :focus-visible{outline-color:var(--himmel)}
::selection{background:var(--himmel);color:var(--nacht)}
[lang="ja"]{font-family:var(--ja);font-feature-settings:"palt" 0}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2{font-family:var(--display);font-weight:var(--display-gewicht)}
p{margin:0}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:50;background:var(--papier);padding:10px 14px;border-radius:6px}
.skip:focus{top:12px}
.wrap{max-width:var(--breit);margin-inline:auto;padding-inline:var(--rand)}
.marke{display:inline-flex;color:var(--gold)}
.marke svg{display:block;height:auto}
.marke img{display:block;height:auto}
.inline-wortmarke{display:inline-block;width:3.42em;height:.57em;margin-inline:.22em;vertical-align:-.02em;background:currentColor;-webkit-mask:url('assets/wordmark.svg') center/contain no-repeat;mask:url('assets/wordmark.svg') center/contain no-repeat}
.knopf .inline-wortmarke{flex-shrink:0;margin-inline:0}

/* ── Nachtflächen ──────────────────────────────────────────────────────── */
.nacht{background:var(--nacht);color:var(--wolke)}
.etikett{font-size:12.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--daemmer)}
.nacht .etikett{color:var(--text-nacht-leise)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(28,29,64,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(0,0,0,.08)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.kopf nav{display:flex;gap:30px;font-size:14.5px;color:var(--text-nacht-leise)}
.kopf nav a{text-decoration:none;transition:color .2s}
.kopf nav a:hover{color:var(--gold)}
.kopf nav a[aria-current="page"]{color:var(--wolke);text-decoration:underline;text-underline-offset:8px}
.kopf .knopf.rand{background:var(--gold);color:var(--nacht);white-space:nowrap}
.kopf .knopf.rand:hover{background:var(--gold-hell)}
.mobil-ueber{display:none;color:var(--himmel);font-size:14px;text-decoration:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;padding:11px 20px;font-size:14.5px;font-weight:600;text-decoration:none;border:0;transition:background .2s,color .2s,transform .2s}
.knopf:hover{transform:translateY(-1px)}
.knopf.hell{background:var(--gold);color:var(--nacht);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.knopf.hell:hover{background:var(--gold-hell)}
.knopf.rand{background:rgba(210,225,238,.07);color:var(--wolke);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.knopf.rand:hover{background:rgba(210,225,238,.1)}
.knopf.dunkel{background:var(--nacht);color:var(--wolke)}
.knopf.dunkel:hover{background:var(--daemmer)}

/* Held */
.held{position:relative;overflow:hidden}
.held-abschluss{position:absolute;z-index:2;bottom:-1px;left:0;width:100%;height:clamp(58px,7vw,96px);fill:var(--wolke);pointer-events:none}
.held-himmel{position:absolute;inset:0;pointer-events:none;background:url('assets/hero-himmel.svg') center bottom / cover no-repeat;opacity:.7}
.held-himmel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,29,64,.76),rgba(28,29,64,.35) 65%,rgba(28,29,64,.12))}
.held-sterne,.held-sternbild{position:absolute;pointer-events:none;color:#F5DCAF}
.held-sterne{inset:0;width:100%;height:100%;opacity:.64}
.held-sternbild{--sternbild-dauer:8s;--sternbild-verzoegerung:.5s;right:clamp(18px,4vw,72px);top:28px;width:clamp(200px,24vw,340px);height:auto;opacity:.95}
.stern{fill:currentColor;opacity:.45}
.stern circle{transform-box:fill-box;transform-origin:center;transform:scale(1.65)}
.stern-hof{opacity:.18}
.held-sterne .stern-hof{opacity:.06}
.sternbild-linie,.sternbild-glanz{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.34;filter:drop-shadow(0 0 2px rgba(245,220,175,.55))}
.sternbild-glanz{stroke:#FFF1D1;stroke-width:1.8;opacity:0;stroke-dasharray:.075 1;filter:drop-shadow(0 0 3px rgba(245,220,175,.85))}
/* Nur der Hero bewegt sich. Die Sterne im Funktionskatalog bleiben unverändert. */
.himmel-bewegt .stern{animation:stern-atmen calc(var(--dauer)*.35) ease-in-out var(--versatz) infinite}
.himmel-bewegt .held-sterne{animation:sternfeld-treiben 34s ease-in-out infinite alternate}
.himmel-bewegt .sternbild-linie{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:sternbild-entsteht var(--sternbild-dauer) linear var(--sternbild-verzoegerung) infinite}
.himmel-bewegt .sternbild-glanz{animation:sternbild-lichtspur var(--sternbild-dauer) linear var(--sternbild-verzoegerung) infinite}
.himmel-bewegt .held-sternbild .stern{opacity:.22;animation:var(--folge) var(--sternbild-dauer) linear var(--sternbild-verzoegerung) infinite}
.held[data-himmel-pause="true"] .held-sterne,.held[data-himmel-pause="true"] .stern,.held[data-himmel-pause="true"] .sternbild-linie,.held[data-himmel-pause="true"] .sternbild-glanz{animation-play-state:paused}
@keyframes sternfeld-treiben{from{transform:translate3d(-3px,2px,0)}to{transform:translate3d(5px,-4px,0)}}
@keyframes stern-atmen{0%,100%{opacity:.28}45%{opacity:1}75%{opacity:.38}}
@keyframes sternbild-entsteht{0%{stroke-dashoffset:1;opacity:.4}55%{stroke-dashoffset:0;opacity:.66}76%{stroke-dashoffset:0;opacity:.5}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sternbild-lichtspur{0%{stroke-dashoffset:.075;opacity:.9}55%{stroke-dashoffset:-.925;opacity:1}60%,100%{stroke-dashoffset:-.925;opacity:0}}
/* Ankunft = anteilige Strecke auf dem SVG-Pfad × 55 % der gemeinsamen Runde. */
@keyframes sternbild-punkt-0{0%{opacity:.7}1.5%{opacity:1}6%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-1{0%,8.695%{opacity:.22}10.195%{opacity:1}14.695%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-2{0%,16.782%{opacity:.22}18.282%{opacity:1}22.782%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-3{0%,26.479%{opacity:.22}27.979%{opacity:1}32.479%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-4{0%,36.854%{opacity:.22}38.354%{opacity:1}42.854%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-5{0%,46.422%{opacity:.22}47.922%{opacity:1}52.422%,76%{opacity:.68}96%,100%{opacity:.22}}
@keyframes sternbild-punkt-6{0%,55%{opacity:.22}56.5%{opacity:1}61%,76%{opacity:.68}96%,100%{opacity:.22}}
@media(max-width:1000px) and (min-width:701px){.held-sternbild{top:12px;width:200px;opacity:.8}}
@media(max-width:700px){.held-sternbild{top:0;right:22px;width:92px;opacity:.9}}
@media(prefers-reduced-motion:reduce){.sternbild-glanz{display:none}.himmel-bewegt .held-sterne{animation:none}.himmel-bewegt .sternbild-linie{stroke-dasharray:none;opacity:.34}.himmel-bewegt .held-sternbild .stern{opacity:.68}}
.held-layout{position:relative;z-index:1;padding-block:clamp(84px,10vw,132px) clamp(92px,10vw,132px)}
.held h1{font-size:clamp(52px,7.2vw,98px);letter-spacing:-.055em;line-height:1.02;max-width:1100px;text-shadow:0 2px 3px rgba(8,9,28,.32),0 8px 24px rgba(8,9,28,.24)}
.held h1 .zart{color:var(--gold)}
.held .unter{margin-top:32px;max-width:780px;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:#D4DEEC}
.held .unter .inline-wortmarke{margin-inline:.28em}
.sprachenwahl{display:grid;gap:18px;margin-top:48px;color:var(--text-nacht-leise)}
.sprachen-titel{font-size:clamp(24px,2.6vw,32px);font-weight:600;line-height:1.35;color:var(--wolke)}
.sprachen-optionen{display:flex;flex-wrap:wrap;gap:10px}
.sprachen-optionen button{border:1px solid transparent;border-radius:10px;background:rgba(210,225,238,.12);padding:13px 24px;min-height:50px;font-size:18px;line-height:1.35;color:var(--himmel);transition:background .2s,color .2s}
.sprachen-optionen button:not(:disabled):hover{background:var(--himmel-hell);color:var(--nacht)}
.sprachen-optionen button[aria-pressed="true"]{background:var(--himmel);color:var(--nacht)}
.sprachen-optionen button:disabled{cursor:default;color:var(--text-nacht-leise);opacity:.5;background:rgba(210,225,238,.05)}
.sprachen-hinweis{font-size:12px;line-height:1.5}
.sprechpaar{display:block;margin-bottom:.55em}
.satz-quelle{font-size:12px;line-height:1.5;color:var(--text-leise);margin-block:8px 12px;text-align:center}
.satz-quelle a{text-underline-offset:3px}
.einstieg{padding-block:64px 48px}
.einstieg-kopf{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.einstieg-kopf .etikett{margin-bottom:12px}
.einstieg-kopf h2{font-size:clamp(34px,4vw,50px);letter-spacing:-.025em;line-height:1.12}
.einstieg-kopf>.textknopf{white-space:nowrap;font-size:13px}
.level-optionen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.level-optionen button{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;min-height:224px;padding:28px;border:1px solid transparent;border-radius:16px;background:var(--papier);box-shadow:var(--schatten);transition:background .2s,border-color .2s}
.level-nummer{font-size:13px;color:var(--gold-text);margin-bottom:16px;font-variant-numeric:tabular-nums}
.level-optionen strong{font:400 clamp(23px,2.5vw,30px)/1.15 var(--display)}
.level-optionen button>span:not(.level-nummer):not(.level-pfeil){font-size:13px;color:var(--text-leise);max-width:22ch}
.level-optionen .level-pfeil{position:absolute;bottom:26px;right:28px;font-size:24px;line-height:1}
.level-optionen button[aria-pressed="true"]{background:var(--gold-hell);border-color:var(--gold)}
@media(hover:hover){.level-optionen button:hover{background:var(--himmel-hell);border-color:var(--himmel)}.level-optionen button[aria-pressed="true"]:hover{background:var(--gold-hell);border-color:var(--gold)}}
h2[tabindex="-1"]:focus{outline:none}
.pfad-stationen{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;padding-block:24px 8px}
.pfad-stationen a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;text-decoration:none;color:var(--text-leise)}
.pfad-stationen a:hover{color:var(--nacht)}
.pfad-stationen a[aria-current="step"]{color:var(--nacht)}
.pfad-stationen a[aria-current="step"] .pfad-nummer{background:var(--gold-hell);border-color:var(--gold);color:var(--gold-text)}
.pfad-nummer{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--himmel);color:var(--nacht);font-size:11px}
.maskottchen{position:relative;z-index:1;margin:0;text-align:center}
.maskottchen-platz{width:clamp(210px,22vw,280px);height:clamp(210px,22vw,280px);border:1.5px dashed rgba(217,191,140,.8);border-radius:48% 52% 53% 47%;transform:rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(210,225,238,.05);color:var(--gold)}
.maskottchen-platz span{font-family:var(--display);font-size:68px;line-height:1}
.maskottchen-platz small{font-family:var(--sans);font-size:14px;line-height:1.4;letter-spacing:.02em}

/* ── Kapitel allgemein ─────────────────────────────────────────────────── */
.kapitel{padding-block:var(--abschnitt-abstand)}
.kapitel-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px var(--spalten-abstand);align-items:center;margin-bottom:clamp(32px,4vw,48px)}
.kapitel h2{font-size:clamp(37px,4vw,58px);letter-spacing:-.045em;line-height:1.12}
.kapitel-intro{margin-top:24px}
.kapitel h2 .leise{color:var(--daemmer)}
.nacht .kapitel h2 .leise,.nacht h2 .leise{color:var(--himmel)}
.fliess{color:var(--text-leise);max-width:34em}
.fliess+.fliess{margin-top:14px}
.nacht .fliess{color:#C6D2E3}
.fliess strong{color:var(--nacht);font-weight:650}
.nacht .fliess strong{color:var(--wolke)}

.buehne{background:var(--papier);border:0;border-radius:16px;box-shadow:var(--schatten)}
.buehne-kopf{flex-wrap:wrap;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px var(--karten-rand) 12px;font-size:13px;color:var(--text-leise)}
.buehne-kopf b{font-weight:650;color:var(--nacht);letter-spacing:.02em}
.hinweis-beispiel{font-size:12.5px;color:var(--text-leise);padding:12px var(--karten-rand) 16px}
.taste{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid currentColor;border-radius:5px;font-size:11.5px;font-weight:600;opacity:.6}

.textknopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:none;border:0;padding:4px 0;border-bottom:1px solid currentColor;font-size:14.5px;font-weight:560;line-height:1.5;color:var(--gold-text)}
.demo-hinweis{border:0;padding:14px 0 0;max-width:80ch}

/* Die kurzen Schrift- und Wortübungen teilen eine ruhige Kartenfläche. */
.lernkarte{padding:var(--karten-rand);text-align:center;min-height:460px}
#repetitio-demo{min-height:548px}
/* Ohne eigene Lesung braucht die Bedeutungsrunde weniger Platz. */
#repetitio-demo:has(#rp-form[hidden]):has(#rp-eigene[hidden]){min-height:472px}
.lernkarte-stand{font-size:12px;color:var(--text-leise);margin-bottom:24px;text-align:right;font-variant-numeric:tabular-nums}
.lernkarte-frage{font-size:14px;color:var(--text-leise)}
.lernkarte-wort{font-size:clamp(52px,5vw,68px);line-height:1.4;margin:16px 0 24px;overflow-wrap:anywhere}
.lernkarte-wort[lang="en"]{font-family:var(--display)}
.lernkarte-hilfe{margin-top:16px;min-height:44px}
.lernkarte-aufdecken{min-height:48px;width:100%;max-width:var(--uebungs-breite);margin-top:24px}
#rp-form[hidden]~.lernkarte-aufdecken{margin-top:0}
.lernkarte-ende{display:flex;flex-direction:column;align-items:center;gap:20px}
.lernkarte-ende .lernkarte-wort{margin:0}
.lernkarte-ende>p:not(.etikett){color:var(--text-leise);font-size:14px}
.lernkarte-ende>.textknopf{align-self:center;min-height:44px}
#ic-eingabe{font-family:var(--sans)}
.rp-antwort{margin-top:0}
.rp-eingabe{margin-top:16px;padding:12px 16px;border:1px solid var(--linie);border-radius:10px;font-size:13px;overflow-wrap:anywhere}
.rp-eingabe[data-zustand="ok"]{color:var(--richtig);background:var(--richtig-flaeche);border-color:var(--richtig)}
.rp-eingabe[data-zustand="nein"]{color:var(--falsch);border-color:var(--falsch)}
.rp-bedeutungsfeld{margin-top:16px;padding:16px;border-radius:12px;background:var(--wolke)}
.rp-bedeutungsfeld .etikett{font-size:10px}
.rp-lesung{font-size:18px;color:var(--text-leise)}
.rp-bedeutung{font-size:24px;margin-top:12px}
.rp-bewertungen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.rp-bewertungen button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linie);border-radius:10px;padding:12px 6px;min-height:74px;font-size:12px;background:var(--wolke)}
.rp-bewertungen button:hover{background:var(--himmel-hell);border-color:var(--daemmer)}
.rp-bewertungen [data-rp-rating="again"]{background:var(--falsch-flaeche);color:var(--falsch)}
.rp-bewertungen [data-rp-rating="hard"]{background:var(--gold-hell);color:var(--gold-text)}
.rp-bewertungen [data-rp-rating="good"]{border-color:var(--daemmer);background:var(--himmel);color:var(--nacht)}
.rp-bewertungen [data-rp-rating="easy"]{background:var(--richtig-flaeche);color:var(--richtig)}
.rp-mitnehmen{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.rp-mitnehmen span{font-size:22px;padding:6px 12px;border-radius:8px;background:var(--gold-hell)}
.rp-mitnehmen span[lang="en"]{font-family:var(--display)}

/* ── 2 · Sätze ─────────────────────────────────────────────────────────── */
.saetze{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--spalten-abstand);align-items:start}
.schalter{display:inline-flex;background:var(--wolke);border:0;border-radius:10px;padding:4px;gap:2px;box-shadow:0 3px 12px rgba(28,29,64,.06)}
.schalter button{white-space:nowrap;min-height:44px;border:0;background:none;border-radius:7px;padding:8px 14px;font-size:13.5px;font-weight:560;color:var(--text-leise)}
.schalter button:focus-visible{outline-offset:-3px}
.schalter button[aria-pressed="true"]{background:var(--gold);color:var(--nacht)}
.satz-buehne .innen{padding:var(--karten-rand) var(--karten-rand) 32px}
.ziel{font-size:13px;color:var(--text-leise);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ziel .muster{font-family:var(--ja);font-size:17px;color:var(--nacht);background:var(--gold-hell);border-radius:8px;padding:2px 10px}
.satz{font-family:var(--ja);font-size:clamp(26px,3.2vw,40px);line-height:2;margin:22px 0 8px;letter-spacing:.03em}
.satz .neu{box-shadow:inset 0 -3px 0 var(--daemmer);padding:0 1px}
.satz-uebers{font-size:15px;color:var(--text-leise)}
.satz-bilanz{display:flex;gap:12px 18px;flex-wrap:wrap;margin-top:20px;font-size:13.5px;color:var(--text-leise)}
.satz-bilanz span{display:inline-flex;align-items:center;gap:8px}
.satz-bilanz i{width:14px;height:10px;border-radius:2px}
.satz-bilanz .in{box-shadow:inset 0 -3px 0 var(--daemmer)}

/* ── 3 · Formen ────────────────────────────────────────────────────────── */
.formen{background:#E5EDF5}
.formen-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--spalten-abstand);align-items:start}
.flexio{padding-bottom:24px}
.flexio .kopfzeile{display:flex;justify-content:space-between;align-items:center;padding:20px var(--karten-rand) 12px;font-size:13px;color:var(--text-leise);font-variant-numeric:tabular-nums}
.flexio .uhr{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--nacht)}
.flexio .uhr::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-text)}
.flexio .uhr.pause::before{background:var(--linie)}
.aufgabe{padding:20px var(--karten-rand) 10px;text-align:center}
.lemma{font-family:var(--ja);font-size:clamp(46px,5.6vw,68px);line-height:1.2}
.lemma-lesung{margin-top:12px;margin-bottom:28px;font-family:var(--ja);font-size:15px;color:var(--text-leise);letter-spacing:.12em}
.merkmale{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:18px 0 22px}
.merkmale span{font-size:13px;font-weight:600;border:0;background:var(--gold-hell);color:var(--gold-text);border-radius:8px;padding:5px 13px}
.eingabe{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:var(--uebungs-breite);margin:0 auto}
.antwortfeld{flex:1;min-width:0;border:1px solid var(--linie);border-radius:8px;background:var(--wolke)}
.antwortfeld:focus-within{border-color:var(--daemmer);box-shadow:inset 0 -2px 0 var(--daemmer);background:var(--papier)}
.antwortfeld[data-zustand="ok"]{border-color:var(--richtig);background:var(--richtig-flaeche);box-shadow:none}
.antwortfeld[data-zustand="nein"]{border-color:var(--falsch);background:var(--papier);box-shadow:none}
.antwortfeld[data-zustand="ok"]:focus-within{box-shadow:inset 0 -2px 0 var(--richtig)}
.antwortfeld[data-zustand="nein"]:focus-within{box-shadow:inset 0 -2px 0 var(--falsch)}
.eingabe input{width:100%;min-width:0;font-family:var(--ja);font-size:24px;line-height:1.5;padding:14px 16px;border:0;border-radius:10px;background:transparent;text-align:center;color:var(--nacht)}
.eingabe input::placeholder{font-family:var(--sans);font-size:16px;color:var(--text-leise);opacity:.8}
.eingabe input:focus{outline:none}
.lese-eingabe{row-gap:12px}
.lese-eingabe>label{text-align:left;font-size:12px;font-weight:600;color:var(--text-leise)}
.lese-eingabe .antwortfeld{border:0;border-bottom:2px solid var(--linie);border-radius:4px 4px 0 0;background:var(--wolke)}
.lese-eingabe .antwortfeld:focus-within{border-bottom-color:var(--daemmer);box-shadow:none}
.lese-eingabe .antwortfeld[data-zustand="ok"]{border-bottom-color:var(--richtig);background:var(--richtig-flaeche)}
.lese-eingabe .antwortfeld[data-zustand="nein"]{border-bottom-color:var(--falsch);background:var(--papier)}
.lese-eingabe input{padding:12px 16px;font-size:20px;border-radius:4px 4px 0 0}
.eingabe button{min-height:48px;border:0;border-radius:10px;padding:0 18px;background:var(--gold);color:var(--nacht);font-weight:600;font-size:14.5px;box-shadow:0 3px 12px rgba(28,29,64,.08)}
.eingabe-hilfe{font-size:12.5px;color:var(--text-leise);margin:16px auto 0;max-width:40ch;line-height:1.6}
.rueckmeldung{padding:4px 16px 16px;font-size:13.5px;line-height:1.6;text-align:center;color:var(--nacht)}
.rueckmeldung:empty{padding:0}
.antwortfeld[data-zustand="ok"] .rueckmeldung{color:var(--richtig)}
.rueckmeldung .form{margin-top:6px;font-size:13px;color:var(--text-leise)}
.rueckmeldung .form>span{font-family:var(--ja);font-size:20px;color:var(--nacht)}
.rueckmeldung .form mark{background:none;color:inherit;box-shadow:inset 0 -3px 0 currentColor}
.rueckmeldung b{font-weight:650}
.antwortzeit{font-size:12.5px;margin-top:16px;color:var(--text-leise)}
@media (max-width:480px){
  .eingabe{flex-wrap:wrap;gap:16px}
  .antwortfeld{flex-basis:100%}
  .eingabe button{width:100%;min-height:48px;padding:10px 18px}
}
.zeiten{display:flex;align-items:flex-end;gap:10px;padding:12px var(--karten-rand) 6px;height:110px}
.flexio:has(#fx-start:not([hidden])) .zeiten{height:44px;padding-top:12px}
.zeiten .balken{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:11.5px;color:var(--text-leise);font-variant-numeric:tabular-nums}
.zeit-stapel{width:100%;max-width:44px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:3px 3px 0 0;overflow:hidden}
.zeit-stapel i{display:block;width:100%;flex:none;transition:height .4s}
.zeit-richtig{background:var(--richtig)}
.zeit-falsch{background:var(--falsch)}
.zeit-stapel .leer{height:3px;background:var(--linie)}
.zeiten-legende{display:flex;gap:16px;flex-wrap:wrap;padding:6px var(--karten-rand) 0;font-size:11.5px;color:var(--text-leise)}
.zeiten-legende span{display:inline-flex;gap:6px;align-items:center}
.zeiten-legende i{width:12px;height:9px;border-radius:2px}
.schluss{padding:24px var(--karten-rand);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.schluss p{max-width:36ch;color:var(--text-leise);font-size:15px}
.schluss .runden-ergebnis{max-width:26ch;font-family:var(--display);font-size:clamp(25px,2.7vw,34px);font-weight:var(--display-gewicht);letter-spacing:-.03em;line-height:1.2;color:var(--nacht)}
.schluss .runden-ergebnis span{white-space:nowrap}
.schluss .runden-hinweis{margin-bottom:6px}

/* ── 4 · Lesen ─────────────────────────────────────────────────────────── */
.lesen-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:var(--spalten-abstand);align-items:start}
.leser .buehne-kopf{flex-wrap:wrap}
.werk{padding:20px var(--karten-rand) 28px}
.werk-titel{font-family:var(--ja);font-size:15px;color:var(--text-leise);letter-spacing:.1em}
.text-ja{font-family:var(--ja);font-size:clamp(24px,2.8vw,34px);line-height:2.15;letter-spacing:.06em;margin-top:16px}
.text-ja rt{font-size:.42em;letter-spacing:.05em;color:var(--daemmer);transition:opacity .25s}
.text-ja rt.aus{opacity:0}
.w{background:none;border:0;padding:0 1px;font:inherit;letter-spacing:inherit;line-height:inherit;border-radius:4px;cursor:pointer;transition:background .15s}
.w:hover{background:var(--himmel-hell)}
.w[aria-pressed="true"]{background:var(--himmel)}
.werk-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:var(--text-leise)}
.uebersetzung{font-size:15px;color:var(--text-leise);margin-top:10px}
.leseziel{position:sticky;top:96px}
.leseziel-karte{background:var(--gold-hell);border-radius:18px;padding:clamp(24px,3vw,36px);box-shadow:var(--schatten)}
.leseziel-karte h3{font-family:var(--display);font-size:clamp(29px,3vw,39px);font-weight:var(--display-gewicht);letter-spacing:-.035em;line-height:1.18}
.leseziel-karte p{margin-top:18px;font-size:16px;color:var(--text-leise)}
.leseziel-karte .leseziel-forschung{font-size:14.5px;line-height:1.65;margin-top:24px}
.leseziel-quelle{display:inline-block;margin-top:12px;font-size:12px;color:var(--gold-text);text-underline-offset:3px}

/* ── Überblick ────────────────────────────────────────────────────────── */
.reise{position:relative;overflow:hidden}
.reise-himmel{opacity:.6}
.reise>.wrap{position:relative;z-index:1}
.reise-karte{position:relative;margin-top:clamp(32px,5vw,56px)}
.stationen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(16px,3vw,40px)}
.station{position:relative;padding-top:34px;display:flex;flex-direction:column;align-items:flex-start}
.station::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--gold)}
.station.arbeit::before{background:transparent;border:1.5px solid var(--himmel);opacity:.7}
.station h3{font-size:19px;font-weight:620;letter-spacing:-.01em}
.station p{font-size:14.5px;color:#C6D2E3;margin-top:6px}
.station .stand{display:inline-block;margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--gold)}
.station.arbeit .stand{color:var(--text-nacht-leise)}
.reise-fuss{margin-top:24px;font-size:13.5px;color:var(--text-nacht-leise);display:flex;gap:24px;flex-wrap:wrap}
.reise-fuss span{display:inline-flex;align-items:center;gap:10px}
.reise-fuss i{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.reise-fuss i.a{background:none;border:1.5px solid var(--himmel)}

/* ── Fragen ───────────────────────────────────────────────────────────── */
.fragen-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen details:first-child{border-top:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:17px;font-weight:560}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-size:22px;line-height:1.3;flex-shrink:0;color:var(--daemmer);transition:transform .2s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 40px 22px 0;color:var(--text-leise);font-size:15.5px}

/* ── Schluss ───────────────────────────────────────────────────────────── */
.ende{position:relative;padding-block:calc(var(--abschnitt-abstand) + 48px) clamp(40px,6vw,64px)}
.ende-auftakt{position:absolute;top:-1px;left:0;width:100%;height:clamp(58px,7vw,96px);background:#E5EDF5;fill:var(--nacht);pointer-events:none}
.ende h2{font-size:clamp(44px,6.4vw,84px);letter-spacing:-.045em;line-height:1.05}
.ende h2 .leise{color:var(--himmel);font-weight:380}
.ende .fliess{margin-top:24px}
.ende .aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.ende .knopf.hell{background:var(--gold)}
.ende .knopf.hell:hover{background:var(--gold-hell)}
.kopf .knopf.app-knopf,.ende .knopf.app-knopf{background:var(--magenta);color:#fff}
.kopf .knopf.app-knopf:hover,.ende .knopf.app-knopf:hover{background:var(--magenta-hover)}
.fuss{margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid var(--nacht-linie);display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;font-size:13px;color:var(--text-nacht-leise)}
.recht-seite{max-width:850px;padding-block:clamp(48px,7vw,88px);min-height:70vh}
.recht-seite h1{font-size:clamp(42px,6vw,68px);line-height:1.08;margin:12px 0 32px}
.recht-seite h2{font-size:clamp(25px,3vw,33px);margin:0 0 8px}
.recht-seite section{border-top:1px solid var(--linie);padding-block:26px}
.recht-seite p{max-width:75ch;line-height:1.75}
.recht-seite a{color:var(--daemmer);text-underline-offset:3px}
.recht-stand{color:var(--text-leise);font-size:13px;margin-top:20px}

/* Über uns: etwas mehr Magazinseite als Produktoberfläche */
.ueber-seite h1,.ueber-seite h2{letter-spacing:-.045em;line-height:1.12}
.ueber-held{padding-block:clamp(90px,10vw,148px)}
.ueber-held-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr);gap:clamp(40px,7vw,110px);align-items:end}
.ueber-held h1{font-size:clamp(50px,6.2vw,86px);max-width:15ch;margin:20px 0 28px}
.ueber-held p:not(.etikett){max-width:58ch;color:#D4DEEC;font-size:clamp(17px,1.5vw,20px)}
.ueber-randnotiz{border-top:1px solid var(--gold);padding-top:24px;color:var(--gold);font-family:var(--display);font-size:26px;line-height:1.3}
.ueber-randnotiz p{color:var(--gold)!important}
.randnotiz-stern{display:block;font-size:34px;line-height:1;margin-bottom:16px}
.ueber-geschichte,.ueber-alltag,.ueber-figur{padding-block:clamp(72px,8vw,112px)}
.ueber-spalten{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,110px)}
.ueber-seite h2{font-size:clamp(37px,4.3vw,61px);margin-top:16px;max-width:16ch}
.ueber-text{max-width:54ch;display:grid;gap:22px;font-size:18px;color:var(--text-leise)}
.ueber-alltag{background:var(--papier)}
.ueber-alltag h2{max-width:21ch}
.ueber-szenen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,7vw,110px);max-width:1000px;margin-top:38px;color:var(--text-leise);font-size:18px}
.ueber-figur{background:var(--himmel-hell)}
.ueber-figur-raster{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1.55fr);gap:clamp(36px,8vw,120px);align-items:center}
.ueber-figur .maskottchen-platz{width:180px;height:180px;background:rgba(255,255,255,.5);border-color:var(--daemmer);color:var(--daemmer)}
.ueber-figur h2{margin-bottom:24px}
.ueber-figur p:not(.etikett){max-width:54ch;color:var(--text-leise);font-size:18px}
.textlink{display:inline-block;margin-top:28px;color:var(--nacht);font-weight:650;text-underline-offset:5px}
.ueber-schluss{padding-block:clamp(72px,8vw,112px) 40px}
.ueber-schluss h2{font-size:clamp(48px,6vw,82px);margin:16px 0 20px}
.ueber-schluss p:not(.etikett){color:#D4DEEC}
.ueber-schluss .aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ueber-schluss .zugang{margin-top:16px;font-size:13px;color:var(--text-nacht-leise)!important}
.ueber-schluss .fuss{margin-top:clamp(72px,9vw,112px)}

/* Lateinische Beispiele: passend zur Sprache statt japanischer Schriftstufen. */
.lemma[lang="en"]{font-family:var(--display)}
.lemma-lesung[lang="en"],.eingabe input[lang="en"],.ziel .muster[lang="en"],.rueckmeldung .form[lang="en"]{font-family:var(--sans)}
.satz[lang="en"]{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.65;letter-spacing:0}
.werk-titel[lang="en"]{font-family:var(--sans);letter-spacing:0}
.text-ja[lang="en"]{font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,1.7vw,24px);font-weight:400;line-height:1.85;letter-spacing:0;max-width:60ch}
.text-ja[lang="en"] rt{font-family:var(--sans);font-size:12px;font-weight:400;line-height:1.2;letter-spacing:0}
.text-ja[lang="en"] .w{padding:0;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--linie);text-underline-offset:4px}
.text-ja[lang="en"] ruby{ruby-align:center}

/* ── Compositio, Lectio und Ductus ───────────────────────── */
#cp-start{margin-top:24px}
.satz-buehne:has(#compositio:not([hidden])) .ziel-label,.satz-buehne:has(#compositio:not([hidden])) .ziel-bedeutung{display:none}
.cp-schritte{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.cp-schritte button{border:0;border-radius:20px;padding:9px 14px;min-height:44px;background:var(--wolke);color:var(--text-leise);font:inherit;font-size:13px;cursor:pointer}
.cp-schritte button[aria-pressed="true"]{background:var(--gold-hell);color:var(--nacht);font-weight:650}
.cp-auftrag{font-weight:650;font-size:17px;line-height:1.5;text-align:center}
.cp-uebers{color:var(--text-leise);font-size:15px;line-height:1.6;text-align:center;margin:10px 0 24px}
.cp-auswahl{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:var(--wolke);padding:16px;border-radius:12px;min-height:84px}
.cp-leer{color:var(--text-leise);font-size:14px}
.cp-pool{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.cp-baustein{font-family:var(--ja);font-size:20px;line-height:1.5;padding:10px 13px;min-height:48px;border:1px solid var(--gold);border-radius:9px;color:var(--nacht);background:var(--gold-hell);cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.cp-baustein[lang="en"]{font-family:var(--sans);font-size:17px}
.cp-baustein.gesetzt{background:var(--papier);border-color:var(--himmel)}
.cp-pool .cp-baustein:disabled{opacity:.35;cursor:default}
.cp-baustein.gesetzt:disabled{opacity:1;cursor:default}
.cp-kontext{font-family:var(--ja);font-size:clamp(24px,2.3vw,30px);line-height:1.8;text-align:center;line-break:strict}
.cp-kontext[lang="en"]{font-family:var(--display);font-size:26px}
.cp-luecke{color:var(--daemmer);border-bottom:2px solid var(--daemmer);padding-inline:6px}
.cp-wort{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:14px 0 20px;font-size:13px;color:var(--text-leise)}
.cp-wort>span:first-child{font-size:18px;color:var(--nacht)}
.cp-wort rt{font-size:10px;color:var(--text-leise)}
.cp-teilsatz textarea{display:block;width:100%;min-width:0;min-height:112px;resize:vertical;border:1px solid var(--himmel);border-radius:12px;background:var(--wolke);color:var(--nacht);font-family:var(--ja);font-size:24px;line-height:1.6;text-align:left;padding:16px 18px}
.cp-teilsatz textarea[lang="en"]{font-family:var(--sans);font-size:22px}
.cp-teilsatz textarea:focus{outline:none;border-color:var(--daemmer);box-shadow:inset 0 -2px 0 var(--daemmer);background:var(--papier)}
/* Gleiche Schriftmetriken im leeren Feld halten Cursor und Platzhalter auf einer Zeile. */
.cp-teilsatz textarea:placeholder-shown{font-family:var(--sans);font-size:16px}
.cp-teilsatz textarea::placeholder{font:inherit;line-height:inherit;color:var(--text-leise);opacity:1}
.cp-ergebnissatz{font-family:var(--ja);font-size:clamp(24px,2vw,28px);line-height:1.9;text-align:center;text-wrap:balance;line-break:strict;overflow-wrap:anywhere;padding:12px 0}
.cp-ergebnissatz[lang="en"]{font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.6}
.cp-ergebnissatz mark{color:inherit;background:var(--gold-hell);border-radius:4px;padding:2px 0;box-shadow:inset 0 -2px 0 var(--daemmer)}
.cp-ergebnissatz[data-zustand="ok"] mark{background:var(--richtig-flaeche);box-shadow:inset 0 -2px 0 var(--richtig)}
.cp-erklaerung{text-align:center;font-size:13px;color:var(--text-leise)}
.cp-erklaerung[open]{flex-basis:100%}
.cp-erklaerung summary{display:inline-block;cursor:pointer;min-height:44px;padding:10px;color:var(--gold-text);text-decoration:underline;text-underline-offset:5px}
.cp-erklaerung p{padding:4px 0 12px;color:var(--nacht);font-size:15px}
.cp-aktionen{display:flex;justify-content:center;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:24px}
.cp-aktionen .textknopf,.cp-unten button,.lectio-ende button,.nachlese>button{min-height:44px}
.cp-feedback{font-size:14px;line-height:1.6;text-align:center;margin-top:18px;color:var(--text-leise)}
.cp-feedback:empty{min-height:0;margin-top:0}
.cp-feedback.ok{background:var(--richtig-flaeche);color:var(--richtig);padding:12px 16px;border-radius:10px;font-weight:600}
.cp-feedback.nein{background:var(--falsch-flaeche);color:var(--falsch);padding:12px 16px;border-radius:10px}
.cp-feedback.ruhig{background:var(--wolke);padding:12px 16px;border-radius:10px}
.cp-unten{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px;font-size:12px;color:var(--text-leise)}
.werk{position:relative}
.leser{overflow:visible}
.lese-anleitung{font-size:12.5px;color:var(--text-leise);margin-top:20px}
.wort-popup{position:absolute;z-index:8;background:var(--papier);border:1px solid var(--himmel);box-shadow:0 12px 32px #1c1d4024;border-radius:14px;padding:20px;color:var(--nacht);font-size:14px;line-height:1.65;letter-spacing:0}
.wort-popup .kopfwort{font-family:var(--ja);font-size:28px;padding-right:22px;line-height:1.5}
.wort-popup .kopfwort[lang="en"]{font-family:var(--display)}
.popup-zu{position:absolute;right:5px;top:5px;width:44px;height:44px;background:none;border:0;color:var(--text-leise);font-size:26px;cursor:pointer}
.wort-lesung{color:var(--daemmer);font-size:14px}
.wort-grund{font-size:12px;color:var(--text-leise);margin-top:10px}
.wort-gloss{margin-top:10px}
.wort-form{margin-top:10px;padding-top:10px;border-top:1px solid var(--linie);color:var(--text-leise);font-size:12px}
.lectio-ende{margin-top:24px;display:flex;justify-content:flex-end;align-items:center}
.lectio-ende:has(button[hidden]){display:none}
.nachlese{background:var(--gold-hell);padding:22px;border-radius:12px;margin-top:20px}
.nachlese h3{font-family:var(--display);font-size:28px;font-weight:400}
.nachlese>p{font-size:13px;color:var(--text-leise);margin-top:10px}
#nachlese-woerter{display:grid;gap:14px;margin:20px 0}
#nachlese-woerter p{font-size:12px;color:var(--text-leise);margin-top:4px}
.nachlese-wort{background:none;border:0;padding:0;font-family:var(--ja);font-size:20px;color:var(--nacht);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;min-height:44px;cursor:pointer;text-align:left}
.ductus-demo{padding:var(--karten-rand);max-width:640px;margin-inline:auto}
.ductus-innen{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"anleitung" "feld" "bedienung" "quelle";gap:24px;text-align:center}
.ductus-anleitung{grid-area:anleitung;font-size:18px;font-weight:600;color:var(--nacht)}
.ductus-bedienung{grid-area:bedienung;width:100%;max-width:360px;justify-self:center}
.ductus-status{color:var(--gold-text);margin:0 0 16px;font-size:12px;min-height:36px;display:grid;place-items:center}
.ductus-aktionen{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:center}
.ductus-aktionen .knopf{grid-column:1/-1;padding:12px 20px;font-size:14px;min-height:48px;background:var(--gold);color:var(--nacht)}
.ductus-aktionen .textknopf{color:var(--gold-text);min-height:44px;justify-self:center}
.ductus-aktionen button:disabled{opacity:.45;cursor:default;transform:none}
.ductus-weiter{display:flex;justify-content:flex-end;margin-top:24px;max-width:640px;margin-inline:auto}
.ductus-weiter a{min-height:44px}
.pfad-leser{display:block}
#lectio-demo{max-width:960px;margin-inline:auto}
.lese-forschung{font-size:12px;max-width:70ch;color:var(--text-leise);margin-top:24px}
.lese-forschung a{margin-left:8px;text-underline-offset:4px}
.lese-forschung a:first-child{margin-left:0}
.held-thema{color:var(--gold);margin-bottom:18px;line-height:1.7}
.demo-grenze{font-size:12px;color:var(--text-nacht-leise);margin-top:24px;max-width:65ch}
#ductus-feld{grid-area:feld;display:block;aspect-ratio:1;width:100%;max-width:320px;justify-self:center;background:var(--wolke);border-radius:12px;touch-action:none;user-select:none;cursor:crosshair}
.schreiblinien{fill:none;stroke:var(--himmel);stroke-width:1;stroke-dasharray:4 6}
.vorlage,.spur{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6}
.vorlage{stroke:#d2dae5}.vorlage.aktiv{stroke:var(--gold)}
.strich-start{fill:var(--gold-text);stroke:var(--gold-hell);stroke-width:2}
.spur{stroke:var(--nacht)}.spur.gezeigt{stroke:var(--daemmer)}
.ductus-quelle{grid-area:quelle;margin:0;font-size:10px;color:var(--text-leise)}
.ductus-quelle a{color:inherit;text-underline-offset:3px}
@media(max-width:700px){.cp-baustein{font-size:18px}.cp-aktionen{gap:16px 20px}.cp-schritte{justify-content:center}.cp-teilsatz textarea{font-size:22px;padding:14px}}

/* ── Bewegung ──────────────────────────────────────────────────────────── */
.auftritt{animation:auftritt .8s cubic-bezier(.2,.7,.3,1) both}
.auftritt.v1{animation-delay:.08s}.auftritt.v2{animation-delay:.16s}.auftritt.v3{animation-delay:.24s}
@keyframes auftritt{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Anpassung ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .kopf nav{display:none}
  .mobil-ueber{display:inline}
  .kapitel-kopf,.saetze,.formen-raster,.lesen-raster,.fragen-raster{grid-template-columns:minmax(0,1fr)}
  .kapitel-kopf{gap:16px;align-items:start}
  .saetze,.formen-raster,.lesen-raster{gap:32px}
  .formen-raster>.buehne,.saetze>.buehne{width:100%;max-width:640px;justify-self:center}
  .stationen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leseziel{position:static}
  .ueber-held-raster,.ueber-spalten,.ueber-figur-raster{grid-template-columns:minmax(0,1fr)}
  .ueber-randnotiz{max-width:400px}
}
@media (max-width:700px){
  body{font-size:16px}
  .kapitel{padding-block:48px}
  .kapitel-kopf{margin-bottom:28px}
  .kapitel-intro{margin-top:16px}
  .saetze,.formen-raster,.lesen-raster{gap:24px}
  .kopf .wrap{gap:10px}
  .kopf .marke svg,.kopf .marke img{width:84px}
  .sprachenwahl{margin-top:36px;gap:16px}
  .sprachen-optionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px}
  .sprachen-optionen button{padding:12px 16px;font-size:14px;min-height:48px}
  .sprachen-hinweis{font-size:11.5px}
  .einstieg{padding-block:44px 32px}
  .einstieg-kopf{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:24px}
  .level-optionen{grid-template-columns:1fr;gap:14px}
  .level-optionen button{min-height:132px;padding:20px 56px 20px 20px;gap:8px}
  .level-nummer{margin-bottom:0;font-size:11px}
  .level-optionen strong{font-size:26px}
  .level-optionen .level-pfeil{right:24px;bottom:50px}
  .pfad-stationen{gap:4px 18px;padding-block:16px 0}
  .pfad-stationen a{font-size:12px}
  .lernkarte{min-height:370px}
  #repetitio-demo{min-height:548px}
  .rp-bewertungen{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rp-bewertungen button{flex-direction:row;min-height:48px;padding:10px}
  .held-layout{padding-block:74px 96px}
  .held-himmel{background-position:68% bottom;opacity:.55}
  .held h1{font-size:clamp(46px,12vw,66px)}
  .maskottchen-platz{width:190px;height:190px}
  .maskottchen-platz span{font-size:52px}
  .kopf .knopf{padding:8px 10px;font-size:12.5px}
  .fragen details p{padding-right:0}
  .eingabe input{font-size:19px;padding:12px 10px}
  .stationen{grid-template-columns:minmax(0,1fr)}
  .ueber-szenen{grid-template-columns:minmax(0,1fr);gap:18px;font-size:16px}
  .ueber-text,.ueber-figur p:not(.etikett){font-size:16px}
  .ueber-figur .maskottchen-platz{width:190px;height:190px}
}
@media (max-width:360px){
  .kopf .wrap{gap:8px}
  .kopf .marke svg,.kopf .marke img{width:72px}
  .mobil-ueber{font-size:12.5px;white-space:nowrap}
  .kopf .knopf{font-size:11.5px;padding:8px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Die Lernkarten übernehmen die Führung der App, mit der Website-Palette. */
.lernkarte-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:12px;color:var(--text-leise)}
.lernphase{background:var(--gold-hell);color:var(--gold-text);padding:5px 10px;border-radius:20px}
.ic-vorstellpaar{display:flex;align-items:center;justify-content:center;gap:24px;min-height:180px;background:var(--gold-hell);border-radius:14px;margin-bottom:20px;padding:24px}
.ic-druck{font-size:clamp(76px,7vw,100px);line-height:1.3}
.ic-verbindung{font-size:28px;color:var(--gold-text)}
.ic-laut{font-size:36px}
.ic-beispiel{font-size:14px;color:var(--text-leise)}
.ic-beispiel [lang="ja"]{font-size:22px;color:var(--nacht)}
.lernkarte-start{width:100%;max-width:var(--uebungs-breite);margin-top:24px;min-height:48px}
.ic-paar{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;min-height:96px}
#ic-paarlaut{font:32px/1.4 var(--sans);color:var(--text-leise)}
#ic-eingabe{font-family:var(--sans)}
.lemma{overflow-wrap:anywhere}
.lemma .form-pfeil{font:24px/1.2 var(--sans);color:var(--text-leise)}
.lemma:has(.form-ziel){font-size:clamp(32px,3.5vw,44px)}
.lemma .form-ziel{font-size:inherit;display:inline-block}
.form-ziel mark{background:none;color:inherit;box-shadow:inset 0 -3px 0 var(--daemmer)}
@media(max-width:700px){.ic-vorstellpaar{gap:16px;padding:20px;min-height:160px}.ic-laut{font-size:30px}.lernkarte-kopf{margin-bottom:24px;gap:8px}.lernphase{font-size:11px}#ic-paarlaut{font-size:24px}}

@media(max-width:900px) and (min-width:701px){
  .level-optionen{grid-template-columns:1fr;gap:14px}
  .level-optionen button{min-height:132px;padding:20px 64px 20px 24px;gap:8px}
  .level-nummer{margin-bottom:0}
  .level-optionen strong{font-size:26px}
  .level-optionen .level-pfeil{bottom:50px}
}

/* Kleine Rückmeldungen innerhalb der vorhandenen Lernkarten. */
.wort-wiedersehen{animation:wort-wiedersehen 1.4s ease-out}
@keyframes wort-wiedersehen{0%{background-color:var(--gold-hell);box-shadow:0 0 0 5px var(--gold-hell)}100%{background-color:transparent;box-shadow:0 0 0 0 transparent}}
.ductus-selbst-gezeichnet #ductus-spuren{animation:stern-ankunft 1.5s ease-out}
@keyframes stern-ankunft{0%,100%{filter:none}35%{filter:drop-shadow(0 0 8px #d9bf8ca8)}}
#ductus-feld[data-abschluss="selbst"] .spur{stroke:var(--gold-text)}
.satz-audio{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin-top:24px;min-height:48px}
.audio-knopf{display:inline-flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--linie);border-radius:24px;background:var(--papier);padding:8px 17px;font-size:13px;color:var(--daemmer);transition:border-color .2s,background .2s}
.audio-knopf::before{content:'▶';font-size:10px;color:var(--gold-text)}
.audio-knopf[aria-pressed="true"]::before{content:'Ⅱ'}
.audio-knopf:hover{border-color:var(--gold);background:var(--gold-hell)}
#satz-audio-status{font-size:12px;color:var(--text-leise)}
.ohne-script{padding-block:32px;font-size:14px}
.fuss{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){
  .wort-wiedersehen,.ductus-selbst-gezeichnet #ductus-spuren{animation:none}
}