/* =====================================================================
   Lernplattform Deutsch B1/B2 – Design 2.0
   Hell, ruhig, gut lesbar. Zuerst fürs Handy gebaut, dann Tablet & PC.
   ===================================================================== */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f6; --ink:#1c2230; --muted:#5f6878; --line:#e3e6eb;
  --primary:#1f5a96; --primary-dark:#174673; --primary-ink:#ffffff; --primary-soft:#eaf2fb;
  --accent:#d0582c; --accent-soft:#fdf0ea;
  --green:#1f7a4c; --green-soft:#e9f6ef;
  --amber:#9a6200; --amber-soft:#fff6e3;
  --red:#b42318; --red-soft:#fdeceb;
  --paper:#fffdf8; --paper-line:#ece4d2;
  --radius:16px; --radius-s:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 2px 10px rgba(16,24,40,.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs:17px; --lesebreite:44rem;
  --kopf:56px; --unten:0px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#11161e; --surface:#19202b; --surface-2:#212a37; --ink:#e8ecf2; --muted:#a2acbb; --line:#2c3646;
  --primary:#8cbcf0; --primary-dark:#6aa3e0; --primary-ink:#0f1620; --primary-soft:#1b2c42;
  --accent:#f29a77; --accent-soft:#3a251b; --green:#79d3a0; --green-soft:#183223; --amber:#e9bb63; --amber-soft:#34290f;
  --red:#ff9187; --red-soft:#3b1d1b; --paper:#1d2431; --paper-line:#344157; --shadow:none; color-scheme:dark;
}
*{ box-sizing:border-box; }
html{ font-size:var(--fs); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--kopf) + 16px); }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.65; -webkit-font-smoothing:antialiased; }
@media (max-width:760px){ :root{ --fs:17.5px; --kopf:52px; --unten:64px; } }
a{ color:var(--primary); text-underline-offset:3px; }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4{ line-height:1.25; margin:1.5em 0 .55em; letter-spacing:-.01em; }
h1{ font-size:1.7rem; } h2{ font-size:1.32rem; } h3{ font-size:1.12rem; } h4{ font-size:1rem; }
p{ margin:.5em 0 .85em; }
b, strong{ font-weight:700; }
.muted{ color:var(--muted); } .small{ font-size:.86rem; } .center{ text-align:center; } .mono{ font-family:ui-monospace, Menlo, Consolas, monospace; }
.nowrap{ white-space:nowrap; } .inline{ display:inline; } .mt{ margin-top:1.6rem !important; }
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; color:#ffc7ae; margin:0; }
.eyebrow.dunkel{ color:var(--accent); }

