:root, [data-theme="hell"] {
  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-2: #eef3f1;
  --text: #17231f;
  --muted: #5b6b66;
  --border: #d8e2de;
  --primary: #0f766e;
  --primary-strong: #0b5e57;
  --primary-soft: #d9f0ec;
  --on-primary: #ffffff;
  --danger: #b42318;
  --danger-soft: #fde7e5;
  --warn-soft: #fff4d6;
  --warn-text: #7a4b00;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 40, 34, .06), 0 4px 16px rgba(16, 40, 34, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

[data-theme="dunkel"], [data-theme="dunkelblau"] { --bg: #0f1615;
    --surface: #17211f;
    --surface-2: #1e2a28;
    --text: #e6eeeb;
    --muted: #9db0aa;
    --border: #2b3a37;
    --primary: #2bb3a3;
    --primary-strong: #5fcfc1;
    --primary-soft: #133b36;
    --on-primary: #06201d;
    --danger: #ff8a80;
    --danger-soft: #3b1715;
    --warn-soft: #3a2e10;
    --warn-text: #f5d58a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --bg: #0f1615;
    --surface: #17211f;
    --surface-2: #1e2a28;
    --text: #e6eeeb;
    --muted: #9db0aa;
    --border: #2b3a37;
    --primary: #2bb3a3;
    --primary-strong: #5fcfc1;
    --primary-soft: #133b36;
    --on-primary: #06201d;
    --danger: #ff8a80;
    --danger-soft: #3b1715;
    --warn-soft: #3a2e10;
    --warn-text: #f5d58a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark; } }

/* Dunkelblau (Graphit) */
:root[data-theme="dunkelblau"] {
  --bg: #10141a;
  --surface: #181e27;
  --surface-2: #212935;
  --text: #e8edf4;
  --muted: #9aa7b8;
  --border: #2c3645;
  --primary: #5aa2ff;
  --primary-strong: #8dbfff;
  --primary-soft: #16304f;
  --on-primary: #06121f;
  --danger: #ff8a80;
  --danger-soft: #3b1715;
  --warn-soft: #3a2e10;
  --warn-text: #f5d58a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 var(--font);
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--primary-strong); }
button, input, select, textarea { font: inherit; color: inherit; }

.laden { padding: 40vh 16px 0; text-align: center; color: var(--muted); }

/* ---------- Layout */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--text); }
.brand img { width: 32px; height: 32px; }
.nav { display: flex; gap: 4px; margin-inline-start: 16px; }
.nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-weight: 600;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.aktiv { background: var(--primary-soft); color: var(--primary-strong); }
.nav svg { width: 20px; height: 20px; flex: none; }
.nutzer { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; }
main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 24px 16px 96px; }

@media (max-width: 980px) {
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 10;
    justify-content: space-around; gap: 0;
    padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: .72rem; flex: 1; }
  .nav svg { width: 24px; height: 24px; }
  .nutzer .name { display: none; }
  main { padding-top: 16px; }
  h1 { font-size: 1.35rem; }
}

/* ---------- Bausteine */
.karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.karte + .karte { margin-top: 16px; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.unterzeile { color: var(--muted); margin-top: -4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  border: 1px solid transparent; background: var(--primary); color: var(--on-primary);
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--primary-strong); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.sekundaer { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.sekundaer:hover { background: var(--surface-2); }
.btn.klein { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn.gefahr { background: transparent; color: var(--danger); border-color: var(--border); }
.btn.gefahr:hover { background: var(--danger-soft); }
.btn svg { width: 18px; height: 18px; }

label { display: block; font-weight: 600; margin-bottom: 6px; }
.feld { margin-bottom: 16px; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px;
}
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.zeile > * { flex: 1 1 200px; }
.zeile > .btn { flex: 0 0 auto; }

.meldung { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.meldung.fehler { background: var(--danger-soft); color: var(--danger); }
.meldung.info { background: var(--warn-soft); color: var(--warn-text); }
.meldung.ok { background: var(--primary-soft); color: var(--primary-strong); }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.badge.demo { background: var(--warn-soft); color: var(--warn-text); }
.badge.ki { background: var(--primary-soft); color: var(--primary-strong); }

/* ---------- Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 400px; }
.login .brand { justify-content: center; font-size: 1.4rem; margin-bottom: 4px; }
.login .brand img { width: 44px; height: 44px; }
.login .unterzeile { text-align: center; margin-bottom: 24px; }
.login .btn { width: 100%; }
.login .btn + .btn { margin-top: 10px; }

/* ---------- Start */
.kachel { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.kachel:hover { border-color: var(--primary); }
.kachel .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-strong); margin-bottom: 6px;
}
.kachel .icon svg { width: 24px; height: 24px; }
.kachel p { color: var(--muted); margin: 0; }

/* ---------- Standards */
.suche { margin-bottom: 20px; }
.std-karte { display: flex; gap: 14px; text-decoration: none; color: inherit; align-items: flex-start; }
.std-karte:hover { border-color: var(--primary); }
.std-karte .streifen { width: 6px; align-self: stretch; border-radius: 6px; flex: none; background: var(--primary); }
.std-karte h3 { margin-bottom: 4px; }
.std-karte p { color: var(--muted); margin: 0; font-size: .95rem; }
.leer { color: var(--muted); padding: 24px 0; }

.zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; text-decoration: none; font-weight: 600; }
.zurueck svg { width: 20px; height: 20px; flex: none; }
.konto-link { display: inline-block; margin-top: 24px; font-size: .95rem; }
.ziel { font-size: 1.05rem; border-inline-start: 4px solid var(--primary); padding-inline-start: 14px; }
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.schritte li { position: relative; padding: 0 0 18px 48px; counter-increment: s; }
.schritte li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-weight: 700;
}
.schritte li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--border);
}
.schritte strong { display: block; }
.liste { margin: 0; padding-inline-start: 20px; }
.liste li { margin-bottom: 6px; }
.beispiel {
  background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.beispiel p { margin: 0; }
.quelle { font-size: .88rem; color: var(--muted); margin-top: 24px; }
.zwei-spalten { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .zwei-spalten { grid-template-columns: 1fr; } }

/* ---------- Formulierungshilfe */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; min-height: 36px; cursor: pointer; font-size: .9rem;
}
.chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.ergebnis-text {
  white-space: pre-wrap; background: var(--surface-2); border-radius: 10px;
  padding: 16px; font-size: 1.02rem; margin-bottom: 12px;
}
.ergebnis-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ergebnis-kopf h2 { margin: 0; }
.ergebnis-kopf .btn { margin-inline-start: auto; }
.hinweise { margin: 12px 0 0; padding-inline-start: 20px; color: var(--muted); }
.ergebnis-std { margin-top: 16px; }
.std-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.datenschutz { font-size: .9rem; }

