:root{--bg:#f6f3ec;--card:#fff;--ink:#222;--muted:#6f6a60;--ok:#2e8b57;--bad:#c0392b;--acc:#3a5ba0;--line:#e3ddd0;--gold:#c9961a;--lang:#9a3d00;--soft:#eef2fa}
@media (prefers-color-scheme:dark){:root{--bg:#1c1d21;--card:#2a2c31;--ink:#eee;--muted:#a3a3a3;--line:#3a3c42;--acc:#6f8fd6;--lang:#ffb27a;--soft:#2f3542;--gold:#e0b44a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.45 system-ui,sans-serif}
main{max-width:640px;margin:0 auto;padding:12px 16px 40px}
h1{font-size:1.25rem;margin:0}
h2{font-size:1.2rem;margin:.2rem 0 .6rem}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:.2rem 0 .8rem;flex-wrap:wrap}
.chip{font-size:.85rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}
.row{display:flex;gap:8px;flex-wrap:wrap}
.spalte{display:flex;flex-direction:column;gap:10px}
button,.knopf{font:inherit;min-height:44px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:.6rem 1rem;cursor:pointer;text-align:center;text-decoration:none}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
button.ok{background:var(--ok);color:#fff;border-color:var(--ok);flex:1}
button.bad{background:var(--bad);color:#fff;border-color:var(--bad);flex:1}
button.sel{outline:3px solid var(--acc);outline-offset:1px}
button.gross,a.gross{display:block;font-size:1.15rem;padding:1rem;text-align:left}
button.gross small,a.gross small{display:block;font-size:.85rem;opacity:.85;margin-top:.15rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:12px 0}
.karte{min-height:230px}
.dir{color:var(--muted);font-size:.85rem}
.prompt{font-size:1.55rem;font-weight:600;margin:.4rem 0;overflow-wrap:anywhere}
.info{color:var(--muted);font-size:.95rem}
.neu-marke{display:inline-block;font-size:.75rem;background:var(--gold);color:#fff;border-radius:6px;padding:0 .4rem;margin-left:.4rem;vertical-align:middle}
.answer{font-size:1.2rem;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line);overflow-wrap:anywhere}
.lang{color:var(--lang);font-weight:700}
.merk{margin-top:.6rem;font-size:.95rem;color:var(--muted)}
.merk.betont{color:var(--ink);background:var(--soft);border-left:4px solid var(--gold);padding:.5rem .7rem;border-radius:6px;font-size:1rem}
.vergleich{margin-top:.5rem;font-size:.95rem}
.vergleich .w-laengen{background:#ffe4c4;color:#7a3200;border-radius:4px;padding:0 .15rem}
@media (prefers-color-scheme:dark){.vergleich .w-laengen{background:#5a3a1a;color:#ffd2a6}}
input,select{font:inherit;width:100%;min-height:44px;padding:.55rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.tasten{display:flex;gap:6px;margin-top:6px}
.tasten button{flex:1;min-width:0;padding:.4rem 0;font-size:1.2rem}
.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin:6px 0}
.bar>div{height:100%;background:var(--ok);transition:width .3s}
.bar.zeit>div{background:var(--acc)}
.bar.level>div{background:var(--gold)}
.stats{color:var(--muted);font-size:.9rem}
.hidden{display:none !important}
.welcome{text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:220px;animation:rein .5s ease-out}
.salve{font-size:1.15rem;margin-top:.6rem}
.spruch{font-size:1.4rem;font-weight:600;line-height:1.35;margin:.6rem 0 .4rem}
.hinweisLeiste{background:#fff3cd;color:#5c4400;border:1px solid #f0d68a;border-radius:10px;padding:.5rem .8rem;font-size:.9rem;margin-bottom:8px}
.nachricht{background:var(--soft);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0}
#kommentar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,20px);max-width:min(560px,calc(100% - 32px));background:var(--ink);color:var(--bg);border-radius:14px;padding:.7rem 1rem;font-size:1rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5;text-align:center}
#kommentar.zeigen{opacity:1;transform:translate(-50%,0)}
.lektion{display:flex;align-items:center;gap:10px;padding:.5rem .2rem;border-bottom:1px solid var(--line)}
.lektion input{width:24px;height:24px;min-height:0;flex:none}
.lektion label{flex:1;cursor:pointer}
.lektion .klein{font-size:.8rem;color:var(--muted)}
.abzeichen{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.abz{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem;text-align:center;font-size:.85rem}
.abz .sym{font-size:1.8rem;display:block}
.abz.offen{opacity:.45;filter:grayscale(1)}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.kz{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem;text-align:center}
.kz b{display:block;font-size:1.4rem}
table{width:100%;border-collapse:collapse;font-size:.95rem}
td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.lbalken{display:grid;grid-template-columns:3.5rem 1fr 3.2rem;align-items:center;gap:6px;font-size:.85rem}
.lbalken .bar{margin:3px 0;position:relative}
.lbalken .bar>div.gelernt{position:absolute;inset:0 auto 0 0;background:#b9d9c6}
.lbalken .bar>div.sicher{position:absolute;inset:0 auto 0 0;background:var(--ok)}
label.feld{display:block;margin:.6rem 0 .2rem;font-size:.95rem}
#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.welcome{animation:none}#kommentar{transition:none}}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:0 14px}
details.faq summary{cursor:pointer;font-weight:600;padding:.75rem 0;min-height:44px;list-style-position:outside}
details.faq[open] summary{border-bottom:1px dashed var(--line);margin-bottom:.5rem}
details.faq p,details.faq ul,details.faq table{margin:.5rem 0 .9rem}
details.faq li{margin:.25rem 0}
.rang-titel{font-weight:700}

/* ---------- Startbildschirm: 3D-Kacheln (inspiriert von TME) ---------- */
:root{--kante:#d3d9e6;--kante-haupt:#14306e;--haupt:#1e4497;--haupt-2:#2c5cc5;--schatten:0 10px 22px rgb(11 20 51 / .10);
  --sf-gruen-f:#e6f5ea;--sf-gruen-s:#2f8f5b;--sf-blau-f:#e8effc;--sf-blau-s:#1e4497;--sf-beige-f:#f7efe1;--sf-beige-s:#9a7740;
  --sf-rot-f:#fdebe9;--sf-rot-s:#b23a2b;--sf-gold-f:#fbf1d6;--sf-gold-s:#9a6b00;--sf-grau-f:#eef0f4;--sf-grau-s:#5c6676;
  --bereich-vok:#eef7f1;--bereich-gram:#eef2fb}
@media (prefers-color-scheme:dark){:root{--kante:#0c0f16;--kante-haupt:#0d1d44;--haupt:#2d55b0;--haupt-2:#3d6ad0;--schatten:0 10px 22px rgb(0 0 0 / .35);
  --sf-gruen-f:#1f3a2a;--sf-gruen-s:#8fd6a9;--sf-blau-f:#1f2b47;--sf-blau-s:#a9c1ff;--sf-beige-f:#3a3123;--sf-beige-s:#e3c48f;
  --sf-rot-f:#41221e;--sf-rot-s:#f2a497;--sf-gold-f:#3d3216;--sf-gold-s:#f0c95a;--sf-grau-f:#2b3038;--sf-grau-s:#c3c9d3;
  --bereich-vok:#1d2a23;--bereich-gram:#1e2433}}
main:has(#v-menu:not(.hidden)){max-width:980px}
.rangkarte{border-radius:18px;box-shadow:0 6px 0 var(--kante),var(--schatten)}
.bereiche{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.bereich{border-radius:20px;padding:14px 14px 20px;display:flex;flex-direction:column;gap:14px}
.bereich--vokabeln{background:var(--bereich-vok)}
.bereich--grammatik{background:var(--bereich-gram)}
.bereich__titel{margin:0;font-size:1.15rem}
.kachelgitter{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kachel{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:16px;font:inherit;text-align:left;
  color:var(--ink);text-decoration:none;cursor:pointer;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,var(--card) 92%,#8090b0) 100%);
  box-shadow:0 6px 0 var(--kante),var(--schatten);transform:translateY(0);transition:transform .12s ease,box-shadow .12s ease}
.kachel:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--kante),0 14px 26px rgb(11 20 51 / .14)}
.kachel:active{transform:translateY(5px);box-shadow:0 1px 0 var(--kante),0 4px 10px rgb(11 20 51 / .12)}
.kachel:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.kachel:disabled{cursor:default;opacity:.62;transform:none}
.kachel:disabled:hover{box-shadow:0 6px 0 var(--kante),var(--schatten)}
.kachel__text{display:flex;flex-direction:column;min-width:0;flex:1}
.kachel__titel{font-weight:700;font-size:1.08rem;line-height:1.25}
.kachel__unter{color:var(--muted);font-size:.85rem;line-height:1.3}
.chevron{font-size:1.8rem;line-height:1;color:var(--muted);margin-left:auto}
.symbolfeld{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;font-size:1.55rem;
  background:var(--sf-blau-f);color:var(--sf-blau-s);box-shadow:inset 0 -3px 0 rgb(0 0 0 / .07),0 2px 4px rgb(0 0 0 / .08)}
.symbolfeld--gruen{background:var(--sf-gruen-f);color:var(--sf-gruen-s)}
.symbolfeld--blau{background:var(--sf-blau-f);color:var(--sf-blau-s)}
.symbolfeld--beige{background:var(--sf-beige-f);color:var(--sf-beige-s)}
.symbolfeld--rot{background:var(--sf-rot-f);color:var(--sf-rot-s)}
.symbolfeld--gold{background:var(--sf-gold-f);color:var(--sf-gold-s)}
.symbolfeld--grau{background:var(--sf-grau-f);color:var(--sf-grau-s)}
.kachel--haupt{min-height:150px;color:#fff;border-color:var(--haupt);
  background:linear-gradient(160deg,var(--haupt-2) 0%,var(--haupt) 100%);box-shadow:0 7px 0 var(--kante-haupt),0 14px 28px rgb(30 68 151 / .35)}
.kachel--haupt:hover{box-shadow:0 9px 0 var(--kante-haupt),0 18px 32px rgb(30 68 151 / .4)}
.kachel--haupt:active{box-shadow:0 1px 0 var(--kante-haupt),0 4px 10px rgb(30 68 151 / .3)}
.kachel--haupt .kachel__titel{font-size:1.4rem}
.kachel--haupt .kachel__unter,.kachel--haupt .chevron{color:rgb(255 255 255 / .85)}
.kachel--haupt .symbolfeld{background:rgb(255 255 255 / .18);color:#fff;font-size:1.4rem}
.kachel--senkrecht{flex-direction:column;justify-content:center;text-align:center;gap:6px;min-height:130px;padding:14px 10px}
.kachel--senkrecht .kachel__titel{font-size:1rem}
.gemeinsam{display:grid;grid-template-columns:repeat(3,minmax(0,200px));justify-content:center;gap:14px;margin:22px 0 8px}
@media (max-width:680px){.bereiche{grid-template-columns:1fr}}
.bereich--vokabeln .kachel{flex:1}
.bereich--vokabeln .kachel--haupt{flex:1.6}
@media (max-width:420px){.gemeinsam{grid-template-columns:1fr}
  .gemeinsam .kachel--senkrecht{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:center;text-align:left;min-height:76px}
  .gemeinsam .kachel--senkrecht .symbolfeld{grid-row:1 / span 2}
  .gemeinsam .kachel--senkrecht .kachel__titel{align-self:end}
  .gemeinsam .kachel--senkrecht .kachel__unter{align-self:start}
  .kachelgitter{gap:10px}.kachel--senkrecht{min-height:118px}.kachel--senkrecht .kachel__titel{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.kachel,.kachel:hover,.kachel:active{transition:none;transform:none}}
.raenge-tabelle td:first-child,.raenge-tabelle td:last-child{white-space:nowrap;overflow-wrap:normal}
.raenge-tabelle td:last-child{text-align:right}

/* Begrüßung: senkrecht und waagerecht mittig */
#v-start:not(.hidden){display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 110px);min-height:calc(100dvh - 110px)}
#v-start .welcome{width:100%;max-width:560px;margin:0 0 18px;padding:28px 22px;border-radius:20px;box-shadow:0 6px 0 var(--kante),var(--schatten)}
#v-start .row{width:100%;max-width:560px}
#goBtn{min-height:56px;font-size:1.15rem;border-radius:16px;box-shadow:0 5px 0 var(--kante-haupt);transition:transform .12s,box-shadow .12s}
#goBtn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--kante-haupt)}
@media (prefers-reduced-motion:reduce){#goBtn{transition:none}#goBtn:active{transform:none}}

/* ---------- Grammatik-Aufgaben ---------- */
.wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:12px}
.wahl button{text-align:left;min-height:48px}
.wahl button.sel{background:var(--soft);outline:3px solid var(--acc);outline-offset:0}
.wahl button.richtig{background:#d8f0e0;border-color:var(--ok);color:#0a3d1f}
.wahl button.falsch{background:#f8d9d5;border-color:var(--bad);color:#5c120a}
@media (prefers-color-scheme:dark){.wahl button.richtig{background:#1f4a2e;color:#d6f5e0}.wahl button.falsch{background:#4d1f1a;color:#ffd9d3}}
.tabelle-ein{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:6px 10px;align-items:center;margin-top:10px}
.tabelle-ein label{font-size:.9rem;color:var(--muted)}
.tabelle-ein input{margin:0}
.tabelle-ein input.ok{border-color:var(--ok);background:#e6f5ea}
.tabelle-ein input.nein{border-color:var(--bad);background:#fdebe9}
@media (prefers-color-scheme:dark){.tabelle-ein input.ok{background:#1f3a2a}.tabelle-ein input.nein{background:#41221e}}
.regel{margin-top:.6rem;font-size:.98rem}
.minitabelle{margin-top:.5rem;font-size:.95rem}
.minitabelle tr.markiert td{background:var(--soft);font-weight:700}
.kng{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kng .spalte button{min-height:52px;font-size:1.1rem}
.kng button.sel{outline:3px solid var(--acc)}
.kng button.fertig{background:#d8f0e0;border-color:var(--ok);opacity:.75}
@media (prefers-color-scheme:dark){.kng button.fertig{background:#1f4a2e}}
.kng button.wackel{animation:wackel .35s}
@keyframes wackel{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.thema{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.thema .quote{margin-left:auto;font-size:.85rem;color:var(--muted);white-space:nowrap}
.thema.wackelt{border-color:var(--gold)}
@media (max-width:420px){.tabelle-ein{grid-template-columns:1fr}.tabelle-ein label{margin-top:4px}}
@media (prefers-reduced-motion:reduce){.kng button.wackel{animation:none}}
.kachel--breit{grid-column:1 / -1;min-height:76px}
.satz{font-size:1.4rem;line-height:1.6;font-weight:600}
.satz .luecke{display:inline-block;min-width:3.2rem;border-bottom:3px solid var(--acc);color:var(--acc)}
.satzwoerter{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.satzwoerter button{min-height:48px;font-size:1.2rem;padding:.4rem .8rem}
.satzwoerter button.richtig{background:#d8f0e0;border-color:var(--ok)}
.satzwoerter button.falsch{background:#f8d9d5;border-color:var(--bad)}
@media (prefers-color-scheme:dark){.satzwoerter button.richtig{background:#1f4a2e}.satzwoerter button.falsch{background:#4d1f1a}}
.wortliste{margin-top:.5rem;font-size:.95rem}
textarea.uebersetzung{font:inherit;width:100%;min-height:72px;padding:.55rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin-top:.8rem}