/* Lerncenter Design-System.
   Layout: eine Spalte bis 900px. Jedes Fach hat eine Farbe (Klasse c-...), die als --accent durch alle Bausteine läuft.
   Bausteine: Kachel, Karte, Knopf, Chip, Fortschrittsbalken, Merkkasten. Alles mindestens 44px hoch für Finger am Tablet. */
:root{
  --bg:#f1f5f3; --surface:#ffffff; --ink:#17302a; --muted:#5a6f69; --line:#d5e1dc;
  --accent:#0f7b6c; --accent-deep:#0a5a4f; --accent-soft:#dff1ec; --on-accent:#ffffff;
  --hi:#ffd768; --hi-ink:#3d2f00;
  --good:#1b7a43; --good-bg:#dcf2e4; --bad:#b93423; --bad-bg:#fbe2de;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:16px;
}
.c-gruen{--accent:#1c8a4d;--accent-deep:#14673a;--accent-soft:#dff3e6}
.c-blau{--accent:#1f6fd0;--accent-deep:#16529b;--accent-soft:#e0ecfb}
.c-orange{--accent:#c2580a;--accent-deep:#934207;--accent-soft:#fdebd9}
.c-violett{--accent:#7447c9;--accent-deep:#573399;--accent-soft:#ece4fa}
.c-rot{--accent:#c23a4b;--accent-deep:#932a38;--accent-soft:#fbe3e6}
.c-tuerkis{--accent:#0f7b8a;--accent-deep:#0a5a66;--accent-soft:#dbf1f4}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#101b18; --surface:#182723; --ink:#e7f1ed; --muted:#a0b5ae; --line:#2e423c;
    --accent:#4fd1b5; --accent-deep:#2f9d86; --accent-soft:#17362f; --on-accent:#06261f;
    --hi:#e9bd45; --hi-ink:#2b2100;
    --good:#6bd694; --good-bg:#16392a; --bad:#ff9384; --bad-bg:#45201b;
  }
  .c-gruen{--accent:#62d08c;--accent-deep:#3d9c63;--accent-soft:#17382a}
  .c-blau{--accent:#74aef5;--accent-deep:#4a82c9;--accent-soft:#172c47}
  .c-orange{--accent:#f5a25a;--accent-deep:#c47730;--accent-soft:#3f2a16}
  .c-violett{--accent:#b596f2;--accent-deep:#8a68cc;--accent-soft:#2b2145}
  .c-rot{--accent:#f58d9a;--accent-deep:#c9606d;--accent-soft:#431f25}
  .c-tuerkis{--accent:#5fcbd9;--accent-deep:#389aa8;--accent-soft:#143338}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5}
.wrap{max-width:900px;margin:0 auto;padding:20px 16px 72px;display:flex;flex-direction:column;gap:22px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:2rem}
h2{font-size:1.45rem}
h3{font-size:1.2rem}
p{margin:0}
.sub{color:var(--muted)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Kopfzeile */
.top{display:flex;flex-direction:column;gap:10px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700}
.crumbs a{color:var(--accent);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs span{color:var(--muted)}

/* Fortschritt */
.progress{display:flex;align-items:center;gap:12px}
.bar{flex:1;height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:7px;transition:width .3s}
.progress span,.num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);border:0;border-bottom:4px solid var(--accent-deep);border-radius:12px;padding:10px 20px;min-height:48px;font-weight:700;text-decoration:none}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);border-bottom-width:4px}

/* Kacheln und Listen im Lerncenter */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.list{display:flex;flex-direction:column;gap:12px}
.tile{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r);padding:16px}
.tile:active{transform:translateY(2px);border-bottom-width:3px}
.tile-head{display:flex;align-items:center;gap:12px}
.badge{flex:none;width:52px;height:52px;border-radius:14px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:1.25rem}
.tile b{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.2}
.tile small{color:var(--muted);font-size:.95rem}
.pill{align-self:flex-start;background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:3px 12px;font-size:.9rem;font-weight:700}
.pill.soon{background:var(--hi);color:var(--hi-ink)}
.next{background:var(--surface);border:2px solid var(--accent);border-radius:var(--r);padding:18px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.next div{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.empty{background:var(--surface);border:2px dashed var(--line);border-radius:var(--r);padding:18px;color:var(--muted)}

/* Reiter in einer Lektion */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs a{flex:1 1 140px;text-decoration:none;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-height:44px}
.tabs a b{font-family:var(--display);font-weight:600}
.tabs a small{color:var(--muted);font-variant-numeric:tabular-nums}
.tabs a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tabs a[aria-current="page"] small{color:var(--on-accent)}

/* Lerninhalte */
section{display:flex;flex-direction:column;gap:18px}
section[hidden]{display:none}
.know{background:var(--surface);border-left:8px solid var(--hi);border-radius:12px;padding:14px 18px}
.know summary{font-family:var(--display);font-weight:600;font-size:1.15rem;cursor:pointer;min-height:32px}
.know ul{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.know .tip{margin-top:10px;color:var(--muted);font-size:.95rem}
mark{background:var(--hi);color:var(--hi-ink);padding:0 4px;border-radius:4px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px}
.card .intro{color:var(--muted)}
.q{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px dashed var(--line)}
.q-text{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--bg);border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;padding:8px 14px;min-height:46px;text-align:left}
.chip:disabled{cursor:default;opacity:1;color:var(--ink)}
.chip.good,select.good{background:var(--good-bg);border-color:var(--good);color:var(--ink)}
.chip.bad,select.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--ink)}
.fb{font-size:.97rem;padding:8px 12px;border-radius:8px}
.fb.good{background:var(--good-bg);color:var(--good)}
.fb.bad{background:var(--bad-bg);color:var(--bad)}
.fb:empty{display:none}
select,textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px}
select{padding:6px 8px;min-height:42px;max-width:100%}
.gaptext{line-height:2.6}
.gaptext select{margin:0 2px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding-top:10px;border-top:1px dashed var(--line)}
.pair select{width:100%}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{padding:6px;text-align:left;vertical-align:middle}
thead th{font-family:var(--display);font-weight:600;border-bottom:2px solid var(--line)}
tbody th{font-family:var(--display);font-weight:600;white-space:nowrap}
td select{width:100%;font-size:16px}
textarea{width:100%;min-height:110px;padding:10px;resize:vertical}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sol{background:var(--good-bg);border-radius:10px;padding:12px 14px}
.result{background:var(--hi);color:var(--hi-ink);border-radius:var(--r);padding:16px 18px;font-weight:700}
@media (prefers-reduced-motion: reduce){.bar i{transition:none}.btn:active,.tile:active{transform:none}}