/* 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; }
/* Ziffern ohne durchgestrichene Null (v1.15): Zahlen kommen überall aus Poppins */
@font-face { font-family: 'Ziffern'; src: url('/assets/fonts/poppins-400.woff') format('woff'); font-weight: 100 450; unicode-range: U+0030-0039; font-display: swap; }
@font-face { font-family: 'Ziffern'; src: url('/assets/fonts/poppins-500.woff') format('woff'); font-weight: 451 800; unicode-range: U+0030-0039; 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: #6B746E;
  /* 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: 'Ziffern', '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: 4px; --r-btn: 4px; --r-chip: 4px; --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: #66726F;
  --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='square'] { --r: 0px; --r-btn: 0px; --r-chip: 0px; }
: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: #8D9891;
    --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: #8D9891;
  --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: #6B746E;
    --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: #6B746E;
    --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: 16px; 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: 22px; 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: 12px; 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: 14px; }
.xs { font-size: 12px; }
.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: 16px; 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: 12px; 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: 12px; 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: 14px; 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: 12px; 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: 16px; 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: 12px; 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: 14px; 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: 14px; font-weight: 600; flex: none; border-radius: var(--radius-round); }
.avatar.lg { width: 72px; height: 72px; font-size: 22px; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.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: 14px; 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: 14px; 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: 14px; 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: 16px; 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: 36px; font-weight: 400; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; }
.kpi .value small { font-size: 18px; color: var(--muted); margin-left: 3px; font-weight: 400; }
.kpi .sub { font-size: 14px; 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: 14px; 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: 22px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); }
.next-up .meta { font-size: 16px; 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: 14px; color: var(--ink-3); margin-top: 2px; flex-wrap: wrap; }
.tt-meta svg { width: 14px; height: 14px; }
.tt-due { font-size: 14px; 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: 12px; --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: 14px; 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: 18px; line-height: 1.28; font-weight: 500; letter-spacing: -0.015em; }
.cbody .eyebrow + .eyebrow-cat { font-size: 14px; color: var(--muted); }
.cmeta { display: flex; gap: 14px; color: var(--ink-3); font-size: 14px; 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: 14px; }
.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: 14px; }
table.t th { text-align: left; font-weight: 600; font-size: 14px; 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: 14px; 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: 14px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 14px; 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: 16px; 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: 14px; 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: 14px; 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: 16px; 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: 14px !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: 14px; 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: 14px; 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: 16px; 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: 16px; }
.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: 14px; 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: 22px; 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: 16px; }
.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: 14px; }
.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: 14px; color: var(--ink-3); }
.columns .col b { font-size: 14px; 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: 16px; }
.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: 14px; 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: 16px !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: 16px; 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: 14px; 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: 14px; 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: 28px; 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: 16px; 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: 18px; 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: 16px; }
.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: 12px; 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; }
.quiz .opt.right, .opt.right { border-color: var(--accent); background: var(--mint); box-shadow: inset 3px 0 0 var(--accent); }
.quiz .opt.wrong, .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: 16px; }
.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: 18px; }
.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: 14px; 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: 14px; 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: 36px; 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: 12px; 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: 14px; 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: 14px; }
.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: 16px; margin-bottom: 12px; }
.comment { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.comment:first-child { border-top: 0; }
.comment .who { display: flex; gap: 8px; align-items: center; font-size: 14px; 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: 16px; line-height: 1.75; color: var(--ink); max-width: 72ch; }
.prose h1 { font-size: 36px; margin: 0 0 20px; }
.prose h2 { font-size: 22px; 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: 14px; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.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: 18px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 28px; }
  .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: 28px; }
  .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: 36px; } .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: 28px; }
  .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: 28px; margin: 0 0 14px; } .blk-text h3 { font-size: 22px; 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: 18px; 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: 22px; line-height: 1.55; }
.quote blockquote p { margin: 0 0 8px; }
.quote figcaption { margin-top: 12px; font-size: 16px; 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: 28px; 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: 22px; 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: 16px; 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: 18px !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: 14px; 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: 18px; }
.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: 14px; }
.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: 16px; 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: 18px; 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); }
.response { border: 1px solid var(--line); padding: 22px; background: var(--surface); color: var(--ink); display: grid; gap: 16px; }
.response .q { font-weight: 500; font-size: 18px; } .response .q p:last-child { margin: 0; }
.resp-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.resp-label { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0; } .resp-label .req, .resp-foot .req { color: var(--bad); }
.response input[type=text], .response textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm, 6px); }
.response textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.response input[type=text]:focus, .response textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.resp-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font-size: 16px; }
.resp-opt input { margin-top: 3px; accent-color: var(--brand); } .resp-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.resp-field.miss input[type=text], .resp-field.miss textarea, .resp-field.miss .resp-opt { border-color: var(--bad); } .resp-field.miss .resp-label::after { content: ' – bitte ausfüllen'; color: var(--bad); font-weight: 500; }
.resp-foot { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; } .resp-status:empty::before { content: ''; }
.chart h3 { font-size: 18px; margin: 0 0 12px; } .chart svg { width: 100%; height: auto; display: block; } .chart .cv { font-size: 14px; fill: var(--ink-2); } .chart .cl { font-size: 14px; 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: 16px; } .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: 18px; } .stmt-b { font-size: 22px; }
  .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: 16px; } .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: 12px; 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: 16px; }
.rte-h { font-size: 22px; 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: 14px; 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: 14px; }
.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: 12px; 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, .response) { 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: 14px; 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: 28px; 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: 12px; 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: 12px; } .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: #8FA49F; 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: #6B746E; --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: 18px; } .timetable.chain .tt-date span { font-size: 12px; }
.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: 14px; }
.timetable.chain .eyebrow { font-size: 12px; --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: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-mon { position: relative; font-size: 14px; 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: 18px; 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: 12px; --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: 36px; } .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); }

/* Begleitetes Onboarding */
.checkin { border: 1px solid var(--line); background: var(--surface-2); padding: 14px 16px; display: grid; gap: 10px; }
.checkin .field { margin: 0; } .checkin .resp-opt { background: var(--surface); }
.checkin .miss textarea, .checkin .miss .resp-opt { border-color: var(--bad); } .checkin .miss .resp-label::after { content: ' – bitte ausfüllen'; color: var(--bad); font-weight: 500; }
.ment-ans { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; margin-top: 8px; }
.focus-ring { box-shadow: 0 0 0 2px var(--brand); }
.mc-step { border: 1px solid var(--line); padding: 16px; margin: 16px 0; display: grid; gap: 4px; }
.ment-path { display: grid; grid-template-columns: minmax(0, 220px) minmax(120px, 260px) minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.ment-bar { display: flex; gap: 8px; align-items: center; } .ment-bar .progress { flex: 1; }
@media (max-width: 640px) { .ment-path { grid-template-columns: 1fr; } }

/* Block C (1.14): Betreuungsübersicht, Rangliste, Mediathek, Mentor-Karte, Ansicht als Person, App-Hinweis */
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-btn { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.kpi-btn:hover { border-color: var(--brand); } .kpi-btn.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kpi-btn .kpi-n { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em; margin-top: 4px; }
.kpi-btn.warn .kpi-n { color: var(--warn); } .kpi-btn.ok .kpi-n { color: var(--ok); }
.care-table td { vertical-align: top; } .care-table .ment-path { grid-template-columns: 1fr; gap: 2px; margin-bottom: 6px; } .care-table .ment-path:last-child { margin-bottom: 0; }
.dotlabel { white-space: nowrap; }
.remind-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 20px; margin-top: 12px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar { overflow: hidden; }
.imp-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: #C2410C; color: #fff; font-size: 14px; }
.imp-strip .btn { margin-left: auto; background: #fff; color: #7C2D12; border-color: #fff; }
.app-hint { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.app-hint > .ic { flex: none; margin-top: 2px; }
.score-card { color: inherit; text-decoration: none; display: block; }
.score-card:hover { border-color: var(--brand); }
.score-num { display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--radius-round); background: var(--mint); text-align: center; flex: none; }
.score-num b { font-family: var(--font-display); font-size: 28px; line-height: 1; } .score-num span { font-size: 12px; color: var(--muted); }
.mentor-card .eyebrow { display: flex; gap: 6px; align-items: center; }
.podiums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.podium { position: relative; background: var(--surface); border: 1px solid var(--line); padding: 22px 14px 16px; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.podium.p1 { padding-top: 34px; border-color: var(--accent-2, var(--sun)); box-shadow: var(--shadow-pop); } .podium.me { outline: 2px solid var(--brand); }
.podium .medal { position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: #E5E7EB; color: #111; }
.podium.p1 .medal { background: #F2C94C; } .podium.p3 .medal { background: #E0A979; }
.podium .pts { font-family: var(--font-display); font-size: 22px; } .podium .strong { max-width: 100%; }
.lb-list li .rank { width: 28px; text-align: center; font-weight: 600; color: var(--muted); } .lb-list li.me { background: var(--mint); }
@media (max-width: 640px) { .podiums { grid-template-columns: 1fr; } .podium.p1 { order: -1; } }
.media-card { color: inherit; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; } .media-card:hover { border-color: var(--brand); }
.media-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--sky, var(--surface-2)); display: grid; place-items: center; overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; padding: 2px 6px; }
.media-pin { position: absolute; left: 8px; top: 8px; background: var(--surface); padding: 4px; display: grid; }
.media-player { overflow: hidden; } .media-player .vid { margin: 0; }
.chips-filter { display: flex; flex-wrap: wrap; gap: 6px; } .chips-filter .chip { cursor: pointer; border: 0; font: inherit; font-size: 14px; }
.dash-extra { align-items: stretch; }
.chips-filter .chip.dark { background: var(--ink); color: var(--surface); }
.avatar-edit { display: grid; justify-items: center; gap: 4px; } .avatar-edit .link-btn { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; font-size: 12px; }
/* v1.14.1 */
.seg label { padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; } .seg label + label { box-shadow: -1px 0 0 var(--ink); }
.th-sort { border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); padding: 0; cursor: pointer; white-space: nowrap; }
.th-sort:hover, .th-sort.on { color: var(--ink); }
.welcome-video .vid { margin: 0; }

/* =====================================================================
   v1.15 – Neues Gestaltungssystem (Entwurf „4one LMS – Entwurf neue Oberfläche“)
   Ruhiger Grund, ein Hauptelement pro Bildschirm, Farbe nur für Bedeutung.
   Schriftstufen 12 · 14 · 16 · 18 · 22 · 28 · 36 px, Ecken 4 px, 2 Ebenen Schatten.
   ===================================================================== */
:root { --tabbar-h: 64px; }
/* Sprunglink: erstes fokussierbares Element */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--ink); color: var(--on-ink); padding: 10px 16px; font-weight: 600; border-radius: var(--r); }
.skip-link:focus { top: 8px; color: var(--on-ink); text-decoration: none; }
/* Ruhiger: Karten liegen flach auf, heben sich nicht mehr an */
.card, .ccard { box-shadow: none; }
a.card:hover, .card.interactive:hover, .ccard:hover { transform: none; box-shadow: none; border-color: var(--ink-4); }
.btn-primary { box-shadow: none; } .btn-primary:hover { transform: none; box-shadow: none; }
.card-pad { padding: 24px; } .card-head { padding: 24px 24px 0; } .card-body { padding: 16px 24px 24px; } .card-foot { padding: 12px 24px; }
.eyebrow::before { display: none; }
.eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.sidebar .nav { min-height: 0; }
.nav a { font-size: 14px; }

/* ---------- Typografische Titelfläche (Kurs ohne eigenes Bild) ---------- */
.ccover.tsurf { aspect-ratio: auto; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 16px; padding: 16px 20px 20px; place-items: unset; background: var(--stage, var(--sky)); }
.ccover.tsurf::before { display: none; }
.ts-kind { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kind-ink, var(--blue-deep)); position: relative; z-index: 1; }
.ccover.tsurf .badge-top { position: static; align-self: flex-start; order: -1; margin-bottom: -4px; }
.ts-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-look='petrol'] .ccover.tsurf { height: auto; background: color-mix(in srgb, var(--c, var(--brand)) 13%, var(--surface)); }
.ccard .cbody { gap: 8px; }
.ccard.typo .cbody { padding-top: 14px; }
.cmeta:empty { display: none; }
.cprog { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }

/* ---------- Fortschrittszeichen: das Logo füllt sich ---------- */
.pmark { width: 36px; height: 24px; flex: none; overflow: visible; }
.pmark.md { width: 48px; height: 32px; } .pmark.lg { width: 96px; height: 64px; } .pmark.xl { width: 168px; height: 112px; }
.pmark .pm-a, .pmark .pm-b { fill: transparent; stroke: var(--ink-4); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.pmark .pm-c, .pmark .pm-d { fill: transparent; transition: fill .3s var(--ease); }
.pmark:is(.s1, .s2, .s3, .s4) .pm-a { fill: var(--logo-blue); stroke: transparent; }
.pmark:is(.s2, .s3, .s4) .pm-b { fill: var(--logo-yellow); stroke: transparent; }
.pmark:is(.s3, .s4) .pm-c { fill: var(--logo-green); }
.pmark.s4 .pm-d { fill: var(--logo-green); }
@media (prefers-reduced-motion: reduce) { .pmark * { transition: none; } }

/* ---------- Startseite (Lernende und Admins) ---------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 16px 0 24px; }
.dash-head .dash-date { margin: 0; font-size: 14px; color: var(--muted); }
.dash-head h1 { font-size: 36px; margin-top: 4px; }
.dash-sub { margin: 8px 0 0; color: var(--muted); }
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 3px; background: var(--surface); }
.seg-toggle button { height: 40px; padding: 0 16px; border: 0; border-radius: calc(var(--r) - 1px); background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.seg-toggle button[aria-selected='true'] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 24px; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.continue { background: var(--stage, var(--sky)); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.continue.k-path { --stage: var(--mint); } .continue.k-onsite { --stage: var(--sun); }
.continue .ts-kind { color: var(--kind-ink, var(--blue-deep)); }
.continue h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
.continue .c-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.continue .progress { background: color-mix(in srgb, var(--surface) 80%, transparent); height: 6px; border-radius: 999px; }
.continue .progress > i { background: var(--ink); border-radius: 999px; }
.continue .btn { align-self: flex-start; min-width: 200px; }
.strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none !important; }
.strip:hover { border-color: var(--ink-4); color: var(--ink); }
.strip .zap { color: var(--accent); }
.strip > span:nth-child(2) { flex: 1; min-width: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sec-head h2 { font-size: 22px; }
.sec-head a, .sec-head .muted { font-size: 14px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rows > li > .r-main { flex: 1; min-width: 0; }
.rows .r-title { display: block; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows a.r-title:hover { color: var(--accent-strong); }
.rows .r-meta { display: block; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .r-due { font-size: 14px; color: var(--muted); white-space: nowrap; }
.rows .r-due.over { color: var(--coral-ink); font-weight: 600; } .rows .r-due.soon { color: var(--sun-deep); font-weight: 600; }
.rows .r-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.rows .r-dot.bad { background: var(--coral); } .rows .r-dot.info { background: var(--blue-deep); } .rows .r-dot.warn { background: var(--sun-deep); } .rows .r-dot.ok { background: var(--accent); }
.mentor-row { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.mentor-row .r-main { flex: 1; min-width: 0; }
.sq-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); flex: none; }
.sq-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--mint); text-decoration: none; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi-tile { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none !important; display: block; }
a.kpi-tile:hover { border-color: var(--ink-4); color: var(--ink); }
.kpi-tile .k-l { font-size: 14px; color: var(--muted); }
.kpi-tile .k-v { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.kpi-tile .k-v small { font-size: 22px; margin-left: 2px; }
.kpi-tile.alert .k-v { color: var(--coral-ink); }
.kpi-tile .k-s { font-size: 14px; color: var(--muted); }
.done-moment { background: var(--mint); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }

/* ---------- Begleitung: Personen-Karten am Handy ---------- */
.care-cards { display: none; }
.care-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.care-sec > h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--font); }
.care-card { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.care-card .cc-top { display: flex; gap: 12px; align-items: center; }
.care-card .cc-status { font-size: 14px; font-weight: 600; }
.care-card .cc-status.bad { color: var(--coral-ink); } .care-card .cc-status.info { color: var(--blue-deep); } .care-card .cc-status.ok { color: var(--accent); }
.care-card .cc-step { font-size: 14px; color: var(--muted); }
.care-card .cc-act { display: flex; gap: 8px; } .care-card .cc-act .btn { flex: 1; }

/* ---------- Kurs-Player: Fortschritt oben, Navigation am Daumen ---------- */
.player-prog { height: 4px; background: var(--line); }
.player-prog > i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }

/* ---------- Untere Leiste (Handy) ---------- */
.tabbar, .nav-scrim, .search-toggle { display: none; }
@media (max-width: 900px) {
  .menu-burger { display: none !important; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: none !important; cursor: pointer; position: relative; min-height: 44px; }
  .tabbar svg.i { width: 24px; height: 24px; }
  .tabbar a.on { color: var(--ink); font-weight: 600; }
  .tabbar a.on::after { content: ''; position: absolute; bottom: 6px; width: 20px; height: 3px; border-radius: 999px; background: var(--accent); }
  .tabbar a.on svg.i { stroke-width: 2; }
  .content { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); }
  .app.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: var(--backdrop); z-index: 29; }
  .sidebar { z-index: 40; }
  .topbar { gap: 4px; padding: 0 8px 0 16px; height: 56px; }
  .topbar .search { display: none; }
  .search-toggle { display: grid; margin-left: auto; }
  .top-actions { margin-left: 0; gap: 0; }
  .topbar.search-open .search { display: block; position: absolute; left: 8px; right: 8px; top: 6px; z-index: 5; }
  .topbar.search-open .search-results { top: 50px; }
  .user-btn { padding: 0 4px; } .user-btn > svg.i { display: none; }
  .btn-sm { height: 44px; }
  .dash-head h1 { font-size: 28px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .continue { padding: 20px; } .continue h2 { font-size: 22px; } .continue .btn { align-self: stretch; }
  .course-grid { gap: 16px; }
  .ccover.tsurf { min-height: 112px; }
  .ccover:not(.tsurf) { aspect-ratio: auto; height: 140px; }
  .ccard .csum { display: none; }
  .care-table-card .table-wrap, .care-table-card > .empty { display: none; }
  .care-table-card .card-head { padding-bottom: 16px; }
  .care-cards { display: block; }
  .care-kpis { display: flex !important; overflow-x: auto; gap: 8px; grid-template-columns: none !important; }
  .care-kpis .kpi-btn { flex: none; padding: 10px 14px; }
  .care-kpis .kpi-n { font-size: 22px; }
  .page-head { margin: 8px 0 16px; } .page-head h1 { font-size: 28px; }
}
@media (pointer: coarse) { .chip[data-cat], button.chip, .tabs a, .tabs button { min-height: 36px; } }
.pt-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pt-title .strong { font-family: var(--font-display); font-weight: 500; }
.pt-close svg.i { width: 18px; height: 18px; }
.player-top + .player-prog { position: sticky; top: 60px; z-index: 5; }
.done-screen .pmark.xl { margin: 0 auto; }
@media (max-width: 900px) {
  .player-top { padding: 0 8px; height: 56px; }
  .player-top + .player-prog { top: 56px; }
  .pt-close span { display: none; } .pt-close { width: 44px; padding: 0; }
  .pt-title { text-align: center; }
  .player-body { padding-bottom: 120px; }
  .player-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0 !important; max-width: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .player-nav .btn-primary { flex: 1; white-space: normal; line-height: 1.2; }
  .player-nav .btn-secondary { flex: none; }
}
.cmeta .pmark, .rows .pmark { width: 36px; height: 24px; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi-tile { padding: 12px; } .kpi-tile .k-v { font-size: 28px; } .kpi-tile .k-s { font-size: 12px; } }
/* Lernkarten: farbige Vorderseite statt leerer weisser Kasten */
.flash button:not(.flipped):not(:has(.front.full)) { background: var(--sky); border-color: transparent; }
.flash button .hint { color: var(--blue-deep); font-weight: 600; font-size: 12px; }
.flash button { border-radius: var(--r); }
/* Rangliste am Handy: Podest klein nebeneinander */
@media (max-width: 640px) { .podiums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .podium.p1 { order: 0; } .podium { padding: 18px 6px 10px; } .podium .avatar.lg { width: 44px; height: 44px; font-size: 14px; } .podium .xs { display: none; } .podium .pts { font-size: 18px; } }
.lb-me { display: none; }
@media (max-width: 900px) { .lb-me { display: flex; position: sticky; top: 56px; z-index: 6; background: var(--surface); } .lb-score { display: none; } }
/* v1.15.2 – Lernpfad-Schritte: Status unter dem Titel, am Handy volle Breite für den Titel */
.psteps > li > div { min-width: 0; }
.psteps > li a.strong, .psteps > li span.strong { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ps-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ps-meta .chip { font-size: 12px; }
@media (max-width: 900px) {
  .psteps > li { padding: 14px 16px; gap: 12px; flex-wrap: wrap; align-items: flex-start !important; }
  .psteps > li > div { flex: 1 1 0; }
  .psteps > li > .btn { flex: 1 0 100%; margin-left: 60px; max-width: calc(100% - 60px); }
  .psteps > li > .pmark { margin-top: 2px; }
  .psteps .lico { width: 48px; height: 32px; }
}
/* Player: Knopftext bleibt einzeilig */
.player-nav .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mentor-btns .btn { flex: 1 1 auto; }
/* v1.16 – öffentliche Seiten: Teaser-Video und Registrierung */
.pub { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.pub-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pub-logo { max-height: 44px; max-width: 180px; object-fit: contain; }
.pub-main { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.pub-video { border-radius: var(--r); overflow: hidden; } .pub-video .vid { margin: 0; }
.pub-text h1 { font-size: 36px; margin: 8px 0 12px; } .pub-text p { color: var(--ink-2); }
.pub-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--mint); border-radius: var(--r); }
.pub-card { padding: 48px 0; } .pub-card h1 { font-size: 28px; margin-bottom: 8px; }
.pub-foot { text-align: center; font-size: 12px; color: var(--muted); padding: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .pub-head { padding: 12px 16px; } .pub-main { padding: 16px 16px 32px; } .pub-text h1 { font-size: 28px; } .pub-cta { padding: 20px; } .pub-cta .btn { width: 100%; } }
.notice.warn { background: var(--sun); box-shadow: inset 3px 0 0 var(--sun-deep); } .notice.warn > svg { color: var(--sun-deep); }
.reg-row { align-items: flex-start !important; flex-wrap: wrap; }
.reg-answers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; font-size: 14px; }
.reg-answers dt { color: var(--muted); } .reg-answers dd { margin: 0; overflow-wrap: anywhere; }
/* v1.17 – Auswertung Mediathek: Ausstiegs-Verlauf */
.reach { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; }
.reach .rc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.reach .rc i { display: block; width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.reach .rc b { font-size: 12px; font-weight: 600; } .reach .rc span { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .reach .rc b { display: none; } }

/* ===== Autorentool 2.0 (v1.18) – volle Arbeitsfläche, angelehnt an den Aufbau von Rise ===== */
.app:has(.ed2) { grid-template-columns: minmax(0, 1fr); }
.app:has(.ed2) .sidebar, .app:has(.ed2) .topbar, .app:has(.ed2) .tabbar, .app:has(.ed2) .ops-strip { display: none; }
.app:has(.ed2) .content { padding: 0; max-width: none; }
.ed2 { --ed-bar: 56px; --ed-dr: 440px; --ed-pn: 380px; min-height: 100vh; background: var(--surface); color: var(--ink); }
.ed2-bar { position: sticky; top: 0; z-index: 30; height: var(--ed-bar); display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ed2-bar .grow { flex: 1; }
.ed2-ttl { flex: 1; min-width: 96px; padding: 0 6px; }
.show-s { display: none; }
.ed2-st { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.ed2-switch { display: inline-flex; align-items: center; gap: 6px; max-width: 360px; min-width: 96px; flex: 0 1 auto; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r); background: var(--fill); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ed2-switch:hover { background: var(--line); }
.ib { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; }
.ib:hover:not(:disabled) { background: var(--fill); } .ib:disabled { color: var(--ink-4); cursor: default; } .ib.on { background: var(--brand-soft); color: var(--brand-deep); }
.ib.sm { width: 32px; height: 32px; } .ib svg { width: 20px; height: 20px; } .ib.sm svg { width: 16px; height: 16px; }
.ib-dot { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; }
.ed2-main { transition: margin .2s var(--ease); }
@media (min-width: 1100px) { .ed2.with-drawer .ed2-main { margin-left: var(--ed-dr); } .ed2.with-panel .ed2-main { margin-right: var(--ed-pn); } }
.ed2-drawer, .ed2-panel { position: fixed; top: var(--ed-bar); bottom: 0; z-index: 25; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-pop); }
.ed2-drawer { left: 0; width: var(--ed-dr); border-right: 1px solid var(--line); }
.ed2-panel { right: 0; width: var(--ed-pn); border-left: 1px solid var(--line); }
.ed2-drawer[hidden], .ed2-panel[hidden] { display: none; }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.dr-head h2 { margin: 0; font-size: 18px; }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.d-block { display: block; }
/* Kursübersicht */
.ov { max-width: 760px; margin: 0 auto; padding: 48px 24px 120px; }
.ov-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r); margin-bottom: 24px; }
.ov-h1, .lv-title { display: block; width: 100%; border: 0; padding: 0; margin: 0; resize: none; overflow: hidden; background: transparent; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.03em; }
.ov-h1:focus, .lv-title:focus, .ov-sum:focus { outline: none; box-shadow: inset 0 -2px 0 var(--brand); }
.ov-by { margin: 10px 0 14px; }
.ov-sum { display: block; width: 100%; border: 0; padding: 0; resize: none; overflow: hidden; background: transparent; color: var(--ink-2); font: inherit; font-size: 18px; line-height: 1.55; }
.ov-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ov-les, .ov-chap, .ov-empty { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ov-les { cursor: pointer; } .ov-les:hover { background: var(--brand-soft-2, var(--fill)); }
.ov-chap { min-height: 52px; padding-top: 22px; }
.ov-chap .ov-in { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ov-empty { min-height: 48px; padding-left: 44px; }
.ov-grip { display: inline-grid; place-items: center; width: 24px; height: 40px; color: var(--ink-4); cursor: grab; flex: none; }
.ov-n { width: 26px; flex: none; text-align: right; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ov-in { flex: 1; min-width: 0; border: 0; border-radius: var(--r); padding: 6px 8px; background: transparent; color: var(--ink); font: inherit; font-size: 18px; font-weight: 500; }
.ov-in:hover:not([readonly]) { background: var(--fill); } .ov-in:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.ov-meta { white-space: nowrap; }
.ov-tools { display: flex; gap: 0; opacity: 0; transition: opacity .15s; }
.ov-les:hover .ov-tools, .ov-chap:hover .ov-tools, .ov-tools:focus-within { opacity: 1; }
.ov-les.dragging { opacity: .4; }
.ov-les.drop-before { box-shadow: inset 0 3px 0 var(--brand); } .ov-les.drop-after { box-shadow: inset 0 -3px 0 var(--brand); }
.drop-in { background: var(--brand-soft); }
.ov-add { display: flex; gap: 8px; margin-top: 20px; }
.ov-add .input { flex: 1; min-width: 0; height: 44px; }
.ov-addbtn { display: flex; }
.ov-addbtn .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ov-more { padding: 0 10px; margin-left: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Lektion */
.lv { max-width: 860px; margin: 0 auto; padding: 44px 48px 140px; background: var(--surface); color: var(--ink); }
.lv-head { max-width: min(720px, 100%); margin: 0 auto 28px; }
.lv-kicker { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.lv-head label { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.lv-min { width: 72px; }
.lv-blocks { max-width: min(720px, 100%); margin: 0 auto; }
.wb { position: relative; margin: 0 -24px; padding: 14px 24px; border-radius: var(--r); outline: 1px dashed transparent; outline-offset: -1px; cursor: pointer; }
.wb:hover { outline-color: var(--line-2, #c9d1cb); }
.wb.sel { outline: 2px solid var(--brand); cursor: auto; }
.wb .blk { margin-bottom: 0; }
.wb .blk-band, .wb .quote-bg, .wb .img-overlay { margin-left: -24px; margin-right: -24px; }
.wb-prev { pointer-events: none; }
.wb-empty { display: flex; align-items: center; gap: 8px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-3); font-size: 16px; }
.wb-tools { position: absolute; top: -20px; left: 12px; right: 12px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.wb-tools > * { pointer-events: auto; }
.wb-tl { display: flex; gap: 6px; align-items: center; min-width: 0; }
.wb-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(29,29,27,.14); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
span.wb-pill { cursor: default; }
.wb-grp { display: inline-flex; padding: 2px; border-radius: var(--r); background: var(--surface); box-shadow: 0 2px 8px rgba(29,29,27,.14); }
.wb-grp button { display: inline-grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer; }
.wb-grp button:hover:not(:disabled) { background: var(--fill); } .wb-grp button:disabled { color: var(--ink-4); cursor: default; }
.wb-grp svg { width: 17px; height: 17px; }
.rte-x { outline: none; min-height: 1.6em; cursor: text; overflow-wrap: anywhere; }
.rte-x:empty::before { content: attr(data-ph); color: var(--ink-4); }
.rte-x:focus { box-shadow: 0 2px 0 -1px var(--brand-soft-2, var(--mint)); }
.wb-h { font-family: var(--font-display); font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.wb-h.h2 { font-size: 28px; line-height: 1.2; } .wb-h.h3 { font-size: 22px; line-height: 1.25; }
.blk-band.on-dark .rte-x:empty::before { color: rgba(255,255,255,.6); }
.cl-edit { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; } .cl-edit input { margin-top: 6px; }
.lv-next { display: flex; justify-content: space-between; gap: 12px; max-width: min(720px, 100%); margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }
/* „+“ zwischen Bausteinen und Schnellleiste */
.ins { position: relative; height: 28px; display: flex; align-items: center; justify-content: center; }
.ins::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--brand); opacity: 0; transition: opacity .12s; }
.ins-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 28px; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ins:hover::before, .ins:hover .ins-btn, .ins-btn:focus-visible, .ins:focus-within .ins-btn { opacity: 1; }
.ins.last { height: auto; margin-top: 24px; } .ins.last::before { display: none; }
.ins.last .ins-btn { opacity: 1; height: 44px; padding: 0 18px; background: var(--fill); color: var(--ink); border: 1px dashed var(--line-2, #c9d1cb); border-radius: var(--r); }
.ins.last .ins-btn:hover { background: var(--brand-soft); }
.ins.open { height: auto; display: block; margin: 12px 0; } .ins.open::before { display: none; }
.qb { background: var(--surface); border-radius: var(--r); box-shadow: 0 12px 32px rgba(29,29,27,.16); padding: 14px; border: 1px solid var(--line); }
.qb-search { width: 100%; }
.qb-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.qb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 4px; border: 0; border-radius: var(--r); background: var(--fill); color: var(--ink); font: inherit; font-size: 14px; text-align: center; cursor: pointer; }
.qb-item svg { width: 20px; height: 20px; color: var(--accent); }
.qb-item:hover, .qb-item:focus-visible, .qb-item.first { background: var(--brand-soft); }
.qb-all { background: var(--ink); color: #fff; } .qb-all svg { color: #fff; } .qb-all:hover { background: var(--ink-2); }
/* Bibliothek */
.ed2-drawer:has(.lib) { width: min(640px, 100vw); }
@media (min-width: 1100px) { .ed2.with-drawer:has(.lib) .ed2-main { margin-left: 640px; } }
.lib { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.lib-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.lib-cats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lib-cats button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.lib-cats button span { font-size: 12px; color: var(--ink-3); }
.lib-cats button:hover { background: var(--fill); } .lib-cats button.on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.lib-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.lib-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.lib-card svg { color: var(--accent); margin-bottom: 4px; } .lib-card span { font-size: 14px; color: var(--ink-3); }
.lib-card:hover, .lib-card:focus-visible { border-color: var(--accent); background: var(--mint); }
/* Schwebende Menüs */
.ed2-pop { position: fixed; z-index: 90; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; background: var(--surface); color: var(--ink); border-radius: var(--r); box-shadow: 0 12px 32px rgba(29,29,27,.18); border: 1px solid var(--line); }
.ed2-pop[hidden] { display: none; }
.pop-h { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pop-sub { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pop-scroll { max-height: 50vh; overflow-y: auto; }
.pop-i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.pop-i:hover, .pop-i:focus-visible { background: var(--fill); } .pop-i.on { font-weight: 600; }
.pop-i svg { flex: none; color: var(--brand); } .pop-sp { width: 16px; flex: none; }
.pop-foot { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0; }
.sw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.sw i { width: 32px; height: 32px; border-radius: var(--r); border: 1px solid var(--line); }
.sw:hover { background: var(--fill); } .sw.on { border-color: var(--brand); }
.sw-own { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 900px) {
  .hide-s { display: none; }
  .ed2-switch { max-width: 46vw; }
  .ed2-st #saveinfo, .ed2-bar > .ed2-st { display: none; }
  .ed2-switch { flex: 1 1 auto; max-width: none; }
  .lv { padding: 28px 20px 120px; }
  .wb { margin: 0 -12px; padding: 14px 12px; }
  .wb .blk-band, .wb .quote-bg, .wb .img-overlay { margin-left: -12px; margin-right: -12px; }
  .ov { padding: 28px 16px 120px; }
  .ov-tools { opacity: 1; }
  .qb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed2-drawer, .ed2-drawer:has(.lib), .ed2-panel { width: 100vw; }
  .lib-cols { grid-template-columns: minmax(0, 1fr); } .lib-cats { flex-direction: row; overflow-x: auto; }
  .lib-cats button { white-space: nowrap; } .lib-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) { .ov-grip { display: none; } }
@media (max-width: 560px) { .ed2-bar { overflow-x: auto; scrollbar-width: none; } .ed2-bar::-webkit-scrollbar { display: none; } .ov-les, .ov-chap { flex-wrap: wrap; } .ov-les .ov-in, .ov-chap .ov-in { flex-basis: calc(100% - 60px); } .ov-les .ov-tools { margin-left: auto; } .ed2-bar #pVersions, .ed2-bar #export, .ed2-bar #undo, .ed2-bar #redo { display: none; } .show-s { display: flex; } .ov-add { flex-direction: column; } .ov-les .btn { display: none; } .wb-pill b + * { display: none; } }
.player-nav [hidden] { display: none; }

/* ===== Autorentool 2.0, Stufe B (v1.19.0) ===== */
.lib-card { padding: 10px 10px 12px; }
.lib-thumb { display: block; width: 100%; height: auto; aspect-ratio: 120 / 64; margin-bottom: 6px; border-radius: var(--r); background: var(--surface); outline: 1px solid var(--line); }
.lib-card:hover .lib-thumb { outline-color: var(--accent); }
.fe-fold { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 4px 2px; border: 0; background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.fe-fold svg { flex: none; width: 14px; height: 14px; transition: transform .15s; }
.fe-item.folded { padding-bottom: 6px; } .fe-item.folded > .fe-ih { margin-bottom: 0; } .fe-item.folded > .fe-grid { display: none; }
.fe-item.folded .fe-fold svg { transform: rotate(-90deg); }
.qe { display: flex; flex-direction: column; gap: 16px; }
.qe .fe { margin: 0; }
.qe-ans { border: 0; margin: 0; padding: 0; min-width: 0; }
.qe-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qe-row > input { flex: none; width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.qe-row .rte { flex: 1; min-width: 0; }
.qe-row.ok .rte { border-color: var(--brand); background: var(--brand-soft-2, var(--mint)); }
.qe-fbrow { margin: -2px 34px 10px 28px; } .qe-fbrow .rte { font-size: 14px; min-height: 34px; background: var(--fill); }
.qe-sec { border-top: 1px solid var(--line); padding-top: 14px; }
.qe-sec .rte { margin-top: 8px; }
.qe-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: var(--r); background: var(--fill); }
.qe-seg label { position: relative; display: grid; place-items: center; min-height: 34px; padding: 4px 6px; border-radius: 3px; font-size: 14px; text-align: center; cursor: pointer; }
.qe-seg input { position: absolute; opacity: 0; pointer-events: none; }
.qe-seg label.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(29,29,27,.08); }
.qe-seg label:has(input:focus-visible) { outline: 2px solid var(--brand); }
.qe-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.qe-sw > input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qe-sw > i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line-2, #c9d1cb); transition: background .15s; }
.qe-sw > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.qe-sw > input:checked + i { background: var(--brand); } .qe-sw > input:checked + i::after { transform: translateX(18px); }
.qe-sw > input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.q-req { margin-top: 10px; }
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mp-item { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mp-item:hover { border-color: var(--accent); background: var(--mint); }
.mp-item img, .mp-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--fill); display: grid; place-items: center; color: var(--ink-3); }
.mp-item[hidden] { display: none; }
@media (max-width: 560px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Format pro Baustein (v1.20.0): Abstand und Breite ===== */
.bf-pad:not(.bf-bg) > * { margin-bottom: 0; }
.bf-pad.bf-bg > .blk-band { padding-top: var(--bpt); padding-bottom: var(--bpb); }
.bf-wide { --bw: min(1040px, calc(var(--cw, 100%) - 48px)); }
.bf-full { --bw: var(--cw, 100%); }
.bf-wide, .bf-full { width: var(--bw); max-width: none; margin-left: calc((100% - var(--bw)) / 2); }
.bf.bf-wide > .blk-band, .bf.bf-full > .blk-band { margin-left: 0; margin-right: 0; }
.bf.bf-full > .blk-band > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.bf.bf-full > .blk-band { border-radius: 0; }
@media (max-width: 760px) { .bf-wide { --bw: calc(var(--cw, 100%) - 24px); } }
.wb-grp button.on { color: var(--brand-deep); background: var(--brand-soft); }
.pop-fmt { display: flex; flex-direction: column; gap: 8px; padding: 2px 6px 6px; width: 300px; max-width: 100%; }
.pop-seg button { min-height: 32px; padding: 4px 6px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.pop-seg button.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(29,29,27,.08); }
.pop-seg button:focus-visible { outline: 2px solid var(--brand); }
.pop-range { display: grid; grid-template-columns: 48px minmax(0, 1fr) 52px; align-items: center; gap: 8px; font-size: 14px; }
.pop-range input { accent-color: var(--brand); width: 100%; } .pop-range b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Kursdesign (v1.21.0) ===== */
/* Akzentfarbe pro Kurs: abgeleitete Farben neu berechnen (gilt nur innerhalb des Players) */
.player.th-accent, .rv-center.th-accent { --brand: var(--cbrand); --brand-ink: var(--cbrand-ink); --brand-hover: color-mix(in srgb, var(--cbrand) 85%, black);
  --mint: color-mix(in srgb, var(--cbrand) 12%, white); --mint-2: color-mix(in srgb, var(--cbrand) 20%, white); --brand-soft: var(--mint); --brand-soft-2: color-mix(in srgb, var(--cbrand) 6%, white);
  --brand-deep: color-mix(in srgb, var(--cbrand) 78%, black); --accent: var(--cbrand); --accent-strong: color-mix(in srgb, var(--cbrand) 78%, black); --link: var(--brand-deep); --bar: var(--cbrand);
  --brand-line: color-mix(in srgb, var(--cbrand) 35%, white); --ok: var(--cbrand); --ok-soft: var(--mint); --logo-green: var(--cbrand); }
.player.th-btn-brand, .rv-center.th-btn-brand { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-hover: var(--brand-hover); --btn-hover-ink: var(--brand-ink); }
.player.th-btn-ink, .rv-center.th-btn-ink { --btn-bg: #1D1D1B; --btn-ink: #FFFFFF; --btn-hover: var(--brand); --btn-hover-ink: var(--brand-ink); }
.player.th-font, .rv-center.th-font { font-family: var(--font); }
/* Navigation ausklappbar: Inhaltsverzeichnis nur über das Menü */
.player.th-nav-overlay { grid-template-columns: minmax(0, 1fr); }
.player.th-nav-overlay .player-side { display: none; }
.player.th-nav-overlay .player-top #tog { display: grid; }
.player.th-nav-overlay.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); }
/* Lektionskopf */
.lh { position: relative; width: var(--cw, 100%); margin: -52px 0 36px calc((100% - var(--cw, 100%)) / 2); padding: 64px 24px 48px; }
.lh-in { max-width: min(720px, 72ch); margin: 0 auto; }
.lh h1 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; }
.lh-k { font-size: 14px; margin-bottom: 10px; opacity: .8; }
.lh-band { background: var(--mint); color: var(--ink); }
.lh-image { min-height: 280px; display: flex; align-items: flex-end; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; }
.lh-image::before, .kc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.66)); }
.lh-image .lh-in { width: 100%; position: relative; } .lh-image h1 { color: #fff; }
/* Startseite */
.kcover { max-width: 1040px; margin: -52px auto 0; }
.kcover .kc-in h1 { margin: 0 0 14px; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.08; }
.kc-sum { font-size: 18px; line-height: 1.55; margin: 0 0 16px; max-width: 60ch; }
.kc-meta { font-size: 14px; margin-bottom: 24px; opacity: .85; }
.kc-hero { position: relative; width: var(--cw, 100%); margin-left: calc((100% - var(--cw, 100%)) / 2); min-height: min(64vh, 560px); display: flex; align-items: flex-end; padding: 56px 24px; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; }
.kc-hero .kc-in { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; } .kc-hero h1, .kc-hero .kc-sum { color: #fff; }
.kc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 52px; }
.kc-split .kc-img { aspect-ratio: 4 / 3; border-radius: var(--r); background-position: center; background-size: cover; background-repeat: no-repeat; }
.kc-plain { width: var(--cw, 100%); margin-left: calc((100% - var(--cw, 100%)) / 2); padding: 72px 24px 56px; background: var(--mint); }
.kc-plain .kc-in { max-width: 1040px; margin: 0 auto; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.kc-list { max-width: 720px; margin: 40px auto 0; border-top: 1px solid var(--line); }
.kc-mod { padding: 22px 4px 8px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kc-les { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.kc-les:hover { background: var(--mint); }
.kc-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); font-size: 14px; font-weight: 600; }
.kc-les.done .kc-n { background: var(--logo-green); box-shadow: none; }
.kc-t { flex: 1; min-width: 0; font-weight: 500; }
@media (max-width: 900px) {
  .lh { margin-top: -32px; padding: 44px 18px 32px; } .kcover { margin-top: -32px; }
  .kc-split { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 32px; } .kc-hero { min-height: 60vh; padding: 40px 18px; } .kc-plain { padding: 48px 18px 40px; }
}
/* Design-Seite im Autorentool */
.dz { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - var(--ed-bar)); }
.dz-set { overflow-y: auto; padding: 20px 20px 48px; border-right: 1px solid var(--line); background: var(--surface); }
.dz-set section { padding: 16px 0; border-top: 1px solid var(--line); }
.dz-set h3 { margin: 0 0 10px; font-size: 16px; }
.dz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dz-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dz-card svg { width: 100%; height: auto; border-radius: 3px; background: var(--surface); outline: 1px solid var(--line); }
.dz-card:hover { border-color: var(--accent); } .dz-card.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.dz-cov { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .dz-cov img { width: 72px; height: 44px; object-fit: cover; border-radius: 3px; }
.dz-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-swb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; padding: 4px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.dz-swb i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dz-swb.on { border-color: var(--brand); } .dz-swb input { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.dz-stage { display: flex; justify-content: center; align-items: stretch; padding: 20px; background: var(--canvas); overflow: auto; }
.dz-frame { width: 100%; max-width: 1440px; background: #fff; box-shadow: 0 8px 32px rgba(29,29,27,.14); border-radius: var(--r); overflow: hidden; transition: max-width .25s var(--ease); }
.dz-frame.dz-tablet { max-width: 820px; } .dz-frame.dz-phone { max-width: 390px; }
.dz-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.dz-seg { display: inline-grid; } .dz-seg button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .dz { grid-template-columns: minmax(0, 1fr); height: auto; } .dz-set { border-right: 0; } .dz-stage { height: 80vh; } }

/* v1.21.1: Handy – nichts darf seitlich überstehen */
@media (max-width: 760px) {
  table.t { display: block; position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-head, .card-foot, .between { flex-wrap: wrap; row-gap: 8px; }
  .tabs { max-width: 100%; min-width: 0; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
}

.seg:has(.sr-only), label:has(> .sr-only) { position: relative; }

/* ===== 4one Studio (v1.23.0): Kopfzeile, Kursbibliothek, Team, Kaufen ===== */
.app.st-app { grid-template-columns: minmax(0, 1fr); }
.st-head { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.st-brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.st-logo { display: inline-flex; align-items: center; gap: 8px; }
.st-word { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.st-word b { font-weight: 500; color: var(--brand); }
.st-tabs { display: flex; align-items: stretch; gap: 4px; align-self: stretch; margin-left: 12px; }
.st-tabs a { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.st-tabs a:hover { color: var(--ink); }
.st-tabs a.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.st-head .grow, .st-lhead .grow, .st-filter .grow, .rv-head .grow { flex: 1; }
.st-head .user-btn { padding: 4px; }
.st-trial { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 24px; background: var(--sun); color: #1D1D1B; font-size: 14px; }
.st-trial-t { color: #4A4A45; flex: 1; min-width: 200px; }
.st-trial .st-buy { background: #1D1D1B; color: #FFFFFF; border-color: #1D1D1B; }
.app:has(.ed2) .st-head, .app:has(.ed2) .st-trial { display: none; }
.st-app .content { max-width: 1320px; padding: 28px 40px 72px; }
.st-app .content:has(> .st-lib), .st-app .content:has(> .st-team) { max-width: none; padding: 0; }

.st-lib { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.st-side { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; }
.st-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.st-ni { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; border-radius: var(--r); cursor: pointer; }
.st-ni > span:first-child, .st-ni .ellipsis { flex: 1; min-width: 0; }
.st-ni:hover { background: var(--fill); }
.st-ni.on { background: var(--sky); color: var(--brand); font-weight: 600; }
.st-n { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.st-ni.on .st-n { color: inherit; }
.st-nh { margin: 14px 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-nsep { height: 1px; background: var(--line); margin: 12px 4px; }
.st-add { color: var(--brand); }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; vertical-align: -1px; }
.st-fold { position: relative; display: flex; align-items: center; border-radius: var(--r); }
.st-fold .st-fmenu { position: absolute; right: 2px; opacity: 0; width: 30px; height: 30px; }
.st-fold:hover .st-fmenu, .st-fold:focus-within .st-fmenu { opacity: 1; }
.st-fold:hover .st-n, .st-fold:focus-within .st-n { visibility: hidden; }
.st-fold.on > .st-ni { background: var(--sky); color: var(--brand); font-weight: 600; }
.drop-on, .st-fold.drop-on > .st-ni { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--sky); }
.st-main { padding: 24px 32px 64px; min-width: 0; }
.st-lhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-lhead h1 { margin: 0; font-size: 28px; }
.st-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); width: 260px; max-width: 100%; }
.st-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; }
.st-search:focus-within { border-color: var(--brand); }
.st-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 20px; }
.st-filter > button { padding: 6px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.st-filter > button.on { background: #1D1D1B; border-color: #1D1D1B; color: #FFFFFF; }
.st-sort { display: flex; align-items: center; gap: 8px; }
.st-sort .select { height: 34px; font-size: 14px; width: auto; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.st-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.st-card.drag { opacity: .5; }
.st-card:hover { box-shadow: var(--sh-1); }
.st-open { display: block; text-decoration: none; }
.st-cv { height: 128px; background: var(--fill); overflow: hidden; }
.st-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-cv-t { background: var(--cv); padding: 16px 18px; display: flex; align-items: flex-end; }
.st-cv-t span { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.15; color: #FFFFFF; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-cb { padding: 10px 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-ct { display: flex; align-items: flex-start; gap: 4px; }
.st-ct a { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
.st-ct a:hover { text-decoration: underline; }
.st-ct .ib { width: 30px; height: 30px; margin: -4px -4px 0 0; flex: none; }
.st-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-meta .xs { display: inline-flex; align-items: center; gap: 4px; }
.st-by { margin-top: auto; }
.st-new { align-items: center; justify-content: center; gap: 6px; min-height: 248px; border: 1.5px dashed var(--ink-4); background: none; color: var(--brand); font: inherit; cursor: pointer; }
.st-new:hover { background: var(--sky); box-shadow: none; }
.st-new b { font-size: 16px; }
.st-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.st-menu { position: absolute; z-index: 80; width: 248px; max-height: 70vh; overflow: auto; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-3); padding: 6px; }
.st-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; border-radius: var(--r); cursor: pointer; }
.st-menu button:hover, .st-menu button:focus-visible { background: var(--fill); outline: none; }
.st-menu .st-mh { padding: 6px 10px 2px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.st-msep { height: 1px; background: var(--line); margin: 6px 4px; }
.st-danger, .st-menu .st-danger { color: var(--bad); }
.st-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.st-color { position: relative; cursor: pointer; }
.st-color input { position: absolute; opacity: 0; inset: 0; }
.st-color > span:not(.sr-only) { display: block; width: 32px; height: 32px; border-radius: var(--r); border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--surface); }
.st-color input:checked + span { border-color: var(--ink); }
.st-color input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.imp-opt.st-soon { opacity: .6; cursor: default; }

.st-team { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; padding: 28px 40px 64px; align-items: start; }
.st-team .st-lhead { margin-bottom: 18px; }
.st-meter { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.st-tt td { vertical-align: middle; }
.st-tt .select { height: 34px; font-size: 14px; min-width: 170px; }
.st-off td { opacity: .6; }
.chip.st-admin { background: #1D1D1B; color: #FFFFFF; }
.st-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 24px); }
.st-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-plan h2 { margin: 4px 0 0; font-size: 22px; }
.st-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0 0; font-size: 14px; }
.st-dl dt { color: var(--muted); }
.st-dl dd { margin: 0; overflow-wrap: anywhere; }
.st-note { background: var(--sky); border-radius: var(--r); padding: 16px 18px; }

.st-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 20px; }
.st-plan-o { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.st-plan-o.on { border: 2px solid var(--brand); padding: 15px 17px; background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.st-plan-o input { position: absolute; top: 18px; right: 18px; accent-color: var(--brand); }
.st-save { position: absolute; top: -11px; right: 14px; background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r); }
.st-price { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.st-price small { font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--muted); }
.st-qty { display: flex; align-items: center; gap: 16px; }
.st-qty > div:first-child { flex: 1; }
.st-step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); flex: none; }
.st-step button { width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }
.st-step button:disabled { color: var(--ink-4); cursor: default; }
.st-step output { width: 48px; text-align: center; font-weight: 600; font-size: 18px; }
.st-sum { margin: 20px 0 12px; padding: 16px 18px; background: var(--fill); border-radius: var(--r); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.st-sum .between { gap: 12px; }
.st-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-size: 18px; font-weight: 600; }
.st-pay { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; background: var(--sky); border-radius: var(--r); margin-bottom: 8px; }
.st-secure { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }

/* Editor: Review-Link und Kommentare mit Antworten */
.rl-box { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 18px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.rl-box .strong { display: flex; align-items: center; gap: 6px; }
.rl-box p { margin: 0; }
.rl-item { display: flex; flex-direction: column; gap: 4px; }
.rl-url { display: flex; gap: 6px; }
.rl-url .input { height: 34px; font-size: 14px; min-width: 0; flex: 1; }
.rl-new { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-new .select { height: 34px; font-size: 14px; width: auto; flex: 1; min-width: 140px; }
.comment .cm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-ref { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cm-ref .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.cm-reply-item { margin: 10px 0 0 12px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 14px; }
.cm-acts { display: flex; gap: 14px; margin-top: 8px; }
.cm-reply { margin-top: 8px; }
.cm-reply .textarea { min-height: 60px; }

/* Review-Link: Seite für externe Prüfer */
.rv { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.rv-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 20px; min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rv-tag { padding: 3px 10px; border-radius: var(--r); background: var(--sky); color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; flex: none; }
.rv-ttl { display: flex; flex-direction: column; min-width: 0; }
.rv-dev { flex: none; }
.rv-ctog { display: none; }
.rv-body { flex: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; min-height: 0; }
.rv-left { border-right: 1px solid var(--line); padding: 16px 12px; }
.rv-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 72px; }
.rv-sel { display: none; }
.rv-stage { min-width: 0; background: var(--canvas); display: flex; justify-content: center; }
.rv-frame { width: 100%; background: var(--surface); transition: max-width .2s var(--ease); }
.rv-frame.rv-tablet { max-width: 820px; box-shadow: 0 0 0 1px var(--line); }
.rv-frame.rv-phone { max-width: 400px; box-shadow: 0 0 0 1px var(--line); }
.rv-frame .player-body { padding: 40px 28px 64px; }
.rv-phone .player-body { padding: 28px 16px 48px; }
.rv-b { position: relative; border-radius: var(--r); outline: 2px solid transparent; outline-offset: 6px; transition: outline-color .15s; cursor: pointer; }
.rv-b:hover { outline-color: var(--line); }
.rv-b.sel { outline-color: var(--brand); }
.rv-b.flash { outline-color: var(--sun-deep); }
.rv-add { position: absolute; z-index: 2; right: -6px; top: -14px; display: none; align-items: center; gap: 4px; padding: 3px 10px; border: 0; border-radius: var(--r); background: #1D1D1B; color: #FFFFFF; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rv-b:hover .rv-add, .rv-b.sel .rv-add, .rv-add:focus-visible { display: inline-flex; }
.rv-pin { position: absolute; z-index: 2; left: -34px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.rv-pin.sm { position: static; width: 20px; height: 20px; flex: none; }
.rv-side { border-left: 1px solid var(--line); background: var(--canvas); display: flex; flex-direction: column; position: sticky; top: 56px; height: calc(100vh - 56px); }
.rv-sh { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rv-sh b { font-family: var(--font-display); font-weight: 500; font-size: 18px; flex: 1; }
.rv-close { display: none; }
.rv-list { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.rv-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-size: 14px; }
.rv-cw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-c p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-r { margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.rv-r p { margin: 2px 0 0; }
.rv-form { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.rv-form .textarea { min-height: 72px; }
.rv-fb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-target { color: var(--brand); }
.rv-foot { padding: 10px 20px; border-top: 1px solid var(--line); text-align: center; }

@media (max-width: 1100px) {
  .rv-body { grid-template-columns: 200px minmax(0, 1fr); }
  .rv-side { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); height: auto; z-index: 40; box-shadow: var(--sh-3); }
  .rv.show-c .rv-side { display: flex; }
  .rv-ctog, .rv-close { display: inline-flex; }
  .st-team { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 64px; }
  .st-aside { position: static; }
}
@media (max-width: 860px) {
  .st-head { gap: 8px; padding: 0 12px; }
  .st-head .st-word { display: none; }
  .st-tabs { margin-left: 0; gap: 0; }
  .st-tabs a { padding: 0 8px; }
  .st-tabs a svg, .st-head .user-btn > svg { display: none; }
  .st-head .top-actions { gap: 0; }
  .st-trial { padding: 8px 16px; }
  .st-lib { grid-template-columns: minmax(0, 1fr); }
  .st-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; overflow-x: auto; }
  .st-nav { flex-direction: row; position: static; gap: 4px; }
  .st-nav .st-nh, .st-nav .st-nsep { display: none; }
  .st-ni { width: auto; white-space: nowrap; flex: none; }
  .st-fold { flex: none; }
  .st-fold .st-fmenu { display: none; }
  .st-fold:hover .st-n { visibility: visible; }
  .st-main { padding: 16px 16px 48px; }
  .st-app .content { padding: 20px 16px 56px; }
  .st-search { width: 100%; order: 5; }
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
  .st-cv { height: 96px; }
  .st-cv-t span { font-size: 18px; }
  .st-new { min-height: 200px; }
  .st-team { padding: 16px 16px 48px; }
  .st-tt .st-role-m { margin-top: 6px; width: 100%; max-width: 240px; }
  .modal-foot:has(.st-secure) { flex-wrap: wrap; }
  .st-secure { flex-basis: 100%; }
  .st-qty { flex-wrap: wrap; }
  .st-plans { grid-template-columns: minmax(0, 1fr); }
  .rv-head { flex-wrap: wrap; padding: 8px 12px; }
  .rv-ttl { flex: 1 1 60%; }
  .rv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rv-left { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .rv-nav { display: none; }
  .rv-sel { display: block; }
  .rv-frame .player-body { padding: 24px 16px 48px; }
  .rv-pin { left: -8px; top: -12px; }
}
@media (max-width: 520px) {
  .st-tabs a span { font-size: 14px; }
  .st-filter .st-sort { width: 100%; }
  .st-ct a { font-size: 14px; }
}
.st-logo-lg svg { width: 52px; height: 40px; }
.st-logo-lg .st-word { font-size: 22px; }
.st-ni > span.st-dot { flex: none; }
.st-m { display: none; }
@media (max-width: 900px) { .st-tt .st-m { display: block; } }
/* Export aus der Testversion von 4one Studio */
.trial-mark { position: fixed; z-index: 90; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: var(--r); background: #FCE8AC; color: #1D1D1B; font-size: 12px; font-weight: 600; box-shadow: var(--sh-2); pointer-events: none; }