/* NFS Lernen – Oberfläche
   Layout: einspaltig, Handy zuerst; Kopfzeile oben, Reiterleiste unten. Ab 900 px breitere Inhaltsspalte. */
:root {
  --bg: #f3f5f7; --flaeche: #ffffff; --flaeche2: #eaeef2; --linie: #d8dee5;
  --text: #17212b; --leise: #5b6875; --akzent: #b71c1c; --akzent-t: #ffffff;
  --gruen: #2e7d32; --gruen-bg: #e7f3e8; --rot: #c62828; --rot-bg: #fcebeb; --gelb: #9a5b00; --gelb-bg: #fff4e2;
  --blau-bg: #e8f0fb; --lila-bg: #f3eef8; --leer: #cfd6dd;
  --radius: 14px; --schatten: 0 1px 2px rgba(15, 25, 35, .06), 0 2px 10px rgba(15, 25, 35, .05);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161c; --flaeche: #1a2129; --flaeche2: #232c36; --linie: #2e3945;
    --text: #e6ebf0; --leise: #9aa7b4; --akzent: #ef5350; --akzent-t: #ffffff;
    --gruen: #66bb6a; --gruen-bg: #1b2c1e; --rot: #ef5350; --rot-bg: #33191b; --gelb: #ffb74d; --gelb-bg: #33281a;
    --blau-bg: #1a2636; --lila-bg: #261e2e; --leer: #3a4652;
    --schatten: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--schrift); padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; }
.ic.gross { width: 48px; height: 48px; }
.klein { font-size: 13.5px; color: var(--leise); }
code { font-size: .9em; background: var(--flaeche2); padding: 1px 5px; border-radius: 5px; }
sup.stern { color: var(--leise); font-weight: 700; margin-left: 1px; }
.laden { padding: 48px 16px; text-align: center; color: var(--leise); }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-t { flex: 1; min-width: 0; text-align: center; }
.kopf h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-u { font-size: 12.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-btn, .kopf-platz { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; text-decoration: none; }
.kopf-btn:hover { background: var(--flaeche2); }

.seite { max-width: 760px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .seite { max-width: 860px; padding-top: 24px; } }
.abschnitt { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); margin-top: 10px; display: flex; gap: 8px; align-items: baseline; }
.abschnitt small { font-weight: 500; letter-spacing: 0; }

/* Reiterleiste */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; background: var(--flaeche); border-top: 1px solid var(--linie);
  padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