/* ---------- Verwaltung */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabelle th { color: var(--muted); font-size: .85rem; font-weight: 600; }
.tabelle td.aktionen { text-align: right; white-space: nowrap; }
.tabelle-wrap { overflow-x: auto; }
@media (max-width: 560px) {
  .tabelle thead { display: none; }
  .tabelle tr { display: block; border-bottom: 1px solid var(--border); padding: 8px 0; }
  .tabelle td { display: block; border: 0; padding: 2px 0; }
  .tabelle td.aktionen { text-align: start; padding-top: 8px; }
}
.passwort-anzeige { font-family: ui-monospace, Menlo, monospace; font-size: 1.1rem; font-weight: 700; user-select: all; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Wissen */
:root, [data-theme="hell"] { --notfall: #c62828; --notfall-soft: #fdecea; }
[data-theme="dunkel"], [data-theme="dunkelblau"] { --notfall: #ff6b6b; --notfall-soft: #3a1616; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --notfall: #ff6b6b; --notfall-soft: #3a1616; } }

.notfall-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  padding: 14px 18px; border-radius: var(--radius); text-decoration: none;
  background: var(--notfall-soft); color: var(--text); border: 1px solid var(--notfall);
}
.notfall-banner .icon { color: var(--notfall); flex: none; }
.notfall-banner .icon svg { width: 32px; height: 32px; }
.notfall-banner strong { display: block; color: var(--notfall); font-size: 1.1rem; }
.notfall-banner span { color: var(--muted); font-size: .92rem; }
.notfall-112 {
  margin-inline-start: auto; flex: none; font-weight: 800; font-size: 1.3rem !important; color: #fff !important;
  background: var(--notfall); border-radius: 10px; padding: 4px 12px;
}
.notruf-kasten {
  display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  background: var(--notfall-soft); border: 1px solid var(--notfall); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 20px;
}
.notruf-kasten strong { display: block; color: var(--notfall); }
.notruf-kasten span { color: var(--muted); font-size: .92rem; }
.btn.notruf-btn { background: var(--notfall); color: #fff; font-size: 1.15rem; }
.btn.notruf-btn:hover { background: var(--notfall); filter: brightness(.92); }
.notfall-karte .streifen { background: var(--notfall); }
.fachbegriff { font-style: italic; margin-bottom: 4px !important; }

.abschnitte { margin-top: 16px; }
.abschnitte .karte + .karte { margin-top: 0; }
.abschnitte .breit { grid-column: 1 / -1; }
.warn-karte { border-color: var(--notfall); }
.warn-karte h2 { color: var(--notfall); }

.trefferliste { display: grid; gap: 10px; margin-bottom: 24px; }
.treffer { display: grid; gap: 2px; text-decoration: none; color: inherit; padding: 14px 18px; }
.treffer:hover { border-color: var(--primary); }
.treffer .badge { justify-self: start; }
.treffer .unterzeile { margin: 0; font-size: .92rem; }
.raster[hidden] { display: none; }

.titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alphabet { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.alphabet .chip { min-width: 40px; }
.chip.aktiv { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.glossar { margin: 0; }
.glossar dt { font-weight: 700; margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.glossar dt:first-child { margin-top: 0; }
.glossar dd { margin: 2px 0 0; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.glossar dd:last-child { border-bottom: 0; padding-bottom: 0; }

.tabelle.anatomie td:first-child { font-weight: 600; width: 34%; }
.tabelle .latein { font-style: italic; color: var(--primary-strong); width: 33%; }
.tabelle .hinweis { color: var(--muted); font-size: .92rem; }

.lernkarte { margin-bottom: 20px; text-align: center; border-color: var(--primary); }
.lern-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-align: start; margin-bottom: 18px; }
.lern-kopf h2 { margin: 0; }
.lern-kopf select { width: auto; }
.lern-kopf .btn { margin-inline-start: auto; }
.lern-vorne { font-size: 1.45rem; font-weight: 700; padding: 18px 0; }
.lern-hinten { font-size: 1.2rem; padding: 0 0 18px; color: var(--primary-strong); }
.lern-hinten[hidden], .lern-bewertung[hidden], .lernkarte .btn[hidden] { display: none; }
.lern-bewertung { display: flex; gap: 12px; justify-content: center; }

@media (max-width: 760px) {
  .raster { gap: 10px; }
  .kachel { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 14px 16px; align-items: center; }
  .kachel .icon { grid-row: span 2; margin: 0; }
  .kachel h2 { margin: 0; font-size: 1.05rem; }
  .kachel p { font-size: .9rem; }
}
.raster > .karte + .karte, .trefferliste > .karte + .karte { margin-top: 0; }

/* ---------- Anatomie-Abbildungen */
:root, [data-theme="hell"] {
  --ana-haut: #f6e4d4; --ana-haut-rand: #c9a58a;
  --ana-knochen: #f7f1e3; --ana-knochen-rand: #a8977a; --ana-knochen-dunkel: #d8ccb2;
  --ana-linie: #6b5a48;
}
[data-theme="dunkel"], [data-theme="dunkelblau"] { --ana-haut: #4a3b31; --ana-haut-rand: #8a6f5c;
    --ana-knochen: #e4dccb; --ana-knochen-rand: #8f8169; --ana-knochen-dunkel: #b5a888;
    --ana-linie: #d7c6b1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --ana-haut: #4a3b31; --ana-haut-rand: #8a6f5c;
    --ana-knochen: #e4dccb; --ana-knochen-rand: #8f8169; --ana-knochen-dunkel: #b5a888;
    --ana-linie: #d7c6b1; } }
.ana-svg { width: 100%; height: auto; max-height: 72vh; display: block; margin: 0 auto; touch-action: manipulation; }
.ana-knochen { fill: var(--ana-knochen); stroke: var(--ana-knochen-rand); stroke-width: 1.5; }
.ana-knochen-dunkel { fill: var(--ana-knochen-dunkel); stroke: var(--ana-knochen-rand); stroke-width: 1; }
.ana-knochen-linie { fill: none; stroke: var(--ana-knochen-dunkel); stroke-linecap: round; }
.ana-rippe { fill: none; stroke: var(--ana-knochen-dunkel); stroke-width: 5; stroke-linecap: round; }
.ana-haut { fill: var(--ana-haut); stroke: var(--ana-haut-rand); stroke-width: 1.5; }
.ana-kontur { fill: none; stroke: var(--ana-haut-rand); stroke-width: 2; stroke-linejoin: round; }
.ana-lunge { fill: #f2a7b5; stroke: #c06b7d; stroke-width: 1.5; }
.ana-luft { fill: #a9c7e8; stroke: #6b8db3; stroke-width: 1.5; }
.ana-luft-linie { fill: none; stroke: #a9c7e8; stroke-width: 8; stroke-linecap: round; }
.ana-herz { fill: #d9485f; stroke: #9e2a3e; stroke-width: 1.5; }
.ana-zwerchfell { fill: none; stroke: #b5655a; stroke-width: 4; stroke-linecap: round; }
.ana-leber { fill: #9c4a2f; stroke: #6d2f1c; stroke-width: 1.5; }
.ana-galle { fill: #6aa84f; stroke: #44752f; stroke-width: 1.5; }
.ana-magen { fill: #e8a87c; stroke: #b5764c; stroke-width: 1.5; }
.ana-pankreas { fill: #f1c75b; stroke: #b8902a; stroke-width: 1.5; }
.ana-duenndarm { fill: none; stroke: #e5a597; stroke-width: 9; stroke-linecap: round; }
.ana-dickdarm { fill: none; stroke: #c4836c; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.ana-appendix { fill: none; stroke: #c4836c; stroke-width: 5; stroke-linecap: round; }
.ana-rektum { fill: none; stroke: #c4836c; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 4 3; }
.ana-niere { fill: #8e4b5a; stroke: #5e2c38; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .85; }
.ana-harnleiter { fill: none; stroke: #d6b24a; stroke-width: 3; }
.ana-blase { fill: #f2d06b; stroke: #b8962a; stroke-width: 1.5; }
.ana-blau { fill: #6f95d6; stroke: #2f5597; stroke-width: 2; }
.ana-rot { fill: #e06666; stroke: #a12f2f; stroke-width: 2; }
.ana-blau-linie { fill: none; stroke: #4a78c8; stroke-linecap: round; }
.ana-rot-linie { fill: none; stroke: #d64545; stroke-linecap: round; }
.ana-septum { fill: none; stroke: #7a2a2a; stroke-width: 7; stroke-linecap: round; }
.ana-klappe { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.ana-pfeil { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ana-mittellinie { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ana-richtung { fill: none; stroke: var(--primary-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ana-legende { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; font-size: .9rem; color: var(--muted); }
.ana-legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.ana-leg-blau::before { background: #6f95d6; }
.ana-leg-rot::before { background: #e06666; }

/* Markierungspunkte */
.punkt { cursor: pointer; }
.punkt circle { fill: var(--primary); stroke: #fff; transform-box: fill-box; transform-origin: center; transition: transform .15s; }
.punkt text { fill: #fff; font-weight: 700; font-family: var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.punkt:hover circle, .punkt:focus circle { transform: scale(1.25); }
.punkt:focus { outline: none; }
.punkt.aktiv circle { fill: #f59e0b; transform: scale(1.3); }
.punkt.richtig circle { fill: #16a34a; transform: scale(1.3); }
.punkt.falsch circle { fill: #dc2626; }
.punkt.frage circle { fill: #f59e0b; transform: scale(1.3); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { stroke: #fde68a; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .punkt.frage circle { animation: none; } }

.bild-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .bild-layout { grid-template-columns: 1fr; } }
.bild-layout .bild-karte { position: sticky; top: 72px; }
@media (max-width: 760px) { .bild-layout .bild-karte { position: static; } }
.modus-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.modus-tabs .chip { flex: 1 1 auto; text-align: center; font-weight: 600; }
.info-feld { min-height: 96px; }
.info-feld .latein { display: block; font-size: 1.25rem; font-style: italic; color: var(--primary-strong); font-weight: 700; }
.info-feld .deutsch { display: block; font-size: 1.1rem; font-weight: 700; }
.legende-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.legende-liste button {
  width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: start;
  background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer;
}
.legende-liste button:hover, .legende-liste button.aktiv { background: var(--surface-2); }
.legende-liste .nr {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-size: .78rem; font-weight: 700;
}
.legende-liste .la { color: var(--muted); font-style: italic; font-size: .9rem; }
.quiz-frage { font-size: 1.15rem; margin-bottom: 12px; }
.quiz-frage strong { color: var(--primary-strong); }
.antworten { display: grid; gap: 8px; }
.antworten .btn { justify-content: flex-start; text-align: start; }
.antworten .btn.richtig { background: #16a34a; color: #fff; border-color: #16a34a; }
.antworten .btn.falsch { background: #dc2626; color: #fff; border-color: #dc2626; }
.rueckmeldung { margin: 12px 0; font-weight: 600; min-height: 1.5em; }
.rueckmeldung.ok { color: #16a34a; }
.rueckmeldung.nein { color: var(--danger); }

/* Lernfortschritt */
.fortschritt { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin: 8px 0 4px; }
.fortschritt .sicher { background: #16a34a; }
.fortschritt .lernend { background: #f59e0b; }
.fortschritt-text { font-size: .85rem; color: var(--muted); }
.bild-kachel { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.bild-kachel:hover { border-color: var(--primary); }
.bild-kachel .vorschau { height: 150px; display: grid; place-items: center; margin-bottom: 6px; }
.bild-kachel .vorschau svg { height: 150px; width: auto; max-width: 100%; }
.bild-kachel h3 { margin: 0; }

/* DNQP-Stand */
.dnqp-stand { font-size: .85rem; color: var(--muted); margin: 6px 0 0 !important; }
.dnqp-neu { display: inline-block; margin-top: 6px; }
.hinweis-karte { border-inline-start: 4px solid #f59e0b; }
.hinweis-karte.erledigt { opacity: .6; border-inline-start-color: var(--border); }
.hinweis-kopf { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.hinweis-kopf h3 { margin: 0; }
.admin-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.abstand-oben { margin-top: 28px; }
.trenner { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
@media (max-width: 760px) {
  .bild-layout.quiz > .karte:not(.bild-karte) { order: -1; }
  .bild-layout .ana-svg { max-height: 74vh; }
  .bild-layout .karte { padding: 14px; }
}

.bild-info .info-feld { min-height: 0; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }

/* ---------- Anatomie: gläserner Körper (neuer Stil) */
:root, [data-theme="hell"] { --ak-rand: #c9dcec; --ak-mitte: #f3f8fc; --ak-kontur: #8fb0cc; }
[data-theme="dunkel"], [data-theme="dunkelblau"] { --ak-rand: #1d3242; --ak-mitte: #2c4a5e; --ak-kontur: #5f8aa8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --ak-rand: #1d3242; --ak-mitte: #2c4a5e; --ak-kontur: #5f8aa8; } }
.ak-stop-rand { stop-color: var(--ak-rand); }
.ak-stop-mitte { stop-color: var(--ak-mitte); }
.ak-koerper { fill: url(#ak-g-koerper); stroke: var(--ak-kontur); stroke-width: 2; }
.ak-koerper-blass { opacity: .55; }
.ak-lunge { fill: url(#ak-g-lunge); stroke: #d17486; stroke-width: 1.2; opacity: .75; }
.ak-herz-blau { fill: url(#ak-g-blau); stroke: #22488f; stroke-width: 1.2; }
.ak-herz-rot { fill: url(#ak-g-rot); stroke: #8f1f2b; stroke-width: 1.2; }
.ak-glanz { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; }
.ak-arterie path { fill: none; stroke: #d93f45; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ak-vene path { fill: none; stroke: #3f6fc9; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ak-lungenarterie path { fill: none; stroke: #3f6fc9; stroke-width: 3.5; stroke-linecap: round; }
.ak-lungenvene path { fill: none; stroke: #d93f45; stroke-width: 3.5; stroke-linecap: round; }
.ak-kapillar circle { fill: #b06ab3; opacity: .35; }
.ak-blut-rot { fill: #ff4d55; stroke: #fff; stroke-width: .8; }
.ak-blut-blau { fill: #4d7fff; stroke: #fff; stroke-width: .8; }
.ak-gefaess-blau { fill: none; stroke: #4a78c8; stroke-linecap: round; stroke-linejoin: round; }
.ak-gefaess-rot { fill: none; stroke: #d64545; stroke-linecap: round; stroke-linejoin: round; }
.ak-vorhof-blau, .ak-kammer-blau { fill: url(#ak-g-blau); stroke: #22488f; stroke-width: 1.5; opacity: .9; }
.ak-vorhof-rot, .ak-kammer-rot { fill: url(#ak-g-rot); stroke: #8f1f2b; stroke-width: 1.5; opacity: .9; }
.ak-myokard { fill: url(#ak-g-myokard); stroke: #6e1520; stroke-width: 2; }
.ak-klappe { fill: none; stroke: #fff6e0; stroke-width: 4.5; stroke-linecap: round; }
.ak-phase text { fill: var(--text); font: 600 15px var(--font); }
.ak-gehirn { fill: url(#ak-g-gehirn); stroke: #c07c78; stroke-width: 1.5; }
.ak-windungen { fill: none; stroke: #c98a85; stroke-width: 1.6; stroke-linecap: round; }
.ak-kleinhirn { fill: #e7b2ad; stroke: #c07c78; stroke-width: 1.2; }
.ak-hirnstamm { stroke: #e0a8a2; stroke-width: 10; stroke-linecap: round; }
.ak-rueckenmark { stroke: #f2c94c; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(242,201,76,.6)); }
.ak-nerv path { fill: none; stroke: #e9b93a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ak-nerv-duenn path { fill: none; stroke: #e9b93a; stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.ak-impuls-cyan { fill: #22d3ee; filter: url(#ak-leuchten); }
.ak-impuls-orange { fill: #fb923c; filter: url(#ak-leuchten); }
.ak-impuls-gruen { fill: #4ade80; filter: url(#ak-leuchten); }
.ak-reiz { fill: none; stroke: #22d3ee; stroke-width: 3; }
.ak-muskel { fill: none; stroke: #fb923c; stroke-width: 3; }
.ak-muskel-gruen { fill: none; stroke: #4ade80; stroke-width: 3; }
.ana-leg-cyan::before { background: #22d3ee; }
.ana-leg-orange::before { background: #fb923c; }
.ana-leg-gruen::before { background: #4ade80; }
.vorschau-raster { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vorschau-raster .ana-svg { max-height: 640px; }
.defs-versteckt { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Persönliche Einstellungen */
html[data-schrift="gross"] { font-size: 112.5%; }
html[data-schrift="sehr-gross"] { font-size: 125%; }
html[data-animationen="reduziert"] *, html[data-animationen="reduziert"] *::before { animation: none !important; transition: none !important; }
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.wahl label {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  min-height: 48px; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-weight: 600; background: var(--surface);
}
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.wahl label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.wahl svg { width: 20px; height: 20px; }
.einstellung + .einstellung { margin-top: 22px; }
.einstellung h3 { margin-bottom: 4px; }
.thema-knopf { width: 40px; height: 40px; padding: 0; min-height: 40px; }

/* Zeichenbrett (nur Entwicklung) */
.zb { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.zb-feld { background: var(--bg); padding: 12px; }
.zb-svg { width: 100%; height: 96vh; }

/* Gläserner Körper */
:root, [data-theme="hell"] { --ak-oben: #e3eef8; --ak-unten: #d3e3f1; --ak-randlicht: #8fb4d6; --ak-linie: #6f97bb; }
[data-theme="dunkel"], [data-theme="dunkelblau"] { --ak-oben: #1f3445; --ak-unten: #172a39; --ak-randlicht: #4f86b0; --ak-linie: #7fa8c9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --ak-oben: #1f3445; --ak-unten: #172a39; --ak-randlicht: #4f86b0; --ak-linie: #7fa8c9; } }
.ak-stop-oben { stop-color: var(--ak-oben); }
.ak-stop-unten { stop-color: var(--ak-unten); }
.ak-koerper-rand path { fill: var(--ak-oben); stroke: var(--ak-kontur); stroke-width: 3; stroke-linejoin: round; }
.ak-koerper-flaeche path { fill: var(--ak-oben); }
.ak-koerper-randlicht path { fill: none; stroke: var(--ak-randlicht); stroke-width: 22; opacity: .55; }
.ak-koerper-linien { fill: none; stroke: var(--ak-linie); stroke-width: 1.3; stroke-linecap: round; opacity: .5; }
.ak-koerper-linien circle, .ak-koerper-linien ellipse { fill: none; }

/* Organe (realistisch) */
.ao-lunge { fill: url(#ak-g-lunge); stroke: #b85d70; stroke-width: 1.2; opacity: .88; }
.ao-lunge-blass { opacity: .45; }
.ao-fissur { fill: none; stroke: #a8506a; stroke-width: 1.2; opacity: .7; }
.ao-lunge-glanz, .ao-glanz, .ao-herz-glanz { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.2; stroke-linecap: round; }
.ao-bronchie { fill: none; stroke: #e9eef5; stroke-linecap: round; opacity: .9; }
.ao-knorpel { fill: #e8e4f2; stroke: #9a90b8; stroke-width: 1.2; }
.ao-luftroehre { fill: #dfe9f5; stroke: #8ea6c4; stroke-width: 1.2; }
.ao-ringe { fill: none; stroke: #9db3cf; stroke-width: 1.4; }
.ao-herz { fill: url(#ak-g-myokard); stroke: #6a1520; stroke-width: 1.4; }
.ao-vorhof { fill: #c24a50; stroke: #6a1520; stroke-width: 1; opacity: .9; }
.ao-vorhof-blau, .ao-kammer-blau { fill: url(#ak-g-blau); stroke: #1f3f88; stroke-width: 1; opacity: .8; }
.ao-herzfett { fill: none; stroke: #f3d27a; stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
.ao-koronar { fill: none; stroke: #e0353f; stroke-width: 1.8; stroke-linecap: round; }
.ao-arterie { fill: url(#ak-g-rot); stroke: #8e1b27; stroke-width: 1; }
.ao-vene { fill: url(#ak-g-blau); stroke: #1f3f88; stroke-width: 1; }
.ao-lungenarterie { fill: #5b84d6; stroke: #1f3f88; stroke-width: 1; }
.ao-zwerchfell { fill: #c87a6a; stroke: #8a4a3e; stroke-width: .8; opacity: .85; }
.ao-leber { fill: url(#ak-g-leber); stroke: #4e1c0e; stroke-width: 1.2; }
.ao-band { fill: none; stroke: #f0c2a8; stroke-width: 1.2; opacity: .7; }
.ao-galle { fill: url(#ak-g-galle); stroke: #3f6e22; stroke-width: 1; }
.ao-magen { fill: url(#ak-g-magen); stroke: #9c5a33; stroke-width: 1.2; }
.ao-falten { fill: none; stroke: #c98058; stroke-width: 1.2; opacity: .6; }
.ao-milz { fill: url(#ak-g-milz); stroke: #43173b; stroke-width: 1; }
.ao-pankreas { fill: url(#ak-g-pankreas); stroke: #a8772a; stroke-width: 1; }
.ao-darm, .ao-duenndarm { fill: url(#ak-g-darm); stroke: #b0685e; stroke-width: 1.1; }
.ao-duenndarm-glanz { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.ao-dickdarm { fill: url(#ak-g-dickdarm); stroke: #8a5238; stroke-width: 1.2; }
.ao-taenie { fill: none; stroke: #f6dcc4; stroke-width: 1.6; opacity: .65; }
.ao-niere { fill: url(#ak-g-niere); stroke: #4a1622; stroke-width: 1.1; }
.ao-nebenniere { fill: #f0c75c; stroke: #a8862a; stroke-width: .8; }
.ao-harnleiter { fill: none; stroke: #e2c35a; stroke-width: 2.6; stroke-linecap: round; }
.ao-hinten { opacity: .8; }
.ao-blase { fill: url(#ak-g-blase); stroke: #a8862a; stroke-width: 1.1; }
.ao-speiseroehre { fill: #e6a59a; stroke: #a9675e; stroke-width: 1; opacity: .7; }

/* Skelett */
.as-rand :is(path, rect, circle, ellipse) { fill: url(#ak-g-knochen-r); stroke: #8f7b55; stroke-width: 2.4; stroke-linejoin: round; }
.as-flaeche :is(path, rect, circle, ellipse) { fill: url(#ak-g-knochen-r); stroke: none; }
.as-rippe-rand path { fill: none; stroke: #8f7b55; stroke-width: 7.4; stroke-linecap: round; }
.as-rippe path { fill: none; stroke: #f5ecd8; stroke-width: 5; stroke-linecap: round; }
.as-knorpel-rand path { fill: none; stroke: #8fa3b5; stroke-width: 5.6; stroke-linecap: round; }
.as-knorpel path { fill: none; stroke: #dde7ef; stroke-width: 3.4; stroke-linecap: round; }
.as-hinten { opacity: .45; }
.as-hinten path { fill: #e9dfc8; stroke: #a8946c; stroke-width: 1.2; }
.as-rippe-hinten path { fill: none; stroke: #d9cba8; stroke-width: 4; stroke-linecap: round; }
.as-hoehle { fill: #3a3226; stroke: #5c4d36; stroke-width: 1; opacity: .85; }
.as-linie { fill: none; stroke: #8f7b55; stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.as-zaehne { fill: none; stroke: #8f7b55; stroke-width: 1.2; }
.as-geist { opacity: .22; }
.as-geist .as-hoehle { opacity: .4; }
.ak-koerper-blass { opacity: .5; }
.zb-einzeln { grid-template-columns: 1fr; }
.as-hinten-ansicht { opacity: .42; }
.as-hoehle { opacity: .55; }

/* Tafel-Elemente */
.versteckt { display: none; }
.ak-kapillar { fill: #a35ad1; opacity: .35; }
.ak-blutkoerperchen { stroke: #fff; stroke-width: .8; }
.ao-lungenvene { fill: #e2555c; stroke: #8e1b27; stroke-width: 1; opacity: .9; }
.ak-papillar { fill: #a62b36; stroke: #6a1520; stroke-width: 1; }
.ak-sehnen { fill: none; stroke: #fbe9d0; stroke-width: 1; opacity: .8; }
.ak-ekg-linie { fill: none; stroke: #16a34a; stroke-width: 2.4; stroke-linejoin: round; }
.ak-ekg-scan { fill: #16a34a; opacity: .45; }
.nv-hirn { fill: url(#ak-g-gehirn); stroke: #b0706a; stroke-width: 1.4; }
.nv-windung { fill: none; stroke: #b5655e; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.nv-windung-licht { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .8; stroke-linecap: round; transform: translate(-.8px, -.8px); }
.nv-kleinhirn ellipse { fill: #e0a7a1; stroke: #a8645e; stroke-width: 1; }
.nv-hirnstamm { stroke: #e2aea8; stroke-width: 11; stroke-linecap: round; }
.nv-mark { stroke: #f2c94c; stroke-width: 6; stroke-linecap: round; }
.nv-cauda { fill: none; stroke: #e9b93a; stroke-width: 1.4; }
.nv-nerv path { fill: none; stroke: #f0c13e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nv-hinten path { stroke-dasharray: 5 3; opacity: .85; }
.nv-duenn path { fill: none; stroke: #e9b93a; stroke-width: 1.3; stroke-linecap: round; opacity: .85; }
.nv-ast { fill: none; stroke: #e9b93a; stroke-linecap: round; opacity: .85; }
.at-nase { fill: #b9d7f0; stroke: #6f97bb; stroke-width: .8; opacity: .55; }
.at-rachen { fill: #dfe9f5; stroke: #8ea6c4; stroke-width: .8; opacity: .55; }
.at-alveole { fill: url(#ak-g-lunge); stroke: #b85d70; stroke-width: 1; }
.at-kapillare-rot { fill: none; stroke: #e0353f; stroke-width: 3; stroke-linecap: round; }
.at-kapillare-blau { fill: none; stroke: #3f6fc9; stroke-width: 3; stroke-linecap: round; }
.ak-zoom { fill: var(--surface); stroke: var(--ak-kontur); stroke-width: 2; }
.ak-zoom-linie { fill: none; stroke: var(--ak-kontur); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ak-zoom-text { fill: var(--muted); font: 600 10px var(--font); }
.ak-o2 { fill: #38bdf8; stroke: #fff; stroke-width: .6; }
.ak-co2 { fill: #94a3b8; stroke: #fff; stroke-width: .6; }
.ana-leg-o2::before { background: #38bdf8; }
.ana-leg-co2::before { background: #94a3b8; }
.ak-bissen { fill: #8b5a2b; stroke: #f5deb3; stroke-width: 1.2; }
.ak-risiko { fill: rgba(239, 68, 68, .5); stroke: #dc2626; stroke-width: 3; }
.ak-risiko-mittel { fill: rgba(249, 115, 22, .45); stroke: #ea580c; stroke-width: 3; }
.ak-phase text { fill: var(--text); font: 600 13px var(--font); }
.ak-richtung { fill: none; stroke: var(--primary-strong); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ak-ast-rot { fill: none; stroke: #d93f45; stroke-linecap: round; }
.ak-ast-blau { fill: none; stroke: #3f6fc9; stroke-linecap: round; opacity: .9; }
.ao-koronar-schnitt { fill: #e0353f; stroke: #f3d27a; stroke-width: 1.5; }

.zb-svg { overflow: hidden; }

/* Tafel-Steuerung */
.bild-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.bild-leiste .chip { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.vollbild-knopf { margin-inline-start: auto; }
.bild-karte:fullscreen { background: var(--bg); padding: 16px; display: flex; flex-direction: column; overflow: auto; }
.bild-karte:fullscreen .ana-svg { max-height: 86vh; }
.schritt-titel { font-size: 1.15rem; margin-top: 6px; }
.schritt-text { font-size: 1.02rem; }
.schritt-knoepfe { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
.schritt-punkte { display: flex; gap: 6px; margin: 4px 0 2px; }
.schritt-punkte span { width: 22px; height: 5px; border-radius: 3px; background: var(--border); }
.schritt-punkte span.aktiv { background: var(--primary); }
.bild-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bild-kachel .vorschau { height: 200px; }
.bild-kachel .vorschau svg { height: 200px; }

/* Skelett – Feinheiten */
.as-scheiben rect { fill: #cfe0ee; stroke: #8fa3b5; stroke-width: .6; }
.as-loch { fill: var(--ak-oben); stroke: #8f7b55; stroke-width: 1.2; }
.as-kamm { fill: none; stroke: #fffaf0; stroke-width: 2.4; stroke-linecap: round; opacity: .9; }
.as-pfanne { fill: #d9c9a2; stroke: #8f7b55; stroke-width: 1; opacity: .8; }
.as-zahnreihe { fill: #fffdf6; stroke: #8f7b55; stroke-width: 1; }
.as-glanz path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.6; stroke-linecap: round; }
.as-brustwirbel rect { fill: #e9dfc8; stroke: #a8946c; stroke-width: .8; }
.as-geist .as-glanz { display: none; }

/* Datenschutz-Kontrolle */
.gesendet { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.gesendet summary { cursor: pointer; font-weight: 600; }
.gesendet-text { background: var(--surface-2); border-radius: 8px; padding: 10px; margin: 10px 0 6px; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.gesendet-demo { margin-top: 12px; font-size: .9rem; }

/* Rechtliches */
.fusszeile { text-align: center; font-size: .85rem; color: var(--muted); padding: 8px 16px 24px; }
.fusszeile a { color: var(--muted); }
@media (max-width: 980px) { .shell .fusszeile { padding-bottom: 96px; } main { padding-bottom: 24px; } }
.login-wrap + .fusszeile { margin-top: -40px; }
.rechtlich-ohne-login { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.rechtlich-tabs { margin-bottom: 16px; }
.rechtlich-tabs .chip { text-decoration: none; color: var(--text); }
.rechtlich-tabs .chip.aktiv { color: var(--on-primary); }
.rechtstext section + section { margin-top: 20px; }
.rechtstext h2 { font-size: 1.05rem; margin-bottom: 6px; }
.rechtstext p { margin-bottom: 8px; }
.platzhalter { background: var(--warn-soft); color: var(--warn-text); border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* Kategorien */
.kategorie-raster[hidden] { display: none; }
.kategorie-karte .badge { margin-top: 8px; }
.kategorie-badge { margin-bottom: 8px; }
.std-karte .badge + h3 { margin-top: 6px; }

.verweise { margin-top: 16px; }

/* Offline und Spracheingabe */
.offline-band { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--warn-soft); color: var(--warn-text); font-size: .9rem; font-weight: 600; text-align: center; }
.offline-band svg { width: 20px; height: 20px; flex: none; }
.offline-groesse { font-weight: 600; }
.stichwort-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.stichwort-kopf label { margin: 0; }
.mikro-knopf.aktiv { background: var(--notfall); color: #fff; border-color: var(--notfall); animation: mikropuls 1.4s ease-in-out infinite; }
@keyframes mikropuls { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--notfall) 25%, transparent); } }
p[hidden] { display: none; }

/* ---------------------------------------------------------------- Quiz */
.qz-stufe { margin: 28px 0; }
.qz-stufe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.qz-stufe-kopf h2 { margin: 0; }
.qz-stufe-kopf .unterzeile { flex-basis: 100%; }
.qz-sterne span { color: var(--border); font-size: 1.1rem; }
.qz-sterne span.an { color: #f59e0b; }
.qz-bogen h3 { margin: 0 0 6px; font-size: 1.1rem; }
.qz-best { display: inline-block; margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.qz-best.ok { color: #16a34a; }
.stufe-einfach .qz-bogen { border-top: 4px solid #16a34a; }
.stufe-mittel .qz-bogen { border-top: 4px solid #f59e0b; }
.stufe-schwer .qz-bogen { border-top: 4px solid #dc2626; }
.badge.stufe-einfach { background: #dcfce7; color: #166534; }
.badge.stufe-mittel { background: #fef3c7; color: #92400e; }
.badge.stufe-schwer { background: #fee2e2; color: #991b1b; }
.qz-titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qz-titel h1 { margin-bottom: 4px; }
.qz-buehne { max-width: 760px; }
.qz-zaehler { display: flex; justify-content: space-between; color: var(--muted); font-size: .9rem; margin-top: 8px; }
.qz-fortschritt { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 8px 0 16px; }
.qz-fortschritt span { display: block; height: 100%; background: var(--primary); transition: width .4s ease; }
.qz-frage h2 { font-size: 1.25rem; margin: 10px 0 16px; line-height: 1.4; }
.qz-antworten { display: grid; gap: 10px; }
.qz-antwort {
  font: inherit; text-align: start; padding: 14px 16px; min-height: 52px; border-radius: 12px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 2px solid var(--border); transition: border-color .15s, background .15s, transform .15s;
}
.qz-antwort:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.qz-antwort:disabled { cursor: default; opacity: .7; }
.qz-antwort.richtig { opacity: 1; border-color: #16a34a; background: #dcfce7; color: #14532d; animation: qz-pop .35s ease; }
.qz-antwort.falsch { opacity: 1; border-color: var(--danger); background: var(--danger-soft); color: var(--danger); animation: qz-wackeln .4s ease; }
.qz-erklaerung { margin-top: 16px; padding: 12px 14px; border-radius: 10px; line-height: 1.5; }
.qz-erklaerung[hidden], .qz-aktionen .btn[hidden] { display: none; }
.qz-erklaerung.richtig { background: #dcfce7; color: #14532d; }
.qz-erklaerung.falsch { background: var(--warn-soft); color: var(--warn-text); }
.qz-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.qz-ergebnis { position: relative; overflow: hidden; text-align: center; padding-top: 28px; }
.qz-ergebnis .qz-aktionen { justify-content: center; }
.qz-ergebnis h2 { margin: 12px 0 4px; font-size: 1.5rem; }
.qz-ergebnis.bestanden h2 { animation: qz-pop .6s .9s ease both; }
.qz-punkte { font-size: 1.15rem; font-weight: 600; margin: 4px 0; }
.qz-ring { width: 140px; height: 140px; overflow: visible; }
.qz-ring circle { fill: none; stroke-width: 10; }
.qz-ring .spur { stroke: var(--surface-2); }
.qz-ring .wert { stroke: #f59e0b; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.qz-ring.bestanden .wert { stroke: #16a34a; }
.qz-ring text { transform-origin: 60px 60px; transform-box: view-box; fill: var(--text); font-size: 26px; font-weight: 700; }
.qz-ring.bestanden text { fill: #16a34a; font-size: 40px; animation: qz-pop .5s 1s ease both; }
.qz-ergebnis:not(.bestanden) h2 { animation: qz-wackeln .6s 1.2s ease; }
.qz-tipps h3 { margin: 18px 0 8px; font-size: 1.05rem; }
.qz-thema { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 12px; }
.qz-fehler { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.qz-fehler p { margin: 4px 0; }
.qz-fehler .frage { font-weight: 600; }
.qz-fehler .falsch { color: var(--danger); font-weight: 600; }
.qz-fehler .richtig { color: #16a34a; font-weight: 600; }
.konfetti { position: absolute; inset: 0; pointer-events: none; }
.konfetti span {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation-name: qz-konfetti; animation-timing-function: cubic-bezier(.25,.6,.4,1); animation-fill-mode: forwards;
}
.konfetti span.rund { width: 10px; height: 10px; border-radius: 50%; }
@keyframes qz-konfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), 460px) rotate(var(--dreh)); }
}
@keyframes qz-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes qz-wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
[data-theme="dunkel"] .qz-antwort.richtig, [data-theme="dunkelblau"] .qz-antwort.richtig, [data-theme="dunkel"] .qz-erklaerung.richtig, [data-theme="dunkelblau"] .qz-erklaerung.richtig { background: #12351f; color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .qz-antwort.richtig, :root:not([data-theme="hell"]) .qz-erklaerung.richtig { background: #12351f; color: #86efac; } }

/* ---------------------------------------------------------------- Statistik */
.st-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-kopf h2 { margin: 0; }
.st-kopf select { width: auto; }
.st-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.st-zahl { background: var(--surface-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.st-zahl strong { font-size: 1.6rem; color: var(--primary-strong); }
.st-zahl span { font-size: .85rem; color: var(--muted); }
.st-zahl .st-diff.hoch { color: #16a34a; }
.st-zahl .st-diff.runter { color: var(--danger); }
.st-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 24px; }
.st-spalten h3, .karte > div > h3 { font-size: 1rem; margin: 16px 0 8px; }
.st-balken { display: grid; gap: 6px; }
.st-zeile { display: grid; grid-template-columns: minmax(110px, 40%) 1fr auto; align-items: center; gap: 8px; font-size: .9rem; }
.st-zeile .spur { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.st-zeile .fuell { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.st-top { margin: 0; padding-inline-start: 22px; line-height: 1.7; }
.st-mail-bereich { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; }
.st-mail-bereich summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.st-mail-bereich summary svg { width: 18px; height: 18px; }
.st-mail { margin-top: 12px; }
.schalter-zeile { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.schalter-zeile input { width: auto; }

/* ---------------------------------------------------------------- Sprachen */
.uebersetz-kasten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 16px;
  border: 1px dashed var(--primary); border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); }
.uebersetz-kasten > svg { width: 20px; height: 20px; flex: none; }
.uebersetz-kasten .meldung { flex-basis: 100%; margin: 0; }
.sprach-wahl label { min-width: 0; }
.login-sprache { margin-top: 16px; font-size: .95rem; }
.login-sprache summary { cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.login-sprache summary svg { width: 16px; height: 16px; }
.login-sprache .wahl { margin-top: 10px; }
[dir="rtl"] .zurueck svg, [dir="rtl"] .icon-pfeil { transform: scaleX(-1); }
/* Bei Rechts-nach-links-Sprachen: Absätze mit deutschem (oder anderem) Text bekommen ihre eigene Leserichtung */
[dir="rtl"] :is(p, li, h1, h2, h3, dt, dd, td, th, .qz-antwort, .qz-erklaerung, .badge, strong, a) { unicode-bidi: plaintext; }

/* ---------------------------------------------------------------- Pinnwand */
.nav a { position: relative; }
.nav-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; margin-inline-start: 6px; }
@media (max-width: 980px) { .nav a .nav-zahl { position: absolute; top: 2px; inset-inline-end: 8px; margin: 0; } }
.pinnwand-banner { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.pinnwand-banner svg { width: 20px; height: 20px; }
.pw-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pw-bereiche { margin: 4px 0 16px; }
.pw-bereiche .nav-zahl { margin-inline-start: 6px; }
.pw-liste { display: grid; gap: 14px; }
.pw-liste > .karte + .karte { margin-top: 0; }
.pw-beitrag h2 { margin: 6px 0 8px; font-size: 1.2rem; }
.pw-beitrag.wichtig { border-inline-start: 5px solid #f59e0b; }
.pw-zeile { display: flex; gap: 6px; flex-wrap: wrap; }
.badge.pw-wichtig { background: #fef3c7; color: #92400e; }
.pw-text { white-space: pre-line; line-height: 1.55; margin: 0 0 10px; }
.pw-meta { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }
.pw-bestaetigt { color: #16a34a; font-weight: 600; }
.pw-aktionen { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pw-lesebestaetigung { margin-top: 10px; }
.pw-lesebestaetigung summary { cursor: pointer; color: var(--muted); }
.pw-formular textarea { min-height: 140px; }
.wb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border: 1px solid var(--border); border-radius: 999px; }
.wb-chip .btn { min-height: 30px; padding: 2px 8px; }
.wb-rechte select { width: auto; min-width: 110px; }

/* ---------------------------------------------------------------- Schulungen */
.sch-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.sch-status.gueltig { background: #dcfce7; color: #166534; }
.sch-status.bald { background: #fef3c7; color: #92400e; }
.sch-status.abgelaufen { background: var(--danger-soft); color: var(--danger); }
.sch-karte h3 { margin: 0 0 6px; font-size: 1.1rem; }
.sch-karte.gueltig { border-top: 4px solid #16a34a; }
.sch-karte.bald { border-top: 4px solid #f59e0b; }
.sch-karte.abgelaufen { border-top: 4px solid var(--danger); }
.sch-karte.offen { border-top: 4px solid var(--border); }
.sch-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sch-fortschritt strong { font-size: 1.05rem; }
.sch-start { border: 2px solid var(--primary); }
.sch-start h2 { margin-top: 0; }
.sch-pruefung { margin-top: 16px; scroll-margin-top: 80px; }
.nur-druck { display: none; }

@media print {
  body.druck-nachweis * { visibility: hidden; }
  body.druck-nachweis .nachweis-karte, body.druck-nachweis .nachweis-karte * { visibility: visible; }
  body.druck-nachweis .nachweis-karte { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; box-shadow: none; }
  body.druck-nachweis .nachweis-karte select, body.druck-nachweis .nachweis-karte .btn { display: none; }
  body.druck-nachweis .nur-druck { display: block; }
}
/* Mittlere Breite (Tablet quer, kleine Laptops): Kopfzeile kompakter, damit alle Menüpunkte passen */
@media (max-width: 1240px) and (min-width: 981px) {
  .nutzer .name, .nutzer .btn span { display: none; }
  .nav a { padding-inline: 10px; }
}

/* Schulungen: Lernweg mit kurzen Merk-Karten */
.sch-lernkarte { padding: 22px; }
.sch-merksatz { font-size: 1.35rem; line-height: 1.5; font-weight: 600; margin: 14px 0 20px; }
.sch-nachlesen { margin: 14px 0; }
.sch-nachlesen > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.st-luecke { margin: 10px 0; }
.st-luecke > summary { cursor: pointer; padding: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lernweg-aktiv .sch-start, .lernweg-aktiv .sch-nachlesen, .lernweg-aktiv .quelle, .lernweg-aktiv .ziel { display: none; }

/* Meckerbox und Vorschläge */
.rm-formular { display: grid; gap: 12px; }
.rm-formular textarea { width: 100%; min-height: 140px; }
.rm-anonym { display: flex; gap: 8px; align-items: center; }
.rm-eingang { margin-top: 16px; }
.rm-nachricht { border: 1px solid var(--border, #bbb); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.rm-nachricht.neu { border-inline-start: 4px solid var(--primary, #0f766e); }
.rm-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rm-text { white-space: pre-wrap; margin: 6px 0; }
.rm-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* App aufs Handy */
.handy-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--primary, #0f766e); color: #fff; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px;
  animation: handy-puls 1.6s ease-in-out 3; }
.handy-banner a.handy-text { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; flex: 1 1 220px; }
.handy-banner svg { width: 28px; height: 28px; flex: none; }
.handy-banner small { display: block; opacity: .9; }
.handy-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.handy-banner .btn { background: #fff; color: #0f766e; border-color: #fff; }
.handy-banner .btn.sekundaer { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
@keyframes handy-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,118,110,.0); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(15,118,110,.35); transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .handy-banner { animation: none; } }
.handy-karte summary { cursor: pointer; list-style: none; }
.handy-karte summary h2 { display: inline; margin: 0; }

/* Wissen: Gruppen und Suche auf der Startseite */
.gruppen-titel { font-size: 1.05rem; color: var(--muted); margin: 22px 0 10px; text-transform: none; }
.gruppen-titel:first-child { margin-top: 6px; }
.start-suche { margin: 16px 0; }