:root{
  --bg:#f6f7fb; --card:#fff; --ink:#1d2433; --muted:#667085; --line:#e3e7ef;
  --accent:#111111; --accent-soft:#eceef1; --on-accent:#fff; --ok:#1d8a4b; --ok-soft:#e3f5ea;
  --bad:#c0392b; --bad-soft:#fbe9e7; --warn:#b7791f; --warn-soft:#fdf3e1;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12151c; --card:#1b2029; --ink:#e7eaf0; --muted:#98a2b3; --line:#2c3340;
    --accent:#f2f2f2; --accent-soft:#262b35; --on-accent:#111; --ok:#4cc38a; --ok-soft:#163326;
    --bad:#ff7b6b; --bad-soft:#3a1f1c; --warn:#f0b450; --warn-soft:#3a2f1a; }
}
/* Lato (OFL, lokal in fonts/) – vom Designer der Goethe-Hausschrift FF Clan, sehr ähnlicher Charakter */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lato-400-italic.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/lato-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:800 900;font-display:swap;src:url(../fonts/lato-900-normal.woff2) format("woff2")}
*{box-sizing:border-box}
/* Schleier über dem Bild; --veil-a wird beim Scrollen ans Seitenende per JS verringert (Bild wird klar sichtbar) */
:root{--veil-rgb:246,247,251;--veil-max:.72}
@media (prefers-color-scheme: dark){:root{--veil-rgb:18,21,28;--veil-max:.80}}
body{--veil-a:var(--veil-max);--veil:rgba(var(--veil-rgb),var(--veil-a))}
/* Hintergrundbild (Reichstag) mit hellem Schleier, damit Texte lesbar bleiben */
body{margin:0;background:linear-gradient(var(--veil),var(--veil)),url(../img/reichstag.jpg) center/cover no-repeat fixed,var(--bg);min-height:100vh;color:var(--ink);font:16px/1.55 "Goethe FF Clan","FF Clan","Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body[data-page="themen"]{background:linear-gradient(var(--veil),var(--veil)),url(../img/belvedere.jpg) center/cover no-repeat fixed,var(--bg)}
body[data-page="redemittel"]{background:linear-gradient(var(--veil),var(--veil)),url(../img/redemittel.jpg) center 30%/cover no-repeat fixed,var(--bg)}
body[data-page="ergebnisse"]{background:linear-gradient(var(--veil),var(--veil)),url(../img/ergebnisse.jpg) 65% center/cover no-repeat fixed,var(--bg)}
body:not([data-page="modul"]) main{padding-bottom:80vh} /* Platz am Ende, um das Hintergrundbild frei zu sehen */
body[data-page="modul"]{background:var(--bg)} /* in den Modulen (Lesen, Hören …) kein Bild, ruhiger Hintergrund */
.foot{max-width:1000px;margin:0 auto 24px;padding:10px 16px;text-align:center;font-size:13px;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:8px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.top{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--ink)} .brand span{color:var(--muted);font-weight:500}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px}
main{max-width:1000px;margin:0 auto;padding:20px 16px 120px}
h1{font-size:26px;margin:8px 0 4px} h2{font-size:21px;margin:28px 0 8px} h3{font-size:17px;margin:18px 0 6px}
.muted{color:var(--muted)} .small{font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.testcard h3{margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.center{text-align:center}
.testcard h3{text-align:center} .testcard .chips{justify-content:center}
.chip{font-size:12px;padding:2px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.mods a{display:block;text-align:center;padding:6px 4px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink)}
.mods a:hover{background:var(--accent-soft);text-decoration:none}
.mods .sc{display:block;font-size:12px;color:var(--muted)}
.mods .sc.pass{color:var(--ok)} .mods .sc.fail{color:var(--bad)}
.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);border-radius:8px;padding:8px 14px;font-size:15px;cursor:pointer}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.sec{background:transparent;color:var(--accent)}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.teil{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin:22px 0}
.teil > h2{margin-top:0}
.instr{background:var(--accent-soft);border-radius:8px;padding:10px 14px;margin:8px 0 14px;font-size:15px}
.article{border-left:3px solid var(--line);padding:4px 0 4px 16px;margin:12px 0}
.article h3{margin-top:4px;text-transform:none}
.article p{margin:0 0 10px}
.gap{display:inline-block;min-width:44px;padding:0 6px;border-bottom:2px solid var(--accent);color:var(--accent);font-weight:600}
.gap.filled{background:var(--accent-soft);border-radius:4px 4px 0 0}
.item{display:flex;gap:12px;padding:10px 0;border-top:1px dashed var(--line)}
.item:first-of-type{border-top:0}
.num{flex:0 0 32px;font-weight:700;color:var(--accent)}
.itembody{flex:1}
.q{margin-bottom:4px}
.opts{display:flex;flex-direction:column;gap:2px}
.opts.inline{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
.opt{display:flex;gap:6px;align-items:flex-start;padding:3px 6px;border-radius:6px;cursor:pointer}
.opt:hover{background:var(--accent-soft)}
.opt input{margin-top:5px}
.let{font-weight:700;min-width:14px}
.opt.correct{background:var(--ok-soft);outline:1px solid var(--ok)}
.opt.wrong{background:var(--bad-soft);outline:1px solid var(--bad);text-decoration:line-through}
.example{opacity:.75;font-style:italic}
.sentences{list-style:none;padding:0;margin:8px 0}
.sentences li{padding:4px 0}
.experts .exp{margin:10px 0}
.player{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;margin:10px 0;background:var(--bg)}
.progress{flex:1 1 160px;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress > div{height:100%;width:0;background:var(--accent);transition:width .3s}
.status{font-size:14px;color:var(--muted)}
.transcript{display:none;margin-top:12px;font-size:15px}
.transcript.show{display:block}
.transcript p{margin:4px 0}
.transcript b{color:var(--accent)}
.result{border-radius:10px;padding:14px 18px;margin:16px 0;font-size:17px}
.result.pass{background:var(--ok-soft);border:1px solid var(--ok)}
.result.fail{background:var(--bad-soft);border:1px solid var(--bad)}
textarea{width:100%;min-height:260px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:16px/1.6 Georgia,serif;resize:vertical}
textarea.notes{min-height:140px;font-family:inherit;font-size:15px}
.wc{font-size:14px;color:var(--muted);margin-top:4px}
.wc.ok{color:var(--ok)} .wc.low{color:var(--warn)}
ul.points{margin:6px 0 6px 0;padding-left:20px}
ul.points li{margin:3px 0}
.check{display:flex;gap:8px;align-items:flex-start;margin:4px 0;font-size:15px}
details{margin:10px 0;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px}
details summary{cursor:pointer;font-weight:600}
.kasten{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:10px 0;background:var(--bg)}
.recs audio{display:block;margin:6px 0;width:100%}
.timerbar{position:fixed;bottom:16px;right:16px;z-index:20;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.15);
  border-radius:10px;padding:8px 14px;display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.timerbar .t{font-size:22px;font-weight:700}
.timerbar.low .t{color:var(--bad)}
.hidden{display:none!important}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:13px}
.pill.pass{background:var(--ok-soft);color:var(--ok)} .pill.fail{background:var(--bad-soft);color:var(--bad)}
.cols{columns:2 260px;column-gap:28px}
.cols li{break-inside:avoid}
select{padding:6px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:100%}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tabs a{padding:6px 12px;border:1px solid var(--line);border-radius:99px;color:var(--ink);font-size:14px}
.tabs a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:600px){ .mods{grid-template-columns:repeat(2,1fr)} main{padding:14px 12px 120px} }