.tabbar a { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--leise); border-radius: 12px; }
.tabbar a.active { color: var(--akzent); }
.tabbar a.active .ic { stroke-width: 2.3; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--flaeche); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--leise); }
.btn.pri { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-t); }
.btn.gross { min-height: 52px; font-size: 16.5px; flex: 1; }
.btn.klein { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.btn.klein .ic { width: 18px; height: 18px; }
.btn.an { background: var(--gelb-bg); border-color: var(--gelb); color: var(--gelb); }
.btn.an .ic { fill: currentColor; }
.btn.gefahr { border-color: var(--rot); color: var(--rot); }
.btn.ja { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.btn.nein { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn.mittel { background: var(--gelb-bg); border-color: var(--gelb); color: var(--gelb); }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.aktionen .btn { flex: 1 1 160px; }

/* Fortschrittsbalken */
.balken { display: block; height: 6px; border-radius: 3px; background: var(--flaeche2); overflow: hidden; min-width: 40px; }
.balken i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }

/* Heute */
.countdown { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); text-decoration: none; border: 1px solid var(--linie); }
.countdown .ic { color: var(--akzent); }
.countdown span { display: flex; flex-direction: column; }
.countdown small { color: var(--leise); font-size: 13.5px; }
.countdown.leer { border-style: dashed; }
.heute { background: var(--flaeche); border-radius: 18px; padding: 18px; box-shadow: var(--schatten); border: 1px solid var(--linie); display: flex; flex-direction: column; gap: 10px; }
.heute-zahl { display: flex; align-items: baseline; gap: 10px; }
.heute-zahl b { font-size: 44px; line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; }
.heute-zahl span { font-size: 18px; font-weight: 600; }
.heute p { margin: 0; color: var(--leise); }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kachel .ic { color: var(--akzent); width: 20px; height: 20px; }
.kachel b { font-size: 22px; font-variant-numeric: tabular-nums; }
.kachel span { font-size: 12.5px; color: var(--leise); line-height: 1.3; }
.stand-liste { display: flex; flex-direction: column; gap: 8px; }
.stand { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; }
.stand-t { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stand-t .balken i { background: var(--k); }
.stand small { color: var(--leise); font-variant-numeric: tabular-nums; }
.stand.mehr { color: var(--leise); }

/* Themenbereiche & Module */
.tb-liste, .mod-liste { display: flex; flex-direction: column; gap: 10px; }
.tb-karte { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--k); text-decoration: none; box-shadow: var(--schatten); }
.tb-karte.leer { box-shadow: none; opacity: .7; }
.tb-nr { flex: none; min-width: 44px; height: 32px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--k) 14%, var(--flaeche)); color: var(--k); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-t small { color: var(--leise); font-size: 13.5px; line-height: 1.35; }
.tb-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--leise); margin-top: 4px; }
.tb-meta .balken i { background: var(--k); }
.tb-intro { padding: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--k) 9%, var(--flaeche)); border-left: 5px solid var(--k); }
.tb-intro p { margin: 4px 0 0; color: var(--leise); }
.mod-karte { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; box-shadow: var(--schatten); }
.mod-karte b { font-size: 18px; }
.mod-karte p { margin: 0; color: var(--leise); font-size: 14.5px; }
.mod-meta { font-size: 13px; color: var(--leise); }
.mod-fs { display: flex; align-items: center; gap: 10px; }
.mod-fs .balken { flex: 1; }
.mod-fs small { color: var(--leise); font-variant-numeric: tabular-nums; }
.mod-kopf { padding: 16px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie); border-top: 5px solid var(--k); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten); }
.mod-kopf p { margin: 0; color: var(--leise); }
.mod-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.mod-zahlen b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.mod-zahlen span { font-size: 12.5px; color: var(--leise); }
.mod-kopf .balken i { background: var(--k); }
.leerhinweis { text-align: center; color: var(--leise); padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.leerhinweis p { margin: 0; }

/* Listen */
.kap-liste { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.kap-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; border-top: 1px solid var(--linie); min-height: 56px; }
.kap-zeile:first-child { border-top: 0; }
.kap-zeile:hover { background: var(--flaeche2); }
.kap-zeile > .ic:first-child { color: var(--leise); }
.kap-zeile > span:not(.stern-an):not(.fehlerzahl):not(.ekg-nr) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kap-zeile small { color: var(--leise); font-size: 13px; }
.kap-zeile > .ic:last-child { color: var(--leise); width: 18px; }

/* PDF-Lernscripte */
/* Die PDF-Seite füllt den ganzen Platz zwischen Kopfzeile (~58px) und Reiterleiste (68px, body padding-bottom) */
.pdf-seite { display: flex; flex-direction: column; padding: 6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left));
  height: calc(100vh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 220px; max-width: 1400px; margin: 0 auto; }
/* Wenig Höhe (Handy quer): Reiterleiste weg, Kopfzeile flacher – das PDF bekommt fast den ganzen Bildschirm */
@media (max-height: 560px) {
  body.pdf-ansicht { padding-bottom: 0; }
  body.pdf-ansicht .tabbar { display: none; }
  body.pdf-ansicht .kopf { padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; }
  body.pdf-ansicht .kopf-u { display: none; }
  body.pdf-ansicht .pdf-seite { height: calc(100vh - 46px - env(safe-area-inset-top)); height: calc(100dvh - 46px - env(safe-area-inset-top)); padding-top: 2px; padding-bottom: 2px; }
}
/* Vollbild-Ersatz (Browser ohne Fullscreen-API, z. B. iPhone) */
.pdf-rahmen.pdf-voll { position: fixed; inset: 0; z-index: 60; border: 0; border-radius: 0; background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.pdf-voll-an { overflow: hidden; }
.btn.an-gruen { background: var(--gruen-bg); border-color: var(--gruen); color: var(--gruen); }

/* EKG-Trainer: eigener Bereich mit eigener Farbe (--k) und EKG-Papier-Optik */
.ekg-karte { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--k) 40%, var(--linie)); border-left: 5px solid var(--k);
  background: color-mix(in srgb, var(--k) 8%, var(--flaeche)); }
.ekg-karte-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ekg-karte-t b { display: flex; align-items: center; gap: 8px; color: var(--k); font-size: 17px; }
.ekg-karte-t small { color: var(--leise); font-size: 13px; }
.ekg-karte > .ic:last-child { color: var(--leise); }
.ekg-kopf { position: relative; overflow: hidden; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--k) 35%, var(--linie));
  background-color: color-mix(in srgb, var(--k) 6%, var(--flaeche));
  background-image: linear-gradient(color-mix(in srgb, var(--k) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--k) 14%, transparent) 1px, transparent 1px);
  background-size: 12px 12px; }