/* ---------- Buttons & Formulare ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45em; min-height:46px; padding:.55em 1.15em; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:650; font-size:.95rem; line-height:1.2; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, transform .05s; -webkit-tap-highlight-color:transparent; }
.btn:hover{ border-color:#c9cfd8; background:var(--surface-2); }
.btn:active{ transform:scale(.98); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.btn.primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--red); border-color:#f1c4c0; }
.btn.ok{ color:var(--green); border-color:#b9e2cb; }
.btn.ok.an{ background:var(--green); border-color:var(--green); color:#fff; }
.btn.hell{ background:#fff; color:var(--primary); border-color:#fff; }
.btn.small{ min-height:38px; padding:.35em .85em; font-size:.86rem; border-radius:10px; }
.btn.full{ width:100%; } .btn.gross{ min-height:54px; font-size:1.05rem; }
.btn:disabled{ opacity:.45; cursor:default; }
.linkbtn{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; }
.iconbtn{ display:inline-grid; place-items:center; min-width:42px; min-height:42px; border-radius:12px; border:0; background:transparent; color:inherit; font:inherit; font-weight:800; cursor:pointer; }
.iconbtn:hover{ background:rgba(255,255,255,.14); }
.iconbtn svg{ width:19px; height:19px; fill:currentColor; }
label{ display:block; margin:0 0 1rem; font-weight:650; font-size:.93rem; }
label small{ display:block; font-weight:400; color:var(--muted); margin-top:.15em; }
input[type=text],input[type=password],input[type=search],input:not([type]),select,textarea{ display:block; width:100%; margin-top:.35em; padding:.75em .9em; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.btn:focus-visible,a:focus-visible,button:focus-visible{ outline:3px solid #9cc3ec; outline-offset:2px; }
label.radio{ display:flex; gap:.65em; align-items:flex-start; font-weight:500; }
label.radio input{ width:auto; margin:.3em 0 0; flex:none; }
.pw-wrap{ position:relative; display:block; } .pw-wrap input{ padding-right:3.2em; }
.pw-toggle{ position:absolute; right:.35em; top:50%; transform:translateY(-50%); margin-top:.18em; background:none; border:0; font-size:1.1rem; cursor:pointer; padding:.5em; }

/* ---------- Kopfzeile & Navigation ---------- */
.topbar{ position:sticky; top:0; z-index:50; background:var(--primary); color:#fff; padding-top:env(safe-area-inset-top); }
:root[data-theme="dark"] .topbar{ background:#14263c; }
.topbar-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:.8rem; padding:0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); min-height:var(--kopf); }
.brand{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:800; }
.brand-badge{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#fff; color:var(--primary); font-weight:900; font-size:1rem; letter-spacing:-.02em; }
.brand-badge.big{ width:62px; height:62px; font-size:1.65rem; border-radius:18px; background:var(--primary); color:#fff; }
.brand-badge.hell{ background:#fff; color:var(--primary); }
.topnav{ display:flex; gap:.25rem; align-items:center; margin-left:auto; font-size:.93rem; }
.topnav a, .topnav .linkbtn{ color:#fff; text-decoration:none; padding:.45em .75em; border-radius:10px; opacity:.92; }
.topnav a:hover, .topnav .linkbtn:hover{ background:rgba(255,255,255,.14); opacity:1; }
.nav-ico{ display:none; } .nav-admin{ background:rgba(255,255,255,.16); font-weight:700; }
.tools{ display:flex; gap:.1rem; color:#fff; }
.bottomnav{ display:none; }
@media (max-width:760px){
  .brand-text, .topnav{ display:none; }
  .tools{ margin-left:auto; }
  .bottomnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--surface); border-top:1px solid var(--line); padding:4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); box-shadow:0 -2px 14px rgba(16,24,40,.06); }
  .bottomnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:54px; gap:1px; color:var(--muted); text-decoration:none; font-size:.7rem; font-weight:700; border-radius:12px; -webkit-tap-highlight-color:transparent; }
  .bottomnav a span{ font-size:1.3rem; line-height:1.1; }
  .bottomnav a.aktiv{ color:var(--primary); background:var(--primary-soft); }
  body:has(.bottomnav){ padding-bottom:calc(var(--unten) + env(safe-area-inset-bottom)); }
}
/* Handy quer: weniger Höhe verbrauchen */
@media (max-height:500px) and (orientation:landscape){
  :root{ --kopf:46px; --unten:46px; }
  .bottomnav a{ min-height:40px; flex-direction:row; gap:.35rem; font-size:.75rem; }
  .bottomnav a span{ font-size:1.05rem; }
}

.flash{ max-width:var(--lesebreite); margin:1rem auto 0; padding:.85rem 1.1rem; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.flash-ok{ background:var(--green-soft); border-color:#c6e8d4; }
.flash-error{ background:var(--red-soft); border-color:#f5c9c5; }
.flash-info{ background:var(--primary-soft); border-color:#cfe0f3; }
main .flash{ margin:1rem 0; }

/* ---------- Seitenrahmen ---------- */
.page{ width:100%; max-width:1180px; margin:0 auto; padding:1.3rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left)); flex:1; }
.page.narrow{ max-width:640px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.3rem; margin:1rem 0; box-shadow:var(--shadow); }
.card h2{ margin-top:0; }
.card.highlight{ border-color:#f3c3ad; background:var(--accent-soft); }
.card.gefahr{ border-color:#f3d0cc; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .grid2 > .card{ margin:0; }
.row-between{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.row-between h2{ margin:0; } .row-between input{ margin:0; min-width:200px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.zugang{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-size:1.1rem; }
.page table.tab{ width:100%; border-collapse:collapse; font-size:.92rem; }
.page table.tab th{ background:var(--surface-2); color:var(--muted); text-align:left; padding:.6em .75em; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.page table.tab td{ border-bottom:1px solid var(--line); padding:.6em .75em; vertical-align:middle; }
@media (max-width:860px){ .grid2{ grid-template-columns:1fr; } }

/* ---------- Anmeldung ---------- */
body.auth .foot{ display:none; }
.auth-wrap{ flex:1; display:grid; place-items:center; padding:2rem 1rem; }
.auth-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 40px rgba(16,24,40,.08); padding:2rem 1.6rem; }
.auth-card.wide{ max-width:520px; }
.auth-card h1, .auth-card h2{ margin:.3em 0 .2em; }
.auth-logo{ display:flex; justify-content:center; }
.auth-wrap .auth-card h1{ text-align:center; font-size:1.45rem; }
.checklist{ list-style:none; padding:0; margin:1rem 0; } .checklist .ok{ color:var(--green); } .checklist .bad{ color:var(--red); font-weight:700; }
.login-wrap{ flex:1; display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }
.login-brand{ background:linear-gradient(160deg, #2a6db0 0%, #1f5a96 45%, #183f6b 100%); color:#fff; display:flex; align-items:center; padding:3rem; }
.lb-in{ max-width:460px; margin:0 auto; }
.login-brand h1{ font-size:2.1rem; margin:1rem 0 .5rem; color:#fff; }
.login-brand p{ color:#dce8f5; font-size:1.06rem; }
.lb-liste{ list-style:none; padding:0; margin:1.5rem 0; }
.lb-liste li{ display:flex; gap:.7rem; margin:.6rem 0; color:#eef4fa; }
.lb-liste li span{ display:inline-grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.2); font-size:.78rem; font-weight:900; }
.lb-stufen{ display:flex; align-items:center; gap:.55rem; margin-top:1.8rem; }
.lb-stufen .st{ font-weight:900; padding:.35em .95em; border-radius:10px; background:rgba(255,255,255,.16); }
.lb-stufen .st.b1{ background:#fff; color:var(--primary); } .lb-stufen .st.b2{ background:#ffc7ae; color:#4a1a06; } .lb-stufen .pfeil{ opacity:.6; }
.login-form{ display:grid; place-items:center; padding:2rem 1.2rem; }
.login-form .sicher{ margin-top:1.3rem; }
@media (max-width:900px){
  .login-wrap{ grid-template-columns:1fr; min-height:0; }
  .login-brand{ padding:1.8rem 1.3rem 1.5rem; }
  .login-brand h1{ font-size:1.45rem; margin:.7rem 0 .2rem; }
  .lb-liste, .lb-stufen{ display:none; }
  .login-form{ align-items:start; padding:1.2rem 1rem 2rem; }
  .auth-card{ box-shadow:var(--shadow); padding:1.6rem 1.3rem; }
}

/* ---------- Startseite ---------- */
.hero{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.4rem; align-items:center; background:linear-gradient(140deg, #2a6db0, #1f5a96 55%, #1b4b7d); color:#fff; border-radius:22px; padding:1.7rem; margin:.3rem 0 1rem; }
.hero h1{ margin:.15em 0 .3em; font-size:1.8rem; color:#fff; }
.hero .lead{ color:#dce8f5; margin-bottom:1rem; }
.hero-punkte{ text-align:center; background:rgba(255,255,255,.12); border-radius:18px; padding:1.2rem 1rem; }
.punkte-gross{ font-size:3rem; font-weight:900; line-height:1; letter-spacing:-.02em; }
.punkte-label{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:#ffc7ae; font-weight:800; margin-top:.3rem; }
.hero-mini{ display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem 1rem; margin-top:.9rem; font-size:.84rem; color:#dce8f5; } .hero-mini b{ color:#fff; }
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; padding:1.3rem 1.2rem; border-radius:18px; }
  .hero h1{ font-size:1.45rem; }
  .hero-punkte{ display:flex; align-items:center; gap:1rem; text-align:left; padding:.9rem 1rem; }
  .punkte-gross{ font-size:2.2rem; } .hero-mini{ justify-content:flex-start; margin:0; flex-direction:column; gap:0; }
}
.niveaus{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; margin:0 0 1rem; }
.niveau-karte{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); }
.nk-kopf{ display:flex; align-items:center; gap:.65rem; margin-bottom:.6rem; }
.nk-stufe{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; font-weight:900; color:#fff; background:var(--green); flex:none; }
.n-b1 .nk-stufe{ background:var(--primary); } .n-b2 .nk-stufe{ background:var(--accent); }
.nk-titel{ font-weight:700; } .nk-proz{ margin-left:auto; font-weight:900; font-size:1.15rem; }
.nk-text{ color:var(--muted); margin-top:.45rem; }
@media (max-width:760px){ .niveaus{ grid-template-columns:1fr; gap:.6rem; } .niveau-karte{ padding:.8rem 1rem; } }
.gross-bar{ display:block; height:10px; background:var(--surface-2); border-radius:10px; overflow:hidden; }
.gross-bar > span{ display:block; height:100%; border-radius:10px; background:#2f9a62; }
.gross-bar.b1 > span{ background:var(--primary); } .gross-bar.b2 > span{ background:var(--accent); }
.dash-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; } .dash-grid .card{ margin:0; }
@media (max-width:860px){ .dash-grid{ grid-template-columns:1fr; } }
.abzeichen{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.55rem; margin:.4rem 0 .8rem; }
.abz{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem; padding:.7rem .3rem; border-radius:12px; background:var(--surface-2); opacity:.4; filter:grayscale(1); }
.abz.an{ opacity:1; filter:none; background:var(--amber-soft); }
.abz-icon{ font-size:1.55rem; } .abz-txt{ font-size:.72rem; font-weight:700; line-height:1.2; }
@media (max-width:480px){ .abzeichen{ grid-template-columns:repeat(2, 1fr); } }
.tipp-karte{ background:var(--green-soft); border-color:#cbe9d8; } .tipp-text{ font-size:1.05rem; font-weight:600; }
.search-row{ margin-top:1.4rem; } .search-row input{ margin:0; padding:.9em 1.1em; border-radius:14px; }
.gruppe{ margin:1.8rem 0 0; }
.gruppe-kopf{ display:flex; align-items:center; gap:.6rem; } .gruppe-kopf h2{ margin:0; font-size:1.2rem; }
.gruppe-text{ margin:.25rem 0 .8rem; font-size:.93rem; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:.75rem; }
.kcard{ display:flex; flex-direction:column; gap:.35rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:border-color .15s, transform .12s; min-height:120px; }
.kcard:hover{ border-color:var(--primary); transform:translateY(-1px); }
.kcard.done{ border-color:#bfe3cf; background:linear-gradient(0deg, var(--green-soft), var(--surface) 60%); }
.kcard-top{ display:flex; justify-content:space-between; align-items:center; }
.kcard-nr{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.kcard .check{ color:var(--green); font-weight:900; }
.kcard-title{ font-weight:700; line-height:1.3; }
.kcard-meta{ font-size:.8rem; color:var(--muted); margin-top:auto; }
.laeuft-tag{ font-size:.68rem; font-weight:800; color:var(--amber); background:var(--amber-soft); border-radius:20px; padding:.05em .6em; }
.bar{ height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden; } .bar span{ display:block; height:100%; background:var(--green); }
.kcard.hidden{ display:none; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } .kcard{ min-height:0; } }
.rangliste{ list-style:none; padding:0; margin:.4rem 0; }
.rangliste li{ display:flex; align-items:center; gap:.7rem; padding:.5rem .3rem; border-bottom:1px solid var(--line); }
.rangliste li.ich{ background:var(--primary-soft); border-radius:10px; }
.platz{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surface-2); font-weight:800; font-size:.85rem; flex:none; }
.platz.p1{ background:#f6c344; color:#3d2b00; } .platz.p2{ background:#d5dbe3; color:#222; } .platz.p3{ background:#e5a978; color:#3a1c05; }
.rang-punkte{ margin-left:auto; font-weight:800; color:var(--primary); }

/* ---------- Niveau-Etiketten ---------- */
.niveau{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.05em; border-radius:20px; padding:.12em .65em; vertical-align:middle; background:var(--primary-soft); color:var(--primary); font-family:var(--font); line-height:1.4; }
.niveau.a1, .niveau.a2{ background:var(--green-soft); color:var(--green); }
.niveau.b2{ background:var(--accent-soft); color:var(--accent); }

/* ---------- Admin ---------- */
.admin-kopf{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.admin-kopf h1{ margin:.1em 0 0; } .admin-aktionen{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tabs{ display:flex; gap:.2rem; border-bottom:2px solid var(--line); margin-bottom:1rem; overflow-x:auto; scrollbar-width:none; }
.tabs a{ padding:.7rem 1rem; text-decoration:none; color:var(--muted); font-weight:700; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.tabs a.aktiv{ color:var(--primary); border-color:var(--primary); }
.pill{ display:inline-block; font-size:.7rem; background:var(--primary-soft); color:var(--primary); border-radius:20px; padding:0 .55em; margin-left:.2em; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.75rem; margin:0 0 1rem; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); }
.kpi-zahl{ font-size:1.6rem; font-weight:900; color:var(--primary); line-height:1.1; }
.kpi-text{ font-size:.8rem; color:var(--muted); margin-top:.2rem; }
@media (max-width:480px){ .kpis{ grid-template-columns:1fr 1fr; } }
.chart{ display:flex; align-items:flex-end; gap:4px; height:170px; padding-top:1.2rem; } .chart.klein{ height:110px; }
.chart-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.chart-bar{ width:100%; max-width:24px; background:var(--primary); border-radius:6px 6px 2px 2px; }
.chart-wert, .chart-tag{ font-size:.64rem; color:var(--muted); } .chart-wert{ min-height:1em; } .chart-tag{ margin-top:.25rem; }
.mini-bar{ display:inline-block; width:70px; height:8px; background:var(--surface-2); border-radius:8px; overflow:hidden; vertical-align:middle; }
.mini-bar > span{ display:block; height:100%; background:var(--primary); border-radius:8px; }
.mini-bar.b2 > span{ background:var(--accent); } .mini-bar.rot > span{ background:var(--red); } .mini-bar.gelb > span{ background:#d99a1e; }
.mini-zahl{ font-size:.8rem; font-weight:700; margin-left:.35rem; }
.sortierung a{ text-decoration:none; } .sortierung a.aktiv{ font-weight:800; text-decoration:underline; }
.schueler-liste{ display:flex; flex-direction:column; gap:.5rem; }
.schueler-karte{ display:grid; grid-template-columns:auto 1.3fr 1.2fr 1.4fr auto; align-items:center; gap:.9rem; padding:.8rem .95rem; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); background:var(--surface); }
.schueler-karte:hover{ border-color:var(--primary); background:var(--primary-soft); }
.schueler-karte.gesperrt{ opacity:.55; }
.sk-name, .sk-werte{ display:flex; flex-direction:column; line-height:1.35; } .sk-werte{ font-size:.88rem; }
.sk-bars{ display:grid; grid-template-columns:auto auto; align-items:center; gap:.2rem .5rem; justify-content:start; }
.sk-pfeil{ font-size:1.6rem; color:var(--muted); }
@media (max-width:760px){
  .schueler-karte{ grid-template-columns:auto 1fr auto; }
  .sk-werte{ grid-column:2; flex-direction:row; flex-wrap:wrap; gap:.15rem .8rem; } .sk-bars{ grid-column:2; } .sk-pfeil{ grid-row:1 / 4; grid-column:3; }
}
.avatar{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; flex:none; }
.avatar.gross{ width:70px; height:70px; font-size:1.75rem; }
.profil{ display:flex; gap:1rem; align-items:center; margin:.4rem 0 1.2rem; } .profil h1{ margin:0; }
.status{ font-size:.76rem; font-weight:800; border-radius:20px; padding:.08em .65em; }
.status.ok{ background:var(--green-soft); color:var(--green); } .status.aus{ background:var(--red-soft); color:var(--red); } .status.mitte{ background:var(--amber-soft); color:var(--amber); }
.niveau-zeile{ display:grid; grid-template-columns:auto 1fr 1.6fr auto; align-items:center; gap:.7rem; margin:.7rem 0; } .niveau-titel{ font-weight:600; font-size:.92rem; }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:.5rem; } .knopfreihe form{ margin:0; }
@media print{ .tabs, .admin-aktionen, .grid2, .card:not(.highlight), .topbar, .bottomnav{ display:none !important; } }

/* ---------- Leseansicht (Kapitel) ---------- */
.reader-layout{ display:grid; grid-template-columns:280px minmax(0, 1fr); max-width:1280px; margin:0 auto; width:100%; flex:1; }
.toc{ position:sticky; top:var(--kopf); height:calc(100vh - var(--kopf)); overflow:auto; padding:1rem .7rem 2rem 1rem; border-right:1px solid var(--line); background:var(--surface); }
.toc-head{ display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--accent); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; margin-bottom:.5rem; }
.toc nav a{ display:block; padding:.5rem .65rem; border-radius:10px; color:var(--ink); text-decoration:none; font-size:.88rem; line-height:1.35; }
.toc nav a:hover{ background:var(--surface-2); } .toc nav a.aktiv{ background:var(--primary-soft); color:var(--primary); font-weight:700; }
.toc-close{ display:none; color:var(--ink); }
.reader{ padding:1rem 1.6rem 3rem; min-width:0; }
.reader-bar{ position:sticky; top:var(--kopf); z-index:20; display:flex; align-items:center; gap:.5rem; padding:.55rem 0; background:var(--bg); }
.reader-bar [data-act="toc"]{ display:none; }
.quizstand{ margin-left:auto; font-size:.8rem; font-weight:700; color:var(--green); background:var(--green-soft); border-radius:20px; padding:.25rem .75rem; white-space:nowrap; }
.totop{ position:fixed; right:1rem; bottom:calc(1rem + var(--unten) + env(safe-area-inset-bottom)); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.2rem; box-shadow:var(--shadow); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
.totop.show{ opacity:1; pointer-events:auto; }
@media (max-width:1100px){
  .reader-layout{ grid-template-columns:1fr; }
  .toc{ position:fixed; z-index:80; left:0; top:0; height:100vh; width:min(86vw, 340px); transform:translateX(-102%); transition:transform .22s; box-shadow:0 0 40px rgba(0,0,0,.2); padding-top:calc(1rem + env(safe-area-inset-top)); }
  body.toc-offen .toc{ transform:none; }
  .toc-close{ display:inline-grid; }
  .reader{ padding:.4rem max(1rem, env(safe-area-inset-right)) 2.5rem max(1rem, env(safe-area-inset-left)); }
  .reader-bar [data-act="toc"]{ display:inline-flex; }
}
@media (max-height:500px) and (orientation:landscape){ .reader-bar{ position:static; } }
.kapitel-ende{ margin-top:2rem; } .kapitel-ende .btn{ margin:.3rem .3rem .3rem 0; }
.b2-hinweis{ margin-top:1rem; padding:.85rem 1rem; border-radius:12px; background:var(--surface-2); }
.pager{ display:flex; justify-content:space-between; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap; }
@media (max-width:480px){ .pager .btn{ flex:1; } }

/* ---------- Schritt-Modus (optional) ---------- */
.schritt-nav{ display:none; }
body.schritt-modus .schritt.aus{ display:none; }
body.schritt-modus .schritt-nav{ display:flex; position:sticky; bottom:calc(var(--unten) + env(safe-area-inset-bottom) + 8px); z-index:30; align-items:center; gap:.6rem; margin:1.4rem auto 0; max-width:var(--lesebreite); padding:.55rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 20px rgba(16,24,40,.1); }
.sn-mitte{ flex:1; min-width:0; } .sn-titel{ font-size:.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-bar{ height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin-top:.3rem; } .sn-bar span{ display:block; height:100%; background:var(--primary); transition:width .25s; }
body.schritt-modus:not(.letzter-schritt) .kapitel-ende, body.schritt-modus:not(.letzter-schritt) .pager{ display:none; }

/* =====================================================================
   INHALTE – ruhig und gut lesbar: eine Spalte, alles untereinander
   ===================================================================== */
.content{ max-width:var(--lesebreite); margin:0 auto; font-size:1rem; overflow-wrap:break-word; }
.content .lauf, .content .neue-seite{ display:none; }
.content h1{ font-size:1.8rem; margin:.5em 0 .6em; padding-bottom:.45em; border-bottom:3px solid var(--accent); color:var(--ink); }
.content h1 .kapnr{ display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.35em; }
.content h2{ color:var(--primary); margin-top:2.4em; padding-top:.2em; }
.content h3{ margin-top:2em; } .content h4{ color:var(--primary); margin:0 0 .5em; }
.content p.lead{ font-size:1.08rem; color:var(--ink); }
.content ul, .content ol{ padding-left:1.35em; } .content li{ margin:.3em 0; }

/* Kästen: Regel · Tipp · Achtung · Redemittel */
.content .info,.content .tipp,.content .achtung,.content .redemittel{ border-radius:14px; padding:1rem 1.1rem; margin:1.2rem 0; border:1px solid; }
.content .info{ background:var(--primary-soft); border-color:#cfe0f3; }
.content .tipp{ background:var(--green-soft); border-color:#c6e8d4; }
.content .achtung{ background:var(--accent-soft); border-color:#f6d3c3; }
.content .redemittel{ background:var(--amber-soft); border-color:#f3e0b4; }
.content .kasten-titel{ display:inline-flex; align-items:center; gap:.35em; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4em; }
.content .info .kasten-titel{ color:var(--primary); } .content .info .kasten-titel::before{ content:"📘"; letter-spacing:0; }
.content .tipp .kasten-titel{ color:var(--green); } .content .tipp .kasten-titel::before{ content:"💡"; letter-spacing:0; }
.content .achtung .kasten-titel{ color:var(--accent); } .content .achtung .kasten-titel::before{ content:"⚠️"; letter-spacing:0; }
.content .redemittel .kasten-titel{ color:var(--amber); } .content .redemittel .kasten-titel::before{ content:"💬"; letter-spacing:0; }
.content .info > :last-child, .content .tipp > :last-child, .content .achtung > :last-child, .content .redemittel > :last-child{ margin-bottom:0; }
.content .redemittel ul{ list-style:none; padding:0; } .content .redemittel li{ padding:.35em 0; border-bottom:1px dashed #ecd9ab; } .content .redemittel li:last-child{ border:0; }

/* Beispiele, richtig/falsch */
.content p.bsp{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:10px; padding:.6rem .85rem; font-style:normal; }
.content .falsch{ color:var(--red); text-decoration:line-through; text-decoration-color:rgba(180,35,24,.55); }
.content .richtig{ color:var(--green); font-weight:700; }

/* Tabellen */
.content table{ width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0; font-size:.93rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.content table th{ background:var(--surface-2); color:var(--muted); text-align:left; padding:.6em .8em; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
.content table td{ padding:.6em .8em; vertical-align:top; border-bottom:1px solid var(--line); }
.content table tr:last-child td{ border-bottom:0; }
.content table.satzbank td:first-child{ width:32%; color:var(--muted); font-size:.85rem; }
.content table.satzbank td:last-child{ font-weight:600; }
.content table.wortliste td:first-child{ width:40%; font-weight:700; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Handy: Tabellen werden zu ruhigen Karten untereinander */
@media (max-width:640px){
  .content table.stapel{ border:0; background:transparent; overflow:visible; }
  .content table.stapel, .content table.stapel tbody, .content table.stapel tr, .content table.stapel td{ display:block; width:100% !important; }
  .content table.stapel thead, .content table.stapel tr:first-child:has(th){ display:none; }
  .content table.stapel tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:0 0 .55rem; padding:.45rem .2rem; }
  .content table.stapel td{ border:0; padding:.2rem .8rem; }
  .content table.stapel td[data-label]::before{ content:attr(data-label); display:block; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .content table.satzbank.stapel td::before{ display:none !important; }
  .content table.satzbank.stapel td:first-child{ width:auto; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding-bottom:0; }
  .content table.wortliste, .content table.wortliste tbody, .content table.wortliste tr, .content table.wortliste td{ display:block; width:100% !important; }
  .content table.wortliste{ border:0; background:transparent; }
  .content table.wortliste tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.5rem .85rem; margin-bottom:.5rem; }
  .content table.wortliste td{ border:0; padding:0; }
  .content table.wortliste td:last-child{ color:var(--muted); font-size:.92rem; }
}

/* Übungen & Prüfungsaufgaben */
.content .uebung{ border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; margin:1.4rem 0; background:var(--surface); box-shadow:var(--shadow); }
.content .uebung h4::before{ content:"✎ "; color:var(--accent); }
.content ol.aufg > li{ margin:.7em 0; }
.content input.gapfeld{ display:inline-block; width:auto; min-width:7em; max-width:100%; margin:.1em .2em; padding:.2em .5em; font-size:1rem; border-radius:8px; border:1.5px solid var(--line); background:var(--surface-2); }
.content .gapn{ display:inline-block; min-width:3.2em; border-bottom:2px solid var(--ink); text-align:center; font-weight:800; font-size:.8rem; color:var(--primary); margin:0 .15em; }
.content ol.abc{ list-style:none; padding-left:0; counter-reset:abc; }
.content ol.abc > li{ counter-increment:abc; position:relative; padding-left:2em; }
.content ol.abc > li::before{ content:counter(abc, lower-alpha) ")"; position:absolute; left:.3em; font-weight:800; color:var(--primary); }
.content .rf{ display:inline-flex; gap:.3rem; margin-left:.4rem; white-space:nowrap; }
.content .rf .rfbox{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:20px; padding:.15em .75em; cursor:pointer; user-select:none; background:var(--surface); color:var(--ink); font-size:.86rem; min-height:34px; }
.content .rf .rfbox.an{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.content .pruefung{ border:1.5px solid #c4d7ec; border-radius:16px; padding:0 1rem 1rem; margin:1.6rem 0; background:var(--surface); overflow:hidden; }
.content .pruefung-kopf{ background:var(--primary); color:var(--primary-ink); font-weight:800; margin:0 -1rem 1rem; padding:.65rem 1rem; font-size:.95rem; }
.content p.anweisung{ font-size:.92rem; background:var(--surface-2); padding:.7rem .85rem; border-radius:10px; }
.content ol.ueberschriften{ list-style:none; padding:0; counter-reset:ue; }
.content ol.ueberschriften > li{ counter-increment:ue; position:relative; padding:.4rem .6rem .4rem 2.3em; font-weight:600; margin:.3em 0; background:var(--surface-2); border-radius:10px; }
.content ol.ueberschriften > li::before{ content:counter(ue, lower-alpha) ")"; position:absolute; left:.7em; color:var(--accent); font-weight:800; }
.content .text{ position:relative; border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem .7rem 3rem; margin:.9rem 0; background:var(--surface); }
.content .textnr{ position:absolute; left:.85rem; top:.95rem; width:1.6rem; height:1.6rem; line-height:1.6rem; border-radius:50%; background:var(--accent); color:#fff; text-align:center; font-weight:800; font-size:.82rem; }
.content .artikel, .content .lesetext{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.25rem; margin:1.3rem 0; font-size:1.04rem; line-height:1.75; box-shadow:var(--shadow); }
.content .artikel-titel{ font-weight:800; font-size:1.3rem; line-height:1.25; margin-bottom:.35rem; color:var(--ink); }
.content .unterzeile{ font-size:.84rem; color:var(--muted); }
.content .lesetext[data-niveau]::before{ content:"Niveau " attr(data-niveau); display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em; border-radius:20px; padding:.12em .7em; background:var(--primary-soft); color:var(--primary); margin-bottom:.5rem; }
.content .anzeigen{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.8rem; margin:1rem 0; }
.content .anzeige{ border:1.5px solid var(--line); border-radius:12px; padding:.85rem .95rem; background:var(--paper); font-size:.94rem; }
.content .buchst{ display:inline-grid; place-items:center; width:1.65rem; height:1.65rem; background:var(--primary); color:var(--primary-ink); border-radius:7px; font-weight:800; font-size:.85rem; margin-right:.45rem; }
.content ol.situationen > li{ margin:.55em 0; }
.content .wortkasten{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; border:1.5px solid #c4d7ec; border-radius:12px; padding:.75rem .9rem; margin:1rem 0; background:var(--primary-soft); }
.content .wortkasten span{ background:var(--surface); border-radius:8px; padding:.2em .6em; }
.content .wortkasten b{ color:var(--accent); margin-right:.3em; }
.content table.optionen td{ border:1px solid var(--line); }
@media (max-width:640px){ .content table.optionen, .content table.optionen tbody, .content table.optionen tr, .content table.optionen td{ display:block; width:100%; } .content table.optionen{ border:0; background:transparent; } .content table.optionen td{ border-radius:10px; margin-bottom:.4rem; background:var(--surface); } }
.content .antwortzeile{ border:1.5px dashed var(--line); border-radius:10px; padding:.65rem .85rem; margin:1rem 0; font-size:.92rem; overflow-wrap:anywhere; }
.content .brief{ background:var(--paper); border:1px solid var(--paper-line); border-radius:14px; padding:1.05rem 1.2rem; margin:1rem 0; line-height:1.7; }
.content ul.leitpunkte{ list-style:none; padding:.6rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.content ul.leitpunkte li{ padding-left:1.5em; position:relative; } .content ul.leitpunkte li::before{ content:"▸"; position:absolute; left:0; color:var(--accent); }
.content .dialog{ margin:1rem 0; padding:.75rem 1rem; border-left:4px solid var(--primary); background:var(--surface); border-radius:0 12px 12px 0; }
.content .dialog p{ margin:.45em 0; } .content .dialog p b:first-child{ color:var(--primary); }
.content .linien{ display:none; }
.content textarea.schreibfeld{ min-height:12em; line-height:1.6; }
.content .schreib-info{ font-size:.82rem; color:var(--muted); }
.content section.loes p.loes-zeile{ font-weight:700; color:var(--primary); background:var(--primary-soft); padding:.45rem .75rem; border-radius:10px; }
@media (max-width:640px){
  .content h1{ font-size:1.5rem; } .content h2{ font-size:1.22rem; }
  .content .artikel, .content .lesetext{ padding:1rem; font-size:1.02rem; }
  .content .anzeigen{ grid-template-columns:1fr; }
  .content .pruefung{ padding:0 .8rem .8rem; } .content .pruefung-kopf{ margin:0 -.8rem .9rem; }
}

/* Lösungen ein-/ausklappen */
.content details{ margin:1rem 0; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.content details > summary{ cursor:pointer; padding:.75rem 1rem; font-weight:700; color:var(--green); list-style:none; display:flex; align-items:center; gap:.55em; min-height:48px; }
.content details > summary::-webkit-details-marker{ display:none; }
.content details > summary::before{ content:"▶"; font-size:.7em; transition:transform .15s; }
.content details[open] > summary::before{ transform:rotate(90deg); }
.content details > :not(summary){ margin-left:1rem; margin-right:1rem; }
.content details.alle-loesungen > summary{ color:var(--primary); }
.content details.hoertext > summary{ color:var(--accent); }

/* Interaktive Aufgaben */
.content .quiz{ margin:1.2rem 0; }
.content .frage{ border:1px solid var(--line); border-radius:14px; padding:.95rem 1rem .55rem; margin:.8rem 0; background:var(--surface); }
.content .frage .fnr{ display:inline-grid; place-items:center; min-width:1.75rem; height:1.75rem; padding:0 .3rem; border-radius:8px; background:var(--primary-soft); color:var(--primary); font-weight:800; font-size:.8rem; margin-right:.5rem; vertical-align:1px; }
.content .frage ol.abc{ display:grid; gap:.5rem; margin:.65rem 0; }
.content .frage ol.abc.rf2{ grid-template-columns:1fr 1fr; max-width:24rem; }
.content .frage ol.abc > li{ padding:0; } .content .frage ol.abc > li::before{ display:none; }
.content .frage ol.abc button.opt{ width:100%; text-align:left; display:flex; gap:.6em; align-items:flex-start; min-height:48px; padding:.6em .85em; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.content .frage ol.abc button.opt:hover:not(:disabled){ border-color:var(--primary); background:var(--primary-soft); }
.content .frage ol.abc button.opt .buchst2{ flex:none; font-weight:800; color:var(--primary); }
.content .frage ol.abc button.opt.richtig-gew{ border:2px solid var(--green); background:var(--green-soft); }
.content .frage ol.abc button.opt.falsch-gew{ border:2px solid var(--red); background:var(--red-soft); }
.content .frage ol.abc button.opt.richtig-gew::after{ content:"✔"; margin-left:auto; color:var(--green); font-weight:900; }
.content .frage ol.abc button.opt.falsch-gew::after{ content:"✖"; margin-left:auto; color:var(--red); font-weight:900; }
.content .frage ol.abc button.opt:disabled{ cursor:default; }
.content .frage ol.abc button.opt:disabled:not(.richtig-gew):not(.falsch-gew){ opacity:.55; }
.content .frage .erklaerung{ display:none; font-size:.93rem; border-radius:10px; padding:.55rem .8rem; background:var(--surface-2); }
.content .frage.beantwortet .erklaerung{ display:block; }
.content .frage .feedback{ font-weight:800; margin-right:.3em; } .content .frage .feedback.ok{ color:var(--green); } .content .frage .feedback.nein{ color:var(--red); }
.content .frage input.luecke{ display:inline-block; width:auto; min-width:4.5em; max-width:100%; margin:.1em .15em; padding:.2em .5em; font-size:1rem; border-radius:8px; border:1.5px solid var(--line); background:var(--surface-2); }
.content .frage input.luecke.ok{ border-color:var(--green); background:var(--green-soft); }
.content .frage input.luecke.nein{ border-color:var(--red); background:var(--red-soft); }
.content .frage .loes-hinweis{ font-size:.85rem; color:var(--green); font-weight:700; margin-left:.3em; }
.content .frage .pruef-btn{ margin:.35rem 0 .55rem; }
.content .vorlesen{ display:inline-flex; align-items:center; gap:.35em; font-size:.85rem; font-weight:700; border:1.5px solid var(--line); background:var(--surface); color:var(--primary); border-radius:20px; padding:.3em .95em; cursor:pointer; margin:.4rem 0 0; min-height:38px; }
.content .vorlesen.laeuft{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* =====================================================================
   REGELN – Lernkarten: Regel-Box → Beispiele → Achtung → Kurz-Check
   ===================================================================== */
.regeln{ max-width:var(--lesebreite); }
.regeln-kopf h1{ margin:.2em 0 .25em; }
.filter-chips{ display:flex; gap:.45rem; overflow-x:auto; padding:.2rem 0 .5rem; margin:.4rem 0 .4rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.filter-chips::-webkit-scrollbar{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:30px; border:1.5px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink); font-weight:700; font-size:.88rem; min-height:40px; white-space:nowrap; cursor:pointer; }
.chip span{ font-size:.72rem; background:var(--surface-2); border-radius:20px; padding:0 .5em; color:var(--muted); }
.chip.aktiv{ border-color:var(--primary); background:var(--primary); color:#fff; } .chip.aktiv span{ background:rgba(255,255,255,.25); color:#fff; }
.regel-fortschritt{ position:sticky; top:var(--kopf); z-index:20; background:var(--bg); padding:.55rem 0 .65rem; }
@media (max-height:500px) and (orientation:landscape){ .regel-fortschritt{ position:static; } }
.rf-text{ display:flex; justify-content:space-between; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:.35rem; }
.themen-titel{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:1.8rem 0 .5rem; }
article.regel{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1.25rem 1.2rem 1.1rem; margin:0 0 1.1rem; box-shadow:var(--shadow); }
article.regel.versteckt{ display:none; }
.regel-oben{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.regel-nr{ display:inline-grid; place-items:center; min-width:2rem; height:2rem; padding:0 .4rem; border-radius:10px; background:var(--primary); color:#fff; font-weight:800; font-size:.85rem; }
.regel-thema{ font-size:.75rem; font-weight:700; color:var(--muted); }
.regel-ok{ margin-left:auto; font-size:.75rem; font-weight:800; color:var(--green); background:var(--green-soft); border-radius:20px; padding:.12em .7em; }
article.regel h2{ margin:.6rem 0 .3rem; font-size:1.35rem; color:var(--ink); }
article.regel .regel-kurz{ color:var(--muted); margin:.2rem 0 .9rem; }
.regel-box, .beispiele, .vorsicht{ border-radius:14px; padding:.9rem 1rem; margin:.9rem 0; border:1px solid; }
.regel-box{ background:var(--primary-soft); border-color:#cfe0f3; }
.beispiele{ background:var(--green-soft); border-color:#c6e8d4; }
.vorsicht{ background:var(--accent-soft); border-color:#f6d3c3; }
.rb-titel{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem; }
.regel-box .rb-titel{ color:var(--primary); } .regel-box .rb-titel::before{ content:"📘 "; }
.beispiele .rb-titel{ color:var(--green); } .beispiele .rb-titel::before{ content:"✏️ "; }
.vorsicht .rb-titel{ color:var(--accent); } .vorsicht .rb-titel::before{ content:"⚠️ "; }
.regel-box ul, .beispiele ul{ margin:0; padding-left:1.15em; }
.regel-box li{ margin:.35em 0; font-weight:600; }
.beispiele ul{ list-style:none; padding:0; }
.beispiele li{ background:var(--surface); border-radius:10px; padding:.5rem .75rem; margin:.4rem 0; }
.beispiele li b{ color:var(--green); }
.vorsicht p{ margin:.3rem 0; }
.vorsicht .falsch{ color:var(--red); text-decoration:line-through; text-decoration-color:rgba(180,35,24,.55); }
.vorsicht .richtig{ color:var(--green); font-weight:700; }
.formel{ font-size:1.02rem; text-align:center; background:var(--surface-2); border:1.5px dashed #c4d0de; border-radius:12px; padding:.75rem .9rem; margin:.9rem 0; }
.formel b{ color:var(--primary); }
table.mini{ width:100%; border-collapse:separate; border-spacing:0; margin:.9rem 0; font-size:.93rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
table.mini th{ background:var(--surface-2); color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:.5em .7em; }
table.mini td{ padding:.5em .7em; border-top:1px solid var(--line); }
table.mini td:first-child{ font-weight:700; }
.regel-check-titel{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:1.1rem 0 .2rem; }
.regel-unten{ display:flex; gap:.5rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:.85rem; margin-top:.9rem; }
.regel-unten .btn{ flex:1 1 10rem; }
article.regel .quiz{ margin:.4rem 0 0; }
.karten-modus article.regel{ display:none; } .karten-modus article.regel.sichtbar{ display:block; }
.karten-nav{ display:none; }
.karten-modus .karten-nav{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; position:sticky; bottom:calc(var(--unten) + env(safe-area-inset-bottom) + 8px); z-index:30; padding:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 20px rgba(16,24,40,.1); }
.karten-nav .kn-info{ text-align:center; font-size:.85rem; font-weight:700; color:var(--muted); }
@media (max-width:640px){ article.regel{ padding:1.05rem .95rem .95rem; border-radius:18px; } article.regel h2{ font-size:1.22rem; } }

/* Fußzeile */
.foot{ text-align:center; font-size:.78rem; color:var(--muted); padding:1.5rem 1rem 2rem; }
@media (max-width:760px){ .foot{ padding-bottom:1rem; } }

/* Druck */
@media print{
  .topbar, .toc, .reader-bar, .pager, .kapitel-ende, .totop, .foot, .bottomnav, .schritt-nav, .karten-nav{ display:none !important; }
  .reader-layout{ display:block; } body{ background:#fff; }
  .content details > :not(summary){ display:block; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }