/* ==========================================================================
   Lernseite – Stylesheet
   Wie ein sorgfältig gesetztes Vorlesungsskript: Papier und Tinte, Königsblau für Links
   und Aktionen, Textmarker-Gelb nur für das, was heute fällig ist. Wenige Kästen;
   gegliedert wird über Schrift, Weißraum und feine Linien. Die Karteikarte ist das
   einzige Objekt, das wie ein echtes aussehen darf.
   Schrift: IBM Plex Serif (Titel, Lesetext), Plex Sans (Bedienung), Plex Mono (Code).
   ========================================================================== */

@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-latin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-latin-italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("fonts/plex-serif-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("fonts/plex-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("fonts/plex-serif-latin-600.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ---------- Farben und Maße ---------- */
:root {
  /* Papier und Tinte */
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F4F3EF;
  --surface-3: #ECEAE4;
  --line: #E4E1DA;
  --line-strong: #CFCBC2;
  --ink: #1D1F24;
  --ink-2: #4B4F58;
  --ink-3: #737780;
  /* Königsblau wie Füllertinte: Links und Aktionen */
  --brand: #2B3D9E;
  --brand-hover: #22318A;
  --brand-soft: #EDEFF8;
  --brand-ink: #22318A;
  --on-brand: #FFFFFF;
  --ok: #2B7A4B;
  --ok-soft: #E8F2EB;
  --bad: #B8382E;
  --bad-soft: #F8EAE8;
  /* Textmarker: nur für Fälliges und Termine */
  --due: #3B3000;
  --due-soft: #FFE76A;
  --due-line: #E3C93D;
  --mark: #FFE76A;
  --code-bg: #F4F3EF;
  /* Karteikarte */
  --karte: #FFFFFF;
  --karte-rot: #D45A50;
  --karte-linie: #D9E1F1;

  --stufe-0: #D6D3CB;   /* neu */
  --stufe-1: #BCC5EC;
  --stufe-2: #93A2DE;
  --stufe-3: #6878CB;
  --stufe-4: #4455B3;
  --stufe-5: #26368F;
  --seg-ink-1: #1D1F24; --seg-ink-2: #1D1F24; --seg-ink-3: #FFFFFF; --seg-ink-4: #FFFFFF; --seg-ink-5: #FFFFFF;

  --shadow-1: none;
  --shadow-2: 0 1px 2px rgba(29, 31, 36, .06), 0 12px 32px -16px rgba(29, 31, 36, .22);
  --shadow-karte: 0 1px 1px rgba(29, 31, 36, .07), 0 14px 30px -18px rgba(29, 31, 36, .38);

  --font: "Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Plex Serif", "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-s: 3px;
  --r-m: 5px;
  --r-l: 6px;
  --sidebar: 248px;
  --topbar: 56px;
  --wrap: 1080px;
  color-scheme: light;
}

/* Dunkel (Standard): Graphit wie Bleistiftmine, dieselbe Ordnung, kein Leuchten.
   theme.js setzt data-theme vor dem ersten Zeichnen. */
:root[data-theme="dark"] {
  --bg: #17181B; --surface: #1E1F23; --surface-2: #232428; --surface-3: #2B2C31; --line: #2E3035; --line-strong: #41434A;
  --ink: #ECEAE4; --ink-2: #B6B3AB; --ink-3: #8C8A84; --brand: #A9B6F5; --brand-hover: #C1CBFA; --brand-soft: #262A42;
  --brand-ink: #C4CDF8; --on-brand: #15161A; --ok: #6DBE8D; --ok-soft: #1D2B23; --bad: #F08B81; --bad-soft: #3A2224;
  --due: #1C1700; --due-soft: #E2C848; --due-line: #8A7A22; --mark: rgba(226, 200, 72, .38); --code-bg: #1A1B1E;
  --karte: #24252A; --karte-rot: #C25A52; --karte-linie: #313649;
  --stufe-0: #3A3B41; --stufe-1: #2D3870; --stufe-2: #3D4C9C; --stufe-3: #5A6CC6; --stufe-4: #8494E0; --stufe-5: #B4C0F4;
  --seg-ink-1: #FFFFFF; --seg-ink-2: #FFFFFF; --seg-ink-3: #15161A; --seg-ink-4: #15161A; --seg-ink-5: #15161A;
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(0, 0, 0, .7);
  --shadow-karte: 0 1px 1px rgba(0, 0, 0, .45), 0 18px 36px -18px rgba(0, 0, 0, .85);
  color-scheme: dark;
}

/* Fachfarben: nur als Kennung (Punkt, Akzentlinie, Tönung). Text bleibt in Textfarben. */
.farbe-blau    { --fach: #2A78D6; }
.farbe-orange  { --fach: #EB6834; }
.farbe-tuerkis { --fach: #1BAF7A; }
.farbe-gelb    { --fach: #EDA100; }
.farbe-rosa    { --fach: #E87BA4; }
.farbe-gruen   { --fach: #008300; }
.farbe-lila    { --fach: #6250D6; }
.farbe-grau    { --fach: #7B8494; }
.farbe-dunkelgruen { --fach: #1D7343; }
.farbe-hellblau    { --fach: #3AA8DD; }
.farbe-hellgruen   { --fach: #74B72E; }
.farbe-weiss       { --fach: #FFFFFF; }
:root[data-theme="dark"] .farbe-blau    { --fach: #3987E5; }
:root[data-theme="dark"] .farbe-orange  { --fach: #D95926; }
:root[data-theme="dark"] .farbe-tuerkis { --fach: #199E70; }
:root[data-theme="dark"] .farbe-gelb    { --fach: #C98500; }
:root[data-theme="dark"] .farbe-rosa    { --fach: #D55181; }
:root[data-theme="dark"] .farbe-lila    { --fach: #9085E9; }
:root[data-theme="dark"] .farbe-grau    { --fach: #8D97A8; }
:root[data-theme="dark"] .farbe-dunkelgruen { --fach: #3E9D63; }
:root[data-theme="dark"] .farbe-hellblau    { --fach: #5DBCEB; }
:root[data-theme="dark"] .farbe-hellgruen   { --fach: #8DCB45; }
:root[data-theme="dark"] .farbe-weiss       { --fach: #F0EFEA; }
/* --fach-strich: Linien und Ringe in Fachfarbe; --fach-rand: Umriss für Punkte und Kacheln (nur bei Weiß auf hellem Grund) */
[class*="farbe-"] { --fach-soft: color-mix(in srgb, var(--fach) 12%, var(--surface)); --fach-line: color-mix(in srgb, var(--fach) 38%, var(--surface)); --fach-strich: var(--fach); --fach-rand: transparent; }
/* Weiß auf hellem Grund: weißer Punkt mit grauem Umriss, Linien in Grau */
.farbe-weiss { --fach-soft: var(--surface); --fach-line: var(--line-strong); --fach-strich: #8E949C; --fach-rand: #8E949C; }
:root[data-theme="dark"] .farbe-weiss { --fach-soft: color-mix(in srgb, var(--fach) 12%, var(--surface)); --fach-line: color-mix(in srgb, var(--fach) 38%, var(--surface)); --fach-strich: var(--fach); --fach-rand: transparent; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 20px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; }
img, svg { max-width: 100%; }
.ic { flex: none; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.laden { color: var(--ink-3); }
.fehler { color: var(--bad); }
.muted { color: var(--ink-3); }
.noscript { padding: 24px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 8px 14px; border-radius: var(--r-m); }
.skip:focus { top: 12px; color: var(--on-brand); }

/* ---------- App-Gerüst ---------- */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar);
  display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 16px;
  background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto;
}
.haupt { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.sb-kopf { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 16px; }
.marke { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.marke:hover { color: var(--ink); }
.marke-zeichen { width: 22px; height: 22px; flex: none; color: var(--ink); }
.sidebar .sb-zu { display: none; }

.sb-nav, .sb-fuss { display: grid; gap: 2px; }
.sb-nav a, .sb-fuss a, .sb-fuss .sb-install, .sb-fach {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--r-m);
  color: var(--ink-2); font-weight: 500;
}
.sb-nav a:hover, .sb-fuss a:hover, .sb-fuss .sb-install:hover, .sb-fach:hover { background: var(--surface-3); color: var(--ink); }
.sb-install { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sb-install[hidden] { display: none; }
.sb-nav a[aria-current="page"], .sb-fuss a[aria-current="page"], .sb-fach[aria-current="page"] { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.sb-nav .ic, .sb-fuss .ic { display: none; }
.sb-fuss { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.sb-faecher { display: grid; gap: 2px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }
.sb-label { padding: 2px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sb-fach { min-width: 0; }
.punkt { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--fach); box-shadow: inset 0 0 0 1px var(--fach-rand, transparent); }
.sb-fach .punkt { margin: 0 3px; }
/* lange Fachnamen auf zwei Zeilen statt abgeschnitten */
.sb-fach-name { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
.sb-fach { align-items: flex-start; }
.sb-fach .punkt { margin-top: 6px; }
.sb-fach .sb-badge { margin-top: 1px; }
.sb-badge {
  flex: none; min-width: 20px; padding: 0 5px; border-radius: 2px; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; background: var(--due-soft); color: var(--due);
}
.sb-leer { padding: 2px 10px; color: var(--ink-3); font-size: 13.5px; }
.sb-schleier { position: fixed; inset: 0; z-index: 35; background: rgba(20, 20, 22, .45); }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar);
  display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .menu-btn, .topbar .marke-mobil, .topbar .suche-mobil { display: none; }
/* Öffnet die Schnellsuche; sieht aus wie ein Suchfeld */
.suche-knopf {
  flex: 0 1 340px; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 7px 0 10px;
  font: inherit; font-size: 14px; color: var(--ink-3); text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color .12s ease;
}
.suche-knopf:hover { border-color: var(--line-strong); color: var(--ink-2); }
.suche-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suche-tasten { display: inline-flex; gap: 3px; }
.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
main { flex: 1; width: 100%; max-width: calc(var(--wrap) + 96px); margin: 0 auto; padding: 40px 48px 88px; outline: none; }

/* ---------- Bausteine ---------- */
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0;
  color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--r-m); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m);
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--surface)); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn.klein { height: 32px; padding: 0 12px; font-size: 14px; }
.btn.gross { height: 44px; padding: 0 20px; font-size: 15.5px; }
.btn.breit { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: 500 11.5px/1 var(--font); color: var(--ink-3); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 3px;
}
.btn kbd { color: inherit; background: transparent; border-color: currentColor; opacity: .55; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border-radius: var(--r-s);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-3); white-space: nowrap;
}
.chip-fach { background: var(--fach-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fach-line); }
.chip-fach .punkt { width: 8px; height: 8px; }
.chip-due { background: var(--due-soft); color: var(--due); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-brand { background: var(--brand-soft); color: var(--brand-ink); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
/* Abschnitte ohne Kasten: Titel in Serif, Inhalt direkt auf dem Papier */
.abschnitt { margin-top: 48px; }
.abschnitt-direkt { margin-top: 0; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.abschnitt-titel { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.abschnitt-meta { font-size: 13.5px; color: var(--ink-3); }
.panel + .panel, .abschnitt + .panel { margin-top: 20px; }
.panel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-titel { font-size: 15.5px; font-weight: 600; }
.panel-meta { font-size: 13.5px; color: var(--ink-3); }
.panel-inhalt { padding: 20px; }
.panel-fuss { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; }

input, select, textarea, button { font: inherit; }
.feld { display: grid; gap: 6px; }
.feld > span:first-child, .feld-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.eingabe, .feld input[type="text"], .feld input[type="password"], .feld select, .lern-optionen select, .quiz-optionen select {
  width: 100%; height: 40px; padding: 0 12px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
}
.feld input:focus, .feld select:focus, .lern-optionen select:focus, .quiz-optionen select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.hilfe, .hinweis { font-size: 13.5px; color: var(--ink-3); }
.formular { display: grid; gap: 16px; }
.formular-fehler { color: var(--bad); font-size: 14px; font-weight: 600; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.schalter { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.schalter input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; flex: none; margin: 0;
  border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background-color .15s ease; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.schalter input:checked { background: var(--brand); }
.schalter input:checked::after { transform: translateX(16px); }

.segment { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: var(--r-l); flex-wrap: wrap; }
.segment label { position: relative; }
.segment input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.segment span { display: block; padding: 5px 11px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.segment input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.segment input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

.fortschritt { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.fortschritt > span { display: block; height: 100%; background: var(--brand); border-radius: 2px; transition: width .25s ease; }
.meter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meter .fortschritt { flex: 1; min-width: 48px; }
.meter-wert { font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* Stufenverteilung: ein Ganzes in Teilen, Rampe von hell (Stufe 1) nach dunkel (Stufe 5) */
.stufen { display: grid; gap: 10px; }
.stufen-balken { display: flex; gap: 2px; height: 28px; }
.stufen-balken .seg { display: flex; align-items: center; min-width: 4px; padding: 0 6px; border-radius: 2px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stufen-leer { flex: 1; border-radius: 4px; background: var(--surface-3); }
.seg-0 { background: var(--stufe-0); color: var(--ink); }
.seg-1 { background: var(--stufe-1); color: var(--seg-ink-1); }
.seg-2 { background: var(--stufe-2); color: var(--seg-ink-2); }
.seg-3 { background: var(--stufe-3); color: var(--seg-ink-3); }
.seg-4 { background: var(--stufe-4); color: var(--seg-ink-4); }
.seg-5 { background: var(--stufe-5); color: var(--seg-ink-5); }
.stufen-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.stufen-legende li { display: inline-flex; align-items: center; gap: 6px; }
.stufen-legende i { width: 10px; height: 10px; border-radius: 2px; }
.stufen-mini { display: flex; gap: 2px; height: 5px; width: 100%; min-width: 60px; }
.stufen-mini .seg { padding: 0; min-width: 2px; border-radius: 1px; }

/* ---------- Seitenkopf ---------- */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 28px; }
.seitentitel { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.seitenlead { margin-top: 8px; font-size: 16px; color: var(--ink-2); max-width: 62ch; }
/* Stand der Übersicht: ein Satz statt Kachel */
.stand { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.stand strong { color: var(--ink); font-weight: 600; }
.stand-serie { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.markiert { background: var(--due-soft); color: var(--due); padding: 0 .25em; border-radius: 2px; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.krume { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.krume a { color: var(--ink-3); }
.krume a:hover { color: var(--ink); }

/* ---------- Übersicht ---------- */
.hinweisleiste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin-bottom: 28px; padding: 12px 16px; border-radius: var(--r-l);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
}
.hinweisleiste p { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.hinweisleiste .ic { color: var(--ink-3); }


.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th { padding: 8px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-3); background: transparent; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tabelle td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.abschnitt .tabelle th:first-child, .abschnitt .tabelle td:first-child { padding-left: 0; }
.abschnitt .tabelle th:last-child, .abschnitt .tabelle td:last-child { padding-right: 0; }
/* eigene Zeile in der Rangliste: die Hinterlegung ragt etwas über die bündigen Zellen hinaus */
.abschnitt .tabelle-wrap { margin: 0 -10px; padding: 0 10px; }
.abschnitt .tabelle tr.rang-ich { box-shadow: inset 0 0 0 999px var(--brand-soft), -10px 0 0 var(--brand-soft), 10px 0 0 var(--brand-soft); }
.panel .tabelle tr:last-child td { border-bottom: 0; }
.panel .tabelle tbody tr:hover td { background: var(--surface-2); }
.tabelle .rechts { text-align: right; }
.tabelle .num { font-variant-numeric: tabular-nums; }
.tabelle-wrap { overflow-x: auto; }
.panel > .tabelle-wrap:first-child .tabelle th:first-child { border-top-left-radius: var(--r-l); }
.panel > .tabelle-wrap:first-child .tabelle th:last-child { border-top-right-radius: var(--r-l); }

.fach-zelle { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; min-width: 260px; }
/* Fachkürzel: Farbquadrat plus Kürzel, wie eine Randnotiz */
.fach-kachel {
  display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fach-kachel::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--fach); box-shadow: inset 0 0 0 1px var(--fach-rand, transparent); }
.fach-name { display: block; font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink); }
.fach-name:hover { color: var(--brand); }
.fach-beschreibung { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.zahl-null { color: var(--ink-3); }
.zahl-due { display: inline-block; min-width: 24px; padding: 0 6px; border-radius: 2px; background: var(--due-soft); color: var(--due); font-weight: 600; text-align: center; }
.spalte-fortschritt { min-width: 160px; }

/* ---------- Fachseite ---------- */
.fachkopf { display: grid; gap: 8px; margin-bottom: 24px; }
.fachkopf .fach-kachel { font-size: 13px; }
.tabs { display: flex; gap: 6px; margin-bottom: 32px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px 12px; margin-right: 18px; flex: none;
  color: var(--ink-2); font-weight: 500; font-size: 15px;
}
.tab .ic { display: none; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tab[aria-current="page"] .ic { color: var(--brand); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.tab-zahl { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tab .kurz { display: none; }

/* Lesetext */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: start; }
.doc:not(.mit-toc) { grid-template-columns: minmax(0, 1fr); }
.doc-papier { grid-column: 1; grid-row: 1; padding: 44px 52px 36px; }
.toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar) + 24px); max-height: calc(100vh - var(--topbar) - 48px); overflow: auto; font-size: 13.5px; }
.toc summary { list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 0 0 10px; cursor: default; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--ink-2); line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 600; }
.toc .toc-3 a { padding-left: 24px; color: var(--ink-3); }

.prose { font-family: var(--serif); font-size: 17px; line-height: 1.7; max-width: 68ch; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin: 2.2em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--line); hyphens: manual; }
.prose > h2:first-child { padding-top: 0; border-top: 0; }
.prose h3 { font-family: var(--font); font-size: 17px; font-weight: 600; margin: 1.8em 0 .5em; hyphens: manual; }
.prose h4 { font-family: var(--font); font-size: 15.5px; font-weight: 600; margin: 1.5em 0 .4em; }
.prose h5, .prose h6 { font-size: 16px; font-weight: 600; margin: 1.4em 0 .3em; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--ink-3); }
.prose li > ul, .prose li > ol { margin: .3em 0 .4em; }
.prose li.task { list-style: none; margin-left: -1.4em; display: flex; gap: 10px; align-items: baseline; }
.prose li.task input { accent-color: var(--brand); transform: translateY(1px); }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.prose mark, mark { background: var(--mark); color: inherit; padding: 0 .15em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose :not(pre) > code { font-family: var(--mono); font-size: .84em; padding: .1em .35em; background: var(--surface-3); border-radius: 3px; }

/* Tabellen wie im gesetzten Buch: kräftige Linie oben und unten, feine unter dem Kopf, kein Kasten */
/* die kräftigen Linien sitzen am Rahmen, nicht an der Tabelle: so laufen sie ohne Stoßstellen zwischen den Zellen durch */
.table-wrap { overflow-x: auto; margin: 1.4em 0 1.6em; border-top: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: 14.5px; line-height: 1.5; }
.prose th, .prose td { padding: 8px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose th { font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--ink-3); }
.prose tbody tr:last-child td { border-bottom: 0; }

.code { margin: 1.4em 0 1.6em; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--code-bg); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.code-copy { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: transparent; border: 0; border-radius: var(--r-s); cursor: pointer; }
.code-copy:hover { background: var(--surface-3); color: var(--ink); }
.code-copy.solo { float: right; margin: 6px 6px 0 0; }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code code { font-family: var(--mono); font-size: 14px; line-height: 1.65; tab-size: 4; color: var(--ink); }
.t-k { color: var(--brand); font-weight: 500; }
.t-s { color: var(--ok); }
.t-c { color: var(--ink-3); font-style: italic; }
.t-n { color: #A8540D; }
:root[data-theme="dark"] .t-n { color: #F0A869; }

/* Formeln: solange KaTeX lädt, steht der TeX-Text da; danach die gesetzte Formel.
   KaTeX-Schrift ist von Haus aus etwas kleiner im Bild als Plex Serif, daher 1,1 em statt 1,21 em. */
.math:not([data-gesetzt]) { font-family: var(--mono); font-size: .86em; color: var(--ink-2); }
.math-block { display: block; margin: 1.2em 0 1.4em; padding: 2px 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.math-display { display: block; margin: .5em 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.math .katex { font-size: 1.1em; }
.math .katex-display { margin: 0; }
.math-fehler, .math .katex-error { color: var(--bad); }

/* Kästen wie im Skript: keine Farbfläche, kein Symbol, sondern eine Randlinie in der Farbe der Art
   und eine Kopfzeile wie im Lehrbuch: „Definition (Fremdschlüssel)“ */
.callout { margin: 1.6em 0; padding: 1px 0 1px 20px; border-left: 2px solid var(--c-rand, var(--line-strong)); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 .3em; font-weight: 600; }
.callout-title .ic { display: none; }
.callout-typ + span { font-weight: 400; }
.callout-typ + span::before { content: " ("; }
.callout-typ + span::after { content: ")"; }
.callout-merke { --c-rand: var(--due-line); }
.callout-definition { --c-rand: var(--brand); }
.callout-achtung { --c-rand: var(--bad); }
.callout-tipp { --c-rand: var(--ok); }
.callout-aufgabe { --c-rand: var(--ink); }
.callout-aufgabe .callout-title:has(.callout-typ:only-child) { display: none; }

.loesung { margin: -.5em 0 1.6em; }
.loesung > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; border-radius: var(--r-s); }
.loesung > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .loesung > summary:hover { text-decoration: underline; text-underline-offset: 3px; } }
.loesung > summary .ic { transition: transform .15s ease; }
.loesung[open] > summary .ic { transform: rotate(180deg); }
.loesung .zu-text { display: none; }
.loesung[open] .auf-text { display: none; }
.loesung[open] .zu-text { display: inline; }
.loesung-body { margin-top: 8px; padding: 1px 0 1px 20px; border-left: 2px solid var(--ok); }
.loesung-body > :last-child { margin-bottom: 0; }

.figure { margin: 1.6em 0; }
.figure img { display: block; max-width: 100%; height: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; }
.figure figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.diagram { margin: 1.6em 0; overflow-x: auto; }
.diagram .mermaid-bild { display: flex; justify-content: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.diagram .mermaid-bild svg { max-width: 100%; height: auto; }
.mermaid-src { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); background: var(--code-bg); border: 1px dashed var(--line-strong); border-radius: var(--r-m); white-space: pre-wrap; }
.mermaid-src.mermaid-fehler { border-color: var(--bad); }

/* ---------- Karteikarten ---------- */
/* Start einer Runde: zwei Spalten ohne Kästen, die Einstellungen durch eine feine Linie abgesetzt */
.lern-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.spalte-inhalt { display: grid; gap: 14px; }
.lern-optionen, .quiz-optionen { display: grid; gap: 16px; padding-left: 40px; border-left: 1px solid var(--line); }
.lern-optionen .abschnitt-titel, .quiz-optionen .abschnitt-titel { margin-bottom: -2px; }
.lern-optionen .feld { gap: 8px; }

.session { max-width: 760px; margin: 0 auto; }
.session-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.session-kopf .fortschritt { flex: 1; }
.session-zahl { font-size: 14px; font-weight: 600; color: var(--ink-2); min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums; }

.karte-buehne { position: relative; perspective: 1600px; padding-bottom: 14px; }
.karte-buehne::before, .karte-buehne::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 14px; border-radius: 4px;
  background: var(--karte); border: 1px solid var(--line-strong); z-index: 0;
}
.karte-buehne::before { transform: translate(6px, 12px) rotate(.6deg); opacity: .5; }
.karte-buehne::after { transform: translate(-3px, 6px) rotate(-.4deg); opacity: .8; }
.karte { position: relative; z-index: 1; display: block; cursor: pointer; border-radius: 4px; transition: transform .22s ease, opacity .22s ease; }
.karte:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 4px; }
.karte-inner { display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .75, .25, 1); }
.karte.umgedreht .karte-inner { transform: rotateY(180deg); }
.seite {
  --seite-x: 30px;
  grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; min-height: 360px; padding: 16px var(--seite-x) 22px;
  background: var(--karte); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: var(--shadow-karte);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.hinten { transform: rotateY(180deg); }
.seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
/* Rückseite wie eine echte Karteikarte: rote Kopflinie über die ganze Breite, darunter feine Linien */
.hinten .seite-kopf { margin: 0 calc(-1 * var(--seite-x)); padding: 0 var(--seite-x) 10px; border-bottom: 1.5px solid var(--karte-rot); }
.seite-art { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.seite-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 0 8px; }
.vorne .seite-text { text-align: center; font-family: var(--serif); font-size: 24px; line-height: 1.42; font-weight: 400; letter-spacing: -.005em; }
.hinten .seite-text {
  justify-content: flex-start; padding-top: 12px; font-family: var(--serif); font-size: 17px; line-height: 28px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--karte-linie) 27px 28px);
  background-position: 0 6px; background-repeat: no-repeat;
}
.hinten .seite-text p, .hinten .seite-text ul, .hinten .seite-text ol { margin-bottom: 0; }
.seite-text > :first-child { margin-top: 0; }
.seite-text > :last-child { margin-bottom: 0; }
.seite-text .code, .seite-text .table-wrap { text-align: left; }
.seite-fuss { text-align: center; font-size: 13px; color: var(--ink-3); }
.karte.weg-ja { transform: translateX(40px) rotate(2deg); opacity: 0; }
.karte.weg-nein { transform: translateX(-40px) rotate(-2deg); opacity: 0; }
.antworten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.antwort-nein { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--surface)); }
.antwort-nein:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.antwort-ja { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.antwort-ja:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 88%, #000000); border-color: var(--ok); color: #FFFFFF; }
:root[data-theme="dark"] .antwort-ja, :root[data-theme="dark"] .antwort-ja:hover:not(:disabled) { color: #08130D; }
.tastatur-hinweis { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-3); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.tastatur-hinweis span { display: inline-flex; align-items: center; gap: 6px; }

.ergebnis { max-width: 760px; margin: 0 auto; }
.ergebnis-inhalt { display: grid; gap: 18px; }
.ergebnis-zahl { font-size: 15.5px; color: var(--ink-2); }
.ergebnis-zahl strong { color: var(--ink); font-weight: 600; }

/* ---------- Quiz ---------- */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.frage { padding: 28px 30px; }
.frage-text { font-family: var(--serif); font-size: 21px; line-height: 1.5; font-weight: 400; }
.frage-hinweis { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.optionen { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.option {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  padding: 11px 14px; text-align: left; font-size: 15.5px; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m);
  transition: border-color .12s ease, background-color .12s ease;
}
.option:hover:not(:disabled) { border-color: var(--brand); background: var(--surface-2); }
.option:disabled { cursor: default; }
.option-key { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-3); }
.option-text > :last-child { margin-bottom: 0; }
.option-text code { font-family: var(--mono); font-size: .9em; }
.option-zeichen { color: var(--ink-3); }
.option.gewaehlt { border-color: var(--brand); background: var(--brand-soft); }
.option.gewaehlt .option-key { background: var(--brand); color: var(--on-brand); }
.option.ist-richtig { border-color: var(--ok); background: var(--ok-soft); }
.option.ist-richtig .option-key { background: var(--ok); color: #FFFFFF; }
.option.ist-richtig .option-zeichen { color: var(--ok); }
.option.ist-falsch { border-color: var(--bad); background: var(--bad-soft); }
.option.ist-falsch .option-key { background: var(--bad); color: #FFFFFF; }
.option.ist-falsch .option-zeichen { color: var(--bad); }
:root[data-theme="dark"] .option.ist-richtig .option-key, :root[data-theme="dark"] .option.ist-falsch .option-key { color: #15161A; }
.erklaerung { margin-top: 18px; padding: 14px 16px 4px; border-radius: var(--r-m); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--surface)); }
.erklaerung.nok { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.erklaerung-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; }
.erklaerung.ok .erklaerung-titel .ic { color: var(--ok); }
.erklaerung.nok .erklaerung-titel .ic { color: var(--bad); }
.erklaerung .prose { font-size: 15px; }
.erklaerung > :last-child { margin-bottom: 10px; }
.quiz-aktionen { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.fehlerliste { list-style: none; margin: 32px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.fehlerliste li { padding: 16px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.fehlerliste .prose { font-size: 15px; }
.fehlerliste .richtig-text { font-size: 14.5px; }
.fehlerliste .richtig-text strong { color: var(--ok); }

/* ---------- Rangliste ---------- */
.rang-platz { width: 56px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rang-name { font-weight: 600; }
.rang-name small { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
/* Hintergrund plus Innenschatten: Chrome malt die Zeilenfarbe sonst je Zelle, mit feinen Nähten bei krummen Zoomstufen */
.tabelle tr.rang-ich { background: var(--brand-soft); box-shadow: inset 0 0 0 999px var(--brand-soft); }
.tabelle tbody tr.rang-ich:hover td { background: transparent; }
.rang-punkte { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.rang-punkte .fortschritt { flex: 1; max-width: 220px; }
.rang-punkte .meter-wert { min-width: 4.5em; text-align: left; color: var(--ink); }
.serie { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Suche ---------- */
.suche-gross { position: relative; max-width: 620px; margin-bottom: 20px; }
.suche-gross .ic { position: absolute; left: 14px; top: 13px; color: var(--ink-3); }
.suche-gross input { width: 100%; height: 46px; padding: 0 14px 0 42px; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.suche-gross input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.treffer { list-style: none; margin: 0; padding: 0; }
.treffer li + li { border-top: 1px solid var(--line); }
.treffer a { display: grid; gap: 4px; padding: 14px 20px; color: var(--ink); }
.treffer a:hover { background: var(--surface-2); }
.treffer-ort { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); }
.treffer-titel { font-weight: 600; }
.treffer-text { font-size: 14px; color: var(--ink-2); }

/* ---------- Konto und Anmeldung ---------- */
.einstellungen { max-width: 860px; }
/* Abschnitte ohne Kasten (Kalender, Daten) zwischen den Kästen brauchen Abstand nach unten */
.einstellungen > div:not(.panel) + .panel { margin-top: 44px; }
.einstellungen > div:empty { display: none; }
.einstellung { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px 32px; padding: 22px 24px; }
.einstellung + .einstellung { border-top: 1px solid var(--line); }
.einstellung h2 { font-size: 15.5px; font-weight: 600; }
.einstellung-text p { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.einstellung .formular { max-width: 420px; }
.gefahr .einstellung h2 { color: var(--bad); }
.admin-formulare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px; border-top: 1px solid var(--line); }
.admin-formulare h3 { font-size: 14.5px; font-weight: 600; }

.konto-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.konto-link:hover, .konto-link[aria-current="page"] { background: var(--surface-3); color: var(--ink); }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; font-size: 13.5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent); }

.auth { max-width: 420px; margin: 24px auto 0; }
.auth-kopf { display: grid; justify-items: center; gap: 12px; margin-bottom: 20px; text-align: center; }
.auth-kopf .marke-zeichen { width: 40px; height: 40px; }
.auth .panel-inhalt { padding: 24px; }
.auth-fuss { margin-top: 16px; text-align: center; font-size: 14px; color: var(--ink-3); }

.archiv-liste { display: grid; gap: 20px; }
.leer { padding: 32px; text-align: center; color: var(--ink-3); }
.leer h2 { color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.leer .aktionen { justify-content: center; margin-top: 14px; }
/* ohne Kasten: Leerzustand linksbündig wie der übrige Text */
.abschnitt .leer { padding: 8px 0; text-align: left; }
.abschnitt .leer .aktionen { justify-content: flex-start; }

/* ---------- Semesterplan (Übersicht) ---------- */
.sem { position: relative; }
.sem-inhalt { display: grid; grid-template-columns: minmax(0, max-content) minmax(220px, 1fr); gap: 20px 48px; align-items: start; }
.sem-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 6px; margin: -6px; }
.kal { --zelle: 18px; --luecke: 4px; --wt: 24px; --w: calc(var(--zelle) + var(--luecke)); position: relative; width: max-content; }
.kal-monate, .kal-phasen { position: relative; margin-left: calc(var(--wt) + var(--luecke)); }
.kal-monate { height: 18px; }
.kal-monate span { position: absolute; top: 0; font-size: 12px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
.kal-phasen { height: 22px; margin-top: 4px; margin-bottom: 8px; }
.kal-phase {
  position: absolute; top: 0; height: 22px; display: flex; align-items: center; padding: 0 8px; border-radius: 2px;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-phase.vl { background: var(--brand-soft); color: var(--brand-ink); }
.kal-phase.pause, .kal-phase-muster { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 6px); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.kal-phase.pr { background: var(--due-soft); color: var(--due); }
.kal-tage { display: grid; grid-template-rows: repeat(7, var(--zelle)); gap: var(--luecke); }
.kal-wt { grid-column: 1; font-size: 11.5px; line-height: var(--zelle); color: var(--ink-3); }
.kal-tag { display: block; width: var(--zelle); height: var(--zelle); border-radius: 2px; background: var(--surface-3); }
.kal-tag.z { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.kal-tag.h1 { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
.kal-tag.h2 { background: color-mix(in srgb, var(--brand) 42%, var(--surface)); }
.kal-tag.h3 { background: color-mix(in srgb, var(--brand) 62%, var(--surface)); }
.kal-tag.h4 { background: color-mix(in srgb, var(--brand) 82%, var(--surface)); }
.kal-tag.h5 { background: var(--brand); }
.kal-tag.ist-heute { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.kal-tag.klausur { background: var(--fach); box-shadow: inset 0 0 0 1px var(--fach-rand, transparent), 0 0 0 3px color-mix(in srgb, var(--fach-strich, var(--fach)) 28%, transparent); }
.kal-tag.termin { background: transparent; box-shadow: inset 0 0 0 2px var(--fach-strich, var(--fach)); }
.kal-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.kal-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende .kal-skala { gap: 4px; }
.kal-legende .kal-tag { width: 12px; height: 12px; border-radius: 2px; }
.kal-legende .kal-tag.ist-heute { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.kal-legende .klausur-muster { background: var(--ink-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-3) 30%, transparent); }
.kal-legende .termin-muster { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-3); }
.kal-phase-muster { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.kal-tip {
  position: absolute; z-index: 5; left: 0; top: 0; padding: 5px 8px; border-radius: 3px; pointer-events: none;
  background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); box-shadow: var(--shadow-2);
}
.sem-seite h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.sem-seite .hinweis { margin: 4px 0 14px; }
.klausuren { list-style: none; margin: 0 0 14px; padding: 0; }
.klausuren li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.klausuren .punkt { width: 10px; height: 10px; align-self: center; }
.k-name { font-family: var(--serif); font-size: 16px; font-weight: 600; min-width: 0; }
.k-rest { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-datum { grid-column: 2 / -1; font-size: 13px; color: var(--ink-3); }
.klausuren .vorbei { opacity: .6; }
.sem-satz { font-size: 14px; color: var(--ink-2); }
.sem-satz strong { color: var(--ink); font-weight: 600; }
.fach-klausur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.fach-klausur .ic { color: var(--ink-3); }
@media (max-width: 1240px) {
  .sem-inhalt { grid-template-columns: minmax(0, 1fr); }
  .sem-seite { max-width: 620px; }
}

/* ---------- Karteikasten in der Lernrunde ---------- */
.session .seite { min-height: 300px; }
.kasten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.kasten-fach {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; height: 104px; padding: 9px 10px;
  border-radius: 3px; background: var(--surface); border: 1px solid var(--line);
}
.kasten-n { grid-row: 1; font-size: 18px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kasten-stapel { grid-row: 2; display: flex; align-items: flex-end; min-height: 0; }
.kasten-stapel i { display: block; width: 100%; border-radius: 2px; background: repeating-linear-gradient(to top, var(--c) 0 3px, transparent 3px 5px); transition: height .3s ease; }
.kasten-name { grid-row: 3; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.kasten-name .kurz { display: none; }
.kasten-fach.landet { animation: kasten-landet .7s ease-out; }
.kasten-fach.landet::after {
  content: "+1"; position: absolute; top: -10px; right: 8px; padding: 1px 7px; border-radius: 2px;
  font-size: 12px; font-weight: 650; background: var(--brand); color: var(--on-brand); animation: plus-eins .9s ease-out forwards;
}
@keyframes kasten-landet { from { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 24%, transparent); } }
@keyframes plus-eins { 0% { opacity: 0; transform: translateY(4px); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
.flieger { position: fixed; z-index: 25; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.flieger .karte { cursor: default; }
.karte.kommt { animation: karte-kommt .26s ease-out; }
@keyframes karte-kommt { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ---------- Schnellsuche (Strg+K) ---------- */
html.pal-aktiv { overflow: hidden; }
.pal-schleier { position: fixed; inset: 0; z-index: 90; background: rgba(6, 10, 20, .5); animation: pal-schleier .14s ease-out; }
.pal {
  position: fixed; z-index: 91; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); max-height: min(580px, 76vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .5); animation: pal-ein .16s ease-out;
}
@keyframes pal-ein { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.985); } }
@keyframes pal-schleier { from { opacity: 0; } }
.pal-eingabe { flex: none; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); }
.pal-eingabe > .ic { color: var(--ink-3); }
.pal-eingabe input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px; }
.pal-eingabe input::placeholder { color: var(--ink-3); }
.pal-zu { display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.pal-zu .ic { display: none; }
.pal-liste { overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.pal-gruppe { padding: 4px 8px; }
.pal-gruppe + .pal-gruppe { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.pal-titel { padding: 6px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pal-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.pal-zeile.aktiv { background: var(--brand-soft); }
.pal-ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--ink-3); }
.pal-zeile.aktiv .pal-ic { color: var(--brand); }
.pal-text { flex: 1; min-width: 0; }
.pal-haupt { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-text small { display: block; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-zeile mark { padding: 0; background: none; color: var(--brand-ink); font-weight: 650; }
.pal-zahl { flex: none; padding: 0 6px; border-radius: 2px; font-size: 12.5px; font-weight: 600; background: var(--due-soft); color: var(--due); }
.pal-los { flex: none; display: grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; color: var(--ink-3); border: 1px solid var(--line); visibility: hidden; }
.pal-zeile.aktiv .pal-los { visibility: visible; }
.pal-leer { padding: 18px; color: var(--ink-3); font-size: 14px; }
.pal-fuss { flex: none; display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); }
.pal-fuss span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Dunkel: kleine Anpassungen ---------- */
:root[data-theme="dark"] .pal-schleier { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .kal-tag { background: #26272C; }
:root[data-theme="dark"] .kal-tag.z { background: transparent; box-shadow: inset 0 0 0 1px #313237; }
:root[data-theme="dark"] .kal-tag.h1 { background: color-mix(in srgb, var(--brand) 26%, var(--surface)); }
:root[data-theme="dark"] .kal-tag.h2 { background: color-mix(in srgb, var(--brand) 44%, var(--surface)); }
:root[data-theme="dark"] .kal-tag.h3 { background: color-mix(in srgb, var(--brand) 62%, var(--surface)); }
:root[data-theme="dark"] .kal-tag.h4 { background: color-mix(in srgb, var(--brand) 80%, var(--surface)); }
:root[data-theme="dark"] .kal-tag.h5 { background: #D3DAFB; }
:root[data-theme="dark"] .kal-tag.klausur { background: var(--fach); }
:root[data-theme="dark"] .kal-legende .kal-tag.ist-heute { background: transparent; }
:root[data-theme="dark"] .kal-legende .klausur-muster { background: var(--ink-3); }
/* Mermaid zeichnet Kästen mit weichem Schatten; auf Papier wie im Dunkeln ohne, wie eine Skizze im Skript */
.diagram .mermaid-bild svg [data-look="neo"] * { filter: none !important; }
/* Beschriftungen an Linien deckend hinterlegen, sonst läuft die Linie mitten durch den Text */
.diagram .mermaid-bild svg .labelBkg { background-color: var(--surface) !important; }

/* ---------- Kleine Bausteine ---------- */
.link-knopf { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); cursor: pointer; }
.link-knopf:hover { color: var(--ink); text-decoration-color: currentColor; }
.leer-text { max-width: 62ch; font-size: 15.5px; color: var(--ink-2); }
.leer-text p + p { margin-top: 12px; }
.melden-zeile { margin-top: 14px; text-align: center; }
.quiz-aktionen .quiz-melden { margin-left: auto; align-self: center; }
.countdown { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.doc-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); }
.toc-extra { margin: 16px 0 0; padding-left: 14px; font-size: 13.5px; }
.toc-extra a { color: var(--brand-ink); }
:root[data-theme="dark"] .toc-extra a { color: var(--brand); }

/* Unternavigation im Reiter Training */
.werkzeug-wahl { display: flex; gap: 22px; margin: -12px 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.werkzeug-wahl a { position: relative; flex: none; padding: 8px 0 10px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.werkzeug-wahl a:hover { color: var(--ink); }
.werkzeug-wahl a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.werkzeug-wahl a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); }

/* ---------- Glossar: antippbare Fachbegriffe ---------- */
.begriff, .prose a.begriff { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 60%, transparent); cursor: help; }
.begriff:hover, .prose a.begriff:hover, .begriff[aria-expanded="true"] { color: var(--brand-ink); text-decoration-color: currentColor; }
:root[data-theme="dark"] .begriff:hover, :root[data-theme="dark"] .begriff[aria-expanded="true"] { color: var(--brand); }
.begriff-pop {
  position: absolute; z-index: 70; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-2);
}
.begriff-pop:focus { outline: none; }
.begriff-pop:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 2px; }
.begriff-pop-titel { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.begriff-pop-text { font-size: 15px; line-height: 1.55; max-width: none; }
.begriff-pop-text > :last-child { margin-bottom: 0; }
.begriff-pop-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* ---------- Kompendium ---------- */
.kompendium .seitenkopf .fach-kachel { margin-bottom: 10px; }
.komp-begriffe { margin: 0; columns: 2 320px; column-gap: 44px; }
.komp-eintrag { break-inside: avoid; }
.komp-begriffe .komp-eintrag { margin-bottom: 18px; }
.komp-begriffe dt { font-family: var(--serif); font-size: 16.5px; font-weight: 600; }
.komp-begriffe dd { margin: 3px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.komp-begriffe dd p { margin: 0 0 4px; }
.komp-quelle { display: inline-block; margin-top: 2px; font-family: var(--font); font-size: 12.5px; color: var(--ink-3); }
.komp-quelle:hover { color: var(--ink); }
.komp-formeln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 36px; }
.komp-formeln li { padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.komp-formeln .math-block { margin: 8px 0 4px; text-align: left; }
.komp-kapitel { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.komp-liste { margin: 0; padding-left: 1.2em; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; }
.komp-liste li { margin-bottom: 10px; }
.komp-liste li p { display: inline; margin: 0; }

/* ---------- Schwachstellen ---------- */
.schwach-liste { list-style: none; margin: 0; padding: 0; }
.schwach-zeile { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.schwach-zeile .fach-kachel { padding-top: 4px; }
.schwach-thema { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.schwach-satz { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.schwach-meter { max-width: 300px; margin-top: 8px; }
.schwach-meter .fortschritt > span { background: var(--bad); }
.schwach-aktionen { justify-content: flex-end; }
.ungeuebt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ungeuebt-liste a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.ungeuebt-liste a:hover { color: var(--brand-ink); }
.ungeuebt-liste .punkt { width: 8px; height: 8px; }
.ungeuebt-fach { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

/* ---------- Probeklausur ---------- */
.pk-vorschau { font-size: 14.5px; color: var(--ink-2); }
.pk-verlauf-titel { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pk-verlauf { max-width: 380px; }
.abschnitt .pk-verlauf th:first-child, .spalte .pk-verlauf th:first-child, .spalte .pk-verlauf td:first-child { padding-left: 0; }
.spalte .pk-verlauf th:last-child, .spalte .pk-verlauf td:last-child { padding-right: 0; }
.spalte .pk-verlauf td { padding-top: 9px; padding-bottom: 9px; }
.klausur-kopf { position: sticky; top: var(--topbar); z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.klausur-uhr { min-width: 4.5ch; font-family: var(--mono); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.klausur-uhr.knapp { color: var(--bad); }
.klausur-stand { flex: 1; font-size: 14px; color: var(--ink-2); }
.klausur-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 26px; padding: 0; }
.klausur-nr { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.klausur-nr:hover { color: var(--ink); border-color: var(--ink-3); }
.klausur-nr.erledigt { background: var(--surface-3); color: var(--ink); }
.klausur-nr[aria-current="step"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.klausur-titel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.klausur-titel:focus { outline: none; }
.klausur-art { font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.klausur-optionen { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.klausur-option { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); cursor: pointer; }
.klausur-option:hover { border-color: var(--ink-3); }
.klausur-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.klausur-option input { margin: 0; accent-color: var(--brand); }
.klausur-option .option-text > :last-child { margin-bottom: 0; }
.klausur-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.klausur-abgabe { display: grid; gap: 10px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); }
.klausur-abgabe[hidden] { display: none; }
.klausur-ergebnis { max-width: 760px; }
.pk-ergebnis { font-size: 18px; }
.pk-teile { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.pk-teile li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pk-loesungen-titel { margin: 40px 0 10px; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.pk-loesungen { list-style: none; margin: 0; padding: 0; }
.pk-loesung { margin-bottom: 16px; padding: 4px 0 4px 18px; border-left: 2px solid var(--line-strong); }
.pk-loesung.ok { border-left-color: var(--ok); }
.pk-loesung.nok { border-left-color: var(--bad); }
.pk-loesung.teils { border-left-color: var(--due-line); }
.pk-loesung-kopf { margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.pk-loesung .prose { font-size: 16px; }
.pk-antwort { margin-top: 6px; font-size: 14.5px; }
.pk-sql { margin: 4px 0 8px; padding: 10px 12px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; background: var(--code-bg); border-radius: var(--r-s); }
.pk-trainer-loesung { margin-top: 8px; }
.pk-trainer .tr-text { font-size: 16px; }
.pk-trainer .tr-form { margin-top: 14px; gap: 12px; }
.pk-trainer .tr-loesung { margin-top: 14px; padding-top: 14px; }

/* ---------- SQL-Labor (sqllab.js) ----------
   Aufgabe wie :::aufgabe mit Randlinie in Textfarbe, darunter Editor, Knöpfe und Ergebnis.
   Steht meist in .prose (Serifenschrift); alles unter .sql-arbeit ist bewusst Bedienoberfläche in Plex Sans.
   Selektoren mit .sql-arbeit davor, damit die .prose-Regeln für Absätze und Tabellen nicht greifen. */
.sql-aufgabe { margin: 1.6em 0; }
.sql-aufgabe > .sql-text { padding: 1px 0 1px 20px; border-left: 2px solid var(--ink); }
.sql-aufgabe > .sql-text > :last-child { margin-bottom: 0; }
.sql-arbeit { margin-top: 14px; font-family: var(--font); font-size: 15px; line-height: 1.5; hyphens: manual; }
.sql-arbeit p { margin: 0; }

.sql-editor {
  display: block; width: 100%; min-height: 96px; margin: 0; padding: 10px 12px; resize: vertical;
  font: 14px/1.6 var(--mono); color: var(--ink); background: var(--code-bg); tab-size: 2;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
}
.sql-editor::placeholder { color: var(--ink-3); }
.sql-editor:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.sql-arbeit .sql-hilfe { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

.sql-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sql-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.sql-status:empty { display: none; }
.sql-arbeit[aria-busy="true"] .sql-ausgabe { opacity: .6; }

.sql-ausgabe { margin-top: 14px; }
.sql-ausgabe:empty { display: none; }
.sql-ausgabe > * + * { margin-top: 10px; }
.sql-arbeit .sql-meldung { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.sql-meldung .ic { flex: none; margin-top: 2px; }
.sql-meldung.ok { color: var(--ok); }
.sql-meldung.nok { color: var(--bad); }
.sql-original { display: block; margin-top: 2px; font: 400 12.5px/1.45 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.sql-arbeit .sql-info { font-size: 14px; color: var(--ink-2); }

/* Ergebnis und Beispielzeilen: schlichte Tabelle, scrollt bei vielen Spalten in sich selbst.
   .sql-tabelle-wrap davor, damit .prose th/td nicht greifen (auch im Labor außerhalb von .sql-arbeit). */
.sql-arbeit .sql-ergebnis-kopf { margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.sql-tabelle-wrap { max-width: 100%; overflow-x: auto; }
.sql-tabelle-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sql-tabelle-wrap .sql-tabelle { width: auto; min-width: 0; border-collapse: collapse; font: 14px/1.45 var(--font); font-variant-numeric: tabular-nums; }
.sql-tabelle-wrap .sql-tabelle th,
.sql-tabelle-wrap .sql-tabelle td { padding: 5px 18px 5px 0; text-align: left; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sql-tabelle-wrap .sql-tabelle th:last-child,
.sql-tabelle-wrap .sql-tabelle td:last-child { padding-right: 0; }
.sql-tabelle-wrap .sql-tabelle th { font: 600 12.5px/1.45 var(--mono); color: var(--ink-2); background: none; border-bottom-color: var(--ink-3); }
.sql-tabelle-wrap .sql-tabelle .num { text-align: right; }
.sql-tabelle-wrap .sql-tabelle .sql-null { color: var(--ink-3); font-style: italic; }
.sql-tabelle-wrap .sql-tabelle tbody tr:last-child td { border-bottom: 0; }

/* Tabellen ansehen: Relationenschema wie im Skript, Primärschlüssel unterstrichen */
.sql-tabellen { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sql-schema { display: grid; gap: 18px; }
.sql-arbeit .sql-relation-kopf, .sql-labor .sql-relation-kopf { margin: 0 0 6px; font: 13.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.sql-relation-name { font-weight: 600; }
.sql-pk { text-decoration: underline; text-underline-offset: 3px; }
.sql-fk { text-decoration: underline dotted; text-underline-offset: 3px; }
.sql-pk.sql-fk { text-decoration-style: solid; }
.sql-relation-n { margin-left: 10px; font: 12.5px/1.5 var(--font); color: var(--ink-3); }
.sql-arbeit .sql-legende, .sql-labor .sql-legende { margin: 0; font-size: 12.5px; color: var(--ink-3); }

.sql-loesung-anzeige .code { margin: 12px 0 0; }

/* Freies Labor im Reiter „Training“ */
.sql-labor { font-family: var(--font); }
.sql-labor-wahl { max-width: 320px; margin-bottom: 16px; }
.sql-labor-db { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.sql-labor-schema { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sql-labor-schema > summary { padding: 4px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.sql-labor-schema[open] > summary { margin-bottom: 10px; }
.sql-labor .sql-arbeit { margin-top: 0; }

/* Touch: Tastenhinweise ausblenden, Editor mit 16 px, damit iOS beim Antippen nicht hineinzoomt */
@media (hover: none) and (pointer: coarse) {
  .sql-arbeit .sql-hilfe { display: none; }
  .sql-editor { font-size: 16px; }
}
@media (max-width: 720px) {
  .sql-aufgabe > .sql-text { padding-left: 16px; }
  .sql-status { margin-left: 0; }
  .sql-relation-n { display: block; margin-left: 0; }
}
@media print {
  .sql-leiste, .sql-arbeit .sql-hilfe { display: none; }
}

/* ---------- Normalform-Rechner (normalform.js) ---------- */
/* Eingabe wie auf Karopapier: Schreibmaschinenschrift; Lösung im Lesetext wie eine ausgearbeitete Musterlösung */
.nf { max-width: 760px; }
.nf-anleitung { max-width: 64ch; margin-bottom: 12px; font-size: 14.5px; color: var(--ink-2); }
.nf-anleitung code, .nf-loesung code, .nf-kompakt code {
  font-family: var(--mono); font-size: .86em; padding: .05em .3em; background: var(--surface-3); border-radius: var(--r-s);
}
.nf-form { display: grid; gap: 10px; }
.nf-eingabe {
  display: block; width: 100%; min-height: 128px; resize: vertical; padding: 11px 14px;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.6; color: var(--ink); tab-size: 4;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m);
}
.nf-eingabe::placeholder { color: var(--ink-3); }
.nf-eingabe:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.nf-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nf-taste { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; color: var(--ink-3); }

.nf-fehler, .nf-hinweise { list-style: none; margin: 16px 0 0; padding: 1px 0 1px 16px; display: grid; gap: 4px; font-size: 14.5px; }
.nf-fehler { border-left: 2px solid var(--bad); color: var(--bad); }
.nf-hinweise { border-left: 2px solid var(--line-strong); color: var(--ink-2); }

/* Ausgearbeitete Lösung */
.nf-loesung { margin-top: 28px; font-family: var(--serif); font-size: 16.5px; line-height: 1.65; color: var(--ink); overflow-wrap: break-word; }
.nf-urteil { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.nf-satz { font-size: 19px; line-height: 1.45; }
.nf-satz strong { font-weight: 600; }
.nf-leiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--font); font-size: 13.5px; font-weight: 600; }
.nf-leiter li {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); color: var(--ink-3);
}
.nf-leiter li.ja { color: var(--ink); border-color: color-mix(in srgb, var(--ok) 40%, var(--line-strong)); }
.nf-leiter li.ja .ic { color: var(--ok); }
.nf-leiter li.nein .ic { color: var(--bad); }
.nf-leiter li.nein.danach .ic { color: var(--ink-3); }
.nf-teil { padding: 20px 0; border-bottom: 1px solid var(--line); }
.nf-teil:last-child { border-bottom: 0; padding-bottom: 0; }
.nf-teil h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.nf-teil > p + p, .nf-teil > ul + p, .nf-teil > ol + p, .nf-teil > ol + ul { margin-top: 8px; }
.nf-liste, .nf-schritte, .nf-relationen, .nf-fds { margin: 6px 0 0; padding-left: 1.4em; }
.nf-liste li, .nf-schritte li, .nf-relationen li, .nf-fds li { margin: .3em 0; }
.nf-liste li::marker, .nf-schritte li::marker, .nf-relationen li::marker { color: var(--ink-3); }
.nf-fds { list-style: none; padding-left: 0; }
.nf-fd { font-weight: 600; }
.nf-art { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nf-stufe { display: inline-block; min-width: 3.4em; font-family: var(--font); font-size: 14px; font-weight: 600; }
.nf-notiz { color: var(--ink-2); font-size: 15px; }
.nf-gut { color: var(--ok); }
.nf-schlecht { color: var(--bad); }
.nf-rel { font-weight: 600; }
.nf-key { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nf-loesung sup { font-size: .7em; line-height: 0; }
.nf-loesung sub { font-size: .7em; line-height: 0; }
.nf-loesung sup, .nf-kompakt sup { font-family: var(--font); }
/* Pfeil aus der Systemschrift: Die mitgelieferten Schriften haben nur den lateinischen Zeichensatz */
.nf-pfeil { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; padding: 0 .06em; }

/* In Übungen: Knöpfe unter dem Schema, Kurzlösung wie eine aufgeklappte Lösung */
.nf-block { margin: 1.4em 0 1.6em; }
.nf-block > .code { margin: 0; }
.nf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: var(--font); }
.nf-aktionen a.btn { text-decoration: none; }
.nf-kompakt { margin-top: 12px; padding: 1px 0 1px 20px; border-left: 2px solid var(--ok); }
.nf-kompakt > * + * { margin-top: 8px; }
.nf-block .nf-kompakt > p, .nf-block .nf-kompakt > ul, .nf-block .nf-kompakt > ol { margin-bottom: 0; }
.nf-kompakt ol.nf-leiter { margin: 0 0 4px; padding-left: 0; }
.nf-kompakt ol.nf-leiter li { margin: 0; }

@media (max-width: 720px) {
  .nf-loesung { font-size: 16px; }
  .nf-satz { font-size: 17.5px; }
  .nf-taste { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .nf-taste { display: none; }
}

/* ---------- Modell-Zeichner: ER und e³value (modell.js) ---------- */
/* Eingabe wie beim Normalform-Rechner; die Zeichnung liegt auf Papier und darf im Rahmen seitlich scrollen,
   damit die Schrift lesbar bleibt (mindestens 62 % der natürlichen Größe, nie größer als 100 %). */
.mz { max-width: 1180px; }
.mz-art { margin-bottom: 12px; }
.mz-anleitung { max-width: 72ch; margin-bottom: 14px; font-size: 14.5px; color: var(--ink-2); }
.mz-anleitung code, .mz-fehler code {
  font-family: var(--mono); font-size: .86em; padding: .05em .3em; background: var(--surface-3); border-radius: var(--r-s);
}
.mz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1440px) {
  .mz-raster { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .mz-links { position: sticky; top: calc(var(--topbar) + 16px); }
}
.mz-links, .mz-rechts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.mz-eingabe {
  display: block; width: 100%; min-height: 200px; resize: vertical; padding: 11px 14px;
  font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink); tab-size: 4; white-space: pre; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m);
}
.mz-eingabe::placeholder { color: var(--ink-3); }
.mz-eingabe:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.mz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-leiste .btn[hidden] { display: none; }

.mz-fehler, .mz-hinweise { list-style: none; margin: 4px 0 0; padding: 1px 0 1px 14px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.mz-fehler { border-left: 2px solid var(--bad); color: var(--bad); }
.mz-hinweise { border-left: 2px solid var(--line-strong); color: var(--ink-2); }

/* Zeichenfläche */
.mz-bild, .modell-bild {
  overflow-x: auto; overscroll-behavior-x: contain; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.mz-bild { min-height: 220px; display: grid; align-content: center; }
.mz-bild:focus-visible, .modell-bild:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.modell-svg {
  display: block; margin: 0 auto; height: auto; max-width: none;
  width: min(var(--b, 100%), max(100%, calc(var(--b, 100%) * .62)));
  color: var(--ink);
}
.modell-svg text { font-family: var(--font); }
.modell-svg .m-key { text-decoration: underline; }
.mz-leer { margin: 0; padding: 24px; text-align: center; color: var(--ink-3); font-size: 14.5px; }

/* Prüfliste unter der Zeichnung */
.mz-pruef { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.mz-pruef li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }
.mz-pruef li .ic { flex: none; margin-top: 2px; }
.mz-pruef li.ok .ic { color: var(--ok); }
.mz-pruef li.offen { color: var(--ink); }
.mz-pruef li.offen .ic { color: var(--bad); }
.mz-pruef em { font-style: normal; font-weight: 600; }
.mz-sql { margin: 4px 0 0; }

/* Im Skript und in Übungen */
.modell-block { margin: 1.4em 0 1.6em; }
.modell-block > .code { margin: 0; }
.modell-figur { margin: 0; }
.modell-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: var(--font); }
.modell-aktionen a.btn { text-decoration: none; }
.modell-block .mz-sql { margin-top: 12px; }
.modell-text { margin-top: 10px; font-family: var(--font); }
.modell-text > summary { cursor: pointer; width: fit-content; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.modell-text > summary:hover { color: var(--ink); }
.modell-text[open] > summary { margin-bottom: 8px; }
.modell-text > .code { margin: 0; }

@media (max-width: 720px) {
  .mz-bild, .modell-bild { padding: 8px; }
  .mz-eingabe { font-size: 13.5px; }
}
@media print {
  .mz-leiste, .modell-aktionen, .modell-text { display: none; }
  .modell-bild { overflow: visible; border: 0; padding: 0; }
  .modell-svg { width: 100%; }
}

/* ---------- Gemeinsam: Fehler melden, Meldungen, Quiz-Duell, Wochenziel, Kalender, Export (gemeinsam.js) ---------- */

/* Kurze Hinweise statt Fehlermeldungen (Vorschau ohne Server, nicht angemeldet, leer) */
.g-hinweistext { max-width: 62ch; color: var(--ink-2); font-size: 15px; }
.g-hinweistext a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* Dialog „Fehler melden“: eine Fläche mit Rahmen wie die Schnellsuche */
.g-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px 22px 20px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.g-dialog::backdrop { background: rgba(6, 10, 20, .5); }
:root[data-theme="dark"] .g-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.g-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -8px 8px 0; }
.g-dialog-titel { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.g-dialog-was { margin-bottom: 14px; font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.g-dialog-was span { font-weight: 600; color: var(--ink); }
.g-dialog p { margin-bottom: 0; }
.g-dialog .formular { gap: 14px; }
.g-gruende { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.g-gruende legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.g-grund { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; margin: 0 -8px; border-radius: var(--r-s); cursor: pointer; }
.g-grund:hover { background: var(--surface-2); }
.g-grund input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--brand); }
.g-dialog textarea {
  display: block; width: 100%; min-height: 96px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); resize: vertical;
}
.g-dialog textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.g-optional { font-weight: 400; color: var(--ink-3); }
.g-zaehler { margin-top: -8px; text-align: right; font-variant-numeric: tabular-nums; }
.g-dialog-aktionen { justify-content: flex-end; margin-top: 18px; }

/* Meldungen (Admin): Liste ohne Kästen, feine Trennlinien */
.g-werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.g-meldungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.g-meldung { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.g-meldung p { margin: 0; }
.g-meldung-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; color: var(--ink-2); }
.g-ref { font-family: var(--mono); font-size: 13px; padding: .05em .35em; background: var(--surface-3); border-radius: 3px; overflow-wrap: anywhere; }
.g-meldung-grund { font-size: 15.5px; }
.g-meldung-text { font-family: var(--serif); font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 68ch; padding-left: 14px; border-left: 2px solid var(--line-strong); }
.g-meldung-fuss { font-size: 13.5px; color: var(--ink-3); }
.g-meldung-fuss a { color: var(--brand); }
.g-meldung .aktionen { margin-top: 4px; }

/* Quiz-Duell */
.g-duelle { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.g-duell-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.g-duell-zeile p { margin: 0; }
.g-duell-text { font-size: 15px; }
.g-duell-text .fach-kachel { margin-right: 8px; vertical-align: 1px; }
.g-duell-datum { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-duell-zeile .aktionen { grid-column: 1 / -1; padding-left: 18px; }
.g-stand { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-gewonnen .g-stand { color: var(--ok); }
.g-verloren .g-stand { color: var(--bad); }
.g-duell-details { grid-column: 1 / -1; padding-left: 18px; }
.g-duell-details > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 14px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; border-radius: var(--r-s); }
.g-duell-details > summary::-webkit-details-marker { display: none; }
.g-duell-details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.g-duell-details[open] > summary::before { transform: rotate(45deg); }
.g-duell-fragen { margin: 10px 0 8px; padding-left: 1.4em; display: grid; gap: 12px; }
.g-duell-fragen li::marker { color: var(--ink-3); font-size: 14px; }
.g-frage-kurz { font-size: 15.5px; }
.g-frage-kurz > :last-child { margin-bottom: 0; }
.g-vergleich { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.g-ok, .g-nok { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.g-ok { color: var(--ok); }
.g-nok { color: var(--bad); }
.g-trenner { width: 1px; height: 14px; background: var(--line-strong); }
.g-neues-duell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; max-width: 760px; }
.g-neues-duell .formular-fehler { grid-column: 1 / -1; }
.g-neues-duell select { width: 100%; height: 40px; padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); }
.g-neues-duell + .hilfe { margin-top: 10px; }
.g-duell-info { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: -12px 0 16px; font-size: 14.5px; color: var(--ink-2); }
.g-uhr { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.g-ergebnis-satz { font-size: 16.5px; max-width: 62ch; margin-bottom: 18px; }

/* Herausforderung auf der Übersicht: Randlinie wie die Kästen im Skript */
.g-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 28px; padding: 2px 0 2px 16px; border-left: 2px solid var(--brand); }
.g-hinweis p { margin: 0; font-size: 15px; max-width: 62ch; }

/* Wochenziel */
.g-wochenziel-satz { margin-bottom: 12px; font-size: 15.5px; max-width: 62ch; }
.g-wochenziel-meter { max-width: 560px; margin-bottom: 8px; }
.g-wochenziel-meter .fortschritt { height: 6px; border-radius: 3px; }
.g-wochenziel-meter .fortschritt > span { border-radius: 3px; }
.g-wochenziel-meter .fortschritt.g-erreicht > span { background: var(--ok); }
.g-ziel-aendern { margin-top: 10px; }
.g-ziel-aendern > summary { display: inline-block; font-size: 14px; font-weight: 600; color: var(--brand); cursor: pointer; border-radius: var(--r-s); }
.g-ziel-aendern[open] > summary { margin-bottom: 10px; }

/* Formulare in einer Zeile: Feld und Knopf nebeneinander, mobil untereinander */
.g-zeile-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 14px 0; }
.g-zeile-form .formular-fehler { flex-basis: 100%; margin: 0; }
.g-zeile-form .feld { gap: 6px; }
.g-zeile-form .feld > span:first-child { font-size: 14px; font-weight: 600; }
.g-zeit .eingabe { width: 128px; font-variant-numeric: tabular-nums; }
.g-zahl { width: 140px; }

/* Kalender-Abo */
.g-kalender p, .g-export p { max-width: 64ch; }
.g-export .aktionen, .g-kalender > p + .aktionen { margin-top: 12px; }
.g-link { display: flex; gap: 8px; max-width: 640px; margin: 14px 0 12px; }
.g-link-feld { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.g-anleitung { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.g-anleitung strong { color: var(--ink); font-weight: 600; }
.g-kalender-mehr { margin-top: 6px; }
.btn.g-gefahr { color: var(--bad); }
.btn.g-gefahr:hover { background: var(--bad-soft); color: var(--bad); }

@media (max-width: 720px) {
  .g-dialog { padding: 16px 16px 18px; }
  .g-neues-duell { grid-template-columns: minmax(0, 1fr); }
  .g-neues-los .btn { width: 100%; }
  .g-duell-zeile { grid-template-columns: minmax(0, 1fr); }
  .g-duell-datum { order: -1; }
  .g-duell-info { flex-wrap: wrap; margin-top: -8px; }
  .g-link { flex-direction: column; }
  .g-link-feld { flex: none; width: 100%; }
  .g-link .btn { align-self: flex-start; }
  .g-hinweis .btn { width: auto; }
}

/* ---------- Rechentrainer (trainer.js) ---------- */
/* Aufgabenblatt wie ein Arbeitsblatt im Skript: Papierfläche, feine Linien, Buchungssatz und T-Konten in Tinte */
.tr-trainer { max-width: 900px; }
.tr-intro { max-width: 64ch; margin: -4px 0 18px; }
.tr-steuerung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px 16px; max-width: 680px; margin-bottom: 20px; }

.tr-blatt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px 28px 20px; }
.tr-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-titel { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; }
.tr-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.tr-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.tr-sitzung { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-fehler { color: var(--bad); font-weight: 600; }

/* Aufgabe (auch einzeln in der Probeklausur) */
.tr-aufgabe { container-type: inline-size; }
.tr-text { font-size: 16.5px; max-width: none; }
.tr-text > :last-child { margin-bottom: 0; }
.tr-text .table-wrap { margin: .8em 0 0; max-width: 30rem; }
.tr-form { display: grid; gap: 18px; margin-top: 18px; }

.tr-fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: tr-frage; }
.tr-frage {
  counter-increment: tr-frage; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 6px 18px; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.tr-frage:first-child { padding-top: 0; border-top: 0; }
.tr-frage-text { font-weight: 500; line-height: 1.45; }
.tr-fragen:not(.tr-einzeln) .tr-frage-text::before { content: counter(tr-frage, lower-alpha) ") "; color: var(--ink-3); font-weight: 600; }
.tr-eingabe { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-eingabe .eingabe { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; }
.tr-einheit { flex: none; min-width: 2.6em; font-size: 14.5px; color: var(--ink-2); }
.tr-rueckmeldung { grid-column: 1 / -1; font-size: 14px; }
.tr-rueckmeldung:empty { display: none; }

.tr-aufgabe .eingabe:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.tr-aufgabe .eingabe:disabled { opacity: 1; color: var(--ink); background: var(--surface-2); }
.tr-aufgabe .eingabe.ist-richtig, .tr-zeile.ist-richtig .eingabe { border-color: var(--ok); }
.tr-aufgabe .eingabe[aria-invalid="true"] { border-color: var(--bad); }
.tr-ok { color: var(--ok); font-weight: 600; }
.tr-falsch { color: var(--bad); }

/* Buchungssatz eingeben: Soll-Zeilen, „an“, Haben-Zeilen */
.tr-buchung { display: grid; gap: 6px; }
.tr-seite { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tr-seite > legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tr-zeilen { display: grid; gap: 8px; }
.tr-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 11rem) 36px; gap: 8px; align-items: center; }
.tr-zeile .tr-konto { min-width: 0; }
.tr-betrag-feld { position: relative; display: flex; align-items: center; min-width: 0; }
.tr-betrag-feld .tr-betrag { padding-right: 30px; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; }
.tr-euro { position: absolute; right: 11px; color: var(--ink-3); pointer-events: none; }
.tr-entfernen { width: 36px; height: 36px; }
.tr-zeile.ist-richtig .tr-konto { box-shadow: inset 3px 0 0 var(--ok); }
.tr-zeile.ist-falsch .tr-konto { box-shadow: inset 3px 0 0 var(--bad); }
.tr-plus { justify-self: start; margin-left: -8px; }
.tr-plus .ic { margin-right: 2px; }
.tr-seite-meldung { font-size: 14px; }
.tr-seite-meldung:empty { display: none; }
.tr-an-zeile { margin: 4px 0 2px; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-2); }

.tr-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tr-ergebnis { font-size: 15px; }
.tr-ergebnis:empty { display: none; }
.tr-ergebnis.tr-falsch { color: var(--ink); }

/* Lösung */
.tr-loesung { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tr-loesung-inhalt { display: grid; gap: 22px; }
.tr-teil-titel { margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.tr-loesungsweg { font-size: 16px; max-width: none; }
.tr-loesungsweg > :last-child { margin-bottom: 0; }

.tr-ergebnisse { display: grid; gap: 6px; margin: 0; max-width: 34rem; }
.tr-ergebnisse > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tr-ergebnisse dt { color: var(--ink-2); }
.tr-ergebnisse dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tr-buchungssatz { border-collapse: collapse; font-size: 15px; min-width: min(100%, 26rem); }
.tr-buchungssatz th { padding: 0 14px 5px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--ink-3); }
.tr-buchungssatz td { padding: 6px 14px 6px 0; vertical-align: baseline; }
.tr-buchungssatz th:last-child, .tr-buchungssatz td:last-child { padding-right: 0; }
.tr-buchungssatz tbody tr:last-child td { border-bottom: 1.5px solid var(--ink-2); }
.tr-buchungssatz .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-buchungssatz .tr-an td:first-child { padding-left: 1.4em; }
.tr-an-wort { margin-right: .4em; font-family: var(--serif); font-style: italic; color: var(--ink-2); }

.tr-tkonten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 22px 28px; }
.tr-tkonto { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; font-size: 14px; font-variant-numeric: tabular-nums; }
.tr-tkonto figcaption { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 4px; border-bottom: 1.5px solid var(--ink); }
.tr-tk-name { font-family: var(--serif); font-size: 15.5px; font-weight: 600; text-align: center; }
.tr-tk-sh { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tr-tk-seite { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 8px 2px; }
.tr-tk-seite[data-seite="soll"] { border-right: 1.5px solid var(--ink); padding-left: 2px; }
.tr-tk-seite[data-seite="haben"] { padding-right: 2px; }
/* Text links, Betrag rechts; reicht der Platz nicht, rutscht der Betrag rechtsbündig in die nächste Zeile */
.tr-tk-posten { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
.tr-tk-posten > span:first-child { min-width: 0; color: var(--ink-2); overflow-wrap: break-word; hyphens: auto; }
.tr-tk-posten .zahl { margin-left: auto; white-space: nowrap; }
.tr-tk-neu > span { color: var(--ink); font-weight: 600; }
.tr-tk-summe { margin-top: auto; padding-top: 3px; border-top: 1px solid var(--ink-3); justify-content: flex-end; font-weight: 600; }
.tr-tk-summe .zahl { border-bottom: 3px double var(--ink-3); }

/* Schmal (Handy oder enge Spalte in der Probeklausur) */
@container (max-width: 520px) {
  .tr-frage { grid-template-columns: minmax(0, 1fr); }
  .tr-zeilen { gap: 18px; }
  .tr-zeile { grid-template-columns: minmax(0, 1fr) 36px; gap: 6px 8px; }
  .tr-zeile .tr-konto { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .tr-blatt { padding: 18px 16px 16px; border-radius: var(--r-m); }
  .tr-titel { font-size: 18.5px; }
  .tr-text, .tr-loesungsweg { font-size: 16px; }
}
@media print {
  .tr-steuerung, .tr-fuss, .tr-aktionen, .tr-plus, .tr-entfernen { display: none !important; }
  .tr-blatt { border: 0; padding: 0; }
}

/* ---------- Lernplan: Plan für heute, Lesestand, Klausurbereitschaft ---------- */
.plan { margin-top: 28px; }
.plan-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plan-punkt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.plan-haken { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); }
.plan-punkt.erledigt .plan-haken { background: var(--ok-soft); color: var(--ok); }
.plan-link { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-weight: 500; }
.plan-link:hover .plan-text { text-decoration: underline; text-underline-offset: 3px; }
.plan-text { min-width: 0; overflow-wrap: anywhere; }
.plan-punkt.erledigt .plan-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.plan-min { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-leer { padding: 12px 0 4px; color: var(--ink-2); }
.plan-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.plan-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); }
.plan-budget span { margin-right: 4px; }
.chip-knopf { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.chip-knopf:hover { border-color: var(--line-strong); color: var(--ink); }
.chip-knopf.aktiv { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.plan-mehr, .plan-lob { font-size: 13.5px; color: var(--ink-3); }
.plan-lob { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.plan-lob .ic { color: var(--brand); }

.lesen-leiste { grid-column: 1; margin-bottom: 14px; }
.lesen-leiste .fortschritt { height: 3px; }
.lesen-leiste p { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.lesen-leiste.fertig .fortschritt > span { background: var(--ok); }
.lesen-leiste.fertig .ic { color: var(--ok); }
.lesen-leiste a { color: var(--brand-ink); font-weight: 500; }
@media (min-width: 1081px) {
  .doc.mit-toc .lesen-leiste { grid-row: 1; }
  .doc.mit-toc .doc-papier { grid-row: 2; }
  .doc.mit-toc .toc { grid-row: 1 / span 2; }
}
.lesen-ende { display: block; height: 1px; }
.toc li.gelesen a { color: var(--ink-3); }
.toc li.gelesen > a::after { content: " ✓"; color: var(--ok); font-weight: 600; }
.toc li.gelesen a[aria-current="true"] { color: var(--brand-ink); }

.fach-bereit { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.fach-bereit:empty { display: none; }
.bereit-ring { flex: none; }
.bereit-spur { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.bereit-wert { fill: none; stroke: var(--fach-strich, var(--brand)); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.bereit-ring text { font-size: 15px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bereit-prozent { font-size: 10px; font-weight: 500; fill: var(--ink-3); }
.bereit-text { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; max-width: 44ch; }
.bereit-text strong { color: var(--ink); font-weight: 600; }
@media (min-width: 721px) {
  .fachkopf { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
  .fachkopf .fach-kachel, .fachkopf > div:not(.fach-bereit) { grid-column: 1; }
  .fach-bereit { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}
@media (max-width: 720px) {
  .fach-bereit { padding-top: 6px; border-top: 1px solid var(--line); }
  .plan-punkt { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; }
  .plan-haken { width: 24px; height: 24px; }
  .plan-link { flex-wrap: wrap; gap: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) { .bereit-wert { transition: none; } }

/* ---------- Wissenslandkarte (landkarte.js) ---------- */
.landkarte .seitenkopf .fach-kachel { margin-bottom: 10px; }
.lk-stand { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -8px 0 18px; font-size: 15px; color: var(--ink-2); }
.lk-stand .lk-zahl { font-weight: 600; color: var(--ink); }
.lk-punkt { color: var(--ink-3); }
.lk-panel { padding: 14px 12px 12px; overflow: hidden; }
.lk-karte { min-height: 120px; }
.lk-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.lk-linie { fill: none; stroke: var(--fach-line); stroke-linecap: round; }
.lk-haupt { stroke-width: 6; }
.lk-zweig { stroke-width: 3; }
.lk-gestrichelt { stroke-dasharray: 2 7; }
.lk-knoten { cursor: pointer; outline: none; }
.lk-ring { fill: var(--surface); stroke: var(--fach-line); transition: stroke .12s ease; }
.lk-bogen { fill: none; stroke: var(--fach-strich); }
.lk-zeichen { color: var(--ink-2); }
.lk-zeichen .ic { display: block; }
.lk-neu { fill: var(--ink-3); }
.lk-stufe-sicher .lk-ring, .lk-kapitel.lk-gelesen .lk-ring { fill: var(--fach); stroke: var(--fach-strich); }
.lk-stufe-sicher .lk-zeichen, .lk-kapitel.lk-gelesen .lk-zeichen { color: #FFFFFF; }
.lk-stufe-wackelt .lk-zeichen { color: var(--bad); }
.lk-weitere .lk-ring { stroke-dasharray: 3 4; }
.lk-knoten:hover .lk-ring, .lk-knoten[aria-expanded="true"] .lk-ring { stroke: var(--fach-strich); }
.lk-knoten:hover .lk-text, .lk-knoten:hover .lk-kapitel-text, .lk-knoten[aria-expanded="true"] .lk-text, .lk-knoten[aria-expanded="true"] .lk-kapitel-text { fill: var(--brand); }
.lk-knoten:focus-visible .lk-ring { stroke: var(--brand); stroke-width: 4; }
.lk-text { font-size: 13px; fill: var(--ink-2); }
.lk-kapitel-text { font-family: var(--serif); font-size: 14px; font-weight: 600; fill: var(--ink); }
.lk-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 12px 0 0; padding: 10px 6px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.lk-legende li { display: inline-flex; align-items: center; gap: 7px; }
.lk-mini { flex: none; display: block; }
.lk-mini .lk-ring { stroke-width: 3; }
.lk-legende li:nth-child(4) .lk-ring { fill: var(--fach); stroke: var(--fach-strich); }
.lk-legende li:nth-child(4) .lk-zeichen { color: #FFFFFF; }
.lk-legende li:nth-child(2) .lk-zeichen { color: var(--bad); }
.lk-pop {
  position: absolute; z-index: 70; width: min(360px, calc(100vw - 24px)); padding: 14px 16px 14px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-2);
}
.lk-pop:focus { outline: none; }
.lk-pop:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 2px; }
.lk-pop-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 6px; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.lk-pop-text { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lk-pop-liste { margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lk-pop-unter { margin-top: 8px; }
.lk-pop-unter li { display: flex; align-items: center; gap: 8px; }
.lk-pop-unter li .ic { color: var(--ink-3); }
.lk-pop-unter li.gelesen .ic { color: var(--ok); }
.lk-pop-aktionen { justify-content: flex-start; margin-top: 12px; }
.lk-chip-neu { background: var(--surface-3); color: var(--ink-2); }
.lk-chip-wackelt { background: var(--bad-soft); color: var(--bad); }
.lk-chip-fast { background: var(--brand-soft); color: var(--brand-ink); }
.lk-chip-sicher { background: var(--ok-soft); color: var(--ok); }

/* ---------- Abzeichen (abzeichen.js) ---------- */
.abzeichen-raster { list-style: none; margin: 0; padding: 8px 20px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 24px; }
.abzeichen-karte { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.abzeichen-icon { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.abzeichen-karte.offen .abzeichen-icon { background: var(--surface-3); color: var(--ink-3); }
.abzeichen-karte.offen .abzeichen-text strong { color: var(--ink-2); }
.abzeichen-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; line-height: 1.45; }
.abzeichen-text strong { font-size: 14.5px; color: var(--ink); }
.abzeichen-text small { font-size: 12.5px; color: var(--ink-3); }
.abzeichen-text span:empty { display: none; }
.abzeichen-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.abzeichen-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.abzeichen-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.abzeichen-chip .abzeichen-icon { width: 20px; height: 20px; background: transparent; color: inherit; }
.abzeichen-alle { font-size: 13.5px; }
.abzeichen-feier {
  position: fixed; right: 24px; bottom: 24px; z-index: 65; width: min(380px, calc(100% - 32px)); padding: 12px 14px 12px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-left: 4px solid var(--brand); border-radius: var(--r-m); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.abzeichen-feier.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.feier-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.feier-kopf .ic { color: var(--brand); }
.feier-zu { margin-left: auto; width: 32px; height: 32px; }
.feier-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.feier-liste li { display: flex; gap: 10px; align-items: flex-start; }
.feier-liste strong { color: var(--ink); }
.feier-icon { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.feier-mehr { margin-top: 8px; font-size: 13.5px; }
.konfetti { position: fixed; inset: 0; z-index: 64; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 640px) {
  .lk-panel { padding: 10px 6px 10px; }
  .lk-legende { gap: 6px 12px; padding-left: 4px; }
  .abzeichen-raster { grid-template-columns: 1fr; padding: 4px 16px 8px; }
  .abzeichen-feier { right: 12px; left: 12px; bottom: auto; top: calc(var(--topbar) + 10px); width: auto; transform: translateY(-12px); }
}
@media print {
  .abzeichen-feier, .konfetti, .lk-pop { display: none !important; }
}

/* ---------- Hören und Tippen (Karteikarten) ---------- */
.tipp-schalter { font-size: 14.5px; }
.tipp-schalter span { display: inline-flex; align-items: center; gap: 8px; }
.tipp-schalter .ic { color: var(--ink-3); }
.lern-optionen .btn + .btn { margin-top: -6px; }
.lern-optionen .btn .ic { margin-right: 8px; }

/* Tippmodus: Textfeld auf der Vorderseite */
.karte.tipp { cursor: default; }
.karte.tipp .vorne .seite-text { flex: 0 1 auto; padding-bottom: 14px; }
.tipp-form { margin-top: auto; display: grid; gap: 10px; text-align: left; }
.tipp-form textarea {
  display: block; width: 100%; min-height: 64px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); resize: vertical;
}
.tipp-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.tipp-knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tipp-knoepfe .btn.primary { min-height: 44px; }

/* Rückseite nach dem Prüfen: Bilanz und markierte Schlüsselbegriffe */
.tipp-bilanz { display: grid; gap: 6px; padding: 10px 0 2px; font-size: 14px; color: var(--ink-2); }
.tipp-zahl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.tipp-zahl .ic { color: var(--ink-3); }
.tipp-zahl.gut, .tipp-zahl.gut .ic { color: var(--ok); }
.tipp-eigene { font-family: var(--serif); font-style: italic; }
.tipp-eigene span { font-family: var(--font); font-style: normal; font-weight: 600; color: var(--ink-3); }
.tipp-legende { display: flex; gap: 10px; font-size: 13px; }
mark.tipp-treffer, mark.tipp-fehlt { padding: 0 .1em; border-radius: 2px; background: transparent; color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
mark.tipp-treffer { background: var(--ok-soft); text-decoration: underline var(--ok); }
mark.tipp-fehlt { text-decoration: underline dotted var(--ink-3); }
.antworten .btn.vorschlag { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 28%, transparent); }
.antwort-ja.vorschlag { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }

/* Hörmodus */
.hoer-karte { position: relative; display: grid; gap: 12px; }
.hoer-karte.kommt { animation: hoer-kommt .28s ease-out; }
@keyframes hoer-kommt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hoer-seite {
  --seite-x: 30px;
  padding: 16px var(--seite-x) 22px; background: var(--karte); border: 1px solid var(--line-strong); border-radius: 4px;
  box-shadow: var(--shadow-karte); transition: box-shadow .2s ease, border-color .2s ease;
}
.hoer-seite.spricht { border-color: var(--brand); box-shadow: var(--shadow-karte), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.hoer-hinten .seite-kopf { margin: 0 calc(-1 * var(--seite-x)); padding: 0 var(--seite-x) 10px; border-bottom: 1.5px solid var(--karte-rot); }
.hoer-text { padding: 16px 0 4px; font-family: var(--serif); }
.hoer-vorne .hoer-text { font-size: 22px; line-height: 1.42; text-align: center; }
.hoer-hinten .hoer-text {
  font-size: 17px; line-height: 28px; padding-top: 12px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--karte-linie) 27px 28px);
  background-position: 0 6px; background-repeat: no-repeat;
}
.hoer-text > :first-child { margin-top: 0; }
.hoer-text > :last-child { margin-bottom: 0; }
.hoer-hinten .hoer-text p, .hoer-hinten .hoer-text ul, .hoer-hinten .hoer-text ol { margin-bottom: 0; }
.hoer-text .code, .hoer-text .table-wrap { text-align: left; }
.hoer-ende .hoer-text { text-align: center; font-size: 19px; }
.hoer-status { margin-top: 18px; min-height: 1.5em; text-align: center; font-size: 14px; color: var(--ink-2); }
.hoer-steuerung { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 12px; margin-top: 10px; align-items: center; }
.hoer-rund { height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
.hoer-haupt { height: 52px; font-size: 16px; }
.hoer-haupt .ic { margin-right: 10px; }
.ic.spiegel { transform: scaleX(-1); }
.hoer-nebenknoepfe { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hoer-antworten { margin-top: 20px; }
.hoer-einstellungen {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 20px; align-items: end;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
}
.hoer-einstellungen .feld:last-child { grid-column: 1 / -1; }
.hoer-einstellungen output { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.hoer-einstellungen input[type="range"] { width: 100%; accent-color: var(--brand); height: 40px; margin: 0; }
.hoer-hinweis { margin-top: 14px; }
.hoeren .tastatur-hinweis { margin-top: 12px; }
@media (max-width: 720px) {
  .hoer-seite { --seite-x: 18px; padding: 14px var(--seite-x) 18px; }
  .hoer-vorne .hoer-text { font-size: 19px; }
  .hoer-einstellungen { grid-template-columns: minmax(0, 1fr); }
  .hoer-steuerung { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px; }
  .hoer-rund { height: 48px; }
  .tipp-knoepfe .btn.ghost { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hoer-karte.kommt { animation: none; }
}

.bereit-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--brand-ink); }
.bereit-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Quiz-Abend (livequiz.js) ---------- */
.lq-offen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 28px; padding: 2px 0 2px 16px; border-left: 2px solid var(--brand); }
.lq-offen p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; max-width: 62ch; }
.lq-offen .ic { flex: none; margin-top: 2px; color: var(--brand); }
.lq-code-klein { font-family: var(--mono); font-weight: 600; letter-spacing: .08em; }
.lq-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.lq-start .abschnitt { margin-top: 0; }
.lq-form { display: grid; gap: 14px; max-width: 420px; }
.lq-form-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lq-form-los .btn { display: inline-flex; align-items: center; gap: 8px; }
.lq-code-eingabe { max-width: 180px; font-family: var(--mono); font-size: 20px; letter-spacing: .18em; text-transform: uppercase; }
.lq-verlauf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lq-verlauf li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lq-verlauf-datum { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lq-verlauf-text .chip { margin-right: 6px; vertical-align: 1px; }

/* Im Raum */
.lq-raum { max-width: 760px; margin: 0 auto; }
.lq-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lq-kopf-code { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.lq-beenden-frage { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.lq-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.lq-aktionen .btn { display: inline-flex; align-items: center; gap: 8px; }
.lq-aktionen .hilfe { width: 100%; margin: 0; }

/* Lobby */
.lq-lobby { padding: 28px 30px 26px; text-align: center; }
.lq-lobby-ueber { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.lq-code { display: flex; justify-content: center; gap: 8px; margin: 10px 0 16px; font-family: var(--mono); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: 0; user-select: all; }
.lq-code span { display: grid; place-items: center; min-width: 1.4em; padding: 12px 0; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.lq-teilen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lq-teilen .btn { display: inline-flex; align-items: center; gap: 6px; }
.lq-lobby-titel { margin: 28px 0 10px; font-size: 15.5px; font-weight: 600; }
.lq-spieler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lq-spieler li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14.5px; }
.lq-spieler li.ich { border-color: var(--brand); background: var(--brand-soft); }
.lq-spieler li .ic { color: var(--ink-3); }
.lq-spieler li small { margin-left: 2px; color: var(--ink-3); font-size: 12.5px; }
.lq-lobby-info { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.lq-lobby .lq-aktionen { justify-content: center; }
.lq-lobby .lq-aktionen .hilfe { text-align: center; }
.lq-warten { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 15px; color: var(--ink-2); }
.lq-warten .ic { color: var(--ink-3); }

/* Countdown */
.lq-countdown { padding: 40px 30px; text-align: center; }
.lq-countdown-text { margin: 0; font-size: 15px; color: var(--ink-2); }
.lq-countdown-zahl { margin: 4px 0 10px; font-family: var(--serif); font-size: 96px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

/* Frage */
.lq-session-kopf { margin-bottom: 16px; }
.lq-session-kopf .session-zahl { text-align: left; min-width: 0; }
.lq-punkte-ich { font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lq-zeit { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lq-zeit-balken { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.lq-zeit-balken span { display: block; height: 100%; border-radius: 4px; background: var(--brand); transition: width .2s linear; }
.lq-zeit-text { min-width: 2.2em; text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lq-frage { padding: 24px 26px; }
.lq-optionen .option { min-height: 52px; padding: 13px 14px; font-size: 16px; }
.lq-optionen .option:disabled:not(.gewaehlt):not(.ist-richtig):not(.ist-falsch) { opacity: .7; }
.lq-frage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.lq-frage-stand { margin: 0; font-size: 14px; color: var(--ink-3); }

/* Auswertung */
.lq-auswertung .lq-optionen li { display: grid; gap: 4px; }
.lq-verteilung { display: flex; align-items: center; gap: 10px; margin: 2px 4px 4px; }
.lq-verteilung-balken { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.lq-verteilung-balken span { display: block; height: 100%; border-radius: 3px; background: var(--ink-3); opacity: .55; }
.lq-verteilung.richtig .lq-verteilung-balken span { background: var(--ok); opacity: .85; }
.lq-verteilung em { flex: none; min-width: 5.5em; text-align: right; font-style: normal; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lq-urteil { margin-top: 18px; }
.lq-urteil p { margin: 0 0 10px; }
.lq-erklaerung { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.lq-zwischenstand { margin-top: 20px; }
.lq-rangliste { list-style: none; margin: 0; padding: 4px 20px 6px; }
.lq-rangliste li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.lq-rangliste li:first-child { border-top: 0; }
.lq-rangliste li.ich { font-weight: 600; }
.lq-rang-platz { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lq-rang-name { overflow-wrap: anywhere; }
.lq-rang-punkte { font-variant-numeric: tabular-nums; }

/* Ende: Siegertreppchen */
.lq-ende { padding: 26px 26px 24px; }
.lq-ende-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.lq-ende-titel .ic { color: var(--brand); }
.lq-podium { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; align-items: end; max-width: calc(var(--n, 3) * 210px); }
.lq-podium li { display: grid; gap: 4px; justify-items: center; padding: 16px 10px 14px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.lq-podium li.platz-1 { padding-top: 30px; border-color: var(--brand); background: var(--brand-soft); }
.lq-podium li.platz-2 { padding-top: 22px; }
.lq-podium li.ich .lq-podium-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand); }
.lq-podium-platz { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.lq-podium li.platz-1 .lq-podium-platz { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.lq-podium-name { font-weight: 600; overflow-wrap: anywhere; }
.lq-podium-punkte { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lq-ende-ich { margin: 20px 0 0; font-size: 15.5px; }
.lq-rangliste-rest { margin-top: 10px; padding: 0; }

/* Hinweis auf der Übersicht */
.lq-hinweis p { display: flex; align-items: flex-start; gap: 10px; }
.lq-hinweis .ic { flex: none; margin-top: 2px; color: var(--brand); }

@media (max-width: 720px) {
  .lq-start { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lq-start .abschnitt + .abschnitt { margin-top: 40px; }
  .lq-form { max-width: none; }
  .lq-form-los .btn { width: 100%; justify-content: center; }
  .lq-code-eingabe { max-width: none; }
  .lq-verlauf li { grid-template-columns: minmax(0, 1fr); }
  .lq-lobby { padding: 24px 16px 22px; }
  .lq-code { font-size: 36px; gap: 6px; }
  .lq-frage { padding: 18px 16px; }
  .lq-ende { padding: 20px 16px; }
  .lq-countdown-zahl { font-size: 80px; }
  .lq-aktionen .btn { flex: 1 1 auto; justify-content: center; }
  .lq-podium { gap: 6px; }
  .lq-podium li { padding: 12px 6px 10px; }
  .lq-offen .btn { width: auto; }
}
@media (max-width: 360px) {
  .lq-code { font-size: 30px; }
  .lq-podium { grid-template-columns: minmax(0, 1fr); }
  .lq-podium li { order: 0 !important; }
  .lq-podium li.platz-1, .lq-podium li.platz-2 { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lq-zeit-balken span { transition: none; }
}

/* ---------- Erinnerung aufs Handy (push.js) ---------- */
/* Nutzt die Bausteine des Kalender-Abos (.g-zeile-form, .g-zeit, .g-anleitung, .g-gefahr). */
.p-push p { max-width: 64ch; }
.p-push .p-zeit .eingabe { width: 148px; }
.p-push-mehr { margin: 4px 0 12px; }
.p-push .hilfe { margin-top: 8px; }
.p-push .hilfe + .hilfe { margin-top: 4px; }

.lk-treffer { fill: none; pointer-events: all; }

/* ---------- ML-Labor (mllabor.js) ---------- */
/* Grafiken wie Abbildungen im Skript: feines Gitter, Tinte für Modelle, Blau und Ocker für die zwei Klassen,
   Formen (Kreis, Quadrat, Dreieck …) tragen die Information zusätzlich zur Farbe. */
.ml {
  --ml-a: var(--brand); --ml-b: #B8601A;
  --ml-k0: var(--brand); --ml-k1: #B8601A; --ml-k2: #2B7A4B; --ml-k3: #7A3E9D; --ml-k4: #1C7C8C; --ml-k5: #B0366E;
  max-width: 1000px;
}
:root[data-theme="dark"] .ml { --ml-b: #F0A869; --ml-k1: #F0A869; --ml-k2: #6DBE8D; --ml-k3: #C79BE0; --ml-k4: #6FC7D6; --ml-k5: #EE8FBE; }
.ml-anleitung { max-width: 66ch; margin-bottom: 14px; font-size: 14.5px; color: var(--ink-2); }

/* Stationswahl: wie die Werkzeugwahl, mit Nummern */
.ml-stationen { display: flex; gap: 4px; margin: 0 0 24px; padding-bottom: 1px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ml-stationen::-webkit-scrollbar { display: none; }
.ml-stationen button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 10px 10px; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.ml-stationen button:hover { color: var(--ink); }
.ml-stationen button[aria-current="page"] { color: var(--ink); font-weight: 600; }
.ml-stationen button[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--brand); }
.ml-stationen button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-s); }
.ml-nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ml-stationen button[aria-current="page"] .ml-nr { background: var(--brand); color: var(--on-brand); }
.ml-stationen .kurz { display: none; }

/* Station: Einführung, Grafik + Seite, darunter R und Aufgaben */
.ml-intro { max-width: 70ch; margin-bottom: 18px; }
.ml-intro h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.25; }
.ml-intro p { font-size: 15.5px; }
.ml-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 20px 28px; align-items: start; }
.ml-grafik { margin: 0; min-width: 0; }
.ml-svg { position: relative; }
.ml-plot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.ml-seite { min-width: 0; display: grid; gap: 14px; align-content: start; }
.ml-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ml-unten h3, .ml-h4 { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; }
.ml-h4 { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.ml-r, .ml-probier { min-width: 0; }
.ml-code { margin: 0; }
.ml-code pre { font-size: 13px; }
.ml-code code { font-size: 13px; }
.ml-probier .callout { margin-top: 0; }

/* Koordinatensystem */
.ml-gitter line { stroke: var(--line); stroke-width: 1; }
.ml-achsen line { stroke: var(--line-strong); stroke-width: 1; }
.ml-achsen text { font: 12px var(--font); fill: var(--ink-3); }
.ml-achsen .ml-titel { font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
.ml-titel-klein { font: 500 12px var(--font); fill: var(--ink-2); }

/* Punkte: Blau = Klasse 0, Ocker = Klasse 1; hohl = Testdaten oder Fehler */
.ml-punkt { fill: var(--ml-a); stroke: var(--surface); stroke-width: 1.2; }
.ml-punkt[data-i] { cursor: grab; touch-action: none; }
.ml-punkt[data-i]:active { cursor: grabbing; }
.ml-c0 { fill: var(--ml-a); }
.ml-c1 { fill: var(--ml-b); }
.ml-punkt.ml-c0, g.ml-c0 .ml-punkt { fill: var(--ml-a); }
.ml-punkt.ml-c1 { fill: var(--ml-b); }
.ml-punkt.hohl { fill: var(--surface); stroke-width: 2; }
.ml-punkt.ml-c0.hohl { stroke: var(--ml-a); }
.ml-punkt.ml-c1.hohl { stroke: var(--ml-b); }
.ml-punkt.gewaehlt { stroke: var(--ink); stroke-width: 2.5; }
.ml-rest line { stroke: var(--bad); stroke-width: 1.3; stroke-dasharray: 3 3; }
.ml-rest path { stroke: var(--bad); stroke-width: 1.6; fill: none; }
.ml-gerade { stroke: var(--ink); stroke-width: 2.2; }
.ml-gerade-gd { stroke: var(--ml-b); stroke-width: 2; stroke-dasharray: 7 4; }
.ml-grenze { stroke: var(--ink); stroke-width: 2; }
/* Deckkraft auf der Gruppe, nicht je Zelle: sonst zeichnen sich die Überlappungen als Gitter ab */
.ml-raster-flaeche { opacity: .16; }
.ml-raster-flaeche .ml-f0 { fill: var(--ml-a); }
.ml-raster-flaeche .ml-f1 { fill: var(--ml-b); }
.ml-kurve { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ml-wahr { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 6 4; }

/* k-Means */
.ml-k0 { fill: var(--ml-k0); color: var(--ml-k0); }
.ml-k1 { fill: var(--ml-k1); color: var(--ml-k1); }
.ml-k2 { fill: var(--ml-k2); color: var(--ml-k2); }
.ml-k3 { fill: var(--ml-k3); color: var(--ml-k3); }
.ml-k4 { fill: var(--ml-k4); color: var(--ml-k4); }
.ml-k5 { fill: var(--ml-k5); color: var(--ml-k5); }
.ml-unzugeordnet { fill: var(--ink-3); opacity: .75; }
.ml-zuordnung line { stroke: var(--ink-3); stroke-width: 1; opacity: .35; }
.ml-zentrum { cursor: grab; touch-action: none; }
.ml-zentrum path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; paint-order: stroke; }
.ml-zentrum circle { fill: var(--surface); fill-opacity: .001; stroke: currentColor; stroke-width: 1.5; opacity: .7; }
.ml-legende .ml-zentrum path { stroke-width: 2.5; }
.ml-legende .ml-zentrum { color: var(--ink); }
.ml-legende .ml-rest path { stroke: var(--bad); }

/* Modellgüte */
.ml-schwelle { stroke: var(--ink); stroke-width: 2; }
.ml-schwelle-flaeche { fill: var(--ml-b); opacity: .08; }
.ml-schwelle-text { font: 12.5px var(--font); font-weight: 600; fill: var(--ink-2); }
.ml-mitte { stroke: var(--line-strong); stroke-width: 1; }
.ml-guete-werte { display: grid; gap: 14px; }
.ml-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.ml-matrix th { padding: 2px 4px; font-weight: 500; color: var(--ink-3); text-align: left; line-height: 1.25; }
.ml-matrix thead th { text-align: center; vertical-align: bottom; }
.ml-matrix td { padding: 8px 6px; border-radius: var(--r-s); text-align: center; line-height: 1.2; }
.ml-matrix td strong { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-matrix td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.ml-tp, .ml-tn { background: var(--ok-soft); }
.ml-fp, .ml-fn { background: var(--bad-soft); }

/* Kleine Diagramme (Kostenverlauf, Ellbogen, ROC, Fehlerkurven) */
.ml-mini { max-width: 320px; }
.ml-mini-svg { display: block; width: 100%; height: auto; }
.ml-roc { max-width: 280px; }
.ml-mini-achse { stroke: var(--line-strong); stroke-width: 1; }
.ml-mini-linie { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.ml-mini-linie.test { stroke: var(--ml-b); }
.ml-mini-linie.cv { stroke: var(--ok); stroke-dasharray: 4 3; }
.ml-mini-diagonale { stroke: var(--line-strong); stroke-dasharray: 4 3; }
.ml-mini-marke { stroke: var(--due-line); stroke-width: 3; }
.ml-mini-punkt { fill: var(--brand); }
.ml-mini-punkt.aktuell { fill: var(--ml-b); stroke: var(--surface); stroke-width: 2; }
.ml-mini-text { font: 11px var(--font); fill: var(--ink-3); }

/* Seitenleiste: Regler, Kennzahlen, Knöpfe */
.ml-regler { display: grid; gap: 4px; }
.ml-regler-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; }
.ml-regler output { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ml-regler input[type="range"] { width: 100%; margin: 0; accent-color: var(--brand); }
.ml-kennzahlen { display: grid; gap: 10px; margin: 0; }
.ml-kennzahlen.zweispaltig { grid-template-columns: 1fr 1fr; }
.ml-kennzahl dt { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ml-kennzahl dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ml-kennzahl small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ml-formel { font-family: var(--serif); font-style: italic; font-size: 15.5px; }
.ml-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ml-aktion-label { font-size: 13.5px; color: var(--ink-2); }
.ml-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.ml-schalter input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.ml-hinweis { font-size: 13.5px; color: var(--ink-2); }
.ml-urteil { font-size: 14px; color: var(--ink-2); margin: 0; }
.ml-segment { justify-self: start; display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-m); overflow: hidden; }
.ml-segment label { position: relative; }
.ml-segment input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.ml-segment span { display: block; padding: 7px 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.ml-segment label + label span { border-left: 1px solid var(--line-strong); }
.ml-segment input:checked + span { background: var(--brand); color: var(--on-brand); }
.ml-segment input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -3px; }
.ml-segment.klein span { padding: 4px 9px; font-size: 13px; }
.ml-details { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 14px; }
.ml-details > summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; font-size: 14.5px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; }
.ml-details > summary::-webkit-details-marker { display: none; }
.ml-details > summary .ic { transition: transform .15s ease; }
.ml-details[open] > summary .ic { transform: rotate(180deg); }
.ml-details-body { display: grid; gap: 12px; padding: 2px 0 14px; }
.ml-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.ml-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ml-legende svg { flex: none; overflow: visible; }
.ml-legende .hohl { fill: var(--surface); stroke-width: 2; }
.ml-legende .ml-c0.hohl { stroke: var(--ml-a); }
.ml-legende .ml-c1.hohl { stroke: var(--ml-b); }

@media (prefers-reduced-motion: reduce) { .ml-details > summary .ic { transition: none; } }
@media (max-width: 900px) {
  .ml-raster, .ml-unten { grid-template-columns: minmax(0, 1fr); }
  .ml-stationen { gap: 0; }
}
@media (max-width: 560px) {
  .ml-stationen .lang { display: none; }
  .ml-stationen .kurz { display: inline; }
  .ml-intro h3 { font-size: 20px; }
  .ml-kennzahlen.zweispaltig { grid-template-columns: 1fr 1fr; }
  .ml-matrix { font-size: 12px; }
  .ml-matrix td strong { font-size: 18px; }
}

.fach-modul { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.fach-modul a { color: var(--brand-ink); }
.fach-modul a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- App-Hinweis (neue Version) ---------- */
.app-hinweis {
  position: fixed; left: 16px; bottom: 16px; z-index: 65; display: grid; gap: 10px; max-width: min(420px, calc(100% - 32px));
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-2);
}
.app-hinweis[hidden] { display: none; }
.app-hinweis p { font-size: 14.5px; }

/* ---------- Meldung ---------- */
#toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; max-width: min(420px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-m);
  background: var(--ink); color: var(--bg); font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast[data-kind="fehler"] { background: var(--bad); color: #FFFFFF; }

/* ---------- Mittlere Breiten: Seitenleiste als Schublade ---------- */
@media (max-width: 1080px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .doc-papier, .lesen-leiste { grid-row: auto; }
  .toc { grid-column: 1; grid-row: auto; position: static; max-height: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
  .toc summary { cursor: pointer; padding: 2px 0; color: var(--ink-2); }
  .toc[open] summary { padding-bottom: 10px; }
}
@media (max-width: 1000px) {
  .haupt { margin-left: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-2); }
  .sidebar.offen { transform: translateX(0); }
  .sidebar .sb-zu, .topbar .menu-btn { display: inline-grid; }
  .topbar .marke-mobil { display: inline-flex; }
  .topbar { padding: 0 16px; gap: 8px; }
  main { padding: 24px 24px 64px; }
  .lern-raster, .quiz-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lern-optionen, .quiz-optionen { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .suche-knopf { display: none; }
  .topbar .suche-mobil { display: inline-grid; }
  main { padding: 20px 16px 56px; }
  .seitentitel { font-size: 28px; }
  .abschnitt { margin-top: 40px; }
  .stand { font-size: 16px; }
  .doc-papier { padding: 4px 0 0; background: transparent; border: 0; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 21px; }
  .konto-name { display: none; }
  .konto-link { padding: 0 4px; }
  .einstellung { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  .admin-formulare { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf .btn { width: 100%; }

  /* Tabellen als gestapelte Zeilen */
  .tabelle-stapel thead { display: none; }
  .tabelle-stapel, .tabelle-stapel tbody, .tabelle-stapel tr, .tabelle-stapel td { display: block; width: 100%; }
  .tabelle-stapel tr { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
  .tabelle-stapel tr:last-child { border-bottom: 0; }
  /* ohne Kasten: Zeilen bündig mit dem Abschnittstitel, die eigene Zeile bekommt etwas Luft */
  .abschnitt .tabelle-wrap { overflow: visible; }
  .abschnitt .tabelle-stapel tr { padding-left: 0; padding-right: 0; }
  .abschnitt .tabelle-stapel tr.rang-ich { width: auto; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 3px; box-shadow: none; }
  .tabelle-stapel td { padding: 0; border: 0; }
  .tabelle-stapel td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
  .tabelle-stapel .zeile-voll { grid-column: 1 / -1; }
  .tabelle-stapel td.nur-breit { display: none; }
  .tabelle-stapel .rechts { text-align: left; }
  .tabelle-stapel tbody tr:hover td { background: transparent; }
  .fach-zelle { min-width: 0; }
  .spalte-fortschritt { min-width: 0; }
  .rang-punkte { min-width: 0; }

  .seite, .session .seite { --seite-x: 18px; min-height: 260px; padding: 16px var(--seite-x) 18px; }
  .vorne .seite-text { font-size: 19.5px; }
  .hinten .seite-text { font-size: 16px; }
  .kasten { gap: 6px; margin-top: 18px; }
  .kasten-fach { height: 86px; padding: 7px 8px; }
  .kasten-n { font-size: 16px; }
  .kal { --zelle: 14px; --luecke: 3px; --wt: 20px; }
  .kal-legende { padding-top: 12px; gap: 8px 16px; }
  .pal { top: 10px; max-height: calc(100dvh - 20px); }
  .pal-haupt { white-space: normal; }
  .frage { padding: 18px; }
  .schwach-zeile { grid-template-columns: minmax(0, 1fr); }
  .schwach-aktionen { justify-content: flex-start; }
  .klausur-kopf { gap: 10px; }
  .klausur-uhr { font-size: 18px; }
  .komp-begriffe { columns: 1; }
  .frage-text { font-size: 17px; }
  #toast { right: 16px; left: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 480px) {
  .tab { padding: 10px 9px 12px; gap: 6px; font-size: 14px; }
  .tab .ic { display: none; }
  .tab .lang { display: none; }
  .tab .kurz { display: inline; }
  .tab-zahl { display: none; }
  .fachkopf { gap: 12px; }
  .kasten-name .lang { display: none; }
  .kasten-name .kurz { display: inline; }
}

/* Auf Touch-Geräten ohne Tastatur sind Tastenhinweise nur Rauschen */
@media (hover: none) and (pointer: coarse) {
  .tastatur-hinweis, .btn kbd, .suche-tasten, .pal-fuss, .pal-los, .pal-zu kbd { display: none; }
  .pal-zu .ic { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .kasten-fach.landet::after { display: none; }
}

@media print {
  .sidebar, .topbar, .tabs, .toc, .code-copy, .doc-fuss, .krume, .app-hinweis, #toast { display: none !important; }
  .kompendium .seitenkopf .btn, .komp-quelle { display: none !important; }
  .komp-begriffe { columns: 2; }
  .kompendium .seitentitel { font-size: 22pt; }
  .kompendium .abschnitt { margin-top: 18pt; }
  .kompendium .prose, .komp-begriffe dd, .komp-liste { font-size: 10pt; }
  .haupt { margin: 0; }
  body { background: #FFFFFF; }
  .panel { border: 0; box-shadow: none; }
  .doc-papier { padding: 0; }
  .loesung-body { display: block !important; }
}