.ekg-linie { position: absolute; inset: auto 0 0 0; width: 100%; height: 46px; opacity: .35; pointer-events: none; }
.ekg-linie path { fill: none; stroke: var(--k); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ekg-weiter { align-self: stretch; justify-content: flex-start; position: relative; text-align: left; gap: 12px; }
.ekg-weiter > span { display: flex; flex-direction: column; min-width: 0; }
.ekg-weiter small { font-weight: 500; opacity: .85; font-size: 13px; }
.ekg-zahlen { display: flex; align-items: baseline; gap: 10px; position: relative; }
.ekg-zahlen b { font-size: 28px; color: var(--k); font-variant-numeric: tabular-nums; }
.ekg-zahlen span { color: var(--leise); }
.ekg-zahlen.klein-zahlen b { font-size: 20px; }
.ekg .balken i { background: var(--k); }
.ekg-nr { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--k) 14%, var(--flaeche)); color: var(--k); font-weight: 800; font-size: 14px; }
.ekg-nr.fertig { background: var(--gruen); color: #fff; }
.ekg-nr.fertig .ic { width: 18px; height: 18px; }
.ekg-nr.klein { width: 24px; height: 24px; font-size: 12px; }
.ekg-lektion > span:nth-child(2) { gap: 3px; }
.ekg-kap { border-top: 1px solid var(--linie); }
.ekg-kap:first-child { border-top: 0; }
.ekg-kap .kap-zeile { border-top: 0; }
.ekg-falsch { display: flex; align-items: center; gap: 6px; margin: -6px 14px 10px 60px; font-size: 13.5px; font-weight: 600; color: var(--rot); text-decoration: none; }
.ekg-falsch .ic { width: 16px; height: 16px; }

/* EKG-Player: ein Schritt pro Ansicht, unten Zurück/Weiter */
.ekg-player { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 126px); min-height: calc(100dvh - 126px); }
.ekg-fortschritt { height: 4px; background: var(--flaeche2); }
.ekg-fortschritt i { display: block; height: 100%; width: 0; background: var(--k); transition: width .25s; }
.ekg-schritt { flex: 1; padding: 14px max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 12px; }
.ekg-abschnitt { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--k); }
.ekg-titel { font-size: 19px; display: flex; align-items: flex-start; gap: 8px; }
.ekg-titel .ic { color: var(--k); margin-top: 1px; }
.ekg-text p { margin: 0 0 8px; }
.ekg-text p:last-child { margin-bottom: 0; }
.ekg-bild { position: relative; background: #fff; border-radius: 10px; border: 1px solid var(--linie); overflow: hidden; }
.ekg-bild img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ekg-video { border-radius: 10px; overflow: hidden; background: #000; }
.ekg-video video { display: block; width: 100%; max-height: 72vh; background: #000; }
.ekg-optionen { display: flex; flex-direction: column; gap: 8px; }
.ekg-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.ekg-opt > i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--leise); position: relative; }
.ekg-optionen.mehrfach .ekg-opt > i { border-radius: 5px; }
.ekg-opt.an { border-color: var(--k); background: color-mix(in srgb, var(--k) 8%, var(--flaeche)); }
.ekg-opt.an > i { border-color: var(--k); background: var(--k); box-shadow: inset 0 0 0 3px var(--flaeche); }
.ekg-opt:disabled { cursor: default; }
.ekg-opt.richtig { border-color: var(--gruen); background: var(--gruen-bg); }
.ekg-opt.richtig > i { border-color: var(--gruen); background: var(--gruen); box-shadow: inset 0 0 0 3px var(--gruen-bg); }
.ekg-opt.falsch { border-color: var(--rot); background: var(--rot-bg); }
.ekg-opt.falsch > i { border-color: var(--rot); background: var(--rot); box-shadow: inset 0 0 0 3px var(--rot-bg); }
.ekg-pruefen { align-self: flex-start; min-width: 200px; }
.ekg-loesung { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 2px dashed var(--linie); }
.ekg-loesung h3 { font-size: 18px; color: var(--k); }
.ekg-ergebnis { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; padding: 10px 14px; border-radius: 12px; }
.ekg-ergebnis.ok { background: var(--gruen-bg); color: var(--gruen); }
.ekg-ergebnis.nein { background: var(--rot-bg); color: var(--rot); }
.ekg-selbst { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.ekg-selbst span { flex: 1 1 100%; }
.ekg-nav { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--linie); }
.ekg-nav .btn { flex: 1 1 0; max-width: 220px; }
.ekg-nav #weiter { margin-left: auto; }
.ekg-pos { flex: none; color: var(--leise); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ekg-ende { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ekg-ende-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--gruen-bg); color: var(--gruen); display: flex; align-items: center; justify-content: center; }
.ekg-ende-ic .ic { width: 34px; height: 34px; stroke-width: 2.5; }
.ekg-ende .aktionen { width: 100%; max-width: 480px; flex-direction: column; }
.tabbar a.tab-ekg.active { color: #C2185B; }
@media (prefers-color-scheme: dark) { .tabbar a.tab-ekg.active { color: #F06292; } }
/* Eingebauter PDF-Viewer (pdfviewer.js) */
.pdf-rahmen { display: flex; flex-direction: column; overflow: hidden; }
.pdf-rahmen:fullscreen { border: 0; border-radius: 0; background: var(--bg); }
.pv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pv-leiste { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 12px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.pv-nr { flex: 1; color: var(--leise); font-variant-numeric: tabular-nums; }
.pv-zoom { min-width: 48px; text-align: center; color: var(--leise); font-variant-numeric: tabular-nums; }
.pv-k { width: 40px; height: 38px; border: 0; background: none; color: var(--text); border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; }
.pv-k:hover { background: var(--flaeche2); }
.pv-k.pv-modus { width: auto; padding: 0 10px; font-size: 13.5px; font-weight: 700; color: var(--akzent, var(--text)); border: 1px solid var(--linie); height: 32px; margin-right: 4px; }
.pv-k.pv-voll { display: inline-flex; align-items: center; justify-content: center; }
.pv-k.pv-voll .ic { width: 20px; height: 20px; }
.pv-flaeche { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--flaeche2); overscroll-behavior: contain; touch-action: pan-x pan-y; }
.pv-seiten { will-change: transform; }
.pv-seite canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pv-seiten { margin: 0 auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; box-sizing: content-box; }
.pv-seite { width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); position: relative; }
.pv-seite canvas { display: block; width: 100%; height: 100%; }
.pv-seite[data-fehler]::after { content: attr(data-fehler); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b71c1c; font-size: 14px; }
.pv-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--leise); background: var(--flaeche2); }
.pv-iframe { flex: 1; width: 100%; border: 0; }
.pdf-rahmen { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.stern-an { color: var(--gelb); display: inline-flex; }
.stern-an .ic { width: 18px; height: 18px; fill: currentColor; }
.fehlerzahl { flex: none; min-width: 38px; text-align: center; font-weight: 800; color: var(--rot); background: var(--rot-bg); border-radius: 8px; padding: 2px 6px; }

.filter { display: flex; flex-direction: column; gap: 8px; }
.filter input, .suchfeld { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); }
.suchfeld { font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--flaeche2); font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.chip.rand { background: transparent; border-color: var(--text); }
.chip.gruppe { cursor: pointer; background: var(--flaeche); border-color: var(--linie); min-height: 36px; }
.chip.gruppe i { width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.chip.gruppe.an { background: var(--k); border-color: var(--k); color: #fff; }
.chip.gruppe.an i { background: #fff; }
.sb-liste { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 620px) { .sb-liste { grid-template-columns: 1fr 1fr; } }
.sb-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--k); text-decoration: none; min-width: 0; }
.sb-z-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-z-t b, .sb-z-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-z-t small { color: var(--leise); font-size: 13px; }
.sb-z-fs { width: 54px; flex: none; }
.sb-z-fs .balken i { background: var(--k); }
.quellen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; }
.quellen summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--leise); min-height: 32px; }
.quellen ul { padding-left: 20px; margin: 6px 0; }
.info-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; }

/* Lernscript-Bausteine */
.lesen { gap: 16px; }
.lehrplan { font-size: 13px; color: var(--leise); }
.b { display: flex; flex-direction: column; gap: 8px; }
.b-titel { font-size: 17px; }
.b-text { margin: 0; }
.b-box { padding: 12px 14px; border-radius: 12px; }
.b-box.merke { background: color-mix(in srgb, var(--k, var(--akzent)) 10%, var(--flaeche)); border-left: 4px solid var(--k, var(--akzent)); font-weight: 600; }
.b-box.tipp { background: var(--blau-bg); border-left: 4px solid #1e88e5; }
.b-box.warnung { background: var(--gelb-bg); border-left: 4px solid var(--gelb); }
.b-lab { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--k, var(--akzent)); font-weight: 800; margin-bottom: 2px; }
.b-liste { margin: 0; padding-left: 20px; }
.b-liste li { margin: 3px 0; }
.b-paare { width: 100%; border-collapse: collapse; }
.b-paare th, .b-paare td { text-align: left; vertical-align: top; padding: 7px 6px; border-top: 1px solid var(--linie); }
.b-paare tr:first-child th, .b-paare tr:first-child td { border-top: 0; }
.b-paare th { width: 38%; font-weight: 700; color: color-mix(in srgb, var(--k, var(--text)) 75%, var(--text)); }
@media (max-width: 480px) { .b-paare th, .b-paare td { display: block; width: auto; border: 0; padding: 2px 0; } .b-paare tr { display: block; border-top: 1px solid var(--linie); padding: 6px 0; } .b-paare tr:first-child { border-top: 0; } }
.b-begriffe { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 620px) { .b-begriffe { grid-template-columns: 1fr 1fr; } }
.b-begriffe div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; }
.b-begriffe dt { font-weight: 700; }
.b-begriffe dd { margin: 2px 0 0; color: var(--leise); font-size: 14.5px; }
.b-scroll { overflow-x: auto; }
.b-tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: 12px; overflow: hidden; font-size: 14.5px; min-width: 520px; }
.b-tabelle thead th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); padding: 8px 10px; border-bottom: 2px solid var(--text); }
.b-tabelle td, .b-tabelle tbody th { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--linie); }
.b-tabelle tbody th { font-weight: 700; }
.b-ablauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: s; }
.b-ablauf li { position: relative; padding: 9px 12px 9px 44px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; display: flex; flex-direction: column; counter-increment: s; }
.b-ablauf li + li { margin-top: 18px; }
.b-ablauf li + li::after { content: "↓"; position: absolute; top: -19px; left: 18px; color: var(--leise); font-size: 13px; }
.b-ablauf li::before { content: counter(s); position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--k, var(--akzent)); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.b-ablauf li span { color: var(--leise); font-size: 14px; }
/* Quer-Ablauf: ab Tablet-Breite als Raster, das bei vielen Schritten in die nächste Zeile umbricht
   (nie alle Schritte in eine Zeile quetschen – die Nummern zeigen die Reihenfolge) */
