/* 4one LMS – Design-System „SONBAY & 4one“ (Standardvorlage seit v1.11)
   Gleiche Gestaltung wie sonbay-elearning.com: Weiss trägt, Farbe ordnet, Schwarz handelt.
   Drei Farben nach dem Blended-Learning-Prinzip des Logos:
     --sky  = digital (E-Learning, SCORM, online)   --sun = persönlich (Präsenz, Trainer)
     --mint = Lernen & Mensch (Fortschritt, Lernpfade, Zertifikate)
   Die Kundenmarke steuert --brand (= Akzent), Ecken-Stil, Schrift, Navigation, Knopf-Stil und Farbcode.
   Die frühere Vorlage „Petrol“ bleibt über data-look="petrol" wählbar. Alles lokal, keine externen Aufrufe. */

@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/assets/fonts/atkinson-next.woff') format('woff'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/assets/fonts/atkinson-next-italic.woff') format('woff'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora.woff') format('woff'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-Bold.woff') format('woff'); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: light;
  /* Flächen */
  --canvas: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F9F6; --fill: #F2F5F0; --fill-2: #E8EDE5;
  --mint: #EBF7E3; --mint-2: #D9EFCB; --sky: #D3E5F0; --sun: #FCE8AC;
  --line: #E1E6DF; --line-2: #EBEFE9;
  /* Text */
  --ink: #1D1D1B; --muted: #55605A; --on-ink: #FFFFFF;
  --ink-2: #3B443F; --ink-3: var(--muted); --ink-4: #8C968F;
  /* Akzente (alle mind. 4,5 : 1 auf Weiss und auf ihrer Fläche) */
  --accent: var(--brand); --accent-strong: #1F5C38; --on-accent: #FFFFFF;
  --blue-deep: #1C5A86; --sun-deep: #7A5600; --coral: #B94A35; --coral-tint: #FBE6E0; --coral-ink: #A8412E; /* Koralle-Text auf Koralle-Tönung (5:1) */
  /* Nur Logo, Punkte, Fortschritt, Deko */
  --logo-blue: #9CC6E0; --logo-yellow: #F7D46A; --logo-green: #5FAE74;
  /* Marke (Hauptfarbe des Mandanten = Akzent; wird von der App gesetzt) */
  --brand: #2A7449; --brand-ink: #FFFFFF; --accent-2: var(--logo-yellow);
  --brand-hover: var(--accent-strong);
  --brand-soft: var(--mint);
  --brand-soft-2: color-mix(in srgb, var(--mint) 55%, var(--surface));
  --brand-line: color-mix(in srgb, var(--brand) 35%, var(--surface));
  --brand-deep: var(--accent-strong);
  --link: var(--accent);
  --bar: var(--logo-green);
  /* Knöpfe: Schwarz handelt */
  --btn-bg: var(--ink); --btn-ink: var(--on-ink); --btn-hover: var(--accent); --btn-hover-ink: var(--on-accent);
  /* Status (warm, ruhig) */
  --ok: var(--accent); --ok-mark: var(--logo-green); --ok-soft: var(--mint);
  --warn: var(--sun-deep); --warn-mark: var(--logo-yellow); --warn-soft: var(--sun);
  --bad: var(--coral-ink); --bad-mark: var(--coral); --bad-soft: var(--coral-tint); --info-soft: var(--sky);
  /* Typografie */
  --font: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: var(--font);
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --track-display: -0.02em;
  /* Form: eckig – rund sind nur Punkte, Avatare, Pillen und Fortschrittskreise */
  --r: 0px; --r-btn: 0px; --r-chip: 0px; --radius: var(--r); --radius-round: 999px;
  /* Tiefe: weiche, leicht grün getönte Schatten */
  --sh-1: 0 1px 2px rgba(29,45,34,.06), 0 4px 12px rgba(29,45,34,.06);
  --sh-2: 0 2px 4px rgba(29,45,34,.06), 0 12px 28px rgba(29,45,34,.10);
  --sh-3: 0 4px 8px rgba(29,45,34,.07), 0 24px 56px rgba(29,45,34,.16);
  --lift: cubic-bezier(.2,.7,.2,1);
  --shadow-pop: var(--sh-2), 0 0 0 1px var(--line);
  --backdrop: rgba(29,29,27,.35);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --sidebar-w: 272px; --topbar-h: 72px;
  --side-bg: var(--surface); --side-ink: var(--ink); --side-ink-2: var(--muted); --side-icon: var(--muted); --side-hover: var(--fill);
  --side-active-bg: var(--mint); --side-active-ink: var(--ink); --side-active-icon: var(--accent); --side-active-bar: var(--accent); --side-line: var(--line);
}
/* Eigene Hauptfarbe: Tönungen und Akzente aus der Marke ableiten (Standardgrün behält die exakten Werte) */
:root[data-tint='brand'] { --mint: color-mix(in srgb, var(--brand) 11%, white); --mint-2: color-mix(in srgb, var(--brand) 21%, white); --accent-strong: color-mix(in srgb, var(--brand) 78%, black); --bar: var(--brand); }
/* Farbcode digital/persönlich ausgeschaltet: neutrale Bühnen in Mint */
:root[data-kinds='off'] { --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--accent-strong); --sun-deep: var(--accent-strong); }
/* Knopf-Stil „in Hauptfarbe“ */
:root[data-buttons='brand'] { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); --btn-hover-ink: var(--brand-ink); }

/* Vorlage „Petrol“ (bisheriges Design „Lernfreundlich“): flach, grau-grüne Fläche, Knöpfe in der Hauptfarbe */
:root[data-look='petrol'] {
  --canvas: #F3F5F4; --surface-2: #F8FAF9; --fill: #F0F3F2; --fill-2: #E7ECEA; --line: #DDE3E1; --line-2: #E7ECEA;
  --ink: #24302E; --muted: #6A7774; --ink-2: #4A5653; --ink-4: #9AA5A2;
  --mint: color-mix(in srgb, var(--brand) 12%, white); --mint-2: color-mix(in srgb, var(--brand) 20%, white);
  --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--brand-deep); --sun-deep: var(--brand-deep);
  --accent-strong: color-mix(in srgb, var(--brand) 80%, black); --accent-2: #E8865F; --bar: var(--brand);
  --ok: #2B6E4F; --ok-mark: #3A8A5F; --ok-soft: #E3F1EA; --warn: #7E5410; --warn-mark: #E0A23A; --warn-soft: #FCEFD9;
  --bad: #9A3E1E; --bad-mark: #E8865F; --bad-soft: #FBEDE6; --info-soft: var(--mint);
  --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); --btn-hover-ink: var(--brand-ink);
  --font-display: var(--font); --track-display: -0.01em; --radius-round: var(--r-chip);
  --sh-1: none; --sh-2: none; --sh-3: 0 24px 60px rgba(36,48,46,.25); --backdrop: rgba(36,48,46,.4);
  --side-active-ink: var(--brand-deep); --side-active-icon: var(--brand); --side-active-bar: transparent; --logo-green: var(--brand);
}
:root[data-radius='rounded'] { --r: 8px; --r-btn: 8px; --r-chip: 6px; }
:root[data-radius='pill'] { --r: 12px; --r-btn: 999px; --r-chip: 999px; }
/* Schriftwahl des Mandanten ersetzt die Titelschrift; Atkinson bleibt die Lesetext-Schrift */
:root[data-font='serif'] { --font-display: 'Lora', Georgia, serif; --track-display: -0.01em; }
:root[data-font='rounded'] { --font: 'Poppins', sans-serif; --font-display: 'Poppins', sans-serif; }
:root[data-font='humanist'] { --font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --font-display: var(--font); --track-display: -0.01em; }
:root[data-sidebar='dark'] { --side-bg: #1D1D1B; --side-ink: #F1F4EF; --side-ink-2: #A7B0AA; --side-icon: #A7B0AA; --side-hover: rgba(255,255,255,.06); --side-active-bg: rgba(255,255,255,.10); --side-active-ink: #fff; --side-active-icon: var(--logo-green); --side-active-bar: var(--logo-green); --side-line: #1D1D1B; }
:root[data-sidebar='brand'] { --side-bg: color-mix(in srgb, var(--brand) 80%, black); --side-ink: #fff; --side-ink-2: rgba(255,255,255,.72); --side-icon: rgba(255,255,255,.78); --side-hover: rgba(255,255,255,.08); --side-active-bg: rgba(255,255,255,.16); --side-active-ink: #fff; --side-active-icon: #fff; --side-active-bar: #fff; --side-line: transparent; }

/* Dunkles Design (automatisch nach Systemeinstellung oder über das Benutzermenü) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --canvas: #141716; --surface: #1C201E; --surface-2: #212623; --fill: #252B27; --fill-2: #2E3530;
    --mint: #1E2B22; --mint-2: #26382B; --sky: #1A2833; --sun: #322B16; --line: #2C332E; --line-2: #262C28;
    --ink: #EEF2EC; --muted: #9BA69F; --on-ink: #141716; --ink-2: #CDD5CF; --ink-4: #75807A;
    --accent: #7CC98F; --accent-strong: #9AD8AA; --on-accent: #141716;
    --blue-deep: #8EC1E3; --sun-deep: #F2CF68; --coral: #F08A70; --coral-tint: #3A231D; --coral-ink: #F08A70; --bad: #F08A70;
    --brand-line: color-mix(in srgb, var(--accent) 45%, var(--surface));
    --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30);
    --sh-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.40);
    --sh-3: 0 4px 8px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.55);
    --backdrop: rgba(0,0,0,.55);
  }
  :root:not([data-theme='light'])[data-tint='brand'], :root:not([data-theme='light'])[data-look='petrol'] { --accent: color-mix(in srgb, var(--brand) 50%, #EEF2EC); --accent-strong: color-mix(in srgb, var(--brand) 35%, #EEF2EC); --mint: color-mix(in srgb, var(--brand) 22%, #1C201E); --mint-2: color-mix(in srgb, var(--brand) 32%, #1C201E); }
  :root:not([data-theme='light'])[data-kinds='off'], :root:not([data-theme='light'])[data-look='petrol'] { --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--accent); --sun-deep: var(--accent); }
  :root:not([data-theme='light'])[data-look='petrol'] { --ok: var(--accent); --ok-mark: var(--logo-green); --ok-soft: var(--mint); --warn: var(--sun-deep); --warn-soft: #3A3018; --bad: var(--coral); --bad-mark: var(--coral); --bad-soft: var(--coral-tint); --canvas: #141716; }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #141716; --surface: #1C201E; --surface-2: #212623; --fill: #252B27; --fill-2: #2E3530;
  --mint: #1E2B22; --mint-2: #26382B; --sky: #1A2833; --sun: #322B16; --line: #2C332E; --line-2: #262C28;
  --ink: #EEF2EC; --muted: #9BA69F; --on-ink: #141716; --ink-2: #CDD5CF; --ink-4: #75807A;
  --accent: #7CC98F; --accent-strong: #9AD8AA; --on-accent: #141716;
  --blue-deep: #8EC1E3; --sun-deep: #F2CF68; --coral: #F08A70; --coral-tint: #3A231D; --coral-ink: #F08A70; --bad: #F08A70;
  --brand-line: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30);
  --sh-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.40);
  --sh-3: 0 4px 8px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.55);
  --backdrop: rgba(0,0,0,.55);
}
:root[data-theme='dark'][data-tint='brand'], :root[data-theme='dark'][data-look='petrol'] { --accent: color-mix(in srgb, var(--brand) 50%, #EEF2EC); --accent-strong: color-mix(in srgb, var(--brand) 35%, #EEF2EC); --mint: color-mix(in srgb, var(--brand) 22%, #1C201E); --mint-2: color-mix(in srgb, var(--brand) 32%, #1C201E); }
:root[data-theme='dark'][data-kinds='off'], :root[data-theme='dark'][data-look='petrol'] { --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--accent); --sun-deep: var(--accent); }
:root[data-theme='dark'][data-look='petrol'] { --ok: var(--accent); --ok-mark: var(--logo-green); --ok-soft: var(--mint); --warn: var(--sun-deep); --warn-soft: #3A3018; --bad: var(--coral); --bad-mark: var(--coral); --bad-soft: var(--coral-tint); --canvas: #141716; }

/* Helle Insel: Lerninhalte (Rise-Farben, Bilder) sind für hellen Grund gestaltet und bleiben im dunklen Design hell */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) {
    color-scheme: light; color: var(--ink);
    --canvas: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F9F6; --fill: #F2F5F0; --fill-2: #E8EDE5;
    --mint: #EBF7E3; --mint-2: #D9EFCB; --sky: #D3E5F0; --sun: #FCE8AC; --line: #E1E6DF; --line-2: #EBEFE9;
    --ink: #1D1D1B; --muted: #55605A; --ink-3: #55605A; --on-ink: #FFFFFF; --ink-2: #3B443F; --ink-4: #8C968F;
    --accent: var(--brand); --accent-strong: #1F5C38; --on-accent: #FFFFFF; --link: var(--brand);
    --blue-deep: #1C5A86; --sun-deep: #7A5600; --coral: #B94A35; --coral-tint: #FBE6E0; --coral-ink: #A8412E;
    --brand-soft: var(--mint); --brand-soft-2: #F4FAF0; --brand-deep: #1F5C38; --brand-line: color-mix(in srgb, var(--brand) 35%, white);
    --ok: var(--brand); --ok-soft: #EBF7E3; --warn: #7A5600; --warn-soft: #FCE8AC; --bad: #B94A35; --bad-mark: #B94A35; --bad-soft: #FBE6E0; --info-soft: #D3E5F0;
    --btn-bg: #1D1D1B; --btn-ink: #FFFFFF; --btn-hover: var(--brand); --btn-hover-ink: #FFFFFF;
    --sh-1: 0 1px 2px rgba(29,45,34,.06), 0 4px 12px rgba(29,45,34,.06); --sh-2: 0 2px 4px rgba(29,45,34,.06), 0 12px 28px rgba(29,45,34,.10); --shadow-pop: var(--sh-2), 0 0 0 1px var(--line);
  }
  :root:not([data-theme='light']):is([data-tint='brand'], [data-look='petrol']) :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --mint: color-mix(in srgb, var(--brand) 11%, white); --mint-2: color-mix(in srgb, var(--brand) 21%, white); --brand-soft: var(--mint); --brand-soft-2: color-mix(in srgb, var(--brand) 6%, white); --ok-soft: var(--mint); --accent-strong: color-mix(in srgb, var(--brand) 78%, black); --brand-deep: var(--accent-strong); }
  :root:not([data-theme='light'])[data-look='petrol'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --canvas: #F3F5F4; --ink: #24302E; --muted: #6A7774; --ink-3: #6A7774; --ink-2: #4A5653; --line: #DDE3E1; --sky: var(--mint); --sun: var(--mint); --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); }
  :root:not([data-theme='light'])[data-buttons='brand'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); }
  :root:not([data-theme='light'])[data-kinds='off'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--accent-strong); --sun-deep: var(--accent-strong); }
}
:root[data-theme='dark'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) {
  color-scheme: light; color: var(--ink);
    --canvas: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F9F6; --fill: #F2F5F0; --fill-2: #E8EDE5;
    --mint: #EBF7E3; --mint-2: #D9EFCB; --sky: #D3E5F0; --sun: #FCE8AC; --line: #E1E6DF; --line-2: #EBEFE9;
    --ink: #1D1D1B; --muted: #55605A; --ink-3: #55605A; --on-ink: #FFFFFF; --ink-2: #3B443F; --ink-4: #8C968F;
    --accent: var(--brand); --accent-strong: #1F5C38; --on-accent: #FFFFFF; --link: var(--brand);
    --blue-deep: #1C5A86; --sun-deep: #7A5600; --coral: #B94A35; --coral-tint: #FBE6E0; --coral-ink: #A8412E;
    --brand-soft: var(--mint); --brand-soft-2: #F4FAF0; --brand-deep: #1F5C38; --brand-line: color-mix(in srgb, var(--brand) 35%, white);
    --ok: var(--brand); --ok-soft: #EBF7E3; --warn: #7A5600; --warn-soft: #FCE8AC; --bad: #B94A35; --bad-mark: #B94A35; --bad-soft: #FBE6E0; --info-soft: #D3E5F0;
    --btn-bg: #1D1D1B; --btn-ink: #FFFFFF; --btn-hover: var(--brand); --btn-hover-ink: #FFFFFF;
    --sh-1: 0 1px 2px rgba(29,45,34,.06), 0 4px 12px rgba(29,45,34,.06); --sh-2: 0 2px 4px rgba(29,45,34,.06), 0 12px 28px rgba(29,45,34,.10); --shadow-pop: var(--sh-2), 0 0 0 1px var(--line);
}
:root[data-theme='dark']:is([data-tint='brand'], [data-look='petrol']) :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --mint: color-mix(in srgb, var(--brand) 11%, white); --mint-2: color-mix(in srgb, var(--brand) 21%, white); --brand-soft: var(--mint); --brand-soft-2: color-mix(in srgb, var(--brand) 6%, white); --ok-soft: var(--mint); --accent-strong: color-mix(in srgb, var(--brand) 78%, black); --brand-deep: var(--accent-strong); }
:root[data-theme='dark'][data-look='petrol'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --canvas: #F3F5F4; --ink: #24302E; --muted: #6A7774; --ink-3: #6A7774; --ink-2: #4A5653; --line: #DDE3E1; --sky: var(--mint); --sun: var(--mint); --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); }
:root[data-theme='dark'][data-buttons='brand'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); }
:root[data-theme='dark'][data-kinds='off'] :is(.light-island, .player:not(.lw-stage), .scorm-wrap, .ed-paper) { --sky: var(--mint); --sun: var(--mint); --blue-deep: var(--accent-strong); --sun-deep: var(--accent-strong); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: var(--track-display); text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.12; letter-spacing: calc(var(--track-display) - 0.01em); }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
/* Eyebrow: kleine Überzeile mit grünem Punkt (Bereichsköpfe, Datum, Inhaltsart) */
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; line-height: 1.3; }
.eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--logo-green)); flex: none; }
/* Unterstrichenes Schlüsselwort – sparsam: nur Begrüssung, Anmeldung, Leerzustände, Abschluss */
.kw { white-space: nowrap; text-decoration: underline; text-decoration-color: var(--logo-green); text-decoration-thickness: .085em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.kw.blue { text-decoration-color: var(--logo-blue); } .kw.sun { text-decoration-color: var(--logo-yellow); }
p { margin: 0 0 .8em; }
b, strong { font-weight: 600; }
.num, .tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--mint-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.xs { font-size: 12.5px; }
.strong { font-weight: 500; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hide { display: none !important; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 24px; height: 24px; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side-bg); border-right: 1px solid var(--side-line); display: flex; flex-direction: column; color: var(--side-ink); z-index: 30; }
/* Plattform-Logo: SONBAY-Querlogo 42px hoch (= 120px breit, Mindestgrösse), Schutzraum links/rechts ≥ 2 × Kopfpunkt */
.brandmark { min-height: calc(var(--topbar-h) + 8px); display: flex; align-items: center; gap: 0; padding: 0 20px 0 22px; color: var(--side-ink); text-decoration: none !important; }
.brandmark img { max-height: 40px; max-width: 200px; object-fit: contain; }
.brandmark img.sb-logo { height: 42px; width: 120px; max-width: none; max-height: none; flex: none; }
.brandmark .product { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; color: var(--side-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brandmark .logo-dot { width: 32px; height: 32px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 600; font-size: 15px; border-radius: var(--r); }
.logo-dark { display: none; }
:root:is([data-sidebar='dark'], [data-sidebar='brand']) .brandmark .logo-light { display: none; }
:root:is([data-sidebar='dark'], [data-sidebar='brand']) .brandmark .logo-dark { display: block; }
:root:is([data-sidebar='dark'], [data-sidebar='brand']) .brandmark .product { border-left-color: rgba(255,255,255,.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .logo-light { display: none; } :root:not([data-theme='light']) .logo-dark { display: block; } }
:root[data-theme='dark'] .logo-light { display: none; } :root[data-theme='dark'] .logo-dark { display: block; }
.top-logo { display: none; }
.top-logo img { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
/* Plattform-Bereich (System Owner): schmaler schwarzer Streifen */
.ops-strip { background: #1D1D1B; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 40px; display: flex; align-items: center; gap: 10px; }
.ops-strip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--logo-green); }
.nav { flex: 1; overflow-y: auto; padding: 4px 12px 20px; }
.nav-group { margin-top: 18px; }
.nav-group:first-child { margin-top: 4px; }
.nav-title { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--side-ink-2); padding: 0 12px 6px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; color: var(--side-ink); font-size: 14.5px; text-decoration: none; border-radius: var(--r); }
.nav a svg { color: var(--side-icon); }
.nav a:hover { background: var(--side-hover); color: var(--side-ink); }
.nav a.active { background: var(--side-active-bg); color: var(--side-active-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--side-active-bar); }
.nav a.active svg { color: var(--side-active-icon); }
.nav a .count { margin-left: auto; font-size: 12px; padding: 1px 8px; background: var(--bad-soft); color: var(--bad); font-weight: 600; font-variant-numeric: tabular-nums; border-radius: var(--radius-round); }
.side-foot { padding: 16px 24px 20px; font-size: 12.5px; color: var(--side-ink-2); border-top: 1px solid var(--side-line); }
.side-foot .strong { color: var(--side-ink); }
.side-foot a { color: inherit; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 40px; background: var(--canvas); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.topbar.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--sh-1); }
.search { position: relative; flex: 1; max-width: 460px; }
.search input { width: 100%; height: 44px; border: 1px solid var(--line); border-bottom-color: var(--muted); background: var(--surface); padding: 0 14px 0 42px; font: inherit; font-size: 15px; color: var(--ink); border-radius: var(--r); }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line); }
.search > svg { position: absolute; left: 14px; top: 13px; color: var(--ink-3); }
.search-results { position: absolute; top: 50px; left: 0; right: 0; background: var(--surface); box-shadow: var(--shadow-pop); padding: 6px; max-height: 70vh; overflow: auto; }
.search-results a { display: flex; gap: 12px; padding: 9px 10px; color: var(--ink); text-decoration: none; align-items: center; }
.search-results a:hover, .search-results a.sel { background: var(--mint); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; border-radius: var(--r); }
.icon-btn:hover { background: var(--mint); color: var(--ink); }
.icon-btn .dot { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; border-radius: var(--radius-round); }
.user-btn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 4px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14.5px; color: var(--ink); border-radius: var(--r); }
.user-btn:hover { background: var(--mint); }
.avatar { width: 36px; height: 36px; background: var(--mint-2); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; border-radius: var(--radius-round); }
.avatar.lg { width: 72px; height: 72px; font-size: 24px; }
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.menu-burger { display: none; }
.content { padding: 8px 40px 72px; max-width: 1320px; width: 100%; }
.banner { background: var(--warn-soft); color: var(--warn); padding: 10px 40px; font-size: 14px; box-shadow: inset 3px 0 0 var(--warn-mark); }

/* ---------- Popover ---------- */
.popover { position: absolute; top: calc(var(--topbar-h) - 8px); right: 32px; width: 380px; max-height: 72vh; overflow: auto; background: var(--surface); box-shadow: var(--shadow-pop); z-index: 50; animation: drop .18s var(--ease); border-radius: var(--r); }
.theme-seg { display: flex; gap: 0; margin: 4px 12px 10px; border: 1px solid var(--line); }
.theme-seg button { flex: 1; border: 0; background: transparent; padding: 6px 4px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.theme-seg button + button { box-shadow: -1px 0 0 var(--line); }
.theme-seg button.on { background: var(--mint); color: var(--ink); font-weight: 600; }
.popover.narrow { width: 280px; }
.popover header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 12px; }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
.menu-list { padding: 6px; }
.demo-switch { padding: 10px 6px 8px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); max-height: 46vh; overflow: auto; }
.demo-switch > div { padding: 0 12px 6px; text-transform: uppercase; letter-spacing: .04em; }
.demo-switch button { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.demo-switch button:hover { background: var(--mint); }
.demo-switch button.on { background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.menu-list a, .menu-list button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.menu-list a:hover, .menu-list button:hover { background: var(--mint); text-decoration: none; color: var(--ink); }
.notif { display: flex; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.notif:hover { background: var(--surface-2); text-decoration: none; }
.notif.unread { background: var(--brand-soft-2); }
.notif .ico { width: 32px; height: 32px; background: var(--fill); display: grid; place-items: center; color: var(--ink-2); flex: none; }

/* ---------- Seitenkopf ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 16px 0 28px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin: 10px 0 0; max-width: 64ch; font-size: 16px; }
.page-head h1 { font-size: clamp(30px, 3.2vw, 40px); }
.crumbs { font-size: 13.5px; color: var(--ink-3); margin: 8px 0 14px; display: flex; gap: 6px; align-items: center; }
.crumbs svg { width: 13px; height: 13px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
/* Knöpfe: eckig, primär schwarz (Hover grün mit 2px Anhebung), sekundär als Linie, Löschen mit Koralle-Rand */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1.5px solid transparent; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; border-radius: var(--r-btn); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .2s var(--lift), box-shadow .2s var(--lift); }
.btn svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-hover-ink); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn-primary:active { transform: none; box-shadow: none; }
.btn-primary:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--mint); color: var(--ink); }
:root[data-look='petrol'] .btn-secondary { background: var(--surface); border-width: 1px; border-color: var(--line); }
:root[data-look='petrol'] .btn-secondary:hover { border-color: var(--ink-4); background: var(--surface); }
.btn-ghost { background: transparent; color: var(--link); padding: 0 12px; font-weight: 500; }
.btn-ghost:hover { background: var(--mint); color: var(--accent-strong); }
.btn-danger { background: transparent; color: var(--coral); border-color: var(--coral); }
.btn-danger:hover { background: var(--coral-tint); color: var(--coral); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-sm.btn-ghost { padding: 0 10px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 16px; }
.btn[disabled] { opacity: .45; cursor: default; transform: none !important; box-shadow: none !important; }
.btn-block { width: 100%; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kacheln & Raster ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
a.card, .card.interactive { transition: transform .35s var(--lift), box-shadow .35s var(--lift), border-color .2s var(--ease); }
a.card:hover, .card.interactive:hover { transform: translateY(-4px); box-shadow: var(--sh-3); text-decoration: none; }
.card-pad { padding: 26px 28px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 24px 28px 0; }
.card-head + .card-body { padding-top: 16px; }
.card-head a.small, .section-title a.small { font-size: 14px; }
.card-body { padding: 22px 28px 26px; }
.card-foot { padding: 14px 28px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.card.flat { border-color: transparent; background: var(--fill); box-shadow: none; }
.card.tint { border-color: transparent; background: var(--mint); box-shadow: none; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); align-items: start; }
.g-side { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 44px 0 18px; gap: 12px; }
.section-title h2 { font-size: clamp(20px, 2vw, 24px); }

/* ---------- Kennzahlen ---------- */
.kpi { padding: 22px 24px; }
.kpi .label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .label svg { display: none; }
.kpi .value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; }
.kpi .value small { font-size: 1.05rem; color: var(--muted); margin-left: 3px; font-weight: 400; }
.kpi .sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.kpi.alert .value { color: var(--coral); }
.kpi.alert .sub { color: var(--coral); }
/* Kennzahlen gemeinsam in einer Karte, durch 1px-Linien getrennt */
.kpis { gap: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); border-radius: var(--r); overflow: hidden; }
.kpis > .kpi { border: 0; box-shadow: none; border-radius: 0; background: transparent; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }

/* ---------- Startseite: Begrüssung + Als Nächstes ---------- */
.welcome { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-bottom: 16px; }
.hero { background: var(--surface); border: 1px solid var(--line); padding: 36px 36px 30px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-1); }
.hero .date { font-size: 14px; color: var(--ink-3); }
.hero h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; position: relative; max-width: 22ch; }
:root[data-look='petrol'] .hero h1 { letter-spacing: -0.015em; }
.hero p { margin: 0; font-size: 18px; color: var(--muted); max-width: 32em; position: relative; }
.hero-stats { display: flex; gap: 36px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); flex-wrap: wrap; position: relative; }
.hero-stats div { font-size: 13px; color: var(--ink-3); }
.hero-stats b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.02em; }
.hero.has-img { color: #fff; border: 0; }
.hero.has-img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,28,27,.78), rgba(20,28,27,.35)); }
.hero.has-img > :not(img) { z-index: 2; }
.hero.has-img h1, .hero.has-img .hero-stats b { color: #fff; }
.hero.has-img p, .hero.has-img .date, .hero.has-img .eyebrow, .hero.has-img .hero-stats div { color: rgba(255,255,255,.88); }
.hero.has-img .hero-stats { border-color: rgba(255,255,255,.25); }
.hero img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next-up { background: var(--mint); padding: 32px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--r); position: relative; overflow: hidden; }
.next-up::before { content: ''; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.45); right: -12%; top: -22%; pointer-events: none; }
.next-up > * { position: relative; }
.next-up .eyebrow { color: var(--accent-strong); }
.next-up .title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); }
.next-up .meta { font-size: 15px; color: var(--muted); }
.next-up .progress { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.next-up .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Fahrplan (Fälligkeiten) ---------- */
.timetable { list-style: none; margin: 0; padding: 0; }
.timetable li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 28px; border-top: 1px solid var(--line-2); }
.timetable li:first-child { border-top: 0; }
.tt-date { width: 64px; height: 60px; background: var(--fill); color: var(--ink); display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.1; font-variant-numeric: tabular-nums; border-radius: var(--r); }
.tt-date b { font-family: var(--font-display); font-size: 22px; font-weight: 500; display: block; letter-spacing: -0.02em; }
.tt-date span { font-size: 12px; }
.tt-date.over { background: var(--coral-tint); color: var(--coral); }
.tt-date.soon { background: var(--mint); color: var(--accent-strong); }
.tt-date.none b { font-size: 16px; }
.tt-title { font-weight: 600; color: var(--ink); font-size: 16px; }
.tt-title:hover { color: var(--accent); }
.tt-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin-top: 2px; flex-wrap: wrap; }
.tt-meta svg { width: 14px; height: 14px; }
.tt-due { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.tt-due.over { color: var(--bad); }

/* ---------- Kurs-Kacheln ---------- */
/* Kurs-Kacheln: Farbbühne 16:9 nach Inhaltsart (digital = Sky, persönlich = Sun, Lernpfad = Mint) mit angeschnittenem weissem Kreis */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.ccard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); transition: transform .35s var(--lift), box-shadow .35s var(--lift); }
.ccard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.ccover { aspect-ratio: 16 / 9; position: relative; background: var(--stage, var(--sky)); display: grid; place-items: center; overflow: hidden; }
.ccover::before, .stage::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.45); right: -12%; top: -18%; pointer-events: none; }
.ccover.k-path, .stage.k-path { --stage: var(--mint-2); } .ccover.k-onsite, .stage.k-onsite { --stage: var(--sun); }
.stage { position: relative; overflow: hidden; background: var(--stage, var(--sky)); }
.stage.k-hybrid { background: linear-gradient(135deg, var(--sky) 50%, var(--sun) 50%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.ccover, .stage, .next-up)::before { background: rgba(255,255,255,.06); } }
:root[data-theme='dark'] :is(.ccover, .stage, .next-up)::before { background: rgba(255,255,255,.06); }
:root[data-look='petrol'] .ccover { aspect-ratio: auto; height: 128px; background: color-mix(in srgb, var(--c, var(--brand)) 13%, var(--surface)); }
:root[data-look='petrol'] :is(.ccover, .stage, .next-up)::before { display: none; }
:root[data-look='petrol'] .ccard { box-shadow: none; } :root[data-look='petrol'] .ccard:hover { transform: none; border-color: var(--brand-line); }
.ccover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ccover .badge-top { position: absolute; top: 12px; left: 12px; z-index: 2; }
.app-icon { display: grid; place-items: center; color: var(--kind-ink, var(--blue-deep)); flex: none; position: relative; }
.k-path .app-icon, .app-icon.k-path { --kind-ink: var(--accent-strong); } .k-onsite .app-icon, .app-icon.k-onsite { --kind-ink: var(--sun-deep); }
:root[data-look='petrol'] .app-icon { color: color-mix(in srgb, var(--c, var(--brand)) 85%, black); }
.app-icon svg { width: 48px; height: 48px; stroke-width: 1.3; }
.app-icon.lg { width: 96px; height: 96px; background: var(--sky); border-radius: var(--r); }
:root[data-look='petrol'] .app-icon.lg { background: color-mix(in srgb, var(--c, var(--brand)) 13%, white); }
.app-icon.lg svg { width: 48px; height: 48px; }
.app-icon.sm svg { width: 20px; height: 20px; }
.cbody { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cbody .eyebrow { font-size: .72rem; --dot: currentColor; color: var(--kind-ink, var(--blue-deep)); gap: 6px; }
.cbody .eyebrow::before { width: 8px; height: 8px; }
.ccard.k-path .eyebrow { --kind-ink: var(--accent); } .ccard.k-onsite .eyebrow { --kind-ink: var(--sun-deep); }
:root[data-look='petrol'] .cbody .eyebrow { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: color-mix(in srgb, var(--c, var(--brand)) 85%, black); }
:root[data-look='petrol'] .cbody .eyebrow::before { display: none; }
.cbody h3 { font-size: 17px; line-height: 1.28; font-weight: 500; letter-spacing: -0.015em; }
.cbody .eyebrow + .eyebrow-cat { font-size: 13px; color: var(--muted); }
.cmeta { display: flex; gap: 14px; color: var(--ink-3); font-size: 13px; margin-top: auto; padding-top: 10px; align-items: center; flex-wrap: wrap; }
.cmeta span { display: inline-flex; gap: 5px; align-items: center; }
.cmeta svg { width: 14px; height: 14px; }

/* ---------- Chips & Badges ---------- */
/* Status-Pillen – die einzigen runden Flächen neben Punkten */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; background: var(--fill); color: var(--ink-2); white-space: nowrap; border-radius: var(--radius-round); }
.chip svg { width: 13px; height: 13px; }
.chip.brand { background: var(--mint); color: var(--accent-strong); }
.chip.ok { background: var(--mint); color: var(--accent-strong); }
.chip.done { background: var(--logo-green); color: #1D1D1B; }
.chip.warn { background: var(--sun); color: var(--sun-deep); }
.chip.bad { background: var(--coral-tint); color: var(--coral); }
.chip.sky { background: var(--sky); color: var(--blue-deep); }
.chip.dark { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); color: var(--ink-2); }
:root[data-look='petrol'] .chip { font-weight: 500; }
:root[data-look='petrol'] .chip.ok { background: var(--ok-soft); color: var(--ok); } :root[data-look='petrol'] .chip.done { background: var(--ok-soft); color: var(--ok); }
:root[data-look='petrol'] .chip.warn { background: var(--warn-soft); color: var(--warn); } :root[data-look='petrol'] .chip.bad { background: var(--bad-soft); color: var(--bad); }
.dotlabel { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.dotlabel::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--d, var(--ink-4)); }

/* ---------- Fortschritt ---------- */
.row > .progress { flex: 1; }
/* Fortschritt: Balken 6px, eckig, Füllung Logo-Grün; Kreis mit zwei Ringen (aussen Sky = digital, innen Sun = persönlich) */
.progress { height: 6px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--bar); transition: width .6s var(--lift); }
.progress.ok > i { background: var(--bar); }
.progress.lg { height: 8px; }
.ring { --p: 0; --q: var(--p); --s: 44px; --w: calc(var(--s) * .09); position: relative; width: var(--s); height: var(--s); border-radius: 50%; background: conic-gradient(var(--logo-blue) calc(var(--p) * 1%), var(--sky) 0); display: grid; place-items: center; flex: none; }
.ring::before { content: ''; position: absolute; inset: var(--w); border-radius: 50%; background: conic-gradient(var(--logo-yellow) calc(var(--q) * 1%), var(--sun) 0); }
.ring::after { content: attr(data-label); position: relative; width: calc(var(--s) - var(--w) * 4); height: calc(var(--s) - var(--w) * 4); border-radius: 50%; background: var(--surface); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--s) * .22); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root[data-look='petrol'] .ring { background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--fill-2) 0); } :root[data-look='petrol'] .ring::before { display: none; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 14px 16px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
table.t th:first-child, table.t td:first-child { padding-left: 28px; }
table.t th:last-child, table.t td:last-child { padding-right: 28px; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--mint); }
table.t tbody tr.sel td, table.t tbody tr[aria-selected='true'] td { background: var(--mint-2); }
table.t tr.click { cursor: pointer; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person .n { font-weight: 600; color: var(--ink); }
.person .e { font-size: 13px; color: var(--ink-3); }

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
/* Formulare: Label 600, Feld eckig mit 1px-Linie und dunklerer Unterkante, Fokus 2px Akzent */
.field > label, .lbl { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 13.5px; color: var(--muted); }
.input, .select, .textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-bottom-color: var(--muted); background: var(--surface); padding: 9px 14px; font: inherit; font-size: 15px; color: var(--ink); border-radius: var(--r); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
:root[data-look='petrol'] :is(.input, .select, .textarea, .search input) { border-bottom-color: var(--line); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; min-height: 420px; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.input[readonly] { background: var(--fill); color: var(--ink-2); border-bottom-color: var(--line); }
.input[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--coral); }
.field .field-err { font-size: 13.5px; color: var(--coral); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2355605A' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.input-sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; padding: 5px 0; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 42px; height: 24px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--ink-4); position: relative; cursor: pointer; transition: background .2s var(--ease); margin: 0; flex: none; border-radius: var(--r-chip); }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 1px var(--ink-4); transition: transform .2s var(--ease); border-radius: var(--r-chip); }
.switch input:checked { background: var(--accent); box-shadow: none; }
.switch input:checked::after { transform: translateX(18px); box-shadow: none; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); background: transparent; flex-wrap: wrap; border-radius: var(--r); overflow: hidden; }
.seg button, .seg a { border: 0; background: transparent; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; text-decoration: none !important; }
.seg button + button, .seg a + a { box-shadow: -1px 0 0 var(--ink); }
.seg button:hover, .seg a:hover { background: var(--mint); }
.seg .on { background: var(--mint); color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }
.seg button + button.on, .seg a + a.on { box-shadow: -1px 0 0 var(--ink), inset 0 -3px 0 var(--accent); }
:root[data-look='petrol'] .seg { border: 1px solid var(--line); background: var(--surface); }
:root[data-look='petrol'] .seg button + button, :root[data-look='petrol'] .seg a + a { box-shadow: -1px 0 0 var(--line); }
:root[data-look='petrol'] .seg .on { color: var(--brand-deep); box-shadow: none; }
.seg.nowrap { flex-wrap: nowrap; }
.seg.nowrap span { padding: 5px 10px !important; font-size: 13px !important; white-space: nowrap; }
.seg.nowrap span.on { background: var(--mint); color: var(--ink); }
.ed-side .seg { display: flex; }
.ed-side .seg button { padding: 7px 8px; font-size: 13px; flex: 1; }
.color-input { display: flex; gap: 8px; align-items: center; }
.color-input input[type=color] { width: 44px; height: 44px; border: 1px solid var(--line); padding: 3px; background: var(--surface); cursor: pointer; }
.err-msg { background: var(--coral-tint); color: var(--coral); padding: 12px 16px; font-size: 14.5px; margin-bottom: 16px; box-shadow: inset 3px 0 0 var(--coral); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.tabs a { padding: 12px 16px; color: var(--ink-2); font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; display: inline-flex; gap: 8px; align-items: center; }
.tabs a svg { width: 15px; height: 15px; color: var(--ink-3); }
.tabs a .chip { height: 20px; padding: 0 7px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a.on svg { color: var(--accent); }

/* ---------- Modal / Toast ---------- */
.modal-back { position: fixed; inset: 0; background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--surface); width: 100%; max-width: 580px; box-shadow: var(--sh-3); animation: pop .25s var(--lift); border-radius: var(--r); }
.modal.wide { max-width: 840px; }
.modal-head { padding: 26px 30px 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { font-size: 22px; }
.modal-head p { color: var(--ink-2); margin: 6px 0 0; font-size: 15px; }
.modal-body { padding: 20px 30px 8px; }
.modal-foot { padding: 16px 30px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line-2); margin-top: 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: var(--on-ink); padding: 12px 18px; font-size: 14.5px; box-shadow: var(--sh-3); display: flex; align-items: center; gap: 10px; animation: pop .2s var(--ease); max-width: 90vw; border-radius: var(--r); }
.toast svg { color: var(--logo-green); }
.toast.err { background: var(--coral); color: #fff; }
.toast.err svg { color: #fff; }

/* ---------- Leerzustände ---------- */
.empty { text-align: center; padding: 56px 24px; color: var(--muted); position: relative; }
.empty .ico { width: 64px; height: 64px; margin: 0 auto 18px; background: var(--mint); display: grid; place-items: center; color: var(--accent); border-radius: 50%; }
.empty h3 { font-size: 21px; margin-bottom: 8px; color: var(--ink); font-weight: 500; letter-spacing: -0.02em; }
:root[data-look='petrol'] .empty .ico { border-radius: var(--r); width: 56px; height: 56px; }
.empty p { max-width: 44ch; margin: 0 auto 18px; font-size: 15px; }
.skeleton { height: 120px; background: linear-gradient(90deg, var(--fill-2), var(--surface-2), var(--fill-2)); background-size: 200% 100%; animation: sk 1.3s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- Listen ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 13px 28px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 14px; }
.list > li:first-child { border-top: 0; }
.list.compact > li { padding: 11px 24px; }
.lico { width: 36px; height: 36px; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); flex: none; border-radius: var(--r); }
.lico svg { width: 17px; height: 17px; }
.lico.brand { background: var(--mint); color: var(--accent-strong); }
.lico.sky { background: var(--sky); color: var(--blue-deep); } .lico.sun { background: var(--sun); color: var(--sun-deep); }

/* ---------- Balken (Reports) ---------- */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 14.5px; }
.bar-track { height: 10px; background: var(--fill-2); overflow: hidden; display: flex; }
.bar-track i { display: block; height: 100%; }
.columns { display: flex; align-items: flex-end; gap: 16px; height: 170px; padding-top: 12px; }
.columns .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.columns .col i { width: 100%; max-width: 44px; background: var(--accent); min-height: 2px; }
.columns .col span { font-size: 13px; color: var(--ink-3); }
.columns .col b { font-size: 13.5px; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Setup-Assistent ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.steps li:first-child { border-top: 0; }
.steps li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; background: var(--fill); display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--ink-2); flex: none; }
.steps li::before { border-radius: 50%; }
.steps li.done::before { content: '✓'; background: var(--logo-green); color: #1D1D1B; }
:root[data-look='petrol'] .steps li::before { border-radius: 0; } :root[data-look='petrol'] .steps li.done::before { background: var(--ok-soft); color: var(--ok); }
.steps li.done a { color: var(--ink-3); }

/* ---------- Kursdetail & Player ---------- */
.course-hero { background: var(--surface); border: 1px solid var(--line); padding: 36px; margin-bottom: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 32px; align-items: start; border-radius: var(--r); box-shadow: var(--sh-1); }
.course-hero > .app-icon, .course-hero > img { grid-row: span 4; }
.course-hero > img { width: 220px; height: 150px; object-fit: cover; border-radius: var(--r) !important; margin: 0 !important; }
.course-hero h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; max-width: 24ch; letter-spacing: -0.03em; }
.course-hero p { color: var(--muted); max-width: 46em; margin: 10px 0 0; font-size: 18px; }
.course-hero .row-wrap { margin-bottom: 12px; }
.course-hero .hero-cta { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.course-hero .more { font-size: 15px !important; }
.outline-mod { padding: 16px 28px; border-top: 1px solid var(--line-2); }
.outline-mod:first-child { border-top: 0; }
.outline-mod h4 { font-size: 14px; margin-bottom: 8px; color: var(--ink-2); }
.outline-les { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; color: var(--ink); }
.outline-les .tick { width: 20px; height: 20px; box-shadow: inset 0 0 0 1.5px var(--line); flex: none; display: grid; place-items: center; }
.outline-les .tick { border-radius: 50%; }
.outline-les.done .tick { background: var(--logo-green); box-shadow: none; color: #1D1D1B; }
.outline-les .tick svg { width: 12px; height: 12px; stroke-width: 2.4; }

.player { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
.player-side { border-right: 1px solid var(--line); background: var(--canvas); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.player-side .ps-head { padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.player-side .mod { padding: 14px 12px 6px; }
.player-side .mod-title { font-size: 13px; color: var(--ink-3); padding: 0 10px 6px; }
.player-side a.les { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.player-side a.les:hover { background: var(--mint); }
.player-side a.les.on { background: var(--mint); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.player-side a.les.done .tick { background: var(--logo-green); box-shadow: none; color: #1D1D1B; }
.player-side .tick { width: 18px; height: 18px; box-shadow: inset 0 0 0 1.5px var(--ink-4); flex: none; display: grid; place-items: center; border-radius: 50%; }
.player-side .ps-head h3 { font-family: var(--font-display); letter-spacing: -0.015em; }
.player-side .tick svg { width: 11px; height: 11px; stroke-width: 2.6; }
.player-top #tog { display: none; }
#view:focus { outline: none; }
.player-main { display: flex; flex-direction: column; min-width: 0; }
.player-top { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 5; }
.player-top > .strong { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; }
.player-body { flex: 1; padding: 52px 28px 88px; }
/* Lesefläche maximal 72 Zeichen breit */
.lesson { max-width: min(720px, 72ch); margin: 0 auto; }
.lesson > h1 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 32px; letter-spacing: -0.03em; }
.player-nav { max-width: min(720px, 72ch); margin: 44px auto 0; display: flex; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Bausteine */
.blk { margin: 0 0 24px; }
.blk-heading h2 { font-size: 26px; margin-top: 8px; }
.blk-text { font-size: 18px; line-height: 1.7; color: var(--ink); }
.blk-text p:last-child { margin-bottom: 0; }
.blk-callout { display: flex; gap: 14px; padding: 18px 20px; background: var(--sky); font-size: 16.5px; line-height: 1.6; box-shadow: inset 3px 0 0 var(--blue-deep); }
.blk-callout.success { background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); } .blk-callout.warning { background: var(--sun); box-shadow: inset 3px 0 0 var(--sun-deep); } .blk-callout.danger { background: var(--coral-tint); box-shadow: inset 3px 0 0 var(--coral); }
.blk-callout svg { margin-top: 3px; color: var(--blue-deep); }
.blk-callout.success svg { color: var(--ok); } .blk-callout.warning svg { color: var(--warn); } .blk-callout.danger svg { color: var(--bad); }
.blk-list ul, .blk-list ol { padding-left: 24px; margin: 0; }
.blk-list li { margin: 5px 0; }
.blk-image figure { margin: 0; } .blk-image img { width: 100%; } .blk-image figcaption { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.blk-video .vid { position: relative; padding-top: 56.25%; overflow: hidden; background: #000; }
.blk-video iframe, .blk-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-divider { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.acc { border: 1px solid var(--line); }
.acc details { border-top: 1px solid var(--line); } .acc details:first-child { border-top: 0; }
.acc summary { padding: 15px 18px; cursor: pointer; font-weight: 500; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 22px; color: var(--accent); font-weight: 300; line-height: 1; }
.acc details[open] summary::after { content: '−'; }
.acc details[open] summary { background: var(--brand-soft-2); }
.acc details > div { padding: 4px 18px 16px; color: var(--ink-2); line-height: 1.65; }
.flash { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.flash button { min-height: 140px; border: 1px solid var(--line); background: var(--surface); padding: 20px; font: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: center; color: var(--ink); transition: background .2s var(--ease); }
.flash button b { font-size: 17px; font-weight: 500; }
.flash button.flipped { background: var(--brand-soft); border-color: var(--brand-line); }
.flash button .back { display: none; line-height: 1.55; font-size: 15px; }
.flash button.flipped .front { display: none; } .flash button.flipped .back { display: block; }
.flash button .front { display: flex; flex-direction: column; gap: 8px; }
.flash .hint { display: block; font-size: 12.5px; color: var(--ink-3); }
.checklist label { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; font-size: 16px; }
.checklist input { width: 20px; height: 20px; accent-color: var(--accent); }
.quiz { border: 1px solid var(--line); padding: 24px; background: var(--surface); box-shadow: var(--sh-1); }
.quiz .q { font-weight: 600; font-size: 18px; margin-bottom: 14px; }
/* Wissensfragen: Antworten als eckige Wahlkarten – gewählt Mint mit 3px-Balken, richtig Akzent, falsch Koralle (immer auch mit Text) */
.opt { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border: 1px solid var(--line); margin-bottom: 8px; background: var(--surface); cursor: pointer; font-size: 16px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.opt:hover { border-color: var(--ink-4); background: var(--surface-2); }
.opt:has(input:checked) { border-color: var(--mint-2); background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); }
.opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.opt.right { border-color: var(--accent); background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); }
.opt.wrong { border-color: var(--coral); background: var(--coral-tint); box-shadow: inset 3px 0 0 var(--coral); }
.quiz .fb { margin-top: 12px; padding: 13px 16px; font-size: 15px; }
.quiz .fb.ok { background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); } .quiz .fb.no { background: var(--coral-tint); box-shadow: inset 3px 0 0 var(--coral); }
.file-dl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.done-screen { text-align: center; max-width: 560px; margin: 40px auto; position: relative; padding: 24px 12px; }
.done-screen h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.03em; }
.done-screen .big { width: 88px; height: 88px; background: var(--mint); color: var(--accent); display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; }
.done-screen .big svg { width: 40px; height: 40px; stroke-width: 2; }
.done-screen .ring { margin: 0 auto 26px; }
.done-screen p { font-size: 17px; }
.done-wrap { position: relative; min-height: 70vh; display: grid; place-items: center; }

/* ---------- Editor ---------- */
.editor { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 0; min-height: calc(100vh - var(--topbar-h)); margin: -8px -40px -72px; align-items: start; }
.ed-bar { position: sticky; top: var(--topbar-h); z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-column: 1 / -1; min-height: 62px; }
.ed-tree { background: var(--surface); padding: 16px 12px; overflow-y: auto; position: sticky; top: calc(var(--topbar-h) + 62px); height: calc(100vh - var(--topbar-h) - 62px); border-right: 1px solid var(--line); }
.ed-tree .mod { margin-bottom: 14px; }
.ed-tree .mod-h { display: flex; align-items: center; gap: 6px; padding: 4px 6px; color: var(--ink-3); }
.ed-tree .mod-h input { border: 0; background: transparent; font: inherit; font-weight: 500; font-size: 13.5px; flex: 1; min-width: 0; padding: 4px; color: var(--ink-2); }
.ed-tree .mod-h input:focus { background: var(--fill); outline: none; color: var(--ink); }
.ed-tree .les { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.ed-tree .les svg { color: var(--ink-3); }
.ed-tree .les:hover { background: var(--fill); }
.ed-tree .les.on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 500; }
.ed-tree .les.on svg { color: var(--brand); }
.ed-tree .les .tools, .ed-tree .mod-h .tools { margin-left: auto; display: none; gap: 2px; }
.ed-tree .les:hover .tools, .ed-tree .mod-h:hover .tools { display: flex; }
.mini { width: 26px; height: 26px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; padding: 0; }
.mini:hover { background: var(--fill-2); color: var(--ink); }
.mini svg { width: 14px; height: 14px; }
.ed-canvas { background: var(--canvas); padding: 32px 40px 120px; min-width: 0; }
.ed-paper { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); padding: 44px 52px 52px; color: var(--ink); }
.ed-paper .lesson-title { border: 0; font-family: var(--font-display); font-size: 32px; font-weight: 500; width: 100%; padding: 4px 0; margin-bottom: 20px; color: var(--ink); background: transparent; }
.ed-paper .lesson-title:focus { outline: none; box-shadow: inset 0 -2px 0 var(--brand-soft); }
.eblk { position: relative; border: 1px solid transparent; padding: 10px 14px; margin: 0 -15px 6px; }
.eblk:hover { border-color: var(--line); }
.eblk.sel { border-color: var(--brand); background: var(--brand-soft-2); }
.eblk .etools { position: absolute; top: -15px; right: 12px; display: none; gap: 0; background: var(--surface); border: 1px solid var(--line); }
.eblk:hover .etools, .eblk.sel .etools { display: flex; }
.eblk .etype { position: absolute; top: -11px; left: 12px; font-size: 11.5px; font-weight: 500; color: #fff; background: var(--brand); padding: 1px 8px; display: none; }
.eblk.sel .etype { display: block; }
.eblk textarea.inline, .eblk input.inline { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; resize: none; padding: 0; line-height: inherit; }
.eblk textarea.inline:focus, .eblk input.inline:focus { outline: none; }
.add-blk { display: flex; justify-content: center; margin: 16px 0; }
.blk-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.blk-palette button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: left; }
.blk-palette button svg { color: var(--accent); }
.blk-palette button:hover { border-color: var(--accent); background: var(--mint); }
.blk-palette button span { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.ed-side { background: var(--surface); padding: 20px 22px; overflow-y: auto; position: sticky; top: calc(var(--topbar-h) + 62px); height: calc(100vh - var(--topbar-h) - 62px); border-left: 1px solid var(--line); }
.ed-side h3 { font-size: 15px; margin-bottom: 12px; }
.comment { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.comment:first-child { border-top: 0; }
.comment .who { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin-bottom: 4px; }
.comment.resolved { opacity: .55; }
.opt-edit { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.opt-edit input[type=text] { flex: 1; }
form[data-att] { overflow-x: auto; }

/* ---------- Wiki ---------- */
.prose { font-size: 16.5px; line-height: 1.75; color: var(--ink); max-width: 72ch; }
.prose h1 { font-size: 34px; margin: 0 0 20px; }
.prose h2 { font-size: 23px; margin: 34px 0 12px; }
.prose h3 { font-size: 18px; margin: 24px 0 8px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin: 4px 0; }
.prose blockquote { margin: 18px 0; padding: 14px 20px; background: var(--mint); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); font-family: var(--font-display); font-size: 1.08em; letter-spacing: -0.01em; }
.prose code { background: var(--fill); padding: 2px 6px; font-size: .9em; }
.prose pre { background: var(--ink); color: #EEF2F1; padding: 16px; overflow-x: auto; font-size: 13.5px; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 14px; text-align: left; }
.prose th { background: var(--fill); font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.prose img { margin: 12px 0; }
.space-card { display: flex; gap: 16px; padding: 22px; color: var(--ink); text-decoration: none !important; }
.space-card:hover { border-color: var(--line); }

/* ---------- Login ---------- */
/* Anmeldung: links weisses Formular, rechts Mint-Fläche mit dem SONBAY-Zeichen und dem Leitsatz */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--canvas); }
.auth-main { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 32px 32px; }
.auth-form .inner { width: 100%; max-width: 440px; }
.auth-logo { display: inline-block; margin: 0 0 40px; padding: 4px 0; }
.auth-logo img { height: 44px; width: auto; max-width: 240px; object-fit: contain; }
.auth-logo img.sb-logo { height: 44px; width: 126px; max-width: none; }

.auth-form h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 12px; }
.auth-form .lead { color: var(--muted); font-size: 17px; margin-bottom: 30px; }
.auth-form .input { min-height: 48px; font-size: 16px; }
.auth-panel { position: relative; overflow: hidden; background: var(--mint); display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; min-height: 100%; }
.auth-panel > img.hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-panel.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,24,22,.62), rgba(20,24,22,0) 60%); }
.auth-sign { position: absolute; width: min(78%, 620px); height: auto; right: -14%; top: -6%; pointer-events: none; }
.auth-claim { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); max-width: 15ch; margin: 0; text-wrap: balance; }
.auth-panel.has-img .auth-claim { color: #fff; }
.acc-list .acc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; transition: background .15s var(--ease); }
.acc-list .acc:hover { border-color: var(--ink); background: var(--mint); }
.acc-list .acc svg { color: var(--ink-3); flex: none; }
.demo-logins { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.auth-foot { padding: 20px 32px 24px; display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--muted); }
.auth-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.auth-foot a:hover { color: var(--accent-strong); }
.auth-foot .credit { font-size: .8rem; color: var(--muted); }
/* öffentliche Zertifikatsprüfung */
.verify { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--canvas); position: relative; }
.verify .card { max-width: 580px; width: 100%; padding: 40px; box-shadow: var(--sh-2); }
.verify-ok { padding: 20px; background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); }
.verify-bad { padding: 20px; background: var(--coral-tint); box-shadow: inset 3px 0 0 var(--coral); }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { display: none; }
  .auth-main { border-top: 12px solid var(--mint); }
  .auth-form { align-items: flex-start; padding: 36px 20px 24px; }
  .auth-logo { margin-bottom: 28px; }
  .verify .card { padding: 26px 20px; }
}

/* ---------- Branding-Vorschau ---------- */
.preview-frame { border: 1px solid var(--line); overflow: hidden; background: var(--canvas); }
.pv-top { height: 44px; display: flex; align-items: center; padding: 0 16px; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 500; font-size: 14px; }
.pv-body { display: grid; grid-template-columns: 140px 1fr; min-height: 290px; }
.pv-side { padding: 12px 8px; font-size: 13px; border-right: 1px solid var(--line); }
.pv-side div { padding: 6px 8px; margin-bottom: 2px; }
.pv-main { padding: 16px; }
.pv-hero { padding: 20px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; background: var(--surface); border: 1px solid var(--line); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.pv-hero b { font-size: 18px; font-weight: 500; position: relative; } .pv-hero span { font-size: 13px; opacity: .8; position: relative; margin-top: 4px; }

/* ---------- Status-Punkte ---------- */
.status-dot { width: 9px; height: 9px; display: inline-block; background: var(--ink-4); border-radius: 50%; }
.status-dot.ok { background: var(--ok-mark); } .status-dot.warn { background: var(--warn-mark); } .status-dot.bad { background: var(--bad-mark); }

/* ---------- Responsive ---------- */
/* Geräte-Vorschau */
.dp { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #E4E9E7; animation: fade .15s var(--ease); }
.dp-bar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dp-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; line-height: 1.3; }
.dp-seg button { display: inline-flex; align-items: center; gap: 8px; }
.dp-seg svg { width: 16px; height: 16px; }
.dp-tools { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: flex-end; }
.dp-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.dp-fit { position: relative; }
.dp-device { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #1E2624; box-shadow: 0 24px 60px rgba(20, 30, 28, .22); transition: width .2s var(--ease), height .2s var(--ease); }
.dp-device.pc { background: #fff; outline: 1px solid var(--line); }
.dp-device iframe { display: block; border: 0; background: #fff; }
.dp-chrome { display: none; }
.dp-device.pc .dp-chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #EEF1F0; border-bottom: 1px solid var(--line); }
.dp-chrome i { width: 9px; height: 9px; background: #C9D1CE; }
.dp-chrome span { margin-left: 14px; font-size: 12px; color: var(--ink-3); background: #fff; padding: 2px 12px; }
.dp-note { text-align: center; padding: 0 16px 12px; }
@media (max-width: 760px) { .dp-hide-s, .dp-seg span { display: none; } .dp-bar { gap: 10px; padding: 8px 12px; } }

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .welcome { grid-template-columns: minmax(0, 1fr); }
  .editor { grid-template-columns: 240px minmax(0, 1fr); }
  .editor .ed-side { display: none; }
  .editor.show-side .ed-side { display: block; position: fixed; right: 0; top: var(--topbar-h); width: 360px; z-index: 40; box-shadow: var(--shadow-pop); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .top-logo { display: flex; align-items: center; }
  .ops-strip { padding: 7px 16px; }
  .kpis.g4 > .kpi { box-shadow: 0 -1px 0 var(--line), -1px 0 0 var(--line); }
  .sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-pop); }
  .app.nav-open .sidebar { transform: none; }
  .menu-burger { display: grid; }
  .topbar { padding: 0 12px; height: 64px; }
  .content { padding: 8px 16px 48px; }
  h1 { font-size: 30px; }
  .g2, .g3, .g-side { grid-template-columns: minmax(0, 1fr); }
  .form-row, .form-row.three { grid-template-columns: 1fr; }
  .player { grid-template-columns: 1fr; }
  .player-side { display: none; }
  .player-top #tog { display: grid; }
  .player.show-side .player-side { display: block; position: fixed; inset: 0 20% 0 0; z-index: 30; }
  .player-body { padding: 32px 18px 64px; }
  .lesson > h1, .done-screen h1 { font-size: 30px; }
  .editor { grid-template-columns: 1fr; margin: -8px -16px -48px; }
  .ed-tree { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .ed-canvas { padding: 16px 12px 80px; }
  .ed-paper { padding: 24px 18px; }
  .hero { padding: 26px 22px; } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .hero-stats { gap: 20px; }
  .next-up { padding: 24px 22px; }
  .course-hero { grid-template-columns: 1fr; padding: 24px 20px; } .course-hero > .app-icon, .course-hero > img { grid-row: auto; margin-bottom: 18px !important; }
  .course-hero h1 { font-size: 30px; }
  .timetable li { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 16px; }
  .timetable li > :last-child { grid-column: 2; }
  .tt-date { width: 56px; height: 54px; }
  .bar-row { grid-template-columns: 100px minmax(0, 1fr) 40px; }
  .search { max-width: none; }
  .user-btn .uname { display: none; }
  .popover { right: 8px; left: 8px; width: auto; }
  .card-head, .card-body, .card-pad { padding-left: 18px; padding-right: 18px; }
  .list > li { padding-left: 18px; padding-right: 18px; }
  .auth-form .inner { padding: 28px 22px; }
}
@media (max-width: 560px) { .g4 { grid-template-columns: minmax(0, 1fr); } .blk-palette { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .btn:hover, .ccard:hover, a.card:hover, .card.interactive:hover, .timetable.chain li:hover { transform: none !important; } }
@media print { .sidebar, .topbar, .actions, .ops-strip, .sb-float { display: none !important; } .app { display: block; } .card { break-inside: avoid; } * { box-shadow: none !important; } }

/* ===================== Bausteine (Rise-kompatibel) ===================== */
.player-body { overflow-x: hidden; }
.blk-band { margin: 0 -48px 24px; padding: 40px 48px; background: var(--band); }
.blk-band > .blk { margin-bottom: 0; }
.blk-band.on-dark, .blk-band.on-dark .blk-text, .blk-band.on-dark h2, .blk-band.on-dark h3 { color: #fff; }
.blk-band.on-dark .blk-text [style*="color: rgb(0, 0, 0)"], .blk-band.on-dark .blk-text [style*="color: #000000"] { color: #fff !important; }
.blk-text h2 { font-size: 26px; margin: 0 0 14px; } .blk-text h3 { font-size: 21px; margin: 0 0 10px; }
.blk-text a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.blk-band.on-dark .blk-text a { color: #fff; }
.blk-text p { margin: 0 0 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.tbl { overflow-x: auto; } .tbl table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; } .tbl th { background: var(--brand-soft); font-weight: 600; }
.stmt { font-size: 22px; line-height: 1.5; }
.stmt p { margin: 0 0 10px; } .stmt p:last-child { margin: 0; }
.stmt-a { border-top: 4px solid var(--brand); border-bottom: 4px solid var(--brand); padding: 26px 0; text-align: center; }
.stmt-b { font-size: 28px; font-weight: 300; padding: 12px 0; text-align: center; }
.stmt-c { padding: 6px 0 6px 26px; box-shadow: inset 4px 0 0 var(--brand); }
.stmt-c strong { color: var(--brand-deep); }
.stmt-d { padding: 28px 30px; background: var(--brand); color: #fff; }
.stmt-note { font-size: 17px; padding: 20px 24px; background: var(--brand-soft); display: flex; gap: 14px; }
.stmt-note::before { content: ''; flex: none; width: 4px; background: var(--brand); }
.quote { margin: 0 0 18px; padding: 28px; background: var(--surface-2); text-align: center; }
.quote blockquote { margin: 0; font-size: 20px; line-height: 1.55; }
.quote blockquote p { margin: 0 0 8px; }
.quote figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-3); }
.q-av { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; margin: 0 auto 16px; display: block; }
.quote-a { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-b { background: transparent; } .quote-b blockquote { font-size: 25px; font-weight: 300; } .quote-b figcaption { color: var(--brand-deep); }
.quote-c { background: transparent; text-align: left; display: grid; grid-template-columns: 150px 1fr; gap: 0 28px; align-items: start; padding: 10px 0; }
.quote-c .q-av { width: 150px; height: 150px; border-radius: 0; margin: 0; grid-row: span 2; }
.quote-c blockquote { box-shadow: inset 4px 0 0 var(--brand); padding-left: 20px; } .quote-c figcaption { padding-left: 24px; }
.quote-d { background: var(--brand-soft); text-align: left; display: grid; grid-template-columns: 84px 1fr; gap: 0 22px; align-items: start; }
.quote-d .q-av { margin: 0; grid-row: span 2; }
@media (max-width: 600px) { .quote-c, .quote-d { grid-template-columns: 1fr; } .quote-c .q-av { width: 110px; height: 110px; margin-bottom: 12px; } .quote-d .q-av { margin-bottom: 12px; } }
.quote-bg { position: relative; padding: 70px 48px; margin: 0 -48px 24px; background: #1E2624 var(--qbg) center/cover; }
.quote-bg::before { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 28, .55); }
.quote-bg .quote { position: relative; background: transparent; color: #fff; } .quote-bg figcaption { color: rgba(255,255,255,.85); }
.carousel { position: relative; }
.car-slide { display: none; } .car-slide.on { display: block; animation: fade .25s var(--ease); }
.car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.car-dots { display: flex; gap: 6px; } .car-dots i { width: 8px; height: 8px; background: var(--line); } .car-dots i.on { background: var(--brand); }
.img-full img, .img-banner img { width: 100%; }
.img-banner img { aspect-ratio: 3 / 1; object-fit: cover; }
.img-centered figure { max-width: 620px; margin: 0 auto; }
.img-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; }
.img-aside img { width: 100%; }
.img-overlay { margin: 0 -48px 24px; min-height: 360px; background: #1E2624 var(--img) center/cover; display: flex; align-items: center; justify-content: center; position: relative; }
.img-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 28, .45); }
.img-overlay .ov-text { position: relative; color: #fff; font-size: 24px; line-height: 1.45; text-align: center; max-width: 640px; padding: 48px 24px; }
.img-overlay .ov-text * { color: #fff !important; }
.img-hero { min-height: 420px; }
.gallery { display: grid; gap: 12px; } .gallery.grid2 { grid-template-columns: repeat(2, 1fr); } .gallery.grid3 { grid-template-columns: repeat(3, 1fr); } .gallery.grid4 { grid-template-columns: repeat(4, 1fr); }
.gallery figure, .gal-car figure { margin: 0; } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gal-car img { width: 100%; }
.gallery figcaption, .gal-car figcaption { font-size: 14px; color: var(--ink-3); margin-top: 6px; }
.blk-audio audio { width: 100%; }
.vid-empty { position: relative; padding-top: 30%; } .vid-empty { display: grid; place-items: center; color: #fff; }
.embed-card { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.embed-card img { width: 120px; height: 68px; object-fit: cover; } .embed-card > span:last-child { display: flex; flex-direction: column; gap: 4px; }
pre.code { background: #1E2624; color: #E9EFED; padding: 18px 20px; overflow-x: auto; font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace; margin: 0; white-space: pre; }
.blk-space { height: 40px; }
.blk-num { display: flex; align-items: center; gap: 16px; margin: 32px 0; } .blk-num::before, .blk-num::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.blk-num span { width: 40px; height: 40px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 600; }
.acc-img { width: 100%; margin-bottom: 12px; }
.tabs-blk { border: 1px solid var(--line); }
.tab-bar { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tab-bar button { border: 0; background: none; padding: 14px 18px; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-bar button.on { color: var(--brand-deep); border-bottom-color: var(--brand); font-weight: 600; background: var(--surface); }
.tab-pane { display: none; padding: 22px; } .tab-pane.on { display: block; }
.flash button.rich { padding: 0; min-height: 220px; position: relative; overflow: hidden; }
.flash button.rich .front, .flash button.rich .back { display: flex; flex-direction: column; gap: 10px; padding: 20px; height: 100%; justify-content: center; }
.flash button.rich .back { display: none; } .flash button.rich.flipped .front { display: none; } .flash button.rich.flipped .back { display: flex; }
.flash button.rich img { width: 100%; max-height: 150px; object-fit: cover; }
.flash button.rich .full { background-size: cover; background-position: center; color: #fff; min-height: 220px; }
.flash button.rich .full .fc-t { background: rgba(20,30,28,.55); padding: 10px 12px; }
.flash .fc-t p { margin: 0 0 6px; } .flash .fc-t [style*="font-size"] { font-size: 17px !important; }
.hotspots { position: relative; } .hotspots > img { width: 100%; display: block; }
.hs-dot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border: 3px solid #fff; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.25); animation: pulse 2.4s infinite; }
.hs-dot.seen { background: var(--brand-deep); animation: none; } .hs-dot.on { background: var(--accent-2); color: #1D1D1B; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 25%, transparent); } }
.hs-pop { display: none; position: absolute; left: clamp(8px, calc(var(--x) * 1% - 160px), calc(100% - 328px)); top: calc(var(--y) * 1% + 24px); width: 320px; max-width: calc(100% - 16px); background: var(--surface); box-shadow: var(--shadow-pop); padding: 16px 18px; z-index: 3; }
.hs-pop.on { display: block; animation: drop .18s var(--ease); } .hs-x { position: absolute; top: 6px; right: 6px; }
.process { border: 1px solid var(--line); background: var(--surface); }
.pr-slide { display: none; padding: 28px; } .pr-slide.on { display: block; animation: fade .2s var(--ease); }
.pr-slide img { max-width: 100%; margin: 6px 0 14px; }
.pr-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.tline { position: relative; padding-left: 26px; } .tline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; margin-bottom: 28px; } .tl-item::before { content: ''; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; background: var(--brand); }
.tl-date { font-size: 13px; color: var(--brand-deep); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.tl-body { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; } .tl-body h3 { margin: 0 0 10px; font-size: 19px; }
.tl-body img { width: 100%; margin-top: 12px; } .tl-body .vid { margin-top: 12px; position: relative; padding-top: 56.25%; background: #000; } .tl-body .vid video, .tl-body .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-band .tl-body, .blk-band .process { color: var(--ink); } .blk-band .tl-body .blk-text, .blk-band .process .blk-text { color: var(--ink); }
.sorting { border: 1px solid var(--line); padding: 20px; background: var(--surface); color: var(--ink); }
.sort-deck { display: grid; gap: 10px; margin-bottom: 18px; }
.sort-card { padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sort-card.ok { background: var(--ok-soft); border-color: var(--ok-mark); padding: 8px 12px; font-size: 14.5px; }
.sort-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sort-pile { border: 1.5px dashed var(--line-strong, var(--line)); padding: 12px; min-height: 90px; } .sort-in { display: grid; gap: 6px; margin-top: 8px; }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.scen { color: var(--ink); }
.scen-stage { position: relative; min-height: 420px; background: #2E3836 var(--scen-bg) center/cover; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; padding: 28px; gap: 20px; }
.scen-char img { width: 100%; max-height: 400px; object-fit: contain; object-position: bottom; display: block; }
.scen-card { background: var(--surface); padding: 22px 24px; align-self: center; box-shadow: var(--shadow-pop); }
.scen-card h3 { margin: 0 0 10px; }
.scen-resp { display: grid; gap: 8px; margin-top: 14px; }
.scen-r { text-align: left; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); }
.scen-r:hover { border-color: var(--brand); background: var(--brand-soft); } .scen-r p { margin: 0; }
.btns .btn-row { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.btns .btn-row:last-child { border-bottom: 0; } .btns .btn-row .blk-text { flex: 1 1 260px; font-size: 16px; } .btns .btn-row .blk-text p:last-child { margin: 0; }
.survey { border: 1px solid var(--line); padding: 22px; background: var(--surface); color: var(--ink); }
.survey .q { font-weight: 500; font-size: 17px; margin-bottom: 14px; }
.scale { display: flex; gap: 8px; margin-bottom: 8px; } .scale button { flex: 1; padding: 12px 0; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.scale button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.chart h3 { font-size: 19px; margin: 0 0 12px; } .chart svg { width: 100%; height: auto; display: block; } .chart .cv { font-size: 13px; fill: var(--ink-2); } .chart .cl { font-size: 13px; fill: var(--ink-3); }
.chart-pie { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 28px; align-items: center; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; } .legend i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; }
.cv-wrap { position: relative; overflow: hidden; }
.cv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cv-n { position: absolute; overflow: hidden; } .cv-img { background-size: cover; background-position: center; }
.cv-t { position: absolute; inset: 0; display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; }
.cv-t h1, .cv-t h2, .cv-t h3, .cv-t h4, .cv-t p { margin: 0; font-size: inherit; }
.blk-continue { text-align: center; margin: 12px 0 32px; } .blk-continue .btn { min-width: 220px; }
.blk-continue.done { display: none; }
.match { display: grid; gap: 8px; } .match-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); }
.match-row.right { border-color: var(--ok-mark); background: var(--ok-soft); } .match-row.wrong { border-color: var(--bad-mark); background: var(--bad-soft); }
.match-row .xs { grid-column: 3; }
.fill-in.right { border-color: var(--ok-mark); background: var(--ok-soft); } .fill-in.wrong { border-color: var(--bad-mark); background: var(--bad-soft); }
.quiz .q p { margin: 0 0 6px; } .quiz .q [style*="font-size"] { font-size: inherit !important; } .opt p { margin: 0; } .opt [style*="font-size"] { font-size: inherit !important; }
@media (max-width: 900px) {
  .blk-band, .quote-bg, .img-overlay { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .img-aside, .scen-stage, .chart-pie { grid-template-columns: 1fr; }
  .scen-char img { max-height: 220px; }
  .gallery.grid3, .gallery.grid4 { grid-template-columns: repeat(2, 1fr); }
  .stmt { font-size: 19px; } .stmt-b { font-size: 23px; }
  .match-row { grid-template-columns: 1fr; } .match-row > svg { display: none; } .match-row .xs { grid-column: 1; }
}

/* SCORM-Player */
.scorm-wrap { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--surface); }
.scorm-wrap .player-top { flex: none; }
.scorm-wrap iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.app-icon.sm { width: 30px; height: 30px; } .app-icon.sm svg { width: 15px; height: 15px; }

/* Import */
.drop { border: 1.5px dashed var(--line-strong, var(--line)); padding: 40px 24px; text-align: center; background: var(--canvas); }
.drop.over { border-color: var(--brand); background: var(--brand-soft); } .drop .lico { margin: 0 auto 12px; }
.imp-opt { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); cursor: pointer; }
.imp-opt.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft-2, var(--brand-soft)); }
.imp-opt input { margin-top: 4px; accent-color: var(--brand); } .imp-opt > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 0; font-size: 15px; } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.app-icon.lg { width: 56px; height: 56px; } .app-icon.lg svg { width: 26px; height: 26px; }

/* ===================== Autorentool: Bearbeitungsmasken ===================== */
.eblk .eblk-prev { pointer-events: none; }
.eblk:not(.sel) { cursor: pointer; }
.eblk .eblk-prev .blk { margin-bottom: 0; }
.eblk .eblk-prev .blk-band, .eblk .eblk-prev .quote-bg, .eblk .eblk-prev .img-overlay { margin-left: 0; margin-right: 0; }
.eblk.sel .eblk-live .eblk-prev { pointer-events: auto; }
.eblk-empty { padding: 18px; border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 14px; text-align: center; }
.eblk-form { background: var(--surface); border: 1px solid var(--line); padding: 16px; margin: 8px 0 12px; }
.eblk-live { border-top: 1px dashed var(--line); padding-top: 10px; }
.fe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.fe { min-width: 0; } .fe.wide, .fe-list { grid-column: 1 / -1; }
.fe-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.select-sm { min-height: 36px; padding: 6px 30px 6px 10px; font-size: 14px; }
textarea.mono { font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.rte { min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.rte:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.rte:empty::before { content: attr(data-ph); color: var(--ink-4); }
.rte p { margin: 0 0 8px; } .rte p:last-child { margin: 0; } .rte h2 { font-size: 22px; margin: 0 0 8px; } .rte h3 { font-size: 18px; margin: 0 0 6px; } .rte ul, .rte ol { margin: 0 0 8px; padding-left: 22px; }
.rte-inline { min-height: 38px; padding: 7px 10px; font-size: 15px; }
.rte-h { font-size: 20px; font-weight: 600; }
.rte-bar { position: absolute; z-index: 120; display: flex; flex-wrap: wrap; gap: 2px; background: #1E2624; padding: 4px; box-shadow: var(--shadow-pop); }
.rte-bar button { border: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; padding: 5px 9px; cursor: pointer; min-width: 30px; }
.rte-bar button:hover { background: rgba(255,255,255,.14); } .rte-bar .sep { width: 1px; background: rgba(255,255,255,.2); margin: 3px 2px; }
.rte-bar button[hidden] { display: none; }
.fe-media { display: grid; gap: 8px; }
.fe-img { width: 100%; max-height: 180px; object-fit: contain; background: var(--canvas); border: 1px solid var(--line); }
.fe-empty { display: flex; align-items: center; gap: 8px; padding: 14px; border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 13px; }
.fe-lh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fe-item { border: 1px solid var(--line); background: var(--surface-2); padding: 10px 12px; margin-bottom: 8px; }
.fe-item .fe-item { background: var(--surface); }
.fe-ih { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .fe-ih .tools { display: flex; }
.tbl-edit table { border-collapse: collapse; width: 100%; } .tbl-edit td { border: 1px solid var(--line); padding: 0; vertical-align: top; }
.tbl-edit td.th { background: var(--brand-soft); font-weight: 600; } .tbl-edit .rte { border: 0; background: transparent; min-height: 34px; }
.tbl-edit td.tbl-x { border: 0; width: 34px; text-align: center; }
.hs-edit { position: relative; cursor: crosshair; } .hs-edit img { width: 100%; display: block; } .hs-edit .hs-dot { animation: none; }
.pose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pose { border: 1px solid var(--line); background: var(--surface); padding: 6px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.pose img { width: 100%; height: 70px; object-fit: contain; } .pose .fe-empty { height: 70px; width: 100%; justify-content: center; padding: 0; }
.blk-palette button span { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 760px) { .fe-grid { grid-template-columns: 1fr; } }
.ed-paper textarea.lesson-title { resize: none; overflow: hidden; line-height: 1.2; display: block; }
.rte-bar .sep[hidden] { display: none; }
.lesson { min-width: 0; } .blk-text, .stmt, .quote blockquote, .tl-body, .scen-card, .fc-t, .cv-t { overflow-wrap: anywhere; }
/* Helle Karten auf dunklen Farbbändern behalten dunkle Schrift */
.blk-band.on-dark :is(.quiz, .quote, .tab-bar, .hs-pop, .process, .tl-body, .sorting, .sort-card, .scen-card, .scen-r, .survey) { color: var(--ink); }
.blk-band.on-dark :is(.quiz, .quote, .process, .tl-body, .sorting, .scen-card, .survey) :is(h2, h3, .blk-text) { color: var(--ink); }
/* Zielgruppen & Freigaben */
/* Hinweise: Info Sky, Erfolg Mint, Achtung Sun, Fehler Koralle – je mit 3px-Balken und Symbol */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: var(--sky); color: var(--ink); font-size: 14.5px; line-height: 1.55; box-shadow: inset 3px 0 0 var(--blue-deep); }
.notice > svg { flex: none; margin-top: 2px; color: var(--blue-deep); }
.notice.ok { background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); } .notice.ok > svg { color: var(--accent); }
.notice.warn { background: var(--sun); box-shadow: inset 3px 0 0 var(--sun-deep); } .notice.warn > svg { color: var(--sun-deep); }
.notice.bad { background: var(--coral-tint); box-shadow: inset 3px 0 0 var(--coral); } .notice.bad > svg { color: var(--coral); }
.acc-list { border: 1px solid var(--line); }
.zg-row { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.zg-row:first-child { border-top: 0; }
.zg-row.off { opacity: .55; }
.zg-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.zg-num .chip { margin-top: 2px; }
.req-row { display: flex; gap: 14px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line); }
.req-row:first-child { border-top: 0; }
@media (max-width: 640px) { .zg-row, .req-row { flex-wrap: wrap; } }
/* Detail-Auswertungen */
.mt4 { margin-top: 4px; }
.t.compact td { padding: 8px 12px; }
.qa { border: 1px solid var(--line); padding: 18px 20px; }
.qa-rate { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; color: var(--ink); }
.qa-rate .tnum { font-size: 26px; font-weight: 600; line-height: 1.1; }
.qa-rate.mid .tnum { color: var(--warn); } .qa-rate.low .tnum { color: var(--bad); }
.dist { display: grid; gap: 8px; }
.dist-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) auto; gap: 12px; align-items: center; }
.dist-l { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 14px; }
.dist-track { height: 10px; background: var(--fill-2); position: relative; }
.dist-track i { position: absolute; inset: 0 auto 0 0; background: var(--ink-4); border-radius: 0 4px 4px 0; min-width: 2px; }
.dist-track i.ok { background: var(--ok); } .dist-track i.warn { background: var(--warn); }
.ok-mark, .bad-mark { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ok); border-radius: 50%; }
.ok-mark svg, .bad-mark svg { width: 13px; height: 13px; }
.bad-mark { background: var(--bad); } .ok-mark.none { background: transparent; }
.wk { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 170px; }
.wk-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; outline: none; }
.wk-bar { flex: 1; position: relative; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.wk-bar i { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; display: block; }
.wk-col:hover .wk-bar i, .wk-col:focus .wk-bar i { background: var(--brand-deep); }
.wk-tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 5px 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.wk-col:hover .wk-tip, .wk-col:focus .wk-tip { opacity: 1; }
.wk-l { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pr-course { border-top: 1px solid var(--line); }
.pr-course > summary { display: flex; gap: 16px; align-items: center; padding: 14px 24px; cursor: pointer; list-style: none; }
.pr-course > summary::-webkit-details-marker { display: none; }
.pr-course > summary:hover { background: var(--fill-1, var(--brand-soft-2)); }
.pr-course[open] > summary { background: var(--brand-soft-2); }
.pr-meta { display: flex; gap: 14px; align-items: center; flex: none; }
.pr-body { padding: 8px 24px 22px; }
.ans { border-left: 3px solid var(--line); padding: 6px 0 6px 14px; }
.ans-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 14px; }
@media (max-width: 720px) { .pr-course > summary { flex-wrap: wrap; } .wk { gap: 3px; } .wk-l { font-size: 9px; } .dist-row { grid-template-columns: 1fr auto; } .dist-row .dist-track { grid-column: 1 / -1; grid-row: 2; } }
@media print { .pr-course > summary { padding: 8px 0; } .wk-tip { display: none; } .actions, .tabs, .crumbs { display: none !important; } .qa { break-inside: avoid; } }
/* ===================== Sanfte Übergänge (wie Rise) ===================== */
/* Einblenden beim Scrollen: einzelne Bausteine bzw. gestaffelte Elemente */
.sa:not(.sa-group), .sa.sa-group > * { opacity: 0; transition: opacity 1s ease-out, translate 1s ease-out, scale 1s ease-out; transition-delay: calc(.12s + var(--idx, 0) * var(--sa-step, .15s)); will-change: opacity, translate; }
.sa.sa-up:not(.sa-group), .sa.sa-up.sa-group > * { translate: 0 25px; }
.sa.sa-right.sa-group > * { translate: 50px 0; }
.sa.sa-grow:not(.sa-group) { scale: .95; }
.sa.sa-in:not(.sa-group), .sa.sa-in.sa-group > * { opacity: 1; translate: none; scale: none; }
/* Lektionswechsel: Kopf weich einblenden */
.lesson-enter > .small:first-child, .lesson-enter > h1 { animation: riseIn .7s ease-out both; }
.lesson-enter > h1 { animation-delay: .08s; }
@keyframes riseIn { from { opacity: 0; translate: 0 18px; } }
@keyframes fadeSoft { from { opacity: 0; } }
/* Interaktionen */
.quiz .fb { animation: riseIn .45s ease-out both; }
.tab-pane.on { animation: fadeSoft .35s ease-out; }
.car-slide.on { animation: fadeSoft .5s ease-out; }
.acc details[open] > div { animation: riseIn .35s ease-out both; }
.gate:not([hidden]) { animation: fadeSoft .4s ease-out; }
.done-screen { animation: riseIn .6s ease-out both; }
.hs-pop.on, .scen-card { animation: fadeSoft .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .sa:not(.sa-group), .sa.sa-group > * { opacity: 1 !important; translate: none !important; scale: none !important; } }
@media print { .sa:not(.sa-group), .sa.sa-group > * { opacity: 1 !important; translate: none !important; scale: none !important; } }

/* ===================== Lernfenster+ (Zusatzmodul) ===================== */
/* Gemeinsam: das Lernfenster löst sich vom LMS – Navigation als Schublade, grosser Lektionskopf, viel Luft */
.lw.player { grid-template-columns: minmax(0, 1fr); position: relative; isolation: isolate; color: var(--ink); }
.lw .player-side { display: none; }
.lw.show-side .player-side { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); height: auto; z-index: 30; box-shadow: 0 0 80px rgba(0, 0, 0, .28); }
.lw .player-top #tog { display: grid; }
.lw .player-main { background: transparent; position: relative; z-index: 1; }
.lw .player-top { background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: transparent; }
.lw .player-body { padding-top: 0; }
.lw .lesson { max-width: 760px; }
.lw .lesson > .small:first-child { padding-top: 14vh; font-size: 16px; }
.lw .lesson > h1 { font-size: clamp(40px, 6.2vw, 82px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20vh; }
.lw .lesson > .blk, .lw .lesson > .blk-band, .lw .gate > .blk, .lw .gate > .blk-band { margin-bottom: 9vh; }
.lw .player-nav { border-top: 0; margin-top: 16vh; }
.lw-prog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); z-index: 40; animation: lwProg linear both; animation-timeline: scroll(); pointer-events: none; }
@keyframes lwProg { to { transform: scaleX(1); } }
.lw-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lw-deco i { position: absolute; display: block; }

/* A · Tiefenschärfe: unscharf aus der Tiefe – scharf in der Bildmitte – zurück in die Tiefe */
.lw-focus.player { background: color-mix(in srgb, var(--brand) 6%, #F2F6F0); }
.lw-focus .b3 { background: radial-gradient(circle, color-mix(in srgb, var(--logo-blue) 34%, transparent), transparent 70%) !important; }
.lw-focus .lw-blob { border-radius: 50%; animation: lwDrift linear both; animation-timeline: scroll(); }
.lw-focus .b1 { width: 640px; height: 640px; left: -180px; top: 8vh; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%); --dx: -60px; --dy: -24vh; }
.lw-focus .b2 { width: 500px; height: 500px; right: -140px; top: 46vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 70%); --dx: 80px; --dy: -60vh; }
.lw-focus .b3 { width: 380px; height: 380px; left: 48%; top: 90vh; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%); --dx: -30px; --dy: -110vh; }
@keyframes lwDrift { to { transform: translate3d(var(--dx), var(--dy), 0); } }
.lw-focus .lesson > :not(.small):not(h1):not(.gate), .lw-focus .gate > *, .lw-focus .player-nav { animation: lwFocusIn linear both, lwFocusOut linear forwards; animation-timeline: view(), view(); animation-range: entry 0% entry 100%, exit 0% exit 100%; }
@keyframes lwFocusIn { from { opacity: .1; transform: perspective(1100px) translate3d(0, 60px, -260px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lwFocusOut { from { opacity: 1; transform: none; filter: none; } to { opacity: .28; transform: perspective(1100px) translate3d(0, -40px, -150px); filter: blur(4px); } }

/* B · Bühne: dunkles Lernfenster, aktive Inhalte im Licht, Merksätze öffnen sich wie ein Scheinwerfer */
.lw-stage.player {
  --ink: #E9F1EE; --ink-2: #C5D5D1; --ink-3: #9CB2AD; --muted: #9CB2AD; --ink-4: #6E8681; color-scheme: dark;
  --mint: color-mix(in srgb, var(--brand) 30%, #091412); --mint-2: color-mix(in srgb, var(--brand) 42%, #091412); --sky: #1A2833; --sun: #322B16; --coral: #F2A48C; --coral-tint: #3E2018;
  --accent: color-mix(in srgb, var(--brand) 45%, white); --accent-strong: color-mix(in srgb, var(--brand) 30%, white); --blue-deep: #8EC1E3; --sun-deep: #F2CF68;
  --btn-bg: #E9F1EE; --btn-ink: #0B1513; --btn-hover: var(--logo-green); --btn-hover-ink: #0B1513;
  --canvas: color-mix(in srgb, var(--brand) 22%, #07100F); --surface: color-mix(in srgb, var(--brand) 14%, #091412);
  --surface-2: color-mix(in srgb, var(--brand) 22%, #0D1B19); --fill: color-mix(in srgb, var(--brand) 26%, #0F1F1D); --fill-2: color-mix(in srgb, var(--brand) 32%, #12231F);
  --line: rgba(233, 241, 238, .16); --line-2: rgba(233, 241, 238, .09);
  --brand-soft: color-mix(in srgb, var(--brand) 36%, #091412); --brand-soft-2: color-mix(in srgb, var(--brand) 24%, #091412); --brand-line: color-mix(in srgb, var(--brand) 60%, #091412);
  --brand-deep: color-mix(in srgb, var(--brand) 38%, white); --link: color-mix(in srgb, var(--brand) 40%, white);
  --ok: #8FD9B2; --ok-soft: #173A2C; --bad: #F2A48C; --bad-soft: #3E2018; --warn: #F2C879; --warn-soft: #3B2E14;
  background: var(--surface); color: var(--ink);
}
.lw-stage .lesson :is([style*="color: rgb(0, 0, 0)"], [style*="color: #000000"], [style*="color:#000"], [style*="color: rgb(36, 48, 46)"]) { color: inherit !important; }
/* helle Farbbänder (z.B. aus Rise) behalten helle Farben und dunkle Schrift */
.lw-stage :is(.blk-band, .cv-wrap) { --canvas: #FFFFFF; --ink: #1D1D1B; --ink-2: #3B443F; --ink-3: #55605A; --muted: #55605A; --ink-4: #8C968F; --surface: #FFFFFF; --surface-2: #F7F9F6; --fill: #F2F5F0; --fill-2: #E8EDE5; --line: #E1E6DF; --line-2: #EBEFE9; --mint: #EBF7E3; --mint-2: #D9EFCB; --sky: #D3E5F0; --sun: #FCE8AC; --accent: var(--brand); --accent-strong: #1F5C38; --coral: #B94A35; --coral-tint: #FBE6E0; --coral-ink: #A8412E; --brand-soft: color-mix(in srgb, var(--brand) 12%, white); --brand-soft-2: color-mix(in srgb, var(--brand) 6%, white); --brand-deep: color-mix(in srgb, var(--brand) 80%, black); --link: var(--brand); --ok: #2B6E4F; --ok-soft: #E3F1EA; --bad: #9A3E1E; --bad-soft: #FBEDE6; --warn: #7E5410; --warn-soft: #FCEFD9; }
.lw-stage .blk-band:not(.on-dark) { color: var(--ink); }
/* freie Grafiken (z.B. aus Rise) sind für hellen Grund gestaltet: im Lichtkasten zeigen */
/* Bilder mit transparentem Hintergrund (Grafiken mit dunkler Schrift) brauchen hellen Grund */
.lw-stage :is(.blk-image, .gallery, .hotspots, .tl-item, .process) img { background: #F6F8F7; border-radius: 14px; }
.lw-stage .cv-wrap { background: #F6F8F7; border-radius: 22px; padding: 18px; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.lw-stage .lw-glow { left: 50%; top: -30vh; width: 120vw; height: 90vh; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 38%, transparent), transparent); opacity: .55; }
.lw-stage .lesson > h1, .lw-stage .lesson > .small:first-child { animation: riseIn .9s cubic-bezier(.2, .7, .2, 1) both, lwRecede linear forwards; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
@keyframes lwRecede { to { opacity: .08; transform: perspective(1000px) translateZ(-240px); } }
.lw-stage .lesson > :not(.small):not(h1):not(.gate), .lw-stage .gate > *, .lw-stage .player-nav { animation: lwLightIn linear both, lwLightOut linear forwards; animation-timeline: view(), view(); animation-range: entry 0% entry 100%, exit 0% exit 100%; }
@keyframes lwLightIn { from { opacity: .16; translate: 0 50px; } to { opacity: 1; translate: none; } }
@keyframes lwLightOut { from { opacity: 1; } to { opacity: .2; } }
.lw-stage :is(.blk-image, .gallery figure) { overflow: hidden; }
.lw-stage :is(.blk-image, .gallery figure) img { animation: lwZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
@keyframes lwZoom { from { scale: 1.14; } to { scale: 1; } }
.lw-stage .lesson :is(.stmt, .quote-bg, .blk-callout), .lw-stage .gate :is(.stmt, .quote-bg, .blk-callout) { animation: lwSpot linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
@keyframes lwSpot { from { clip-path: circle(8% at 50% 55%); } to { clip-path: circle(85% at 50% 55%); } }

/* C · Raumstapel: ein Boden mit Fluchtlinien, Inhalte als Karten, die aufstehen und nach hinten kippen */
.lw-space.player { background: linear-gradient(180deg, #E6F0F5, color-mix(in srgb, var(--brand) 7%, #EEF3EA)); }
.lw-space .lw-floor { left: -50%; right: -50%; bottom: -12vh; height: 72vh; transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%; background-image: linear-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 85%); mask-image: linear-gradient(to top, #000 20%, transparent 85%); animation: lwFloor linear both; animation-timeline: scroll(); }
@keyframes lwFloor { to { background-position: 0 -1800px; } }
.lw-depth { position: fixed; right: 26px; top: 24vh; bottom: 24vh; width: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); z-index: 3; pointer-events: none; }
.lw-depth i { position: absolute; left: -5px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); animation: lwDepth linear both; animation-timeline: scroll(); }
@keyframes lwDepth { to { top: calc(100% - 12px); } }
.lw-space .lesson > .blk:not(.blk-heading):not(.blk-continue):not(.blk-space), .lw-space .gate > .blk:not(.blk-heading):not(.blk-continue):not(.blk-space) { background: var(--surface); border-radius: 24px; padding: 30px 34px; }
.lw-space .blk-band { margin-left: 0; margin-right: 0; border-radius: 24px; padding: 34px; }
.lw-space .lesson > :not(.small):not(h1):not(.gate), .lw-space .gate > *, .lw-space .player-nav { transform-origin: 50% 100%; animation: lwStand linear both, lwTilt linear forwards; animation-timeline: view(), view(); animation-range: entry 0% entry 100%, exit 0% exit 100%; }
@keyframes lwStand { from { opacity: 0; transform: perspective(1200px) translate3d(0, 120px, -220px) rotateX(36deg); box-shadow: 0 2px 6px rgba(24, 41, 46, .06); } to { opacity: 1; transform: none; box-shadow: 0 2px 4px rgba(24, 41, 46, .05), 0 36px 70px -32px rgba(24, 41, 46, .42); } }
@keyframes lwTilt { from { opacity: 1; transform: none; } to { opacity: .25; transform: perspective(1200px) translate3d(0, -60px, -200px) rotateX(-14deg); } }
.lw-space .player-nav { box-shadow: none !important; }

/* Ohne Browser-Unterstützung, bei „Bewegung reduzieren“ und beim Drucken: alles ruhig und sichtbar */
@supports not (animation-timeline: view()) {
  .lw :is(.lesson > *, .gate > *, .player-nav, img, .stmt, .quote-bg, .blk-callout), .lw-prog, .lw-deco i, .lw-depth i { animation: none !important; }
  .lw-prog, .lw-depth { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lw :is(.lesson > *, .gate > *, .player-nav, img, .stmt, .quote-bg, .blk-callout), .lw-deco i, .lw-depth i { animation: none !important; }
}
@media print { .lw-deco, .lw-prog, .lw-depth { display: none; } .lw :is(.lesson > *, .gate > *) { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }
@media (max-width: 720px) { .lw-depth { display: none; } .lw .lesson > .small:first-child { padding-top: 8vh; } .lw .lesson > h1 { margin-bottom: 12vh; } .lw-space .lesson > .blk:not(.blk-heading):not(.blk-continue), .lw-space .gate > .blk:not(.blk-heading):not(.blk-continue) { padding: 22px 20px; } }

/* ===================== SONBAY & 4one: Bildschirme ===================== */
/* Kachelraster: 3 Spalten, Tablet 2, mobil 1 */
.course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .course-grid, .g-main .course-grid { grid-template-columns: minmax(0, 1fr); } }
/* Filterleiste: Ghost-Knöpfe, aktiver Filter Mint */
.seg.filters { border: 0; background: transparent; gap: 8px; overflow: visible; }
.seg.filters button { border: 1.5px solid var(--ink); padding: 7px 14px; border-radius: var(--r-btn); box-shadow: none !important; }
.seg.filters button.on { background: var(--mint); border-color: var(--accent); color: var(--ink); }
:root[data-look='petrol'] .seg.filters button { border-color: var(--line); }
/* Dashboard: Begrüssung */
.hero .eyebrow { position: relative; }
.welcome .hero { min-height: 280px; }
/* Fahrplan als waagrechte Kette: Karten mit Farbbühne, verbunden durch eine feine Linie */
.timetable.chain { display: flex; gap: 28px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x proximity; position: relative; }
.timetable.chain li { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); flex: 0 0 236px; scroll-snap-align: start; position: relative; transition: transform .35s var(--lift), box-shadow .35s var(--lift); border-radius: var(--r); }
.timetable.chain li:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.timetable.chain li + li::before { content: ''; position: absolute; left: -29px; top: 52px; width: 28px; border-top: 1.5px solid var(--ink-4); }
.timetable.chain li + li::after { content: ''; position: absolute; left: -21px; top: 48px; width: 9px; height: 9px; border-radius: 50%; background: var(--logo-green); }
.timetable.chain .stage { height: 104px; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 14px; }
.timetable.chain .stage .app-icon svg { width: 30px; height: 30px; }
.timetable.chain .tt-date { width: 52px; height: 52px; background: var(--surface); position: relative; z-index: 1; box-shadow: var(--sh-1); }
.timetable.chain .tt-date b { font-size: 19px; } .timetable.chain .tt-date span { font-size: 11px; }
.timetable.chain .tt-date.over { background: var(--coral-tint); } .timetable.chain .tt-date.soon { background: var(--surface); }
.timetable.chain .tt-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.timetable.chain .tt-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timetable.chain .tt-meta { margin-top: 0; } .timetable.chain .tt-due { margin-top: auto; font-weight: 600; font-size: 13px; }
.timetable.chain .eyebrow { font-size: .7rem; --dot: currentColor; color: var(--kind-ink, var(--blue-deep)); }
.timetable.chain li.k-onsite .eyebrow { --kind-ink: var(--sun-deep); } .timetable.chain li.k-path .eyebrow { --kind-ink: var(--accent); }
.fahrplan-card .card-body { padding-top: 12px; }
:root[data-look='petrol'] .timetable.chain li { box-shadow: none; } :root[data-look='petrol'] .timetable.chain li:hover { transform: none; }
/* Veranstaltungen: Termin-Karten mit Bühne nach Format (Sun = Präsenz, Sky = online, diagonal = hybrid) */
.ev-card { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 0; align-items: stretch; color: inherit; text-decoration: none !important; overflow: hidden; }
.ev-card .stage { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 22px; min-height: 128px; }
.ev-card .stage.k-onsite { --stage: var(--sun); } .ev-card .stage.k-online { --stage: var(--sky); }
.ev-day { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-mon { position: relative; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.ev-main { padding: 18px 22px; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ev-main h3 { font-size: 19px; letter-spacing: -0.02em; }
.ev-side { padding: 18px 22px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; min-width: 170px; }
.cap { width: 150px; } .cap .progress { margin-top: 6px; }
.cap .progress > i { background: var(--sun-deep); } .cap.full .progress > i { background: var(--coral); }
.k-online .eyebrow, .ev-card.k-online .eyebrow { --kind-ink: var(--blue-deep); }
.ev-main .eyebrow { font-size: .72rem; --dot: currentColor; color: var(--kind-ink, var(--sun-deep)); }
:root[data-look='petrol'] .ev-card .stage { --stage: color-mix(in srgb, var(--c, var(--brand)) 13%, var(--surface)); }
:root[data-look='petrol'] .ev-card .stage.k-hybrid { background: var(--stage); }
@media (max-width: 760px) { .ev-card { grid-template-columns: 96px minmax(0, 1fr); } .ev-card .stage { padding: 14px; min-height: 0; } .ev-day { font-size: 34px; } .ev-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 12px 16px; min-width: 0; } .ev-main { padding: 14px 16px; } }
/* Ladeanzeige mit dem Zeichen */
.boot { display: grid; place-items: center; min-height: 100vh; }
.boot img { width: 64px; height: 64px; animation: bootPulse 1.6s ease-in-out infinite; }
@keyframes bootPulse { 50% { opacity: .45; transform: scale(.94); } }
/* Abschluss / Leerzustand mit schwebenden Formen */
.empty.sb-floats-host, .done-screen.sb-floats-host { overflow: clip; }
.timetable.chain li { align-items: stretch; }
/* Inhalte liegen über den schwebenden Formen */
.sb-floats-host > :not(.sb-float) { z-index: 1; }
.auth.sb-floats-host > .auth-panel { z-index: auto; }
.hero.has-img.sb-floats-host > img.hero-img { z-index: 0; }

/* Koralle-Text auf Koralle-Tönung mit ausreichendem Kontrast */
.chip.bad, .err-msg, .verify-bad, .notice.bad, .tt-date.over, .nav a .count, .toast.err { color: var(--coral-ink); }
.toast.err { color: #fff; background: var(--coral-ink); }