@media (min-width: 720px) {
  .b-ablauf.quer { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .b-ablauf.quer li { margin: 0; }
  .b-ablauf.quer li::after { display: none; }
}
.b-bild-rahmen { background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--linie); }
.b-bild img { display: block; width: 100%; height: auto; }
.b-bild figcaption { font-size: 13.5px; color: var(--leise); }
.b-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.b-raster-s { border-radius: 12px; background: color-mix(in srgb, var(--k) 7%, var(--flaeche)); border-top: 4px solid var(--k); padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.b-raster-s b { font-size: 20px; color: var(--k); }
.b-raster-s small { color: var(--leise); font-size: 12.5px; min-height: 2.6em; }
.pkt { display: block; border-radius: 8px; padding: 4px 8px; font-size: 13.5px; font-weight: 600; }
.pkt.ag { background: var(--gruen-bg); color: var(--gruen); }
.pkt.an { background: var(--rot-bg); color: var(--rot); }
.b-legende { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--leise); }
.b-legende .pkt { display: inline-block; }

/* Wirkweise & Zeitachse */
.wirk { display: flex; flex-direction: column; gap: 8px; }
.kette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kette li { padding: 6px 10px; border-radius: 9px; background: color-mix(in srgb, var(--k, var(--akzent)) 9%, var(--flaeche)); font-size: 14.5px; }
.kette li + li { margin-top: 16px; position: relative; }
.kette li + li::before { content: "↓"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); color: var(--k, var(--akzent)); font-weight: 800; font-size: 13px; }
.kette li:last-child { background: var(--k, var(--akzent)); color: #fff; font-weight: 700; }
.rz { display: flex; gap: 10px; align-items: center; }
.rz b { flex: none; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px; background: var(--k, var(--akzent)); color: #fff; }
.wirk-info { margin: 0; font-size: 14px; color: var(--leise); background: var(--flaeche2); border-radius: 9px; padding: 8px 10px; }
.zeit { width: 100%; height: auto; display: block; }
.zeit text, .wz text { font-size: 10px; fill: var(--leise); }
.zeit-l, .wz-g { stroke: var(--linie); stroke-width: 1; }
.zeit-p { fill: var(--flaeche); stroke-width: 2.5; }
.wz { width: 100%; height: auto; display: block; background: var(--flaeche); border-radius: 12px; }
.wz .wz-n { font-size: 12px; fill: var(--text); }

/* Steckbrief */
.sb { --k: var(--akzent); display: flex; flex-direction: column; gap: 12px; }
.sb-kopf { background: var(--k); color: #fff; border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.sb-kat { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.sb-kopf h2 { font-size: 28px; grid-column: 1; }
.sb-hn { grid-column: 1; opacity: .92; }
.sb-konz { grid-column: 2; grid-row: 2 / 4; align-self: center; background: #fff; color: #17212b; border-radius: 12px; padding: 6px 10px; font-weight: 700; max-width: 220px; font-size: 14.5px; }
.sb-konz span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #5b6875; font-weight: 600; }
@media (max-width: 480px) { .sb-kopf { grid-template-columns: 1fr; } .sb-konz { grid-column: 1; grid-row: auto; margin-top: 8px; justify-self: start; } }
.sb .chip { background: color-mix(in srgb, var(--k) 12%, var(--flaeche)); }
.sb .chip.rand { background: transparent; }
.sb-zwei { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .sb-zwei { grid-template-columns: 1fr 1fr; } }
.sb-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.feld { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.feld h3 { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.feld h3 .ic { width: 18px; height: 18px; }
.feld.gruen { background: var(--gruen-bg); border-color: transparent; } .feld.gruen h3 { color: var(--gruen); }
.feld.rot { background: var(--rot-bg); border-color: transparent; } .feld.rot h3 { color: var(--rot); }
.feld.gelb { background: var(--gelb-bg); border-color: transparent; } .feld.gelb h3 { color: var(--gelb); }
.feld.dosis { border: 2px solid var(--text); }
.sb-ss { padding: 9px 14px; border-radius: 12px; background: var(--lila-bg); font-size: 15px; }
.sb-ss.warn { background: var(--rot-bg); }
.sb-verd { font-size: 13.5px; color: var(--leise); margin-top: 6px; }
.sb-zeit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14.5px; margin-top: 4px; }
.sb-zeit span { display: block; font-size: 12px; color: var(--leise); }
.check { border-top: 1px solid var(--linie); padding: 8px 0; }
.check:first-of-type { border-top: 0; }
.check summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.check p { margin: 6px 0 0; color: var(--leise); }

.werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; }
.notiz { display: flex; flex-direction: column; gap: 6px; }
.notiz label { font-weight: 600; font-size: 14px; }
.notiz textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); resize: vertical; }
.blaettern { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.blaettern a { display: flex; align-items: center; gap: 4px; text-decoration: none; padding: 10px 12px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); max-width: 48%; font-weight: 600; font-size: 14.5px; min-height: 44px; }
.blaettern a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswahlformulare */
.auswahl { display: flex; flex-direction: column; gap: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; }
.auswahl label[for] { font-weight: 700; }
.auswahl select, .auswahl input[type=date], .auswahl input[type=number] { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--bg); width: 100%; }
.auswahl fieldset { border: 0; padding: 0; margin: 4px 0 0; }
.auswahl legend { font-weight: 700; margin-bottom: 6px; }
.segment { display: flex; gap: 6px; }
.segment label { flex: 1; }
.segment input, .modi input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; text-align: center; padding: 9px; border-radius: 10px; border: 1px solid var(--linie); font-weight: 700; cursor: pointer; }
.segment input:checked + span, .modi input:checked + span { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--flaeche)); }
.segment input:focus-visible + span, .modi input:focus-visible + span { outline: 2px solid var(--akzent); }
.modi { display: flex; flex-direction: column; gap: 6px; }
.modi span { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linie); cursor: pointer; }
.modi small { color: var(--leise); font-size: 13px; }
.anzahl { margin: 0; color: var(--leise); font-size: 14px; min-height: 1.5em; }
.bestaetigen { background: var(--rot-bg); border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.bestaetigen p { margin: 0; width: 100%; }

/* Lernsitzung */
.lernen { gap: 12px; }
.fortschritt { height: 5px; border-radius: 3px; background: var(--flaeche2); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .25s; }
.karte { --k: var(--akzent); background: var(--flaeche); border: 1px solid var(--linie); border-top: 6px solid var(--k); border-radius: 18px; padding: 22px 18px; min-height: 260px; box-shadow: var(--schatten); cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.k-vorne { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 0; }
.karte.offen .k-vorne { padding: 0 0 12px; border-bottom: 1px solid var(--linie); }
.k-frage { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k); }
.k-vorne h2 { font-size: 26px; }
.k-unter { color: var(--leise); }
.k-box { font-size: 12px; color: var(--leise); border: 1px solid var(--linie); border-radius: 999px; padding: 1px 9px; }
.k-box.neu { color: var(--akzent); border-color: var(--akzent); }
.k-hinten { display: none; flex-direction: column; gap: 10px; cursor: auto; }
.karte.offen .k-hinten { display: flex; animation: auf .2s ease-out; }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .karte.offen .k-hinten { animation: none; } .fortschritt i { transition: none; } }
.k-quelle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--leise); text-decoration: none; padding: 4px 0; }
.k-quelle .ic { width: 18px; height: 18px; }
.karte-aktionen { display: flex; }
.bewerten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; }
.bewerten .btn { min-height: 54px; font-size: 14.5px; padding: 6px; flex-direction: column; gap: 2px; }
.tasten { text-align: center; font-size: 12.5px; color: var(--leise); margin: 0; }
@media (hover: none) { .tasten { display: none; } }

.quiz { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten); }
.quiz h2 { font-size: 20px; line-height: 1.35; }
.optionen { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--flaeche); cursor: pointer; min-height: 52px; }
.option:hover:not([disabled]) { border-color: var(--text); }
.option[disabled] { cursor: default; }
.opt-b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--flaeche2); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.option.richtig { border-color: var(--gruen); background: var(--gruen-bg); font-weight: 600; }
.option.richtig .opt-b { background: var(--gruen); color: #fff; }
.option.falsch { border-color: var(--rot); background: var(--rot-bg); }
.option.falsch .opt-b { background: var(--rot); color: #fff; }
.erkl { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.erkl.ok { background: var(--gruen-bg); } .erkl.ok > b { color: var(--gruen); }
.erkl.nok { background: var(--rot-bg); } .erkl.nok > b { color: var(--rot); }
.erkl-text { font-size: 14.5px; }
#weiter { width: 100%; margin-top: 4px; }

.fertig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 8px; }
.fertig > .ic { color: var(--gruen); }
.fertig p { margin: 0; color: var(--leise); max-width: 46ch; }
.fertig .aktionen { width: 100%; }
.ergebnis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ergebnis div { border-radius: 12px; padding: 10px; font-size: 13px; display: flex; flex-direction: column; }
.ergebnis b { font-size: 26px; }
.ergebnis .ja { background: var(--gruen-bg); color: var(--gruen); }
.ergebnis .mittel { background: var(--gelb-bg); color: var(--gelb); }
.ergebnis .nein { background: var(--rot-bg); color: var(--rot); }
.ring { --p: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gruen) calc(var(--p) * 1%), var(--flaeche2) 0); }
.ring b { width: 92px; height: 92px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 24px; }
.falsch-liste { display: flex; flex-direction: column; gap: 8px; }
.falsch-k { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; font-size: 14.5px; }
.falsch-k p { margin: 0 0 6px; font-weight: 600; }
.falsch-k .ok { color: var(--gruen); } .falsch-k .nok { color: var(--rot); }

/* Statistik */
.karte-flach { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.st { width: 100%; height: auto; }
.st text { font-size: 10px; fill: var(--leise); }
.st-alle { fill: var(--leer); } .st-richtig { fill: var(--gruen); }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg.st-alle { background: var(--leer); } .lg.st-richtig { background: var(--gruen); }
.boxen { display: flex; height: 22px; border-radius: 8px; overflow: hidden; }
.boxen-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.boxen-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

/* Meldung */
#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; transition: .2s; z-index: 20; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
[hidden] { display: none !important; }
body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Vorbeugung gegen gequetschte oder überstehende Kästchen: Kinder von Flex/Grid dürfen schrumpfen, nichts ragt über die Seite */
.seite > *, .b-begriffe > div, .b-raster-s, .b-ablauf li, .kap-zeile > span, .b-box { min-width: 0; max-width: 100%; }
.b-unbekannt { border: 1px dashed var(--rot); color: var(--rot); border-radius: 12px; padding: 8px 12px; font-size: 13.5px; }
.option span:last-child, .b-paare td, .b-tabelle td, .kette li, .pkt { overflow-wrap: anywhere; }
figure.b-bild { margin: 0; }

/* Breite Grafiken: auf der Seite in voller Breite, Vergrößern öffnet die Vollbild-Ansicht (zoom.js) */
.zoomb { position: relative; }
.b-bild img { cursor: zoom-in; }
.zoom-btn { position: absolute; top: 6px; right: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 10px;
  border-radius: 10px; border: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 90%, transparent); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.zoom-btn .ic { width: 18px; height: 18px; }
@media (max-width: 420px) { .zoom-btn span { display: none; } .zoom-btn { padding: 5px 8px; } }
.zoom { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; }
.zoom-leiste { display: flex; align-items: center; gap: 2px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: calc(4px + env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); }
.zoom-leiste b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom-k { width: 44px; height: 44px; border: 0; background: none; color: var(--text); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.zoom-k:hover { background: var(--flaeche2); }
.zoom-flaeche { flex: 1; position: relative; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.zoom-el { position: absolute; display: block; max-width: none; margin: 0; border-radius: 0; -webkit-user-drag: none; }
img.zoom-el { background: #fff; }
.zoom-tipp { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); white-space: nowrap;
  font-size: 12.5px; color: var(--leise); background: var(--flaeche); border: 1px solid var(--linie); padding: 4px 12px; border-radius: 999px;
  pointer-events: none; animation: zoomTipp 4s forwards; }
@keyframes zoomTipp { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
body.zoom-offen { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Anmeldung, Konto, Verwaltung (views-konto.js)
   --------------------------------------------------------------------------- */
body.ohne-nav { padding-bottom: 0; }
body.ohne-nav .tabbar { display: none; }
.anmelde-seite { max-width: 420px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.anmelde-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.anmelde-logo .ic { width: 48px; height: 48px; color: var(--akzent); stroke-width: 2.2; }
.anmelde-logo b { font-size: 24px; }
.anmelde-logo span { color: var(--leise); font-size: 14px; }
.feld, .pw-feld input { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--bg); color: var(--text); font: inherit; }
.pw-feld { position: relative; }
.pw-feld input { padding-right: 48px; }
.pw-zeigen { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 42px; border: 0; background: none; color: var(--leise); cursor: pointer; border-radius: 10px; }
.form-fehler { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--rot-bg); color: var(--rot); font-weight: 600; font-size: 14.5px; }
.mitte { text-align: center; color: var(--leise); }
.mitte-btn { align-self: center; }
.warte-box { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--gelb-bg); color: var(--text); border: 1px solid var(--gelb); }
.warte-box > .ic { flex: none; color: var(--gelb); }
.warte-box p { margin: 4px 0 0; font-size: 14.5px; }
.konto-info { display: grid; gap: 8px; }
.konto-info div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.konto-info span { color: var(--leise); }
.zaehler { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--akzent); color: var(--akzent-t); font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; }
.hinweis-anfrage { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--gelb-bg); border: 1px solid var(--gelb); text-decoration: none; color: var(--text); }
.hinweis-anfrage > .ic:first-child { color: var(--gelb); }
.hinweis-anfrage span { flex: 1; display: flex; flex-direction: column; }
.hinweis-anfrage small { color: var(--leise); }
.marke { flex: none; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.marke.gruen { background: var(--gruen-bg); color: var(--gruen); }
.marke.rot { background: var(--rot-bg); color: var(--rot); }
.marke.gelb { background: var(--gelb-bg); color: var(--gelb); }
.anfragen, .mitglieder { display: flex; flex-direction: column; gap: 10px; }
.anfrage { padding: 14px; border-radius: var(--radius); border: 1.5px solid var(--gelb); background: var(--gelb-bg); display: flex; flex-direction: column; gap: 10px; }
.anfrage small { color: var(--leise); }
.anfrage .block { display: block; margin-top: 4px; }
.anfrage-knopfe { display: flex; flex-wrap: wrap; gap: 8px; }
.mitglied { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.mitglied summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.mitglied summary::-webkit-details-marker { display: none; }
.mg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mg-name small { color: var(--leise); }
.mg-inhalt { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linie); }
.mg-inhalt h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 8px 0 0; }
.mg-inhalt .klein { margin: 0; }
.mg-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 12px; }
.mg-zahlen div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--flaeche2); text-align: center; }
.mg-zahlen b { font-size: 18px; }
.mg-zahlen span { font-size: 12px; color: var(--leise); }
.mg-geraete { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mg-geraete li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--flaeche2); }
.mg-geraete li span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mg-geraete small { color: var(--leise); font-size: 12.5px; }
.mg-form { display: flex; flex-direction: column; gap: 10px; }
.mg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.mg-datum { display: flex; gap: 8px; }
.mg-datum .feld { flex: 1; min-width: 0; }
.mg-knopfe { display: flex; flex-wrap: wrap; gap: 8px; }
.karte-link { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.protokoll { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.pz { display: flex; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--linie); font-size: 14px; }
.pz:first-child { border-top: 0; }
.pz.warn { background: color-mix(in srgb, var(--rot-bg) 70%, transparent); }
.pz-zeit { flex: none; width: 118px; color: var(--leise); font-variant-numeric: tabular-nums; font-size: 13px; }
.pz-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pz-t small { color: var(--leise); overflow-wrap: anywhere; }
@media (max-width: 480px) { .pz { flex-direction: column; gap: 2px; } .pz-zeit { width: auto; } }
.text-seite h2 { font-size: 20px; }
.text-seite h3 { font-size: 16px; margin: 6px 0 0; }
.text-seite p, .text-seite ul { margin: 0; }
.text-seite li { margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   Screenshot-/Kopierschutz (schutz.js)
   --------------------------------------------------------------------------- */
#main { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#main input, #main textarea, #main select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video, canvas { -webkit-user-drag: none; }
.schutz-deckel { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; text-align: center; background: var(--bg); }
.schutz-deckel div { display: flex; flex-direction: column; gap: 4px; }
.schutz-deckel b { font-size: 22px; }
.schutz-deckel span { color: var(--leise); }
body.verdeckt .schutz-deckel { display: flex; }
body.verdeckt #main, body.verdeckt .zoom, body.verdeckt .pdf-rahmen { filter: blur(24px); }
@media print { body * { display: none !important; } body::after { content: "Drucken ist in NFS Lernen nicht möglich."; display: block; padding: 40px; font: 18px sans-serif; } }