@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/pt-sans-400.woff2') format('woff2'); }
    @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/pt-sans-400-italic.woff2') format('woff2'); }
    @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/pt-sans-700.woff2') format('woff2'); }
    @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/pt-sans-700-italic.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-700.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }
    @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-mono-700.woff2') format('woff2'); }
    /* App loading indicator — early so it paints before the rest of the stylesheet */
    #app-loading {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 0;
      background: rgba(18, 18, 20, 0.45);
      -webkit-tap-highlight-color: transparent;
      cursor: wait;
    }
    :is([data-theme="light"], [data-theme="sepia"]) #app-loading {
      background: rgba(241, 245, 249, 0.55);
    }
    [data-theme="sepia"] #app-loading {
      background: rgba(232, 224, 208, 0.58);
    }
    #app-loading[hidden] {
      display: none !important;
    }
    .app-loading-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(6, 182, 212, 0.22);
      border-top-color: var(--cyber-cyan, #06b6d4);
      border-radius: 50%;
      animation: app-loading-spin 0.7s linear infinite;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .app-loading-spinner {
      border-color: rgba(8, 145, 178, 0.2);
      border-top-color: var(--cyber-cyan, #0891b2);
    }
    .app-loading-label {
      font-family: var(--font-mono, 'PT Sans', sans-serif);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--cyber-cyan, #06b6d4);
    }
    @keyframes app-loading-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .app-loading-spinner { animation: none; border-top-color: var(--cyber-pink, #ec4899); }
    }
    /* Lazy-Load: Platzhalter / Fehler in Modul-Shell */
    .module-lazy-placeholder {
      padding: 2.5rem 1.25rem;
      text-align: center;
      font-family: var(--font-mono, 'PT Sans', sans-serif);
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      color: var(--color-text-muted, #64748b);
    }
    .module-load-error {
      max-width: 28rem;
      margin: 2.5rem auto;
      padding: 1.25rem 1.5rem;
      text-align: center;
    }
    .module-load-error-title {
      margin: 0 0 0.5rem;
      font-weight: 700;
      color: var(--color-text-strong, #fff);
    }
    .module-load-error-detail {
      margin: 0 0 1rem;
      font-size: 0.9rem;
      color: var(--color-text-muted, #64748b);
    }
    .module-load-error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      justify-content: center;
    }
    .module-load-error-actions button {
      font-family: var(--font-sans, 'PT Sans', sans-serif);
      font-size: 0.95rem;
      padding: 0.45rem 0.9rem;
      cursor: pointer;
      border: 1px solid var(--color-border, #1e293b);
      background: var(--bg-card, #222226);
      color: var(--color-text, #e2e8f0);
    }
    .module-load-retry {
      border-color: var(--cyber-cyan, #06b6d4) !important;
      color: var(--cyber-cyan, #06b6d4) !important;
    }
    :root {
      --font-sans: 'PT Sans', sans-serif;
      /* PT Sans portalweit: runde i-Punkte (IBM Plex hat eckige) */
      --font-mono: 'PT Sans', sans-serif;
      --bg-app: #0f1115; --bg-body: #14171f; --bg-card: #1c212b;
      --color-border: #2b3544; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-strong: #ffffff;
      --color-ink: #374151; /* statt Schwarz – Dunkelgrau auf hellen Flächen */
      --cyber-cyan: #06b6d4; --cyber-cyan-dim: rgba(6,182,212,0.15);
      --cyber-cyan-contrast: #0b1220;
      --cyber-green: #10b981; --cyber-green-dim: rgba(16,185,129,0.15);
      --cyber-pink: #ec4899; --cyber-pink-dim: rgba(236,72,153,0.15);
      --cyber-amber: #f59e0b; --cyber-amber-dim: rgba(245,158,11,0.15);
      --cyber-purple: #a855f7; --cyber-purple-dim: rgba(168,85,247,0.15);
      --cyber-orange: #f97316; --cyber-orange-dim: rgba(249, 115, 22, 0.15);
      --bg-card-header: rgba(255, 255, 255, 0.02);
      --nav-console-bg: #152f38;
      --alpha-letter-rule: rgba(148, 163, 184, 0.55);
      --glow-cyan: 0 0 10px rgba(6,182,212,0.4);
      --glow-green: 0 0 10px rgba(16,185,129,0.4);
      --glow-pink: 0 0 10px rgba(236,72,153,0.4);
      --glow-amber: 0 0 10px rgba(245,158,11,0.4);
      /* Z-Index Stacking Hierarchy */
      --z-base: 1;
      --z-sticky-table: 100;
      --z-hud: 500;
      --z-search-results: 850;
      --z-pref-menu: 900;
      --z-modal-backdrop: 10000;
      --z-modal: 10010;
      --z-toast: 20000;
      /* Deckende Mischfarbe (kein color-mix – sonst fällt background aus und Titel wirkt transparent) */
      --table-col1-bg: #1e333a;
      --table-col1-bg-hover: #234049;
      --table-col1-border: color-mix(in srgb, var(--bg-card) 70%, var(--color-text-muted));
      /* Nur für Sticky-1.-Spalte beim Horizontal-Scroll (Phone) */
      --table-col1-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.18);
      --surface-row: rgba(255, 255, 255, 0.025);
      --surface-row-border: rgba(255, 255, 255, 0.05);
      --surface-row-hover: rgba(255, 255, 255, 0.055);
      --surface-subtle: rgba(255, 255, 255, 0.04);
      --surface-subtle-hover: rgba(255, 255, 255, 0.08);
      --surface-hairline: rgba(255, 255, 255, 0.08);
      --nav-panel-bg: #1a2e36;
      --nav-panel-border: rgba(6, 182, 212, 0.28);
      --sticky-bar-edge: rgba(6, 182, 212, 0.35);
      /* no soft blur into the gap — that visually glued bars together */
      --sticky-bar-shadow: none;
      --sticky-stack-gap: 6px;
      /* pin-head sits flush under nav (no intentional gap; was 9px and caused scroll peek) */
      --sticky-pin-under-nav: 0;
      /* gap + height of sticky second bar (page-section-nav / chap-subnav); 0 when absent */
      --sticky-second-bar-offset: 0px;
      --sticky-gap-fill: var(--bg-app);
      /* Menükarten-Pills (Kapitel-Chrome + chap-subnav-card) */
      --menu-pill-min-width: 16em;
      --ui-btn-font-size: 9pt;
      --ui-font-size-sm: 9pt;
      /* Linke Zeilentitel: Breite von „Gebrauch & Formulierungen“ (Mono 8pt + Padding/Border) */
      --chapter-nav-label-width: 190px;
      /* outer table/card frame; sticky chrome top radii use inner = radius − border */
      --table-frame-radius: 8px;
      --table-frame-radius-inner: calc(var(--table-frame-radius) - 1px);
      /* Wortschatz-Listen: Lemma-Schrift + Spalten-Schemata nach Spaltenzahl */
      --wortschatz-col1-font-size: 12pt;
      --wortschatz-lemma-col: 24em;
      /* 2-Spalten (Eintrag | Bedeutung) — Lemma + TTS + Nr. brauchen genug Raum */
      --wortschatz-2col-c1: 56%;
      --wortschatz-2col-c2: 44%;
      --wortschatz-col1-width: var(--wortschatz-2col-c1);
      --wortschatz-col2-width: var(--wortschatz-2col-c2);
      /* 3-Spalten (Wort | … | …) — Latein, Polysemie, Homonyme */
      --wortschatz-3col-c1: var(--wortschatz-lemma-col);
      --wortschatz-3col-c2: 36%;
      --wortschatz-3col-c3: auto;
      /* 4-Spalten — Entlehnungen */
      --wortschatz-4col-c1: var(--wortschatz-lemma-col);
      --wortschatz-4col-c2: 12em;
      --wortschatz-4col-c4: 14em;
      /* 5-Spalten — Wortfelder */
      --wortschatz-5col-c1: var(--wortschatz-lemma-col);
      --wortschatz-5col-c2: 11em;
      --wortschatz-5col-c3: 16em;
    }
    :is([data-theme="light"], [data-theme="sepia"]) {
      --bg-app: #f8fafc; --bg-body: #ffffff; --bg-card: #ffffff;
      --color-border: #e2e8f0; --color-text: #334155; --color-text-muted: #64748b; --color-text-strong: #0f172a;
      --color-ink: #374151;
      --cyber-cyan: #0891b2; --cyber-cyan-dim: rgba(8, 145, 178, 0.1);
      --cyber-cyan-contrast: #ffffff;
      --cyber-green: #15803d; --cyber-green-dim: rgba(21, 128, 61, 0.1);
      --cyber-pink: #db2777; --cyber-pink-dim: rgba(219, 39, 119, 0.1);
      --cyber-amber: #b45309; --cyber-amber-dim: rgba(180, 83, 9, 0.1);
      --cyber-purple: #7c3aed; --cyber-purple-dim: rgba(124, 58, 237, 0.1);
      --cyber-orange: #ea580c; --cyber-orange-dim: rgba(234, 88, 12, 0.1);
      --bg-card-header: rgba(15, 23, 42, 0.02);
      --nav-console-bg: #d0e7ee;
      --alpha-letter-rule: rgba(100, 116, 139, 0.55);
      --glow-cyan: 0 2px 8px rgba(8, 145, 178, 0.15);
      --glow-green: 0 2px 8px rgba(21, 128, 61, 0.15);
      --glow-pink: 0 2px 8px rgba(219, 39, 119, 0.15);
      --glow-amber: 0 2px 8px rgba(180, 83, 9, 0.15);
      --table-col1-bg: #dcedf2;
      --table-col1-bg-hover: #c6e5ee;
      --table-col1-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.08);
      --surface-row: rgba(15, 23, 42, 0.025);
      --surface-row-border: rgba(15, 23, 42, 0.06);
      --surface-row-hover: rgba(15, 23, 42, 0.05);
      --surface-subtle: rgba(15, 23, 42, 0.04);
      --surface-subtle-hover: rgba(15, 23, 42, 0.07);
      --surface-hairline: rgba(15, 23, 42, 0.08);
      --nav-panel-bg: #dbeff4;
      --nav-panel-border: rgba(8, 145, 178, 0.28);
      --sticky-bar-edge: rgba(8, 145, 178, 0.4);
      --sticky-bar-shadow: none;
      --sticky-gap-fill: var(--bg-app);
    }
    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    /* Global Focus Accessibility */
    :focus-visible {
      outline: 2px solid var(--cyber-cyan) !important;
      outline-offset: 2px !important;
    }
    /* Skip link: visually hidden until keyboard focus */
    .skip-link {
      position: absolute;
      left: 0.75rem;
      top: 0.75rem;
      z-index: 10000;
      padding: 0.5rem 0.85rem;
      border-radius: 6px;
      background: var(--bg-card, #fff);
      color: var(--color-text-strong, #111);
      border: 1px solid var(--color-border, #ccc);
      text-decoration: none;
      font-weight: 600;
      transform: translateY(-120%);
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      transform: none;
      clip-path: none;
      width: auto;
      height: auto;
      overflow: visible;
      outline: 2px solid var(--cyber-cyan) !important;
      outline-offset: 2px !important;
    }
    .skip-link-search {
      left: 8.5rem;
    }
    /* Sepia / Lesemodus — warmes Papier, überschreibt Hell-Variablen */
    [data-theme="sepia"] {
      --bg-app: #f4eedd; --bg-body: #faf5eb; --bg-card: #fffef9;
      --color-border: #dfd3bd; --color-text: #3e3328; --color-text-muted: #6c5c49; --color-text-strong: #261f17;
      --color-ink: #3e3328;
      --cyber-cyan: #0f766e; --cyber-cyan-dim: rgba(15, 118, 110, 0.12);
      --cyber-green: #3f6212; --cyber-green-dim: rgba(63, 98, 18, 0.12);
      --cyber-pink: #9f1239; --cyber-pink-dim: rgba(159, 18, 57, 0.1);
      --cyber-amber: #a16207; --cyber-amber-dim: rgba(161, 98, 7, 0.12);
      --cyber-purple: #6b21a8; --cyber-purple-dim: rgba(107, 33, 168, 0.1);
      --cyber-orange: #c2410c; --cyber-orange-dim: rgba(194, 65, 12, 0.1);
      --bg-card-header: rgba(58, 49, 38, 0.03);
      --nav-console-bg: #ddd2bc;
      --alpha-letter-rule: rgba(122, 107, 85, 0.55);
      --glow-cyan: 0 2px 8px rgba(15, 118, 110, 0.14);
      --glow-green: 0 2px 8px rgba(63, 98, 18, 0.14);
      --glow-pink: 0 2px 8px rgba(159, 18, 57, 0.12);
      --glow-amber: 0 2px 8px rgba(161, 98, 7, 0.14);
      --table-col1-bg: #ebe2ce;
      --table-col1-bg-hover: #e2d6be;
      --table-col1-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.08);
      --surface-row: rgba(58, 49, 38, 0.03);
      --surface-row-border: rgba(58, 49, 38, 0.07);
      --surface-row-hover: rgba(58, 49, 38, 0.05);
      --surface-subtle: rgba(58, 49, 38, 0.04);
      --surface-subtle-hover: rgba(58, 49, 38, 0.07);
      --surface-hairline: rgba(58, 49, 38, 0.08);
      --nav-panel-bg: #e6dcc8;
      --nav-panel-border: rgba(15, 118, 110, 0.28);
      --sticky-bar-edge: rgba(15, 118, 110, 0.4);
      --sticky-bar-shadow: none;
      --sticky-gap-fill: var(--bg-app);
    }
    /* Cyan-Akzent (Default): explizit, damit Wechsel von anderen Akzenten Zweitfarbe/Nav zurücksetzt */
    [data-accent="cyan"] {
      --cyber-cyan: #06b6d4;
      --cyber-cyan-contrast: #0b1220;
      --cyber-cyan-dim: rgba(6, 182, 212, 0.15);
      --glow-cyan: 0 0 10px rgba(6, 182, 212, 0.4);
      --nav-panel-border: rgba(6, 182, 212, 0.28);
      --sticky-bar-edge: rgba(6, 182, 212, 0.35);
      --cyber-pink: #ec4899;
      --cyber-pink-dim: rgba(236, 72, 153, 0.15);
      --glow-pink: 0 0 10px rgba(236, 72, 153, 0.4);
    }
    :is([data-theme="light"], [data-theme="sepia"])[data-accent="cyan"] {
      --cyber-cyan: #0891b2;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(8, 145, 178, 0.1);
      --glow-cyan: 0 2px 8px rgba(8, 145, 178, 0.15);
      --nav-panel-border: rgba(8, 145, 178, 0.28);
      --sticky-bar-edge: rgba(8, 145, 178, 0.4);
      --cyber-pink: #db2777;
      --cyber-pink-dim: rgba(219, 39, 119, 0.1);
      --glow-pink: 0 2px 8px rgba(219, 39, 119, 0.15);
    }
    [data-theme="sepia"][data-accent="cyan"] {
      --cyber-cyan: #0f766e;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(15, 118, 110, 0.12);
      --glow-cyan: 0 2px 8px rgba(15, 118, 110, 0.14);
      --nav-panel-border: rgba(15, 118, 110, 0.28);
      --sticky-bar-edge: rgba(15, 118, 110, 0.4);
      --cyber-pink: #9f1239;
      --cyber-pink-dim: rgba(159, 18, 57, 0.1);
      --glow-pink: 0 2px 8px rgba(159, 18, 57, 0.12);
    }
    /* Orange-Akzent: hell + normal. Nacht-Flächen (bg/nav) bleiben; nur Akzentfarbe wechselt. */
    [data-accent="orange"] {
      --cyber-cyan: #f97316;
      --cyber-cyan-contrast: #0b1220;
      --cyber-cyan-dim: rgba(249, 115, 22, 0.15);
      --glow-cyan: 0 0 10px rgba(249, 115, 22, 0.4);
      --nav-panel-border: rgba(249, 115, 22, 0.28);
      --sticky-bar-edge: rgba(249, 115, 22, 0.35);
      /* Zweitfarbe: warmes Bernstein/Braun (passt zu Orange, kein Magenta/Rot) */
      --cyber-pink: #b45309;
      --cyber-pink-dim: rgba(180, 83, 9, 0.12);
      --glow-pink: 0 0 10px rgba(180, 83, 9, 0.35);
    }
    :is([data-theme="light"], [data-theme="sepia"])[data-accent="orange"] {
      --cyber-cyan: #ea580c;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(234, 88, 12, 0.1);
      --glow-cyan: 0 2px 8px rgba(234, 88, 12, 0.15);
      --nav-console-bg: #f3e8de;
      --table-col1-bg: #f8ebe3;
      --table-col1-bg-hover: #f3ddd0;
      --nav-panel-bg: #f7eee8;
      --nav-panel-border: rgba(234, 88, 12, 0.28);
      --sticky-bar-edge: rgba(234, 88, 12, 0.4);
      --cyber-pink: #9a3412;
      --cyber-pink-dim: rgba(154, 52, 18, 0.1);
      --glow-pink: 0 2px 8px rgba(154, 52, 18, 0.15);
    }
    /* Meeresblau — Zweitfarbe Orange */
    [data-accent="ocean"] {
      --cyber-cyan: #0284c7;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(2, 132, 199, 0.15);
      --glow-cyan: 0 0 10px rgba(2, 132, 199, 0.4);
      --nav-panel-border: rgba(2, 132, 199, 0.28);
      --sticky-bar-edge: rgba(2, 132, 199, 0.35);
      /* Zweitfarbe: Orange (hoher Kontrast zu Meeresblau) */
      --cyber-pink: #f97316;
      --cyber-pink-dim: rgba(249, 115, 22, 0.15);
      --glow-pink: 0 0 10px rgba(249, 115, 22, 0.4);
    }
    :is([data-theme="light"], [data-theme="sepia"])[data-accent="ocean"] {
      --cyber-cyan: #0369a1;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(3, 105, 161, 0.1);
      --glow-cyan: 0 2px 8px rgba(3, 105, 161, 0.15);
      --nav-console-bg: #c5e5fc;
      --table-col1-bg: #d4eeff;
      --table-col1-bg-hover: #bde4fd;
      --nav-panel-bg: #ceeafc;
      --nav-panel-border: rgba(3, 105, 161, 0.28);
      --sticky-bar-edge: rgba(3, 105, 161, 0.4);
      /* Zweitfarbe: Orange (deutlich sichtbar) */
      --cyber-pink: #ea580c;
      --cyber-pink-dim: rgba(234, 88, 12, 0.12);
      --glow-pink: 0 2px 8px rgba(234, 88, 12, 0.15);
    }
    /* Graublau (Stahl/Slate) — Zweitfarbe warmes Kupfer */
    [data-accent="slate"] {
      --cyber-cyan: #6b8aa0;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(107, 138, 160, 0.15);
      --glow-cyan: 0 0 10px rgba(107, 138, 160, 0.4);
      --nav-panel-border: rgba(107, 138, 160, 0.28);
      --sticky-bar-edge: rgba(107, 138, 160, 0.35);
      --cyber-pink: #f97316;
      --cyber-pink-dim: rgba(249, 115, 22, 0.15);
      --glow-pink: 0 0 10px rgba(249, 115, 22, 0.4);
    }
    :is([data-theme="light"], [data-theme="sepia"])[data-accent="slate"] {
      --cyber-cyan: #4a6f82;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(74, 111, 130, 0.1);
      --glow-cyan: 0 2px 8px rgba(74, 111, 130, 0.15);
      --nav-console-bg: #e8eef2;
      --table-col1-bg: #eef2f5;
      --table-col1-bg-hover: #e2e9ef;
      --nav-panel-bg: #f0f3f6;
      --nav-panel-border: rgba(74, 111, 130, 0.28);
      --sticky-bar-edge: rgba(74, 111, 130, 0.4);
      --cyber-pink: #ea580c;
      --cyber-pink-dim: rgba(234, 88, 12, 0.1);
      --glow-pink: 0 2px 8px rgba(234, 88, 12, 0.15);
    }
    /* Weinrot — Zweitfarbe dunkles Bordeaux */
    [data-accent="wine"] {
      --cyber-cyan: #e11d48;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(225, 29, 72, 0.15);
      --glow-cyan: 0 0 10px rgba(225, 29, 72, 0.4);
      --nav-panel-border: rgba(225, 29, 72, 0.28);
      --sticky-bar-edge: rgba(225, 29, 72, 0.35);
      --cyber-pink: #9f1239;
      --cyber-pink-dim: rgba(159, 18, 57, 0.12);
      --glow-pink: 0 0 10px rgba(159, 18, 57, 0.35);
    }
    :is([data-theme="light"], [data-theme="sepia"])[data-accent="wine"] {
      --cyber-cyan: #881337;
      --cyber-cyan-contrast: #ffffff;
      --cyber-cyan-dim: rgba(136, 19, 55, 0.1);
      --glow-cyan: 0 2px 8px rgba(136, 19, 55, 0.15);
      --nav-console-bg: #f8e6e9;
      --table-col1-bg: #faebed;
      --table-col1-bg-hover: #f3d6db;
      --nav-panel-bg: #f7e8ea;
      --nav-panel-border: rgba(136, 19, 55, 0.28);
      --sticky-bar-edge: rgba(136, 19, 55, 0.4);
      --cyber-pink: #701a75;
      --cyber-pink-dim: rgba(112, 26, 117, 0.1);
      --glow-pink: 0 2px 8px rgba(112, 26, 117, 0.15);
    }
    /* Sepia: Akzent-Navflächen etwas wärmer halten */
    [data-theme="sepia"][data-accent="orange"] {
      --nav-console-bg: #e6d5c0;
      --table-col1-bg: #eeddcc;
      --table-col1-bg-hover: #e5d0ba;
      --nav-panel-bg: #ead8c4;
    }
    [data-theme="sepia"][data-accent="ocean"] {
      --nav-console-bg: #d5e8f2;
      --table-col1-bg: #dcf0f8;
      --table-col1-bg-hover: #cee4ef;
      --nav-panel-bg: #d7ebf5;
    }
    [data-theme="sepia"][data-accent="slate"] {
      --nav-console-bg: #ddd6c6;
      --table-col1-bg: #e6dfd0;
      --table-col1-bg-hover: #dbd3c2;
      --nav-panel-bg: #e2dbcc;
    }
    [data-theme="sepia"][data-accent="wine"] {
      --nav-console-bg: #f2dbde;
      --table-col1-bg: #f5e2e5;
      --table-col1-bg-hover: #ecd3d7;
      --nav-panel-bg: #efe0e2;
    }
    .hud-pref-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }
    .hud-pref-btn {
      background-color: var(--bg-card);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      font-family: var(--font-mono);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      border-radius: 4px;
    }
    .hud-pref-btn:hover,
    .hud-pref-menu.is-open > .hud-pref-btn {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      box-shadow: var(--glow-cyan);
    }
    .hud-pref-panel {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 1300;
      width: max-content;
      min-width: 148px;
      padding: 10px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: var(--bg-card);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
      flex-direction: column;
      gap: 10px;
    }
    @keyframes hudPrefPanelIn {
      from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .hud-pref-menu.is-open > .hud-pref-panel {
      display: flex;
      animation: hudPrefPanelIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hud-pref-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .hud-pref-label {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      line-height: 1;
    }
    .theme-options {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .theme-option {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 8px;
      border: 0;
      border-radius: 4px;
      background: transparent;
      color: var(--color-text);
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.2;
      text-align: left;
      cursor: pointer;
    }
    .theme-option:hover,
    .theme-option:focus-visible {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      outline: none;
    }
    .theme-option.is-active {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      font-weight: 500;
    }
    .theme-option-icon {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .theme-option[data-theme-pick="dark"] .theme-option-icon {
      background: #0f172a;
      border-color: #334155;
    }
    .theme-option[data-theme-pick="light"] .theme-option-icon {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .theme-option[data-theme-pick="sepia"] .theme-option-icon {
      background: #c4a574;
      border-color: #a67c42;
    }
    .accent-swatches {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .accent-swatch {
      width: 20px;
      height: 20px;
      padding: 0;
      border-radius: 4px;
      border: 2px solid var(--color-border);
      cursor: pointer;
      background: var(--swatch-color);
      box-sizing: border-box;
      flex-shrink: 0;
    }
    /* Swatch-Farben = jeweiliges --cyber-cyan der Akzent-Tokens (nicht veralten lassen) */
    .accent-swatch[data-accent-pick="cyan"] { --swatch-color: #06b6d4; }
    .accent-swatch[data-accent-pick="orange"] { --swatch-color: #f97316; }
    .accent-swatch[data-accent-pick="ocean"] { --swatch-color: #0284c7; }
    .accent-swatch[data-accent-pick="slate"] { --swatch-color: #6b8aa0; }
    .accent-swatch[data-accent-pick="wine"] { --swatch-color: #e11d48; }
    :is([data-theme="light"], [data-theme="sepia"]) .accent-swatch[data-accent-pick="cyan"] { --swatch-color: #0891b2; }
    :is([data-theme="light"], [data-theme="sepia"]) .accent-swatch[data-accent-pick="orange"] { --swatch-color: #ea580c; }
    :is([data-theme="light"], [data-theme="sepia"]) .accent-swatch[data-accent-pick="ocean"] { --swatch-color: #0369a1; }
    :is([data-theme="light"], [data-theme="sepia"]) .accent-swatch[data-accent-pick="slate"] { --swatch-color: #4a6f82; }
    :is([data-theme="light"], [data-theme="sepia"]) .accent-swatch[data-accent-pick="wine"] { --swatch-color: #881337; }
    [data-theme="sepia"] .accent-swatch[data-accent-pick="cyan"] { --swatch-color: #0f766e; }
    .accent-swatch:hover,
    .accent-swatch:focus-visible {
      border-color: var(--color-text-muted);
      outline: none;
    }
    .accent-swatch.is-active {
      border-color: var(--color-text-strong, var(--color-text)) !important;
      box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 4px color-mix(in srgb, var(--swatch-color) 45%, transparent) !important;
      transform: scale(1.06);
    }
    .lang-btn {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      min-width: 32px;
      padding: 0 4px;
      gap: 3px;
    }
    .lang-options {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .lang-option {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 10px;
      border: 0;
      border-radius: 4px;
      background: transparent;
      color: var(--color-text);
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.2;
      text-align: left;
      cursor: pointer;
    }
    .lang-option:hover,
    .lang-option:focus-visible {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      outline: none;
    }
    .lang-option.is-active {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      font-weight: 500;
    }
    .lang-option-code {
      font-family: var(--font-mono);
      font-size: 10px;
      opacity: 0.65;
      margin-left: auto;
      text-transform: uppercase;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    a, a:link, a:visited {
      color: var(--cyber-cyan);
    }
    a:hover {
      color: var(--cyber-cyan);
    }
    body {
      font-family: var(--font-sans); background-color: var(--bg-app);
      color: var(--color-text); line-height: 1.5; padding-bottom: 60px;
      transition: background-color 0.25s, color 0.25s;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    html {
      scrollbar-gutter: stable;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    .container { max-width: 1080px; margin: 0 auto; padding: 20px 20px 20px 20px; }

    /* ===== Typografischer Feinschliff ===== */
    /* Tabellenziffern für bündige Ausrichtung von Zahlen, Preisen, Codes und Metriken */
    table,
    th,
    td,
    .cheat-table,
    .info-table,
    .grammar-table,
    .wortschatz-table,
    .daf-pricing-amount,
    .daf-pricing-billing,
    .daf-modal-plan-price,
    .daf-modal-plan-sub,
    .daf-curriculum-nr,
    .overview-menu-badge,
    .morphologie-map-detail,
    .syntax-map-detail,
    .brd-map-detail,
    .semantik-map-detail,
    .hud-access-expires,
    .st-stat-num,
    .st-score-number,
    .stat-badge,
    .stat-val,
    kbd,
    .code-inline,
    .sub-chap-nr,
    .chap-nr,
    .kicker-nr{
      font-variant-numeric: tabular-nums;
    }

    /* Silbentrennung & kontrollierter Textumbruch für deutsche Fachbegriffe & Komposita */
    .hub-card-title,
    .cyber-card-title,
    .haupt-btn,
    .sub-chap-name,
    .daf-curriculum-name,
    .daf-curriculum-sub,
    .morphologie-map-link,
    .syntax-map-link,
    .brd-map-link,
    .semantik-map-link,
    .geschichte-prose,
    .merk-box,
    .info-box,
    .table-header,
    th,
    .cheat-table th,
    .st-learn-path-text,
    .daf-testimonial-quote {
      hyphens: auto;
      -webkit-hyphens: auto;
      overflow-wrap: break-word;
      word-break: normal;
    }

    /* ===== Portal motion (sachte, sticky-sicher: kein transform auf Modul/Views) ===== */
    @keyframes portalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes portalFadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    .module-section.portal-enter {
      animation: portalFadeIn 0.34s ease-out;
    }
    /* Inaktive Module: Rendering/Layout skippen (ergänzt display:none + inert) */
    .module-section:not(.is-portal-active) {
      content-visibility: hidden;
      contain: layout style paint;
      contain-intrinsic-size: auto 720px;
    }
    .module-section.is-portal-active {
      content-visibility: visible;
      contain: layout style;
    }
    .view-screen.active {
      animation: portalFadeIn 0.28s ease-out;
    }
    .home-hub.portal-hub-in .home-hub-main > .hub-card {
      opacity: 0;
      animation: portalFadeUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(1) { animation-delay: 0ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(2) { animation-delay: 45ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(3) { animation-delay: 90ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(4) { animation-delay: 135ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(5) { animation-delay: 180ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(6) { animation-delay: 225ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(7) { animation-delay: 270ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(8) { animation-delay: 315ms; }
    .home-hub.portal-hub-in .home-hub-main > .hub-card:nth-child(n+9) { animation-delay: 360ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item {
      opacity: 0;
      animation: portalFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(1) { animation-delay: 80ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(2) { animation-delay: 110ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(3) { animation-delay: 140ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(4) { animation-delay: 170ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(5) { animation-delay: 200ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(6) { animation-delay: 230ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(7) { animation-delay: 260ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(8) { animation-delay: 290ms; }
    .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item:nth-child(n+9) { animation-delay: 320ms; }
    .home-toc.portal-hub-in .home-toc-btn,
    .home-toc.portal-hub-in .home-toc-group,
    .home-toc.portal-hub-in .home-toc-section {
      opacity: 0;
      animation: portalFadeIn 0.4s ease-out forwards;
    }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(1),
    .home-toc.portal-hub-in .home-toc-group:nth-child(1),
    .home-toc.portal-hub-in .home-toc-section:nth-child(1) { animation-delay: 40ms; }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(2),
    .home-toc.portal-hub-in .home-toc-group:nth-child(2),
    .home-toc.portal-hub-in .home-toc-section:nth-child(2) { animation-delay: 80ms; }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(3),
    .home-toc.portal-hub-in .home-toc-group:nth-child(3),
    .home-toc.portal-hub-in .home-toc-section:nth-child(3) { animation-delay: 120ms; }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(4),
    .home-toc.portal-hub-in .home-toc-group:nth-child(4),
    .home-toc.portal-hub-in .home-toc-section:nth-child(4) { animation-delay: 160ms; }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(5),
    .home-toc.portal-hub-in .home-toc-group:nth-child(5),
    .home-toc.portal-hub-in .home-toc-section:nth-child(5) { animation-delay: 200ms; }
    .home-toc.portal-hub-in .home-toc-btn:nth-child(n+6),
    .home-toc.portal-hub-in .home-toc-group:nth-child(n+6),
    .home-toc.portal-hub-in .home-toc-section:nth-child(n+6) { animation-delay: 240ms; }
    .info-box, .merk-box {
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    @media (prefers-reduced-motion: reduce) {
      .module-section.portal-enter,
      .view-screen.active,
      .home-hub.portal-hub-in .home-hub-main > .hub-card,
      .home-hub.portal-hub-in .hub-card.is-active .sub-chap-item,
      .home-toc.portal-hub-in .home-toc-btn,
      .home-toc.portal-hub-in .home-toc-group,
      .home-toc.portal-hub-in .home-toc-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .cyber-btn:hover,
      .sub-chap-item:hover,
      .home-hub .sub-chap-item:hover {
        transform: none !important;
      }
    }
    .terminal-hud {
      background-color: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-radius: 0;
      /* glow + opaque page strip in the stack gap below (next bar must leave this uncovered) */
      box-shadow:
        var(--glow-cyan),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app));
      padding: 12px 24px;
      margin-bottom: 20px;
      margin-top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .terminal-hud::before {
      content: ""; position: absolute; left: 0; top: 0;
      width: 4px; height: 100%; background-color: var(--cyber-cyan);
    }
    .hud-logo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      flex: 0 0 334px;
      width: 334px;
      line-height: 1.05;
      color: var(--cyber-cyan);
      user-select: none;
    }
    a.hud-logo-name,
    a.hud-logo-name:link,
    a.hud-logo-name:visited,
    a.hud-logo-name:active,
    .hud-logo-name {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted) !important;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      width: fit-content;
      transition: text-decoration-color 0.15s ease;
    }
    a.hud-logo-name:hover,
    a.hud-logo-name:focus-visible,
    .hud-logo-name:hover,
    .hud-logo-name:focus-visible {
      color: var(--color-text-muted) !important;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
    .hud-logo-mark {
      display: block;
      font-family: var(--font-mono);
      font-size: 12.5pt;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--cyber-cyan);
      white-space: nowrap;
    }
    /* Light/sepia: darker cyan for AA contrast on white / tinted HUD surfaces */
    :is([data-theme="light"], [data-theme="sepia"]) .hud-logo-mark {
      color: #155e75;
    }
    /* Opaque card fill — cyan-mix backgrounds tank contrast under AA */
    #hud-signout-btn.daf-auth-btn-hud,
    .hud-account-signout-btn {
      background: var(--bg-card);
      color: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
    }
    #hud-signout-btn.daf-auth-btn-hud:hover,
    .hud-account-signout-btn:hover {
      background: color-mix(in srgb, var(--cyber-cyan) 14%, var(--bg-card));
    }
    :is([data-theme="light"], [data-theme="sepia"]) #hud-signout-btn.daf-auth-btn-hud,
    :is([data-theme="light"], [data-theme="sepia"]) .hud-account-signout-btn {
      color: #0c4a6e;
      border-color: #155e75;
      background: var(--bg-card);
    }
    :is([data-theme="light"], [data-theme="sepia"]) #hud-signout-btn.daf-auth-btn-hud:hover,
    :is([data-theme="light"], [data-theme="sepia"]) .hud-account-signout-btn:hover {
      color: #083344;
      background: color-mix(in srgb, #155e75 12%, var(--bg-card));
    }
    .hud-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      justify-content: flex-end;
      min-width: 0;
    }
    /* Phone-only Konto-Männchen — Desktop uses text #hud-signout-btn */
    .hud-account-menu {
      display: none;
    }
    .hud-search {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1;
      max-width: none;
      min-width: 140px;
      height: 32px;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      box-sizing: border-box;
      transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
    }
    .hud-search:focus-within {
      border-color: var(--cyber-cyan);
      box-shadow: 0 0 0 3px var(--cyber-cyan-dim), var(--glow-cyan);
      background: var(--bg-card);
    }
    .hud-search:has(.search-input:focus-visible) {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: 2px;
    }
    .hud-search .search-input:focus-visible {
      outline: none !important;
    }
    .hud-random-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 30px;
      min-width: 36px;
      border: none;
      background: transparent;
      color: var(--color-text-muted);
      cursor: pointer;
      border-radius: 7px 0 0 7px;
      padding: 0;
      margin: 0;
      transition: color 0.15s ease, background-color 0.15s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      flex-shrink: 0;
    }
    .hud-random-btn:hover {
      color: var(--cyber-cyan);
      background-color: var(--cyber-cyan-dim);
    }
    @keyframes hudDiceRoll {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(180deg) scale(1.22);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
    .hud-random-btn.is-rolling,
    .hud-random-btn.is-rolling .hud-dice-icon {
      color: var(--cyber-cyan) !important;
      animation: hudDiceRoll 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    }
    .hud-dice-icon {
      display: block;
      width: 19px;
      height: 19px;
      transform-origin: center center;
    }
    .hud-search-divider {
      width: 1px;
      height: 18px;
      background: var(--color-border);
      margin: 0 2px 0 0;
      flex-shrink: 0;
      pointer-events: none;
    }
    .hud-search .search-input {
      flex: 1;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 96px 0 6px !important;
      font-size: 12.5px;
      border: none !important;
      border-radius: 0 7px 7px 0;
      background: transparent !important;
      color: var(--color-text);
      outline: none !important;
      box-shadow: none !important;
      line-height: 30px !important;
    }
    .hud-search-loading {
      display: none;
      width: 14px;
      height: 14px;
      margin-right: 4px;
      border: 2px solid var(--color-border);
      border-top-color: var(--cyber-cyan);
      border-radius: 50%;
      animation: hud-search-spin 0.65s linear infinite;
      flex-shrink: 0;
    }
    .hud-search.is-search-loading .hud-search-loading {
      display: inline-block;
    }
    .hud-search.is-search-loading .hud-search-kbd {
      opacity: 0;
    }
    .home-search-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 14px 4px;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .home-search-ignored {
      padding: 8px 14px 0;
      font-size: 11px;
      color: var(--color-text-muted);
      font-family: var(--font-sans);
    }
    .home-search-kinds {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 14px 6px;
    }
    .home-search-kinds-label {
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--color-text-muted);
      font-weight: 600;
      margin-right: 2px;
    }
    .home-search-kind {
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 11px;
      cursor: pointer;
      font-family: var(--font-sans);
    }
    .home-search-kind.is-active,
    .home-search-kind:hover {
      color: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
      background: var(--bg-card);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-search-kind {
      color: #334155;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-search-kind.is-active,
    :is([data-theme="light"], [data-theme="sepia"]) .home-search-kind:hover {
      color: #0c4a6e;
      border-color: #155e75;
      background: var(--bg-card);
    }
    .home-search-didyoumean {
      display: block;
      width: calc(100% - 28px);
      margin: 6px 14px 10px;
      text-align: left;
      background: var(--cyber-cyan-dim);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12.5px;
      cursor: pointer;
      font-family: var(--font-sans);
    }
    .home-search-didyoumean strong {
      color: var(--cyber-cyan);
    }
    @keyframes hud-search-spin {
      to { transform: rotate(360deg); }
    }
    .home-search-suggest {
      padding: 0 14px 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .home-search-suggest-label {
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.03em;
    }
    
    .hud-search-kbd {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--color-text-muted);
      background: var(--surface-subtle, rgba(255, 255, 255, 0.06));
      border: 1px solid var(--color-border);
      border-bottom-width: 2px;
      border-radius: 5px;
      padding: 1.5px 6px;
      pointer-events: none;
      user-select: none;
      line-height: 1.2;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .hud-search:hover .hud-search-kbd {
      border-color: color-mix(in srgb, var(--cyber-cyan) 45%, var(--color-border));
      color: var(--color-text);
    }
    .hud-search:has(.search-input:focus) .hud-search-kbd {
      opacity: 0;
      transform: translateY(-50%) scale(0.88);
      pointer-events: none;
    }
    @media (pointer: coarse) and (max-width: 920px) {
      .hud-search-kbd { display: none; }
      .hud-search .search-input { padding-right: 40px !important; }
    }
    .hud-meta-group { display: flex; gap: 10px; align-items: center; }
    .theme-btn svg {
      display: block;
      width: 16px;
      height: 16px;
    }
    .kbd-trigger-btn .kbd-btn-icon {
      display: block;
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
    }
    .theme-btn .theme-icon-moon { fill: currentColor; }
    .theme-btn .theme-icon-sun-core { fill: currentColor; }
    .theme-btn .theme-icon-sun-ray {
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      fill: none;
    }
    .theme-btn .theme-icon-sepia { fill: #c4a574; }
    [data-theme="sepia"] .theme-btn .theme-icon-sepia { fill: #a67c42; }
    #scroll-top-btn {
      position: fixed;
      right: 20px;
      bottom: 24px;
      z-index: 1100;
      width: 28px;
      height: 28px;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--cyber-cyan);
      border-radius: 4px;
      background-color: var(--bg-card);
      color: var(--cyber-cyan);
      font-family: var(--font-mono);
      font-size: 11pt;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: var(--glow-cyan);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, border-color 0.2s, background-color 0.2s;
    }
    #scroll-top-btn.is-visible {
      display: inline-flex;
      opacity: 1;
      pointer-events: auto;
    }
    #scroll-top-btn:hover {
      background-color: var(--cyber-cyan-dim);
    }
    .card-idx { font-family: var(--font-mono); font-size: 9pt; color: var(--color-text-muted); flex-shrink: 0; display: inline-block; }
    /* Didaktik-Karten: Nummer + Titel immer ergänzende Farbe (--cyber-pink), nicht Hauptfarbe */
    .accent-cyan .cyber-card-header .card-idx,
    .accent-cyan .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-pink) !important;
    }
    .accent-green .cyber-card-header .card-idx,
    .accent-green .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-green) !important;
    }
    .accent-pink .cyber-card-header .card-idx,
    .accent-pink .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-pink) !important;
    }
    .accent-purple .cyber-card-header .card-idx,
    .accent-purple .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-purple) !important;
    }
    .accent-orange .cyber-card-header .card-idx,
    .accent-orange .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-orange) !important;
    }
    .accent-amber .cyber-card-header .card-idx,
    .accent-amber .cyber-card-header > span:not(.card-idx):not(.fav-btn):not(.card-check-btn):not(.card-header-actions) {
      color: var(--cyber-amber) !important;
    }
    .module-label { font-family: var(--font-mono); font-size: 11pt; font-weight: 700; color: var(--color-text-strong); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; }
    footer {
      position: relative;
      margin-top: 40px;
      width: 100%;
      background-color: var(--nav-console-bg);
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 7px,
        color-mix(in srgb, var(--cyber-cyan) 6%, transparent) 7px,
        color-mix(in srgb, var(--cyber-cyan) 6%, transparent) 8px
      );
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 8px 16px;
      min-height: 44px;
      box-sizing: border-box;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      color: var(--color-text-muted);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 10px 14px;
      overflow-x: clip;
      box-shadow: 0 -2px 14px rgba(0, 242, 255, 0.05);
    }
    /* Phone accordion toggle — desktop always hides; panel keeps the row layout */
    .app-footer-toggle {
      display: none;
    }
    .app-footer-panel {
      display: contents;
    }
    /* Subtile Cyan-Glühlinie an der Oberkante */
    footer::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 8%;
      right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
      opacity: 0.7;
      pointer-events: none;
    }
    .footer-actions {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      flex: 1 1 0;
      justify-content: flex-start;
    }
    /* Legal links (Impressum, Datenschutz, AGB) centered */
    .footer-legal-row {
      display: contents;
    }
    .footer-links {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 16px;
      min-width: 0;
      flex: 0 0 auto;
      margin: 0 auto;
      justify-content: center;
    }
    footer .footer-link.footer-contact {
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 55%, var(--color-border));
      border-radius: 4px;
      color: var(--cyber-cyan);
      background: transparent;
      transition: all 0.2s ease;
    }
    footer .footer-link.footer-contact svg {
      width: 15px;
      height: 15px;
      display: block;
      flex-shrink: 0;
    }
    footer .footer-link.footer-contact:hover,
    footer .footer-link.footer-contact:focus-visible {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim, rgba(0, 242, 255, 0.12));
      box-shadow: 0 0 8px rgba(0, 242, 255, 0.25);
    }
    .footer-link {
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color 0.2s ease, text-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    footer .footer-link {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 8px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
    }
    footer .footer-links .footer-link {
      border: none;
      border-radius: 0;
      padding: 2px 0;
      min-height: 22px;
      font-size: 0.68rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    footer .footer-links .footer-link:hover {
      color: var(--cyber-cyan);
      background: none;
      text-decoration: none;
      text-shadow: 0 0 6px rgba(0, 242, 255, 0.45);
    }
    footer .footer-link[hidden],
    footer .footer-actions > [hidden] {
      display: none !important;
    }
    .footer-expires {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 55%, var(--color-border));
      border-radius: 4px;
      color: var(--cyber-cyan);
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .footer-account-btn {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 11px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      background: transparent;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 55%, var(--color-border));
      color: var(--cyber-cyan);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
    }
    .footer-account-btn:hover {
      background: color-mix(in srgb, var(--cyber-cyan) 14%, var(--bg-card));
      box-shadow: 0 0 10px rgba(0, 242, 255, 0.25);
    }
    .footer-account-btn:active {
      transform: scale(0.97);
    }
    .footer-account-btn:focus-visible {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: 2px;
    }
    .account-export-panel {
      margin-top: 14px;
    }
    .account-export-preview {
      max-height: min(42vh, 320px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 12px 14px;
      margin-bottom: 10px;
      background: var(--bg-app);
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 30%, var(--color-border));
      border-radius: 8px;
    }
    .account-data-dl {
      margin: 0;
      display: grid;
      grid-template-columns: minmax(9rem, 42%) 1fr;
      gap: 8px 12px;
      font-size: 0.88rem;
      line-height: 1.45;
    }
    .account-data-dl dt {
      margin: 0;
      color: var(--color-text-muted);
      font-weight: 600;
    }
    .account-data-dl dd {
      margin: 0;
      color: var(--color-text);
      word-break: break-word;
    }
    .account-export-list {
      margin: 0;
      padding-left: 1.1rem;
      list-style: disc;
    }
    .account-export-list li {
      margin: 0 0 6px;
    }
    .account-export-list time {
      color: var(--color-text-muted);
      font-size: 0.82em;
    }
    .account-export-hint {
      margin: 0 0 10px;
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--color-text-muted);
    }
    #account-download-json-btn {
      width: 100%;
    }
    .footer-buy-btn {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 11px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      background: color-mix(in srgb, var(--cyber-cyan) 20%, var(--bg-card));
      border: 1px solid var(--cyber-cyan);
      color: var(--cyber-cyan);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
    }
    .footer-buy-btn:hover {
      background: var(--cyber-cyan);
      color: #0b1220;
      box-shadow: 0 0 12px rgba(0, 242, 255, 0.45);
    }
    .footer-buy-btn:active {
      transform: scale(0.97);
    }
    .footer-buy-btn:focus-visible {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: 2px;
    }
    footer .footer-link:focus-visible {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: 2px;
      border-color: rgba(6, 182, 212, 0.45);
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
    }
    footer .footer-link--logout {
      color: var(--cyber-orange, #f97316);
      border-color: color-mix(in srgb, var(--cyber-orange, #f97316) 55%, var(--color-border));
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    footer .footer-link--logout:hover {
      color: var(--cyber-orange, #f97316);
      border-color: var(--cyber-orange, #f97316);
      background: color-mix(in srgb, var(--cyber-orange, #f97316) 14%, transparent);
    }
    .footer-social {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px 10px;
      justify-content: flex-end;
      flex: 0 0 auto;
      position: relative;
      padding-left: 16px;
      border-left: none;
    }
    /* Kurzer Cyan-Trenner statt flacher Border-Linie */
    .footer-social::before {
      content: "";
      position: absolute;
      left: 0;
      top: 18%;
      bottom: 18%;
      width: 2px;
      border-radius: 1px;
      background: color-mix(in srgb, var(--cyber-cyan) 70%, transparent);
      box-shadow: 0 0 8px color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
      pointer-events: none;
    }
    .footer-copy {
      color: var(--color-text-muted);
      white-space: nowrap;
      line-height: 1.4;
    }
    .footer-author-link {
      color: var(--cyber-cyan);
      text-decoration: none;
      border-bottom: 1px dashed color-mix(in srgb, var(--cyber-cyan) 55%, transparent);
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .footer-author-link:hover,
    .footer-author-link:focus-visible {
      color: var(--cyber-cyan);
      border-bottom-color: var(--cyber-cyan);
      outline: none;
    }
    .footer-social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      color: var(--color-text-muted);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      text-decoration: none;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
      flex-shrink: 0;
    }
    .footer-social-link:hover {
      color: var(--cyber-cyan);
      border-color: rgba(6, 182, 212, 0.45);
      background: var(--cyber-cyan-dim);
    }
    .footer-social-link svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      display: block;
      flex-shrink: 0;
    }
    .footer-social-link--label {
      width: auto;
      height: auto;
      min-height: 28px;
      padding: 4px 9px 4px 7px;
      gap: 7px;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .legal-page .legal-lead {
      margin: 0 0 14px;
      color: var(--color-text);
      line-height: 1.55;
    }
    .legal-page .legal-section {
      margin: 0 0 14px;
    }
    .legal-page .legal-heading {
      margin: 0 0 6px;
      font-family: var(--font-mono);
      font-size: 10pt;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--cyber-cyan);
    }
    .legal-page .legal-text {
      margin: 0;
      color: var(--color-text);
      line-height: 1.55;
    }
    .legal-page h1 {
      margin: 0 0 16px;
      font-family: var(--font-mono);
      font-size: 13pt;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--cyber-cyan);
    }
    .legal-page h2 {
      margin: 22px 0 10px;
      font-family: var(--font-mono);
      font-size: 11pt;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--cyber-cyan);
    }
    .legal-page h3 {
      margin: 16px 0 8px;
      font-size: 10.5pt;
      font-weight: 700;
      color: var(--color-text);
    }
    .legal-page h4 {
      margin: 12px 0 6px;
      font-size: 10pt;
      font-weight: 700;
      color: var(--color-text);
    }
    .legal-page p {
      margin: 0 0 10px;
      color: var(--color-text);
      line-height: 1.55;
    }
    .legal-page ul {
      margin: 0 0 10px;
      padding-left: 1.35em;
      color: var(--color-text);
    }
    .legal-page li {
      margin: 0 0 6px;
      line-height: 1.55;
    }
    .legal-page a {
      color: var(--cyber-cyan);
    }
    .legal-page h1:first-child,
    .legal-page h2:first-child {
      margin-top: 0;
    }
    .legal-page .cyber-card > .cyber-card-header {
      display: none !important;
    }
    .legal-page[aria-label="Datenschutz"] .cyber-card-body > h1,
    .legal-page[aria-label="Impressum"] .cyber-card-body > h1 {
      display: none !important;
    }
    .nav-console {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px 18px;
      background: var(--nav-console-bg);
      border: 1px solid var(--color-border);
      /* square sticky footprint — radius cutouts showed scrolling card borders underneath */
      border-radius: 0;
      position: sticky;
      /* top1 = hudH + gap (HUD gap-fill stays visible) */
      top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px));
      z-index: 999;
      /* no downward gap-fill — pin-head sits flush under nav; gapped next bars paint their own upward fill */
      box-shadow: none;
      transition: top 0.25s ease;
    }
    .nav-console-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-left: auto;
      flex-shrink: 0;
      padding-right: 16px;
      z-index: 10;
    }
    .nav-console.nav-console-stacked {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      align-items: center;
      gap: 0 12px;
    }
    .nav-console.nav-console-stacked::after {
      content: "";
      grid-column: 1 / -1;
      grid-row: 2;
      width: calc(100% + 36px);
      height: 2px;
      background: var(--color-border);
      justify-self: start;
      margin: 8px -18px;
    }
    .nav-console.nav-console-stacked .nav-console-title {
      grid-column: 1;
      grid-row: 1;
      padding-bottom: 0;
      align-self: center;
    }
    .nav-console.nav-console-stacked .nav-console-actions {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }
    .nav-console.nav-console-stacked .nav-console-tabs {
      grid-column: 1 / -1;
      grid-row: 3;
      margin-bottom: 0;
      margin-left: 0;
      width: 100%;
      border-bottom: none;
      padding-bottom: 0;
      padding-top: 0;
    }
    .nav-console-title { padding: 0; margin: 0; display: flex; align-items: center; min-height: 28px; }
    .nav-console-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: -2px; }
    .console-tab-btn { font-family: var(--font-mono); font-size: var(--ui-btn-font-size); font-weight: 700; padding: 8px 16px; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
    .console-tab-btn:hover { color: var(--color-text); }
    .console-tab-btn.active { color: var(--cyber-cyan); border-bottom-color: var(--cyber-cyan); }
    .nav-console .lang-pref-menu {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      position: relative;
      z-index: 1001;
    }
    /* Wegweiser: label immediately left of language selector */
    #mod-auf-ein-wort .nav-console-lang {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 1;
      min-width: 0;
      position: relative;
      z-index: 1001;
    }
    #mod-auf-ein-wort .nav-console-lang-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 600;
      color: var(--color-text-muted);
      line-height: 1.2;
      white-space: nowrap;
    }
    #mod-auf-ein-wort .nav-console .lang-pref-menu {
      margin-left: 0;
    }
    .nav-console .lang-pref-menu .hud-pref-btn {
      width: 32px;
      height: 28px;
      padding: 0 6px;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      letter-spacing: 0.05em;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .nav-console .lang-pref-menu .hud-pref-btn:hover,
    .nav-console .lang-pref-menu.is-open > .hud-pref-btn {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      box-shadow: var(--glow-cyan);
    }
    /* Sort-Buttons in der ABC-/Pin-Leiste (wie Starke Verben) */
    #praefixverben-btn-alpha,
    #praefixverben-btn-stamm {
      flex-shrink: 0;
      box-sizing: border-box;
      height: 1.55em;
      min-height: 1.55em;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      color: var(--color-text-muted);
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 3px;
      cursor: pointer;
    }
    #praefixverben-btn-alpha:hover,
    #praefixverben-btn-stamm:hover {
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    #praefixverben-btn-alpha.is-filter-active,
    #praefixverben-btn-stamm.is-filter-active {
      background-color: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    /* Perfekt: sein-Verben — Umschalter Kategorien / A–Z */
    #perfekt-sein-verbs-box {
      scroll-margin-top: 6.5rem;
    }
    .perfekt-sein-verbs-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      margin-bottom: 8px;
    }
    .perfekt-sein-verbs-head > strong {
      margin-bottom: 0;
    }
    .perfekt-sein-sort-btns {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    #perfekt-sein-btn-kat,
    #perfekt-sein-btn-alpha,
    #perfekt-sein-btn-trenn {
      flex-shrink: 0;
      box-sizing: border-box;
      height: 1.55em;
      min-height: 1.55em;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      color: var(--color-text-muted);
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 3px;
      cursor: pointer;
    }
    #perfekt-sein-btn-kat:hover,
    #perfekt-sein-btn-alpha:hover,
    #perfekt-sein-btn-trenn:hover {
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    #perfekt-sein-btn-kat.is-filter-active,
    #perfekt-sein-btn-alpha.is-filter-active,
    #perfekt-sein-btn-trenn.is-filter-active {
      background-color: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    .perfekt-sein-view[hidden] {
      display: none !important;
    }
    .view-screen { display: none; }
    .view-screen.active { display: block; }
    /* Info-/Merk-Kästen: Kombi A+B — helles Surface, Akzentrahmen, starke linke Kante */
    .info-box {
      background-color: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-left: 5px solid var(--cyber-cyan);
      border-radius: 4px;
      padding: 14px 18px;
      margin-bottom: 20px;
      font-size: 13px;
      line-height: 1.6;
      box-sizing: border-box;
    }
    /* Tip-/Titel-Label: .info-label ODER erstes strong direkt vor <br>.
       Nicht jedes strong:has(+ br) — sonst werden Zeilenenden in Aufzählungen
       (z. B. „wird zu p<br>“) fälschlich zu Block-Labels.
       Nicht jedes first-of-type ohne +br (Mid-Satz-strong wie „06“). */
    .info-box > strong.info-label,
    .info-box > strong:first-of-type:has(+ br) {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--cyber-cyan);
      display: block;
      margin-bottom: 6px;
    }
    .info-box > strong.info-label + br,
    .info-box > strong:first-of-type:has(+ br) + br {
      display: none;
    }
    /* Kein nackter Fließtext als Direktkind der Modul-Section / View */
    .module-section > p:not([class]),
    .module-section > p.geschichte-prose,
    .module-section > p.glossar-intro,
    .module-section > p.herkunft-quellen-note,
    .module-section > .view-screen > p:not([class]),
    .module-section > .view-screen > p.geschichte-prose {
      background-color: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-left: 5px solid var(--cyber-cyan);
      border-radius: 4px;
      padding: 14px 18px;
      margin: 0 0 20px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--color-text);
      box-sizing: border-box;
    }
    .cards-grid { display: flex; flex-direction: column; gap: 20px; }
    /* Cyber Cards with Accents */
    .cyber-card {
      background-color: var(--bg-card);
      border: 1px solid var(--color-border);
      position: relative;
      margin-bottom: 20px;
      transition: border-color 0.2s;
    }
    
    .accent-cyan { border-color: color-mix(in srgb, var(--cyber-pink) 30%, transparent) !important; }
    .accent-cyan .cyber-card-header { border-left: 3px solid var(--cyber-pink); color: var(--cyber-pink); background-color: var(--cyber-pink-dim); }
    
    .accent-green { border-color: rgba(16, 185, 129, 0.3) !important; }
    .accent-green .cyber-card-header { border-left: 3px solid var(--cyber-green); color: var(--cyber-green); background-color: var(--cyber-green-dim); }

    .accent-pink { border-color: color-mix(in srgb, var(--cyber-pink) 30%, transparent) !important; }
    .accent-pink .cyber-card-header { border-left: 3px solid var(--cyber-pink); color: var(--cyber-pink); background-color: var(--cyber-pink-dim); }

    .accent-purple { border-color: rgba(139, 92, 246, 0.3) !important; }
    .accent-purple .cyber-card-header { border-left: 3px solid var(--cyber-purple); color: var(--cyber-purple); background-color: var(--cyber-purple-dim); }

    .accent-orange { border-color: rgba(249, 115, 22, 0.3) !important; }
    .accent-orange .cyber-card-header { border-left: 3px solid var(--cyber-orange); color: var(--cyber-orange); background-color: var(--cyber-orange-dim); }

    .accent-amber { border-color: rgba(245, 158, 11, 0.3) !important; }
    .accent-amber .cyber-card-header { border-left: 3px solid var(--cyber-amber); color: var(--cyber-amber); background-color: var(--cyber-amber-dim); }

    .cyber-card-header {
      padding: 12px 18px;
      border-bottom: 1px solid var(--color-border);
      background-color: var(--bg-card-header);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 9.5pt;
      font-weight: 700;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .cyber-card-header::after {
      content: "▼";
      font-size: 8px;
      margin-left: auto;
      color: var(--color-text-muted);
      transition: transform 0.3s;
    }
    .cyber-card.collapsed .cyber-card-header::after {
      transform: rotate(-90deg);
    }
    .cyber-card.collapsed .cyber-card-body {
      display: none !important;
    }
    .cyber-card-body { padding: 18px; font-size: 13.5px; line-height: 1.6; }

    /* Example Lists, Rows & Badges */
    .example-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .example-row {
      padding: 12px 14px;
      margin-bottom: 10px;
      border-radius: 6px;
      background: var(--surface-row);
      border: 1px solid var(--surface-row-border);
      transition: all 0.2s ease-in-out;
    }
    .example-row:hover {
      background: var(--surface-row-hover);
      transform: translateX(2px);
    }
    .example-row:last-child {
      margin-bottom: 0;
    }

    /* Beispiel | Erklärung zweispaltig: Präp + Konjunktiv I/II + Indefinit + Infinitiv + Konjunktionen + Stilistik */
    #mod-praepositionen .example-list,
    #verb-konjunktiv-view-k1 .example-list,
    #verb-konjunktiv-view-k2 .example-list,
    #indefinitpronomen-view-examples .example-list,
    #infinitivsaetze-view-learn .example-list,
    #infinitivsaetze-view-ohne .example-list,
    #mod-konjunktionen .example-list,
    #mod-wortschatz-stilistik .example-list,
    #mod-stilistik-stilhygiene .example-list,
    #mod-stilistik-satzbau .example-list,
    #mod-stilistik-rhetorik .example-list {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      overflow: hidden;
      background-color: var(--surface-subtle);
    }
    #mod-praepositionen .example-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 0;
      align-items: stretch;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid var(--color-border);
      background: transparent;
      transform: none;
    }
    #mod-praepositionen .example-nr {
      margin: 0;
      padding: 12px 10px 12px 12px;
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      line-height: 1.45;
      color: var(--color-text-muted);
      opacity: 0.65;
      border-right: 1px solid var(--color-border);
      min-width: 2.6em;
      text-align: right;
      align-self: stretch;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      user-select: none;
    }
    #verb-konjunktiv-view-k1 .example-row,
    #verb-konjunktiv-view-k2 .example-row,
    #indefinitpronomen-view-examples .example-row,
    #infinitivsaetze-view-learn .example-row,
    #infinitivsaetze-view-ohne .example-row,
    #mod-konjunktionen .example-row,
    #mod-wortschatz-stilistik .example-row,
    #mod-stilistik-stilhygiene .example-row,
    #mod-stilistik-satzbau .example-row,
    #mod-stilistik-rhetorik .example-row {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 0;
      align-items: stretch;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid var(--color-border);
      background: transparent;
      transform: none;
    }
    #mod-praepositionen .example-row:last-child,
    #verb-konjunktiv-view-k1 .example-row:last-child,
    #verb-konjunktiv-view-k2 .example-row:last-child,
    #indefinitpronomen-view-examples .example-row:last-child,
    #infinitivsaetze-view-learn .example-row:last-child,
    #infinitivsaetze-view-ohne .example-row:last-child,
    #mod-konjunktionen .example-row:last-child,
    #mod-wortschatz-stilistik .example-row:last-child,
    #mod-stilistik-stilhygiene .example-row:last-child,
    #mod-stilistik-satzbau .example-row:last-child,
    #mod-stilistik-rhetorik .example-row:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    #mod-praepositionen .example-row:hover,
    #verb-konjunktiv-view-k1 .example-row:hover,
    #verb-konjunktiv-view-k2 .example-row:hover,
    #indefinitpronomen-view-examples .example-row:hover,
    #infinitivsaetze-view-learn .example-row:hover,
    #infinitivsaetze-view-ohne .example-row:hover,
    #mod-konjunktionen .example-row:hover,
    #mod-wortschatz-stilistik .example-row:hover,
    #mod-stilistik-stilhygiene .example-row:hover,
    #mod-stilistik-satzbau .example-row:hover,
    #mod-stilistik-rhetorik .example-row:hover {
      background: rgba(6, 182, 212, 0.05);
      transform: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) #mod-praepositionen .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #verb-konjunktiv-view-k1 .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #verb-konjunktiv-view-k2 .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #indefinitpronomen-view-examples .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #infinitivsaetze-view-learn .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #infinitivsaetze-view-ohne .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #mod-konjunktionen .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #mod-wortschatz-stilistik .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #mod-stilistik-stilhygiene .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #mod-stilistik-satzbau .example-row:hover,
    :is([data-theme="light"], [data-theme="sepia"]) #mod-stilistik-rhetorik .example-row:hover {
      background: rgba(8, 145, 178, 0.04);
    }
    #mod-praepositionen .main-sentence,
    #mod-praepositionen .sub-expl,
    #verb-konjunktiv-view-k1 .main-sentence,
    #verb-konjunktiv-view-k1 .sub-expl,
    #verb-konjunktiv-view-k2 .main-sentence,
    #verb-konjunktiv-view-k2 .sub-expl,
    #indefinitpronomen-view-examples .main-sentence,
    #indefinitpronomen-view-examples .sub-expl,
    #infinitivsaetze-view-learn .main-sentence,
    #infinitivsaetze-view-learn .sub-expl,
    #infinitivsaetze-view-ohne .main-sentence,
    #infinitivsaetze-view-ohne .sub-expl,
    #mod-konjunktionen .main-sentence,
    #mod-konjunktionen .sub-expl,
    #mod-wortschatz-stilistik .main-sentence,
    #mod-wortschatz-stilistik .sub-expl,
    #mod-stilistik-stilhygiene .main-sentence,
    #mod-stilistik-stilhygiene .sub-expl,
    #mod-stilistik-satzbau .main-sentence,
    #mod-stilistik-satzbau .sub-expl,
    #mod-stilistik-rhetorik .main-sentence,
    #mod-stilistik-rhetorik .sub-expl {
      margin: 0;
      padding: 12px 14px;
      display: block;
    }
    #mod-praepositionen .main-sentence,
    #verb-konjunktiv-view-k1 .main-sentence,
    #verb-konjunktiv-view-k2 .main-sentence,
    #indefinitpronomen-view-examples .main-sentence,
    #infinitivsaetze-view-learn .main-sentence,
    #infinitivsaetze-view-ohne .main-sentence,
    #mod-konjunktionen .main-sentence,
    #mod-wortschatz-stilistik .main-sentence,
    #mod-stilistik-stilhygiene .main-sentence,
    #mod-stilistik-satzbau .main-sentence,
    #mod-stilistik-rhetorik .main-sentence {
      border-right: 1px solid var(--color-border);
      font-size: 13.5px;
      line-height: 1.5;
      font-weight: 600;
      color: var(--color-text-strong);
    }
    #mod-praepositionen .example-nr {
      position: relative;
      z-index: 1;
    }
    #mod-praepositionen .main-sentence::before,
    #verb-konjunktiv-view-k1 .main-sentence::before,
    #verb-konjunktiv-view-k2 .main-sentence::before,
    #indefinitpronomen-view-examples .main-sentence::before,
    #infinitivsaetze-view-learn .main-sentence::before,
    #infinitivsaetze-view-ohne .main-sentence::before,
    #mod-konjunktionen .main-sentence::before,
    #mod-wortschatz-stilistik .main-sentence::before,
    #mod-stilistik-stilhygiene .main-sentence::before,
    #mod-stilistik-satzbau .main-sentence::before,
    #mod-stilistik-rhetorik .main-sentence::before {
      display: none !important;
      content: none !important;
    }
    #mod-praepositionen .sub-expl,
    #verb-konjunktiv-view-k1 .sub-expl,
    #verb-konjunktiv-view-k2 .sub-expl,
    #indefinitpronomen-view-examples .sub-expl,
    #infinitivsaetze-view-learn .sub-expl,
    #infinitivsaetze-view-ohne .sub-expl,
    #mod-konjunktionen .sub-expl,
    #mod-wortschatz-stilistik .sub-expl,
    #mod-stilistik-stilhygiene .sub-expl,
    #mod-stilistik-satzbau .sub-expl,
    #mod-stilistik-rhetorik .sub-expl {
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-text);
    }
    #mod-praepositionen .sub-expl > span:first-child,
    #verb-konjunktiv-view-k1 .sub-expl > span:first-child,
    #verb-konjunktiv-view-k2 .sub-expl > span:first-child,
    #indefinitpronomen-view-examples .sub-expl > span:first-child,
    #infinitivsaetze-view-learn .sub-expl > span:first-child,
    #infinitivsaetze-view-ohne .sub-expl > span:first-child,
    #mod-konjunktionen .sub-expl > span:first-child,
    #mod-wortschatz-stilistik .sub-expl > span:first-child,
    #mod-stilistik-stilhygiene .sub-expl > span:first-child,
    #mod-stilistik-satzbau .sub-expl > span:first-child,
    #mod-stilistik-rhetorik .sub-expl > span:first-child {
      all: unset;
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 3px;
      margin-right: 6px;
      margin-bottom: 2px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background-color: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      color: var(--cyber-cyan);
      vertical-align: 1px;
    }
    @media (max-width: 720px) {
      #mod-praepositionen .example-row {
        grid-template-columns: auto 1fr;
      }
      #mod-praepositionen .example-nr {
        grid-row: 1 / span 2;
        align-self: stretch;
        border-right: 1px solid var(--color-border);
        border-bottom: none;
      }
      #mod-praepositionen .main-sentence {
        grid-column: 2;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
      }
      #mod-praepositionen .sub-expl {
        grid-column: 2;
      }
      #verb-konjunktiv-view-k1 .example-row,
      #verb-konjunktiv-view-k2 .example-row,
      #indefinitpronomen-view-examples .example-row,
      #infinitivsaetze-view-learn .example-row,
      #infinitivsaetze-view-ohne .example-row,
      #mod-konjunktionen .example-row,
      #mod-wortschatz-stilistik .example-row,
      #mod-stilistik-stilhygiene .example-row,
      #mod-stilistik-satzbau .example-row,
      #mod-stilistik-rhetorik .example-row {
        grid-template-columns: 1fr;
      }
      #verb-konjunktiv-view-k1 .main-sentence,
      #verb-konjunktiv-view-k2 .main-sentence,
      #indefinitpronomen-view-examples .main-sentence,
      #infinitivsaetze-view-learn .main-sentence,
      #infinitivsaetze-view-ohne .main-sentence,
      #mod-konjunktionen .main-sentence,
      #mod-wortschatz-stilistik .main-sentence,
      #mod-stilistik-stilhygiene .main-sentence,
      #mod-stilistik-satzbau .main-sentence,
      #mod-stilistik-rhetorik .main-sentence {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
      }
    }

    .main-sentence {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--color-text-strong);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    /* Shared flexible styling for BEISPIEL / ERKLÄRUNG / REGEL / … badges (nur klassenlose Label-Spans) */
    .main-sentence::before,
    .sub-expl > span:first-child:not([class]),
    .sub-expl:not(:has(span))::before {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 3px;
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      line-height: 1.35;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      width: auto;
      min-width: 12ch;
      max-width: 100%;
      text-align: center;
      white-space: normal;
      overflow: visible;
      box-sizing: border-box;
    }
    .main-sentence::before {
      content: "BEISPIEL";
      background-color: rgba(245, 158, 11, 0.12);
      border: 1px solid var(--cyber-amber);
      color: var(--cyber-amber);
    }

    /* Explanation & Rule Badges */
    .sub-expl {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .sub-expl > span:first-child:not([class]) {
      background-color: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      color: var(--cyber-cyan);
    }
    .accent-cyan .sub-expl > span:first-child:not([class]) { background-color: var(--cyber-pink-dim); border-color: var(--cyber-pink); color: var(--cyber-pink); }
    .accent-green .sub-expl > span:first-child:not([class]) { background-color: var(--cyber-green-dim); border-color: var(--cyber-green); color: var(--cyber-green); }
    .accent-pink .sub-expl > span:first-child:not([class]) { background-color: var(--cyber-pink-dim); border-color: var(--cyber-pink); color: var(--cyber-pink); }
    .accent-purple .sub-expl > span:first-child:not([class]) { background-color: var(--cyber-purple-dim); border-color: var(--cyber-purple); color: var(--cyber-purple); }
    .accent-orange .sub-expl > span:first-child:not([class]) { background-color: rgba(249, 115, 22, 0.12); border-color: var(--cyber-orange); color: var(--cyber-orange); }
    .accent-amber .sub-expl > span:first-child:not([class]) { background-color: rgba(245, 158, 11, 0.12); border-color: var(--cyber-amber); color: var(--cyber-amber); }

    .sub-expl:not(:has(span))::before {
      content: "ERKLÄRUNG";
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
    }

    .highlight { color: var(--cyber-cyan); font-weight: 700; }

    /* Beide Views als Block: gleiche Margin-Collapse mit dem Mode-Toggle
       (flex würde margin-top der Menükarte addieren → Sprung nach unten). */
    #mod-adjektiv-deklination[data-adjdek-mode="endungen"] #adjdek-view-full { display: none; }
    #mod-adjektiv-deklination[data-adjdek-mode="endungen"] #adjdek-view-endungen { display: block !important; }
    #adjdek-view-endungen .sub-title + .cheat-table.adjdek-endings-table {
      margin-top: 0;
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table {
      margin-bottom: 0;
    }
    #adjdek-view-endungen .table-h-scroll > .cheat-table.adjdek-endings-table,
    #adjdek-view-endungen .cheat-table.adjdek-endings-table {
      margin-bottom: 0;
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table th:not(:first-child),
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell {
      text-align: center;
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table th:nth-child(1),
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td:nth-child(1):not(.adjdek-group) {
      width: 22%;
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table .adjdek-group {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 600;
      color: var(--color-text-muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: var(--bg-body);
      padding: 3px 10px;
      line-height: 1.2;
      border-bottom: 1px solid var(--color-border);
      text-align: left !important;
      border-right: none;
    }

    /* Farb-Chunking: gleiche Endung = gleiche Zellenfarbe (Nur-Endungen) */
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--en {
      background: color-mix(in srgb, var(--color-text-muted) 10%, var(--bg-card));
      color: var(--color-text-muted);
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--e {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--er,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--es,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--em {
      background: var(--cyber-pink-dim);
      color: var(--cyber-pink);
    }
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--en strong,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--e strong,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--er strong,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--es strong,
    #mod-adjektiv-deklination .cheat-table.adjdek-endings-table td.adjdek-end-cell.adjdek-end--em strong {
      color: inherit;
    }
    #adjdek-view-endungen .kasus-order-bar--with-adjdek {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #adjdek-view-endungen .kasus-order-bar-row--legend {
      flex-wrap: nowrap;
    }
    #adjdek-view-endungen .kasus-order-bar-legend {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px 6px;
      min-width: 0;
    }
    #adjdek-view-endungen .adjdek-end-legend-lead {
      font-size: 12px;
      color: var(--color-text);
      margin-right: 4px;
      flex-shrink: 0;
    }
    #adjdek-view-endungen .adjdek-end-legend-strong {
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px 6px;
      margin-left: 12px;
      padding-left: 12px;
      border-left: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
      white-space: nowrap;
      flex-shrink: 0;
    }
    #adjdek-view-endungen .adjdek-end-legend-hint {
      font-size: 11px;
      color: var(--color-text-muted);
      line-height: 1.2;
      white-space: nowrap;
    }
    #adjdek-view-endungen .adjdek-end-swatch {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      padding: 3px 7px;
      border-radius: 3px;
      border: 1px solid transparent;
      vertical-align: baseline;
    }
    #adjdek-view-endungen .adjdek-end-swatch.adjdek-end--en {
      background: color-mix(in srgb, var(--color-text-muted) 10%, var(--bg-card));
      color: var(--color-text-muted);
      border-color: color-mix(in srgb, var(--color-text-muted) 28%, transparent);
    }
    #adjdek-view-endungen .adjdek-end-swatch.adjdek-end--e {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      border-color: color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
    }
    #adjdek-view-endungen .adjdek-end-swatch.adjdek-end--er,
    #adjdek-view-endungen .adjdek-end-swatch.adjdek-end--es,
    #adjdek-view-endungen .adjdek-end-swatch.adjdek-end--em {
      background: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border-color: color-mix(in srgb, var(--cyber-pink) 35%, transparent);
    }

    .prep-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 12px;
    }
    .prep-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-height: 1.85em;
      padding: 4px 12px;
      border-radius: 4px;
      border: 1px solid var(--color-border);
      background: var(--bg-body);
      font-family: var(--font-mono);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--color-text-strong);
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    /* Wechselpräpositionen: Wo / Wohin Diagramm */
    .wechsel-diagram {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 0 0 16px;
    }
    .wechsel-panel {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 14px 16px 16px;
      background: var(--bg-card);
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .wechsel-panel.is-wo {
      border-left: 3px solid var(--cyber-cyan);
    }
    .wechsel-panel.is-wohin {
      border-left: 3px solid var(--cyber-pink);
    }
    .wechsel-panel-label {
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .wechsel-panel.is-wo .wechsel-panel-label { color: var(--cyber-cyan); }
    .wechsel-panel.is-wohin .wechsel-panel-label { color: var(--cyber-pink); }
    .wechsel-panel-kasus {
      font-size: 12.5px;
      color: var(--color-text-muted);
      margin: -4px 0 0;
    }
    .wechsel-panel-kasus strong {
      color: var(--color-text-strong);
    }
    .wechsel-panel-phrase {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
    }
    .wechsel-panel.is-wo .wechsel-panel-phrase { color: var(--cyber-cyan); }
    .wechsel-panel.is-wohin .wechsel-panel-phrase { color: var(--cyber-pink); }
    .wechsel-svg {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
      background: var(--bg-body);
      color: var(--color-text);
    }
    .wechsel-panel-ex {
      font-size: 13px;
      line-height: 1.45;
      margin: 0;
    }
    .wechsel-prep-list {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-text);
    }
    .wechsel-prep-list strong {
      color: var(--cyber-cyan);
      font-family: var(--font-mono);
      font-weight: 700;
    }
    @media (max-width: 700px) {
      .wechsel-diagram {
        grid-template-columns: 1fr;
      }
    }

    /* Seiteninterne Sprungnavigation (Karten/Abschnitte) – flacher als Kapitel-Nav */
    .page-section-nav {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin: 44px 0 18px;
      padding: 10px 12px 10px 18px;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--cyber-cyan);
      border-radius: 0;
      box-shadow: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .page-section-nav {
      border-color: var(--color-border);
      border-left-color: var(--cyber-cyan);
      box-shadow: none;
    }
    /* Niveau-Reihe: Seitenwechsel, nicht Karten-Sprungleiste */
    .page-section-nav.page-section-nav--series {
      background: var(--nav-panel-bg);
      border: 1px solid var(--nav-panel-border);
      border-left: 1px solid var(--nav-panel-border);
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
      font-family: var(--font-mono);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .page-section-nav.page-section-nav--series {
      border-color: var(--nav-panel-border);
      box-shadow: 0 2px 10px rgba(8, 145, 178, 0.1);
    }
    .module-section > .page-section-nav.page-section-nav--series {
      background: var(--nav-panel-bg);
      box-shadow:
        0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 3px 12px rgba(0, 0, 0, 0.14);
    }
    .module-section > .page-section-nav,
    .module-section .page-section-nav {
      position: sticky;
      /* top = hud + gap + consoleStack + gap */
      top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px));
      z-index: 998;
      margin-top: 12px;
      margin-bottom: 16px;
      background: var(--bg-card);
      /* upward fill = nav↔this gap; downward fill = this↔next gap */
      box-shadow:
        0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app));
      border-bottom: 1px solid var(--sticky-bar-edge);
    }
    .page-section-nav-mark {
      position: absolute;
      top: 1px;
      left: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 10px;
      color: var(--cyber-cyan);
      opacity: 0.9;
      pointer-events: none;
    }
    .page-section-nav-mark svg {
      display: block;
      width: 12px;
      height: 8px;
    }
    .page-section-nav-mark--scroll {
      top: 0;
      left: 2px;
      width: 14px;
      height: 14px;
    }
    .page-section-nav-mark--scroll svg {
      width: 12px;
      height: 12px;
    }
    .page-section-nav-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .page-section-nav-break {
      flex-basis: 100%;
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      border: none;
      overflow: hidden;
      pointer-events: none;
    }
    .page-section-nav-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      margin-left: auto;
    }
    /* Zweite Button-Zeile: Alle-Karten/↑ oben rechts neben Zeile 1 */
    .page-section-nav.page-section-nav--split-rows {
      align-items: flex-start;
    }
    .page-section-nav.page-section-nav--split-rows .page-section-nav-filters {
      flex: 1 1 auto;
      min-width: 0;
    }
    .page-section-nav-top {
      flex-shrink: 0;
      width: 28px;
      min-width: 28px;
      height: 28px;
      padding: 0;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      line-height: 1;
    }
    .page-section-nav > .page-section-nav-top {
      margin-left: auto;
    }
    .page-section-nav-toggle {
      flex-shrink: 0;
      height: 28px;
      box-sizing: border-box;
      /* feste Breite: „Alle Karten auf“ und „… zu“ gleich breit → kein Hüpfen */
      width: 16em;
      min-width: 16em;
      max-width: 16em;
      padding: 0 12px;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      justify-content: center;
      overflow: hidden;
      text-overflow: clip;
    }
    .module-section .cyber-card[data-deck-card],
    #mod-praepositionen .cyber-card[id^="praep-card-"] {
      scroll-margin-top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px) + var(--card-deck-nav-h, 0px) + var(--sticky-stack-gap, 8px) + 8px);
    }
    #mod-praep-kasus .rule-title[id] {
      scroll-margin-top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px) + var(--card-deck-nav-h, 0px) + var(--sticky-stack-gap, 8px) + 8px);
    }
    .page-section-nav a,
    .page-section-nav button {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 28px;
      padding: 0 10px;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid rgba(6, 182, 212, 0.28);
      border-radius: 0;
      text-decoration: none;
      white-space: nowrap;
      overflow: visible;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .page-section-nav a,
    :is([data-theme="light"], [data-theme="sepia"]) .page-section-nav button {
      border-color: rgba(8, 145, 178, 0.25);
    }
    .page-section-nav a:hover,
    .page-section-nav button:hover,
    .page-section-nav a.active,
    .page-section-nav button.active {
      background: var(--cyber-cyan);
      color: #fff;
    }
    /* Must follow .page-section-nav button (cyan) — that rule is more specific and was wiping pink */
    .page-section-nav button.page-section-nav-toggle {
      color: var(--cyber-pink);
      background: var(--cyber-pink-dim);
      border-color: color-mix(in srgb, var(--cyber-pink) 28%, transparent);
    }
    .page-section-nav button.page-section-nav-toggle:hover,
    .page-section-nav button.page-section-nav-toggle.active {
      background: var(--cyber-pink);
      color: #fff;
    }

    /* Adjektiv-Präfixe: Matrix + Beispiele — kompakte Filter-Buttons */
    .adj-praefix-group-nav {
      align-items: flex-start;
      margin-bottom: 0;
    }
    .adj-praefix-group-nav .page-section-nav-filters {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
    }
    .verb-table-pin-head .adj-praefix-group-nav--pin,
    .verb-table-pin-head .adj-praefix-filter-nav--pin {
      position: static;
      top: auto;
      margin: 0;
      padding: 4px 0;
      border: none;
      border-left: none;
      box-shadow: none;
      background: transparent;
    }
    #adjektive-praefix-matrix-pin-head.verb-table-pin-head--stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      padding: 6px 10px 6px 8px;
    }
    #adjektive-praefix-bsp-pin-head.verb-table-pin-head--stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      padding: 6px 10px 6px 8px;
    }
    #adjektive-praefix-matrix-pin-head .verb-table-pin-head-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    #adjektive-praefix-bsp-pin-head .verb-table-pin-head-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    #adjektive-praefix-matrix-pin-head .verb-table-pin-head-row .alpha-jump {
      flex: 1;
      min-width: 0;
    }
    #adjektive-praefix-bsp-pin-head .verb-table-pin-head-row .alpha-jump {
      flex: 1;
      min-width: 0;
    }
    .adj-praefix-group-nav .page-section-nav-filters > button,
    .adj-praefix-filter-nav .page-section-nav-filters > button {
      min-height: 28px;
      height: 28px;
      padding: 0 6px;
      font-size: var(--ui-btn-font-size);
    }
    .adj-praefix-filter-nav .page-section-nav-filters > span.is-empty,
    .adj-praefix-filter-nav .page-section-nav-filters > span.is-muted {
      min-height: 28px;
      height: 28px;
      font-size: var(--ui-font-size-sm);
    }
    .adj-praefix-gruppen-hint {
      font-size: 9.5pt;
      color: var(--color-text-muted);
      margin: 0 0 12px;
      line-height: 1.45;
    }
    #adjektive-praefix-matrix-pin-head .adj-praefix-gruppen-hint {
      margin: 2px 0 10px;
      padding: 0 2px;
    }
    .adj-praefix-filter-nav .page-section-nav-filters > span.is-muted {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 28px;
      height: 28px;
      opacity: 0.35;
      pointer-events: none;
    }
    .adj-praefix-filter-nav {
      align-items: flex-start;
    }
    .adj-praefix-filter-nav .page-section-nav-filters {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .adj-praefix-filter-nav .page-section-nav-filters > button {
      width: 100%;
      max-width: none;
      min-width: 0;
      min-height: 28px;
      height: 28px;
      padding: 0 8px;
      font-size: var(--ui-btn-font-size);
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .adj-praefix-filter-nav .page-section-nav-filters > span.is-empty {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      min-height: 28px;
      height: 28px;
      box-sizing: border-box;
      font-family: var(--font-mono);
      font-size: 9.5pt;
      font-weight: 700;
      opacity: 0.35;
      padding: 0 8px;
      border: 1px dashed color-mix(in srgb, var(--color-border) 80%, transparent);
    }

    /* Kapitel-Menükarte: Sequenznummer am linken Chip-Rand, Label bleibt mittig
       (breite chapter-nav-pills — nicht In-Page-Karten-Nav) */
    .chapter-nav-pill.nav-seq {
      position: relative;
      justify-content: center;
      padding-left: 1.85em;
      padding-right: 1.85em;
    }
    .chapter-nav-pill.nav-seq .nav-seq-nr {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
      opacity: 0.9;
    }
    .chapter-nav-pill.nav-seq .nav-seq-label {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    /* Niveau-Serie: schmale content-Chips — nr+label im Fluss mit Gap
       (absolute + zentriert klebt hier als 01Grammatik) */
    .page-section-nav--series .page-section-nav-filters > .nav-seq {
      justify-content: center;
      gap: 0.4em;
      padding-left: 10px;
      padding-right: 10px;
    }
    .page-section-nav--series .nav-seq-nr {
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
      opacity: 0.9;
    }
    .page-section-nav--series .nav-seq-label {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    /* Kontraktionen: Verschmelzung grafisch */
    .kontraktion-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin: 0;
    }
    .kontraktion-card {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 10px;
      background: var(--bg-body);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.2;
    }
    .kontraktion-part {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.4em;
      padding: 5px 8px;
      border-radius: 4px;
      border: 1px dashed var(--color-border);
      color: var(--color-text-muted);
      font-weight: 600;
    }
    .kontraktion-plus,
    .kontraktion-arrow {
      color: var(--color-text-muted);
      font-weight: 700;
      font-size: 11px;
    }
    .kontraktion-arrow {
      color: var(--cyber-cyan);
      margin: 0 2px;
    }
    .kontraktion-result {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.6em;
      padding: 5px 10px;
      border-radius: 4px;
      border: 1px solid var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .accent-cyan .highlight { color: var(--cyber-pink); }
    .accent-green .highlight { color: var(--cyber-green); }
    .accent-pink .highlight { color: var(--cyber-pink); }
    .accent-purple .highlight { color: var(--cyber-purple); }
    .accent-orange .highlight { color: var(--cyber-orange); }
    .accent-amber .highlight { color: var(--cyber-amber); }

    .sub-section-title {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--cyber-pink);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 26px 0 12px 0;
    }
    .sub-section-title:first-child {
      margin-top: 0;
    }
    .cyber-card-body > .example-list + .sub-section-title,
    .cyber-card-body > .info-box + .sub-section-title,
    .cyber-card-body > .example-list + .info-box {
      margin-top: 26px;
    }

    /* Rules & Formulas */
    .rule-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 4px;
      color: var(--cyber-pink);
    }
    .sub-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
      color: var(--cyber-pink);
    }
    .rule-desc {
      font-size: 13.5px;
      color: var(--color-text-muted);
      margin-bottom: 6px;
    }
    .formula-container {
      font-family: var(--font-mono);
      font-size: 12px;
      background-color: var(--bg-body);
      border: 1px solid var(--color-border);
      padding: 6px 12px;
      border-radius: 6px;
      margin-bottom: 6px;
      line-height: 1.6;
    }

    /* Phonetics / Audio & Blurs */
    .accent {
      color: var(--cyber-pink);
      font-weight: 700;
      text-shadow: 0 0 5px rgba(236, 72, 153, 0.4);
    }

    .word-speak-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: 5px;
      padding: 0;
      width: 1.25em;
      height: 1.25em;
      border: none;
      border-radius: 2px;
      background: transparent;
      color: var(--color-text-muted);
      cursor: pointer;
      vertical-align: middle;
      opacity: 0.65;
      transition: color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    }
    .word-speak-btn svg {
      display: block;
      width: 0.95em;
      height: 0.95em;
      transition: transform 0.1s ease;
    }
    .word-speak-btn:hover {
      color: var(--cyber-cyan);
      opacity: 1;
      transform: scale(1.15);
    }
    .word-speak-btn:active {
      transform: scale(0.9);
      transition-duration: 0.05s;
    }
    .word-speak-btn.is-speaking {
      color: var(--cyber-cyan) !important;
      opacity: 1 !important;
      animation: ttsSpeakingPulse 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes ttsSpeakingPulse {
      0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px var(--cyber-cyan));
      }
      50% {
        transform: scale(1.25);
        filter: drop-shadow(0 0 6px var(--cyber-cyan));
      }
    }

    .blur-text {
      background-color: rgba(6, 182, 212, 0.1);
      filter: blur(5px);
      user-select: none;
      cursor: pointer;
      color: var(--cyber-cyan);
      padding: 0 4px;
      border: 1px dashed rgba(6, 182, 212, 0.3);
      transition: filter 0.3s, background-color 0.3s, color 0.3s;
    }
    .blur-text.revealed {
      filter: blur(0);
      background-color: transparent;
      user-select: text;
      border-color: transparent;
      color: var(--color-text-muted);
    }
    .eye-btn {
      background: none;
      border: none;
      color: var(--cyber-cyan);
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      cursor: pointer;
      padding: 0 4px;
    }
    .eye-btn:hover {
      color: #ffffff;
    }
    /* Premium Styled Tables — Referenz: Pronomen kasus-paradigm (Didaktikkarten) */
    .comp-table, .pronomen-table, .cyber-table, .cheat-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12.5px;
      margin: 16px 0;
      background-color: rgba(255, 255, 255, 0.005);
      border: 1px solid var(--color-border);
      border-radius: var(--table-frame-radius);
      overflow: hidden;
    }

    /* Innere Ecken — sichtbare Rundung auch bei vollen thead/tbody-Hintergründen */
    :is(.comp-table, .pronomen-table, .cyber-table, .cheat-table):not(.praep-kasus-table) thead tr:first-child th:first-child {
      border-top-left-radius: var(--table-frame-radius-inner);
    }
    :is(.comp-table, .pronomen-table, .cyber-table, .cheat-table):not(.praep-kasus-table) thead tr:first-child th:last-child {
      border-top-right-radius: var(--table-frame-radius-inner);
    }
    :is(.comp-table, .pronomen-table, .cyber-table, .cheat-table):not(.praep-kasus-table) tbody tr:last-child td:first-child {
      border-bottom-left-radius: var(--table-frame-radius-inner);
    }
    :is(.comp-table, .pronomen-table, .cyber-table, .cheat-table):not(.praep-kasus-table) tbody tr:last-child td:last-child {
      border-bottom-right-radius: var(--table-frame-radius-inner);
    }

    .cheat-table.praep-kasus-table {
      table-layout: fixed;
      overflow: visible;
      margin: 0;
      border: none;
      border-radius: 0;
      scroll-margin-top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px) + var(--card-deck-nav-h, 0px) + var(--sticky-stack-gap, 8px) + 8px);
    }
    #praep-kasus-wrap {
      overflow: visible;
      margin-bottom: 0;
    }
    .cheat-table.praep-kasus-table th:nth-child(1),
    .cheat-table.praep-kasus-table td:nth-child(1) {
      width: 18%;
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      border-right: 1px solid var(--table-col1-border);
    }
    .cheat-table.praep-kasus-table td:nth-child(1) {
      border-bottom-color: var(--table-col1-border);
    }
    .cheat-table.praep-kasus-table tbody {
      counter-reset: praep-nr;
    }
    .cheat-table.praep-kasus-table tbody tr:not([hidden]) {
      counter-increment: praep-nr;
    }
    .cheat-table.praep-kasus-table td:nth-child(1) strong::before {
      content: counter(praep-nr, decimal-leading-zero) ". ";
      font-weight: 600;
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-size: 0.92em;
    }
    .cheat-table.praep-kasus-table th:nth-child(1) {
      border-bottom-color: var(--cyber-cyan);
    }
    .cheat-table.praep-kasus-table td:nth-child(1) strong {
      color: var(--cyber-cyan);
    }
    .cheat-table.praep-kasus-table tbody tr:hover td:nth-child(1) {
      background: var(--table-col1-bg-hover);
    }
    .cheat-table.praep-kasus-table thead th:nth-child(1) {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      box-shadow: 0 1px 0 var(--cyber-cyan);
    }
    .cheat-table.praep-kasus-table th:nth-child(2),
    .cheat-table.praep-kasus-table td:nth-child(2),
    .cheat-table.praep-kasus-table th:nth-child(3),
    .cheat-table.praep-kasus-table td:nth-child(3),
    .cheat-table.praep-kasus-table th:nth-child(4),
    .cheat-table.praep-kasus-table td:nth-child(4),
    .cheat-table.praep-kasus-table th:nth-child(5),
    .cheat-table.praep-kasus-table td:nth-child(5) {
      width: 10%;
      text-align: center;
    }
    .cheat-table.praep-kasus-table th:nth-child(6),
    .cheat-table.praep-kasus-table td:nth-child(6) { width: 42%; }
    .cheat-table.praep-kasus-table .praep-kasus-mark,
    #adjektive-praefix-matrix-table .praep-kasus-mark,
    #adjektive-suffix-table .praep-kasus-mark,
    #adj-praep-table .praep-kasus-mark {
      color: var(--cyber-cyan);
      font-weight: 700;
    }
    .cheat-table.praep-kasus-table tr[hidden] {
      display: none;
    }
    .cheat-table.praep-kasus-table thead th {
      position: sticky;
      top: calc(
        var(--hud-height, 44px)
        + var(--sticky-stack-gap, 8px)
        + var(--card-deck-console-h, 52px)
        + var(--sticky-stack-gap, 8px)
        + var(--card-deck-nav-h, 0px)
        + var(--sticky-stack-gap, 8px)
      );
      z-index: 996;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      box-shadow: none;
    }
    .cheat-table.praep-kasus-table thead {
      box-shadow: 0 1px 0 var(--cyber-pink);
    }
    
    .comp-table th, .pronomen-table th, .cyber-table th, .cheat-table th {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--cyber-pink);
      background-color: var(--cyber-pink-dim);
      padding: 12px 14px;
      border-bottom: 2px solid var(--cyber-pink);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-align: left;
    }
    
    .comp-table td, .pronomen-table td, .cyber-table td, .cheat-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text);
      vertical-align: middle;
    }
    .table-h-scroll > .cyber-table,
    .table-h-scroll > .cheat-table {
      width: max-content;
      min-width: 100%;
      table-layout: auto;
    }
    .table-h-scroll > .cyber-table th,
    .table-h-scroll > .cyber-table td,
    .table-h-scroll > .cheat-table th,
    .table-h-scroll > .cheat-table td {
      white-space: nowrap;
    }
    #wortfelder-table td:nth-child(3),
    #wortfelder-table td:nth-child(4),
    #wortfelder-table th:nth-child(3),
    #wortfelder-table th:nth-child(4),
    #wortfelder-table th.wort-also-col,
    #wortfelder-table td.wort-also-col,
    #rektion-kasus-table td:nth-child(3),
    #rektion-kasus-table th:nth-child(3),
    #adjektive-praefix-table .adj-ex-cell,
    #adjektive-suffix-bsp-table .adj-ex-cell,
    .table-h-scroll > .cyber-table.wortschatz-2col th,
    .table-h-scroll > .cyber-table.wortschatz-2col td,
    .table-h-scroll > .cheat-table.wortschatz-2col th,
    .table-h-scroll > .cheat-table.wortschatz-2col td,
    .cyber-table.wortschatz-2col th,
    .cyber-table.wortschatz-2col td,
    .cheat-table.wortschatz-2col th,
    .cheat-table.wortschatz-2col td,
    .table-h-scroll > .cyber-table.wortschatz-3col td:not(:first-child),
    .table-h-scroll > .cyber-table.wortschatz-3col th:not(:first-child),
    .cyber-table.wortschatz-3col td:not(:first-child),
    .cyber-table.wortschatz-3col th:not(:first-child),
    .table-h-scroll > .cheat-table.wortschatz-4col td:nth-child(3),
    .table-h-scroll > .cheat-table.wortschatz-4col th:nth-child(3),
    .cheat-table.wortschatz-4col td:nth-child(3),
    .cheat-table.wortschatz-4col th:nth-child(3),
    .table-h-scroll > .cyber-table.wortschatz-5col td:not(:first-child),
    .table-h-scroll > .cyber-table.wortschatz-5col th:not(:first-child),
    .cyber-table.wortschatz-5col td:not(:first-child),
    .cyber-table.wortschatz-5col th:not(:first-child) {
      white-space: normal;
    }

    /* Shared Wortschatz list layouts by column count */
    .table-h-scroll > .cyber-table.wortschatz-2col,
    .table-h-scroll > .cheat-table.wortschatz-2col,
    .cyber-table.wortschatz-2col,
    .cheat-table.wortschatz-2col,
    .table-h-scroll > .cyber-table.wortschatz-3col,
    .cyber-table.wortschatz-3col,
    .table-h-scroll > .cyber-table.wortschatz-4col,
    .cyber-table.wortschatz-4col,
    .table-h-scroll > .cheat-table.wortschatz-4col,
    .cheat-table.wortschatz-4col,
    .table-h-scroll > .cyber-table.wortschatz-5col,
    .cyber-table.wortschatz-5col {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
    }
    .wortschatz-2col th:first-child,
    .wortschatz-2col td:first-child,
    .wortschatz-3col th:first-child,
    .wortschatz-3col td:first-child,
    .wortschatz-4col th:first-child,
    .wortschatz-4col td:first-child,
    .wortschatz-5col th:first-child,
    .wortschatz-5col td:first-child {
      font-size: var(--wortschatz-col1-font-size);
    }
    /* Alle Datenzellen gleiche Größe wie Lemma-Spalte (sonst erbt z. B. BEISPIEL 16px Body) */
    .wortschatz-3col tbody td,
    .wortschatz-4col tbody td,
    .wortschatz-5col tbody td {
      font-size: var(--wortschatz-col1-font-size);
    }
    .wortschatz-3col tbody td strong,
    .wortschatz-3col tbody td span,
    .wortschatz-4col tbody td strong,
    .wortschatz-4col tbody td span,
    .wortschatz-5col tbody td strong,
    .wortschatz-5col tbody td span {
      font-size: inherit;
    }
    .wortschatz-2col th:first-child,
    .wortschatz-2col td:first-child {
      width: var(--wortschatz-2col-c1);
      min-width: 34em;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }
    .wortschatz-2col th:last-child,
    .wortschatz-2col td:last-child {
      width: var(--wortschatz-2col-c2);
    }
    .wortschatz-3col th:nth-child(1),
    .wortschatz-3col td:nth-child(1) {
      width: var(--wortschatz-3col-c1);
      min-width: var(--wortschatz-3col-c1);
    }
    .wortschatz-3col th:nth-child(2),
    .wortschatz-3col td:nth-child(2) {
      width: var(--wortschatz-3col-c2);
    }
    .wortschatz-3col th:nth-child(3),
    .wortschatz-3col td:nth-child(3) {
      width: var(--wortschatz-3col-c3);
    }
    /* Synonymie-Liste (3 Spalten): Wort/Begriff kompakt, Reihe/Gegenteil und Nuance breit — festes Layout */
    #mod-synonymie .table-h-scroll {
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      touch-action: pan-y;
    }
    #mod-synonymie .table-container {
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .table-h-scroll > #synonymie-table,
    #synonymie-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #synonymie-table th,
    #synonymie-table td {
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #synonymie-table th:nth-child(1),
    #synonymie-table td:nth-child(1) {
      width: 20%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #synonymie-table th:nth-child(2),
    #synonymie-table td:nth-child(2) {
      width: 40%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #synonymie-table th:nth-child(3),
    #synonymie-table td:nth-child(3) {
      width: 40%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    /* Nuancen-Paare (4 Spalten): Wortpaar, Kategorie, Erklärung, Beispiele - passt exakt in 100% Breite */
    .table-h-scroll > #nuancen-paare-table,
    #nuancen-paare-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #nuancen-paare-table th,
    #nuancen-paare-table td {
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table th:nth-child(1),
    #nuancen-paare-table td:nth-child(1) {
      width: 22%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table .nuancen-term-cell {
      display: flex;
      align-items: baseline;
      gap: 0.35em;
      min-width: 0;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table .nuancen-term-cell .row-nr {
      flex: 0 0 auto;
      margin-right: 0;
    }
    #nuancen-paare-table .nuancen-term-cell .nuancen-term-text {
      flex: 1 1 auto;
      min-width: 0;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table th:nth-child(2),
    #nuancen-paare-table td:nth-child(2) {
      width: 16%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table .badge-cat {
      display: inline-block;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      line-height: 1.25;
    }
    #nuancen-paare-table th:nth-child(3),
    #nuancen-paare-table td:nth-child(3) {
      width: 31%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table th:nth-child(4),
    #nuancen-paare-table td:nth-child(4) {
      width: 31%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table .nuancen-item {
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #nuancen-paare-table .nuancen-item + .nuancen-item {
      border-top: 1px dashed rgba(255, 255, 255, 0.08);
      margin-top: 10px;
      padding-top: 10px;
    }
    :is([data-theme="light"], [data-theme="sepia"]) #nuancen-paare-table .nuancen-item + .nuancen-item {
      border-top: 1px dashed rgba(0, 0, 0, 0.08);
    }
    /* Phraseologie & Kuriositäten: 3-Spalten-Layout mit Beispielsatz */
    #redewendungen-table,
    #idiome-table,
    #nomen-verb-table,
    #kollokationen-table,
    #merkwuerdig-table {
      --wortschatz-3col-c1: 22em;
      --wortschatz-3col-c2: 28%;
      --wortschatz-3col-c3: auto;
    }
    /* Latein & Altgriechisch: Ausgewogene Spaltenbreiten (Ausdruck komfortabel, Beispielsatz mit maximalem Raum) */
    #latein-table,
    #altgriechisch-table {
      --wortschatz-3col-c1: 18em;
      --wortschatz-3col-c2: 21%;
      --wortschatz-3col-c3: auto;
    }
    #latein-table th:nth-child(1),
    #latein-table td:nth-child(1),
    #altgriechisch-table th:nth-child(1),
    #altgriechisch-table td:nth-child(1) {
      width: 18em;
      min-width: 16em;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #latein-table th:nth-child(2),
    #latein-table td:nth-child(2),
    #altgriechisch-table th:nth-child(2),
    #altgriechisch-table td:nth-child(2) {
      width: 21%;
      min-width: 12em;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #latein-table th:nth-child(3),
    #latein-table td:nth-child(3),
    #altgriechisch-table th:nth-child(3),
    #altgriechisch-table td:nth-child(3) {
      width: auto;
      min-width: 24em;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    .table-term-row {
      display: flex;
      align-items: flex-start;
      gap: 0.5em;
    }
    .table-term-row .row-nr {
      flex-shrink: 0;
      min-width: 1.8em;
      margin-right: 0;
      line-height: 1.45;
    }
    .table-term-content {
      flex: 1;
      min-width: 0;
    }
    .table-term-main {
      line-height: 1.45;
    }
    .altgriechisch-note {
      display: block;
      font-size: 0.86em;
      font-weight: 400;
      color: var(--color-text-muted);
      margin-top: 3px;
      line-height: 1.35;
    }
    #redewendungen-table th,
    #redewendungen-table td,
    #idiome-table th,
    #idiome-table td,
    #nomen-verb-table th,
    #nomen-verb-table td,
    #kollokationen-table th,
    #kollokationen-table td,
    #merkwuerdig-table th,
    #merkwuerdig-table td,
    #latein-table th,
    #latein-table td,
    #altgriechisch-table th,
    #altgriechisch-table td {
      white-space: normal;
      line-height: 1.5;
      vertical-align: top;
    }
    /* Register / rechte Spalte etwas breiter: Bedeutung 30%, Spalte 3 ~26% */
    #scheinanglizismen-table,
    #falsche-freunde-table {
      --wortschatz-3col-c2: 30%;
      --wortschatz-3col-c3: 26%;
    }
    /* Fremdwörter ↔ Deutsch: Kennzeichnung (Badges) eigene Spalte; Beispiel breit */
    #fremdwoerter-table {
      --wortschatz-4col-c1: 14em;
      --wortschatz-4col-c2: 9.75em;
      --wortschatz-4col-c3: 20%;
      --wortschatz-4col-c4: auto;
    }
    #fremdwoerter-table th:nth-child(1),
    #fremdwoerter-table td:nth-child(1) {
      width: var(--wortschatz-4col-c1);
      min-width: 11em;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #fremdwoerter-table th:nth-child(2),
    #fremdwoerter-table td:nth-child(2) {
      width: var(--wortschatz-4col-c2);
      min-width: 9.25em;
      max-width: 11em;
      white-space: normal;
      vertical-align: top;
    }
    #fremdwoerter-table th:nth-child(2) {
      white-space: nowrap;
    }
    #fremdwoerter-table th:nth-child(3),
    #fremdwoerter-table td:nth-child(3) {
      width: var(--wortschatz-4col-c3);
      min-width: 9em;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #fremdwoerter-table th:nth-child(4),
    #fremdwoerter-table td:nth-child(4) {
      width: auto;
      min-width: 22em;
      max-width: none;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #fremdwoerter-table th,
    #fremdwoerter-table td {
      white-space: normal;
      line-height: 1.5;
      vertical-align: top;
    }
    #fremdwoerter-table tbody td {
      font-size: var(--wortschatz-col1-font-size);
    }
    #fremdwoerter-table tbody td strong,
    #fremdwoerter-table tbody td span {
      font-size: inherit;
    }
    #fremdwoerter-table .fw-kenn-stack {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.28rem;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    /* Kennzeichnung: equal-width Herkunft / Thema badges, distinct accents */
    #fremdwoerter-table .fw-badge {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      padding: 2px 5px;
      font-size: 0.7em;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 3px;
      cursor: help;
    }
    #fremdwoerter-table .fw-badge--herkunft {
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 40%, transparent);
    }
    #fremdwoerter-table .fw-badge--cat {
      color: var(--cyber-pink);
      background: var(--cyber-pink-dim);
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 40%, transparent);
    }
    /* Redemittel: Formulierungen (Spalte 1) breiter als Lemma-Schema */
    #redemittel-table th:nth-child(1),
    #redemittel-table td:nth-child(1) {
      width: 52%;
      min-width: 32em;
      white-space: normal;
    }
    #redemittel-table th:nth-child(2),
    #redemittel-table td:nth-child(2) {
      width: 28%;
    }
    #redemittel-table th:nth-child(3),
    #redemittel-table td:nth-child(3) {
      width: 12em;
    }
    /* Emotionale Verstärker: Kategorie-Buttons (positiv / negativ / Gesamtliste) */
    #adjektive-view-boosters > div:first-of-type .cyber-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 11pt;
      line-height: 1.25;
      padding: 10px 14px;
    }
    #adjektive-view-boosters .adj-boosters-cat-sign {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.35em;
      height: 1.35em;
      border-radius: 50%;
      font-size: 1.05em;
      font-weight: 800;
      line-height: 1;
      flex-shrink: 0;
    }
    #adjektive-view-boosters .adj-boosters-cat-sign--pos {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      border: 1px solid var(--cyber-cyan);
    }
    #adjektive-view-boosters .adj-boosters-cat-sign--neg {
      background: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border: 1px solid var(--cyber-pink);
    }
    /* Emotionale Verstärker: Adjektiv | Bedeutung (DE) | Beispiel (B1+) */
    #adjektive-boosters-table {
      table-layout: fixed;
      width: 100%;
    }
    #adjektive-boosters-table th:nth-child(1),
    #adjektive-boosters-table td:nth-child(1) {
      width: 22%;
      min-width: 13em;
    }
    #adjektive-boosters-table th:nth-child(2),
    #adjektive-boosters-table td:nth-child(2) {
      width: 33%;
      min-width: 14em;
    }
    #adjektive-boosters-table th:nth-child(3),
    #adjektive-boosters-table td:nth-child(3) {
      width: 45%;
      min-width: 18em;
    }
    #adjektive-boosters-table .booster-example-cell {
      font-style: normal;
      line-height: 1.45;
      color: var(--color-text);
      white-space: normal;
      word-break: break-word;
    }
    /* Redemittel-Chips: festes 4-Spalten-Grid — gleiche Pill-Breiten, Alle spannt volle Grid-Breite.
       Override min-width 16em aus .chapter-nav.is-grouped .chapter-nav-pill. */
    #redemittel-sit-subnav .rede-chip-block {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #redemittel-sit-subnav .rede-chip-block > [data-rede-sit="alle"],
    #redemittel-sit-subnav .rede-chip-block > [data-rede-tag="alle"],
    #redemittel-sit-subnav .rede-chip-block > [data-rede-cat="alle"] {
      grid-column: 1 / -1;
    }
    #redemittel-sit-subnav .rede-chip-block > .chapter-nav-pill {
      min-width: 0 !important;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
      text-align: center;
    }
    /* Reststreifen: „Alle“ spannt volle erste Zeile → Rest-Rechnung um 1 verschoben (n−1 mod 4). */
    #redemittel-sit-subnav .rede-chip-block::after {
      content: '';
      pointer-events: none;
      align-self: stretch;
      justify-self: stretch;
      width: 100%;
      min-width: 0;
      min-height: 26px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), color-mix(in srgb, var(--cyber-pink-dim) 55%, transparent));
    }
    #redemittel-sit-subnav .rede-chip-block:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after {
      grid-column: span 3 / -1;
    }
    #redemittel-sit-subnav .rede-chip-block:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after {
      grid-column: span 2 / -1;
    }
    #redemittel-sit-subnav .rede-chip-block:has(> .chapter-nav-pill:nth-child(4n):last-child)::after {
      grid-column: span 1 / -1;
    }
    #redemittel-sit-subnav .rede-chip-block:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after {
      content: none;
      display: none;
    }
    /* Bereich-Filter: ausgeblendete Situations-Chips zählen weiter für ::after — Füllstreifen aus. */
    #redemittel-sit-subnav .rede-chip-block.is-filtered::after {
      content: none;
      display: none;
    }
    #redemittel-sit-subnav .rede-chip-block > .chapter-nav-pill[hidden] {
      display: none !important;
    }
    @media (max-width: 720px) {
      #redemittel-sit-subnav .rede-chip-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #redemittel-sit-subnav .rede-chip-block::after {
        content: none;
        display: none;
      }
    }
    #redemittel-pin-head {
      justify-content: flex-end;
    }
    /* Filter-Menükarte zu hoch für position:sticky (Viewport) — scrollt mit;
       Pin-Head/Thead kleben unter HUD + Nav-Console (wie Kollokationen). */
    .module-section > #redemittel-sit-subnav.chapter-nav.chap-subnav-card {
      position: relative;
      top: auto;
      z-index: auto;
      box-shadow: none;
      border-bottom: 1px solid var(--color-border);
    }
    .wortschatz-4col th:nth-child(1),
    .wortschatz-4col td:nth-child(1) {
      width: var(--wortschatz-4col-c1);
      min-width: var(--wortschatz-4col-c1);
    }
    .wortschatz-4col th:nth-child(2),
    .wortschatz-4col td:nth-child(2) {
      width: var(--wortschatz-4col-c2);
    }
    .wortschatz-4col th:nth-child(4),
    .wortschatz-4col td:nth-child(4) {
      width: var(--wortschatz-4col-c4);
      max-width: var(--wortschatz-4col-c4);
    }
    /* Wortbildung: Bedeutung schmaler, Beispiele breiter (kein Abschneiden) */
    .table-h-scroll > #wortbildung-table,
    #wortbildung-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
    }
    #wortbildung-table th:nth-child(3),
    #wortbildung-table td:nth-child(3) {
      width: 14em;
      max-width: 16em;
      white-space: normal;
    }
    #wortbildung-table th:nth-child(4),
    #wortbildung-table td:nth-child(4) {
      width: auto;
      max-width: none;
      white-space: normal;
      overflow-wrap: break-word;
    }

    /* Scheinanglizismen: 3 Spalten, DE/EN gestapelt — kein Horizontal-Scroll */
    #mod-wortschatz-scheinanglizismen .table-h-scroll {
      overflow-x: hidden;
    }
    .table-h-scroll > #scheinanglizismen-table,
    #scheinanglizismen-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
    }
    .table-h-scroll > #scheinanglizismen-table th,
    .table-h-scroll > #scheinanglizismen-table td,
    #scheinanglizismen-table th,
    #scheinanglizismen-table td {
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
    }
    #scheinanglizismen-table td:first-child:has(.word-speak-btn),
    #scheinanglizismen-table td:first-child:has(.word-speak-btn) strong {
      white-space: nowrap;
    }
    #scheinanglizismen-table .scheinangl-en {
      display: block;
      margin-top: 0.25em;
      color: var(--color-text-muted);
      line-height: 1.35;
    }

    /* Pragmatik / DACH / Niveau-Prüfungsformate / Genus / Alltag: Tabellen auf schmalen Screens umbrechen */
    @media (max-width: 720px) {
      #mod-wortschatz-pragmatik .cheat-table,
      #mod-aussprache-prosodie .cheat-table,
      #mod-wortschatz-dach .cheat-table,
      #mod-genus-merkregeln .cheat-table,
      #mod-brd-alltag .cheat-table,
      #mod-niveau-muendlich .cheat-table {
        table-layout: fixed;
        width: 100%;
      }
      #mod-wortschatz-pragmatik .cheat-table th,
      #mod-wortschatz-pragmatik .cheat-table td,
      #mod-aussprache-prosodie .cheat-table th,
      #mod-aussprache-prosodie .cheat-table td,
      #mod-wortschatz-dach .cheat-table th,
      #mod-wortschatz-dach .cheat-table td,
      #mod-genus-merkregeln .cheat-table th,
      #mod-genus-merkregeln .cheat-table td,
      #mod-brd-alltag .cheat-table th,
      #mod-brd-alltag .cheat-table td,
      #mod-niveau-muendlich .cheat-table th,
      #mod-niveau-muendlich .cheat-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      #redemittel-table th:nth-child(1),
      #redemittel-table td:nth-child(1) {
        min-width: 0;
      }
    }

    .wortschatz-5col th:nth-child(1),
    .wortschatz-5col td:nth-child(1) {
      width: var(--wortschatz-5col-c1);
      min-width: var(--wortschatz-5col-c1);
    }
    .wortschatz-5col th.wort-also-col,
    .wortschatz-5col td.wort-also-col {
      width: var(--wortschatz-5col-c2);
      max-width: var(--wortschatz-5col-c2);
    }
    .wortschatz-5col th:nth-child(3),
    .wortschatz-5col td:nth-child(3) {
      width: var(--wortschatz-5col-c3);
    }
    
    .comp-table tr:last-child td, .pronomen-table tr:last-child td, .cyber-table tr:last-child td, .cheat-table tr:last-child td {
      border-bottom: none;
    }
    
    .comp-table tbody tr:hover, .pronomen-table tbody tr:hover, .cyber-table tbody tr:hover, .cheat-table tbody tr:hover {
      background-color: rgba(6, 182, 212, 0.05);
    }
    
    :is([data-theme="light"], [data-theme="sepia"]) .comp-table tbody tr:hover, 
    :is([data-theme="light"], [data-theme="sepia"]) .pronomen-table tbody tr:hover, 
    :is([data-theme="light"], [data-theme="sepia"]) .cyber-table tbody tr:hover, 
    :is([data-theme="light"], [data-theme="sepia"]) .cheat-table tbody tr:hover {
      background-color: rgba(8, 145, 178, 0.04);
    }

    /* Konjugationstabellen: einheitliche Spaltenbreiten + Pronomen cyan */
    /* Erste Spalte: deckendes Cyan (kein rgba – sonst scheint Text beim Scrollen durch) */
    .comp-table th:first-child,
    .comp-table td:first-child,
    .pronomen-table th:first-child,
    .pronomen-table td:first-child,
    .cyber-table:not(.wortfelder-menu-table) th:first-child,
    .cyber-table:not(.wortfelder-menu-table) td:first-child,
    .cheat-table th:first-child,
    .cheat-table td:first-child:not(.adjdek-group):not(.adjdek-end-cell),
    #adj-praep-table th.adj-praep-th-adj,
    #adj-praep-table td:first-child,
    #adjektive-praefix-gruppen-table th.adj-praefix-th-stamm,
    #adjektive-praefix-gruppen-table td:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      border-right: 1px solid var(--table-col1-border);
    }
    .comp-table td:first-child,
    .pronomen-table td:first-child,
    .cyber-table:not(.wortfelder-menu-table) td:first-child,
    .cheat-table td:first-child:not(.adjdek-group):not(.adjdek-end-cell),
    #verben-rektion-table td:nth-child(1),
    #rektion-kasus-table td:nth-child(1),
    #wortfelder-table tbody td:first-child,
    #adjektive-suffix-table td:first-child,
    #adjektive-praefix-matrix-table td:first-child,
    #adj-praep-table td:first-child {
      border-bottom-color: var(--table-col1-border);
    }
    .comp-table th:first-child,
    .pronomen-table th:first-child,
    .cyber-table:not(.wortfelder-menu-table):not(#adj-praep-table) th:first-child,
    .cheat-table th:first-child {
      border-bottom-color: var(--cyber-cyan);
    }
    /* Kopfzeile Spalte 1: deckend cyan auch bei pinkem thead / is-pinned */
    .comp-table thead th:first-child,
    .pronomen-table thead th:first-child,
    .cyber-table:not(.wortfelder-menu-table):not(#adj-praep-table) thead th:first-child,
    .cheat-table thead th:first-child,
    .comp-table thead.is-pinned th:first-child,
    .pronomen-table thead.is-pinned th:first-child,
    .cyber-table:not(.wortfelder-menu-table):not(#adj-praep-table) thead.is-pinned th:first-child,
    .cheat-table thead.is-pinned th:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 120;
    }
    .comp-table td:first-child strong,
    .pronomen-table td:first-child strong,
    .cyber-table:not(.wortfelder-menu-table) td:first-child strong,
    .cheat-table td:first-child:not(.adjdek-group) strong,
    .comp-table td:first-child a,
    .pronomen-table td:first-child a,
    .cyber-table:not(.wortfelder-menu-table) td:first-child a,
    .cheat-table td:first-child:not(.adjdek-group) a {
      color: var(--cyber-cyan);
    }
    .comp-table tbody tr:hover td:first-child,
    .pronomen-table tbody tr:hover td:first-child,
    .cyber-table:not(.wortfelder-menu-table) tbody tr:hover td:first-child,
    .cheat-table tbody tr:hover td:first-child:not(.adjdek-group):not(.adjdek-end-cell) {
      background: var(--table-col1-bg-hover);
    }
    .cheat-table.adjdek-endings-table td.adjdek-group {
      background: var(--bg-body);
      color: var(--color-text-muted);
      border-right: none;
    }
    .row-nr {
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 0.92em;
      margin-right: 0.4em;
    }
    .comp-table td:first-child .row-nr,
    .pronomen-table td:first-child .row-nr,
    .cyber-table td:first-child .row-nr,
    .cheat-table td:first-child .row-nr {
      color: var(--color-text-muted);
    }
    /* Nummerierte Listen: Ziffern grau */
    .module-section ol:not([class]),
    .module-section ol.numbered-list {
      padding-left: 1.4em;
    }
    .module-section ol:not([class]) > li::marker,
    .module-section ol.numbered-list > li::marker {
      color: var(--color-text-muted);
      font-family: var(--font-mono);
    }

    .cheat-table.conj-table {
      table-layout: fixed;
      width: 100%;
    }
    .cheat-table.conj-table th:first-child,
    .cheat-table.conj-table td:first-child {
      width: 9.5em;
      white-space: nowrap;
    }
    .cheat-table.conj-table .conj-end {
      font-weight: 700;
      color: var(--cyber-pink);
    }
    /* Hilfsverb + Vollverb: Vollverb fluchtet senkrecht (Perfekt / Futur / Plusquam) */
    .cheat-table.conj-table .conj-pair {
      display: inline-grid;
      grid-template-columns: 6.75em minmax(0, 1fr);
      column-gap: 0.4em;
      align-items: baseline;
      text-align: left;
      width: 100%;
    }
    .cheat-table.conj-table .conj-aux {
      white-space: nowrap;
    }
    .cheat-table.conj-table .conj-main {
      min-width: 0;
    }

    /*
     * Sync first-column width across sibling 2–3-col grammar label tables
     * (Morphologie/Syntax). Opt-in: class "sync-cheat-col1" on the module section.
     * Skips wider layouts (4+ cols, conj/kasus/glossary tables) via :has().
     */
    .module-section.sync-cheat-col1 .cheat-table:is(
      :has(> thead > tr > th:first-child:nth-last-child(2)),
      :has(> thead > tr > th:first-child:nth-last-child(3))
    ) {
      table-layout: fixed;
      width: 100%;
    }
    .module-section.sync-cheat-col1 .cheat-table:is(
      :has(> thead > tr > th:first-child:nth-last-child(2)),
      :has(> thead > tr > th:first-child:nth-last-child(3))
    ) > :is(thead, tbody) > tr > :is(th, td):first-child {
      width: min(14rem, 40%);
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    /* Kasusreihenfolge: Schalter über der ersten Deklinationstabelle im Modul */
    .kasus-order-bar {
      margin: 0 0 10px;
      padding: 10px 12px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: color-mix(in srgb, var(--bg-card) 92%, var(--cyber-cyan) 8%);
    }
    .kasus-order-bar--with-adjdek .kasus-order-bar-row {
      gap: 8px 10px;
    }
    .kasus-order-bar--with-adjdek .kasus-order-bar-label {
      min-width: 0;
    }
    .kasus-order-bar-sep {
      width: 1px;
      align-self: stretch;
      min-height: 1.4em;
      margin: 0 4px;
      background: var(--color-border);
      flex-shrink: 0;
    }
    .kasus-order-bar-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
    }
    .kasus-order-bar-label {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      line-height: 1;
      flex-shrink: 0;
    }
    .kasus-order-bar-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .kasus-order-option {
      appearance: none;
      margin: 0;
      padding: 6px 10px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: transparent;
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.2;
      cursor: pointer;
    }
    .kasus-order-option:hover,
    .kasus-order-option:focus-visible {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      outline: none;
    }
    .kasus-order-option.is-active {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      font-weight: 600;
    }
    .kasus-order-live {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Kasus-Paradigmen: gleiche Spaltenbreite, Kasus-Spalte cyan, senkrechte Linien */
    .cheat-table.kasus-paradigm,
    .pronomen-table.kasus-paradigm {
      table-layout: fixed;
    }
    .cheat-table.kasus-paradigm th:not(:first-child),
    .cheat-table.kasus-paradigm td:not(:first-child),
    .pronomen-table.kasus-paradigm th:not(:first-child),
    .pronomen-table.kasus-paradigm td:not(:first-child) {
      border-left: 1px solid var(--color-border);
    }
    .cheat-table.kasus-paradigm th:first-child,
    .pronomen-table.kasus-paradigm th:first-child {
      color: var(--cyber-cyan);
      background: var(--table-col1-bg);
      border-bottom-color: var(--cyber-cyan);
    }
    .comp-table td:not(:first-child) strong,
    .pronomen-table td:not(:first-child) strong,
    .cyber-table td:not(:first-child) strong,
    .cheat-table td:not(:first-child) strong {
      color: var(--color-text-strong);
    }
    .cheat-table.kasus-paradigm td:first-child,
    .cheat-table.kasus-paradigm td:first-child strong,
    .pronomen-table.kasus-paradigm td:first-child,
    .pronomen-table.kasus-paradigm td:first-child strong {
      color: var(--cyber-cyan);
    }

    /* [02.02] Personalpronomen: Überschriften in einer Zeile */
    #mod-pronomen-personal .cheat-table.kasus-paradigm th {
      white-space: nowrap;
      letter-spacing: 0.02em;
      padding: 12px 8px;
    }
    #mod-pronomen-personal .cheat-table.kasus-paradigm th:nth-child(1),
    #mod-pronomen-personal .cheat-table.kasus-paradigm td:nth-child(1) { width: 11%; }
    #mod-pronomen-personal .cheat-table.kasus-paradigm th:nth-child(2),
    #mod-pronomen-personal .cheat-table.kasus-paradigm td:nth-child(2),
    #mod-pronomen-personal .cheat-table.kasus-paradigm th:nth-child(3),
    #mod-pronomen-personal .cheat-table.kasus-paradigm td:nth-child(3) { width: 18%; }
    #mod-pronomen-personal .cheat-table.kasus-paradigm th:nth-child(4),
    #mod-pronomen-personal .cheat-table.kasus-paradigm td:nth-child(4) { width: 33%; }
    #mod-pronomen-personal .cheat-table.kasus-paradigm th:nth-child(5),
    #mod-pronomen-personal .cheat-table.kasus-paradigm td:nth-child(5) { width: 20%; }

    /* Entlehnungen: feste Spalten; Ursprung darf auf max. 2 Zeilen umbrechen */
    .table-h-scroll > .cheat-table.herkunft-table,
    .cheat-table.herkunft-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
    }

    .herkunft-table th:nth-child(1),
    .herkunft-table td:nth-child(1) {
      white-space: normal;
    }

    #mod-wortschatz-herkunft .herkunft-table td:first-child strong {
      white-space: nowrap;
    }

    /* Lemma+TTS einzeilig; Wortfeld-Zeile darunter (kein Badge-Cluster) */
    #mod-wortschatz-herkunft .herkunft-table td:first-child:has(.word-speak-btn),
    #mod-wortschatz-herkunft .herkunft-table td:first-child:has(.herkunft-wf-line) {
      white-space: normal;
    }

    #mod-wortschatz-herkunft .herkunft-wf-line {
      display: block;
      margin: 2px 0 0;
      padding: 0;
      font-family: var(--font-mono);
      font-size: 6.5pt;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.4;
      color: var(--color-text-muted);
      opacity: 0.62;
      white-space: normal;
    }

    #mod-wortschatz-herkunft .herkunft-wf-prefix {
      font-weight: 600;
    }

    #mod-wortschatz-herkunft .herkunft-wf-sep {
      opacity: 0.7;
    }

    #mod-wortschatz-herkunft .herkunft-wf-link {
      display: inline;
      margin: 0;
      padding: 0;
      font: inherit;
      font-weight: 600;
      letter-spacing: inherit;
      line-height: inherit;
      color: inherit;
      background: none;
      border: none;
      border-radius: 0;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      text-decoration-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      vertical-align: baseline;
    }

    #mod-wortschatz-herkunft .herkunft-wf-link:hover,
    #mod-wortschatz-herkunft .herkunft-wf-link:focus-visible {
      color: var(--color-text);
      opacity: 1;
      text-decoration-color: color-mix(in srgb, var(--color-text) 55%, transparent);
      outline: none;
    }

    #mod-wortschatz-herkunft .herkunft-wf-more {
      display: none;
      margin-left: 0.3em;
      padding: 0;
      font: inherit;
      font-weight: 600;
      letter-spacing: inherit;
      color: inherit;
      background: none;
      border: none;
      border-radius: 0;
      vertical-align: baseline;
      cursor: help;
      opacity: 0.85;
    }

    .herkunft-table .herkunft-original {
      font-style: normal;
      color: var(--color-text-muted);
    }

    .table-h-scroll > .cheat-table.herkunft-table th:nth-child(4),
    .table-h-scroll > .cheat-table.herkunft-table td:nth-child(4),
    .herkunft-table th:nth-child(4),
    .herkunft-table td:nth-child(4) {
      white-space: normal;
      vertical-align: middle;
      line-height: 1.3;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .herkunft-table .herkunft-ursprung {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
    }

    /* Lemma + TTS-Icon in der linken Spalte immer einzeilig */
    .cyber-table:not(.wortfelder-menu-table) td:first-child:has(.word-speak-btn),
    .cheat-table td:first-child:has(.word-speak-btn) {
      white-space: nowrap;
    }
    .cyber-table:not(.wortfelder-menu-table) td:first-child:has(.word-speak-btn) strong,
    .cheat-table td:first-child:has(.word-speak-btn) strong {
      white-space: nowrap;
    }
    /* Wortschatz 2-Spalten: höhere Spezifität als die nowrap-Regel oben — lange Phrasen umbrechen */
    .cyber-table.wortschatz-2col:not(.wortfelder-menu-table) td:first-child:has(.word-speak-btn),
    .cheat-table.wortschatz-2col td:first-child:has(.word-speak-btn),
    .cyber-table.wortschatz-2col:not(.wortfelder-menu-table) td:first-child:has(.word-speak-btn) strong,
    .cheat-table.wortschatz-2col td:first-child:has(.word-speak-btn) strong,
    .table-h-scroll > .cyber-table.wortschatz-2col td:first-child,
    .table-h-scroll > .cyber-table.wortschatz-2col td:first-child strong {
      white-space: normal;
    }
    .wortschatz-2col td:first-child .word-speak-btn {
      display: inline-flex;
      vertical-align: text-bottom;
    }
    #nuancen-paare-table td:first-child:has(.word-speak-btn),
    #nuancen-paare-table td:first-child:has(.word-speak-btn) strong {
      white-space: normal;
    }
    #nuancen-paare-table .nuancen-term-unit {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      margin: 1px 0;
    }
    #nuancen-paare-table .nuancen-term-unit .word-speak-btn {
      margin-left: 3px;
      width: 20px;
      height: 20px;
    }
    #nuancen-paare-table .nuancen-term-sep {
      display: inline-block;
      margin: 0 4px;
      color: var(--color-text-muted);
      opacity: 0.6;
    }
    #rektion-kasus-table .rektion-kasus-verb,
    #verben-rektion-table td:first-child,
    #verben-unregel-table td:first-child,
    #abkuerzungen-table td:first-child,
    #falsche-freunde-table td:first-child {
      white-space: nowrap;
    }
    #rektion-kasus-table .rektion-kasus-verb .word-speak-btn,
    #verben-rektion-table td:first-child .word-speak-btn,
    #verben-unregel-table td:first-child .word-speak-btn,
    #abkuerzungen-table td:first-child .word-speak-btn,
    #falsche-freunde-table td:first-child .word-speak-btn {
      margin-left: 6px;
      vertical-align: middle;
    }
    /* Sprichwörter: besonders lange Zeilen (#101, #137–#138 …) */
    #sprichwoerter-table th:first-child,
    #sprichwoerter-table td:first-child {
      width: 62%;
      min-width: 38em;
    }
    #sprichwoerter-table th:last-child,
    #sprichwoerter-table td:last-child {
      width: 38%;
    }

    .menu-chip {
      min-width: 3.2em;
      padding: 6px 12px;
      font: inherit;
      font-size: var(--ui-btn-font-size);
      font-weight: 800;
      color: var(--color-text-muted);
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
      z-index: 6;
      pointer-events: auto;
    }
    .menu-chip:hover {
      color: var(--color-text);
      border-color: var(--cyber-cyan);
    }
    .menu-chip.is-active {
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      box-shadow: var(--glow-cyan);
    }
    .alpha-jump {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin: 0 0 12px;
      padding: 8px 10px;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-mono);
    }
    .verb-table-pin-head {
      --alpha-chip-h: 22px;
      position: sticky;
      /* under nav/console [+ second Menükarte]; pin-under-nav = 0 → flush to stack bottom */
      top: calc(
        var(--hud-height, 44px)
        + var(--sticky-stack-gap, 8px)
        + var(--card-deck-console-h, 52px)
        + var(--sticky-second-bar-offset, 0px)
        + var(--sticky-pin-under-nav, 0px)
      );
      z-index: 997;
      display: flex;
      align-items: center;
      gap: 10px;
      /* solid chrome — no downward --bg-app shadow (that painted a colorless strip over thead) */
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim));
      border-bottom: 1px solid var(--sticky-bar-edge);
      box-shadow: none;
      /* breathing room around chips — not larger chips */
      padding: 6px 12px 6px 8px;
      box-sizing: border-box;
    }
    /* First chrome inside rounded table frame: match inner top radius (no square overpaint) */
    .table-container--with-alpha > .verb-table-pin-head:first-child {
      border-top-left-radius: var(--table-frame-radius-inner);
      border-top-right-radius: var(--table-frame-radius-inner);
    }
    /* When stuck: square top corners (flush to nav — no gap cover needed) */
    .verb-table-pin-head.is-pinned {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      box-shadow: none;
    }
    .verb-table-pin-head .alpha-jump {
      flex: 1;
      min-width: 0;
      margin: 0;
      padding: 2px 4px;
      border: none;
      border-radius: 0;
      background: transparent;
      align-items: center;
    }
    .alpha-scroll-top-btn {
      flex-shrink: 0;
      box-sizing: border-box;
      width: var(--alpha-chip-h, 22px);
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 800;
      line-height: 1;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      border-radius: 3px;
      cursor: pointer;
    }
    .alpha-scroll-top-btn:hover {
      background: var(--cyber-cyan);
      color: #fff;
    }
    .alpha-count {
      flex-shrink: 0;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 8px;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      border-radius: 3px;
      white-space: nowrap;
      line-height: 1;
    }
    .alpha-count .alpha-count-num {
      font-variant-numeric: tabular-nums;
      min-width: 1.25em;
      text-align: right;
      line-height: 1;
    }
    /* Verstärker pin-head: Adjektiv-Übersetzungssprache (nicht Plattform-i18n) */
    .verb-table-pin-head .lang-pref-menu--pin-head {
      flex-shrink: 0;
      z-index: 1002;
    }
    .verb-table-pin-head .lang-pref-menu--pin-head .hud-pref-btn {
      box-sizing: border-box;
      width: auto;
      min-width: 36px;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 8px;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      border-radius: 3px;
    }
    .verb-table-pin-head .lang-pref-menu--pin-head .hud-pref-btn:hover,
    .verb-table-pin-head .lang-pref-menu--pin-head.is-open > .hud-pref-btn {
      background: var(--cyber-cyan);
      color: #fff;
      box-shadow: none;
    }
    .verb-table-pin-head .lang-pref-menu--pin-head .hud-pref-panel {
      top: calc(100% + 4px);
      right: 0;
    }
    .term-flash {
      animation: termFlashPulse 1.8s ease-in-out 2;
      outline: 3px solid var(--cyber-cyan, #06b6d4) !important;
      outline-offset: -2px;
      background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 22%, var(--bg-card, #ffffff)) !important;
      box-shadow: 0 0 22px rgba(6, 182, 212, 0.55), inset 0 0 12px rgba(6, 182, 212, 0.25) !important;
      position: relative;
      z-index: 5;
      border-radius: 4px;
    }
    .term-flash td {
      background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 20%, transparent) !important;
    }
    .term-flash td:first-child strong,
    .term-flash .main-sentence strong {
      color: var(--cyber-cyan, #0284c7) !important;
      text-shadow: 0 0 1px currentColor;
    }
    @keyframes termFlashPulse {
      0% {
        outline-color: var(--cyber-cyan, #06b6d4);
        box-shadow: 0 0 28px rgba(6, 182, 212, 0.8), inset 0 0 16px rgba(6, 182, 212, 0.4);
      }
      50% {
        outline-color: #38bdf8;
        box-shadow: 0 0 14px rgba(6, 182, 212, 0.35), inset 0 0 6px rgba(6, 182, 212, 0.15);
      }
      100% {
        outline-color: var(--cyber-cyan, #06b6d4);
        box-shadow: 0 0 22px rgba(6, 182, 212, 0.55), inset 0 0 12px rgba(6, 182, 212, 0.25);
      }
    }
    /* Entlehnungen: Toolbar-Zeile (Sort + Anzahl/↑) + Menükarte darunter */
    #mod-wortschatz-herkunft .herkunft-sort-btns {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    #mod-wortschatz-herkunft .herkunft-sort-btns .cyber-btn {
      box-sizing: border-box;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      font-size: var(--ui-btn-font-size);
      padding: 0 10px;
      line-height: 1;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
    }
    #mod-wortschatz-herkunft .herkunft-sort-btns .cyber-btn.is-active {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
    }
    #mod-wortschatz-herkunft .herkunft-sort-btns .cyber-btn:not(.is-active) {
      background-color: transparent;
      color: var(--color-text-muted);
      border-color: var(--color-border);
    }
    /* Tall sticky scope: pin-head stays under nav while language tables scroll */
    #herkunft-alpha-chrome {
      overflow: visible;
    }
    #herkunft-pin-head {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      margin-bottom: 24px;
      border: 1px solid var(--color-border);
      border-radius: var(--table-frame-radius);
      padding: 12px 14px;
    }
    #herkunft-pin-head.is-pinned {
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: none;
    }
    #herkunft-pin-head .herkunft-toolbar-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex-wrap: wrap;
    }
    #herkunft-pin-head .herkunft-toolbar-end {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }
    /* Menükarte: Herkunftsfilter in klaren Speisekarten-Zeilen */
    #herkunft-pin-head .herkunft-menu-card {
      margin: 0;
      padding: 10px 14px 12px;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
      border-radius: 6px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), transparent 42%),
        var(--bg-card);
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
    }
    #herkunft-pin-head .herkunft-menu-card .alpha-jump {
      flex: none;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
    }
    #herkunft-alpha.is-lang-jump {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }
    #herkunft-alpha.is-lang-jump .herkunft-chip-row {
      display: grid;
      grid-template-columns: 8em minmax(0, 1fr);
      gap: 8px 12px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px dotted color-mix(in srgb, var(--color-border) 80%, transparent);
    }
    #herkunft-alpha.is-lang-jump .herkunft-chip-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    #herkunft-alpha.is-lang-jump .herkunft-chip-row:first-child {
      padding-top: 0;
    }
    #herkunft-alpha.is-lang-jump .herkunft-row-label {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      line-height: 1.2;
    }
    #herkunft-alpha.is-lang-jump .herkunft-row-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      min-width: 0;
      padding-right: 6px;
    }
    #herkunft-alpha.is-lang-jump .herkunft-row-chips .alpha-jump-btn {
      font-weight: 700;
    }
    #herkunft-alpha.is-lang-jump .herkunft-row-chips .alpha-jump-btn .herkunft-chip-count {
      font-weight: 600;
      opacity: 0.85;
      margin-left: 0.15em;
    }
    #falsche-freunde-pin-head {
      padding: 8px 14px;
      gap: 12px;
      flex-wrap: wrap;
    }
    #falsche-freunde-pin-head .st-chips {
      gap: 6px;
      flex-wrap: wrap;
    }
    /* Fremdwörter: Menükarte + ABC im sticky Pin (Menü oben, ABC darunter) */
    #fremdwoerter-pin-head {
      padding: 8px 14px;
      gap: 8px 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    #fremdwoerter-menu-card {
      margin: 0;
      padding: 10px 14px 12px;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
      border-radius: 6px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), transparent 42%),
        var(--bg-card);
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    #fremdwoerter-menu-card .fw-chip-block {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 6px 0;
    }
    #fremdwoerter-menu-card .fw-chip-block--herkunft {
      padding-top: 0;
      border-bottom: 1px dotted color-mix(in srgb, var(--color-border) 80%, transparent);
    }
    #fremdwoerter-menu-card .fw-chip-block--cat {
      margin-top: 0;
      padding-bottom: 0;
      border-top: none;
    }
    #fremdwoerter-menu-card .fw-chip-row-label {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      line-height: 1.2;
    }
    #fremdwoerter-menu-card .st-chips {
      display: grid;
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      gap: 6px;
      align-items: stretch;
      margin: 0;
      padding: 0;
    }
    #fremdwoerter-menu-card .fw-herkunft-chips {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    #fremdwoerter-menu-card .fw-cat-chips,
    #fremdwoerter-menu-card #fremdwoerter-cat-chips {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    /* Herkunft/Thema filter chips: slightly flatter than default .st-chips .menu-chip */
    #fremdwoerter-menu-card .st-chips .menu-chip {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      justify-content: center;
      text-align: center;
      min-height: 26px;
      padding: 3px 4px;
      white-space: normal;
      line-height: 1.2;
      hyphens: auto;
      overflow-wrap: anywhere;
    }
    /* ABC + Anzahl + ↑ share one row (chips above stay full-width) */
    #fremdwoerter-pin-head .verb-table-pin-head-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1 1 100%;
      min-width: 0;
      width: 100%;
    }
    #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-jump {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      margin: 0;
    }
    #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-count,
    #fremdwoerter-pin-head .verb-table-pin-head-row .alpha-scroll-top-btn {
      flex-shrink: 0;
      margin-top: 1px;
    }
    @media (max-width: 1100px) {
      #fremdwoerter-menu-card .fw-cat-chips,
      #fremdwoerter-menu-card #fremdwoerter-cat-chips {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      #fremdwoerter-menu-card .fw-herkunft-chips {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      #fremdwoerter-menu-card .fw-cat-chips,
      #fremdwoerter-menu-card #fremdwoerter-cat-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #fremdwoerter-menu-card .fw-herkunft-chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      #herkunft-alpha.is-lang-jump .herkunft-chip-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }
    .verlauf-title {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--vh-accent, var(--cyber-cyan));
      margin: 0 0 8px;
    }
    .verlauf-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .verlauf-list button {
      display: flex;
      width: 100%;
      text-align: left;
      gap: 8px;
      align-items: baseline;
      padding: 8px 10px;
      font-family: var(--font-sans);
      font-size: 12.5px;
      color: var(--color-text);
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .verlauf-list button:hover {
      border-color: var(--vh-accent, var(--cyber-cyan));
      color: var(--vh-accent, var(--cyber-cyan));
      background: var(--vh-accent-soft, var(--cyber-cyan-dim));
    }
    .verlauf-list .verlauf-hub {
      font-size: 10px;
      color: var(--color-text-muted);
      flex-shrink: 0;
    }
    .alpha-count-extra {
      color: var(--color-text-muted);
      font-weight: 600;
      margin-left: 2px;
    }

    .verb-table-pin-head > .cyber-btn {
      flex-shrink: 0;
      box-sizing: border-box;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      font-size: var(--ui-btn-font-size);
      line-height: 1;
    }
    .table-container > .comp-table,
    .table-container > .pronomen-table,
    .table-container > .cyber-table,
    .table-container > .cheat-table,
    .table-h-scroll > .comp-table,
    .table-h-scroll > .pronomen-table,
    .table-h-scroll > .cyber-table,
    .table-h-scroll > .cheat-table {
      margin: 0;
      border: none;
      border-radius: 0;
      overflow: visible;
    }
    .alpha-jump-btn {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.65em;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 2px;
      font: inherit;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      line-height: 1;
      text-align: center;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid var(--cyber-cyan);
      border-radius: 3px;
      cursor: pointer;
    }
    .alpha-jump-btn:hover:not(.is-empty),
    .alpha-jump-btn.is-active {
      background: var(--cyber-cyan);
      color: #fff;
    }
    .alpha-jump-btn.is-empty {
      color: var(--color-text-muted);
      background: transparent;
      border-color: transparent;
      cursor: default;
      opacity: 0.35;
    }
    /* Sprach-/Präfix-Chips (mehrzeilige Labels) — A–Z-Buchstaben behalten Standard-.alpha-jump-btn */
    #herkunft-alpha.is-lang-jump .alpha-jump-btn,
    #doppelpraefixe-alpha .alpha-jump-btn {
      min-width: auto;
      height: var(--alpha-chip-h, 22px);
      min-height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 10px;
      text-transform: none;
      letter-spacing: 0;
    }
    /* Herkunftssprache-Chips: etwas weicherer Rahmen */
    #herkunft-alpha.is-lang-jump .alpha-jump-btn:not(.is-empty) {
      border-color: color-mix(in srgb, var(--cyber-cyan) 42%, transparent);
    }
    /* Entlehnungen: Rahmen am Container (innere Tabelle ohne Doppelrahmen) */
    #herkunft-container {
      overflow: visible;
    }
    #herkunft-container .herkunft-table {
      margin: 0;
    }

    .dialekt-map-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 4px 0 8px;
    }
    .dialekt-map {
      width: min(100%, 520px);
      height: auto;
      display: block;
    }
    .dialekt-map .dk-region {
      stroke: color-mix(in srgb, var(--color-border) 70%, transparent);
      stroke-width: 0.7;
      stroke-linejoin: round;
      transition: fill 0.15s ease, stroke 0.15s ease, filter 0.15s ease;
    }
    .dialekt-map .dk-region:hover {
      stroke: var(--cyber-cyan);
      stroke-width: 1.4;
      filter: brightness(1.08);
    }
    .dialekt-map .dk-nieder { fill: var(--cyber-cyan-dim); }
    .dialekt-map .dk-westmittel { fill: var(--cyber-green-dim); }
    .dialekt-map .dk-ostmittel { fill: var(--cyber-amber-dim); }
    .dialekt-map .dk-fraenkisch { fill: var(--cyber-orange-dim); }
    .dialekt-map .dk-alemannisch { fill: var(--cyber-purple-dim); }
    .dialekt-map .dk-bairisch { fill: var(--cyber-pink-dim); }
    .dialekt-map .dk-overlay {
      fill-opacity: 0.72;
      stroke-width: 0.9;
      stroke: color-mix(in srgb, var(--cyber-orange) 45%, var(--color-border));
    }
    .dialekt-map .dk-isogloss {
      fill: none;
      stroke: var(--color-text-muted);
      stroke-width: 1.2;
      stroke-dasharray: 5 4;
      opacity: 0.65;
      pointer-events: none;
    }
    .dialekt-map .dk-isogloss-2 { opacity: 0.5; }
    .dialekt-map .dk-isogloss-label {
      fill: var(--color-text-muted);
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      text-anchor: middle;
      pointer-events: none;
      opacity: 0.8;
    }
    .dialekt-map .dk-label {
      fill: var(--color-text-strong);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
      letter-spacing: 0.02em;
      paint-order: stroke;
      stroke: color-mix(in srgb, var(--bg-app) 75%, transparent);
      stroke-width: 3px;
    }
    .dialekt-map .dk-label-sm {
      font-size: 10px;
      font-weight: 700;
    }
    .dialekt-map .dk-label-xs {
      font-size: 8.5px;
      font-weight: 600;
      fill: var(--color-text-muted);
      stroke-width: 2.5px;
    }
    .dialekt-map .dk-country {
      fill: var(--color-text-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      pointer-events: none;
      opacity: 0.8;
    }
    .dialekt-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--color-text);
    }
    .dialekt-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .dialekt-legend i {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1px solid var(--color-border);
      border-radius: 2px;
      flex-shrink: 0;
    }
    .dialekt-legend .lg-nieder { background: var(--cyber-cyan-dim); }
    .dialekt-legend .lg-westmittel { background: var(--cyber-green-dim); }
    .dialekt-legend .lg-ostmittel { background: var(--cyber-amber-dim); }
    .dialekt-legend .lg-fraenkisch { background: var(--cyber-orange-dim); }
    .dialekt-legend .lg-alemannisch { background: var(--cyber-purple-dim); }
    .dialekt-legend .lg-bairisch { background: var(--cyber-pink-dim); }

    .brd-map-wrap {
      display: flex;
      justify-content: center;
      padding: 8px 0 4px;
    }
    .brd-map {
      width: min(100%, 480px);
      height: auto;
      display: block;
    }
    .brd-map .land {
      fill: var(--cyber-cyan-dim);
      stroke: var(--cyber-cyan);
      stroke-width: 1;
      stroke-linejoin: round;
      transition: fill 0.15s ease;
      cursor: default;
    }
    .brd-map .land:hover {
      fill: rgba(6, 182, 212, 0.35);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .brd-map .land:hover {
      fill: rgba(8, 145, 178, 0.28);
    }
    .brd-map .land-label {
      fill: var(--color-text-strong);
      font-size: 18px;
      font-weight: 800;
      font-family: var(--font-mono);
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .brd-map .land-label-sm {
      font-size: 13px;
    }
    /* Kapitel BRD: keine BEISPIEL/ROLLE-Badges */

    [id^="mod-niveau-"] .main-sentence::before,
    [id^="mod-niveau-"] .sub-expl > span:first-child,
    [id^="mod-niveau-"] .sub-expl:not(:has(span))::before {
      display: none;
    }
    [id^="mod-niveau-"] .main-sentence {
      padding-left: 0;
    }
    [id^="mod-brd-"] .main-sentence::before,
    [id^="mod-brd-"] .sub-expl > span:first-child,
    [id^="mod-brd-"] .sub-expl:not(:has(span))::before {
      display: none !important;
    }
    [id^="mod-brd-"] .main-sentence {
      margin-bottom: 2px;
    }

    /* Kapitel Rechtschreibung: keine BEISPIEL/ERKLÄRUNG-Badges */
    [id^="mod-rechtschreibung-"] .main-sentence::before,
    [id^="mod-rechtschreibung-"] .sub-expl:not(:has(span))::before {
      display: none !important;
      content: none !important;
    }
    [id^="mod-rechtschreibung-"] .sub-expl > span:first-child:not([class]) {
      all: unset;
      font-size: inherit;
      color: inherit;
      line-height: inherit;
    }

    /* Überblick / Orientierung: keine BEISPIEL/TIPP/ERKLÄRUNG-Badges (Strukturseiten) */
    [id$="-ueberblick"] .main-sentence::before,
    [id$="-ueberblick"] .sub-expl > span:first-child:not([class]),
    [id$="-ueberblick"] .sub-expl:not(:has(span))::before,
    #mod-rechtschreibung-system .main-sentence::before,
    #mod-rechtschreibung-system .sub-expl > span:first-child:not([class]),
    #mod-rechtschreibung-system .sub-expl:not(:has(span))::before {
      display: none !important;
      content: none !important;
    }

    .brd-map a {
      outline: none;
    }
    .brd-map a .land {
      cursor: pointer;
    }
    .brd-legend a {
      text-decoration: none;
      border-bottom: 1px dashed currentColor;
    }
    .brd-legend a:hover {
      border-bottom-style: solid;
    }
    .brd-flag {
      display: block;
      width: min(100%, 280px);
      height: auto;
      aspect-ratio: 5 / 3;
      object-fit: fill;
      border: 1px solid var(--color-border);
      border-radius: 2px;
      margin: 8px 0 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .brd-flag-sm {
      width: min(100%, 168px);
      margin: 0 0 10px;
    }
    .brd-flag-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      margin: 12px 0 0;
    }
    .brd-flag-item {
      padding: 12px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.02);
    }
    .brd-flag-name {
      font-weight: 700;
      font-size: 13px;
      color: var(--color-text-strong);
      margin: 0 0 4px;
      line-height: 1.3;
    }
    .brd-flag-expl {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--color-text-muted);
    }
    .geschichte-prose {
      font-size: 13.5px;
      line-height: 1.65;
      color: var(--color-text);
      margin: 0 0 12px;
    }
    .geschichte-prose:last-child {
      margin-bottom: 0;
    }
    .hymnen-lyrics {
      margin: 14px 0;
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--cyber-cyan);
      background: var(--bg-card);
      font-size: 14px;
      line-height: 1.7;
      color: var(--color-text-strong);
    }
    .hymnen-lyrics p {
      margin: 0 0 12px;
    }
    .hymnen-lyrics p:last-child {
      margin-bottom: 0;
    }
    .hymnen-audio-note {
      margin-top: 16px !important;
      margin-bottom: 8px !important;
    }
    .hymnen-audio {
      display: block;
      width: 100%;
      max-width: 36rem;
      margin: 0 0 4px;
    }

    .hub-teaser {
      margin: 0 12px 8px;
      padding: 0 4px;
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--color-text-muted);
    }
    .chapter-nav {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 16px;
      padding: 10px 12px 10px 22px;
      background: var(--nav-panel-bg);
      border: 1px solid var(--nav-panel-border);
      border-radius: 0;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
      font-family: var(--font-mono);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .chapter-nav {
      border-color: var(--nav-panel-border);
      box-shadow: 0 2px 10px rgba(8, 145, 178, 0.1);
    }
    .chapter-nav.is-grouped {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"] {
      position: sticky;
      /* top = hud + gap + navH + gap */
      top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--nav-console-h, 52px) + var(--sticky-stack-gap, 8px));
      z-index: 998;
      margin-top: 8px;
      margin-bottom: 12px;
      background: var(--nav-panel-bg);
      /* upward fill = nav↔chrome gap; no downward fill — pin-head may sit flush under stack */
      box-shadow: 0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app));
    }
    .chapter-nav-progress {
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      color: var(--cyber-cyan);
      white-space: nowrap;
    }
    /* Gruppierte Kapitelkarte: Label-Spalte portalweit fix (längstes Label); Chips = feste Zellen */
    .chapter-nav.is-grouped .chapter-nav-groups {
      display: grid;
      grid-template-columns: var(--chapter-nav-label-width) minmax(0, 1fr);
      gap: 6px 4px;
      align-items: start;
    }
    .chapter-nav-row {
      display: block;
      min-width: 0;
    }
    .chapter-nav.is-grouped .chapter-nav-row {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: start;
    }
    .chapter-nav-row-label {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: var(--chapter-nav-label-width);
      min-width: var(--chapter-nav-label-width);
      height: 26px;
      padding: 0 10px;
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--cyber-pink);
      background: var(--cyber-pink-dim);
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent);
      border-radius: 0;
      white-space: nowrap;
      line-height: 1;
      cursor: default;
      text-align: center;
    }
    .chapter-nav.is-grouped .chapter-nav-row-label {
      width: 100%;
      min-width: 0;
      height: auto;
      min-height: 26px;
      padding: 4px 10px;
      white-space: nowrap;
      line-height: 1.15;
      align-self: stretch;
      justify-content: flex-end;
      text-align: right;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .chapter-nav-row-label {
      background: var(--cyber-pink-dim);
      border-color: color-mix(in srgb, var(--cyber-pink) 28%, transparent);
    }
    .chapter-nav-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }
    /* Zeilen-feste 2-Stufen-Navigation mit durchgehendem Seiten-Streifen */
    .chapter-nav.is-row-aligned .chapter-nav-groups-wrapper {
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-groups {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: 100% !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-row {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 26px !important;
      min-height: 26px !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn {
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex: 0 0 var(--chapter-nav-label-width, 190px) !important;
      width: var(--chapter-nav-label-width, 190px) !important;
      min-width: var(--chapter-nav-label-width, 190px) !important;
      height: 26px !important;
      min-height: 26px !important;
      padding: 0 10px !important;
      font-family: inherit !important;
      font-size: var(--ui-btn-font-size) !important;
      font-weight: 700 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
      color: var(--cyber-pink) !important;
      background: var(--cyber-pink-dim) !important;
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 28%, transparent) !important;
      border-radius: 0 !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      cursor: pointer !important;
      text-align: right !important;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn:hover {
      background: color-mix(in srgb, var(--cyber-pink) 25%, transparent) !important;
      border-color: var(--cyber-pink) !important;
      color: #fff !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active {
      background: var(--cyber-pink) !important;
      color: #0b0f19 !important;
      border-color: var(--cyber-pink) !important;
      font-weight: 800 !important;
      box-shadow: none !important;
      outline: none !important;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .chapter-nav.is-row-aligned .chapter-nav-row-label.chapter-nav-cat-btn.is-active {
      color: #fff !important;
      background: var(--cyber-pink) !important;
      box-shadow: none !important;
    }

    /* Durchgehender rechter Seiten-Streifen (Alles einblenden / einklappen) */
    .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn {
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 16px !important;
      width: 16px !important;
      min-width: 16px !important;
      align-self: stretch !important;
      height: auto !important;
      min-height: 100% !important;
      padding: 0 !important;
      color: var(--cyber-cyan) !important;
      background: var(--cyber-cyan-dim) !important;
      border: 1px solid rgba(6, 182, 212, 0.28) !important;
      border-radius: 0 !important;
      cursor: pointer !important;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn:hover {
      background: var(--cyber-cyan) !important;
      color: #0b0f19 !important;
      border-color: var(--cyber-cyan) !important;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn:hover {
      color: #fff !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn .icon-collapse {
      display: none !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn .icon-expand {
      display: block !important;
    }
    .chapter-nav.is-row-aligned.show-all .chapter-nav-toggle-sidebar-btn .icon-collapse {
      display: block !important;
    }
    .chapter-nav.is-row-aligned.show-all .chapter-nav-toggle-sidebar-btn .icon-expand {
      display: none !important;
    }

    /* Kapitel-Pills */
    .chapter-nav.is-row-aligned:not(.show-all) .chapter-nav-row:not(.is-active) .chapter-nav-pills {
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-row.is-active .chapter-nav-pills,
    .chapter-nav.is-row-aligned.show-all .chapter-nav-row .chapter-nav-pills {
      visibility: visible !important;
      pointer-events: auto !important;
      display: grid !important;
      grid-template-columns: repeat(var(--nav-row-cols, 4), minmax(0, 1fr)) !important;
      align-items: center !important;
      gap: 6px !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      animation: fadeInNavPills 0.15s ease-out !important;
    }
    .chapter-nav.is-row-aligned.show-all .chapter-nav-row-label.chapter-nav-cat-btn {
      opacity: 0.95;
    }
    .chapter-nav.is-row-aligned .chapter-nav-pills::after {
      content: '' !important;
      pointer-events: none !important;
      align-self: stretch !important;
      justify-self: stretch !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 26px !important;
      min-height: 26px !important;
      background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), color-mix(in srgb, var(--cyber-pink-dim) 55%, transparent)) !important;
      border: none !important;
    }
    /* Volle Zeilen (5 Pills im 5er-Grid, 4 Pills im 4er-Grid, 3 Pills im 3er-Grid, 2 Pills im 2er-Grid): kein Restverlauf nötig */
    .chapter-nav.is-row-aligned .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(5):last-child)::after,
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:4"]:has(> .chapter-nav-pill:nth-child(4):last-child)::after,
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:3"]:has(> .chapter-nav-pill:nth-child(3):last-child)::after,
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:2"]:has(> .chapter-nav-pill:nth-child(2):last-child)::after {
      content: none !important;
      display: none !important;
    }
    /* 5er-Grid: 4 Pills (Spalte 5 füllen – z.B. Verben Zeile 1) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:5"]:has(> .chapter-nav-pill:nth-child(4):last-child)::after {
      grid-column: 5 / -1 !important;
    }
    /* 5er-Grid: 3 Pills (Spalten 4 & 5 füllen – z.B. Pronomen Zeile 2) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:5"]:has(> .chapter-nav-pill:nth-child(3):last-child)::after {
      grid-column: 4 / -1 !important;
    }
    /* 4er-Grid: 3 Pills (Spalte 4 füllen – z.B. Adjektive Zeilen 1 & 2) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:4"]:has(> .chapter-nav-pill:nth-child(3):last-child)::after {
      grid-column: 4 / -1 !important;
    }
    /* 4er-Grid: 2 Pills (Spalten 3 & 4 füllen – z.B. Präpositionen Zeilen 1 & 2) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:4"]:has(> .chapter-nav-pill:nth-child(2):last-child)::after {
      grid-column: 3 / -1 !important;
    }
    /* 3er-Grid: 2 Pills (Spalte 3 füllen – z.B. Nomen Zeile 3) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:3"]:has(> .chapter-nav-pill:nth-child(2):last-child)::after {
      grid-column: 3 / -1 !important;
    }
    /* 3er-Grid: 1 Pill (Spalten 2 & 3 füllen – z.B. Nomen Zeile 2) */
    .chapter-nav.is-row-aligned .chapter-nav-pills[style*="--nav-row-cols:3"]:has(> .chapter-nav-pill:nth-child(1):last-child)::after {
      grid-column: 2 / -1 !important;
    }
    .chapter-nav.is-row-aligned .chapter-nav-pill,
    .chapter-nav.is-grouped.is-row-aligned .chapter-nav-pill {
      min-width: 0 !important;
      width: 100% !important;
      max-width: none !important;
      white-space: nowrap !important;
      height: 26px !important;
      min-height: 26px !important;
      padding: 0 8px !important;
      padding-left: 1.85em !important;
      padding-right: 0.8em !important;
      line-height: 1 !important;
      box-sizing: border-box !important;
      text-align: center !important;
    }
    @keyframes fadeInNavPills {
      from { opacity: 0; transform: translateY(-2px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 768px) {
      .chapter-nav.is-row-aligned .chapter-nav-groups {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-row:not(.is-active) {
        display: block !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-row:not(.is-active) .chapter-nav-pills {
        display: none !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-row.is-active .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-pills::after {
        display: none !important;
      }
      .chapter-nav.is-row-aligned .chapter-nav-toggle-sidebar-btn {
        display: none !important;
      }
    }
    .chapter-nav-pill {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 26px;
      padding: 0 10px;
      margin: 0;
      font-family: inherit;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      line-height: 1;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border: 1px solid rgba(6, 182, 212, 0.28);
      border-radius: 0;
      cursor: pointer;
      white-space: nowrap;
      overflow: visible;
      vertical-align: middle;
      -webkit-appearance: none;
      appearance: none;
      transition: background 0.15s, color 0.15s;
    }
    .chapter-nav.is-grouped .chapter-nav-pill {
      width: auto;
      min-width: var(--menu-pill-min-width);
      max-width: none;
      height: auto;
      min-height: 26px;
      padding: 4px 10px;
      white-space: normal;
      text-align: center;
      line-height: 1.15;
      overflow-wrap: normal;
    }
    .chapter-nav.is-grouped .chapter-nav-pill[data-glossar-view],
    .chapter-nav.is-grouped .chapter-nav-pill[data-glossar-mode],
    .chapter-nav.is-grouped .chapter-nav-pill[data-glossar-sort] {
      justify-content: flex-start;
      text-align: left;
    }
    .chapter-nav-pill:hover {
      background: var(--cyber-cyan);
      color: #fff;
    }
    .chapter-nav-pill.is-active {
      background: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
      color: #fff;
      cursor: default;
    }
    .dach-flags-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      line-height: 0;
      vertical-align: middle;
    }
    .dach-flags-pill svg {
      display: block;
      flex-shrink: 0;
      border: 1px solid rgba(0, 0, 0, 0.18);
      border-radius: 1px;
    }
    .chapter-nav-pill .dach-flags-pill svg.dach-flag-de,
    .chapter-nav-pill .dach-flags-pill svg.dach-flag-at {
      width: 20px;
      height: 12px;
    }
    .chapter-nav-pill .dach-flags-pill svg.dach-flag-ch {
      width: 12px;
      height: 12px;
    }
    .epoch-timeline {
      list-style: none;
      margin: 0;
      padding: 0 0 0 4px;
      border-left: 2px solid var(--cyber-cyan);
    }
    .epoch-timeline > li {
      position: relative;
      padding: 0 0 16px 18px;
    }
    .epoch-timeline > li:last-child { padding-bottom: 0; }
    .epoch-timeline > li::before {
      content: "";
      position: absolute;
      left: -7px;
      top: 4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cyber-cyan);
      box-shadow: 0 0 0 3px var(--cyber-cyan-dim);
    }
    .epoch-year {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      color: var(--cyber-pink);
      margin-bottom: 4px;
    }
    .epoch-text {
      display: block;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-text);
    }
    .laut-compare {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 10px 0;
    }
    @media (max-width: 720px) {
      .laut-compare { grid-template-columns: 1fr; }
    }
    .laut-col {
      border: 1px solid var(--color-border);
      border-radius: 6px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }
    .laut-col-h {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 8px 10px;
      border-bottom: 1px solid var(--color-border);
    }
    .laut-col.accent-en .laut-col-h { color: var(--cyber-amber); background: rgba(245,158,11,0.1); }
    .laut-col.accent-nd .laut-col-h { color: var(--cyber-green); background: rgba(16,185,129,0.1); }
    .laut-col.accent-hd .laut-col-h { color: var(--cyber-cyan); background: var(--cyber-cyan-dim); }
    .laut-col-b {
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.55;
    }
    .merk-box {
      background-color: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-left: 5px solid var(--cyber-cyan);
      border-radius: 4px;
      padding: 12px 14px;
      margin: 12px 0;
      font-size: 13px;
      line-height: 1.55;
      box-sizing: border-box;
    }
    /* Tip/Info: Cyan (folgt data-accent) · Acht: Amber · DaF: Pink */
    .merk-tip {
      border-color: var(--cyber-cyan);
      border-left-color: var(--cyber-cyan);
      background-color: var(--bg-card);
    }
    .merk-acht {
      border-color: var(--cyber-amber);
      border-left-color: var(--cyber-amber);
      background-color: var(--bg-card);
    }
    .merk-daf {
      border-color: var(--cyber-pink);
      border-left-color: var(--cyber-pink);
      background-color: var(--bg-card);
    }
    /* Plain merk: erste Überschrift in Akzentfarbe (inline, keine Tip-Label-Typo) */
    .merk-box > strong:first-of-type,
    .merk-box > strong.merk-label {
      color: var(--cyber-cyan);
      font-weight: 800;
    }
    /* Tip/Acht/DaF: only label strongs are block (first-of-type + optional .merk-label).
       Mid-sentence / nested strong stays inline. first-of-type tolerates indented whitespace. */
    .merk-tip > strong:first-of-type,
    .merk-acht > strong:first-of-type,
    .merk-daf > strong:first-of-type,
    .merk-tip > strong.merk-label,
    .merk-acht > strong.merk-label,
    .merk-daf > strong.merk-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 6px;
    }
    .merk-tip > strong:first-of-type,
    .merk-tip > strong.merk-label { color: var(--cyber-cyan); }
    .merk-acht > strong:first-of-type,
    .merk-acht > strong.merk-label { color: var(--cyber-amber); }
    .merk-daf > strong:first-of-type,
    .merk-daf > strong.merk-label { color: var(--cyber-pink); }
    /* Nested: merk in info — kein Doppelrahmen, nur Akzent-Kante */
    .info-box .merk-box {
      background-color: transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-width: 4px;
      border-radius: 0;
      margin: 10px 0 2px;
      padding: 8px 4px 8px 14px;
    }
    .din5008-intro-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
      gap: 8px 28px;
      align-items: start;
    }
    .din5008-intro-main .geschichte-prose:last-child { margin-bottom: 0; }
    .din5008-norm-panel {
      margin: 0;
      align-self: start;
    }
    .din5008-norm-meta {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 6px 14px;
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.5;
    }
    .din5008-norm-meta dt {
      margin: 0;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      white-space: nowrap;
    }
    .din5008-norm-meta dd {
      margin: 0;
      color: var(--color-text);
    }
    .din5008-norm-links {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 13px;
      line-height: 1.55;
    }
    .din5008-norm-links li + li { margin-top: 6px; }
    .din5008-norm-panel strong + .din5008-norm-meta,
    .din5008-norm-panel strong + .din5008-norm-links { margin-top: 6px; }
    .din5008-norm-panel strong:not(:first-child) { margin-top: 14px; }
    @media (max-width: 768px) {
      .din5008-intro-body { grid-template-columns: 1fr; }
      .din5008-norm-panel { margin-top: 4px; }
    }
    /* Equal-pills: 4er-Grid ab 8 Buttons; bis 7 → --one-row (gleichmäßige Flex-Breite) */
    .page-section-nav.page-section-nav--equal-pills {
      align-items: start;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters > button {
      width: 100%;
      max-width: none;
      min-width: 0;
      flex-shrink: 1;
      height: 28px;
      min-height: 28px;
      padding: 0 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters::after {
      content: '';
      pointer-events: none;
      align-self: stretch;
      justify-self: stretch;
      width: 100%;
      min-width: 0;
      min-height: 28px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), color-mix(in srgb, var(--cyber-pink-dim) 55%, transparent));
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters:has(> button:nth-child(4n + 1):last-of-type)::after {
      grid-column: span 3 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters:has(> button:nth-child(4n + 2):last-of-type)::after {
      grid-column: span 2 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters:has(> button:nth-child(4n + 3):last-of-type)::after {
      grid-column: span 1 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters:has(> button:nth-child(4n):last-of-type)::after {
      content: none;
      display: none;
    }
    /* Equal-pills 5er-Grid (z. B. Konjunktiv I/II Sprungkarten); Mobil bleibt 2 Spalten via MQ unten */
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(4n + 1):last-of-type)::after,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(4n + 2):last-of-type)::after,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(4n + 3):last-of-type)::after,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(4n):last-of-type)::after {
      content: '';
      display: block;
      grid-column: auto;
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(5n + 1):last-of-type)::after {
      grid-column: span 4 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(5n + 2):last-of-type)::after {
      grid-column: span 3 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(5n + 3):last-of-type)::after {
      grid-column: span 2 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(5n + 4):last-of-type)::after {
      grid-column: span 1 / -1;
    }
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--cols-5 .page-section-nav-filters:has(> button:nth-child(5n):last-of-type)::after {
      content: none;
      display: none;
    }
    /* Eine Reihe, gleiche Button-Breite (4–7 Sprung-Buttons) */
    .page-section-nav.page-section-nav--one-row {
      flex-wrap: nowrap;
      align-items: center;
    }
    .page-section-nav.page-section-nav--one-row .page-section-nav-filters,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--one-row .page-section-nav-filters {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      flex: 1 1 auto;
      min-width: 0;
      grid-template-columns: none;
    }
    .page-section-nav.page-section-nav--one-row .page-section-nav-filters > button,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--one-row .page-section-nav-filters > button {
      flex: 1 1 0;
      flex-shrink: 1;
      width: auto;
      min-width: 0;
      max-width: none;
      padding: 0 6px;
      height: 30px;
      min-height: 30px;
      font-size: var(--ui-btn-font-size);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: center;
    }
    .page-section-nav.page-section-nav--one-row .page-section-nav-filters::after,
    .page-section-nav.page-section-nav--equal-pills.page-section-nav--one-row .page-section-nav-filters::after {
      content: none;
      display: none;
    }
    .page-section-nav.page-section-nav--one-row .page-section-nav-toggle {
      width: 12em;
      min-width: 0;
      max-width: 12em;
      height: 30px;
      padding: 0 8px;
      font-size: var(--ui-btn-font-size);
    }
    @media (max-width: 720px) {
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters:has(> button:nth-child(4n + 1):last-of-type)::after,
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters:has(> button:nth-child(4n + 2):last-of-type)::after,
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters:has(> button:nth-child(4n + 3):last-of-type)::after {
        grid-column: auto;
      }
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters:has(> button:nth-child(2n + 1):last-of-type)::after {
        content: '';
        display: block;
        grid-column: span 1 / -1;
      }
      .page-section-nav.page-section-nav--equal-pills:not(.page-section-nav--one-row) .page-section-nav-filters:has(> button:nth-child(2n):last-of-type)::after {
        content: none;
        display: none;
      }
    }
    /* Einbürgerungstest-Quiz */
    .eb-quiz-toolbar {
      display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
      margin: 0 0 14px;
    }
    .eb-quiz-toolbar label {
      display: flex; flex-direction: column; gap: 4px;
      font-family: var(--font-mono); font-size: var(--ui-font-size-sm); letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--color-text-muted);
    }
    .eb-quiz-toolbar select, .eb-quiz-toolbar button {
      font: inherit; font-size: 13px; padding: 7px 10px;
      border: 1px solid var(--color-border); border-radius: 4px;
      background: var(--bg-card); color: var(--color-text);
    }
    .eb-quiz-toolbar button {
      cursor: pointer; border-left: 3px solid var(--cyber-cyan);
      font-family: var(--font-mono); font-size: var(--ui-btn-font-size); letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--cyber-cyan);
    }
    .eb-quiz-toolbar button:hover { background: var(--cyber-cyan-dim); }
    .eb-quiz-nav button {
      font: inherit; font-size: 13px; padding: 7px 10px; cursor: pointer;
      border: 1px solid var(--color-border); border-radius: 4px;
      border-left: 3px solid var(--cyber-cyan);
      background: var(--bg-card); color: var(--cyber-cyan);
      font-family: var(--font-mono); font-size: var(--ui-btn-font-size); letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .eb-quiz-nav button:hover { background: var(--cyber-cyan-dim); }
    .eb-quiz-meta {
      font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 12px;
    }
    .eb-quiz-q {
      font-size: 15px; font-weight: 650; color: var(--color-text-strong);
      margin: 0 0 12px; line-height: 1.45;
    }
    .eb-quiz-options { display: grid; gap: 8px; margin: 0 0 14px; }
    .eb-quiz-opt {
      display: flex; gap: 10px; align-items: flex-start; text-align: left;
      width: 100%; padding: 10px 12px; cursor: pointer;
      border: 1px solid var(--color-border); border-radius: 4px;
      background: transparent; color: var(--color-text); font: inherit; font-size: 13.5px; line-height: 1.45;
      transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    .eb-quiz-opt:hover:not(:disabled) {
      border-color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
    }
    .eb-quiz-opt:active:not(:disabled) {
      transform: translateY(1px) scale(0.985);
      background: color-mix(in srgb, var(--cyber-cyan) 18%, transparent);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--cyber-cyan);
      transition-duration: 0.05s;
    }
    .eb-quiz-opt .eb-letter {
      flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--ui-font-size-sm);
      color: var(--cyber-cyan); margin-top: 2px;
    }
    .eb-quiz-opt.is-correct {
      border-color: var(--cyber-green); background: rgba(16,185,129,0.12);
      box-shadow: inset 3px 0 0 var(--cyber-green), 0 0 16px rgba(16, 185, 129, 0.28);
      animation: quiz-opt-ok 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .eb-quiz-opt.is-wrong {
      border-color: var(--cyber-pink); background: var(--cyber-pink-dim);
      box-shadow: inset 3px 0 0 var(--cyber-pink), 0 0 16px rgba(236, 72, 153, 0.28);
      animation: quiz-opt-bad 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }
    .eb-quiz-opt:disabled { cursor: default; opacity: 1; }
    .eb-quiz-feedback {
      font-size: 13.5px; margin: 0 0 12px; min-height: 0;
      padding: 0; border: none; border-radius: 8px; line-height: 1.45;
    }
    .eb-quiz-feedback:empty { display: none; padding: 0; margin: 0; }
    .eb-quiz-feedback.ok,
    .eb-quiz-feedback.bad {
      display: block;
      padding: 11px 13px;
      animation: quiz-fb-in 0.32s ease-out;
    }
    .eb-quiz-feedback.ok {
      color: var(--cyber-green);
      background: var(--cyber-green-dim);
      border: 1px solid rgba(16, 185, 129, 0.35);
    }
    .eb-quiz-feedback.bad {
      color: var(--cyber-pink);
      background: var(--cyber-pink-dim);
      border: 1px solid rgba(236, 72, 153, 0.3);
    }
    @keyframes quiz-fb-in {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes quiz-opt-ok {
      0% { transform: scale(0.97); }
      45% { transform: scale(1.035); }
      75% { transform: scale(0.995); }
      100% { transform: scale(1); }
    }
    @keyframes quiz-opt-bad {
      0%, 100% { transform: translateX(0); }
      18% { transform: translateX(-6px); }
      36% { transform: translateX(6px); }
      54% { transform: translateX(-4px); }
      72% { transform: translateX(4px); }
      90% { transform: translateX(-1px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .eb-quiz-feedback.ok,
      .eb-quiz-feedback.bad,
      .eb-quiz-opt.is-correct,
      .eb-quiz-opt.is-wrong { animation: none; }
    }
    .eb-quiz-nav { display: flex; flex-wrap: wrap; gap: 8px; }
    /* Lerncheck — Prüfungsmaske (soft light orange, inviting, scoped) */
    #mod-selbsttest {
      --st-accent: #e89a5a;
      --st-accent-bright: #f0b478;
      --st-accent-dim: rgba(232, 154, 90, 0.14);
      --st-accent-border: rgba(232, 154, 90, 0.34);
      --st-accent-soft: rgba(232, 154, 90, 0.09);
      --st-title-accent: var(--cyber-cyan);
      --st-title-accent-dim: var(--cyber-cyan-dim);
      --st-track: rgba(148, 163, 184, 0.22);
      --st-success-soft: rgba(16, 185, 129, 0.1);
      --st-success-border: rgba(16, 185, 129, 0.32);
    }
    :is([data-theme="light"], [data-theme="sepia"]) #mod-selbsttest {
      --st-accent: #c9783d;
      --st-accent-bright: #e09a55;
      --st-accent-dim: rgba(201, 120, 61, 0.11);
      --st-accent-border: rgba(201, 120, 61, 0.28);
      --st-accent-soft: rgba(201, 120, 61, 0.07);
      --st-track: rgba(100, 116, 139, 0.18);
      --st-success-soft: rgba(5, 150, 105, 0.08);
      --st-success-border: rgba(5, 150, 105, 0.28);
    }
    #mod-selbsttest .selbsttest-card {
      border-color: var(--st-accent-border) !important;
      border-radius: 0;
      overflow: hidden;
      background: var(--bg-card);
      box-shadow: none;
    }
    #mod-selbsttest .selbsttest-card .cyber-card-header {
      border-left: 3px solid var(--st-title-accent);
      color: var(--st-title-accent);
      background: linear-gradient(90deg, var(--st-title-accent-dim), transparent 72%);
      cursor: default;
    }
    #mod-selbsttest .selbsttest-card .cyber-card-header::after { display: none; }
    #mod-selbsttest .selbsttest-card .cyber-card-body {
      padding: 16px 18px 18px;
    }
    #mod-selbsttest #st-setup-card {
      display: flex;
      flex-direction: column;
    }
    #mod-selbsttest #st-setup-card > .cyber-card-header { display: none; }
    #mod-selbsttest #st-setup-card .cyber-card-body {
      padding: 0;
      display: grid;
      grid-template-columns: minmax(220px, 0.78fr) minmax(300px, 1.42fr);
      align-items: stretch;
      flex: 1 1 auto;
      background:
        linear-gradient(135deg, var(--st-accent-soft), transparent 42%),
        var(--bg-card);
    }
    #mod-selbsttest #st-setup-card .st-setup-card-title {
      margin: 0 0 2px;
      padding: 10px 12px;
      border-radius: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .st-setup-visual {
      position: relative;
      margin: 0;
      min-height: 100%;
      overflow: hidden;
      align-self: stretch;
      cursor: pointer;
      background:
        linear-gradient(160deg, var(--st-accent-dim), transparent 55%),
        var(--st-accent-soft);
      border-right: 1px solid var(--st-accent-border);
    }
    .st-setup-visual::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, 0.04));
    }
    :is([data-theme="light"], [data-theme="sepia"]) .st-setup-visual::after {
      background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.18));
    }
    .st-setup-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 28%;
      min-height: 360px;
    }
    .st-kicker {
      font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--st-title-accent); margin: 0 0 4px;
    }
    .st-setup-intro {
      display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
      margin: 0 0 4px; padding-bottom: 0;
      border-bottom: none;
    }
    .st-setup-intro .st-kicker { margin: 0; }
    .st-setup-lead {
      margin: 0; font-size: 13px; line-height: 1.4;
      color: var(--color-text-muted);
    }
    .st-result-lead {
      margin: 0 0 14px; font-size: 13.5px; line-height: 1.55;
      color: var(--color-text-muted);
    }
    .st-setup {
      display: grid; gap: 16px; width: 100%; max-width: none;
      padding: 16px 18px 18px;
      align-content: start;
    }
    .st-setup-options {
      display: grid; gap: 14px; width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--color-border);
      border-radius: 0;
      background: var(--surface-subtle, var(--st-accent-soft));
    }
    .st-setup-launch {
      display: grid; gap: 0;
      margin: 0; width: 100%;
    }
    .st-setup-launch .st-start-btn {
      position: relative;
      display: grid;
      grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
      align-items: center;
      column-gap: 16px;
      width: 100%;
      min-height: 88px;
      padding: 12px 14px;
      overflow: hidden;
      border: 1px solid var(--st-accent);
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.22), transparent 48%),
        linear-gradient(135deg, var(--st-accent-bright) 0%, var(--st-accent) 58%, #d4783a 100%);
      color: #fffaf3;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 4px 0 rgba(180, 100, 40, 0.22),
        0 10px 22px rgba(232, 154, 90, 0.2);
      font-weight: 800;
      letter-spacing: 0.06em;
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .st-setup-launch .st-start-dice {
      position: relative;
      z-index: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-evenly;
      gap: 10px;
      min-width: 0;
      pointer-events: none;
    }
    .st-setup-launch .st-start-dice-left { justify-self: stretch; }
    .st-setup-launch .st-start-dice-right { justify-self: stretch; }
    .st-setup-launch .st-start-die {
      --die-rot: 0deg;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      transform: rotate(var(--die-rot));
      transform-origin: center;
    }
    .st-setup-launch .st-start-die-face {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 1.5px solid #c9783d;
      background:
        linear-gradient(165deg, #fffdf8 0%, #fff6ea 48%, #f3e0c8 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(201, 120, 61, 0.12),
        2px 2px 0 #d4a06a,
        3px 5px 10px rgba(55, 30, 10, 0.22);
      color: #2c2118;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 17px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
    }
    .st-setup-launch .st-start-die-face::before {
      content: "";
      position: absolute;
      top: -3px;
      left: 18%;
      width: 52%;
      height: 7px;
      border-radius: 1px;
      background: rgba(232, 190, 120, 0.62);
      box-shadow: inset 0 0 0 1px rgba(201, 150, 70, 0.25);
      transform: rotate(-8deg);
    }
    .st-setup-launch .st-start-dice-left .st-start-die:nth-child(1) { --die-rot: -8deg; }
    .st-setup-launch .st-start-dice-left .st-start-die:nth-child(2) { --die-rot: 5deg; }
    .st-setup-launch .st-start-dice-left .st-start-die:nth-child(3) { --die-rot: -4deg; }
    .st-setup-launch .st-start-dice-right .st-start-die:nth-child(1) { --die-rot: 7deg; }
    .st-setup-launch .st-start-dice-right .st-start-die:nth-child(2) { --die-rot: -6deg; }
    .st-setup-launch .st-start-dice-right .st-start-die:nth-child(3) { --die-rot: 4deg; }
    .st-setup-launch .st-start-label {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0;
      padding: 10px 18px;
      min-width: 0;
      border-radius: 999px;
      background: rgba(92, 42, 12, 0.72);
      box-shadow:
        0 1px 0 rgba(255, 250, 243, 0.22) inset,
        0 4px 14px rgba(60, 25, 5, 0.28);
      text-shadow: 0 1px 2px rgba(40, 15, 0, 0.55);
      font-size: 1.05em;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    .st-setup-launch .st-start-label::after {
      content: "▸";
      font-size: 1.05em;
      line-height: 1;
      opacity: 0.95;
      transform: translateY(-0.5px);
    }
    .st-setup-launch .st-start-btn:hover {
      background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.16), transparent 48%),
        linear-gradient(135deg, var(--st-accent) 0%, #d4783a 100%);
      color: #fffaf3;
      filter: brightness(1.03);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 5px 0 rgba(180, 100, 40, 0.26),
        0 12px 24px rgba(232, 154, 90, 0.24);
    }
    .st-setup-launch .st-start-btn:focus-visible {
      outline: 2px solid var(--st-accent-bright);
      outline-offset: 3px;
    }
    .st-setup-launch .st-start-btn:active {
      transform: translateY(2px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(180, 100, 40, 0.2),
        0 6px 14px rgba(232, 154, 90, 0.16);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .st-setup-launch .st-start-btn {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 0 rgba(160, 90, 35, 0.16),
        0 10px 20px rgba(201, 120, 61, 0.18);
    }
    .st-motif {
      flex: 0 0 auto;
      margin: 0;
      width: 132px;
      max-width: 34vw;
    }
    .st-motif img {
      display: block; width: 100%; height: auto;
      border-radius: 0;
      border: 1px solid var(--st-accent-border);
      background: var(--st-accent-soft);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }
    .st-result-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 14px 18px; margin: 0 0 14px;
    }
    .st-result-head-text { flex: 1 1 auto; min-width: 0; }
    .st-result-head .st-result-lead { margin-bottom: 0; }
    .st-result-head .st-motif { width: 148px; max-width: 38vw; }
    .st-resume {
      display: grid; gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--st-accent-border);
      border-left: 3px solid var(--st-accent);
      border-radius: 0;
      background: var(--st-accent-soft);
    }
    .st-resume[hidden] { display: none !important; }
    .st-resume-note {
      margin: 0; font-size: 13.5px; line-height: 1.45;
      color: var(--color-text-muted);
    }
    .st-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .st-resume-actions .st-start-btn,
    .st-resume-actions .st-action-btn { width: auto; }
    .st-field { display: grid; gap: 8px; width: 100%; min-width: 0; }
    .st-field-pair {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: start;
      width: 100%;
    }
    .st-controls-row {
      display: grid;
      grid-template-columns: minmax(140px, 0.9fr) minmax(0, 0.95fr) minmax(150px, 1.2fr);
      gap: 10px 12px;
      align-items: stretch;
      width: 100%;
    }
    .st-control {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
      min-width: 0;
      min-height: 0;
    }
    .st-control-box,
    .st-count-box,
    .st-avail-box,
    .st-mode-box {
      display: grid;
      gap: 0;
      min-width: 0;
      min-height: 52px;
      height: 100%;
      padding: 10px 12px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: var(--bg-card);
      align-content: center;
    }
    .st-mode-box .st-chips {
      width: 100%;
      justify-content: stretch;
    }
    .st-avail {
      display: grid;
      gap: 4px;
      min-height: 34px;
      align-content: center;
    }
    .st-avail-line {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.4;
      color: var(--color-text-muted);
    }
    .st-avail-line.is-warn {
      color: var(--cyber-pink);
    }
    .st-field-label {
      font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--st-accent);
    }
    .st-controls-row .st-control:first-child .st-field-label {
      white-space: nowrap;
    }
    .st-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
    #mod-selbsttest #st-area-chips {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      align-items: stretch;
    }
    #mod-selbsttest #st-area-chips .menu-chip[data-st-area="alle"] {
      grid-column: 1 / -1;
    }
    #mod-selbsttest #st-mode-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: auto;
      max-width: 100%;
    }
    .st-chips .menu-chip {
      box-sizing: border-box;
      min-height: 30px;
      padding: 5px 10px;
      font-size: 9pt;
      font-weight: 800;
      line-height: 1.25;
      border-radius: 4px;
      min-width: 0;
      display: inline-flex; align-items: center; gap: 6px;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
      box-shadow: none;
    }
    #mod-selbsttest #st-area-chips .menu-chip,
    #mod-selbsttest #st-mode-chips .menu-chip {
      min-height: 34px;
      padding: 6px 10px;
      font-weight: 650;
    }
    #mod-selbsttest #st-area-chips .menu-chip {
      width: 100%;
      height: 100%;
      min-height: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 2px;
      flex-wrap: nowrap;
      padding: 7px 6px;
      line-height: 1.2;
      box-sizing: border-box;
    }
    #mod-selbsttest #st-area-chips .menu-chip[data-st-area="alle"] {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 40px;
    }
    #mod-selbsttest #st-area-chips .st-area-name {
      display: block;
      width: 100%;
      font-size: inherit;
      font-weight: inherit;
      line-height: 1.2;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    #mod-selbsttest #st-mode-chips .menu-chip {
      width: auto;
      min-width: 0;
      flex: 1 1 auto;
      justify-content: center;
      text-align: center;
      padding: 6px 12px;
      gap: 0;
    }
    #mod-selbsttest #st-area-chips .st-area-count {
      display: block;
      width: 100%;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--color-text-muted);
      white-space: nowrap;
      line-height: 1.2;
    }
    #mod-selbsttest #st-area-chips .menu-chip.is-active .st-area-count {
      color: var(--st-accent);
    }
    #mod-selbsttest .st-chips .menu-chip:hover {
      border-color: var(--st-accent); color: var(--st-accent);
      background: var(--bg-card);
    }
    #mod-selbsttest .st-chips .menu-chip.is-active {
      color: var(--st-accent);
      background: var(--bg-card);
      border-color: var(--st-accent);
      box-shadow: none;
    }
    .st-count-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; width: 100%; }
    .st-count-row input[type="number"] {
      box-sizing: border-box;
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      color: var(--color-text);
      width: 100%;
      max-width: 4.5ch;
      min-height: 0;
      padding: 2px 2px 4px;
      margin: 0 auto;
      border: none;
      border-radius: 0;
      border-bottom: 2px solid var(--color-border);
      background: transparent;
      transition: border-color 0.15s;
      -moz-appearance: textfield;
    }
    .st-count-row input[type="number"]::-webkit-outer-spin-button,
    .st-count-row input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    #mod-selbsttest .st-count-row input[type="number"]:focus {
      outline: none; border-bottom-color: var(--st-accent);
    }
    #mod-selbsttest .st-count-row input[type="number"].is-invalid {
      border-bottom-color: var(--cyber-pink);
    }
    .st-start-btn, .st-action-btn {
      font: inherit; padding: 12px 18px; min-height: 44px; cursor: pointer;
      border: 1px solid var(--color-border); border-radius: 8px;
      border-left: 3px solid var(--st-accent);
      background: var(--bg-card); color: var(--st-accent);
      font-family: var(--font-mono); font-size: var(--ui-btn-font-size); letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: background 0.15s, border-color 0.15s;
    }
    .st-start-btn {
      width: 100%; margin: 0; min-height: 48px;
      background: linear-gradient(180deg, var(--st-accent-bright), var(--st-accent));
      border-color: var(--st-accent);
      color: var(--bg-card);
      box-shadow: none;
      font-weight: 800;
    }
    .st-start-btn:hover, .st-action-btn:hover {
      background: var(--st-accent-dim); border-color: var(--st-accent);
    }
    .st-start-btn:hover {
      background: var(--st-accent);
      color: var(--bg-card);
    }
    .st-action-btn.is-primary {
      background: linear-gradient(180deg, var(--st-accent-dim), var(--st-accent-soft));
      border-color: var(--st-accent);
    }
    /* Progress */
    .st-progress {
      display: grid; gap: 9px; margin: 0 0 18px;
      padding: 12px 14px;
      border-radius: 8px;
      background: var(--st-accent-soft);
      border: 1px solid var(--st-accent-border);
    }
    .st-progress-top {
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    }
    .st-progress-label {
      font-family: var(--font-mono); font-size: var(--ui-font-size-sm); letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--st-title-accent); margin: 0; font-weight: 700;
    }
    .st-progress-mode {
      font-size: 12px; color: var(--color-text-muted); margin: 0;
    }
    .st-progress-track {
      height: 8px; border-radius: 999px; background: var(--st-track);
      overflow: hidden;
    }
    .st-progress-fill {
      height: 100%; width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--st-accent), var(--st-accent-bright));
      transition: width 0.28s ease;
    }
    #mod-selbsttest .eb-quiz-meta { display: none; }
    #mod-selbsttest .eb-quiz-q {
      font-size: 17px; font-weight: 700; margin: 0 0 16px; line-height: 1.45;
      color: var(--color-text-strong);
    }
    #mod-selbsttest .eb-quiz-options { gap: 10px; margin: 0 0 16px; }
    #mod-selbsttest .eb-quiz-opt {
      padding: 13px 15px; border-radius: 8px;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    #mod-selbsttest .eb-quiz-opt:hover:not(:disabled) {
      border-color: var(--st-accent); background: var(--st-accent-dim);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(232, 154, 90, 0.2);
    }
    #mod-selbsttest .eb-quiz-opt:active:not(:disabled) {
      transform: translateY(1px) scale(0.985);
      background: color-mix(in srgb, var(--st-accent) 22%, transparent);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--st-accent);
      transition-duration: 0.05s;
    }
    #mod-selbsttest .eb-quiz-opt .eb-letter {
      color: var(--st-accent);
      width: 1.55em; height: 1.55em;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--st-accent-border);
      border-radius: 6px;
      background: var(--st-accent-soft);
      margin-top: 0;
      font-weight: 700;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .st-quiz-opt.is-selected {
      border-color: var(--st-accent); background: var(--st-accent-dim);
      box-shadow: inset 3px 0 0 var(--st-accent);
    }
    .st-quiz-opt.is-selected .eb-letter {
      background: var(--st-accent); color: #fff; border-color: var(--st-accent);
    }
    #mod-selbsttest .eb-quiz-opt.is-correct {
      border-color: var(--cyber-green); background: var(--cyber-green-dim);
      box-shadow: inset 3px 0 0 var(--cyber-green);
    }
    #mod-selbsttest .eb-quiz-opt.is-correct .eb-letter {
      color: var(--cyber-green); border-color: var(--cyber-green);
      background: var(--cyber-green-dim);
    }
    #mod-selbsttest .eb-quiz-opt.is-wrong {
      border-color: var(--cyber-pink); background: var(--cyber-pink-dim);
      box-shadow: inset 3px 0 0 var(--cyber-pink);
    }
    #mod-selbsttest .eb-quiz-opt.is-wrong .eb-letter {
      color: var(--cyber-pink); border-color: var(--cyber-pink);
      background: var(--cyber-pink-dim);
    }
    #mod-selbsttest .eb-quiz-opt:disabled:not(.is-correct):not(.is-wrong) {
      opacity: 0.72;
    }
    #mod-selbsttest .eb-quiz-feedback { margin: 0 0 14px; }
    #mod-selbsttest .eb-quiz-nav { gap: 10px; margin-top: 6px; }
    .st-hint {
      font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 14px;
      padding: 9px 12px; border-radius: 8px;
      background: var(--st-accent-soft); border-left: 3px solid var(--st-accent);
    }
    .st-results { display: grid; gap: 16px; }
    .st-score-card {
      display: grid; gap: 10px;
      padding: 18px 20px;
      border: 1px solid var(--st-success-border);
      border-left: 3px solid var(--cyber-green);
      border-radius: 0;
      background:
        linear-gradient(145deg, var(--st-success-soft), var(--st-accent-soft) 60%, transparent);
    }
    .st-score-card.is-strong {
      border-color: var(--st-success-border);
      box-shadow: none;
    }
    .st-score-eyebrow {
      font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--cyber-green); margin: 0;
    }
    .st-score {
      font-size: 24px; font-weight: 700; color: var(--color-text-strong); margin: 0;
      letter-spacing: -0.01em;
    }
    .st-score-msg {
      margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted);
    }
    .st-score-pct {
      font-family: var(--font-mono); font-size: 12pt; letter-spacing: 0.03em;
      color: var(--st-title-accent); margin: 0; font-weight: 700;
    }
    .st-score-bar {
      height: 10px; border-radius: 999px; background: var(--st-track); overflow: hidden;
      margin-top: 2px;
    }
    .st-score-bar > span {
      display: block; height: 100%; border-radius: inherit;
      background: linear-gradient(90deg, var(--st-accent), var(--st-accent-bright));
    }
    .st-breakdown {
      display: grid; gap: 8px; margin: 0; padding: 0; list-style: none;
      font-size: 13.5px;
    }
    .st-breakdown li {
      display: flex; justify-content: space-between; gap: 12px; align-items: center;
      padding: 11px 13px; border: 1px solid var(--st-accent-border); border-radius: 8px;
      background: var(--st-accent-soft);
    }
    .st-breakdown li span:last-child {
      font-family: var(--font-mono); font-size: var(--ui-font-size-sm); color: var(--st-accent);
      white-space: nowrap; font-weight: 700;
    }
    .st-learn-path {
      margin: 0 0 12px;
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--st-accent, var(--cyber-cyan)) 35%, var(--color-border));
      border-radius: 8px;
      background: linear-gradient(135deg, var(--st-accent-soft, var(--cyber-cyan-dim)), transparent 70%);
      display: grid;
      gap: 8px;
      justify-items: start;
    }
    .st-learn-path[hidden] { display: none !important; }
    .st-learn-path-kicker {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--st-accent, var(--cyber-cyan));
      font-weight: 700;
    }
    .st-learn-path-text {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--color-text);
    }
    #mod-selbsttest #st-area-chips .st-area-sep {
      grid-column: 1 / -1;
      margin: 10px 0 2px;
      padding: 0;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--st-accent);
      line-height: 1.3;
    }
    #mod-selbsttest #st-area-chips .menu-chip.st-area-eb {
      border-style: dashed;
      grid-column: span 2;
    }
    .st-path-cta {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .st-wrong-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .st-wrong-item {
      padding: 14px 15px; border: 1px solid var(--color-border); border-radius: 8px;
      border-left: 3px solid var(--cyber-pink);
      background: var(--surface-subtle);
    }
    .st-wrong-item .st-wrong-q { font-weight: 650; margin: 0 0 8px; }
    .st-wrong-item .st-wrong-a { margin: 0; font-size: 13px; color: var(--cyber-green); }
    .st-wrong-item .st-wrong-yours { margin: 4px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
    .st-wrong-item .st-wrong-explain { margin: 6px 0 0; font-size: 12.5px; color: var(--color-text); line-height: 1.45; border-left: 2px solid var(--accent, #3b82f6); padding-left: 8px; background: rgba(59, 130, 246, 0.05); border-radius: 0 4px 4px 0; padding: 4px 8px; }
    .st-listen-box, .st-extra-box {
      margin: 0 0 12px; padding: 12px 14px; border-radius: 8px;
      border: 1px solid var(--st-accent-border); background: var(--st-accent-soft);
    }
    .st-listen-label, .st-extra-box .st-field-label {
      margin: 0 0 8px; font-family: var(--font-mono); font-size: 7.5pt;
      letter-spacing: 0.04em; text-transform: uppercase; color: var(--st-title-accent); font-weight: 700;
    }
    .st-listen-note { margin: 8px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
    .st-listen-box .st-action-btn { margin-right: 6px; }
    .st-extra-box ul { margin: 6px 0 0; padding-left: 1.2em; font-size: 13.5px; }
    /* Filter chips in pin-head: fill left, push Anzahl + ↑ to the right edge */
    .verb-table-pin-head > .st-chips {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      margin: 0;
      padding: 0 0 0 4px;
      align-items: center;
      gap: 4px;
    }
    .verb-table-pin-head > .st-chips .menu-chip {
      box-sizing: border-box;
      min-width: 0;
      min-height: var(--alpha-chip-h, 22px);
      height: var(--alpha-chip-h, 22px);
      max-height: var(--alpha-chip-h, 22px);
      padding: 0 8px;
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      line-height: 1;
      box-shadow: none;
      white-space: nowrap;
    }
    .st-area-tag {
      display: inline-block; font-family: var(--font-mono); font-size: 7.5pt;
      letter-spacing: 0.04em; text-transform: uppercase; color: var(--st-accent);
      margin-bottom: 10px;
      padding: 4px 9px; border-radius: 999px;
      background: var(--st-accent-dim); border: 1px solid var(--st-accent-border);
    }
    .st-perfect {
      margin: 0; padding: 12px 14px; border-radius: 8px;
      background: var(--st-success-soft);
      border: 1px solid var(--st-success-border);
      color: var(--color-text-strong); font-size: 13.5px; line-height: 1.5;
    }
    @media (max-width: 900px) {
      #mod-selbsttest #st-setup-card .cyber-card-body {
        grid-template-columns: 1fr;
      }
      .st-setup-visual {
        border-right: none;
        border-bottom: 1px solid var(--st-accent-border);
        max-height: 240px;
      }
      .st-setup-visual::after {
        background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.06));
      }
      :is([data-theme="light"], [data-theme="sepia"]) .st-setup-visual::after {
        background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.22));
      }
      .st-setup-visual img {
        min-height: 200px;
        max-height: 240px;
        object-position: 50% 22%;
      }
    }
    @media (max-width: 720px) {
      .st-field-pair { grid-template-columns: 1fr; gap: 14px; }
      .st-controls-row { grid-template-columns: 1fr; }
    }
    /* Tablet / Touch: größere Trefferflächen, keine Klick-Blocker durch Overlays */
    @media (max-width: 1100px) {
      .menu-chip,
      .alpha-jump-btn:not(.is-empty),
      .cyber-btn,
      .chapter-nav-pill,
      .accent-swatch,
      .st-action-btn,
      .st-start-btn,
      .page-section-nav button,
      .page-section-nav a,
      .home-toc-btn,
      .sub-chap-item {
        touch-action: manipulation;
        -webkit-tap-highlight-color: color-mix(in srgb, var(--cyber-cyan) 22%, transparent);
      }
      .menu-chip,
      .chapter-nav-pill,
      .cyber-btn,
      .home-toc-btn,
      .sub-chap-item {
        min-height: 40px;
      }
      .alpha-jump-btn:not(.is-empty) {
        min-width: 36px;
        min-height: 36px;
      }
      .verb-table-pin-head,
      .page-section-nav,
      .module-section > .chapter-nav[data-chapter-chrome="top"],
      .nav-console {
        isolation: isolate;
      }
      #mod-selbsttest #st-area-chips {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }
      #mod-verlauf .cards-grid {
        grid-template-columns: 1fr;
      }
      .herkunft-toolbar-row {
        flex-wrap: wrap;
        row-gap: 8px;
      }
    }
    @media (max-width: 900px) {
      #mod-selbsttest #st-area-chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .chapter-nav.is-grouped .chapter-nav-row {
        grid-template-columns: var(--chapter-nav-label-width) minmax(0, 1fr);
      }
    }
    @media (max-width: 640px) {
      #mod-selbsttest #st-area-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      #mod-selbsttest .selbsttest-card .cyber-card-body { padding: 14px; }
      #mod-selbsttest #st-setup-card .cyber-card-body { padding: 0; }
      .st-setup { padding: 14px; }
      .st-setup-visual { max-height: 180px; }
      .st-setup-visual img { min-height: 156px; max-height: 180px; }
      .st-start-btn, .st-action-btn { width: 100%; }
      .st-setup-launch .st-start-btn {
        min-height: 76px;
        grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
        column-gap: 10px;
        padding: 10px 8px;
      }
      .st-setup-launch .st-start-dice { gap: 6px; }
      .st-setup-launch .st-start-die { width: 28px; height: 28px; }
      .st-setup-launch .st-start-die-face { font-size: 14px; }
      .st-setup-launch .st-start-label { padding: 9px 12px; font-size: 0.95em; }
      #mod-selbsttest .eb-quiz-nav { flex-direction: column; }
      .st-progress-top { flex-direction: column; gap: 4px; }
      .st-motif { width: 108px; }
      .st-result-head .st-motif { width: 120px; }
    }

    /* Wegweiser (auf-ein-wort) — gleiche Portal-Karte + Humor links wie Feedback */
    #mod-auf-ein-wort {
      --aw-accent: var(--cyber-cyan);
      --aw-accent-dim: var(--cyber-cyan-dim);
      --aw-accent-border: color-mix(in srgb, var(--cyber-cyan) 34%, transparent);
      --aw-accent-soft: color-mix(in srgb, var(--cyber-cyan) 9%, transparent);
    }
    #mod-auf-ein-wort .cards-grid { padding-top: 10px; }
    #mod-auf-ein-wort .aw-card {
      border-color: var(--aw-accent-border) !important;
      border-radius: 0;
      background: var(--bg-card);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      box-shadow: none;
    }
    #mod-auf-ein-wort .aw-card > .cyber-card-header { display: none; }
    #mod-auf-ein-wort .aw-card .cyber-card-body {
      padding: 0;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      align-items: stretch;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      background:
        linear-gradient(135deg, var(--aw-accent-soft), transparent 42%),
        var(--bg-card);
    }
    #mod-auf-ein-wort #aw-card-nav .cyber-card-body,
    #mod-auf-ein-wort #aw-card-visuell .cyber-card-body {
      display: block !important;
      grid-template-columns: 1fr !important;
      padding: 16px 20px !important;
    }
    /* Überblick + Wegweiser 06: keep page-level Allgemein-Kasten
       (.info-box / .aw-card like Lernwerkzeuge); strip only nested
       .overview-menu-card chrome (Rahmen-im-Rahmen). Cyan *-map-col
       pillar borders stay; organigram wrapper chrome stripped in
       shared *-map rules below. *-map-root title node stays. */
    [id$="-ueberblick"] .overview-menu-card,
    #mod-rechtschreibung-system .overview-menu-card,
    #mod-auf-ein-wort #aw-card-uebersichten .overview-menu-card,
    #mod-auf-ein-wort #auf-ein-wort-view-uebersichten .overview-menu-card {
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      margin-left: 0;
      margin-right: 0;
    }
    #mod-auf-ein-wort #aw-card-nav .aw-humor-visual,
    #mod-auf-ein-wort #aw-card-visuell .aw-humor-visual {
      display: none !important;
    }
    
    .aw-humor-visual {
      position: relative;
      margin: 0;
      min-height: 100%;
      overflow: hidden;
      align-self: stretch;
      cursor: pointer;
      background:
        linear-gradient(160deg, var(--aw-accent-dim), transparent 55%),
        var(--aw-accent-soft);
      border-right: 1px solid var(--aw-accent-border);
    }
    .aw-humor-visual::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, 0.04));
    }
    :is([data-theme="light"], [data-theme="sepia"]) .aw-humor-visual::after {
      background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.18));
    }
    .aw-humor-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 28%;
      min-height: 360px;
    }
    .aw-main {
      display: grid;
      gap: 16px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 16px 20px 20px;
      align-content: start;
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    .aw-kicker {
      font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--aw-accent); margin: 0 0 4px;
      overflow-wrap: break-word; word-wrap: break-word;
    }
    
    
    .aw-section {
      margin: 0;
      padding: 12px 0 0;
      border-top: 1px solid var(--color-border);
      min-width: 0;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .aw-section:first-of-type { border-top: none; padding-top: 0; }
    .aw-section-title {
      margin: 0 0 8px;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--aw-accent);
      font-weight: 700;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    .aw-section .geschichte-prose { margin: 0 0 8px; font-size: 14px; overflow-wrap: break-word; word-wrap: break-word; }
    .aw-section .geschichte-prose:last-child { margin-bottom: 0; }
    
    
    
    
    /* Navigation & Kartentypen — drei klare Panels */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Wegweiser Tabelle - Responsive und kein nowrap Abschneiden */
    #mod-auf-ein-wort .table-h-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-top: 12px;
      display: block;
    }
    #mod-auf-ein-wort .table-h-scroll > .cheat-table {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      table-layout: auto;
    }
    #mod-auf-ein-wort .table-h-scroll > .cheat-table th,
    #mod-auf-ein-wort .table-h-scroll > .cheat-table td {
      white-space: normal !important;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    
    
    
    
    @media (max-width: 1100px) {
      #mod-auf-ein-wort .aw-card .cyber-card-body {
        grid-template-columns: 1fr;
      }
      .aw-humor-visual {
        border-right: none;
        border-bottom: 1px solid var(--aw-accent-border);
        max-height: 240px;
      }
      .aw-humor-visual::after {
        background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.06));
      }
      :is([data-theme="light"], [data-theme="sepia"]) .aw-humor-visual::after {
        background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.22));
      }
      .aw-humor-visual img {
        min-height: 200px;
        max-height: 240px;
        object-position: 50% 22%;
      }
    }
    
    @media (max-width: 640px) {
      .aw-main { padding: 14px; }
      .aw-humor-visual { max-height: 180px; }
      .aw-humor-visual img { min-height: 156px; max-height: 180px; }
      
      
    }

    /* Verlauf-Modul — gleiche Portal-Karte + Humor-Panel wie Feedback; Akzent folgt data-accent */
:is(#mod-verlauf, #mod-favoriten, #mod-gelernt) {
      --vh-accent: var(--cyber-cyan);
      --vh-accent-bright: var(--cyber-cyan);
      --vh-accent-dim: var(--cyber-cyan-dim);
      --vh-accent-border: color-mix(in srgb, var(--cyber-cyan) 34%, transparent);
      --vh-accent-soft: color-mix(in srgb, var(--cyber-cyan) 9%, transparent);
    }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .cards-grid {
      padding-top: 10px;
    }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card {
      border-color: var(--vh-accent-border) !important;
      border-radius: 0;
      overflow: hidden;
      background: var(--bg-card);
      width: 100%;
      box-shadow: none;
    }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card .cyber-card-header {
      border-left: 3px solid var(--vh-accent);
      color: var(--vh-accent);
      background: linear-gradient(90deg, var(--vh-accent-dim), transparent 72%);
      cursor: default;
    }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card .cyber-card-header::after { display: none; }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card > .cyber-card-header { display: none; }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card .cyber-card-body {
      padding: 0;
      display: grid;
      grid-template-columns: minmax(220px, 0.78fr) minmax(300px, 1.42fr);
      align-items: stretch;
      background:
        linear-gradient(135deg, var(--vh-accent-soft), transparent 42%),
        var(--bg-card);
    }
    :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .vh-card-title {
      margin: 0 0 2px;
      padding: 10px 12px;
      border-radius: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .vh-humor-visual {
      position: relative;
      margin: 0;
      min-height: 100%;
      overflow: hidden;
      align-self: stretch;
      cursor: pointer;
      background:
        linear-gradient(160deg, var(--vh-accent-dim), transparent 55%),
        var(--vh-accent-soft);
      border-right: 1px solid var(--vh-accent-border);
    }
    .vh-humor-visual::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, 0.04));
    }
    :is([data-theme="light"], [data-theme="sepia"]) .vh-humor-visual::after {
      background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.18));
    }
    .vh-humor-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 28%;
      min-height: 360px;
    }
    .vh-main {
      display: grid; gap: 16px; width: 100%; max-width: none;
      padding: 16px 18px 18px;
      align-content: start;
    }
    .vh-kicker {
      font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--vh-accent); margin: 0 0 4px;
    }
    .vh-intro {
      display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
      margin: 0; padding-bottom: 0;
    }
    .vh-intro .vh-kicker { margin: 0; }
    .vh-lead {
      margin: 0; font-size: 13px; line-height: 1.4;
      color: var(--color-text-muted);
    }
    .vh-lead-soft {
      flex: 1 1 100%;
      font-size: 13px; line-height: 1.45;
      color: var(--color-text-muted);
      opacity: 0.92;
    }
    .vh-group {
      display: grid;
      gap: 10px;
      width: 100%;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
    }
    .vh-main > .vh-group + .vh-group {
      margin-top: 4px;
      padding-top: 16px;
      border-top: 1px solid var(--vh-accent-border);
    }

    /* —— Meine gelernten Themen: einheitliches Layout —— */
    #mod-gelernt .gelernt-main {
      gap: 12px;
      padding: 14px 16px 16px;
    }
    #mod-gelernt .gelernt-main > .vh-kicker {
      margin: 0;
    }
    #mod-gelernt .gelernt-lead {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.4;
      color: var(--color-text-muted);
    }
    #mod-gelernt .gelernt-panel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
      margin-top: 0;
    }
    #mod-gelernt .gelernt-stats,
    #mod-gelernt .gelernt-columns {
      display: contents;
    }
    #mod-gelernt .gelernt-stat,
    #mod-gelernt .gelernt-column {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      min-height: 0;
      padding: 12px 14px;
      border: 1px solid var(--vh-accent-border);
      border-left: 3px solid var(--vh-accent);
      border-radius: 6px;
      background: linear-gradient(90deg, var(--vh-accent-dim), transparent 72%);
    }
    #mod-gelernt .gelernt-stat {
      display: grid;
    }
    #mod-gelernt .gelernt-stat-value {
      font-family: var(--font-mono);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--vh-accent);
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
    }
    #mod-gelernt .gelernt-stat-label {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    #mod-gelernt .gelernt-stat-bar {
      grid-column: 1 / -1;
      height: 5px;
      margin-top: 4px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--vh-accent) 12%, var(--color-border));
      overflow: hidden;
    }
    #mod-gelernt .gelernt-stat-bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--vh-accent), color-mix(in srgb, var(--vh-accent) 55%, var(--cyber-green)));
      transition: width 0.35s ease;
    }
    #mod-gelernt .gelernt-column {
      min-height: 0;
    }
    #mod-gelernt .gelernt-column-title {
      margin: 0 0 8px;
      padding-bottom: 0;
      border-bottom: none;
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      flex-shrink: 0;
    }
    #mod-gelernt .gelernt-jump-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      flex: 1 1 auto;
      min-height: 118px;
      max-height: min(200px, 28vh);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      border: none;
      border-radius: 0;
      background: transparent;
    }
    #mod-gelernt .gelernt-empty-msg {
      margin: 0;
      padding: 2px 0 0;
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--color-text-muted);
    }
    #mod-gelernt .gelernt-jump-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      padding: 7px 10px 7px 12px;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
      background: transparent;
      color: var(--color-text);
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: background 0.15s ease, color 0.15s ease;
      box-shadow: none;
    }
    #mod-gelernt .gelernt-jump-list li:last-child .gelernt-jump-chip {
      border-bottom: none;
    }
    #mod-gelernt .gelernt-jump-chip:hover,
    #mod-gelernt .gelernt-jump-chip:focus-visible {
      background: var(--vh-accent-soft);
      color: var(--color-text);
      outline: none;
    }
    #mod-gelernt .gelernt-jump-chip-body {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1 1 auto;
    }
    #mod-gelernt .gelernt-jump-chip-code {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--vh-accent);
    }
    #mod-gelernt .gelernt-jump-chip-title {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--color-text-strong);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #mod-gelernt .gelernt-jump-chip-sub {
      font-size: 10px;
      line-height: 1.3;
      color: var(--color-text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #mod-gelernt .gelernt-jump-chip-action {
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 11pt;
      font-weight: 700;
      color: var(--color-text-muted);
      opacity: 0.55;
      line-height: 1;
    }
    #mod-gelernt .gelernt-jump-chip:hover .gelernt-jump-chip-action,
    #mod-gelernt .gelernt-jump-chip:focus-visible .gelernt-jump-chip-action {
      color: var(--vh-accent);
      opacity: 1;
    }
    #mod-gelernt .gelernt-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      margin-top: 0;
      padding-top: 14px;
      border-top: none;
    }
    #mod-gelernt .gelernt-actions:has(#gelernt-go-continue[hidden]) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #mod-gelernt .gelernt-actions .vh-clear-btn {
      width: 100%;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      text-transform: none;
      font-size: 9.5pt;
      letter-spacing: 0.02em;
      line-height: 1.25;
      padding: 10px 10px;
      white-space: nowrap;
    }
    #mod-gelernt .gelernt-actions .vh-clear-btn[hidden] {
      display: none !important;
    }

    /* —— Meine Merkliste: Panels wie Lernfortschritt —— */
    #mod-favoriten .vh-main > .vh-group + .vh-group {
      margin-top: 14px;
      padding-top: 0;
      border-top: none;
    }
    #mod-favoriten .vh-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      min-height: 0;
      padding: 12px 14px;
      border: 1px solid var(--vh-accent-border);
      border-left: 3px solid var(--vh-accent);
      border-radius: 6px;
      background: linear-gradient(90deg, var(--vh-accent-dim), transparent 72%);
    }
    #mod-favoriten .verlauf-title {
      margin: 0 0 8px;
      color: var(--color-text-muted);
    }
    #mod-favoriten .verlauf-list {
      gap: 0;
      flex: 1 1 auto;
      min-height: 118px;
      max-height: min(200px, 28vh);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    #mod-favoriten .verlauf-list button {
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      padding: 7px 10px 7px 12px;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
      background: transparent;
      color: var(--color-text);
      font-size: inherit;
    }
    #mod-favoriten .verlauf-list li:last-child button {
      border-bottom: none;
    }
    #mod-favoriten .verlauf-list button:hover,
    #mod-favoriten .verlauf-list button:focus-visible {
      border-color: transparent;
      border-bottom-color: color-mix(in srgb, var(--color-border) 75%, transparent);
      color: var(--color-text);
      background: var(--vh-accent-soft);
      outline: none;
    }
    #mod-favoriten .verlauf-list li:last-child button:hover,
    #mod-favoriten .verlauf-list li:last-child button:focus-visible {
      border-bottom-color: transparent;
    }
    #mod-favoriten .verlauf-list .verlauf-hub {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--vh-accent);
    }
    #mod-favoriten .verlauf-list button > span:last-child {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--color-text-strong);
    }
    #mod-favoriten .verlauf-list .portal-empty-state {
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 2px 0 0;
      text-align: left;
    }
    #mod-favoriten .verlauf-list .portal-empty-icon {
      font-size: 1.35rem;
      margin-bottom: 6px;
      color: var(--vh-accent);
    }
    #mod-favoriten .verlauf-list .portal-empty-title {
      font-size: 0.92rem;
    }
    #mod-favoriten .verlauf-list .portal-empty-lead {
      margin-bottom: 10px;
      max-width: none;
      text-align: left;
    }
    #mod-favoriten .verlauf-list .portal-empty-actions {
      justify-content: flex-start;
    }
    #mod-favoriten .verlauf-list .portal-empty-btn.is-primary {
      border-color: var(--vh-accent);
      color: var(--vh-accent);
      background: color-mix(in srgb, var(--vh-accent) 12%, transparent);
    }
    #mod-favoriten .verlauf-list .portal-empty-btn.is-primary:hover,
    #mod-favoriten .verlauf-list .portal-empty-btn.is-primary:focus-visible {
      background: var(--vh-accent);
      color: #0b1220;
      outline: none;
    }
    #mod-favoriten .vh-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      border-top: none;
      padding-top: 14px;
    }
    #mod-favoriten .vh-actions .vh-clear-btn {
      width: 100%;
      min-width: 0;
      text-transform: none;
      font-size: 9.5pt;
      letter-spacing: 0.02em;
      line-height: 1.25;
      padding: 10px 10px;
      white-space: nowrap;
    }
    #mod-verlauf .vh-actions .vh-clear-btn {
      text-transform: none;
      font-size: 9.5pt;
      letter-spacing: 0.02em;
      line-height: 1.25;
      padding: 10px 14px;
    }
    .vh-clear-btn.vh-go-lernprozess {
      background: var(--vh-accent);
      border-color: var(--vh-accent);
      color: #0b1220;
      box-shadow: 0 0 12px color-mix(in srgb, var(--vh-accent) 35%, transparent);
    }
    .vh-clear-btn.vh-go-lernprozess:hover,
    .vh-clear-btn.vh-go-lernprozess:focus-visible {
      background: color-mix(in srgb, var(--vh-accent) 88%, white);
      border-color: color-mix(in srgb, var(--vh-accent) 88%, white);
      color: #0b1220;
      outline: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .vh-clear-btn.vh-go-lernprozess {
      color: #fff;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .vh-clear-btn.vh-go-lernprozess:hover,
    :is([data-theme="light"], [data-theme="sepia"]) .vh-clear-btn.vh-go-lernprozess:focus-visible {
      color: #fff;
    }

    @media (max-width: 820px) {
      #mod-gelernt .gelernt-panel-grid {
        grid-template-columns: 1fr;
      }
      #mod-gelernt .gelernt-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #mod-gelernt .gelernt-actions:has(#gelernt-go-continue[hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #mod-gelernt .gelernt-jump-list {
        max-height: min(180px, 26vh);
      }
    }

    .gelernt-progress-rows {
      display: grid;
      gap: 10px;
    }
    .gelernt-progress-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-size: 13px;
    }
    .gelernt-progress-label {
      color: var(--color-text);
      font-weight: 600;
    }
    .gelernt-progress-value {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--vh-accent, var(--cyber-cyan));
      white-space: nowrap;
    }
    .gelernt-progress-bar {
      height: 6px;
      background: color-mix(in srgb, var(--vh-accent, var(--cyber-cyan)) 14%, var(--color-border));
      border-radius: 999px;
      overflow: hidden;
    }
    .gelernt-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--vh-accent, var(--cyber-cyan)), color-mix(in srgb, var(--vh-accent, var(--cyber-cyan)) 55%, #10b981));
      border-radius: inherit;
      transition: width 0.35s ease;
    }
    .vh-note {
      margin: 0; padding: 10px 12px; border-radius: 0;
      border: 1px solid var(--vh-accent-border);
      background: var(--vh-accent-soft);
      border-left: 3px solid var(--vh-accent);
      font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted);
    }
    .vh-note strong { color: var(--vh-accent); }
    .vh-actions {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
      margin-top: 2px;
      padding-top: 14px;
      border-top: 1px solid var(--color-border);
    }
    .vh-clear-btn {
      font: inherit; padding: 10px 18px; min-height: 40px; cursor: pointer;
      border: 1px solid var(--vh-accent-border); border-radius: 0;
      background: transparent;
      color: var(--vh-accent);
      font-family: var(--font-mono); font-size: var(--ui-btn-font-size); letter-spacing: 0.05em;
      text-transform: uppercase; font-weight: 700;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .vh-clear-btn:hover {
      background: var(--vh-accent-dim); border-color: var(--vh-accent); color: var(--vh-accent);
    }
    .vh-clear-btn[hidden] {
      display: none !important;
    }
    @media (max-width: 900px) {
      :is(#mod-verlauf, #mod-favoriten, #mod-gelernt) .verlauf-card .cyber-card-body {
        grid-template-columns: 1fr;
      }
      .vh-humor-visual {
        border-right: none;
        border-bottom: 1px solid var(--vh-accent-border);
        max-height: 240px;
      }
      .vh-humor-visual::after {
        background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.06));
      }
      :is([data-theme="light"], [data-theme="sepia"]) .vh-humor-visual::after {
        background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.22));
      }
      .vh-humor-visual img {
        min-height: 200px;
        max-height: 240px;
        object-position: 50% 22%;
      }
    }
    @media (max-width: 640px) {
      .vh-main { padding: 14px; }
      .vh-humor-visual { max-height: 180px; }
      .vh-humor-visual img { min-height: 156px; max-height: 180px; }
      .vh-clear-btn { width: 100%; }
    }
    /* Phonetik: Buchstabier / IPA / Mund */
    .ipa-grid, .buchstabier-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
      margin: 10px 0;
    }
    .ipa-cell, .buchstabier-cell {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: rgba(255,255,255,0.02);
      font-size: 13px;
    }
    .ipa-cell .ipa-sym, .buchstabier-cell .buchst-letter {
      font-family: var(--font-mono); font-weight: 700; font-size: 15px;
      color: var(--cyber-cyan); min-width: 2.2em;
    }
    .ipa-cell .ipa-ex, .buchstabier-cell .buchst-word { flex: 1; min-width: 0; }
    .mund-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
      gap: 16px 22px;
      align-items: start;
    }
    @media (max-width: 768px) {
      .mund-layout { grid-template-columns: 1fr; }
    }
    .mund-figure { margin: 0; }
    .mund-img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: #f7f5f0;
    }
    .mund-caption {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--color-text-muted);
      font-family: var(--font-mono);
    }
    .mund-side { display: flex; flex-direction: column; gap: 12px; }
    .mund-legend { display: grid; gap: 6px; }
    .mund-leg-btn {
      display: flex; align-items: center; gap: 10px;
      width: 100%; text-align: left; cursor: pointer;
      padding: 8px 10px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: transparent;
      color: var(--color-text);
      font: inherit; font-size: 13px;
    }
    .mund-leg-btn:hover { border-color: var(--cyber-cyan); background: var(--cyber-cyan-dim); }
    .mund-leg-btn.is-active {
      border-color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      box-shadow: inset 3px 0 0 var(--cyber-cyan);
    }
    .mund-leg-btn .mund-nr {
      flex: 0 0 auto;
      width: 1.6em; height: 1.6em;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--cyber-cyan);
      border: 1px solid var(--cyber-cyan);
      background: var(--bg-card);
    }
    .mund-detail {
      font-size: 13.5px; line-height: 1.55;
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--cyber-cyan);
      border-radius: 4px;
      padding: 12px 14px;
      background: var(--cyber-cyan-dim);
      min-height: 5.5em;
    }
    .mund-detail strong {
      display: block; font-family: var(--font-mono); font-size: var(--ui-font-size-sm);
      letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--cyber-cyan); margin-bottom: 6px;
    }
    .original-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 10px 0;
    }
    @media (max-width: 640px) {
      .original-pair { grid-template-columns: 1fr; }
    }
    .original-box {
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
    }
    .original-box .label {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      color: var(--cyber-cyan);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }
    .search-input-wrapper { margin-bottom: 8px; }
    .search-input { width: 100%; padding: 10px 14px; font-size: 13px; font-family: var(--font-sans); background-color: var(--bg-card); color: var(--color-text); border: 1px solid var(--color-border); outline: none; }
    .search-input:focus { border-color: var(--cyber-cyan); box-shadow: var(--glow-cyan); }
    .table-container {
      overflow-x: auto;
      border: 1px solid var(--color-border);
      border-radius: var(--table-frame-radius);
      background-color: var(--bg-card);
    }
    .table-container.table-container--with-alpha {
      /* visible so pin-heads can stick to the viewport; radius kept via sticky chrome top radii */
      overflow: visible;
    }
    .table-h-scroll {
      overflow-x: auto;
    }
    /* Scroll-Wrapper ohne äußeren .table-container: Rahmen wie Pronomen-Referenz */
    :not(.table-container) > .table-h-scroll {
      margin: 16px 0;
      border: 1px solid var(--color-border);
      border-radius: var(--table-frame-radius);
      background-color: var(--bg-card);
    }
    .cyber-table th, .cyber-table td,
    .cheat-table th, .cheat-table td {
      border-right: 1px solid var(--color-border);
    }
    .cyber-table th:last-child, .cyber-table td:last-child,
    .cheat-table th:last-child, .cheat-table td:last-child {
      border-right: none;
    }
    .cyber-table thead th {
      position: sticky;
      top: 0 !important;
      z-index: 100;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
      box-shadow: none;
    }
    /* Alpha tables: vertical thead pin is JS only (flush under letter bar).
       Do NOT keep position:sticky here — sticky+top fights translateY and leaves thead mid-page. */
    .table-container--with-alpha .cyber-table thead th,
    .table-container--with-alpha .cheat-table thead th {
      position: relative;
      top: auto !important;
      box-shadow: none;
    }
    .table-container--with-alpha .cyber-table thead.is-pinned,
    .table-container--with-alpha .cheat-table thead.is-pinned {
      box-shadow: none;
    }
    /* Linke Titelzelle: immer deckend cyan – nach thead-Pink, sonst scheint Text durch */
    .comp-table thead th:first-child,
    .pronomen-table thead th:first-child,
    .cyber-table:not(.wortfelder-menu-table):not(#adj-praep-table) thead th:first-child,
    .cheat-table thead th:first-child,
    .comp-table thead.is-pinned th:first-child,
    .pronomen-table thead.is-pinned th:first-child,
    .cyber-table:not(.wortfelder-menu-table):not(#adj-praep-table) thead.is-pinned th:first-child,
    .cheat-table thead.is-pinned th:first-child,
    #verben-unregel-table thead th:first-child,
    #verben-unregel-table thead.is-pinned th:first-child,
    #nomen-verb-table thead th:first-child,
    #nomen-verb-table thead.is-pinned th:first-child,
    #praefixverben-table thead th:first-child,
    #praefixverben-table thead.is-pinned th:first-child,
    #wortfelder-table thead th:first-child,
    #wortfelder-table thead.is-pinned th:first-child,
    #adjektive-suffix-table thead th:first-child,
    #adjektive-suffix-table thead.is-pinned th:first-child,
    #adjektive-praefix-matrix-table thead th:first-child,
    #adjektive-praefix-matrix-table thead.is-pinned th:first-child,
    #adj-praep-table thead th.adj-praep-th-adj,
    #adj-praep-table thead.is-pinned th.adj-praep-th-adj,
    #rektion-kasus-table thead th:first-child,
    #rektion-kasus-table thead.is-pinned th:first-child,
    #verben-rektion-table thead th:first-child,
    #verben-rektion-table thead.is-pinned th:first-child,
    #verben-rektion-table thead.is-pinned th:nth-child(1),
    #doppelpraefixe-table thead th:nth-child(1),
    #doppelpraefixe-table thead th:nth-child(3),
    #doppelpraefixe-table thead.is-pinned th:nth-child(1),
    #doppelpraefixe-table thead.is-pinned th:nth-child(3) {
      background-color: var(--table-col1-bg) !important;
      background-image: none !important;
      color: var(--cyber-cyan) !important;
    }
    /* Rektion prep matrix: fit full width, no horizontal scroll */
    #verb-rektion-view-praepositionen .table-container:not(.table-container--with-alpha) {
      overflow-x: hidden;
    }
    #verb-rektion-view-praepositionen .table-container--with-alpha {
      overflow: visible;
    }
    #verb-rektion-view-praepositionen .table-h-scroll {
      overflow-x: hidden;
    }
    #verben-rektion-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
    }
    #verben-rektion-table thead {
      position: relative;
      z-index: 40;
      will-change: transform;
    }
    #verben-rektion-table thead th {
      /* Override .cyber-table thead th { top: 0 !important } — vertical stick is JS */
      position: relative;
      top: auto !important;
      z-index: 20;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #verben-rektion-table td:nth-child(1),
    #verben-rektion-table th:nth-child(1) {
      position: sticky;
      left: 0;
      top: auto !important;
      z-index: 5;
      width: 17em;
      max-width: 17em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: var(--table-col1-bg);
      border-right: 1px solid var(--cyber-cyan);
      padding-left: 4px;
      padding-right: 4px;
      font-size: 11px;
    }
    #verben-rektion-table td:nth-child(1) {
      font-size: 13px;
      color: var(--cyber-cyan);
      font-weight: 700;
    }
    #verben-rektion-table td:nth-child(1) .row-nr {
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 0.92em;
    }
    #verben-rektion-table .rektion-sich {
      display: inline-block;
      width: 2.7em;
      margin-right: 0.28em;
      text-align: right;
      vertical-align: baseline;
    }
    #verben-rektion-table th,
    #verben-rektion-table td {
      padding: 5px 2px;
      font-size: 11px;
    }
    #verben-rektion-table th:nth-child(n+2),
    #verben-rektion-table td:nth-child(n+2) {
      min-width: 0;
      width: auto;
      padding: 4px 1px;
      font-size: 9px;
      overflow: hidden;
      text-align: center;
    }
    #verben-rektion-table thead th:nth-child(n+2) {
      font-size: 7pt;
      letter-spacing: -0.02em;
      padding: 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #verben-rektion-table th:nth-child(1) {
      z-index: 30;
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
    }
    #verben-rektion-table thead.is-pinned {
      box-shadow: none;
    }
    #verben-rektion-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #verben-rektion-table thead.is-pinned th:nth-child(1) {
      background: var(--table-col1-bg);
    }
    #verben-rektion-table .kasus-matrix-badge {
      font-size: 6.5pt;
      padding: 1px 2px;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
    /* Starke Verben: vertical pin via JS (same as Rektion) */
    #verben-unregel-table thead {
      position: relative;
      z-index: 40;
      will-change: transform;
    }
    #verben-unregel-table thead th {
      position: relative;
      top: auto !important;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #verben-unregel-table thead.is-pinned {
      box-shadow: none;
    }
    #verben-unregel-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #verben-unregel-table thead th:first-child,
    #verben-unregel-table thead.is-pinned th:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 30;
    }
    #nomen-verb-table thead {
      position: relative;
      z-index: 40;
      will-change: transform;
    }
    #nomen-verb-table thead th {
      position: relative;
      top: auto !important;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #nomen-verb-table thead.is-pinned {
      box-shadow: none;
    }
    #nomen-verb-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #nomen-verb-table thead th:first-child,
    #nomen-verb-table thead.is-pinned th:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 30;
    }
    #mod-wortschatz-nomen-verb .table-container > .cyber-table,
    #mod-wortschatz-nomen-verb .table-h-scroll > .cyber-table {
      margin: 0;
      border: none;
      border-radius: 0;
    }
    #praefixverben-table thead {
      position: relative;
      z-index: 40;
      will-change: transform;
    }
    #praefixverben-table thead th {
      position: relative;
      top: auto !important;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #praefixverben-table thead.is-pinned {
      box-shadow: none;
    }
    #praefixverben-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #praefixverben-table thead th:first-child,
    #praefixverben-table thead.is-pinned th:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 30;
    }
    #praefixverben-table .row-nr {
      font-size: 0.8em;
      margin-right: auto;
      flex-shrink: 0;
    }
    #praefixverben-table th:first-child,
    #praefixverben-table td:first-child {
      width: 28%;
      white-space: nowrap;
      vertical-align: middle;
      color: var(--color-text-strong);
      font-weight: 700;
      text-align: right;
    }
    #praefixverben-table th:last-child,
    #praefixverben-table td:last-child {
      width: 72%;
    }
    #praefixverben-table .praefix-verb-cell {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      gap: 0.35em;
      white-space: nowrap;
      max-width: 100%;
      box-sizing: border-box;
    }
    #praefixverben-table .praefix-verb-cell .word-speak-btn {
      margin-left: 0;
      flex-shrink: 0;
    }
    /* Natürliche Verbbreite: rechtsbündig als Block (kein 9.5em-Präfixpolster) */
    #praefixverben-table .praefix-verb-line {
      grid-template-columns: max-content max-content max-content;
    }
    #praefixverben-table .praefix-verb-dot {
      padding: 0 0.2em;
    }
    #praefixverben-table .praefix-meaning {
      line-height: 1.45;
    }
    #praefixverben-table .praefix-ex {
      display: block;
      margin-top: 0.4em;
      color: var(--color-text-muted);
      font-weight: 400;
      font-size: 0.95em;
    }
    #doppelpraefixe-table {
      font-size: 11.5px;
      width: 100%;
      table-layout: fixed;
    }
    #doppelpraefixe-table th,
    #doppelpraefixe-table td {
      vertical-align: top;
      padding: 8px 8px;
    }
    /* Verbspalten breiter (Form + Speak + Nr.), Bedeutungen etwas schmaler; beide cyan */
    #doppelpraefixe-table th:nth-child(1),
    #doppelpraefixe-table td:nth-child(1),
    #doppelpraefixe-table th:nth-child(3),
    #doppelpraefixe-table td:nth-child(3) {
      width: 21%;
      min-width: 16ch;
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      border-right: 1px solid var(--table-col1-border);
    }
    #doppelpraefixe-table td:nth-child(1),
    #doppelpraefixe-table td:nth-child(3) {
      border-bottom-color: var(--table-col1-border);
    }
    #doppelpraefixe-table th:nth-child(2),
    #doppelpraefixe-table td:nth-child(2),
    #doppelpraefixe-table th:nth-child(4),
    #doppelpraefixe-table td:nth-child(4) {
      width: 29%;
    }
    #doppelpraefixe-table th:nth-child(1),
    #doppelpraefixe-table th:nth-child(3) {
      border-bottom-color: var(--cyber-cyan);
    }
    #doppelpraefixe-table thead th:nth-child(1),
    #doppelpraefixe-table thead th:nth-child(3),
    #doppelpraefixe-table thead.is-pinned th:nth-child(1),
    #doppelpraefixe-table thead.is-pinned th:nth-child(3) {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 120;
    }
    #doppelpraefixe-table tbody tr:hover td:nth-child(1),
    #doppelpraefixe-table tbody tr:hover td:nth-child(3) {
      background: var(--table-col1-bg-hover);
    }
    #doppelpraefixe-table .doppel-ex {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: var(--color-text-muted);
    }

    /* Wortfelder Themenkarte: kompakt — Gruppenzeile + eine Felderzeile */
    #wortfelder-fields-bar.chap-subnav-card .chapter-nav-pills {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
      overflow-x: visible;
      width: 100%;
      min-width: 0;
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* etwas mehr Abstand zwischen Thema- und Feld-Zeile */
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row {
      margin-bottom: 6px;
      padding-bottom: 2px;
    }
    #wortfelder-fields-bar.chap-subnav-card .chapter-nav-row-label {
      box-sizing: border-box;
      height: auto;
      min-height: 24px;
      padding: 3px 8px;
      font-size: var(--ui-font-size-sm);
      line-height: 1.15;
    }
    #wortfelder-fields-bar.chap-subnav-card .chapter-nav-pill {
      box-sizing: border-box;
      width: 100%;
      max-width: none;
      height: auto;
      min-height: 24px;
      min-width: 0;
      padding: 3px 6px;
      font-size: var(--ui-btn-font-size);
      white-space: nowrap;
      text-align: center;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      gap: 2px;
    }
    #wortfelder-fields-bar .wf-pill-more {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0.9em;
      height: 0.9em;
      margin-left: 1px;
      padding: 0 2px;
      font-size: var(--ui-btn-font-size);
      font-weight: 800;
      line-height: 1;
      color: var(--cyber-pink);
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 40%, transparent);
      background: var(--cyber-pink-dim);
    }
    #wortfelder-fields-bar .chapter-nav-pill.is-active .wf-pill-more {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.55);
      background: transparent;
    }
    /* Ansicht = Moduszeile: cyan Label, magenta Pills (wie Thema/Gebiet-Labels) */
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row {
      margin-bottom: 2px;
      padding-bottom: 0;
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-row-label {
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border-color: color-mix(in srgb, var(--cyber-cyan) 28%, transparent);
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pill {
      box-sizing: border-box;
      height: auto;
      min-height: 24px;
      padding: 3px 6px;
      font-size: var(--ui-btn-font-size);
      line-height: 1.15;
      color: var(--cyber-pink);
      border-color: color-mix(in srgb, var(--cyber-pink) 28%, transparent);
      background: var(--cyber-pink-dim);
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pill:hover {
      color: var(--cyber-pink);
      background: color-mix(in srgb, var(--cyber-pink) 22%, transparent);
      border-color: var(--cyber-pink);
    }
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pill.is-active {
      color: #fff;
      background: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    @media (max-width: 900px) {
      #wortfelder-fields-bar.chap-subnav-card .chapter-nav-pills {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      /* Thema nicht mehr 4-col → Reststreifen aus */
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills::after {
        content: none;
        display: none;
      }
    }
    @media (max-width: 720px) {
      #wortfelder-fields-bar.chap-subnav-card .chapter-nav-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills::after,
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills::after {
        content: none;
        display: none;
      }
    }
    #wortfelder-pin-head .alpha-jump {
      flex-wrap: nowrap;
    }
    .wort-also-stack {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    .wort-also-badge {
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 2px 6px;
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1.25;
      color: var(--cyber-amber);
      background: var(--cyber-amber-dim);
      border: 1px solid var(--cyber-amber);
      border-radius: 3px;
      text-align: center;
      white-space: normal;
      overflow: visible;
      cursor: pointer;
      hyphens: auto;
      appearance: none;
      -webkit-appearance: none;
    }
    .wort-also-badge:hover {
      filter: brightness(1.08);
    }
    .wort-also-badge.wort-also-badge--inline {
      display: inline-block;
      width: auto;
      max-width: none;
      margin-left: 6px;
      vertical-align: middle;
      white-space: nowrap;
    }
    #wortfelder-table {
      table-layout: fixed;
      width: 100%;
    }
    /* Wortfelder: Wort-Spalte (Lemma + Form darunter), Bedeutung & Beispiel gleich breit */
    #wortfelder-table:not(.nat-herkunft-table) {
      --wortschatz-4col-c1: 22em;
      --wortschatz-4col-c2: 12em;
    }
    #wortfelder-table:not(.nat-herkunft-table) th:nth-child(1),
    #wortfelder-table:not(.nat-herkunft-table) td:nth-child(1) {
      width: var(--wortschatz-4col-c1);
      min-width: var(--wortschatz-4col-c1);
    }
    #wortfelder-table:not(.nat-herkunft-table) th.wort-also-col,
    #wortfelder-table:not(.nat-herkunft-table) td.wort-also-col {
      max-width: none;
    }
    /* Override .cyber-table thead th { sticky; top: 0 } — vertical stick is JS */
    #wortfelder-table thead {
      position: relative;
      z-index: 40;
      will-change: transform;
    }
    #wortfelder-table thead th {
      position: relative;
      top: auto !important;
      vertical-align: middle;
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #wortfelder-table thead.is-pinned {
      box-shadow: none;
    }
    #wortfelder-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #wortfelder-table thead th:first-child,
    #wortfelder-table thead.is-pinned th:first-child {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 30;
    }
    #wortfelder-table .praefix-ex,
    #wortfelder-table td {
      vertical-align: top;
    }
    #wortfelder-table thead th:first-child,
    #wortfelder-table tbody td:first-child {
      color: var(--cyber-cyan);
      background: var(--table-col1-bg);
      overflow-wrap: normal;
      word-break: normal;
    }
    #wortfelder-table:not(.nat-herkunft-table) tbody td:first-child {
      white-space: normal;
    }
    #wortfelder-table.nat-herkunft-table tbody td:first-child {
      white-space: nowrap;
    }
    #wortfelder-table .wortfelder-word-cell {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 0.4em;
      row-gap: 3px;
      align-items: start;
      min-width: 0;
    }
    #wortfelder-table .wortfelder-word-cell > .row-nr {
      grid-column: 1;
      grid-row: 1;
      margin-right: 0;
    }
    #wortfelder-table .wortfelder-word-main {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      white-space: nowrap;
    }
    #wortfelder-table .wortfelder-word-form {
      grid-column: 2;
      grid-row: 2;
      font-size: 0.88em;
      font-weight: 500;
      line-height: 1.35;
      color: var(--color-text-muted);
      white-space: normal;
      overflow-wrap: break-word;
      max-width: 100%;
    }
    #wortfelder-table tbody td:first-child strong {
      color: var(--cyber-cyan);
    }
    #wortfelder-table th.wort-also-col,
    #wortfelder-table td.wort-also-col {
      white-space: normal;
    }
    #wortfelder-table td.wort-also-col {
      vertical-align: top;
    }
    #wortfelder-table thead th.wort-also-col {
      vertical-align: middle;
      white-space: nowrap;
      text-align: left;
    }
    #wortfelder-table .wortfelder-status,
    #adjektive-boosters-table .wortfelder-status,
    #praefixverben-table .wortfelder-status {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 2rem 1rem;
      min-height: 7rem;
      text-align: center;
      color: var(--cyber-cyan, #22d3ee);
      font-size: 1.15rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    #wortfelder-table .wortfelder-status--error,
    #adjektive-boosters-table .wortfelder-status--error,
    #praefixverben-table .wortfelder-status--error {
      color: var(--cyber-pink, #ec4899);
    }
    #wortfelder-table .wortfelder-status-spinner,
    #adjektive-boosters-table .wortfelder-status-spinner,
    #praefixverben-table .wortfelder-status-spinner {
      width: 2rem;
      height: 2rem;
      border: 3px solid rgba(34, 211, 238, 0.22);
      border-top-color: var(--cyber-cyan, #22d3ee);
      border-radius: 50%;
      animation: wortfelder-status-spin 0.7s linear infinite;
      flex-shrink: 0;
    }
    :is([data-theme="light"], [data-theme="sepia"]) #wortfelder-table .wortfelder-status-spinner,
    :is([data-theme="light"], [data-theme="sepia"]) #adjektive-boosters-table .wortfelder-status-spinner,
    :is([data-theme="light"], [data-theme="sepia"]) #praefixverben-table .wortfelder-status-spinner {
      border-color: rgba(8, 145, 178, 0.22);
      border-top-color: var(--cyber-cyan, #0891b2);
    }
    #wortfelder-table .wortfelder-status-msg,
    #adjektive-boosters-table .wortfelder-status-msg,
    #praefixverben-table .wortfelder-status-msg {
      display: block;
    }
    @keyframes wortfelder-status-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      #wortfelder-table .wortfelder-status-spinner {
        animation: none;
        border-top-color: var(--cyber-pink, #ec4899);
      }
    }
    #wortfelder-table .wortfelder-load-more-row td {
      text-align: center;
      padding: 1rem 0.75rem;
      border-bottom: none;
    }
    #wortfelder-table .wortfelder-load-more-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(34, 211, 238, 0.45);
      background: rgba(34, 211, 238, 0.12);
      color: var(--cyber-cyan, #22d3ee);
      font: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0.55rem 1.1rem;
      border-radius: 8px;
      cursor: pointer;
    }
    #wortfelder-table .wortfelder-load-more-btn:hover {
      background: rgba(34, 211, 238, 0.22);
    }
    #wortfelder-table .wortfelder-load-more-btn:focus-visible {
      outline: 2px solid var(--cyber-cyan, #22d3ee);
      outline-offset: 2px;
    }
    #wortfelder-table:not(.nat-herkunft-table) th:nth-child(3),
    #wortfelder-table:not(.nat-herkunft-table) td:nth-child(3),
    #wortfelder-table:not(.nat-herkunft-table) th:nth-child(4),
    #wortfelder-table:not(.nat-herkunft-table) td:nth-child(4) {
      width: auto;
      max-width: none;
      white-space: normal;
      overflow-wrap: break-word;
    }

    /* Wortfeld Herkunft (Nationalitäten): Land natürlich, Maskulin/Feminin gleich, Adjektiv einzeilig */
    #wortfelder-table.nat-herkunft-table {
      table-layout: auto;
      width: 100%;
    }
    #wortfelder-table.nat-herkunft-table th:nth-child(1),
    #wortfelder-table.nat-herkunft-table td:nth-child(1) {
      white-space: nowrap;
    }
    #wortfelder-table.nat-herkunft-table th:nth-child(2),
    #wortfelder-table.nat-herkunft-table td:nth-child(2),
    #wortfelder-table.nat-herkunft-table th:nth-child(3),
    #wortfelder-table.nat-herkunft-table td:nth-child(3) {
      width: 32%;
      white-space: normal;
      overflow-wrap: break-word;
    }
    #wortfelder-table.nat-herkunft-table th:nth-child(4),
    #wortfelder-table.nat-herkunft-table td:nth-child(4) {
      width: 1%;
      white-space: nowrap;
    }
    .nat-gender-pl {
      display: block;
      margin-top: 2px;
      font-size: 0.92em;
      color: var(--color-text-muted);
    }

    #mod-verb-praefixe .table-container > .cyber-table,
    #mod-verb-praefixe .table-h-scroll > .cyber-table {
      margin: 0;
      border: none;
      border-radius: 0;
    }
    .badge-trennbar,
    .badge-untrennbar,
    .badge-grundverb {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 3px;
      white-space: nowrap;
      text-align: center;
      box-sizing: content-box;
      /* feste Breite am längsten Label „untrennbar“ */
      width: 10ch;
      min-width: 10ch;
      max-width: 10ch;
    }
    .badge-trennbar {
      background-color: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      border: 1px solid var(--cyber-cyan);
    }
    .badge-untrennbar {
      background-color: var(--cyber-amber-dim);
      color: var(--cyber-amber);
      border: 1px solid var(--cyber-amber);
    }
    .badge-grundverb {
      background-color: rgba(100, 116, 139, 0.18);
      color: var(--color-text-muted);
      border: 1px solid var(--color-border);
    }
    .praefix-verb-line {
      display: inline-grid;
      grid-template-columns: minmax(9.5em, max-content) 1.25em auto;
      align-items: center;
      font-family: var(--font-sans);
      white-space: nowrap;
      vertical-align: middle;
      flex-shrink: 0;
    }
    .praefix-verb-line.is-compact {
      grid-template-columns: max-content max-content;
      column-gap: 1ch;
      font-size: inherit;
    }
    .praefix-verb-prefix {
      text-align: right;
      color: var(--cyber-cyan);
      font-weight: 700;
    }
    .praefix-verb-line.is-compact .praefix-verb-prefix {
      text-align: left;
    }
    .praefix-verb-dot {
      text-align: center;
      color: var(--color-text-muted);
      font-weight: 400;
    }
    .praefix-verb-stem {
      text-align: left;
      color: var(--color-text-strong);
      font-weight: 700;
    }
    .praefix-verb-line.is-untrennbar .praefix-verb-prefix {
      color: var(--color-text-strong);
      font-weight: 700;
    }
    .praefix-verb-line.is-untrennbar .praefix-verb-stem {
      color: var(--cyber-cyan);
      font-weight: 700;
    }
    .praefix-verb-line.is-untrennbar .praefix-verb-dot {
      color: var(--color-text-strong);
      opacity: 0.45;
    }
    #doppelpraefixe-table .praefix-verb-line {
      grid-template-columns: max-content max-content;
      column-gap: 1ch;
    }
    #doppelpraefixe-table .praefix-verb-prefix {
      text-align: left;
    }
    /* Verbform-Spalten: Inhalt links */
    #doppelpraefixe-table td:nth-child(1),
    #doppelpraefixe-table td:nth-child(3) {
      font-size: 12pt;
      white-space: nowrap;
      vertical-align: middle;
      text-align: left;
      padding-left: 4px;
      padding-right: 4px;
    }
    #doppelpraefixe-table th:nth-child(1),
    #doppelpraefixe-table th:nth-child(3) {
      text-align: left;
      padding-left: 4px;
      padding-right: 4px;
    }
    #doppelpraefixe-table .word-speak-btn {
      vertical-align: middle;
    }
    .cyber-btn { font-family: var(--font-mono); font-size: var(--ui-btn-font-size); font-weight: 700; padding: 8px 20px; background-color: var(--cyber-cyan-dim); color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan); cursor: pointer; transition: all 0.15s ease; }
    .cyber-btn:hover { background-color: var(--cyber-cyan); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25); }
    .cyber-btn:active { transform: translateY(1px) scale(0.97); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); transition-duration: 0.04s; }

    /* Universelles taktiles Klick- & Druck-Feedback (Micro-Press) */
    button:active:not(:disabled),
    .chapter-nav-pill:active:not(:disabled),
    .overview-menu-btn:active:not(:disabled):not(.is-active),
    .hud-tool-btn:active,
    .hud-pref-btn:active,
    .layout-mode-btn:active,
    .cyber-btn:active,
    .btn:active,
    .tab-btn:active,
    .modal-close-btn:active,
    .rede-filter-btn:active {
      transform: scale(0.965) translateY(1px) !important;
      filter: brightness(0.92) !important;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28) !important;
      transition: transform 40ms cubic-bezier(0.2, 0, 0, 1), filter 40ms ease-out, box-shadow 40ms ease-out !important;
    }
    .blurred { filter: blur(5px); transition: filter 0.3s; cursor: pointer; }
    .blurred.revealed, .blurred:hover { filter: none; }
    .status-badge { font-family: var(--font-mono); font-size: 7pt; background-color: var(--cyber-amber-dim); color: var(--cyber-amber); border: 1px solid var(--cyber-amber); padding: 1px 6px; margin-left: 0; }
    .badge-ugs {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 600;
      letter-spacing: 0.02em;
      background-color: var(--cyber-amber-dim);
      color: var(--cyber-amber);
      border: 1px solid var(--cyber-amber);
      padding: 1px 6px;
      margin-left: 6px;
      border-radius: 3px;
      vertical-align: middle;
      white-space: nowrap;
      cursor: help;
    }
    .badge-schwankend {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      background-color: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border: 1px solid var(--cyber-pink);
      padding: 1px 6px;
      margin-left: 8px;
      white-space: nowrap;
      vertical-align: middle;
    }
    /* Moderate Spalten: Partizip mehr Raum – feste % (Filter verschiebt nicht) */
    #verben-unregel-table {
      table-layout: fixed;
      width: 100%;
    }
    #verben-unregel-table th:nth-child(1),
    #verben-unregel-table td:nth-child(1) {
      width: 22%;
    }
    #verben-unregel-table th:nth-child(2),
    #verben-unregel-table td:nth-child(2) {
      width: 19%;
    }
    #verben-unregel-table th:nth-child(3),
    #verben-unregel-table td:nth-child(3) {
      width: 19%;
    }
    #verben-unregel-table th:nth-child(4),
    #verben-unregel-table td:nth-child(4) {
      width: 40%;
    }
    #verben-unregel-table th,
    #verben-unregel-table td {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    /* Mischverben: 4 Spalten ohne Hilfsverb – Präsens-Header etwas länger */
    #starke-verben-view-misch .cheat-table {
      table-layout: fixed;
      width: 100%;
    }
    #starke-verben-view-misch .cheat-table th:nth-child(1),
    #starke-verben-view-misch .cheat-table td:nth-child(1) {
      width: 25%;
    }
    #starke-verben-view-misch .cheat-table th:nth-child(2),
    #starke-verben-view-misch .cheat-table td:nth-child(2) {
      width: 25%;
    }
    #starke-verben-view-misch .cheat-table th:nth-child(3),
    #starke-verben-view-misch .cheat-table td:nth-child(3) {
      width: 24%;
    }
    #starke-verben-view-misch .cheat-table th:nth-child(4),
    #starke-verben-view-misch .cheat-table td:nth-child(4) {
      width: 26%;
    }
    #starke-verben-view-misch .cheat-table th,
    #starke-verben-view-misch .cheat-table td {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #verben-unregel-table td:first-child {
      position: relative;
      padding-right: 7.25em;
      vertical-align: middle;
    }
    #verben-unregel-table td:first-child .badge-schwankend {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
    }
    /* Partizip links, Anmerkung rechts – Flex nur im inneren Wrapper (td bleibt table-cell,
       sonst bricht border-top der alpha-letter-start-Zeile vor der letzten Spalte ab) */
    #verben-unregel-table td:nth-child(4) {
      vertical-align: middle;
    }
    #verben-unregel-table td:nth-child(4) .perfekt-cell {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35em 0.6em;
      width: 100%;
      min-width: 0;
    }
    #verben-unregel-table td:nth-child(4) .perfekt-forms {
      flex: 1 1 auto;
      min-width: 0;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    #verben-unregel-table td:nth-child(4) .status-badge {
      margin-left: auto;
      flex: 0 0 auto;
      max-width: 100%;
      line-height: 1.2;
    }
    #verben-unregel-table td:nth-child(4) .status-badge.note-tip {
      cursor: help;
      font-weight: 800;
      min-width: 1.35em;
      text-align: center;
      white-space: nowrap;
      font-family: inherit;
      appearance: none;
      -webkit-appearance: none;
      line-height: inherit;
      vertical-align: middle;
    }
    #verben-unregel-table td:nth-child(4) .status-badge.note-tip:focus-visible {
      outline: 2px solid var(--cyber-amber);
      outline-offset: 2px;
    }
    /* Floating note popover (body-level — table overflow-x would clip absolute tips) */
    .unregel-note-tip {
      position: fixed;
      z-index: 9000;
      max-width: min(280px, calc(100vw - 16px));
      padding: 6px 10px;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 600;
      line-height: 1.35;
      color: var(--cyber-amber);
      background: var(--bg-card);
      border: 1px solid var(--cyber-amber);
      border-radius: 4px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
      pointer-events: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .unregel-note-tip {
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    }
    .badge-suffix { display: inline-block; font-size: 11px; background-color: var(--cyber-cyan-dim); color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan); padding: 2px 8px; margin: 2px; }
    #adjektive-suffix-table,
    #adjektive-praefix-matrix-table,
    #adj-praep-table {
      table-layout: auto;
      width: 100%;
      font-size: 11px;
      border-collapse: separate;
      border-spacing: 0;
    }
    #adjektive-suffix-table thead,
    #adjektive-praefix-matrix-table thead,
    #adj-praep-table thead {
      position: relative;
      z-index: 200;
      will-change: transform;
    }
    #adjektive-suffix-table th,
    #adjektive-suffix-table td,
    #adjektive-praefix-matrix-table th,
    #adjektive-praefix-matrix-table td,
    #adj-praep-table th,
    #adj-praep-table td {
      text-align: center;
      vertical-align: middle;
      padding: 6px 1px;
    }
    #adjektive-suffix-table th,
    #adjektive-praefix-matrix-table th,
    #adj-praep-table th {
      position: relative;
      top: auto !important;
      font-size: 6.5pt;
      letter-spacing: 0;
      padding: 8px 0;
      white-space: nowrap;
      color: var(--cyber-pink);
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #adjektive-suffix-table thead.is-pinned,
    #adjektive-praefix-matrix-table thead.is-pinned,
    #adj-praep-table thead.is-pinned {
      box-shadow: none;
    }
    #adjektive-suffix-table thead.is-pinned th,
    #adjektive-praefix-matrix-table thead.is-pinned th,
    #adj-praep-table thead.is-pinned th {
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #adjektive-suffix-table thead th:first-child,
    #adjektive-suffix-table thead.is-pinned th:first-child,
    #adjektive-praefix-matrix-table thead th:first-child,
    #adjektive-praefix-matrix-table thead.is-pinned th:first-child,
    #adj-praep-table thead th.adj-praep-th-adj,
    #adj-praep-table thead.is-pinned th.adj-praep-th-adj {
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      z-index: 30;
    }
    #adjektive-suffix-table th:first-child,
    #adjektive-suffix-table td:first-child,
    #adjektive-praefix-matrix-table th:first-child,
    #adjektive-praefix-matrix-table td:first-child,
    #adj-praep-table th.adj-praep-th-adj,
    #adj-praep-table td:first-child {
      text-align: left;
      width: 1%;
      padding-left: 10px;
      padding-right: 10px;
      white-space: nowrap;
      border-right: 1px solid var(--table-col1-border);
    }
    #adjektive-suffix-table td:first-child,
    #adjektive-praefix-matrix-table td:first-child,
    #adj-praep-table td:first-child {
      background: var(--table-col1-bg);
      font-size: 12pt;
      color: var(--cyber-cyan);
      font-weight: 700;
    }
    #adj-praep-table td:first-child {
      font-size: 10.5pt;
    }
    #adjektive-suffix-table tbody,
    #adjektive-praefix-matrix-table tbody,
    #adj-praep-table tbody {
      counter-reset: adj-matrix-nr;
    }
    #adjektive-suffix-table tbody tr:not([style*="display: none"]),
    #adjektive-praefix-matrix-table tbody tr:not([style*="display: none"]),
    #adj-praep-table tbody tr:not([style*="display: none"]) {
      counter-increment: adj-matrix-nr;
    }
    #adjektive-suffix-table td:first-child::before,
    #adjektive-praefix-matrix-table td:first-child::before,
    #adj-praep-table td:first-child::before {
      content: counter(adj-matrix-nr, decimal-leading-zero) ". ";
      font-weight: 700;
      color: var(--color-text-muted);
      opacity: 1;
      margin-right: 0.55em;
    }
    #adjektive-suffix-table tbody tr:hover td:first-child,
    #adjektive-praefix-matrix-table tbody tr:hover td:first-child,
    #adj-praep-table tbody tr:hover td:first-child {
      background: var(--table-col1-bg);
    }
    #adjektive-suffix-table .badge-suffix,
    #adjektive-praefix-matrix-table .badge-suffix {
      margin: 0;
      padding: 1px 3px;
      font-size: 9px;
      font-family: var(--font-mono);
      font-weight: 700;
      letter-spacing: 0;
    }
    #adjektive-praefix-matrix-table {
      table-layout: auto;
      width: max-content;
      min-width: 100%;
    }
    #adjektive-praefix-matrix-table.is-matrix-balanced {
      table-layout: fixed;
      width: 100%;
      max-width: 100%;
    }
    #adjektive-praefix-matrix-table.is-matrix-balanced th:not(:first-child):not(.adj-ex-cell),
    #adjektive-praefix-matrix-table.is-matrix-balanced td:not(:first-child):not(.adj-ex-cell) {
      width: calc((100% - var(--matrix-stem-w, 6rem)) / var(--praefix-cols, 1));
      min-width: 0;
    }
    #adjektive-praefix-matrix-table th:first-child,
    #adjektive-praefix-matrix-table td:first-child {
      width: var(--matrix-stem-w, auto);
      min-width: var(--matrix-stem-w, auto);
      max-width: var(--matrix-stem-w, auto);
      padding-left: 10px;
      padding-right: 10px;
    }
    #adjektive-praefix-matrix-table.is-filtered th:first-child,
    #adjektive-praefix-matrix-table.is-filtered td:first-child {
      min-width: var(--matrix-stem-w, auto);
      max-width: none;
    }
    #adjektive-praefix-matrix-table th:not(:first-child),
    #adjektive-praefix-matrix-table td:not(:first-child) {
      width: auto;
      min-width: 2em;
      max-width: none;
      padding: 3px 5px;
    }
    #adjektive-praefix-matrix-table.is-filtered th:not(:first-child),
    #adjektive-praefix-matrix-table.is-filtered td:not(:first-child):not(.adj-ex-cell) {
      min-width: 2.4em;
      padding: 3px 8px;
    }
    #adjektive-praefix-matrix-table.is-filtered td.adj-ex-cell {
      min-width: 18em;
      max-width: none;
      width: auto;
    }
    #adjektive-praefix-matrix-table .adj-ex-cell {
      text-align: left;
      white-space: normal;
      line-height: 1.5;
      font-size: 11pt;
      font-style: normal;
      min-width: 16em;
      padding: 8px 12px;
    }
    #adjektive-praefix-matrix-table .adj-ex-adj,
    #adjektive-praefix-matrix-table .adj-ex-adv {
      margin: 0;
    }
    #adjektive-praefix-matrix-table .adj-ex-adv {
      margin-top: 6px;
      color: var(--color-text-muted);
    }
    #adjektive-praefix-matrix-table .adj-ex-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--cyber-cyan);
      margin-right: 6px;
    }
    #adjektive-praefix-matrix-table .adj-ex-mark,
    #adjektive-praefix-table .adj-ex-mark {
      font-weight: 700;
      color: var(--color-text-strong);
    }
    #adjektive-praefix-matrix-table th.adj-praefix-matrix-th-prep {
      font-size: 9pt;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.15;
      padding: 8px 6px;
      white-space: nowrap;
      writing-mode: horizontal-tb;
      transform: none;
      height: auto;
      vertical-align: middle;
    }
    #adjektive-praefix-matrix-table .praep-kasus-mark {
      font-size: var(--ui-font-size-sm);
      line-height: 1;
    }
    #adjektive-praefix-matrix-table .praep-kasus-mark.is-clickable,
    #adjektive-praefix-gruppen-table .praep-kasus-mark.is-clickable {
      cursor: pointer;
    }
    #adjektive-praefix-matrix-table .praep-kasus-mark.is-clickable:hover,
    #adjektive-praefix-gruppen-table .praep-kasus-mark.is-clickable:hover {
      color: var(--cyber-pink);
      text-shadow: var(--glow-pink);
    }
    #adjektive-praefix-matrix-table .adj-matrix-ex-row {
      margin-bottom: 8px;
    }
    #adjektive-praefix-matrix-table .adj-matrix-ex-row:last-child {
      margin-bottom: 0;
    }
    .adj-praefix-sparse-block {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .adj-praefix-matrix-mode-nav {
      margin: 0 0 16px;
    }
    .adj-praefix-matrix-mode-nav .adj-matrix-mode-count {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      opacity: 0.85;
      margin-left: 2px;
    }
    .adj-praefix-einzel-panel .adj-praefix-einzel-intro {
      margin-bottom: 16px;
    }
    .adj-praefix-einzel-panel .adj-praefix-sparse-table {
      margin-top: 0;
    }
    .adj-praefix-sparse-block .sub-title {
      margin-bottom: 8px;
    }
    .adj-praefix-sparse-table th:first-child {
      width: 16%;
      min-width: 7rem;
    }
    .adj-praefix-sparse-table th:last-child {
      width: 84%;
    }
    .adj-praefix-sparse-table td {
      padding-top: 12px;
      padding-bottom: 12px;
      vertical-align: middle;
    }
    .adj-sparse-prefix strong {
      font-family: var(--font-mono);
      font-size: 11pt;
      color: var(--cyber-cyan);
    }
    .adj-sparse-count {
      font-family: var(--font-mono);
      font-size: 9pt;
      color: var(--color-text-muted);
      font-weight: 400;
    }
    .adj-sparse-words {
      line-height: 1.85;
      font-size: 12.5pt;
    }
    .adj-sparse-word {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      margin-right: 2px;
    }
    .adj-sparse-word .adj-dual-ppt,
    .adj-sparse-word .adj-dual-ppa,
    .adj-sparse-word strong {
      font-size: inherit;
      font-weight: 700;
    }
    .adj-sparse-words .adj-gegenpaar-sep {
      font-size: 11pt;
      margin: 0 10px;
      opacity: 0.55;
    }
    .adj-sparse-word .word-speak-btn {
      transform: scale(1.08);
      transform-origin: center;
    }
    .adj-sparse-link {
      margin-left: 14px;
      padding: 4px 10px;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      color: var(--cyber-cyan);
      background: transparent;
      border: 1px solid var(--cyber-cyan-dim, rgba(0, 255, 255, 0.35));
      border-radius: 3px;
      cursor: pointer;
      vertical-align: middle;
    }
    .adj-sparse-link:hover {
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    .adj-dual-forms .adj-dual-sep {
      opacity: 0.65;
      font-weight: 400;
      margin: 0 2px;
    }
    .adj-dual-forms .adj-dual-ppa {
      font-weight: 600;
      color: var(--cyber-cyan);
    }
    #adjektive-praefix-gegenpaare-table {
      table-layout: fixed;
      width: 100%;
    }
    #adjektive-praefix-gegenpaare-table th:first-child,
    #adjektive-praefix-gegenpaare-table td:first-child {
      width: 30%;
      min-width: 0;
      max-width: 30%;
      white-space: normal;
      vertical-align: middle;
      font-size: 11pt;
    }
    #adjektive-praefix-gegenpaare-table th:last-child,
    #adjektive-praefix-gegenpaare-table td:last-child {
      width: 70%;
      min-width: 0;
      max-width: 70%;
      vertical-align: middle;
    }
    #adjektive-praefix-gegenpaare-table td:first-child strong {
      font-size: 12pt;
    }
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-forms {
      line-height: 1.85;
      font-size: 12.5pt;
    }
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: normal;
    }
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-chip .adj-dual-ppt,
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-chip .adj-dual-ppa,
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-chip strong {
      font-size: inherit;
      font-weight: 700;
    }
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-prefix {
      font-family: var(--font-mono);
      font-size: 9.5pt;
      color: var(--cyber-cyan);
      margin-right: 2px;
    }
    #adjektive-praefix-gegenpaare-table .adj-gegenpaar-sep {
      opacity: 0.5;
      margin: 0 10px;
      font-size: 11pt;
    }
    #adjektive-praefix-gegenpaare-table .word-speak-btn {
      transform: scale(1.06);
      transform-origin: center;
    }
    .adj-praefix-gegenpaare-block {
      margin-top: 8px;
    }
    .adj-praefix-gegenpaare-block .sub-title {
      margin-bottom: 8px;
    }
    #adjektive-praefixe-view-erklaerungen > .page-section-nav[data-card-deck-nav] .page-section-nav-filters > button {
      font-size: var(--ui-btn-font-size);
      height: 32px;
      min-height: 32px;
      padding: 0 10px;
      line-height: 1.2;
    }
    #adjektive-praefixe-view-erklaerungen > .page-section-nav[data-card-deck-nav] .page-section-nav-toggle {
      font-size: var(--ui-btn-font-size);
      height: 32px;
    }
    #adjektive-praefixe-view-erklaerungen > .page-section-nav[data-card-deck-nav] .page-section-nav-top {
      width: 32px;
      min-width: 32px;
      height: 32px;
      font-size: var(--ui-btn-font-size);
    }

    /* Gruppen-Ansicht: eine Bedeutungsgruppe, Navigation über dem A–Z-Raster */
    #adjektive-praefix-gruppen-pin-head.verb-table-pin-head--stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    #adjektive-praefix-gruppen-pin-head .verb-table-pin-head-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    #adjektive-praefix-gruppen-pin-head .verb-table-pin-head-row .alpha-jump {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }
    .praefix-gruppen-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 2px 2px;
    }
    .praefix-gruppen-nav button {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: 6px 12px;
      border-radius: 4px;
      border: 1px solid var(--color-border);
      background: var(--bg-app);
      color: var(--color-text-muted);
      cursor: pointer;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .praefix-gruppen-nav button:hover {
      color: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
    }
    .praefix-gruppen-nav button.active {
      color: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      box-shadow: var(--glow-cyan);
    }

    #adjektive-praefix-gruppen-table {
      table-layout: auto;
      width: 100%;
      font-size: 11px;
      border-collapse: separate;
      border-spacing: 0;
    }
    #adjektive-praefix-gruppen-table thead {
      position: relative;
      z-index: 200;
      will-change: transform;
    }
    #adjektive-praefix-gruppen-table th,
    #adjektive-praefix-gruppen-table td {
      text-align: center;
      vertical-align: middle;
      padding: 6px 8px;
    }
    #adjektive-praefix-gruppen-table th.adj-praefix-th-stamm,
    #adjektive-praefix-gruppen-table td:first-child {
      text-align: left;
      width: 1%;
      min-width: 11em;
      padding-left: 10px;
      padding-right: 12px;
      white-space: nowrap;
      border-right: 1px solid var(--table-col1-border);
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      font-size: 12pt;
      font-weight: 700;
    }
    #adjektive-praefix-gruppen-table thead th.adj-praefix-th-stamm {
      color: var(--cyber-cyan);
      background: var(--table-col1-bg);
      z-index: 30;
    }
    #adjektive-praefix-gruppen-table td:first-child::before {
      content: counter(adj-matrix-nr, decimal-leading-zero) ". ";
      font-weight: 700;
      color: var(--color-text-muted);
      margin-right: 0.55em;
    }
    #adjektive-praefix-gruppen-table tbody {
      counter-reset: adj-matrix-nr;
    }
    #adjektive-praefix-gruppen-table tbody tr:not([style*="display: none"]) {
      counter-increment: adj-matrix-nr;
    }
    #adjektive-praefix-gruppen-table th.adj-praefix-th-prep {
      font-size: 9pt;
      letter-spacing: 0.02em;
      white-space: nowrap;
      min-width: 3.2em;
      color: var(--cyber-pink);
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border-bottom: 2px solid var(--cyber-pink);
    }
    #adjektive-praefix-gruppen-table.adj-praefix-gruppen-table--neg th.adj-praefix-th-prep {
      color: var(--cyber-amber);
      background-image: linear-gradient(var(--cyber-amber-dim), var(--cyber-amber-dim));
      border-bottom-color: var(--cyber-amber);
    }
    #adjektive-praefix-gruppen-table.adj-praefix-gruppen-table--richtung th.adj-praefix-th-prep {
      color: var(--cyber-cyan);
      background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim));
      border-bottom-color: var(--cyber-cyan);
    }
    #adjektive-praefix-gruppen-table td:not(:first-child) {
      min-width: 3em;
    }
    #adjektive-praefix-gruppen-table .praep-kasus-mark {
      font-size: 11pt;
    }
    #adjektive-suffix-table {
      table-layout: fixed;
    }
    #adjektive-suffix-table th:first-child,
    #adjektive-suffix-table td:first-child {
      width: 16%;
    }
    #adjektive-suffix-table th:not(:first-child),
    #adjektive-suffix-table td:not(:first-child) {
      width: 7%;
      padding: 4px 0;
    }
    #adjektive-suffix-table th:not(:first-child) {
      font-size: var(--ui-font-size-sm);
      letter-spacing: 0.02em;
    }
    #adjektive-suffix-table .praep-kasus-mark {
      font-size: 11pt;
    }

    /* Adj + Präp Matrix: Kasus-Filter + Alphabet in einer Zeile */
    #adj-praep-pin-head {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      padding: 6px 6px 6px 0;
    }
    #adj-praep-pin-head > .st-chips {
      flex: 0 0 auto;
      width: auto;
      margin: 0;
      padding: 0 0 0 4px;
    }
    #adj-praep-pin-head > .alpha-jump {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      width: auto;
    }
    #adj-praep-table {
      table-layout: fixed;
    }
    #adj-praep-table th.adj-praep-th-adj,
    #adj-praep-table td:first-child {
      width: 16%;
    }
    #adj-praep-table th.adj-praep-th-kasus,
    #adj-praep-table th.adj-praep-th-prep,
    #adj-praep-table td:not(:first-child) {
      width: auto;
      min-width: 1.6em;
      text-align: center;
    }
    #adj-praep-table th.adj-praep-th-group {
      text-align: center;
      font-size: var(--ui-font-size-sm);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 7px 8px;
      color: var(--cyber-pink);
      background-color: var(--bg-card);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 50%, var(--color-border));
      border-bottom: 1px solid color-mix(in srgb, var(--cyber-pink) 35%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-group--gen {
      color: var(--cyber-cyan);
      background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim));
      border-color: color-mix(in srgb, var(--cyber-cyan) 50%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-group--dat {
      color: var(--cyber-pink);
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim));
    }
    #adj-praep-table th.adj-praep-th-group--akk {
      color: var(--cyber-cyan);
      background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim));
      border-color: color-mix(in srgb, var(--cyber-cyan) 45%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-adj {
      vertical-align: middle;
    }
    #adj-praep-table th.adj-praep-th-prep--dat,
    #adj-praep-table thead.is-pinned th.adj-praep-th-prep--dat {
      color: var(--cyber-pink) !important;
      background-color: var(--bg-card) !important;
      background-image: linear-gradient(var(--cyber-pink-dim), var(--cyber-pink-dim)) !important;
      border-bottom-color: var(--cyber-pink) !important;
    }
    #adj-praep-table th.adj-praep-th-prep--akk,
    #adj-praep-table thead.is-pinned th.adj-praep-th-prep--akk {
      color: var(--cyber-cyan) !important;
      background-color: var(--bg-card) !important;
      background-image: linear-gradient(var(--cyber-cyan-dim), var(--cyber-cyan-dim)) !important;
      border-bottom-color: var(--cyber-cyan) !important;
    }
    #adj-praep-table th.adj-praep-th-prep--dat.is-group-start,
    #adj-praep-table td.adj-praep-col--dat.is-group-start {
      border-left: 1px solid color-mix(in srgb, var(--cyber-pink) 45%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-prep--akk.is-group-start,
    #adj-praep-table td.adj-praep-col--akk.is-group-start {
      border-left: 1px solid color-mix(in srgb, var(--cyber-cyan) 45%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-prep--dat.is-group-end,
    #adj-praep-table td.adj-praep-col--dat.is-group-end {
      border-right: 1px solid color-mix(in srgb, var(--cyber-pink) 45%, var(--color-border));
    }
    #adj-praep-table th.adj-praep-th-prep--akk.is-group-end,
    #adj-praep-table td.adj-praep-col--akk.is-group-end,
    #adj-praep-table td.is-group-end:last-child {
      border-right: 1px solid color-mix(in srgb, var(--cyber-cyan) 45%, var(--color-border));
    }
    #adj-praep-table .praep-kasus-mark {
      font-size: 12px;
    }
    #adj-praep-table th.adj-praep-th-prep--stacked {
      white-space: normal;
      min-width: 2.2em;
      line-height: 1.15;
    }

    #adj-praep-table td:first-child .word-speak-btn {
      display: inline-flex;
      vertical-align: text-bottom;
    }
    #adj-praep-prep-pin-head {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      padding: 6px 6px 6px 0;
    }
    #adj-praep-prep-table {
      --wortschatz-3col-c1: 20em;
      --wortschatz-3col-c2: 5.75em;
      --wortschatz-3col-c3: auto;
    }
    #adj-praep-prep-table th:nth-child(2),
    #adj-praep-prep-table td.adj-praep-prep-kasus {
      width: 5.75em;
      min-width: 5.5em;
      max-width: 6em;
      text-align: center;
      white-space: nowrap;
    }
    #adj-praep-prep-table th:nth-child(3),
    #adj-praep-prep-table td.adj-praep-prep-ex {
      width: auto;
      min-width: 12em;
      font-style: normal;
    }
    #adj-praep-prep-table td:first-child .word-speak-btn {
      display: inline-flex;
      vertical-align: text-bottom;
    }

    #adjektive-praefix-table,
    #adjektive-suffix-bsp-table {
      table-layout: fixed;
      width: 100%;
      margin-top: 0;
      scroll-margin-top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px) + var(--card-deck-nav-h, 0px) + var(--sticky-stack-gap, 8px) + 8px);
    }
    #adjektive-praefix-table tbody,
    #adjektive-suffix-bsp-table tbody {
      counter-reset: adj-praefix-nr;
    }
    #adjektive-praefix-table tbody tr,
    #adjektive-suffix-bsp-table tbody tr {
      counter-increment: adj-praefix-nr;
    }
    #adjektive-praefix-table th:first-child,
    #adjektive-praefix-table td:first-child,
    #adjektive-suffix-bsp-table th:first-child,
    #adjektive-suffix-bsp-table td:first-child {
      width: var(--wortschatz-col1-width);
      background: var(--table-col1-bg);
      color: var(--cyber-cyan);
      border-right: 1px solid var(--table-col1-border);
      white-space: nowrap;
      vertical-align: middle;
      font-size: var(--wortschatz-col1-font-size);
    }
    #adjektive-praefix-table th:first-child,
    #adjektive-praefix-table td:first-child,
    #adjektive-suffix-bsp-table th:first-child,
    #adjektive-suffix-bsp-table td:first-child {
      width: 30%;
      min-width: 0;
      max-width: 30%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }
    #adjektive-praefix-table td:first-child,
    #adjektive-suffix-bsp-table td:first-child {
      border-bottom-color: var(--table-col1-border);
    }
    #adjektive-praefix-table th:first-child,
    #adjektive-suffix-bsp-table th:first-child {
      border-bottom-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
    }
    #adjektive-praefix-table td:first-child strong,
    #adjektive-suffix-bsp-table td:first-child strong {
      color: var(--cyber-cyan);
      margin-right: 6px;
    }
    #adjektive-praefix-table td:first-child strong::before,
    #adjektive-suffix-bsp-table td:first-child strong::before {
      content: none;
    }
    #adjektive-praefix-table td:first-child .adj-dual-ppt::before,
    #adjektive-suffix-bsp-table td:first-child .adj-dual-ppt::before {
      content: counter(adj-praefix-nr, decimal-leading-zero) ". ";
      font-weight: 700;
      color: var(--color-text-muted);
      opacity: 1;
      margin-right: 0.55em;
    }
    #adjektive-praefix-table th:last-child,
    #adjektive-praefix-table td:last-child,
    #adjektive-suffix-bsp-table th:last-child,
    #adjektive-suffix-bsp-table td:last-child {
      width: var(--wortschatz-col2-width);
      vertical-align: middle;
    }
    #adjektive-praefix-table th:last-child,
    #adjektive-praefix-table td:last-child,
    #adjektive-suffix-bsp-table th:last-child,
    #adjektive-suffix-bsp-table td:last-child {
      width: 70%;
      min-width: 0;
      max-width: 70%;
    }
    #adjektive-praefix-table .word-speak-btn,
    #adjektive-suffix-bsp-table .word-speak-btn {
      vertical-align: middle;
    }
    #adjektive-praefix-table .adj-ex-cell,
    #adjektive-suffix-bsp-table .adj-ex-cell {
      white-space: normal;
      line-height: 1.5;
      font-size: 11pt;
      font-style: normal;
    }
    #adjektive-praefix-table .adj-ex-adj,
    #adjektive-praefix-table .adj-ex-adv,
    #adjektive-suffix-bsp-table .adj-ex-adj,
    #adjektive-suffix-bsp-table .adj-ex-adv {
      margin: 0;
    }
    #adjektive-praefix-table .adj-ex-adv,
    #adjektive-suffix-bsp-table .adj-ex-adv {
      margin-top: 6px;
      color: var(--color-text-muted);
    }
    #adjektive-praefix-table .adj-ex-label,
    #adjektive-suffix-bsp-table .adj-ex-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--cyber-cyan);
      margin-right: 6px;
    }
    #adjektive-suffix-bsp-table .adj-ex-mark {
      font-weight: 700;
      color: var(--color-text-strong);
    }
    #adjektive-praefix-table tbody tr:hover td:first-child,
    #adjektive-suffix-bsp-table tbody tr:hover td:first-child {
      background: var(--table-col1-bg-hover);
    }

    .adj-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
    .adj-item { font-size: 12px; padding: 4px 10px; background-color: var(--bg-card); border: 1px solid var(--color-border); color: var(--color-text); transition: all 0.2s; }
    .adj-item:hover { border-color: var(--cyber-cyan); color: var(--cyber-cyan); }
    @media (max-width: 768px) {
      .nav-console { flex-direction: column; align-items: flex-start; gap: 8px; border-bottom: none; }
      .nav-console.nav-console-stacked {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }
      .nav-console.nav-console-stacked .nav-console-title {
        grid-column: 1;
        padding-right: 100px;
      }
      .nav-console.nav-console-stacked::after {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
      }
      .nav-console-tabs { border-bottom: none; width: 100%; padding-bottom: 2px; }
      .nav-console-title { padding-bottom: 0; }

      .terminal-hud { flex-wrap: wrap; }
      .hud-tools { width: 100%; }
      .hud-search { max-width: none; }
    }

    /* Globale Portal-Suche (HUD) */
    .home-search-results {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 1000;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      background: var(--bg-card);
      max-height: min(460px, 72vh);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border);
      backdrop-filter: blur(12px);
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-search-results {
      box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--color-border);
    }
    @keyframes hudSearchDropdownIn {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .home-search-results.is-open {
      display: block;
      animation: hudSearchDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .home-search-recent {
      padding: 12px 14px 14px;
      border-bottom: 1px solid var(--color-border);
      background: var(--bg-surface-subtle, rgba(255, 255, 255, 0.02));
    }
    .home-search-recent .recent-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--color-text-muted);
      margin-bottom: 9px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }
    .home-search-recent .recent-clear-btn {
      background: none;
      border: none;
      color: var(--color-text-muted);
      font-size: 10.5px;
      font-family: var(--font-sans);
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      touch-action: manipulation;
      transition: color 0.15s ease;
    }
    .home-search-recent .recent-clear-btn:hover {
      color: var(--cyber-pink);
    }
    .home-search-recent .recent-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .home-search-recent .recent-chip {
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 11.5px;
      cursor: pointer;
      touch-action: manipulation;
      transition: all 0.15s ease;
      font-family: var(--font-sans);
    }
    .home-search-recent .recent-chip:hover {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      transform: translateY(-1px);
    }

    .home-search-syntax {
      padding: 8px 14px 10px;
      border-top: 1px solid var(--color-border);
      background: var(--bg-card);
    }
    .home-search-syntax > summary.home-search-syntax-title {
      list-style: none;
      cursor: pointer;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.03em;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }
    .home-search-syntax > summary.home-search-syntax-title::-webkit-details-marker {
      display: none;
    }
    .home-search-syntax > summary.home-search-syntax-title::before {
      content: '▸';
      display: inline-block;
      font-size: 10px;
      transition: transform 0.15s ease;
      color: var(--cyber-cyan);
    }
    .home-search-syntax[open] > summary.home-search-syntax-title {
      margin-bottom: 7px;
    }
    .home-search-syntax[open] > summary.home-search-syntax-title::before {
      transform: rotate(90deg);
    }
    .home-search-syntax-body {
      font-size: 11px;
      line-height: 1.55;
      color: var(--color-text-muted);
    }
    .home-search-syntax-body em {
      color: var(--cyber-cyan);
      font-style: normal;
      font-weight: 500;
    }

    .home-search-hit {
      display: block;
      width: 100%;
      text-align: left;
      padding: 10px 14px;
      border: 0;
      border-bottom: 1px solid var(--surface-row-border, var(--color-border));
      background: transparent;
      color: var(--color-text);
      cursor: pointer;
      touch-action: manipulation;
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.4;
      transition: background 0.15s ease;
    }
    .home-search-hit:last-child { border-bottom: 0; }
    .home-search-hit:hover,
    .home-search-hit.is-active {
      background: var(--cyber-cyan-dim);
    }
    .home-search-hit .hit-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 3px;
    }
    .home-search-hit .hit-hub {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 700;
      color: var(--cyber-cyan);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .home-search-hit .hit-title {
      font-weight: 700;
      color: var(--color-text-strong);
      display: block;
    }
    .home-search-hit .hit-snip {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      color: var(--color-text-muted);
      line-height: 1.35;
    }
    .search-highlight {
      background: rgba(255, 215, 0, 0.28);
      color: inherit;
      font-weight: 700;
      padding: 0 2px;
      border-radius: 2px;
      text-decoration: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .search-highlight {
      background: rgba(245, 158, 11, 0.26);
      color: #92400e;
    }
    .original-verse {
      margin: 0;
      line-height: 1.55;
      white-space: pre-line;
    }
    .original-note {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--color-text-muted);
    }
    .home-hub {
      display: grid;
      grid-template-columns: 340px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    /* Leerer Start: rechte Spalte bündig so hoch wie der Modul-Kasten */
    .home-hub:has(#home-hub-placeholder.is-visible) {
      align-items: stretch;
    }
    .home-hub:has(#home-hub-placeholder.is-visible) .home-toc {
      align-self: start;
    }
    .home-hub:has(#home-hub-placeholder.is-visible) .home-hub-main {
      min-height: 280px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      height: var(--home-toc-h, auto);
    }
    .home-toc {
      position: sticky;
      top: calc(var(--hud-height, 44px) + 12px);
      align-self: start;
      max-height: calc(100vh - var(--hud-height, 44px) - 24px);
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 14px;
      background: var(--nav-panel-bg);
      border: 1px solid var(--nav-panel-border);
      border-radius: 8px;
      border-left: 3px solid var(--cyber-pink);
      /* Nummern bündig mit linkem Rand des Häuschen-SVG (head-pad + icon-pad + Zentrier-Offset) */
      --home-toc-head-pad-x: 10px;
      --home-toc-icon-slot: 29px;
      --home-toc-icon-pad: 4px;
      --home-toc-icon-size: 19px;
      --home-toc-icon-leading: calc((var(--home-toc-icon-slot) - 2 * var(--home-toc-icon-pad) - var(--home-toc-icon-size)) / 2);
      --home-toc-pad-x: calc(var(--home-toc-head-pad-x) + var(--home-toc-icon-pad) + var(--home-toc-icon-leading));
      /* shared idx column in 9.5pt units (not em — head vs .toc-idx font differ).
         3.4 ≈ glyph width of [01]–[12] + small slack; 5.0 left ~30px dead space
         so gap tweaks (14→8) were almost invisible */
      --home-toc-idx-w: calc(3.4 * 9.5pt);
      --home-toc-btn-gap: 6px;
      --home-toc-child-inset: 8px;
      --home-toc-hover-inset: 6px;
    }
    .home-toc-head {
      display: flex;
      align-items: center;
      margin: 0 0 14px;
      padding: 4px var(--home-toc-head-pad-x);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    [data-theme="light"] .home-toc-head {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.09);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    [data-theme="sepia"] .home-toc-head {
      background: #fdfaf4;
      border-color: rgba(58, 49, 38, 0.12);
      box-shadow: 0 1px 3px rgba(58, 49, 38, 0.04);
    }
    .home-toc-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 4px;
      min-width: 0;
      width: 100%;
      margin: 0;
    }
    .home-toc-meta-link {
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--cyber-cyan);
      margin: 0;
      padding: 4px;
      width: 29px;
      height: 29px;
      border-radius: 5px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      text-align: center;
      line-height: 1;
      flex: 0 0 29px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.9;
      transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }
    .home-toc-meta-link.home-toc-home {
      flex: 0 0 29px;
      width: 29px;
      padding: 4px;
      justify-content: center;
    }
    .home-toc-meta-link svg {
      display: block;
      width: 19px;
      height: 19px;
      flex-shrink: 0;
    }
    .home-toc-meta-link:hover {
      background: var(--cyber-cyan-dim);
      border-color: color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
      opacity: 1;
    }
    .home-toc-meta-link.is-active,
    .home-toc-meta-link.is-active:hover {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      opacity: 1;
    }
    @keyframes wegweiser-pulse {
      0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(0, 240, 255, 0));
        color: var(--cyber-cyan);
      }
      50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85));
        color: #ffffff;
      }
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(0, 240, 255, 0));
        color: var(--cyber-cyan);
      }
    }
    .home-toc-meta-link#home-toc-statistik.is-pulsing,
    .home-toc-meta-link#home-toc-wegweiser.is-pulsing,
    .home-toc-meta-link#home-toc-kontakt.is-pulsing,
    #app-shell .hud-random-btn.is-pulsing,
    #app-shell .kbd-trigger-btn.is-pulsing,
    #app-shell #theme-toggle-btn.is-pulsing {
      animation: wegweiser-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) 2;
      z-index: 10;
      position: relative;
    }
    .home-toc:has(.home-toc-zuletzt.is-open) {
      overflow: visible;
      z-index: 1000;
    }
    .home-toc-zuletzt {
      position: static;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      margin: 0;
      min-width: 0;
      /* Must stay visible: the absolute panel (Merkliste / Lernfortschritt)
         sits outside this box; overflow:hidden was clipping it entirely. */
      overflow: visible;
    }
    .home-toc-zuletzt.is-open {
      overflow: visible;
      z-index: 10001;
    }
    .home-toc-zuletzt-btn {
      font-family: var(--font-mono);
      font-size: 10.5pt;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--cyber-pink);
      margin: 0;
      padding: 5px 8px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 100%;
      min-width: 0;
      opacity: 0.95;
      transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }
    .home-toc-zuletzt-btn:hover,
    .home-toc-zuletzt.is-open .home-toc-zuletzt-btn {
      background: var(--cyber-pink-dim);
      border-color: color-mix(in srgb, var(--cyber-pink) 35%, transparent);
      color: var(--cyber-pink);
      opacity: 1;
    }
    .home-toc-zuletzt-pulse {
      display: none !important;
    }
    .home-toc-zuletzt-label {
      color: var(--cyber-pink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .home-toc-zuletzt-arrow {
      display: block;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      color: var(--cyber-pink);
      transition: transform 0.18s ease;
    }
    .home-toc-zuletzt.is-open .home-toc-zuletzt-arrow {
      transform: rotate(180deg);
    }

    .home-toc-zuletzt-panel.cyber-dashboard-widget,
    .home-toc-zuletzt-panel {
      position: absolute;
      top: 0;
      left: calc(100% + 18px);
      right: auto;
      z-index: 10000;
      width: 360px;
      max-width: calc(100vw - 380px);
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-top: 3px solid var(--cyber-pink) !important;
      border-radius: 12px;
      background: var(--bg-card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 24px var(--cyber-pink-dim);
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
      transform-origin: top left;
      animation: home-zuletzt-in 0.18s ease-out;
    }
    @media (max-width: 899px) {
      .home-toc-zuletzt {
        position: relative;
      }
      .home-toc-zuletzt-panel.cyber-dashboard-widget,
      .home-toc-zuletzt-panel {
        top: calc(100% + 8px);
        left: 0;
        width: min(340px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
      }
    }
    .home-toc-zuletzt-panel[hidden] { display: none !important; }
    @keyframes home-zuletzt-in {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-toc-zuletzt-panel { animation: none; }
      .home-toc-zuletzt-pulse { animation: none; }
      .home-toc-meta-link.is-pulsing,
      #app-shell .hud-random-btn.is-pulsing,
      #app-shell .kbd-trigger-btn.is-pulsing,
      #app-shell #theme-toggle-btn.is-pulsing { animation: none; }
      .home-progress-cta.cyber-cta-glow:hover { transform: none; }
    }

    .cyber-widget-header {
      background: var(--surface-subtle, rgba(255, 255, 255, 0.03));
      border: 1px solid var(--surface-row-border, rgba(255, 255, 255, 0.07));
      border-radius: 8px;
      padding: 10px 12px;
    }
    .cyber-widget-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--cyber-pink);
      margin-bottom: 4px;
    }
    @keyframes cyberDotPulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px var(--cyber-pink-dim);
      }
      50% {
        opacity: 0.55;
        transform: scale(0.85);
        box-shadow: 0 0 2px transparent;
      }
    }
    .cyber-widget-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyber-pink);
      box-shadow: 0 0 6px var(--cyber-pink-dim);
      animation: cyberDotPulse 2.4s ease-in-out infinite;
    }
    .cyber-widget-title {
      display: block;
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--color-text-strong);
      line-height: 1.35;
    }
    .home-progress-hub {
      display: block;
      margin-top: 5px;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      letter-spacing: 0.02em;
      color: var(--color-text-muted);
    }
    .home-progress-hub[hidden] { display: none !important; }
    .home-progress-meta {
      margin: 0;
      padding-top: 2px;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      line-height: 1.35;
      letter-spacing: 0.03em;
      color: var(--color-text-muted);
      opacity: 0.85;
    }

    .home-progress-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 2px;
    }
    .home-progress-cta.cyber-cta-glow {
      display: inline-flex;
      width: 100%;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--cyber-cyan), #00a8ff);
      color: #ffffff !important;
      font-weight: 800;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 0.85rem;
      transition: all 0.2s ease;
      box-shadow: 0 4px 14px var(--cyber-cyan-dim);
      border: none;
      cursor: pointer;
    }
    .home-progress-cta.cyber-cta-glow:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px var(--cyber-cyan-dim);
      filter: brightness(1.1);
    }
    .home-progress-cta.cyber-cta-glow:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 0 2px 8px var(--cyber-cyan-dim);
    }

    .home-progress-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 8px;
      padding: 6px 10px;
      background: var(--surface-subtle, rgba(255, 255, 255, 0.04));
      border: 1px solid var(--color-border);
      color: var(--color-text);
      font-size: 0.78rem;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .home-progress-secondary:hover {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
    }
    .home-progress-secondary:active {
      transform: scale(0.96);
    }
    .home-progress-secondary .home-progress-fav-star.fav-btn {
      margin-left: 0;
      pointer-events: none;
      flex-shrink: 0;
      padding: 2px 6px;
      font-size: 10pt;
      line-height: 1;
      transform: none;
      cursor: inherit;
      color: var(--cyber-pink);
      border-color: color-mix(in srgb, var(--cyber-pink) 55%, transparent);
      background: var(--cyber-pink-dim);
      box-shadow: 0 1px 4px color-mix(in srgb, var(--cyber-pink) 25%, transparent);
    }

    .home-progress-learned-section.cyber-progress-widget,
    .home-progress-learned-section {
      background: var(--surface-subtle, rgba(255, 255, 255, 0.03));
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .home-progress-learned-section:hover {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      box-shadow: 0 4px 14px -2px var(--cyber-cyan-dim);
      transform: translateY(-1px);
    }
    .home-learned-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin-bottom: 6px;
    }
    .home-learned-title {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--color-text-strong);
    }
    .home-learned-title .home-learned-check.mark-learned-btn {
      position: static;
      top: auto;
      transform: none;
      height: auto;
      padding: 0;
      opacity: 1;
      z-index: auto;
      cursor: inherit;
      pointer-events: none;
    }
    .home-learned-title .home-learned-check.mark-learned-btn svg {
      width: 14px;
      height: 14px;
      opacity: 1;
      stroke: var(--cyber-pink);
      stroke-width: 2.4;
    }
    .home-learned-title .home-learned-check .mark-learned-bracket {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--color-text-muted);
    }
    .home-learned-stats {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 600;
      color: var(--cyber-cyan);
      display: block;
      width: 100%;
      line-height: 1.35;
      font-variant-numeric: tabular-nums;
    }
    .home-learned-bar,
    .home-learned-bar.cyber-bar-track {
      height: 6px;
      background: var(--surface-row-border, rgba(255, 255, 255, 0.08));
      border-radius: 999px;
      overflow: hidden;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-learned-bar {
      background: rgba(15, 23, 42, 0.08);
    }
    .home-learned-fill,
    .home-learned-fill.cyber-bar-gradient {
      height: 100%;
      background: linear-gradient(90deg, var(--cyber-cyan), #38bdf8, var(--cyber-green));
      border-radius: 999px;
      transition: width 0.4s ease;
    }
    .home-toc-meta-dot {
      display: none;
    }
    .home-toc-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-inline: var(--home-toc-pad-x);
      font-family: var(--font-mono);
      font-size: 9.5pt;
    }
    .home-toc-footer {
      margin-top: 28px;
      padding-top: 0;
      border-top: none;
    }
    /* Drei Säulen: Abschnittsköpfe bündig über den Modulworten */
    .home-toc-section {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin: 22px 0 4px;
      padding: 0;
      padding-inline: var(--home-toc-pad-x);
      border-top: none;
      box-sizing: border-box;
    }
    .home-toc-section:first-of-type {
      margin-top: 0;
    }
    .home-toc-section-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--home-toc-btn-gap);
      width: 100%;
      padding: 2px var(--home-toc-hover-inset);
      margin-inline: calc(-1 * var(--home-toc-hover-inset));
      box-sizing: border-box;
      border-bottom: 1px dashed color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
    }
    .home-toc-section-overview {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 var(--home-toc-idx-w);
      width: var(--home-toc-idx-w);
      min-width: var(--home-toc-idx-w);
      max-width: var(--home-toc-idx-w);
      height: 1.2em;
      padding: 0;
      margin: 0;
      border: none;
      border-radius: 3px;
      background: transparent;
      color: var(--cyber-cyan);
      cursor: pointer;
      appearance: none;
      font-size: 9.5pt;
      line-height: 1;
      transition: color 0.15s, background 0.15s;
    }
    .home-toc-section-overview svg {
      width: 13px;
      height: 13px;
      display: block;
      flex-shrink: 0;
    }
    .home-toc-section-overview:hover,
    .home-toc-section-overview:focus-visible {
      color: var(--cyber-cyan);
      background: color-mix(in srgb, var(--cyber-cyan) 14%, transparent);
      outline: none;
    }
    .home-toc-section-title {
      flex: 1 1 auto;
      min-width: 0;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--cyber-cyan);
      line-height: 1.2;
      padding: 0;
      margin: 0;
      border: none;
      box-sizing: border-box;
    }
    .home-toc-btn--meta {
      gap: 0;
      padding: 4px 2px;
      color: var(--color-text-muted);
    }
    .home-toc-btn--meta.is-open {
      color: var(--color-text-muted);
      background: transparent;
      border-color: transparent;
    }
    .home-toc-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--home-toc-btn-gap);
      width: 100%;
      text-align: left;
      padding: 5px var(--home-toc-hover-inset);
      margin-inline: calc(-1 * var(--home-toc-hover-inset));
      border: 1px solid transparent;
      border-radius: 4px;
      background: transparent;
      color: var(--color-text);
      cursor: pointer;
      font-family: var(--font-mono);
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .home-toc-btn:hover {
      background: var(--cyber-cyan-dim);
      border-color: rgba(6, 182, 212, 0.25);
    }
    .home-toc-btn.home-toc-btn--meta:hover {
      color: #94a3b8;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    .home-toc-btn.is-open,
    .home-toc-btn.is-open:hover {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: var(--cyber-cyan);
    }
    .home-toc-btn .toc-idx {
      font-size: 9.5pt;
      font-weight: 700;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
      color: var(--cyber-cyan);
      flex: 0 0 var(--home-toc-idx-w);
      width: var(--home-toc-idx-w);
      text-align: center;
      white-space: nowrap;
      transition: color 0.15s ease;
    }
    .home-toc-btn.is-open .toc-idx {
      color: var(--cyber-pink);
    }
    .home-toc-btn .toc-title {
      font-family: 'IBM Plex Sans', var(--font-sans);
      font-size: 11pt;
      font-weight: 600;
      line-height: 1.35;
      /* flex:1 → Pfeile in einer gemeinsamen rechten Spalte (wie früheres 3-Spalten-Grid) */
      flex: 1 1 auto;
      min-width: 0;
      color: var(--color-text-muted);
      transition: color 0.15s ease;
    }
    .home-toc-btn.is-open .toc-title {
      color: var(--cyber-cyan);
    }
    .home-toc-btn.home-toc-btn--meta .toc-title {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: inherit;
      line-height: 1.35;
    }
    .home-toc-btn .toc-chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      color: var(--color-text-muted);
      flex: 0 0 14px;
      margin-left: auto;
      transform: rotate(0deg);
      transform-origin: center center;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
    }
    .home-toc-btn .toc-chevron svg {
      width: 13px;
      height: 13px;
      display: block;
    }
    .home-toc-btn:hover .toc-chevron {
      color: var(--cyber-cyan);
    }
    .home-toc-btn.is-open .toc-chevron,
    .home-toc-group.is-open > .home-toc-btn .toc-chevron {
      color: var(--cyber-pink);
      transform: rotate(90deg);
    }
    .home-toc-btn.is-open:hover .toc-chevron {
      color: var(--cyber-pink);
    }
    /* Wenn ein Modul geöffnet ist: alle anderen Module erhalten einen Grauton */
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open) {
      color: var(--color-text-muted);
      opacity: 0.6;
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open) .toc-idx {
      color: var(--color-text-muted);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open) .toc-title {
      color: var(--color-text-muted);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open) .toc-chevron {
      color: var(--color-text-muted);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open):hover {
      opacity: 1;
      color: var(--color-text-strong);
      background: var(--cyber-cyan-dim);
      border-color: rgba(6, 182, 212, 0.25);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open):hover .toc-idx {
      color: var(--cyber-cyan);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open):hover .toc-title {
      color: var(--color-text);
    }
    .home-toc:has(.home-toc-btn.is-open) .home-toc-btn:not(.is-open):hover .toc-chevron {
      color: var(--cyber-cyan);
    }
    .home-toc-children {
      display: none;
      flex-direction: column;
      gap: 1px;
      padding: 2px 0 4px calc(var(--home-toc-pad-x) + var(--home-toc-idx-w) + var(--home-toc-btn-gap));
      margin: 2px 0 4px 0;
      background: transparent;
      border: none;
    }
    .home-toc-group.is-open > .home-toc-children {
      display: flex;
    }
    .home-toc-child {
      display: block;
      width: 100%;
      text-align: left;
      padding: 4px var(--home-toc-hover-inset);
      margin-inline: calc(-1 * var(--home-toc-hover-inset));
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--color-text-muted);
      opacity: 0.65;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 500;
      line-height: 1.4;
      white-space: nowrap;
      transition: color 0.15s ease, opacity 0.15s ease;
    }
    .home-toc-child:hover {
      background: transparent;
      color: var(--color-text-strong);
      opacity: 1;
    }
    .home-toc-child.is-active {
      background: transparent;
      color: var(--cyber-cyan);
      font-weight: 700;
      opacity: 1;
    }
    .home-toc-child.is-active:hover {
      color: var(--cyber-cyan);
      opacity: 1;
    }
    .home-toc-child .toc-child-nr {
      color: var(--cyber-cyan);
      font-weight: 800;
      margin-right: 0.3em;
    }
    .home-hub-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* Schnellstart / Zuletzt gelernt Chips im Lernfortschritt-Widget */
    .home-progress-chips {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 4px 0 2px;
    }
    .home-progress-chips-label {
      font-family: var(--font-mono);
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-top: 6px;
      margin-bottom: 2px;
      padding-left: 2px;
    }
    .home-progress-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 6px 10px;
      background: var(--surface-subtle, rgba(255, 255, 255, 0.03));
      border: 1px solid var(--color-border);
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      transition: all 0.18s ease;
      font-family: var(--font-sans);
      text-decoration: none;
      width: 100%;
      box-sizing: border-box;
    }
    .home-progress-chip:hover {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      transform: translateX(2px);
    }
    .home-progress-chip-main {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
      flex: 1 1 auto;
    }
    .home-progress-chip-idx {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      color: var(--cyber-cyan);
      flex-shrink: 0;
    }
    .home-progress-chip-title {
      font-size: var(--ui-btn-font-size);
      font-weight: 600;
      color: var(--color-text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .home-progress-chip-action {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 700;
      color: var(--color-text-muted);
      flex-shrink: 0;
    }
    .home-progress-chip:hover .home-progress-chip-action {
      color: var(--cyber-cyan);
    }

    .home-hub-placeholder {
      display: none;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-size: 9.5pt;
      line-height: 1.5;
      box-sizing: border-box;
    }
    .home-hub-placeholder.is-visible {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      gap: 0;
    }
    .home-hub-placeholder-text {
      display: none;
    }
    .home-hub-placeholder-arrow {
      display: none;
    }
    .home-hub-photo-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    .home-hub-photo-btn {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      color: inherit;
      font: inherit;
      text-align: inherit;
    }
    .home-hub-photo-btn:focus-visible {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: -2px;
    }
    .home-hub-placeholder-photo {
      display: block;
      width: 100%;
      flex: 1 1 0;
      min-height: 0;
      height: 0;
      object-fit: cover;
      object-position: center 35%;
      border-radius: 0;
      border: none;
      pointer-events: none;
    }
    .home-hub-fundstueck {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      width: 100%;
      box-sizing: border-box;
      padding: 14px 16px 14px;
      background: rgba(8, 16, 28, 0.42);
      backdrop-filter: blur(12px) saturate(1.15);
      -webkit-backdrop-filter: blur(12px) saturate(1.15);
      border-top: 1px solid rgba(148, 163, 184, 0.28);
      color: #f8fafc;
      text-align: center;
      pointer-events: auto;
      cursor: pointer;
    }
    .home-hub-fundstueck-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #67e8f9;
      margin-bottom: 0;
    }
    .home-hub-fundstueck-label::after {
      content: '';
      display: block;
      width: min(88%, 36em);
      height: 1px;
      margin: 8px auto 10px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(103, 232, 249, 0.25) 18%,
        rgba(103, 232, 249, 0.95) 50%,
        rgba(103, 232, 249, 0.25) 82%,
        transparent 100%
      );
      transform: scaleX(0);
      transform-origin: center;
      animation: sprachsnackLineIn 0.7s ease-out 0.25s forwards,
                 sprachsnackLinePulse 2.8s ease-in-out 1.1s infinite;
    }
    @keyframes sprachsnackLineIn {
      from { transform: scaleX(0); opacity: 0.4; }
      to { transform: scaleX(1); opacity: 1; }
    }
    @keyframes sprachsnackLinePulse {
      0%, 100% { opacity: 0.55; filter: brightness(1); }
      50% { opacity: 1; filter: brightness(1.35); }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-hub-fundstueck-label::after {
        transform: none;
        animation: none;
        opacity: 1;
        background: rgba(103, 232, 249, 0.65);
      }
    }
    .home-hub-fundstueck-word {
      font-family: var(--font-sans);
      font-size: clamp(15px, 2.1vw, 20px);
      font-weight: 700;
      line-height: 1.3;
      color: #fff;
      margin-bottom: 4px;
    }
    .home-hub-fundstueck-meaning {
      font-family: var(--font-sans);
      font-size: 12.5px;
      line-height: 1.45;
      color: rgba(248, 250, 252, 0.9);
    }
    .home-hub:not(.is-searching) .home-hub-main > .hub-card {
      display: none;
    }
    .home-hub:not(.is-searching) .home-hub-main > .hub-card.is-active {
      display: flex;
    }
    /* Kurze Listen: Kasten mindestens so hoch wie die Modul-Leiste; lange Listen (Verben) wachsen weiter.
       min-width 801: iPad 11 Pro Hochkant (~834) und ≥801 Desktop-Home; ≤800 bleibt Tablet-Stack. */
    @media (min-width: 801px) {
      .home-hub:not(:has(#home-hub-placeholder.is-visible)) .home-hub-main {
        min-height: var(--home-toc-h, 0);
        display: flex;
        flex-direction: column;
      }
      .home-hub:not(:has(#home-hub-placeholder.is-visible)) .home-hub-main > .hub-card.is-active {
        flex: 1 1 auto;
        min-height: var(--home-toc-h, 0);
        align-self: stretch;
      }
    }
    .home-hub:not(.is-searching) .hub-card .haupt-item {
      display: none !important;
    }
    .home-hub:not(.is-searching) .hub-card .haupt-item.is-toc-active {
      display: block !important;
    }
    /* Unterüberschriften (Verben usw.) rechts ausblenden – Auswahl steht links */
    .home-hub .hub-card .haupt-header {
      display: none;
    }
    .home-hub .hub-section-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--cyber-pink);
      padding: 12px 14px 4px;
      /* bündig mit dem Kapiteltitel (nach Nr. wie „01.“) */
      padding-left: calc(14px + 5.5rem + 0.6rem);
      margin: 0;
    }
    .home-hub .hub-section-label:first-child {
      padding-top: 4px;
    }
    .home-hub.is-searching .hub-card .haupt-item {
      display: block !important;
    }
    .home-hub.is-searching .hub-section-label,
    .home-hub.is-searching .semantik-map,
    .home-hub.is-searching .wortschatz-map,
    .home-hub.is-searching .phon-map,
    .home-hub.is-searching .phon-map-explain,
    .home-hub.is-searching .syntax-map,
    .home-hub.is-searching .syntax-map-explain,
    .home-hub.is-searching .rechtschreibung-map,
    .home-hub.is-searching .rechtschreibung-map-explain,
    .home-hub.is-searching .morphologie-map,
    .home-hub.is-searching .sprachgeschichte-map,
    .home-hub.is-searching .schriftverkehr-map,
    .home-hub.is-searching .brd-hub-map,
    .home-hub.is-searching .niveau-map {
      display: none;
    }
    /* Hub/Überblick organigrams: no wrapper chrome (page .info-box is the
       single enclosing frame). Keep spacing; cyan *-map-col Säulen + *-map-root
       title node stay framed. */
    .semantik-map,
    .wortschatz-map,
    .phon-map,
    .syntax-map,
    .rechtschreibung-map,
    .morphologie-map,
    .sprachgeschichte-map,
    .schriftverkehr-map,
    .brd-hub-map,
    .niveau-map {
      margin: 4px 8px 12px;
      padding: 16px 14px 14px;
      border: none;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }
    .phon-map {
      margin: 0 0 14px;
    }
    .semantik-map-root,
    .wortschatz-map-root,
    .phon-map-root,
    .syntax-map-root,
    .rechtschreibung-map-root,
    .morphologie-map-root,
    .sprachgeschichte-map-root,
    .schriftverkehr-map-root,
    .brd-hub-map-root,
    .niveau-map-root {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
      padding: 8px 16px;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffffff;
      text-align: center;
      background: var(--cyber-cyan);
      border: 1px solid var(--cyber-cyan);
      border-radius: 4px;
      box-sizing: border-box;
      line-height: 1.3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .semantik-map-root-gloss,
    .wortschatz-map-root-gloss,
    .phon-map-root-gloss,
    .syntax-map-root-gloss,
    .rechtschreibung-map-root-gloss,
    .morphologie-map-root-gloss,
    .sprachgeschichte-map-root-gloss,
    .schriftverkehr-map-root-gloss,
    .brd-hub-map-root-gloss,
    .niveau-map-root-gloss {
      display: block;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.35;
      margin: 0;
    }
    .semantik-map-stem,
    .wortschatz-map-stem,
    .phon-map-stem,
    .syntax-map-stem,
    .rechtschreibung-map-stem,
    .morphologie-map-stem,
    .sprachgeschichte-map-stem,
    .schriftverkehr-map-stem,
    .brd-hub-map-stem,
    .niveau-map-stem {
      width: 1px;
      height: 12px;
      margin: 8px auto 0;
      background: var(--cyber-cyan);
    }
    .semantik-map-rail,
    .wortschatz-map-rail,
    .phon-map-rail,
    .syntax-map-rail,
    .rechtschreibung-map-rail,
    .morphologie-map-rail,
    .sprachgeschichte-map-rail,
    .schriftverkehr-map-rail,
    .brd-hub-map-rail,
    .niveau-map-rail {
      height: 1px;
      background: var(--cyber-cyan);
    }
    .phon-map-rail,
    .schriftverkehr-map-rail {
      margin: 0 calc(25% - 4px);
    }
    .semantik-map-rail,
    .wortschatz-map-rail,
    .rechtschreibung-map-rail,
    .sprachgeschichte-map-rail,
    .brd-hub-map-rail {
      margin: 0 calc(100% / 6 - 4.67px);
    }
    .syntax-map-rail,
    .niveau-map-rail {
      margin: 0 calc(12.5% - 5.25px);
    }
    .morphologie-map-rail {
      margin: 0 calc(10% - 5.6px);
    }
    .semantik-map-cols,
    .wortschatz-map-cols,
    .phon-map-cols,
    .syntax-map-cols,
    .rechtschreibung-map-cols,
    .morphologie-map-cols,
    .sprachgeschichte-map-cols,
    .schriftverkehr-map-cols,
    .brd-hub-map-cols,
    .niveau-map-cols {
      display: grid;
      gap: 12px 14px;
      margin-top: 0;
      padding-top: 12px;
      position: relative;
    }
    .semantik-map-cols,
    .wortschatz-map-cols,
    .rechtschreibung-map-cols,
    .sprachgeschichte-map-cols,
    .brd-hub-map-cols {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .syntax-map-cols,
    .niveau-map-cols {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .phon-map-cols,
    .schriftverkehr-map-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
    }
    .morphologie-map-cols {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .semantik-map-col,
    .wortschatz-map-col,
    .phon-map-col,
    .syntax-map-col,
    .rechtschreibung-map-col,
    .morphologie-map-col,
    .sprachgeschichte-map-col,
    .schriftverkehr-map-col,
    .brd-hub-map-col,
    .niveau-map-col {
      display: flex;
      flex-direction: column;
      padding: 0;
      text-align: center;
      min-width: 0;
      overflow: visible;
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-radius: 6px;
      box-sizing: border-box;
    }
    .semantik-map-col::before,
    .wortschatz-map-col::before,
    .phon-map-col::before,
    .syntax-map-col::before,
    .rechtschreibung-map-col::before,
    .morphologie-map-col::before,
    .sprachgeschichte-map-col::before,
    .schriftverkehr-map-col::before,
    .brd-hub-map-col::before,
    .niveau-map-col::before {
      content: '';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 13px;
      background: var(--cyber-cyan);
      pointer-events: none;
    }
    .semantik-map-col-h,
    .wortschatz-map-col-h,
    .phon-map-col-h,
    .syntax-map-col-h,
    .rechtschreibung-map-col-h,
    .morphologie-map-col-h,
    .sprachgeschichte-map-col-h,
    .schriftverkehr-map-col-h,
    .brd-hub-map-col-h,
    .niveau-map-col-h {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: 100%;
      margin: 0;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-align: center;
      color: #ffffff;
      background: var(--cyber-cyan);
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 10px 10px 9px;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
      cursor: default;
      line-height: 1.3;
      transition: background 0.15s, color 0.15s, filter 0.15s;
    }
    button.semantik-map-col-h,
    button.wortschatz-map-col-h,
    button.phon-map-col-h,
    button.syntax-map-col-h,
    button.rechtschreibung-map-col-h,
    button.morphologie-map-col-h,
    button.sprachgeschichte-map-col-h,
    button.schriftverkehr-map-col-h,
    button.brd-hub-map-col-h,
    button.niveau-map-col-h {
      cursor: pointer;
    }
    button.semantik-map-col-h:hover,
    button.wortschatz-map-col-h:hover,
    button.phon-map-col-h:hover,
    button.syntax-map-col-h:hover,
    button.rechtschreibung-map-col-h:hover,
    button.morphologie-map-col-h:hover,
    button.sprachgeschichte-map-col-h:hover,
    button.schriftverkehr-map-col-h:hover,
    button.brd-hub-map-col-h:hover,
    button.niveau-map-col-h:hover,
    button.semantik-map-col-h:focus-visible,
    button.wortschatz-map-col-h:focus-visible,
    button.phon-map-col-h:focus-visible,
    button.syntax-map-col-h:focus-visible,
    button.rechtschreibung-map-col-h:focus-visible,
    button.morphologie-map-col-h:focus-visible,
    button.sprachgeschichte-map-col-h:focus-visible,
    button.schriftverkehr-map-col-h:focus-visible,
    button.brd-hub-map-col-h:focus-visible,
    button.niveau-map-col-h:focus-visible {
      color: #ffffff;
      background: var(--cyber-cyan);
      filter: brightness(1.12);
      outline: none;
    }
    .semantik-map-gloss,
    .wortschatz-map-gloss,
    .phon-map-gloss,
    .syntax-map-gloss,
    .rechtschreibung-map-gloss,
    .morphologie-map-gloss,
    .sprachgeschichte-map-gloss,
    .schriftverkehr-map-gloss,
    .brd-hub-map-gloss,
    .niveau-map-gloss {
      display: block;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      line-height: 1.35;
    }
    .phon-map-branch {
      margin: 0;
      padding: 10px;
      border-top: 1px solid var(--color-border);
      text-align: center;
    }
    .phon-map-branch:first-of-type {
      border-top: none;
    }
    .phon-map-sub-h {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 100%;
      margin: 0 0 8px;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-align: center;
      color: var(--color-text-strong);
      background: var(--surface-subtle);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 6px 10px;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
      cursor: default;
      line-height: 1.3;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    button.phon-map-sub-h {
      cursor: pointer;
    }
    button.phon-map-sub-h:hover,
    button.phon-map-sub-h:focus-visible {
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      outline: none;
    }
    .phon-map-sub-gloss {
      display: block;
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: var(--color-text-muted);
      margin: 0;
      line-height: 1.35;
    }
    .semantik-map-list,
    .wortschatz-map-list,
    .phon-map-list,
    .syntax-map-list,
    .rechtschreibung-map-list,
    .morphologie-map-list,
    .sprachgeschichte-map-list,
    .schriftverkehr-map-list,
    .brd-hub-map-list,
    .niveau-map-list {
      list-style: none;
      margin: 0;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
      width: 100%;
      box-sizing: border-box;
    }
    .phon-map-list {
      padding: 0;
    }
    .semantik-map-list li,
    .wortschatz-map-list li,
    .phon-map-list li,
    .syntax-map-list li,
    .rechtschreibung-map-list li,
    .morphologie-map-list li,
    .sprachgeschichte-map-list li,
    .schriftverkehr-map-list li,
    .brd-hub-map-list li,
    .niveau-map-list li {
      width: 100%;
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.4;
      color: var(--color-text);
    }
    .semantik-map-list a,
    .semantik-map-list button.semantik-map-link,
    .semantik-map-list .semantik-map-plain,
    .wortschatz-map-list a,
    .wortschatz-map-list button.wortschatz-map-link,
    .wortschatz-map-list .wortschatz-map-plain,
    .phon-map-list button.phon-map-link,
    .phon-map-list .phon-map-plain,
    .syntax-map-list button.syntax-map-link,
    .rechtschreibung-map-list button.rechtschreibung-map-link,
    .phon-map-foot-body button.phon-map-link,
    .phon-map-foot-body .phon-map-plain,
    .syntax-map-foot-body button.syntax-map-link,
    .syntax-map-foot-body .syntax-map-plain,
    .rechtschreibung-map-foot-body button.rechtschreibung-map-link,
    .rechtschreibung-map-foot-body .rechtschreibung-map-plain,
    .wortschatz-map-foot-body button.wortschatz-map-link,
    .wortschatz-map-foot-body .wortschatz-map-plain,
    .morphologie-map-list button.morphologie-map-link,
    .sprachgeschichte-map-list button.sprachgeschichte-map-link,
    .schriftverkehr-map-list button.schriftverkehr-map-link,
    .brd-hub-map-list button.brd-hub-map-link,
    .niveau-map-list button.niveau-map-link,
    .morphologie-map-foot-body button.morphologie-map-link,
    .sprachgeschichte-map-foot-body button.sprachgeschichte-map-link,
    .schriftverkehr-map-foot-body button.schriftverkehr-map-link,
    .brd-hub-map-foot-body button.brd-hub-map-link,
    .niveau-map-foot-body button.niveau-map-link {
      font: inherit;
      font-weight: 600;
      color: var(--color-text-strong);
      text-decoration: none;
      background: var(--surface-row);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 8px 10px;
      cursor: pointer;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 100%;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      line-height: 1.35;
    }
    .semantik-map-list a,
    .semantik-map-list button.semantik-map-link,
    .semantik-map-list .semantik-map-plain,
    .wortschatz-map-list a,
    .wortschatz-map-list button.wortschatz-map-link,
    .wortschatz-map-list .wortschatz-map-plain,
    .phon-map-list button.phon-map-link,
    .phon-map-list .phon-map-plain,
    .syntax-map-list button.syntax-map-link,
    .rechtschreibung-map-list button.rechtschreibung-map-link,
    .morphologie-map-list button.morphologie-map-link,
    .sprachgeschichte-map-list button.sprachgeschichte-map-link,
    .schriftverkehr-map-list button.schriftverkehr-map-link,
    .brd-hub-map-list button.brd-hub-map-link,
    .niveau-map-list button.niveau-map-link {
      display: flex;
      width: 100%;
    }
    .semantik-map-list .semantik-map-plain,
    .wortschatz-map-list .wortschatz-map-plain,
    .phon-map-list .phon-map-plain,
    .phon-map-foot-body .phon-map-plain,
    .syntax-map-foot-body .syntax-map-plain,
    .rechtschreibung-map-foot-body .rechtschreibung-map-plain,
    .wortschatz-map-foot-body .wortschatz-map-plain {
      color: var(--color-text-muted);
      font-weight: 600;
      background: var(--surface-subtle);
      cursor: default;
    }
    .semantik-map-list a:hover,
    .semantik-map-list button.semantik-map-link:hover,
    .wortschatz-map-list a:hover,
    .wortschatz-map-list button.wortschatz-map-link:hover,
    .phon-map-list button.phon-map-link:hover,
    .syntax-map-list button.syntax-map-link:hover,
    .rechtschreibung-map-list button.rechtschreibung-map-link:hover,
    .phon-map-foot-body button.phon-map-link:hover,
    .syntax-map-foot-body button.syntax-map-link:hover,
    .rechtschreibung-map-foot-body button.rechtschreibung-map-link:hover,
    .wortschatz-map-foot-body button.wortschatz-map-link:hover,
    .morphologie-map-list button.morphologie-map-link:hover,
    .sprachgeschichte-map-list button.sprachgeschichte-map-link:hover,
    .schriftverkehr-map-list button.schriftverkehr-map-link:hover,
    .brd-hub-map-list button.brd-hub-map-link:hover,
    .niveau-map-list button.niveau-map-link:hover,
    .morphologie-map-foot-body button.morphologie-map-link:hover,
    .sprachgeschichte-map-foot-body button.sprachgeschichte-map-link:hover,
    .schriftverkehr-map-foot-body button.schriftverkehr-map-link:hover,
    .brd-hub-map-foot-body button.brd-hub-map-link:hover,
    .niveau-map-foot-body button.niveau-map-link:hover,
    .semantik-map-list a:focus-visible,
    .semantik-map-list button.semantik-map-link:focus-visible,
    .wortschatz-map-list a:focus-visible,
    .wortschatz-map-list button.wortschatz-map-link:focus-visible,
    .phon-map-list button.phon-map-link:focus-visible,
    .syntax-map-list button.syntax-map-link:focus-visible,
    .rechtschreibung-map-list button.rechtschreibung-map-link:focus-visible,
    .phon-map-foot-body button.phon-map-link:focus-visible,
    .syntax-map-foot-body button.syntax-map-link:focus-visible,
    .rechtschreibung-map-foot-body button.rechtschreibung-map-link:focus-visible,
    .wortschatz-map-foot-body button.wortschatz-map-link:focus-visible,
    .morphologie-map-list button.morphologie-map-link:focus-visible,
    .sprachgeschichte-map-list button.sprachgeschichte-map-link:focus-visible,
    .schriftverkehr-map-list button.schriftverkehr-map-link:focus-visible,
    .brd-hub-map-list button.brd-hub-map-link:focus-visible,
    .niveau-map-list button.niveau-map-link:focus-visible,
    .morphologie-map-foot-body button.morphologie-map-link:focus-visible,
    .sprachgeschichte-map-foot-body button.sprachgeschichte-map-link:focus-visible,
    .schriftverkehr-map-foot-body button.schriftverkehr-map-link:focus-visible,
    .brd-hub-map-foot-body button.brd-hub-map-link:focus-visible,
    .niveau-map-foot-body button.niveau-map-link:focus-visible {
      background: var(--cyber-cyan-dim);
      border-color: var(--cyber-cyan);
      outline: none;
    }
    .phon-map-list .phon-map-detail,
    .syntax-map-list .syntax-map-detail,
    .rechtschreibung-map-list .rechtschreibung-map-detail,
    .wortschatz-map-list .wortschatz-map-detail,
    .morphologie-map-list .morphologie-map-detail,
    .sprachgeschichte-map-list .sprachgeschichte-map-detail,
    .schriftverkehr-map-list .schriftverkehr-map-detail,
    .brd-hub-map-list .brd-hub-map-detail,
    .niveau-map-list .niveau-map-detail {
      display: block;
      font-size: 10px;
      font-weight: 400;
      color: var(--color-text-muted);
      line-height: 1.35;
      margin: 0;
      letter-spacing: 0;
      text-transform: none;
    }
    .phon-map-foot,
    .syntax-map-foot,
    .rechtschreibung-map-foot,
    .wortschatz-map-foot,
    .morphologie-map-foot,
    .sprachgeschichte-map-foot,
    .schriftverkehr-map-foot,
    .brd-hub-map-foot,
    .niveau-map-foot {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--color-border);
      display: grid;
      gap: 12px;
    }
    .phon-map-foot {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .syntax-map-foot,
    .rechtschreibung-map-foot,
    .wortschatz-map-foot,
    .morphologie-map-foot,
    .sprachgeschichte-map-foot,
    .schriftverkehr-map-foot,
    .brd-hub-map-foot,
    .niveau-map-foot {
      grid-template-columns: 1fr;
    }
    .phon-map-foot-h,
    .syntax-map-foot-h,
    .rechtschreibung-map-foot-h,
    .wortschatz-map-foot-h,
    .morphologie-map-foot-h,
    .sprachgeschichte-map-foot-h,
    .schriftverkehr-map-foot-h,
    .brd-hub-map-foot-h,
    .niveau-map-foot-h {
      display: block;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--color-text-strong);
      margin: 0 0 6px;
    }
    .phon-map-foot-body,
    .syntax-map-foot-body,
    .rechtschreibung-map-foot-body,
    .wortschatz-map-foot-body,
    .morphologie-map-foot-body,
    .sprachgeschichte-map-foot-body,
    .schriftverkehr-map-foot-body,
    .brd-hub-map-foot-body,
    .niveau-map-foot-body {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-text-muted);
    }
    .phon-map-foot-body button.phon-map-link,
    .phon-map-foot-body .phon-map-plain,
    .syntax-map-foot-body button.syntax-map-link,
    .syntax-map-foot-body .syntax-map-plain,
    .rechtschreibung-map-foot-body button.rechtschreibung-map-link,
    .rechtschreibung-map-foot-body .rechtschreibung-map-plain,
    .wortschatz-map-foot-body button.wortschatz-map-link,
    .wortschatz-map-foot-body .wortschatz-map-plain,
    .morphologie-map-foot-body button.morphologie-map-link,
    .sprachgeschichte-map-foot-body button.sprachgeschichte-map-link,
    .schriftverkehr-map-foot-body button.schriftverkehr-map-link,
    .brd-hub-map-foot-body button.brd-hub-map-link,
    .niveau-map-foot-body button.niveau-map-link {
      margin: 2px 2px 2px 0;
      display: inline-flex;
      flex-direction: row;
      width: auto;
      padding: 4px 9px;
    }
    @media (max-width: 720px) {
      .semantik-map-rail,
      .semantik-map-stem,
      .semantik-map-col::before,
      .semantik-map-cols::before,
      .wortschatz-map-rail,
      .wortschatz-map-stem,
      .wortschatz-map-col::before,
      .wortschatz-map-cols::before,
      .phon-map-rail,
      .phon-map-stem,
      .phon-map-col::before,
      .phon-map-cols::before,
      .syntax-map-rail,
      .syntax-map-stem,
      .syntax-map-col::before,
      .syntax-map-cols::before,
      .rechtschreibung-map-rail,
      .rechtschreibung-map-stem,
      .rechtschreibung-map-col::before,
      .rechtschreibung-map-cols::before,
      .morphologie-map-rail,
      .morphologie-map-stem,
      .morphologie-map-col::before,
      .morphologie-map-cols::before,
      .sprachgeschichte-map-rail,
      .sprachgeschichte-map-stem,
      .sprachgeschichte-map-col::before,
      .sprachgeschichte-map-cols::before,
      .schriftverkehr-map-rail,
      .schriftverkehr-map-stem,
      .schriftverkehr-map-col::before,
      .schriftverkehr-map-cols::before,
      .brd-hub-map-rail,
      .brd-hub-map-stem,
      .brd-hub-map-col::before,
      .brd-hub-map-cols::before,
      .niveau-map-rail,
      .niveau-map-stem,
      .niveau-map-col::before,
      .niveau-map-cols::before {
        display: none;
      }
      .semantik-map-cols,
      .wortschatz-map-cols,
      .phon-map-cols,
      .syntax-map-cols,
      .rechtschreibung-map-cols,
      .morphologie-map-cols,
      .sprachgeschichte-map-cols,
      .schriftverkehr-map-cols,
      .brd-hub-map-cols,
      .niveau-map-cols {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 10px;
      }
      .semantik-map-col,
      .wortschatz-map-col,
      .phon-map-col,
      .syntax-map-col,
      .rechtschreibung-map-col,
      .morphologie-map-col,
      .sprachgeschichte-map-col,
      .schriftverkehr-map-col,
      .brd-hub-map-col,
      .niveau-map-col {
        text-align: left;
      }
      .semantik-map-col-h,
      .wortschatz-map-col-h,
      .phon-map-col-h,
      .phon-map-sub-h,
      .syntax-map-col-h,
      .rechtschreibung-map-col-h,
      .morphologie-map-col-h,
      .sprachgeschichte-map-col-h,
      .schriftverkehr-map-col-h,
      .brd-hub-map-col-h,
      .niveau-map-col-h {
        align-items: flex-start;
        text-align: left;
      }
      .phon-map-branch {
        text-align: left;
      }
      .semantik-map-list a,
      .semantik-map-list button.semantik-map-link,
      .semantik-map-list .semantik-map-plain,
      .wortschatz-map-list a,
      .wortschatz-map-list button.wortschatz-map-link,
      .wortschatz-map-list .wortschatz-map-plain,
      .phon-map-list button.phon-map-link,
      .phon-map-list .phon-map-plain,
      .syntax-map-list button.syntax-map-link,
      .rechtschreibung-map-list button.rechtschreibung-map-link,
      .morphologie-map-list button.morphologie-map-link,
      .sprachgeschichte-map-list button.sprachgeschichte-map-link,
      .schriftverkehr-map-list button.schriftverkehr-map-link,
      .brd-hub-map-list button.brd-hub-map-link,
      .niveau-map-list button.niveau-map-link {
        align-items: flex-start;
        text-align: left;
      }
      .phon-map-foot {
        grid-template-columns: 1fr;
      }
    }
    .phon-map-explain {
      margin: 4px 0 0;
      padding: 0;
    }
    .phon-map-explain .sub-section-title {
      margin-top: 6px;
      margin-bottom: 8px;
    }
    .phon-map-explain .cheat-table {
      margin: 10px 0 12px;
    }
    .phon-map-explain .example-list {
      margin: 8px 0 10px;
    }
    .phon-map-explain .merk-box {
      margin: 10px 0;
    }
    .syntax-map-explain,
    .rechtschreibung-map-explain {
      margin: 2px 8px 14px;
      padding: 0 4px;
    }
    .syntax-map-explain .sub-section-title,
    .rechtschreibung-map-explain .sub-section-title {
      margin-top: 6px;
      margin-bottom: 8px;
    }
    .syntax-map-explain .cheat-table {
      margin: 10px 0 12px;
    }
    .syntax-map-explain .geschichte-prose,
    .rechtschreibung-map-explain .geschichte-prose {
      margin: 0 0 8px;
    }

    /* ===== Menükarte für Modul-Übersichten ===== */
    .overview-menu-card {
      margin: 10px 4px 18px;
      padding: 14px 16px 16px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background:
        linear-gradient(
          160deg,
          color-mix(in srgb, var(--cyber-cyan-dim) 40%, var(--bg-card)) 0%,
          var(--bg-card) 60%
        );
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
      box-sizing: border-box;
    }
    .overview-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--color-border);
    }
    .overview-menu-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 10pt;
      font-weight: 700;
      color: var(--color-text-strong);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .overview-menu-icon {
      color: var(--cyber-cyan);
      flex-shrink: 0;
    }
    .overview-menu-sub {
      font-size: 11px;
      color: var(--color-text-muted);
    }
    .overview-menu-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    @media (max-width: 860px) {
      .overview-menu-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .overview-menu-col {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: var(--surface-subtle);
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 9px;
    }
    .overview-menu-col-title {
      font-family: var(--font-mono);
      font-size: 8pt;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--cyber-cyan);
      margin-bottom: 4px;
      padding: 0 4px;
    }
    .overview-menu-col-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .overview-menu-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 6px 10px;
      font-family: var(--font-sans);
      font-size: 9.5pt;
      font-weight: 500;
      text-align: left;
      color: var(--color-text);
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-decoration: none;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
      line-height: 1.35;
    }
    .overview-menu-btn:hover {
      border-color: var(--cyber-cyan);
      background: color-mix(in srgb, var(--cyber-cyan-dim) 50%, var(--bg-card));
      color: var(--color-text-strong);
      transform: translateY(-1px);
    }
    .overview-menu-btn:focus-visible {
      outline: 2px solid var(--cyber-cyan);
      outline-offset: 1px;
    }
    .overview-menu-btn.is-active {
      background: var(--cyber-cyan) !important;
      color: #ffffff !important;
      border-color: var(--cyber-cyan) !important;
      font-weight: 700;
      cursor: default;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
      pointer-events: none;
      transform: none;
    }
    .overview-menu-btn:disabled,
    .overview-menu-btn.is-disabled {
      opacity: 0.52;
      cursor: not-allowed;
      background: var(--surface-subtle);
      border-color: var(--color-border);
      color: var(--color-text-muted);
      transform: none !important;
      box-shadow: none !important;
      pointer-events: none;
    }
    .overview-menu-btn:disabled:hover,
    .overview-menu-btn.is-disabled:hover {
      background: var(--surface-subtle) !important;
      border-color: var(--color-border) !important;
      color: var(--color-text-muted) !important;
      transform: none !important;
      box-shadow: none !important;
      cursor: not-allowed;
    }
    .overview-menu-btn:disabled .overview-menu-badge,
    .overview-menu-btn.is-disabled .overview-menu-badge {
      color: var(--color-text-muted);
      opacity: 0.8;
    }
    .overview-menu-hint {
      display: inline-block;
      font-size: 0.72rem;
      font-style: italic;
      opacity: 0.7;
      margin-left: 4px;
      font-weight: 400;
    }
    .overview-menu-badge {
      font-family: var(--font-mono);
      font-size: 8.5pt;
      font-weight: 700;
      color: var(--cyber-cyan);
      flex-shrink: 0;
    }
    .overview-menu-btn.is-active .overview-menu-badge {
      color: #ffffff !important;
      opacity: 0.95;
    }
    .overview-menu-label {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-hub.is-searching .home-toc-children {
      display: none !important;
    }
    .home-hub.is-searching .home-toc-group.is-open > .home-toc-btn {
      background: transparent;
      border-color: transparent;
      color: var(--cyber-pink);
    }
    .hub-card {
      background-color: var(--bg-card);
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 30%, var(--color-border));
      border-radius: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .hub-card:hover {
      transform: none;
      box-shadow: var(--glow-cyan);
    }
    .hub-card-header {
      display: none;
    }
    .hub-motif {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 72px;
      padding: 20px 18px;
      box-sizing: border-box;
      overflow: visible;
      font-family: var(--font-mono);
      border-bottom: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--cyber-cyan) 18%, transparent) 0%,
          transparent 42%,
          color-mix(in srgb, var(--cyber-cyan) 12%, transparent) 100%
        ),
        repeating-linear-gradient(
          -18deg,
          transparent 0 10px,
          color-mix(in srgb, var(--cyber-cyan) 14%, transparent) 10px 11px
        ),
        var(--surface-subtle);
    }
    .hub-motif .hub-title {
      position: relative;
      z-index: 1;
      margin: 0;
      padding-top: 4px;
      color: var(--cyber-cyan);
      line-height: 1;
    }
    .hub-motif-lead {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
    }
    /* Home right panel: Überblick entry — quiet pink accent, not a filled badge */
    .home-hub .hub-overview-link {
      font-family: var(--font-mono);
      font-size: 10pt;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--cyber-pink) 78%, var(--color-text-strong));
      margin: 0 0 12px;
      padding: 5px 10px 5px 9px;
      border: none;
      border-left: 2px solid color-mix(in srgb, var(--cyber-pink) 55%, transparent);
      border-radius: 0 3px 3px 0;
      background: color-mix(in srgb, var(--cyber-pink) 8%, transparent);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 6px;
      opacity: 1;
      line-height: 1.2;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      text-decoration: none;
      box-shadow: none;
    }
    .home-hub .hub-overview-link svg {
      display: block;
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: color-mix(in srgb, var(--cyber-pink) 70%, var(--color-text-strong));
      opacity: 0.85;
    }
    .home-hub .hub-overview-link:hover,
    .home-hub .hub-overview-link:focus-visible {
      color: var(--cyber-pink);
      background: color-mix(in srgb, var(--cyber-pink) 14%, transparent);
      border-left-color: var(--cyber-pink);
      outline: none;
    }
    /* Flex gap on .hub-card-body already separates Überblick from accordion/maps */
    .home-hub .hub-card-body > .hub-overview-link {
      margin-bottom: 0;
    }
    /* Hub Überblick as list-leading row above chapters */
    .hub-motif .hub-idx {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      width: auto;
      margin: 0 0 0 auto;
      font-size: 26pt;
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1;
      color: var(--cyber-cyan);
      opacity: 0.38;
      text-align: right;
    }
    .hub-idx {
      font-family: var(--font-mono);
      font-size: 9.5pt;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin-bottom: 0;
      color: var(--cyber-cyan);
      flex: 0 0 4.2em;
      width: 4.2em;
    }
    .hub-title {
      font-family: var(--font-mono);
      font-size: 13pt;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--cyber-cyan);
      margin: 0;
    }
    .hub-meta {
      margin-top: 4px;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      color: var(--color-text-muted);
      letter-spacing: 0.03em;
    }
    .hub-card-body {
      padding: 8px 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    /* Dezenter Verlauf im unteren Freiraum der Hub-Karte */
    .home-hub .hub-card.is-active .hub-card-body {
      background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 42%,
        var(--cyber-cyan-dim) 100%
      );
    }
    .hub-card .nav-console {
      display: none;
    }
    .hub-card .search-input {
      font-size: 12px;
      padding: 8px 10px;
    }
    .hub-card .accordion-container {
      margin-top: 0;
      gap: 6px;
    }
    /* Flache Hub-Listen */
    .home-hub .hub-card-body > .accordion-container {
      display: block;
      column-count: 1;
      column-gap: 6px;
    }
    .home-hub .sub-chap-item {
      padding: 10px 14px;
      font-size: 10.5pt;
      border: none;
      border-radius: 4px;
      /* Opaque mix so contrast tools measure AA against card, not raw slate */
      background: color-mix(in srgb, rgb(148, 163, 184) 10%, var(--bg-card));
      color: var(--color-text-strong);
      break-inside: avoid;
      margin-bottom: 6px;
      width: 100%;
      box-sizing: border-box;
      justify-content: flex-start;
      text-align: left;
      /* Nr-Spalte + Titel (wie .toc-idx / .nav-seq), nicht „[01.01]Titel“ */
      gap: 0.55rem;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-hub .sub-chap-item {
      border: none;
      background: color-mix(in srgb, rgb(100, 116, 139) 8%, var(--bg-card));
      color: var(--color-text-strong);
    }
    .home-hub .sub-chap-item:last-child {
      margin-bottom: 0;
    }
    .home-hub .sub-chap-item:hover {
      border: none;
      background: var(--cyber-cyan-dim);
      transform: translateX(2px);
    }
    .home-hub .sub-chap-item::after {
      font-size: var(--ui-btn-font-size);
      opacity: 0.4;
      margin-left: auto;
      flex-shrink: 0;
    }
    /* Feste Nr-Spalte am linken Rand; Titel ab einheitlichem Einzug.
       7.4em ≈ [02.01.01] in 9.5pt mono + Luft (em vs. eigener font-size). */
    .home-hub .sub-chap-nr,
    .hub-card .sub-chap-nr {
      color: var(--cyber-cyan);
      font-weight: 800;
      font-size: 9.5pt;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      flex: 0 0 7.4em;
      width: 7.4em;
      min-width: 7.4em;
      max-width: 7.4em;
      margin-right: 0;
      text-align: left;
      white-space: nowrap;
      box-sizing: border-box;
      line-height: 1.2;
    }
    /* Morphologie, Syntax & Semantik: Gruppen immer sichtbar, Links spaltenweise */
    #mod-grammatik-morphologie .accordion-container,
    #mod-grammatik-syntax .accordion-container,
    #mod-semantik-hub .accordion-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      column-count: auto;
    }
    .home-hub .haupt-item {
      margin-bottom: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      break-inside: avoid;
      background: transparent;
    }
    .home-hub .haupt-item.open,
    .home-hub .haupt-item {
      border: none;
      box-shadow: none;
    }
    :is([data-theme="light"], [data-theme="sepia"]) .home-hub .haupt-item.open,
    :is([data-theme="light"], [data-theme="sepia"]) .home-hub .haupt-item {
      border: none;
    }
    .home-hub .haupt-header {
      font-size: 9.5pt;
      padding: 9px 12px;
      cursor: default;
      pointer-events: none;
      color: var(--cyber-cyan);
      background: var(--cyber-cyan-dim);
    }
    .home-hub .haupt-header:hover {
      background: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
    }
    .home-hub .haupt-header::after {
      content: none;
    }
    .home-hub .haupt-item.open .haupt-header {
      background: var(--cyber-cyan-dim);
    }
    .home-hub .haupt-body {
      display: block !important;
      column-count: 1;
      column-gap: 6px;
      padding: 10px;
      animation: none;
      border-top: none;
    }
    .hub-card .haupt-header {
      font-size: 9.5pt;
      padding: 9px 12px;
    }
    .hub-card .sub-chap-item {
      padding: 10px 14px;
      font-size: 10pt;
    }
    .hub-card .haupt-body {
      padding: 10px;
    }
    .hub-card .haupt-body .accordion-container {
      padding-left: 0;
    }

    /* Plattformweite Querverweise-Box am unteren Ende der Hub-Karten */
    .home-hub .hub-crosslinks,
    .hub-crosslinks {
      margin-top: auto;
      margin-bottom: 0;
      font-size: 12px;
      line-height: 1.55;
      border-radius: 4px;
      padding: 10px 14px;
      background: var(--bg-card);
      border: 1px solid var(--cyber-cyan);
      border-left: 5px solid var(--cyber-cyan);
      box-sizing: border-box;
    }
    .home-hub .hub-crosslinks strong:first-of-type,
    .hub-crosslinks strong:first-of-type {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 6px;
      color: var(--cyber-cyan);
    }
    .home-hub .hub-crosslinks a,
    .hub-crosslinks a {
      color: var(--color-link, var(--cyber-cyan));
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 600;
      transition: color 0.15s ease;
    }
    .home-hub .hub-crosslinks a:hover,
    .hub-crosslinks a:hover {
      color: var(--color-link-hover, #38bdf8);
    }

    /* Zweite Menükarte unter der Kapitel-Navigation (z. B. Konjugation Zeitformen) —
       sticky wie .page-section-nav: unter HUD + Nav-Console + Kapitel-Chrome */
    .module-section > .chapter-nav.chap-subnav-card {
      position: sticky;
      top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px));
      /* above letter bar (997) — same stack tier as .page-section-nav */
      z-index: 998;
      margin-top: 0;
      margin-bottom: 16px;
      background: var(--nav-panel-bg);
      box-shadow:
        0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app));
      border-bottom: 1px solid var(--sticky-bar-edge);
    }

    /* When a module has both .chap-subnav-card and .page-section-nav, shift .page-section-nav down so it doesn't overlap .chap-subnav-card */
    .module-section > .chapter-nav.chap-subnav-card ~ .view-screen .page-section-nav,
    .module-section > .chapter-nav.chap-subnav-card ~ .page-section-nav {
      top: calc(var(--hud-height, 44px) + var(--sticky-stack-gap, 8px) + var(--card-deck-console-h, 52px) + var(--sticky-stack-gap, 8px) + 54px + var(--sticky-stack-gap, 8px));
    }

    /* Synonymie: Zweite Menükarte (Kategorie) in View 03 klebt unter #synonymie-subnav */
    #nuancen-paare-cat-nav {
      position: sticky;
      top: calc(
        var(--hud-height, 44px)
        + var(--sticky-stack-gap, 8px)
        + var(--card-deck-console-h, 52px)
        + var(--sticky-stack-gap, 8px)
        + 46px
        + var(--sticky-stack-gap, 8px)
      );
      z-index: 998;
      margin-top: 0;
      margin-bottom: 16px;
      background: var(--nav-panel-bg);
      box-shadow:
        0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app));
      border-bottom: 1px solid var(--sticky-bar-edge);
    }

    :is([data-theme="light"], [data-theme="sepia"]) .module-section > .chapter-nav.chap-subnav-card,
    :is([data-theme="light"], [data-theme="sepia"]) #nuancen-paare-cat-nav {
      box-shadow:
        0 calc(-1 * var(--sticky-stack-gap, 8px)) 0 0 var(--sticky-gap-fill, var(--bg-app)),
        0 var(--sticky-stack-gap, 8px) 0 0 var(--sticky-gap-fill, var(--bg-app));
    }

    /* Nuancen-Paare: 2-reihiges (3-spaltiges) Kategorien-Grid und dedizierte Suchleiste */
    #nuancen-paare-cat-chips {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 5px;
      width: 100%;
    }
    #nuancen-paare-cat-chips::after,
    #nuancen-paare-cat-nav .chapter-nav-pills::after {
      content: none !important;
      display: none !important;
    }
    .nuancen-search-bar-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      min-height: 28px;
    }
    .nuancen-search-input-box {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      height: 28px;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .nuancen-search-input-box:focus-within {
      border-color: var(--cyber-cyan);
      box-shadow: 0 0 0 2px var(--cyber-cyan-dim);
    }
    .nuancen-search-icon {
      width: 13px;
      height: 13px;
      color: var(--color-text-muted);
      margin-left: 8px;
      margin-right: 6px;
      flex-shrink: 0;
      pointer-events: none;
    }
    .nuancen-search-field {
      flex: 1;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-sans);
      font-size: 11.5px;
      color: var(--color-text);
      padding: 0 24px 0 0;
    }
    .nuancen-search-field::placeholder {
      color: var(--color-text-muted);
      opacity: 0.75;
    }
    .nuancen-search-clear-btn {
      position: absolute;
      right: 4px;
      display: none;
      background: transparent;
      border: none;
      color: var(--color-text-muted);
      font-size: 12px;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 3px;
      line-height: 1;
    }
    .nuancen-search-clear-btn:hover {
      color: var(--cyber-pink);
    }
    .nuancen-count-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 10px;
      height: 28px;
      box-sizing: border-box;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--color-text-muted);
      white-space: nowrap;
      margin-left: auto;
    }
    .nuancen-count-num {
      font-weight: 700;
      color: var(--cyber-cyan);
    }
    .nuancen-search-bar-wrap .alpha-scroll-top-btn {
      width: 28px;
      height: 28px;
      min-height: 28px;
      max-height: 28px;
      border-radius: 4px;
      font-size: 11pt;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .nuancen-search-bar-wrap .alpha-scroll-top-btn:hover {
      border-color: var(--cyber-cyan);
      box-shadow: 0 0 6px var(--cyber-cyan-dim);
    }

    /* Menükarten-Pills (Kapitel-Chrome + chap-subnav): 4 gleiche Spalten, volle Breite.
       Ausnahmen: #redemittel-sit-subnav (eigenes .rede-chip-block-Grid), #wortfelder-fields-bar (Ansicht/Thema/Gebiet). */
    .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      width: 100%;
      min-width: 0;
      overflow-x: visible;
      flex-wrap: unset;
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill {
      width: 100%;
      max-width: none;
      min-width: 0;
    }
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill {
      white-space: nowrap;
      overflow-wrap: normal;
      height: 26px;
      min-height: 26px;
      padding: 0 10px;
      line-height: 1;
    }
    /* Fokus-Karten (chap-subnav): Nr am linken Chip-Rand — padding-Override oben
       darf .nav-seq nicht zu „01Titel“ zusammenquetschen. */
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill.nav-seq,
    .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill.nav-seq {
      position: relative;
      justify-content: center;
      padding-left: 1.85em;
      padding-right: 1.85em;
    }
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill.nav-seq .nav-seq-nr,
    .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill.nav-seq .nav-seq-nr {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
      opacity: 0.9;
    }
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill.nav-seq .nav-seq-label,
    .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill.nav-seq .nav-seq-label {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    /* Wegweiser Subnav: 6 Tabs sauber austariert (01 bis 06) */
    #auf-ein-wort-subnav .chapter-nav-pills {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (min-width: 1200px) {
      #auf-ein-wort-subnav .chapter-nav-pills {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      #auf-ein-wort-subnav .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 420px) {
      #auf-ein-wort-subnav .chapter-nav-pills {
        grid-template-columns: 1fr;
      }
    }
    #auf-ein-wort-subnav .chapter-nav-pills::after {
      display: none !important;
    }
    #auf-ein-wort-subnav .chapter-nav-pill.nav-seq {
      padding-left: 2.1em;
      padding-right: 2.1em;
      font-size: clamp(0.72rem, 2.4vw, var(--ui-btn-font-size));
      user-select: none;
      -webkit-user-select: none;
    }
    @media (max-width: 640px) {
      #auf-ein-wort-subnav .chapter-nav-pill.nav-seq {
        padding-left: 1.9em;
        padding-right: 1.9em;
      }
    }
    /* Reststreifen: ein durchgehender Balken über ALLE freien Spalten der letzten Zeile.
       `auto / -1` spannt nur 1 Track — daher span N / -1 via :has-Rest. Bei Vielfachem von 4: verstecken (kein Phantom). */
    .module-section > .chapter-nav[data-chapter-chrome="top"]:not(.is-row-aligned) .chapter-nav-pills::after,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar):not(#nuancen-paare-cat-nav):not(.is-row-aligned) .chapter-nav-pills::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills::after {
      content: '';
      pointer-events: none;
      align-self: stretch;
      justify-self: stretch;
      width: 100%;
      min-width: 0;
      min-height: 26px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), color-mix(in srgb, var(--cyber-pink-dim) 55%, transparent));
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"]:not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar):not(#nuancen-paare-cat-nav):not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after {
      grid-column: span 3 / -1;
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"]:not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar):not(#nuancen-paare-cat-nav):not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after {
      grid-column: span 2 / -1;
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"]:not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar):not(#nuancen-paare-cat-nav):not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after {
      grid-column: span 1 / -1;
    }
    .module-section > .chapter-nav[data-chapter-chrome="top"]:not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n):last-child)::after,
    .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar):not(#nuancen-paare-cat-nav):not(.is-row-aligned) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-menu-sort-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n):last-child)::after,
    #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n):last-child)::after {
      content: none;
      display: none;
    }
    /* Konjugation: 6 Zeitformen-Tabs in einer sauberen 6er-Reihe */
    #verb-konjugation-tense-nav .chapter-nav-pills {
      display: grid !important;
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      gap: 6px !important;
      width: 100% !important;
    }
    #verb-konjugation-tense-nav .chapter-nav-pills::after {
      content: none !important;
      display: none !important;
    }
    #verb-konjugation-tense-nav .chapter-nav-pill {
      width: 100% !important;
      text-align: center !important;
      white-space: nowrap !important;
      height: 26px !important;
      min-height: 26px !important;
      padding: 0 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    /* Nr + Label im Fluss (nicht absolut) — sonst klebt z. B. „04Plusquamperfekt“ */
    #verb-konjugation-tense-nav .chapter-nav-pill.nav-seq {
      gap: 0.4em !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
      justify-content: center !important;
    }
    #verb-konjugation-tense-nav .chapter-nav-pill.nav-seq .nav-seq-nr {
      position: static !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      flex-shrink: 0 !important;
    }
    #verb-konjugation-tense-nav .chapter-nav-pill.nav-seq .nav-seq-label {
      min-width: 0 !important;
    }
    @media (max-width: 768px) {
      #verb-konjugation-tense-nav .chapter-nav-pills {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    /* Verben-Präfixe Subnav (Fokus): 2 Pills + Farbverlauf wie andere 2er-Menükarten */
    #verb-praefixe-subnav .chapter-nav-pills {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    #verb-praefixe-subnav .chapter-nav-pills::after {
      content: '' !important;
      display: block !important;
      grid-column: 3 / -1 !important;
      grid-row: 1 !important;
      height: 26px !important;
      min-height: 26px !important;
      align-self: stretch !important;
      background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan-dim) 55%, transparent), color-mix(in srgb, var(--cyber-pink-dim) 55%, transparent)) !important;
      border: none !important;
      pointer-events: none !important;
    }

    /* Startseite einspaltig / TOC-Wrap ≤920 — deckt iPad Air/11 Portrait (~834) ab; Phone ≤640 via phone.css */
    @media (max-width: 920px) {
      .home-hub-placeholder-arrow {
        transform: rotate(90deg);
      }
      .home-hub {
        grid-template-columns: 1fr;
      }
      .home-hub:has(#home-hub-placeholder.is-visible) {
        align-items: start;
      }
      .home-hub:has(#home-hub-placeholder.is-visible) .home-hub-main {
        overflow: visible;
      }
      .home-hub-placeholder.is-visible {
        height: auto;
      }
      .home-hub-photo-wrap {
        flex: none;
        height: auto;
        min-height: 220px;
      }
      .home-hub-photo-btn {
        flex: none;
        height: auto;
        min-height: 220px;
      }
      .home-hub-placeholder-photo {
        flex: none;
        height: auto;
        min-height: 220px;
        max-height: 280px;
      }
      .home-hub-fundstueck {
        padding: 12px 14px;
      }
      .home-toc {
        /* Static: sticky + ~100vh max-height ate the iPad viewport and hid the hub list. */
        position: static;
        z-index: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
      }
      .home-toc-group.is-open {
        flex: 1 1 100%;
      }
      .home-toc-section {
        flex: 1 1 100%;
        width: 100%;
      }
      .home-toc-group {
        flex: 1 1 auto;
        min-width: 7.5rem;
      }
      .home-toc-head {
        width: 100%;
        margin-bottom: 2px;
        padding: 0 12px;
        padding-left: 3px;
      }
      .home-toc-zuletzt-panel {
        left: 0;
        right: auto;
        max-width: min(280px, calc(100vw - 48px));
      }
      .home-toc-footer {
        width: 100%;
        margin-top: 16px;
      }
      .home-toc-btn {
        flex: 1 1 auto;
        min-width: 7.5rem;
      }
    }

    /* Stacked Layout for Startseite (legacy fallback) */
    .home-stacked-layout {
      display: flex;
      flex-direction: column;
      gap: 40px;
      margin-top: 20px;
    }
    .home-stacked-section {
      width: 100%;
    }

    /* Sub-chapter navigation items */
    .sub-chap-item {
      padding: 12px 20px;
      font-family: var(--font-mono);
      font-size: 9.5pt;
      font-weight: 700;
      color: var(--color-text-strong);
      background-color: var(--surface-subtle);
      border-left: none;
      border-bottom: 1px solid var(--color-border);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
      transition: all 0.2s;
    }
    .sub-chap-item:last-child {
      border-bottom: none;
    }
    .sub-chap-item:hover {
      background-color: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      transform: translateX(3px);
    }
    .sub-chap-item::after {
      content: "[→]";
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      color: var(--cyber-cyan);
    }

    /* Chapter page styling */

    /* Breadcrumbs in Headers */
    .breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px;
      font-family: var(--font-mono);
      font-size: 10pt;
      font-weight: 700;
      color: var(--color-text-muted);
    }
    .breadcrumbs a {
      color: var(--cyber-cyan);
      text-decoration: none;
      transition: all 0.2s;
    }
    .breadcrumbs a:hover {
      color: var(--cyber-pink);
      text-shadow: var(--glow-pink);
    }
    .breadcrumbs .sep {
      color: var(--cyber-cyan);
      font-size: 11pt;
      font-weight: 700;
      line-height: 1;
      opacity: 0.95;
      user-select: none;
      margin: 0 4px;
      vertical-align: middle;
    }
    .breadcrumbs .module-label {
      color: var(--color-text-strong);
      border: none;
      background: none;
      padding: 0;
      margin: 0;
    }
    .breadcrumbs a.bc-home {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      min-height: 22px;
      padding: 1px 0;
      margin: 0;
      line-height: 0;
      color: var(--cyber-cyan);
      touch-action: manipulation;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .breadcrumbs a.bc-home svg,
    .breadcrumbs a.bc-home svg * {
      pointer-events: none !important;
      display: block;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .breadcrumbs a.bc-home:hover {
      color: var(--cyber-pink);
    }
    .breadcrumbs button.bc-overview {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      min-height: 22px;
      padding: 1px 0;
      margin: 0;
      border: none;
      border-radius: 3px;
      background: transparent;
      line-height: 0;
      color: var(--cyber-cyan);
      cursor: pointer;
      appearance: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.15s, background 0.15s;
    }
    .breadcrumbs button.bc-overview svg {
      pointer-events: none;
      display: block;
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    .breadcrumbs button.bc-overview:hover,
    .breadcrumbs button.bc-overview:focus-visible {
      color: var(--cyber-pink);
      background: color-mix(in srgb, var(--cyber-pink) 12%, transparent);
      outline: none;
    }
    /* Aktuelle Seite in Überblick-Mindmap / Modul-Übersichten-Kachel */
    .is-overview-here {
      outline: 2px solid var(--cyber-pink) !important;
      outline-offset: 2px;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyber-pink) 22%, transparent);
      position: relative;
      z-index: 1;
    }
    button.is-overview-here.morphologie-map-link,
    button.is-overview-here.phon-map-link,
    button.is-overview-here.syntax-map-link,
    button.is-overview-here.wortschatz-map-link,
    button.is-overview-here.semantik-map-link,
    button.is-overview-here.rechtschreibung-map-link,
    button.is-overview-here.brd-hub-map-link,
    button.is-overview-here.schriftverkehr-map-link,
    button.is-overview-here.sprachgeschichte-map-link,
    button.is-overview-here.niveau-map-link,
    a.is-overview-here {
      background: color-mix(in srgb, var(--cyber-pink-dim) 55%, var(--bg-card)) !important;
      border-color: var(--cyber-pink) !important;
      color: var(--color-text-strong) !important;
      font-weight: 700;
    }
    .overview-menu-btn.is-overview-here {
      background: color-mix(in srgb, var(--cyber-pink-dim) 45%, var(--bg-card)) !important;
      border-color: var(--cyber-pink) !important;
      color: var(--color-text-strong) !important;
      pointer-events: auto;
      cursor: pointer;
    }
    .overview-menu-btn.is-overview-here .overview-menu-badge {
      color: var(--cyber-pink) !important;
    }

    /* Hauptkategorien Accordion Style */
    .haupt-item {
      background-color: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.25s ease;
      margin-bottom: 12px;
    }
    .haupt-header {
      padding: 16px 20px;
      font-family: var(--font-mono);
      font-size: 11pt;
      font-weight: 700;
      color: #ffffff;
      background-color: var(--cyber-cyan);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
      transition: all 0.2s;
    }
    .haupt-header:hover {
      background-color: var(--cyber-cyan);
      filter: brightness(1.08);
      color: #ffffff;
    }
    .haupt-header::after {
      content: "[+]";
      font-family: var(--font-mono);
      font-size: 10pt;
      color: #ffffff;
    }
    .haupt-item.open .haupt-header::after {
      content: "[-]";
      color: #ffffff;
    }
    .haupt-item.open {
      border-color: var(--cyber-cyan);
      box-shadow: var(--glow-cyan);
    }
    .haupt-item.open .haupt-header {
      background-color: var(--cyber-cyan);
      color: #ffffff;
    }
    .haupt-body {
      display: none;
      padding: 16px;
      border-top: 1px solid var(--color-border);
      background-color: var(--bg-body);
    }
    .haupt-item.open .haupt-body {
      display: block;
      animation: accFadeIn 0.2s ease-out;
    }

    /* Accordion in Grammatikübersicht (hub: haupt-item) */
    .accordion-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 10px;
    }
    @keyframes accFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== Statistik-Modul ===== */
    #mod-statistik {
      --st-accent: var(--cyber-cyan);
      --st-accent-dim: var(--cyber-cyan-dim);
      --st-accent-border: color-mix(in srgb, var(--cyber-cyan) 34%, transparent);
      --st-accent-soft: color-mix(in srgb, var(--cyber-cyan) 9%, transparent);
    }
    .stats-hero {
      position: relative;
      margin: 0 0 28px;
      padding: 28px 28px 32px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background:
        linear-gradient(135deg, var(--cyber-cyan-dim), transparent 55%),
        linear-gradient(320deg, var(--cyber-pink-dim), transparent 50%),
        var(--bg-card);
      overflow: hidden;
    }
    .stats-hero::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--cyber-cyan);
      z-index: 1;
    }
    /* Portal-Bestand: Inhalt links, Humor-Panel rechts (wie Feedback/Verlauf, Spalten gespiegelt) */
    #mod-statistik .stats-hero {
      padding: 0;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
      align-items: stretch;
      border-color: var(--st-accent-border);
      background:
        linear-gradient(135deg, var(--st-accent-soft), transparent 42%),
        var(--bg-card);
    }
    #mod-statistik .stats-hero-main {
      grid-column: 2;
      grid-row: 1;
      padding: 28px 28px 32px;
      align-self: center;
    }
    .st-humor-visual {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      margin: 0;
      overflow: hidden;
      align-self: stretch;
      width: 100%;
      min-height: 100%;
      cursor: pointer;
      background:
        linear-gradient(200deg, var(--st-accent-dim), transparent 55%),
        var(--st-accent-soft);
      border-right: 1px solid var(--st-accent-border);
    }
    .st-humor-visual::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, 0.04));
    }
    :is([data-theme="light"], [data-theme="sepia"]) .st-humor-visual::after {
      background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.18));
    }
    .st-humor-visual img {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 18%;
    }
    @media (max-width: 900px) {
      #mod-statistik .stats-hero {
        grid-template-columns: 1fr;
      }
      #mod-statistik .stats-hero-main,
      #mod-statistik .st-humor-visual {
        grid-column: auto;
        grid-row: auto;
      }
      .st-humor-visual {
        border-right: none;
        border-bottom: 1px solid var(--st-accent-border);
        align-self: stretch;
        min-height: 180px;
        max-height: 180px;
      }
      .st-humor-visual::after {
        background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.06));
      }
      :is([data-theme="light"], [data-theme="sepia"]) .st-humor-visual::after {
        background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.22));
      }
      .st-humor-visual img {
        object-position: 50% 16%;
      }
    }
    @media (max-width: 640px) {
      #mod-statistik .stats-hero-main { padding: 18px 16px 20px; }
    }
    .stats-hero-kicker {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--cyber-cyan);
      margin-bottom: 8px;
    }
    .stats-hero-title {
      font-family: var(--font-mono);
      font-size: clamp(22px, 4vw, 34px);
      font-weight: 800;
      color: var(--color-text-strong);
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .stats-hero-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 22px 40px;
      align-items: flex-end;
    }
    .stats-hero-total {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }
    .stats-hero-total-num {
      font-family: var(--font-mono);
      font-size: clamp(40px, 8vw, 64px);
      font-weight: 800;
      color: var(--cyber-cyan);
      line-height: 1;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }
    .stats-hero-total-label {
      font-family: var(--font-mono);
      font-size: 10pt;
      color: var(--color-text-muted);
      max-width: 16em;
    }
    .stats-hero-note {
      margin: 14px 0 0;
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      line-height: 1.45;
      color: var(--color-text-muted);
      max-width: 36em;
    }
    .stats-hero-clarifier {
      margin: 12px 0 0;
      font-family: var(--font-sans);
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.45;
      color: var(--color-text);
      max-width: 36em;
    }
    .stats-personal {
      margin: 0 0 24px;
      padding: 20px 22px 22px;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
      border-radius: 8px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-cyan) 7%, transparent), transparent 55%),
        var(--bg-card);
    }
    .stats-personal-lead {
      margin: 0 0 16px;
      font-size: 0.88rem;
      line-height: 1.5;
      color: var(--color-text-muted);
    }
    #mod-statistik .stats-personal-head .stats-section-title,
    #mod-statistik .stats-hints > .stats-section-title {
      color: var(--st-accent);
      border-bottom-color: var(--st-accent-border);
    }
    .stats-personal-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px 18px;
      margin-bottom: 16px;
    }
    .stats-personal-metric {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .stats-personal-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    .stats-personal-value {
      font-family: var(--font-mono);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--color-text-strong);
      word-break: break-word;
    }
    .stats-personal-bar {
      height: 4px;
      margin-top: 4px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--color-border) 80%, transparent);
      overflow: hidden;
    }
    .stats-personal-bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--cyber-cyan);
      transition: width 0.45s ease;
    }
    .stats-personal-weakness {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin-bottom: 14px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--cyber-pink) 35%, var(--color-border));
      background: color-mix(in srgb, var(--cyber-pink) 6%, var(--bg-card));
    }
    .stats-personal-weakness[hidden] { display: none !important; }
    .stats-personal-weakness-text {
      margin: 0;
      flex: 1 1 14rem;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--color-text);
    }
    .stats-personal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .stats-personal-btn {
      appearance: none;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      padding: 8px 16px;
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--color-text);
      background: var(--bg-app);
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .stats-personal-btn:hover {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
    }
    .stats-personal-btn-primary {
      border-color: color-mix(in srgb, var(--cyber-cyan) 45%, var(--color-border));
      background: color-mix(in srgb, var(--cyber-cyan) 12%, var(--bg-app));
      color: var(--cyber-cyan);
    }
    .stats-personal-btn-accent {
      border-color: color-mix(in srgb, var(--cyber-pink) 45%, var(--color-border));
      color: var(--cyber-pink);
    }
    .stats-personal-btn-accent:hover {
      border-color: var(--cyber-pink);
      background: color-mix(in srgb, var(--cyber-pink) 10%, var(--bg-app));
    }
    .stats-hints {
      margin: 0 0 28px;
      padding: 18px 20px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--bg-card);
    }
    .stats-hints-list {
      margin: 0;
      padding-left: 1.15rem;
      display: grid;
      gap: 8px;
      font-size: 0.88rem;
      line-height: 1.5;
      color: var(--color-text-muted);
    }
    .stats-hints-list li::marker {
      color: var(--cyber-cyan);
    }
    .stats-section {
      margin-bottom: 28px;
    }
    .stats-section-title {
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--color-border);
    }
    .stats-section-note {
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--color-text-muted);
      margin: -4px 0 12px;
      max-width: 52rem;
    }
    .stats-card-breakdown {
      display: grid;
      gap: 4px;
      margin: 4px 0 0;
      padding: 0;
      list-style: none;
      font-size: 0.78rem;
      line-height: 1.35;
    }
    .stats-card-breakdown li {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
      color: var(--color-text-muted);
    }
    .stats-card-breakdown li span:last-child {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--stats-accent);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .stats-card-note {
      margin: 6px 0 0;
      font-size: 0.72rem;
      line-height: 1.4;
      color: var(--color-text-muted);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }

    /* ===== Glossar-Modul (Hero wie Statistik) ===== */
    #mod-glossar {
      --gl-accent: var(--cyber-cyan);
      --gl-accent-dim: var(--cyber-cyan-dim);
      --gl-accent-border: color-mix(in srgb, var(--cyber-cyan) 34%, transparent);
      --gl-accent-soft: color-mix(in srgb, var(--cyber-cyan) 9%, transparent);
    }
    #mod-glossar .stats-hero {
      padding: 0;
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
      align-items: stretch;
      border-color: var(--gl-accent-border);
      background:
        linear-gradient(135deg, var(--gl-accent-soft), transparent 42%),
        var(--bg-card);
    }
    #mod-glossar .stats-hero-main {
      grid-column: 2;
      grid-row: 1;
      padding: 28px 28px 32px;
      align-self: center;
    }
    .gl-humor-visual {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      margin: 0;
      overflow: hidden;
      align-self: stretch;
      width: 100%;
      min-height: 100%;
      cursor: pointer;
      background:
        linear-gradient(200deg, var(--gl-accent-dim), transparent 55%),
        var(--gl-accent-soft);
      border-right: 1px solid var(--gl-accent-border);
    }
    .gl-humor-visual::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(0, 0, 0, 0.04));
    }
    :is([data-theme="light"], [data-theme="sepia"]) .gl-humor-visual::after {
      background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.18));
    }
    .gl-humor-visual img {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 18%;
    }
    @media (max-width: 900px) {
      #mod-glossar .stats-hero {
        grid-template-columns: 1fr;
      }
      #mod-glossar .stats-hero-main,
      #mod-glossar .gl-humor-visual {
        grid-column: auto;
        grid-row: auto;
      }
      #mod-glossar .gl-humor-visual {
        border-right: none;
        border-bottom: 1px solid var(--gl-accent-border);
        align-self: stretch;
        min-height: 180px;
        max-height: 180px;
      }
      #mod-glossar .gl-humor-visual::after {
        background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.06));
      }
      :is([data-theme="light"], [data-theme="sepia"]) #mod-glossar .gl-humor-visual::after {
        background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.22));
      }
      #mod-glossar .gl-humor-visual img {
        object-position: 50% 16%;
      }
    }
    @media (max-width: 640px) {
      #mod-glossar .stats-hero-main { padding: 18px 16px 20px; }
    }

    .glossar-intro {
      margin: 0 0 18px;
      color: var(--color-text-muted);
      line-height: 1.55;
    }
    .glossar-helper-note {
      margin: -6px 0 18px;
      padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--cyber-cyan) 24%, var(--color-border));
      border-left: 3px solid var(--cyber-cyan);
      background: color-mix(in srgb, var(--cyber-cyan-dim) 35%, transparent);
      color: var(--color-text-muted);
      line-height: 1.5;
      font-size: 12.5px;
    }
    /* Intro liegt in .info-box — keine Doppelkästen */
    .glossar-intro-box.glossar-intro-box {
      margin-bottom: 18px;
    }
    .glossar-intro-box .glossar-intro {
      margin: 0 0 10px;
      color: var(--color-text);
    }
    .glossar-intro-box .glossar-helper-note {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      font-size: inherit;
      color: var(--color-text-muted);
    }
    /* Glossar: sticky chrome (Anzahl + ↑; A–Z letter strip when Sortierung = A–Z) */
    #mod-glossar #glossar-alpha-wrap.verb-table-pin-head {
      margin: 0 0 12px;
    }
    #mod-glossar #glossar-alpha-wrap .alpha-count {
      margin-left: auto;
    }
    #mod-glossar .glossar-group-title {
      scroll-margin-top: calc(
        var(--hud-height, 44px)
        + var(--sticky-stack-gap, 8px)
        + var(--card-deck-console-h, 52px)
        + var(--sticky-second-bar-offset, 0px)
        + var(--sticky-pin-under-nav, 0px)
        + var(--glossar-alpha-h, 40px)
        + 8px
      );
    }
    .glossar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
    }
    .glossar-grid[data-glossar-layout="stichworte"] {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
    }
    .glossar-group-title {
      grid-column: 1 / -1;
      margin: 8px 0 0;
      padding-bottom: 6px;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--cyber-pink);
      border-bottom: 1px solid var(--color-border);
    }
    .glossar-group-title:first-child {
      margin-top: 0;
    }
    .glossar-card {
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--cyber-cyan);
      background: var(--bg-card);
      padding: 16px 18px;
    }
    .glossar-card.is-stichwort {
      padding: 0;
      overflow: hidden;
    }
    .glossar-stichwort-toggle {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
      margin: 0;
      padding: 12px 14px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      font: inherit;
    }
    .glossar-stichwort-toggle:hover {
      background: color-mix(in srgb, var(--cyber-cyan) 8%, transparent);
    }
    .glossar-card.is-stichwort.is-open .glossar-stichwort-toggle {
      background: color-mix(in srgb, var(--cyber-cyan) 12%, transparent);
    }
    .glossar-card.is-stichwort .glossar-cat {
      margin: 0;
    }
    .glossar-card.is-stichwort .glossar-term {
      margin: 0;
    }
    .glossar-card.is-stichwort .glossar-def {
      display: none;
      margin: 0;
      padding: 10px 14px 14px;
      border-top: 1px solid var(--color-border);
    }
    .glossar-card.is-stichwort:has(.glossar-linkbox) .glossar-def {
      padding-bottom: 6px;
    }
    .glossar-card.is-stichwort.is-open .glossar-def {
      display: block;
    }
    /* Stichworte: Modul-Hinweis nur bei geöffneter Karte, kompakt wie Meta */
    .glossar-card.is-stichwort:not(.is-open) .glossar-linkbox {
      display: none;
    }
    .glossar-card.is-stichwort .glossar-linkbox {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      margin: 0;
      padding: 0 14px 10px;
      border-top: 0;
    }
    .glossar-card.is-stichwort .glossar-linklabel {
      font-size: 7pt;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .glossar-card.is-stichwort .glossar-link {
      font-size: var(--ui-font-size-sm);
      font-weight: 600;
    }
    .glossar-cat {
      margin: 0 0 6px;
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    .glossar-term {
      margin: 0 0 8px;
      font-family: var(--font-mono);
      font-size: 11pt;
      font-weight: 800;
      color: var(--cyber-cyan);
    }
    .glossar-def {
      margin: 0;
      color: var(--color-text);
      line-height: 1.55;
      font-size: 13px;
    }
    .glossar-linkbox {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--color-border);
    }
    .glossar-linklabel {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    .glossar-link {
      color: var(--cyber-cyan);
      font-weight: 700;
      text-decoration: none;
    }
    .glossar-link:hover,
    .glossar-link:focus-visible {
      text-decoration: underline;
    }
    .glossar-empty {
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      background: var(--bg-card);
      color: var(--color-text-muted);
    }
    .stats-card {
      --stats-accent: var(--cyber-cyan);
      --stats-accent-dim: var(--cyber-cyan-dim);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px 16px 14px;
      background: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      animation: statsCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
      animation-delay: calc(var(--stats-i, 0) * 55ms);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .stats-card:hover {
      border-color: var(--stats-accent);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }
    .stats-card:focus-visible {
      outline: 2px solid var(--stats-accent);
      outline-offset: 2px;
    }
    /* 26 hue-spaced accents — one per stats card; near-twins pushed apart */
    .stats-card.is-crimson { --stats-accent: #dc2626; --stats-accent-dim: rgba(220,38,38,0.15); }
    .stats-card.is-coral { --stats-accent: #ff6b4a; --stats-accent-dim: rgba(255,107,74,0.15); }
    .stats-card.is-orange { --stats-accent: #ea580c; --stats-accent-dim: rgba(234,88,12,0.15); }
    .stats-card.is-bronze { --stats-accent: #cd7f32; --stats-accent-dim: rgba(205,127,50,0.15); }
    .stats-card.is-amber { --stats-accent: #d97706; --stats-accent-dim: rgba(217,119,6,0.15); }
    .stats-card.is-gold { --stats-accent: #ca8a04; --stats-accent-dim: rgba(202,138,4,0.15); }
    .stats-card.is-yellow { --stats-accent: #facc15; --stats-accent-dim: rgba(250,204,21,0.18); }
    .stats-card.is-olive { --stats-accent: #65a30d; --stats-accent-dim: rgba(101,163,13,0.15); }
    .stats-card.is-lime { --stats-accent: #84cc16; --stats-accent-dim: rgba(132,204,22,0.15); }
    .stats-card.is-green { --stats-accent: #22c55e; --stats-accent-dim: rgba(34,197,94,0.15); }
    .stats-card.is-emerald { --stats-accent: #059669; --stats-accent-dim: rgba(5,150,105,0.15); }
    .stats-card.is-teal { --stats-accent: #14b8a6; --stats-accent-dim: rgba(20,184,166,0.15); }
    .stats-card.is-seafoam { --stats-accent: #2dd4bf; --stats-accent-dim: rgba(45,212,191,0.15); }
    .stats-card.is-cyan { --stats-accent: #0891b2; --stats-accent-dim: rgba(8,145,178,0.15); }
    .stats-card.is-sky { --stats-accent: #38bdf8; --stats-accent-dim: rgba(56,189,248,0.15); }
    .stats-card.is-cobalt { --stats-accent: #2563eb; --stats-accent-dim: rgba(37,99,235,0.15); }
    .stats-card.is-indigo { --stats-accent: #6366f1; --stats-accent-dim: rgba(99,102,241,0.15); }
    .stats-card.is-violet { --stats-accent: #7c3aed; --stats-accent-dim: rgba(124,58,237,0.15); }
    .stats-card.is-plum { --stats-accent: #9333ea; --stats-accent-dim: rgba(147,51,234,0.15); }
    .stats-card.is-purple { --stats-accent: #c026d3; --stats-accent-dim: rgba(192,38,211,0.15); }
    .stats-card.is-magenta { --stats-accent: #e879f9; --stats-accent-dim: rgba(232,121,249,0.15); }
    .stats-card.is-fuchsia { --stats-accent: #db2777; --stats-accent-dim: rgba(219,39,119,0.15); }
    .stats-card.is-rose { --stats-accent: #fb7185; --stats-accent-dim: rgba(251,113,133,0.15); }
    .stats-card.is-blush { --stats-accent: #fda4af; --stats-accent-dim: rgba(253,164,175,0.18); }
    .stats-card.is-pink { --stats-accent: #f9a8d4; --stats-accent-dim: rgba(249,168,212,0.18); }
    .stats-card.is-slate { --stats-accent: #94a3b8; --stats-accent-dim: rgba(148,163,184,0.18); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-crimson { --stats-accent: #991b1b; --stats-accent-dim: rgba(153,27,27,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-coral { --stats-accent: #e04a32; --stats-accent-dim: rgba(224,74,50,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-orange { --stats-accent: #9a3412; --stats-accent-dim: rgba(154,52,18,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-bronze { --stats-accent: #7c2d12; --stats-accent-dim: rgba(124,45,18,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-amber { --stats-accent: #d97706; --stats-accent-dim: rgba(217,119,6,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-gold { --stats-accent: #a16207; --stats-accent-dim: rgba(161,98,7,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-yellow { --stats-accent: #854d0e; --stats-accent-dim: rgba(133,77,14,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-olive { --stats-accent: #3f6212; --stats-accent-dim: rgba(63,98,18,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-lime { --stats-accent: #4d7c0f; --stats-accent-dim: rgba(77,124,15,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-green { --stats-accent: #15803d; --stats-accent-dim: rgba(21,128,61,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-emerald { --stats-accent: #047857; --stats-accent-dim: rgba(4,120,87,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-teal { --stats-accent: #0f766e; --stats-accent-dim: rgba(15,118,110,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-seafoam { --stats-accent: #0d9488; --stats-accent-dim: rgba(13,148,136,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-cyan { --stats-accent: #155e75; --stats-accent-dim: rgba(21,94,117,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-sky { --stats-accent: #0369a1; --stats-accent-dim: rgba(3,105,161,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-cobalt { --stats-accent: #1d4ed8; --stats-accent-dim: rgba(29,78,216,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-indigo { --stats-accent: #4338ca; --stats-accent-dim: rgba(67,56,202,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-violet { --stats-accent: #5b21b6; --stats-accent-dim: rgba(91,33,182,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-plum { --stats-accent: #7e22ce; --stats-accent-dim: rgba(126,34,206,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-purple { --stats-accent: #a21caf; --stats-accent-dim: rgba(162,28,175,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-magenta { --stats-accent: #c026d3; --stats-accent-dim: rgba(192,38,211,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-fuchsia { --stats-accent: #be185d; --stats-accent-dim: rgba(190,24,93,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-rose { --stats-accent: #e11d48; --stats-accent-dim: rgba(225,29,72,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-blush { --stats-accent: #f43f5e; --stats-accent-dim: rgba(244,63,94,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-pink { --stats-accent: #db2777; --stats-accent-dim: rgba(219,39,119,0.12); }
    :is([data-theme="light"], [data-theme="sepia"]) .stats-card.is-slate { --stats-accent: #475569; --stats-accent-dim: rgba(71,85,105,0.12); }
    .stats-card-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--stats-accent);
      transform: scaleY(0);
      transform-origin: top;
      animation: statsBarIn 0.5s ease-out forwards;
      animation-delay: calc(var(--stats-i, 0) * 55ms + 120ms);
    }
    .stats-card-label {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      line-height: 1.35;
      padding-right: 8px;
    }
    .stats-card-value {
      font-family: var(--font-mono);
      font-size: 32px;
      font-weight: 800;
      color: var(--stats-accent);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .stats-card-meter {
      height: 4px;
      margin-top: 4px;
      border-radius: 2px;
      background: var(--stats-accent-dim);
      overflow: hidden;
    }
    .stats-card-meter > span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--stats-accent);
      border-radius: 2px;
      transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .stats-card-go {
      font-family: var(--font-mono);
      font-size: var(--ui-font-size-sm);
      font-weight: 700;
      color: var(--stats-accent);
      margin-top: auto;
      opacity: 0.75;
    }
    .stats-card:hover .stats-card-go { opacity: 1; }
    @keyframes statsCardIn {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes statsBarIn {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .stats-card,
      .stats-card-bar,
      .stats-card-meter > span {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        transform: none;
      }
      .stats-card-bar { transform: scaleY(1); }
    }

    /* Alphabetical boosters list layout (wie Rektion der Verben) */
    .letter-section {
      margin-bottom: 8px;
    }
    .letter-section + .letter-section,
    .letter-section.alpha-letter-start {
      border-top: 2px solid var(--alpha-letter-rule);
      padding-top: 12px;
      margin-top: 4px;
    }
    .cyber-table tbody tr:has(+ tr.alpha-letter-start) > td {
      border-bottom-color: transparent;
    }
    .cyber-table tbody tr.alpha-letter-start > td {
      border-top: 2px solid var(--alpha-letter-rule);
      padding-top: 14px;
    }
    /* Kein grauer Strich direkt unter der pinken Tabellenkopf-Linie */
    .cyber-table tbody tr.alpha-letter-start:first-child > td {
      border-top: none;
      padding-top: 12px;
    }
    .alpha-letter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding-left: 28px;
      position: relative;
      width: 100%;
    }
    .alpha-letter-row + .alpha-letter-row {
      border-top: 2px solid var(--alpha-letter-rule);
      padding-top: 12px;
      margin-top: 4px;
    }
    .booster-letter-row + .booster-letter-row {
      border-top: 2px solid var(--alpha-letter-rule);
      padding-top: 12px;
      margin-top: 4px;
    }
    .booster-letter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding-left: 28px;
      position: relative;
      width: 100%;
      margin-bottom: 6px;
    }
    .booster-letter-label {
      font-family: var(--font-mono);
      font-weight: 800;
      position: absolute;
      left: 0;
      top: 4px;
      font-size: 10pt;
      width: 20px;
      text-align: left;
    }
    .booster-letter-label.pos { color: var(--cyber-cyan); }
    .booster-letter-label.neg { color: var(--cyber-pink); }
    .adj-pill {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 600;
      padding: 4px 8px;
      background: var(--surface-subtle);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      border-radius: 4px;
      transition: all 0.2s;
      cursor: pointer;
      position: relative;
    }
    .adj-pill:hover, .adj-pill.active {
      color: var(--color-text);
      background: var(--surface-subtle-hover);
      transform: translateY(-1px);
    }
    .adj-pill.pos:hover, .adj-pill.pos.active {
      border-color: var(--cyber-cyan);
      box-shadow: var(--glow-cyan);
      color: var(--cyber-cyan);
    }
    .adj-pill.neg:hover, .adj-pill.neg.active {
      border-color: var(--cyber-pink);
      box-shadow: var(--glow-pink);
      color: var(--cyber-pink);
    }
    .letter-divider {
      display: none;
    }
    .adj-letter-grid {
      display: contents;
    }
    .adj-item {
      font-size: 11.5px;
      padding: 8px 12px;
      background-color: var(--bg-card);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      border-radius: 6px;
      text-align: center;
      transition: all 0.2s;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 40px;
    }
    .adj-item:hover {
      border-color: var(--cyber-cyan);
      color: var(--cyber-cyan);
      box-shadow: 0 0 8px var(--cyber-cyan-dim);
      transform: translateY(-1px);
    }
    .adj-name {
      font-weight: 700;
    }
    @keyframes adjFadeIn {
      from { opacity: 0; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* Preposition & Case Badges (Rektion) */
    .prep-badge-container {
      display: inline-flex;
      align-items: center;
      gap: 0;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--color-border);
      margin: 2px 0;
    }
    .prep-pill {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 700;
      padding: 3px 8px;
      text-transform: uppercase;
    }
    .kasus-pill {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 600;
      padding: 3px 8px;
    }
    
    .prep-pill.dative { background-color: var(--cyber-green); color: var(--color-ink); }
    .kasus-pill.dative { background-color: var(--cyber-green-dim); color: var(--cyber-green); }
    .prep-badge-container:has(.dative) { border-color: rgba(16, 185, 129, 0.4); }

    .prep-pill.accusative { background-color: var(--cyber-pink); color: #ffffff; }
    .kasus-pill.accusative { background-color: var(--cyber-pink-dim); color: var(--cyber-pink); }
    .prep-badge-container:has(.accusative) { border-color: rgba(236, 72, 153, 0.4); }

    .prep-pill.genitive { background-color: var(--cyber-amber); color: var(--color-ink); }
    .kasus-pill.genitive { background-color: var(--cyber-amber-dim); color: var(--cyber-amber); }
    .prep-badge-container:has(.genitive) { border-color: rgba(245, 158, 11, 0.4); }

    .prep-separator {
      color: var(--color-text-muted);
      font-weight: bold;
      margin: 0 4px;
    }
    
    /* Auxiliary verb badges (Unregelmäßige Verben) */
    .aux-pill {
      font-family: var(--font-mono);
      font-size: 7.5pt;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 4px;
    }
    .aux-pill.ist { background-color: var(--cyber-green-dim); color: var(--cyber-green); border: 1px solid var(--cyber-green); }
    .aux-pill.hat { background-color: var(--cyber-cyan-dim); color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan); }

    /* Rektion Tab 01: A–Z Kasus-Liste */
    #verb-rektion-view-kasus .rektion-kasus-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
      align-items: center;
    }
    #verb-rektion-view-kasus .rektion-kasus-filters .cyber-btn {
      font-size: var(--ui-btn-font-size);
      padding: 5px 10px;
      background: transparent;
      color: var(--color-text-muted);
      border-color: var(--color-border);
    }
    #verb-rektion-view-kasus .rektion-kasus-filters .cyber-btn.is-filter-active {
      background-color: var(--cyber-cyan-dim);
      color: var(--cyber-cyan);
      border-color: var(--cyber-cyan);
    }
    #rektion-reflexive-btn,
    #unregel-ohne-ge-btn,
    #unregel-schwankend-btn,
    #unregel-aux-btn {
      flex-shrink: 0;
      box-sizing: border-box;
      height: 1.55em;
      min-height: 1.55em;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 9pt;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      color: var(--color-text-muted);
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 3px;
      cursor: pointer;
    }
    #rektion-reflexive-btn:hover,
    #unregel-ohne-ge-btn:hover,
    #unregel-schwankend-btn:hover,
    #unregel-aux-btn:hover {
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    #rektion-reflexive-btn.is-filter-active,
    #unregel-ohne-ge-btn.is-filter-active,
    #unregel-schwankend-btn.is-filter-active,
    #unregel-aux-btn.is-filter-active {
      background-color: var(--cyber-pink-dim);
      color: var(--cyber-pink);
      border-color: var(--cyber-pink);
    }
    #rektion-kasus-table {
      width: 100%;
      font-size: 12px;
      table-layout: fixed;
    }
    #rektion-kasus-table th,
    #rektion-kasus-table td {
      padding: 8px 10px;
      vertical-align: middle;
    }
    #rektion-kasus-table th:nth-child(1),
    #rektion-kasus-table td:nth-child(1) {
      width: 22em;
      min-width: 22em;
      white-space: nowrap;
      overflow: visible;
      background: var(--table-col1-bg);
      border-right: 1px solid var(--cyber-cyan);
    }
    #rektion-kasus-table th:nth-child(1) {
      color: var(--cyber-cyan);
    }
    #rektion-kasus-table th:nth-child(2),
    #rektion-kasus-table td:nth-child(2) {
      text-align: center;
      width: 12em;
      min-width: 12em;
    }
    #rektion-kasus-table th:nth-child(4),
    #rektion-kasus-table td:nth-child(4) {
      text-align: center;
      width: 7em;
      min-width: 7em;
      white-space: nowrap;
    }
    #rektion-kasus-table .rektion-kasus-verb {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 13px;
      color: var(--cyber-cyan);
    }
    #rektion-kasus-table .rektion-kasus-verb .row-nr {
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 0.92em;
    }
    #rektion-kasus-table .rektion-kasus-verb u {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    #rektion-kasus-table .rektion-sich {
      display: inline-block;
      width: 3.4em;
      margin-right: 0.15em;
      text-align: left;
      vertical-align: baseline;
    }
    #rektion-kasus-table .rektion-kasus-example {
      color: var(--color-text-muted);
      font-size: 11.5px;
      line-height: 1.4;
    }
    #rektion-kasus-table .status-badge {
      margin-left: 0;
    }
    #rektion-kasus-table .kasus-matrix-badge {
      display: inline-block;
      box-sizing: border-box;
      width: 10.5em;
      min-width: 10.5em;
      max-width: 10.5em;
      font-size: var(--ui-font-size-sm);
      padding: 3px 8px;
      text-align: center;
      white-space: nowrap;
    }
    .kasus-matrix-badge.kasus-mix {
      background: rgba(168, 85, 247, 0.15);
      color: var(--cyber-purple);
      border: 1px solid rgba(168, 85, 247, 0.35);
    }

    /* Rektion der Verben redesign */
    .rektion-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 15px;
    }
    @media (max-width: 768px) {
      .rektion-grid {
        grid-template-columns: 1fr;
      }
    }
    .rektion-card {
      background-color: var(--bg-card);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.25s;
    }
    .rektion-card:hover {
      transform: translateY(-2px);
    }
    .rektion-card-title {
      font-family: var(--font-mono);
      font-size: 9.5pt;
      font-weight: 700;
      text-transform: uppercase;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--color-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .rektion-card { border-color: rgba(236, 72, 153, 0.35); }
    .rektion-card .rektion-card-title { color: var(--cyber-pink); border-bottom-color: rgba(236, 72, 153, 0.25); }

    .verb-pill-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .verb-pill {
      font-family: var(--font-mono);
      font-size: var(--ui-btn-font-size);
      font-weight: 600;
      padding: 4px 8px;
      background: var(--surface-subtle);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      border-radius: 4px;
      transition: all 0.2s;
      cursor: default;
    }
    .verb-pill:hover {
      color: var(--color-text);
      background: var(--surface-subtle-hover);
      transform: translateY(-1px);
    }
    .rektion-card .verb-pill:hover { border-color: var(--cyber-cyan); box-shadow: var(--glow-cyan); }

    /* Nested accordions for Morphologie grouping */
    .haupt-body .accordion-container {
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      background: transparent;
      padding-left: 12px;
    }
    .haupt-body .haupt-item {
      border-bottom: 1px solid var(--surface-hairline);
      border-radius: 0;
      border: none;
      background: transparent;
    }
    .haupt-body .haupt-item:last-child {
      border-bottom: none;
    }
    .haupt-body .haupt-header {
      font-size: 9.5pt;
      padding: 10px 14px;
      background: var(--surface-subtle);
      border-left: none !important;
      border-bottom: none;
      border-radius: 0;
      text-transform: none;
      letter-spacing: 0;
    }
    .haupt-body .haupt-header:hover {
      background: var(--surface-subtle-hover);
    }
    
    /* Preposition matrix table styles */
    .kasus-matrix-badge {
      font-size: 7pt;
      font-weight: 700;
      padding: 1px 4px;
      border-radius: 3px;
      display: inline-block;
      text-align: center;
      min-width: 26px;
      font-family: var(--font-mono);
    }
    .kasus-matrix-badge.kasus-dat {
      background: rgba(16, 185, 129, 0.15);
      color: var(--cyber-green);
      border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .kasus-matrix-badge.kasus-akk {
      background: rgba(236, 72, 153, 0.15);
      color: var(--cyber-pink);
      border: 1px solid rgba(236, 72, 153, 0.3);
    }
    .kasus-matrix-badge.kasus-gen {
      background: rgba(245, 158, 11, 0.15);
      color: var(--cyber-amber);
      border: 1px solid rgba(245, 158, 11, 0.3);
    }
    .kasus-matrix-badge.kasus-nom {
      background: rgba(6, 182, 212, 0.15);
      color: var(--cyber-cyan);
      border: 1px solid rgba(6, 182, 212, 0.3);
    }
    .prep-pill.nominative { background-color: var(--cyber-cyan); color: #ffffff; }
    .kasus-pill.nominative { background-color: var(--cyber-cyan-dim); color: var(--cyber-cyan); }
    .prep-badge-container:has(.nominative) { border-color: rgba(6, 182, 212, 0.4); }
      em, i { font-style: normal !important; }
  

    /* ===== Tablet allgemein (≤1024px) — kompakter Desktop, kein Phone-Chrome =====
       Produktentscheid: Tablet = gequetschter Desktop (1–3 + Touch/Footer),
       kein Mid-Tier-Bottom-Nav / keine phone.css-Chrome außer data-layout=phone.
       Trifft: iPad mini/11/12.9 Querformat (teils), iPad 12.9 Hochkant (~1024),
       große Android-Tablets. Phone bleibt ≤640 / data-layout=phone. */
    @media (max-width: 1024px) {
      .container {
        padding-left: 14px;
        padding-right: 14px;
      }
      .cyber-card-body {
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .comp-table, .pronomen-table, .cyber-table, .cheat-table {
        max-width: none;
      }
      .chapter-nav.is-grouped {
        --chapter-nav-label-width: 140px;
      }
      .terminal-hud {
        gap: 8px 12px;
        padding: 10px 16px;
        flex-wrap: wrap;
        align-items: center;
      }
      /* Feste 334px-Basis sprengt Brand+Tools auf iPad — flexibel schrumpfen */
      .hud-logo {
        flex: 0 1 auto;
        width: auto;
        max-width: min(240px, 42vw);
        min-width: 0;
      }
      .hud-logo-name {
        font-size: 7.5pt;
        letter-spacing: 0.06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .hud-logo-mark {
        font-size: 10.5pt;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .hud-logo a {
        display: inline-block;
        max-width: 100%;
        vertical-align: bottom;
      }
      .hud-tools {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
      }
      .hud-search {
        flex: 1 1 160px;
        max-width: none;
        min-width: 120px;
        height: var(--hud-control-height, 40px);
      }
      .module-section.portal-enter {
        animation-duration: 0.16s;
      }
      .view-screen.active {
        animation-duration: 0.14s;
      }
      :root {
        --sticky-stack-gap: 4px;
      }
      .page-section-nav button,
      .page-section-nav a,
      .chapter-nav-pill,
      .console-tab-btn,
      .nav-seq,
      .home-toc-btn,
      .hub-card-title,
      .breadcrumbs a,
      .breadcrumbs button,
      .menu-chip,
      .st-chips .menu-chip {
        min-height: 40px;
        touch-action: manipulation;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill {
        height: auto;
        min-height: 40px;
        padding: 8px 10px;
        font-size: var(--ui-btn-font-size);
        white-space: normal;
        line-height: 1.2;
      }
      .page-section-nav:not(.page-section-nav--one-row) .page-section-nav-toggle {
        width: 12em;
        min-width: 10em;
        max-width: 14em;
        font-size: 7.5pt;
      }
      /* Tablet: Horizontal-Scroll für breite Tabellen (iPad); Portrait-Block aligned mit !important */
      .table-h-scroll {
        display: block;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        width: 100% !important;
        max-width: 100% !important;
        touch-action: pan-x pan-y !important;
        position: relative;
      }
      .table-h-scroll.has-h-scroll-hint::after {
        content: "↔ wischen";
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 5;
        pointer-events: none;
        padding: 4px 10px;
        font-family: var(--font-mono);
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--cyber-cyan);
        background: color-mix(in srgb, var(--bg-card) 88%, transparent);
        border: 1px solid color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
        border-radius: 4px;
        opacity: 0.92;
      }
      .table-h-scroll > .cyber-table,
      .table-h-scroll > .cheat-table,
      .cyber-table,
      .cheat-table,
      table.cheat-table,
      table.cyber-table {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
        max-width: none;
        box-sizing: border-box;
      }
      .table-h-scroll > .cyber-table th,
      .table-h-scroll > .cyber-table td,
      .table-h-scroll > .cheat-table th,
      .table-h-scroll > .cheat-table td,
      .cyber-table th,
      .cyber-table td,
      .cheat-table th,
      .cheat-table td {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        padding: 6px 8px;
        font-size: var(--ui-font-size-sm);
      }
      /* Feste Breiten von Header-Attributen aufheben (Scroll erlaubt intrinsische Minima) */
      #rektion-kasus-table th,
      #verben-rektion-table th,
      .cheat-table th,
      .cyber-table th {
        width: auto;
        min-width: 0;
      }
      /* Synonymie / Nuancen: festes Layout, kein Horizontal-Scroll */
      #mod-synonymie .table-h-scroll {
        overflow-x: hidden !important;
        touch-action: pan-y !important;
      }
      #mod-synonymie .table-h-scroll.has-h-scroll-hint::after,
      #mod-synonymie .table-h-scroll::after {
        display: none !important;
        content: none !important;
      }
      #synonymie-table,
      #nuancen-paare-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
      }
      /* Wortschatz-Herkunft (4 Spalten) proportionale Breiten */
      .cheat-table.herkunft-table th:nth-child(1),
      .cheat-table.herkunft-table td:nth-child(1) { width: 25% !important; }
      .cheat-table.herkunft-table th:nth-child(2),
      .cheat-table.herkunft-table td:nth-child(2) { width: 22% !important; }
      .cheat-table.herkunft-table th:nth-child(3),
      .cheat-table.herkunft-table td:nth-child(3) { width: 33% !important; }
      .cheat-table.herkunft-table th:nth-child(4),
      .cheat-table.herkunft-table td:nth-child(4) { width: 20% !important; }

      .breadcrumbs {
        flex-wrap: wrap;
        row-gap: 2px;
        font-size: var(--ui-font-size-sm);
      }
      .nav-console {
        padding-left: 12px;
        padding-right: 12px;
      }
      footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "actions social"
          "links links";
        row-gap: 6px;
        column-gap: 10px;
        align-items: center;
        overflow-x: clip;
      }
      footer .footer-actions {
        grid-area: actions;
        flex: none;
        flex-wrap: wrap;
        min-width: 0;
        gap: 8px;
      }
      footer .footer-links {
        grid-area: links;
        margin: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 4px;
        gap: 8px;
      }
      footer .footer-social {
        grid-area: social;
        flex: none;
        padding-left: 12px;
      }
      /* Touch-Targets Footer / Konto ≥40px (Meine Daten bleibt openAccountModal) */
      footer .footer-account-btn,
      footer .footer-buy-btn,
      footer .footer-link,
      footer .footer-social-link {
        min-height: 40px;
        min-width: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
        touch-action: manipulation;
        box-sizing: border-box;
      }
      footer .footer-account-btn {
        padding-left: 12px;
        padding-right: 12px;
        align-items: center;
      }
    }

    /* ===== Tablet Portrait eng (iPad mini ~744; iPad Air/11 ~834; Android 7–8") =====
       max-width 920: schließt Lücke zu iPad Air Portrait (~834); früher nur ≤800.
       min-width 641: Phone-CSS (phone.css) nicht überschreiben.
       orientation portrait: Landscape-iPads (meist >1000 CSS-px) bleiben beim 1024er Block. */
    @media (max-width: 920px) and (min-width: 641px) and (orientation: portrait) {
      :root {
        --sticky-stack-gap: 2px;
      }

      .terminal-hud {
        flex-wrap: wrap;
        gap: 8px;
      }
      .hud-tools {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }
      .hud-search {
        flex: 1 1 100%;
        max-width: none;
        min-width: 160px;
      }

      /* Startseite: TOC scrollt mit (weniger Sticky-Stack); Hub bereits einspaltig via ≤800-Block */
      .home-toc {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        z-index: auto;
      }
      .home-hub {
        gap: 12px;
      }
      .home-hub:has(#home-hub-placeholder.is-visible) .home-hub-main {
        height: auto;
        min-height: 0;
      }
      .home-toc-btn {
        min-height: 44px;
        font-size: var(--ui-btn-font-size);
        padding: 10px 12px;
      }
      .home-hub .sub-chap-item,
      .sub-chap-item {
        min-height: 44px;
        padding: 12px 14px;
      }

      /* Sticky-Stack reduzieren: HUD + Nav-Console bleiben; Sekundär-Nav scrollt mit */
      .module-section .page-section-nav {
        position: relative;
        top: auto;
        z-index: auto;
        box-shadow: none;
        margin-top: 10px;
        margin-bottom: 12px;
      }
      .module-section > .chapter-nav.chap-subnav-card:not([data-sticky-chrome="0"]) {
        position: relative;
        top: auto;
        z-index: auto;
        box-shadow: none;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] {
        position: relative;
        top: auto;
        z-index: auto;
        box-shadow: none;
      }

      /* Subnav / Kapitel-Pills: 2 Spalten statt gequetschter 4er-Reihe */
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 1):last-child)::after,
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 2):last-child)::after,
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(4n + 3):last-child)::after {
        grid-column: auto;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(2n + 1):last-child)::after,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(2n + 1):last-child)::after {
        content: '';
        display: block;
        grid-column: span 1 / -1;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(2n):last-child)::after,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pills:has(> .chapter-nav-pill:nth-child(2n):last-child)::after {
        content: none;
        display: none;
      }
      .module-section > .chapter-nav[data-chapter-chrome="top"] .chapter-nav-pill,
      .chapter-nav.chap-subnav-card:not(#redemittel-sit-subnav):not(#wortfelder-fields-bar) .chapter-nav-pill {
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
        font-size: var(--ui-btn-font-size);
        white-space: normal;
        line-height: 1.25;
      }
      .chapter-nav.is-grouped .chapter-nav-pill {
        height: auto;
        min-height: 40px;
        padding: 8px 10px;
        font-size: var(--ui-btn-font-size);
        white-space: normal;
        line-height: 1.2;
      }
      .chapter-nav.is-grouped .chapter-nav-row-label {
        min-height: 40px;
        padding: 8px 10px;
        font-size: var(--ui-font-size-sm);
      }

      /* Sprungmenü: wrap statt winzige one-row-Pills */
      .page-section-nav,
      .page-section-nav.page-section-nav--one-row,
      .page-section-nav.page-section-nav--equal-pills {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
      }
      .page-section-nav .page-section-nav-actions,
      .page-section-nav.page-section-nav--one-row .page-section-nav-actions {
        order: -1;
        width: 100%;
        margin-left: 0;
        display: flex;
        gap: 6px;
      }
      .page-section-nav .page-section-nav-toggle,
      .page-section-nav.page-section-nav--one-row .page-section-nav-toggle {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px;
        height: 44px;
        font-size: var(--ui-btn-font-size) !important;
      }
      .page-section-nav .page-section-nav-top {
        width: 44px;
        min-width: 44px;
        height: 44px;
      }
      .page-section-nav .page-section-nav-filters,
      .page-section-nav.page-section-nav--one-row .page-section-nav-filters,
      .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters,
      .page-section-nav.page-section-nav--equal-pills.page-section-nav--one-row .page-section-nav-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        flex: 1 1 100%;
        flex-wrap: unset;
      }
      .adj-praefix-filter-nav .page-section-nav-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px;
      }
      .adj-praefix-filter-nav .page-section-nav-filters > button,
      .adj-praefix-filter-nav .page-section-nav-filters > span.is-empty {
        min-height: 44px;
        height: 44px;
        font-size: 9pt;
      }
      .page-section-nav .page-section-nav-filters > button,
      .page-section-nav.page-section-nav--one-row .page-section-nav-filters > button,
      .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters > button {
        flex: unset;
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 8px 10px;
        font-size: var(--ui-btn-font-size) !important;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
        overflow: visible;
        text-overflow: unset;
      }
      .page-section-nav.page-section-nav--equal-pills .page-section-nav-filters::after,
      .page-section-nav.page-section-nav--one-row .page-section-nav-filters::after {
        content: none !important;
        display: none !important;
      }

      /* Filter-Chips / Alpha: wrap + Tap-Targets */
      .st-chips,
      .verb-table-pin-head > .st-chips,
      #adj-praep-pin-head > .st-chips,
      #adj-praep-prep-pin-head > .st-chips {
        flex-wrap: wrap;
        max-height: none;
        gap: 6px;
      }
      .menu-chip,
      .st-chips .menu-chip,
      .chapter-nav-pill,
      .cyber-btn {
        min-height: 44px;
        touch-action: manipulation;
      }
      .alpha-jump {
        flex-wrap: wrap;
        row-gap: 4px;
      }
      .alpha-jump-btn:not(.is-empty) {
        min-width: 40px;
        min-height: 40px;
      }
      .verb-table-pin-head {
        flex-wrap: wrap;
        row-gap: 8px;
      }
      .chapter-nav.is-grouped {
        --chapter-nav-label-width: 110px;
      }

      /* Breite Tabellen: Horizontal-Scroll + Hinweis */
      .table-container {
        max-width: 100%;
        box-sizing: border-box;
      }
      .table-h-scroll {
        display: block;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y !important;
        position: relative;
      }
      .table-h-scroll.has-h-scroll-hint::after {
        content: "↔ wischen";
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 5;
        pointer-events: none;
        padding: 4px 10px;
        font-family: var(--font-mono);
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--cyber-cyan);
        background: color-mix(in srgb, var(--bg-card) 88%, transparent);
        border: 1px solid color-mix(in srgb, var(--cyber-cyan) 35%, transparent);
        border-radius: 4px;
        opacity: 0.92;
      }

      /* Synonymie & Wortpaare [07.03] auf Tablet-Hochkant: immer festes Layout, kein Scroll */
      #mod-synonymie .table-h-scroll {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        touch-action: pan-y !important;
      }
      #mod-synonymie .table-h-scroll.has-h-scroll-hint::after,
      #mod-synonymie .table-h-scroll::after {
        display: none !important;
        content: none !important;
      }
      #synonymie-table,
      #nuancen-paare-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
      }
      #synonymie-table th,
      #synonymie-table td,
      #nuancen-paare-table th,
      #nuancen-paare-table td {
        font-size: var(--ui-font-size-sm);
        padding: 6px 8px;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      #nuancen-paare-table .badge-cat {
        font-size: 7.5pt !important;
        padding: 2px 4px !important;
        white-space: normal !important;
        line-height: 1.2;
      }

      /* Matrizen: min-width + erste Spalte sticky (wie Phone-Pattern) */
      #adj-praep-table,
      #adjektive-suffix-table,
      #adjektive-praefix-matrix-table {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
      }
      #adj-praep-table th.adj-praep-th-adj,
      #adj-praep-table td:first-child,
      #adjektive-suffix-table th:first-child,
      #adjektive-suffix-table td:first-child,
      #adjektive-praefix-matrix-table th:first-child,
      #adjektive-praefix-matrix-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 12;
        min-width: 7em;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
      }
      #adj-praep-table thead th.adj-praep-th-adj,
      #adjektive-suffix-table thead th:first-child,
      #adjektive-praefix-matrix-table thead th:first-child {
        z-index: 25;
      }
      #adjektive-praefix-gruppen-table th.adj-praefix-th-stamm,
      #adjektive-praefix-gruppen-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 12;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
      }
      #adjektive-praefix-gruppen-table thead th.adj-praefix-th-stamm {
        z-index: 25;
      }
      .praefix-gruppen-nav button {
        min-height: 36px;
      }

      .laut-compare {
        grid-template-columns: 1fr;
      }
      #mod-selbsttest #st-area-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #wortfelder-fields-bar.chap-subnav-card .chapter-nav-pills,
      #wortfelder-fields-bar .chapter-nav-row.wortfelder-theme-group-row .chapter-nav-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

  
    /* ===== PWA & Favorites Styling ===== */
    
    /* --- CARD-LEVEL CHECKMARK BUTTON (Identical to Top Module Button) --- */
    .cyber-card-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    /* Stern · Kasten as one unit — wraps together, stays right via margin-left:auto */
    .cyber-card-header .card-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 1px;
      margin-left: auto;
      flex: 0 0 auto;
    }
    .card-check-btn {
      margin-left: 0;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      cursor: pointer;
      padding: 0 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      line-height: 1;
      transition: color 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
      user-select: none;
    }
    /* Legacy bracket-check styles (skipped when .is-calm-icon is present) */
    .card-check-btn:not(.is-calm-icon) .mark-learned-bracket {
      font-family: var(--font-mono, monospace);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--cyber-cyan, #00f2ff) !important;
      user-select: none;
      opacity: 1 !important;
    }
    .card-check-btn:not(.is-calm-icon) svg {
      width: 16px;
      height: 16px;
      display: block;
      flex-shrink: 0;
      stroke: var(--cyber-cyan, #00f2ff);
      stroke-width: 2.2;
      fill: none;
      opacity: 0.2;
      transition: opacity 0.2s ease, filter 0.2s ease;
    }
    .card-check-btn:not(.is-calm-icon):hover svg {
      opacity: 0.65;
      filter: drop-shadow(0 0 3px var(--cyber-cyan, #00f2ff));
    }
    .card-check-btn:not(.is-calm-icon).is-active svg {
      opacity: 1 !important;
      stroke: var(--cyber-pink);
      filter: drop-shadow(0 0 6px var(--cyber-pink));
    }
    .cyber-card-header .card-header-actions .fav-btn,
    .cyber-card-header .card-header-actions .card-fav-btn {
      margin-left: 0 !important;
    }

    .fav-btn {
      margin-left: auto;
      background: rgba(245, 158, 11, 0.06);
      border: 1px solid rgba(245, 158, 11, 0.25);
      border-radius: 4px;
      cursor: pointer;
      font-size: 11pt;
      line-height: 1;
      padding: 3px 7px;
      color: rgba(245, 158, 11, 0.65);
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      z-index: 10;
      -webkit-tap-highlight-color: transparent;
    }
    /* Amber hover only on fine pointers — tablets keep sticky :hover and showed yellow */
    @media (hover: hover) and (pointer: fine) {
      .fav-btn:not(.is-calm-icon):hover {
        transform: scale(1.08);
        color: #fbbf24;
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.45);
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.2);
      }
    }
    .fav-btn:not(.is-calm-icon).is-active {
      color: var(--cyber-pink);
      border-color: color-mix(in srgb, var(--cyber-pink) 55%, transparent);
      background: var(--cyber-pink-dim);
      box-shadow: 0 1px 4px color-mix(in srgb, var(--cyber-pink) 25%, transparent);
      text-shadow: 0 0 3px color-mix(in srgb, var(--cyber-pink) 30%, transparent);
    }
    /* Calm Stern idle: cyan (Hauptfarbe); active uses Zweitfarbe below */
    .fav-btn.is-calm-icon,
    .fav-btn.is-calm-icon:hover,
    .fav-btn.is-calm-icon:focus,
    .fav-btn.is-calm-icon:focus-visible,
    .fav-btn.is-calm-icon:active,
    .mark-page-fav-btn.fav-btn,
    .mark-page-fav-btn.fav-btn:hover,
    .mark-page-fav-btn.fav-btn:active {
      color: var(--cyber-cyan, #00f2ff) !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
      transform: none !important;
    }
    /* Active Favorit / gelernt: theme Zweitfarbe (--cyber-pink, z. B. Magentarot) */
    .fav-btn.is-calm-icon.is-active,
    .fav-btn.is-calm-icon.is-active:hover,
    .fav-btn.is-calm-icon.is-active:active,
    .mark-page-fav-btn.fav-btn.is-active,
    .mark-page-fav-btn.fav-btn.is-active:hover,
    .mark-page-fav-btn.fav-btn.is-active:active {
      color: var(--cyber-pink) !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
      transform: none !important;
    }
    .cyber-card-header:has(.fav-btn)::after,
    .cyber-card-header:has(.card-header-actions)::after {
      margin-left: 0;
    }

  
/* --- USABILITY & INTERACTIVITY FEATURES (3, 5, 6) --- */


.gram-tooltip:hover, .gram-tooltip.is-active {
  background: rgba(0, 242, 255, 0.2);
  color: #ffffff !important;
}


/* Feature 5: Tastatur-Shortcut-Modal (+ Auth-Modal) */
html:has(.kbd-modal-backdrop.is-open),
body:has(.kbd-modal-backdrop.is-open),
html.daf-modal-open,
body.daf-modal-open {
  overflow: hidden !important;
}

.kbd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg-app) 55%, rgba(11, 18, 32, 0.75));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.kbd-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.kbd-modal {
  background: 
    radial-gradient(ellipse 80% 50% at 90% 10%, color-mix(in srgb, var(--cyber-cyan) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 90%, color-mix(in srgb, var(--cyber-pink, #ec4899) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-card) 58%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 45%, rgba(255, 255, 255, 0.15));
  border-radius: var(--table-frame-radius, 12px);
  width: 100%;
  max-width: 460px;
  padding: 22px 24px 24px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 32px -4px color-mix(in srgb, var(--cyber-cyan) 25%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  color: var(--color-text);
  font-family: var(--font-sans);
  position: relative;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kbd-modal-backdrop.is-open .kbd-modal {
  transform: scale(1);
}
.kbd-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
}
.kbd-modal-title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kbd-modal-close {
  background: color-mix(in srgb, var(--bg-card) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 20%, transparent);
  color: var(--color-text-muted);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  border-radius: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.kbd-modal-close:hover {
  color: var(--cyber-cyan);
  border-color: color-mix(in srgb, var(--cyber-cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyber-cyan) 12%, transparent);
  transform: scale(1.05);
}
.kbd-modal-close:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 2px;
}
.kbd-groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kbd-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in srgb, var(--bg-app) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 18%, var(--color-border));
  border-radius: 8px;
  padding: 10px 12px;
}
.kbd-group-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyber-cyan);
  opacity: 0.95;
  padding-bottom: 2px;
}
.kbd-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kbd-shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 0.88rem;
  color: var(--color-text);
  transition: background-color 0.15s ease;
}
.kbd-shortcut-item:hover {
  background-color: color-mix(in srgb, var(--cyber-cyan) 10%, transparent);
}
.kbd-shortcut-name {
  font-weight: 500;
  color: var(--color-text);
}
.kbd-keys-combo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.kbd-sep {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  user-select: none;
}
/* Plastische 3D-Keycaps (Tastenkappen-Optik) */
.kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 90%, white 10%) 0%, color-mix(in srgb, var(--bg-card) 60%, var(--color-border)) 100%);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 40%, var(--color-border));
  border-bottom: 2.5px solid color-mix(in srgb, var(--cyber-cyan) 70%, #0f172a);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}
.kbd-trigger-btn,
.kbd-trigger-btn:focus,
.kbd-trigger-btn:focus-visible,
.kbd-trigger-btn:active,
.kbd-trigger-btn.is-active {
  /* Match .hud-pref-btn chrome: bordered square, not a naked cyan glyph. */
  background-color: var(--bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 0;
  outline: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  filter: none;
}
.kbd-trigger-btn:hover,
.kbd-trigger-btn.is-active {
  background-color: var(--bg-card);
  border-color: var(--cyber-cyan);
  color: var(--cyber-cyan);
  box-shadow: var(--glow-cyan);
  outline: none;
  opacity: 1;
  transform: none;
  filter: none;
}
.kbd-trigger-btn .kbd-btn-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
}

/* FEATURE 1: LERNFORTSCHRITT & GELERNT-HAKEN
   (home-progress-learned-section Styles: siehe .cyber-progress-widget oben) */
.mark-learned-btn,
.mark-learned-btn:focus,
.mark-learned-btn:focus-visible,
.mark-learned-btn:active {
  position: relative;
  height: 20px;
  padding: 0 2px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  box-sizing: border-box;
  opacity: 0.85;
  z-index: 10;
}
.mark-learned-bracket {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cyber-cyan, #00f2ff) !important;
  user-select: none;
  opacity: 1 !important;
}
.mark-learned-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: var(--cyber-cyan, #00f2ff);
  stroke-width: 2.2;
  fill: none;
  opacity: 0.2;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.mark-learned-btn:hover svg {
  opacity: 0.65;
  filter: drop-shadow(0 0 3px var(--cyber-cyan, #00f2ff));
}
.mark-learned-btn.is-learned svg {
  opacity: 1 !important;
  stroke: var(--cyber-pink);
  filter: drop-shadow(0 0 6px var(--cyber-pink));
}
/* Seiten-Stern in der Nav: gleiche Optik wie .fav-btn auf Karten */
.nav-console .mark-page-fav-btn.fav-btn,
.nav-console .mark-page-fav-btn.fav-btn:focus,
.nav-console .mark-page-fav-btn.fav-btn:focus-visible,
.nav-console .mark-page-fav-btn.fav-btn:active {
  position: relative;
  top: auto;
  left: auto;
  margin-left: 2px !important;
  transform: none;
  z-index: 10;
  outline: none;
}
.nav-console .mark-page-fav-btn.fav-btn:hover {
  transform: scale(1.08);
}
.nav-console .mark-page-fav-btn.fav-btn.is-active:hover {
  transform: scale(1.08);
}

/* EXPERIMENTAL: ruhige Aktionszeile — alle Content-Module (.nav-console-actions--calm) */
.nav-console-actions--calm {
  gap: 1px;
}
.nav-console-actions--calm > button,
.nav-console-actions--calm > button:focus,
.nav-console-actions--calm > button:focus-visible,
.nav-console-actions--calm > button:active {
  position: relative;
  top: auto;
  left: auto;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--cyber-cyan, #00f2ff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  opacity: 1;
  transform: none !important;
  text-shadow: none !important;
  z-index: 10;
  transition: color 0.15s ease;
}
/* Icon box: 18×18 for gear, Kasten-Haken, Stern */
.nav-console-actions--calm > button svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  opacity: 0.5;
  filter: none !important;
  /* Hits go to the <button> — hollow star stroke-only paths were easy to miss */
  pointer-events: none;
  transition: opacity 0.15s ease, fill 0.15s ease, stroke-width 0.15s ease;
}
.nav-console-actions--calm > button:hover svg {
  opacity: 0.95;
  filter: none !important;
}
.nav-console-actions--calm .mark-learned-bracket {
  display: none !important;
}
/* Kasten-Haken: idle = smaller faint ✓ inside box; .is-learned = large ✓ past edge + draw */
.nav-console-actions--calm .mark-learned-btn {
  overflow: visible;
}
.nav-console-actions--calm .mark-learned-btn svg {
  /* Override shared 0.5 so box/check opacities are absolute (not multiplied). */
  opacity: 1;
  overflow: visible;
}
.nav-console-actions--calm .mark-learned-btn .calm-learned-box {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.nav-console-actions--calm .mark-learned-btn .calm-learned-check {
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.nav-console-actions--calm .mark-learned-btn .calm-learned-check--idle {
  opacity: 0.4;
  stroke-width: 2.3;
}
.nav-console-actions--calm .mark-learned-btn .calm-learned-check--active {
  opacity: 0;
  stroke-width: 2.7;
  /* Path ≈ 30; 36 leaves a little headroom for round caps. */
  stroke-dasharray: 36;
  stroke-dashoffset: 0;
}
.nav-console-actions--calm .mark-learned-btn:hover .calm-learned-box,
.nav-console-actions--calm .mark-learned-btn:hover .calm-learned-check--idle {
  opacity: 0.95;
}
.nav-console-actions--calm .mark-learned-btn.is-learned {
  color: var(--cyber-pink) !important;
}
.nav-console-actions--calm .mark-learned-btn.is-learned svg {
  opacity: 1;
  overflow: visible;
}
.nav-console-actions--calm .mark-learned-btn.is-learned .calm-learned-box {
  opacity: 1;
}
.nav-console-actions--calm .mark-learned-btn.is-learned .calm-learned-check--idle {
  opacity: 0;
}
.nav-console-actions--calm .mark-learned-btn.is-learned .calm-learned-check--active {
  opacity: 1;
  /* Draw-on when .is-learned is applied; unlearn snaps back (no reverse wipe). */
  animation: calm-learned-check-draw 0.38s ease-out both;
}
.nav-console-actions--calm .mark-learned-btn.is-learned:hover .calm-learned-check--idle {
  opacity: 0;
}
@keyframes calm-learned-check-draw {
  from { stroke-dashoffset: 36; }
  to { stroke-dashoffset: 0; }
}
.nav-console-actions--calm .mark-page-fav-btn.is-active,
.nav-console-actions--calm .mark-page-fav-btn.fav-btn.is-active,
.nav-console-actions--calm .mark-page-fav-btn.is-active:hover,
.nav-console-actions--calm .mark-page-fav-btn.fav-btn.is-active:hover,
.nav-console-actions--calm .mark-page-fav-btn.is-active:active,
.nav-console-actions--calm .mark-page-fav-btn.fav-btn.is-active:active {
  /* Active Favorit: Zweitfarbe (--cyber-pink), not amber/gold or Hauptfarbe */
  color: var(--cyber-pink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.nav-console-actions--calm .mark-page-fav-btn.is-active svg {
  opacity: 1;
}
.nav-console-actions--calm .mark-page-fav-btn.is-active svg path {
  fill: currentColor;
}

/* Larger hit areas on tablets / touch — hollow SVG paths were easy to miss */
@media (hover: none), (pointer: coarse) {
  .nav-console-actions--calm > button {
    width: 40px;
    height: 40px;
  }
  .cyber-card-header .card-fav-btn.is-calm-icon,
  .cyber-card-header .card-check-btn.is-calm-icon {
    min-width: 40px;
    min-height: 40px;
    padding: 8px !important;
  }
}

/* Didactic card headers — same calm Stern · Kasten as page actions (no gear) */
.cyber-card-header .card-fav-btn.is-calm-icon,
.cyber-card-header .card-check-btn.is-calm-icon,
.cyber-card-header .card-fav-btn.is-calm-icon:focus,
.cyber-card-header .card-check-btn.is-calm-icon:focus,
.cyber-card-header .card-fav-btn.is-calm-icon:focus-visible,
.cyber-card-header .card-check-btn.is-calm-icon:focus-visible,
.cyber-card-header .card-fav-btn.is-calm-icon:active,
.cyber-card-header .card-check-btn.is-calm-icon:active {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--cyber-cyan, #00f2ff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  opacity: 1;
  transform: none !important;
  text-shadow: none !important;
  font-size: 0;
  line-height: 0;
  transition: color 0.15s ease;
}
.cyber-card-header .card-fav-btn.is-calm-icon {
  margin-left: 0 !important;
  border-radius: 0;
}
.cyber-card-header .card-check-btn.is-calm-icon {
  margin-left: 0;
  overflow: visible;
}
.cyber-card-header .card-fav-btn.is-calm-icon svg,
.cyber-card-header .card-check-btn.is-calm-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  opacity: 0.5;
  filter: none !important;
  pointer-events: none;
  transition: opacity 0.15s ease, fill 0.15s ease, stroke-width 0.15s ease;
}
.cyber-card-header .card-fav-btn.is-calm-icon:hover svg,
.cyber-card-header .card-check-btn.is-calm-icon:hover svg {
  opacity: 0.95;
  filter: none !important;
}
.cyber-card-header .card-check-btn.is-calm-icon .mark-learned-bracket {
  display: none !important;
}
.cyber-card-header .card-check-btn.is-calm-icon svg {
  opacity: 1;
  overflow: visible;
}
.cyber-card-header .card-check-btn.is-calm-icon .calm-learned-box {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.cyber-card-header .card-check-btn.is-calm-icon .calm-learned-check {
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cyber-card-header .card-check-btn.is-calm-icon .calm-learned-check--idle {
  opacity: 0.4;
  stroke-width: 2.3;
}
.cyber-card-header .card-check-btn.is-calm-icon .calm-learned-check--active {
  opacity: 0;
  stroke-width: 2.7;
  stroke-dasharray: 36;
  stroke-dashoffset: 0;
}
.cyber-card-header .card-check-btn.is-calm-icon:hover .calm-learned-box,
.cyber-card-header .card-check-btn.is-calm-icon:hover .calm-learned-check--idle {
  opacity: 0.95;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned,
.cyber-card-header .card-check-btn.is-calm-icon.is-active {
  color: var(--cyber-pink) !important;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned svg,
.cyber-card-header .card-check-btn.is-calm-icon.is-active svg {
  opacity: 1;
  overflow: visible;
  filter: none !important;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned .calm-learned-box,
.cyber-card-header .card-check-btn.is-calm-icon.is-active .calm-learned-box {
  opacity: 1;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned .calm-learned-check--idle,
.cyber-card-header .card-check-btn.is-calm-icon.is-active .calm-learned-check--idle {
  opacity: 0;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned .calm-learned-check--active,
.cyber-card-header .card-check-btn.is-calm-icon.is-active .calm-learned-check--active {
  opacity: 1;
  animation: calm-learned-check-draw 0.38s ease-out both;
}
.cyber-card-header .card-check-btn.is-calm-icon.is-learned:hover .calm-learned-check--idle,
.cyber-card-header .card-check-btn.is-calm-icon.is-active:hover .calm-learned-check--idle {
  opacity: 0;
}
.cyber-card-header .card-fav-btn.is-calm-icon.is-active,
.cyber-card-header .card-fav-btn.is-calm-icon.is-active:hover,
.cyber-card-header .card-fav-btn.is-calm-icon.is-active:active {
  color: var(--cyber-pink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cyber-card-header .card-fav-btn.is-calm-icon.is-active svg {
  opacity: 1;
  /* Override idle `fill: none` on the svg (inheritance blocked active path fill in some browsers). */
  fill: currentColor;
}
.cyber-card-header .card-fav-btn.is-calm-icon.is-active svg path {
  fill: currentColor !important;
  stroke: currentColor;
}

/* Landing + Auth */
.daf-landing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--color-text);
  font-family: var(--font-sans);
}
.daf-landing[hidden],
#app-shell[hidden],
#access-blocked[hidden] {
  display: none !important;
}

/* Sticky nav */
.daf-landing-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg-app) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, transparent);
}
.daf-landing-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  z-index: 1;
}
.daf-landing-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.daf-landing-bar .daf-auth-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
}
.daf-landing-bar .daf-landing-footer-book-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 11px;
}
.daf-landing-bar .hud-pref-panel {
  right: 0;
  left: auto;
}
.daf-landing-brand {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyber-cyan);
  text-decoration: none;
  min-width: 0;
  line-height: 1.25;
}
.daf-landing-brand-author {
  display: none;
}
.daf-landing-brand-sep {
  display: inline-block;
  margin: 0 0.35em;
  font-weight: 500;
  opacity: 0.7;
}
.daf-landing-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}
.daf-landing-nav-link {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.daf-landing-nav-link:hover,
.daf-landing-nav-link:focus-visible {
  color: var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 10%, transparent);
}
.daf-landing-nav-link.is-active {
  color: var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
}
@media (max-width: 960px) {
  .daf-landing-nav {
    display: none;
  }
}
.daf-landing-curriculum,
.daf-landing-screens,
.daf-landing-pricing {
  scroll-margin-top: 64px;
}

/* Scroll Reveal Animations */
.daf-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.daf-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.daf-curriculum-block:nth-child(2) {
  transition-delay: 0.1s;
}
.daf-curriculum-block:nth-child(3) {
  transition-delay: 0.2s;
}
.daf-pricing-card:nth-child(2) {
  transition-delay: 0.1s;
}
.daf-pricing-card:nth-child(3) {
  transition-delay: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .daf-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .daf-landing.is-animated .daf-landing-hero-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.daf-auth-btn:focus-visible{
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 3px;
}

/* Hero */
.daf-landing-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(100svh - 57px);
  min-height: calc(100vh - 57px);
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px) clamp(56px, 9vw, 104px);
  overflow: hidden;
}
.daf-landing-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.daf-landing-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.daf-landing.is-animated .daf-landing-hero-img.is-active {
  animation: daf-landing-hero-img 1.4s ease forwards;
}
.daf-landing.is-animated .daf-landing-hero-img.is-active.is-settled {
  animation: none;
  opacity: 1;
  transform: scale(1);
}
.daf-landing.is-animated .daf-landing-hero-media.is-rotating .daf-landing-hero-img {
  animation: none;
  transform: scale(1);
}
.daf-landing.is-animated .daf-landing-hero-media.is-rotating .daf-landing-hero-img.is-active {
  opacity: 1;
}
.daf-landing-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--bg-app) 28%, transparent) 0%,
      color-mix(in srgb, var(--bg-app) 12%, transparent) 40%,
      color-mix(in srgb, var(--bg-app) 6%, transparent) 70%,
      color-mix(in srgb, var(--bg-app) 10%, transparent) 100%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--bg-app) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg-app) 22%, transparent) 22%,
      transparent 45%
    );
  pointer-events: none;
}
.daf-landing-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 24px);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-app) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg-app) 35%, transparent),
    0 12px 40px color-mix(in srgb, #0f172a 18%, transparent);
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}
.daf-landing.is-animated .daf-landing-hero-inner {
  animation:
    daf-landing-hero-copy 0.85s ease 0.18s forwards,
    daf-hero-float 7s ease-in-out 1.05s infinite alternate;
}
.daf-landing-hero-brand {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--cyber-cyan);
}


.daf-landing-hero-lead {
  margin: 0 auto 28px;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 100%;
}
.daf-landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
  margin-bottom: 16px;
}
.daf-landing-hero-actions .daf-auth-btn-primary {
  min-width: 14rem;
  padding: 12px 2.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  color: var(--cyber-cyan-contrast, #0b1220);
}
.daf-landing-hero-actions .daf-auth-btn-primary:hover {
  color: var(--cyber-cyan-contrast, #0b1220);
}
.daf-landing-hero-actions .daf-auth-btn-buy {
  min-width: 14rem;
  padding: 12px 2.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  color: #0b1220;
}
.daf-landing-hero-actions .daf-auth-btn-buy:hover {
  color: #0b1220;
}
.daf-landing-hero-trial {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Landing Sections Shared Containers */
.daf-landing-curriculum-inner,
.daf-landing-screens-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Section Header Shared */
.daf-section-header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 44px;
}
.daf-section-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyber-cyan);
  margin-bottom: 8px;
}
.daf-landing-section-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
}
.daf-landing-section-lead {
  margin: 0 auto;
  max-width: 38rem;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Curriculum Overview */
.daf-landing-curriculum {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 5vw, 48px);
  background-color: var(--bg-card);
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 10%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 4%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 4%, transparent) 24px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 4%, var(--bg-card)) 0%, var(--bg-card) 60%, color-mix(in srgb, var(--bg-app) 35%, var(--bg-card)) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
}
:is([data-theme="light"]) .daf-landing-curriculum {
  background-color: #f3f6fa;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 8%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.5%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.5%, transparent) 24px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 3%, #f3f6fa) 0%, #f3f6fa 60%, #eaf0f7 100%);
}
[data-theme="sepia"] .daf-landing-curriculum {
  background-color: #f4ece0;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 8%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.8%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.8%, transparent) 24px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 3.5%, #f4ece0) 0%, #f4ece0 60%, #ece0ce 100%);
}
.daf-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.daf-curriculum-block {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 20%, var(--color-border));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(8px);
}
.daf-curriculum-block:hover {
  transform: translateY(-4px);
  border-color: var(--cyber-cyan);
  box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.24), 0 0 16px -2px color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
}
.daf-curriculum-block-header {
  padding: 16px 20px;
  background: color-mix(in srgb, var(--cyber-cyan) 10%, var(--bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.daf-curriculum-letter {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--cyber-cyan);
  color: #ffffff;
}
.daf-curriculum-block-title {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0;
}
.daf-curriculum-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.daf-curriculum-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
}
.daf-curriculum-item:last-child {
  border-bottom: none;
}
.daf-curriculum-nr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 10%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  margin-top: 1px;
}
.daf-curriculum-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.daf-curriculum-name {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.daf-curriculum-sub {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

@media (max-width: 960px) {
  .daf-curriculum-grid {
    grid-template-columns: 1fr;
  }
}

/* Screenshot grid (Unified Subtle Diagonal Cyber Pattern) */
.daf-landing-screens {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 112px) clamp(20px, 5vw, 48px);
  background-color: color-mix(in srgb, var(--bg-app) 92%, #000000 8%);
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 10%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 4%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 4%, transparent) 24px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-app) 96%, #000000 4%) 0%, color-mix(in srgb, var(--bg-app) 88%, #000000 12%) 50%, color-mix(in srgb, var(--bg-app) 95%, #000000 5%) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
}
:is([data-theme="light"]) .daf-landing-screens {
  background-color: #f3f6fa;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 8%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.5%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.5%, transparent) 24px
    ),
    linear-gradient(180deg, #f0f4fa 0%, #e2ebf5 50%, #edf2f8 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
}
[data-theme="sepia"] .daf-landing-screens {
  background-color: #f4ece0;
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, color-mix(in srgb, var(--cyber-cyan) 8%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.8%, transparent) 23px,
      color-mix(in srgb, var(--cyber-cyan) 3.8%, transparent) 24px
    ),
    linear-gradient(180deg, #ece4d2 0%, #ded2bd 50%, #e8dfcd 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
}
.daf-landing-screens .daf-landing-section-title {
  text-align: center;
  margin-bottom: 40px;
}
.daf-landing-shot-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 36px);
}
.daf-landing-shot {
  min-width: 0;
}
.daf-landing-window {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 25%, var(--color-border));
  background: var(--bg-card);
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.daf-landing-window:hover,
.daf-landing-window:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--cyber-cyan) 65%, var(--color-border));
  box-shadow:
    0 32px 64px -14px rgba(0, 0, 0, 0.5),
    0 0 24px -2px color-mix(in srgb, var(--cyber-cyan) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyber-cyan) 45%, transparent) inset;
}
.daf-landing-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-card) 85%, #000000 15%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  user-select: none;
}
.daf-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.daf-window-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.85;
}
.daf-dot-red {
  background-color: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
.daf-dot-yellow {
  background-color: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}
.daf-dot-green {
  background-color: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.daf-window-address {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 36px;
}
.daf-landing-shot-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10.5;
  background: var(--bg-card);
}
.daf-landing-shot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.35s ease;
}
.daf-landing-window:hover .daf-landing-shot-media img {
  transform: scale(1.02);
}

/* Testimonials Strip (Konzept C) */
.daf-landing-testimonials {
  padding: clamp(36px, 5vw, 54px) clamp(20px, 4vw, 40px);
  background: var(--bg-body, #14171f);
  border-top: 1px solid var(--color-border, #2b3544);
  position: relative;
  overflow: hidden;
}
:is([data-theme="light"]) .daf-landing-testimonials {
  background: #f8fafc;
}
[data-theme="sepia"] .daf-landing-testimonials {
  background: #f4eedd;
}
.daf-landing-testimonials-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.daf-testimonial-badge {
  display: inline-block;
  font-family: var(--font-mono, 'PT Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyber-cyan, #06b6d4);
  background: var(--cyber-cyan-dim, rgba(6, 182, 212, 0.12));
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.daf-testimonial-track {
  position: relative;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.daf-testimonial-card {
  display: none !important;
  width: 100%;
}
.daf-testimonial-card.is-active {
  display: block !important;
}

/* 2.1: Flüssiges Auffüllen (Gold-Fill Meter) */
.daf-testimonial-stars {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  letter-spacing: 0.22em;
  line-height: 1;
  margin: 0 auto 14px;
  user-select: none;
}
.daf-stars-bg {
  color: var(--color-border, #3b4252);
  letter-spacing: 0.22em;
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-stars-bg {
  color: #cbd5e1;
}
.daf-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.22em;
  color: var(--cyber-amber, #f59e0b);
  filter: drop-shadow(0 0 3.5px rgba(245, 158, 11, 0.5));
}
.daf-testimonial-card.is-active .daf-stars-fill {
  animation: dafStarMeterFill 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) 0.05s forwards;
}
@keyframes dafStarMeterFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* 1.B: Unschärfe-Fokus (Blur-to-Clear) */
.daf-testimonial-card.is-active .daf-testimonial-quote {
  animation: dafBlurToFocus 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.daf-testimonial-card.is-active .daf-testimonial-author {
  animation: dafBlurToFocus 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes dafBlurToFocus {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.96) translateY(4px);
  }
  50% {
    opacity: 0.85;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .daf-testimonial-card.is-active .daf-stars-fill {
    animation: none;
    width: 100%;
  }
  .daf-testimonial-card.is-active .daf-testimonial-quote,
  .daf-testimonial-card.is-active .daf-testimonial-author {
    animation: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
}
.daf-testimonial-quote {
  margin: 0 auto 16px;
  font-family: var(--font-body, 'PT Sans', sans-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.18rem);
  line-height: 1.55;
  color: var(--color-text, #e2e8f0);
  max-width: 680px;
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-testimonial-quote {
  color: var(--color-text-strong, #0f172a);
}
.daf-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.daf-testimonial-name {
  font-weight: 700;
  color: var(--color-text-strong, #ffffff);
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-testimonial-name {
  color: var(--color-text-strong, #0f172a);
}
.daf-testimonial-role {
  color: var(--color-text-muted, #8492a6);
}
.daf-testimonial-role::before {
  content: "·";
  margin-right: 8px;
  color: var(--color-border);
}
.daf-testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.daf-testimonial-nav-btn {
  background: var(--bg-card, #1c212b);
  border: 1px solid var(--color-border, #2b3544);
  color: var(--color-text-muted, #8492a6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.daf-testimonial-nav-btn svg {
  pointer-events: none;
}
.daf-testimonial-nav-btn:hover {
  border-color: var(--cyber-cyan);
  color: var(--cyber-cyan);
  background: var(--cyber-cyan-dim);
}
.daf-testimonial-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daf-testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border, #2b3544);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.daf-testimonial-dot.is-active {
  background: var(--cyber-cyan, #06b6d4);
  width: 22px;
  border-radius: 4px;
}

/* Pricing Section & Interactive Cards */
.daf-landing-pricing {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 5vw, 48px) calc(clamp(64px, 8vw, 96px) + 54px);
  background-color: var(--bg-body);
  background-image:
    radial-gradient(ellipse 75% 60% at 50% 28%, color-mix(in srgb, var(--cyber-cyan) 20%, transparent) 0%, transparent 75%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--cyber-cyan) 22%, transparent) 1.2px, transparent 0),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 12%, var(--bg-app)) 0%, color-mix(in srgb, var(--cyber-cyan) 4%, var(--bg-app)) 45%, var(--bg-body) 100%);
  background-size: 100% 100%, 28px 28px, 100% 100%;
  background-position: center, center, center;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent);
}
:is([data-theme="light"]) .daf-landing-pricing {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 28%, color-mix(in srgb, var(--cyber-cyan) 16%, transparent) 0%, transparent 75%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--cyber-cyan) 18%, transparent) 1.2px, transparent 0),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 11%, #ffffff) 0%, color-mix(in srgb, var(--cyber-cyan) 3.5%, #ffffff) 45%, #ffffff 100%);
}
[data-theme="sepia"] .daf-landing-pricing {
  background-color: #f7f2e7;
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 28%, color-mix(in srgb, var(--cyber-cyan) 16%, transparent) 0%, transparent 75%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--cyber-cyan) 18%, transparent) 1.2px, transparent 0),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-cyan) 12%, #f2eadc) 0%, color-mix(in srgb, var(--cyber-cyan) 4%, #f2eadc) 45%, #f7f2e7 100%);
}
.daf-landing-pricing-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.daf-landing-pricing .daf-landing-section-title {
  margin-bottom: 12px;
}
.daf-landing-pricing .daf-landing-section-lead {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.daf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
  text-align: left;
}
.daf-pricing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 10px;
  padding: 26px 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  contain: layout style;
  will-change: transform, box-shadow;
}
.daf-pricing-card:hover,
.daf-pricing-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--cyber-cyan);
  border-color: var(--cyber-cyan);
}
/* Best Value / Featured Tier */
.daf-pricing-card.is-featured {
  border: 2px solid var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 5%, var(--bg-card));
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.15);
  transform: scale(1.02);
}
.daf-pricing-card.is-featured:hover,
.daf-pricing-card.is-featured:focus-within {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 14px 34px rgba(6, 182, 212, 0.24), 0 0 0 1px var(--cyber-cyan);
}
.daf-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyber-cyan);
  color: var(--cyber-cyan-contrast, #0b1220);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.daf-pricing-card.is-featured .daf-pricing-btn,
.daf-pricing-card.is-featured .daf-auth-btn-primary {
  color: var(--cyber-cyan-contrast, #0b1220) !important;
  font-weight: 700;
}
.daf-pricing-card.is-featured .daf-pricing-btn:hover,
.daf-pricing-card.is-featured .daf-auth-btn-primary:hover {
  color: var(--cyber-cyan-contrast, #0b1220) !important;
}
.daf-pricing-badge-subtle {
  background: color-mix(in srgb, var(--color-text) 16%, var(--bg-card));
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.daf-pricing-plan-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-strong, #ffffff);
}
.daf-pricing-rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.daf-pricing-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text-strong, #ffffff);
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -0.02em;
}
.daf-pricing-period {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.daf-pricing-billing {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.daf-pricing-save {
  color: var(--cyber-cyan);
  font-weight: 600;
}
.daf-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.daf-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.35;
}
.daf-pricing-check {
  color: var(--cyber-cyan);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.daf-pricing-devices {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}
.daf-pricing-device-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  line-height: 0;
}
.daf-pricing-device-icon {
  width: 1.05em;
  height: 1.05em;
  min-width: 15px;
  min-height: 15px;
  display: block;
}
.daf-pricing-action {
  margin-top: auto;
}
.daf-pricing-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  min-height: 40px;
  padding: 8px 14px;
}
.daf-pricing-btn:focus-visible {
  outline: 3px solid var(--cyber-cyan);
  outline-offset: 2px;
}
.daf-pricing-guarantee {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}
.daf-pricing-split {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 28px;
}
.daf-pricing-split-line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-border) 80%, transparent);
}
.daf-pricing-split-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.daf-pricing-split-modal {
  margin: 8px 0 14px;
}
.daf-pricing-sub-notice {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--cyber-cyan) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 35%, var(--color-border));
}
.daf-pricing-sub-notice-modal {
  margin: 0 0 14px;
}
.daf-pricing-card-monthly.is-coming-soon:hover,
.daf-pricing-card-monthly.is-coming-soon:focus-within {
  transform: none;
}
[data-plan-kind="subscription"].is-unavailable,
[data-plan-kind="subscription"]:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.daf-pricing-sub {
  width: 100%;
  margin-bottom: 8px;
}
.daf-pricing-card-monthly {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
  gap: 8px 40px;
  align-items: center;
  padding: 28px 32px 24px;
  text-align: left;
  border: 2px solid color-mix(in srgb, var(--cyber-cyan) 55%, var(--color-border));
  background: color-mix(in srgb, var(--cyber-cyan) 5%, var(--bg-card));
  contain: none;
}
.daf-pricing-card-monthly:hover,
.daf-pricing-card-monthly:focus-within {
  transform: translateY(-3px);
}
.daf-pricing-card-monthly .daf-pricing-badge {
  left: 32px;
  transform: none;
}
.daf-pricing-monthly-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.daf-pricing-card-monthly .daf-pricing-plan-title {
  margin-bottom: 4px;
}
.daf-pricing-card-monthly .daf-pricing-billing {
  margin: 6px 0 16px;
  padding-bottom: 0;
  border-bottom: 0;
  max-width: 34ch;
}
.daf-pricing-card-monthly .daf-pricing-action {
  margin-top: 0;
  width: 100%;
}
.daf-pricing-card-monthly .daf-pricing-btn,
.daf-pricing-card-monthly .daf-auth-btn-primary {
  width: auto;
  min-width: 200px;
  color: var(--cyber-cyan-contrast, #0b1220) !important;
  font-weight: 700;
}
.daf-pricing-card-monthly .daf-pricing-btn:hover,
.daf-pricing-card-monthly .daf-auth-btn-primary:hover {
  color: var(--cyber-cyan-contrast, #0b1220) !important;
}
.daf-pricing-card-monthly .daf-pricing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 0;
  flex-grow: 0;
  padding-left: 32px;
  border-left: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
}
.daf-pricing-card-monthly .daf-pricing-features li:last-child {
  grid-column: 1 / -1;
}
.daf-modal-plans-sub {
  margin-bottom: 16px;
}
.account-sub-panel {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyber-cyan) 6%, var(--bg-card));
}
.account-sub-kicker {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.account-sub-status {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--color-text-strong, var(--color-text));
}
.account-sub-hint {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.account-sub-panel .daf-auth-btn {
  width: 100%;
  justify-content: center;
}
/* Pricing Motivational Quote Card - Discreet & Compact */
.daf-pricing-quote-card {
  margin: 28px auto 0;
  max-width: 480px;
  background: color-mix(in srgb, var(--cyber-cyan) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 22%, var(--color-border));
  border-radius: 10px;
  padding: 13px 20px;
  text-align: center;
  position: relative;
}
:is([data-theme="light"]) .daf-pricing-quote-card {
  background: color-mix(in srgb, var(--cyber-cyan) 4%, #f8fafc);
  border-color: color-mix(in srgb, var(--cyber-cyan) 20%, #e2e8f0);
}
[data-theme="sepia"] .daf-pricing-quote-card {
  background: color-mix(in srgb, var(--cyber-cyan) 4%, #f7f2e7);
  border-color: color-mix(in srgb, var(--cyber-cyan) 20%, #dfd5be);
}
.daf-quote-item {
  position: relative;
}
.daf-quote-text {
  margin: 0;
  font-family: var(--font-body, 'PT Sans', sans-serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-muted, #94a3b8);
}
.daf-quote-author {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, 'PT Sans', sans-serif);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  opacity: 0.85;
}
.daf-quote-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}
.daf-quote-divider-line {
  flex: 1;
  max-width: 36px;
  height: 1px;
  background: color-mix(in srgb, var(--color-border) 60%, transparent);
}
.daf-quote-divider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cyber-cyan-dim, rgba(6, 182, 212, 0.12));
  color: var(--cyber-cyan, #06b6d4);
  flex-shrink: 0;
}
.daf-quote-divider-badge svg {
  display: block;
  width: 10px;
  height: 10px;
}
.daf-quote-text-reply {
  color: var(--color-text, #f1f5f9);
  font-weight: 600;
  font-size: 0.95rem;
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-quote-text-reply {
  color: var(--color-text-strong, #0f172a);
}
.daf-quote-author-reply {
  color: var(--cyber-cyan, #06b6d4);
  font-weight: 600;
  font-size: 0.78rem;
  opacity: 1;
}

/* Responsive Pricing Cards */
@media (max-width: 960px) {
  .daf-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    gap: 32px;
  }
  .daf-pricing-card.is-featured {
    transform: none;
  }
  .daf-pricing-card.is-featured:hover,
  .daf-pricing-card.is-featured:focus-within {
    transform: translateY(-4px);
  }
  .daf-pricing-card-monthly {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    gap: 18px;
    padding: 28px 20px 22px;
  }
  .daf-pricing-card-monthly .daf-pricing-badge {
    left: 50%;
    transform: translateX(-50%);
  }
  .daf-pricing-card-monthly .daf-pricing-billing {
    max-width: none;
  }
  .daf-pricing-card-monthly .daf-pricing-features {
    grid-template-columns: 1fr;
    padding-left: 0;
    border-left: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--cyber-cyan) 28%, var(--color-border));
  }
  .daf-pricing-card-monthly .daf-pricing-features li:last-child {
    grid-column: auto;
  }
  .daf-pricing-card-monthly .daf-pricing-btn {
    width: 100%;
  }
}

/* Toast Notifications */
.daf-toast-container {
  position: fixed;
  bottom: 64px;
  right: 24px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  width: calc(100vw - 48px);
  pointer-events: none;
}
.daf-toast {
  pointer-events: auto;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: var(--font-sans, 'PT Sans', sans-serif);
  font-size: 0.92rem;
  line-height: 1.4;
  background: var(--bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: dafToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.daf-toast.is-error {
  border-color: #ef4444;
  background: color-mix(in srgb, #ef4444 14%, var(--bg-card));
  color: #fecaca;
}
.daf-toast.is-success {
  border-color: #10b981;
  background: color-mix(in srgb, #10b981 14%, var(--bg-card));
  color: #a7f3d0;
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-toast.is-error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #f87171;
}
:is([data-theme="light"], [data-theme="sepia"]) .daf-toast.is-success {
  background: #dcfce7;
  color: #166534;
  border-color: #4ade80;
}
.daf-toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.daf-toast-close:hover {
  opacity: 1;
}
@keyframes dafToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Closing CTA */


/* Footer */
/* Footer: Fixed at bottom with centered legal links */
.daf-landing-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding: 0;
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-app) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--cyber-cyan) 25%, var(--color-border));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  box-sizing: border-box;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
/* Collapsed chrome: Produktinfo + Rechtliche Hinweise (phone adds Kontakt) */
.daf-landing-footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  min-width: 0;
  padding: 10px 24px;
  box-sizing: border-box;
}
.daf-landing-footer-phone-link,
.daf-landing-footer-phone-sep {
  display: none;
}
.daf-landing-footer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px dashed transparent;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: inherit;
  transition: color 0.2s, border-color 0.2s;
}
.daf-landing-footer-toggle:hover,
.daf-landing-footer-toggle:focus-visible {
  color: var(--cyber-cyan);
  border-bottom-color: var(--cyber-cyan);
  outline: none;
}
.daf-landing-footer.is-collapsed .daf-landing-footer-panel {
  display: none;
}
.daf-landing-footer:not(.is-collapsed) .daf-landing-footer-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0 24px 10px;
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--cyber-cyan) 18%, var(--color-border));
}
.daf-landing-footer-panel {
  display: none;
}


.daf-landing-footer-book-btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--cyber-cyan) 20%, var(--bg-card));
  border: 1px solid var(--cyber-cyan);
  color: var(--cyber-cyan);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.daf-landing-footer-book-btn:hover {
  background: var(--cyber-cyan);
  color: #0b1220;
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.45);
}
.daf-landing-footer-book-btn:active {
  transform: scale(0.97);
}
.daf-landing-footer-book-btn:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 2px;
}
.daf-landing-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
}
.daf-landing-footer-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s, border-color 0.2s;
}
button.daf-landing-footer-link {
  appearance: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px dashed transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
}
.daf-landing-footer-link:hover,
.daf-landing-footer-link:focus-visible {
  color: var(--cyber-cyan);
  border-bottom-color: var(--cyber-cyan);
  outline: none;
}

.daf-landing-footer-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.daf-landing-footer-year {
  flex: 0 0 auto;
}
.daf-landing-footer-copy .footer-author-link,
footer .footer-copy .footer-author-link {
  color: var(--cyber-cyan);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--cyber-cyan) 55%, transparent);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.daf-landing-footer-copy .footer-author-link:hover,
.daf-landing-footer-copy .footer-author-link:focus-visible,
footer .footer-copy .footer-author-link:hover,
footer .footer-copy .footer-author-link:focus-visible {
  color: var(--cyber-cyan);
  border-bottom-color: var(--cyber-cyan);
  outline: none;
}
/* Public legal pages on landing */
.daf-landing-legal {
  flex: 1;
  width: 100%;
  padding: 32px 24px 80px;
}
.daf-landing-legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.daf-landing-legal-inner:has(.kontakt-page) {
  max-width: 920px;
}
.daf-landing-legal-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyber-cyan);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.daf-landing-legal-back:hover,
.daf-landing-legal-back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.daf-landing-legal-body .nav-console {
  display: none;
}
.daf-landing-legal-body .cards-grid {
  margin: 0;
}
.daf-landing-legal[hidden],
#landing-marketing[hidden] {
  display: none !important;
}

/* Access blocked (shared chrome, simple content) */
.daf-access-blocked .daf-landing-blocked-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 36rem;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.daf-landing-blocked-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}
.daf-landing-blocked-lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Auth buttons */
.daf-auth-btn {
  appearance: none;
  border: 1px solid var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 12%, transparent);
  color: var(--cyber-cyan);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.daf-auth-btn:hover {
  background: color-mix(in srgb, var(--cyber-cyan) 22%, transparent);
}
.daf-auth-btn:active {
  transform: translateY(1px);
}
.daf-auth-btn-primary {
  background: var(--cyber-cyan);
  color: var(--cyber-cyan-contrast, #0b1220);
  border-color: var(--cyber-cyan);
  font-weight: 700;
}
.daf-auth-btn-primary:hover {
  background: color-mix(in srgb, var(--cyber-cyan) 88%, white);
  color: var(--cyber-cyan-contrast, #0b1220);
}
.daf-auth-btn-buy {
  background: var(--cyber-orange, #f59e0b);
  color: #0b1220;
  border-color: var(--cyber-orange, #f59e0b);
  font-weight: 700;
}
.daf-auth-btn-buy:hover {
  background: color-mix(in srgb, var(--cyber-orange, #f59e0b) 88%, white);
  color: #0b1220;
}
.daf-auth-btn-ghost {
  border-color: var(--color-text-muted);
  color: var(--color-text);
  background: transparent;
}
.daf-auth-btn-ghost:hover {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.daf-auth-btn-hud {
  padding: 6px 10px;
  font-size: 0.8rem;
  min-height: 0;
  border-radius: 6px;
}

/* Equal-height HUD controls in the logged-in app shell (top-right).
   Search, layout/theme, keyboard shortcuts, Abmelden — not landing, legal, or in-page search. */
@media (min-width: 641px) {
  html:not([data-layout="phone"]) #app-shell .terminal-hud {
    --hud-control-height: 32px;
  }

  /* Tablet/compact: größere Touch-Targets (~40px), Desktop >1024 bleibt 32px */
  @media (max-width: 1024px) {
    html:not([data-layout="phone"]) #app-shell .terminal-hud {
      --hud-control-height: 40px;
    }
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-search .search-input,
  html:not([data-layout="phone"]) #app-shell .hud-tools .layout-mode-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-pref-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .daf-auth-btn-hud {
    box-sizing: border-box !important;
    height: var(--hud-control-height) !important;
    min-height: var(--hud-control-height) !important;
    max-height: var(--hud-control-height) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-pref-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .daf-auth-btn-hud {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-search .search-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--hud-control-height) !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-pref-btn {
    width: var(--hud-control-height) !important;
    min-width: var(--hud-control-height) !important;
    padding: 0 !important;
  }

  /* Keyboard control: same 32×32 chrome; outline glyph (not filled). */
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    opacity: 1 !important;
  }
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn:not(.is-pulsing) {
    color: var(--color-text) !important;
    transform: none !important;
    filter: none !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn:hover,
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn.is-active {
    border-color: var(--cyber-cyan) !important;
    color: var(--cyber-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
    background-color: var(--bg-card) !important;
  }
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn:not(.is-pulsing):hover,
  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn:not(.is-pulsing).is-active {
    transform: none !important;
    filter: none !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn .kbd-btn-icon {
    box-sizing: content-box !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .layout-mode-btn,
  html:not([data-layout="phone"]) #app-shell .hud-tools .daf-auth-btn-hud {
    width: auto !important;
    min-width: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html:not([data-layout="phone"]) #app-shell .hud-tools .kbd-trigger-btn:active,
  html:not([data-layout="phone"]) #app-shell .hud-tools .hud-pref-btn:active,
  html:not([data-layout="phone"]) #app-shell .hud-tools .layout-mode-btn:active,
  html:not([data-layout="phone"]) #app-shell .hud-tools .daf-auth-btn-hud:active {
    transform: scale(0.93) !important;
  }
}

.hud-access-expires {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 50%, var(--color-border));
  border-radius: 6px;
  color: var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 10%, transparent);
  box-sizing: border-box;
}
.hud-access-expires[hidden] {
  display: none !important;
}
.daf-auth-btn-block {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
}


.daf-auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.daf-auth-field[hidden] {
  display: none !important;
}
.daf-auth-modal {
  max-width: 440px;
}
.daf-auth-modal .kbd-modal-title {
  color: var(--cyber-cyan);
}
.daf-auth-signup-intro {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-app);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.daf-auth-signup-intro[hidden],
.daf-auth-pwd-hints[hidden],
.daf-auth-legal-fields[hidden] {
  display: none !important;
}
.daf-auth-pwd-hints {
  margin: 6px 0 10px;
  padding: 8px 12px;
  background: var(--bg-app);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.daf-auth-pwd-hints-title {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.daf-auth-pwd-hints-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text);
}
.daf-auth-pwd-hints-list li + li {
  margin-top: 2px;
}
.daf-auth-legal-fields {
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.daf-auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-text);
  cursor: pointer;
}
.daf-auth-checkbox {
  margin-top: 2px;
  accent-color: var(--cyber-cyan);
  cursor: pointer;
  flex-shrink: 0;
}
.daf-auth-link {
  color: var(--cyber-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.daf-auth-link:hover {
  color: color-mix(in srgb, var(--cyber-cyan) 80%, white);
}
.daf-auth-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.daf-auth-label:first-child,
.daf-auth-field:first-child .daf-auth-label {
  margin-top: 0;
}
.daf-auth-password-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 0;
}
.daf-auth-password-header .daf-auth-label {
  margin-top: 0;
}
.daf-auth-forgot-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.daf-auth-forgot-link:hover {
  color: var(--cyber-cyan);
}
.daf-auth-forgot-link[hidden] {
  display: none !important;
}
.daf-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--bg-app);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.daf-auth-input::placeholder {
  color: var(--color-text-muted);
}
.daf-auth-input:hover {
  border-color: color-mix(in srgb, var(--cyber-cyan) 35%, var(--color-border));
}
.daf-auth-input:focus {
  outline: none;
  border-color: var(--cyber-cyan);
  box-shadow: var(--glow-cyan);
}
.daf-auth-error {
  margin: 8px 0 0;
  color: #dc2626;
  font-size: 0.88rem;
}
.daf-auth-info {
  margin: 10px 0 2px;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.daf-auth-modal .daf-auth-btn-block {
  margin-top: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.daf-auth-toggle {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 0;
  align-self: center;
}
.daf-auth-toggle:hover {
  color: var(--cyber-cyan);
}
.daf-auth-toggle:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 3px;
}

.daf-auth-success-modal {
  max-width: 420px;
  max-height: min(90vh, 520px);
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
}
.daf-auth-success-modal .kbd-modal-header {
  flex-shrink: 0;
}
.daf-auth-success-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: 16px 14px 12px;
  background: var(--bg-app);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 35%, var(--color-border));
  border-radius: 8px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}
.daf-auth-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyber-cyan) 18%, transparent);
  border: 2px solid var(--cyber-cyan);
  color: var(--cyber-cyan);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.daf-auth-success-title {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cyber-cyan);
  margin-bottom: 8px;
}
.daf-auth-success-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 18px;
  text-align: left;
}
.daf-auth-success-modal .daf-auth-btn-block {
  margin-top: 4px;
}

@media (max-height: 720px), (max-width: 480px) {
  .daf-auth-success-modal {
    max-height: calc(100vh - 24px);
  }
  .daf-auth-success-card {
    padding: 14px 12px 10px;
  }
  .daf-auth-success-text {
    font-size: 0.88rem;
  }
}

/* Buy / Pricing Modal */
.daf-buy-modal {
  max-width: 440px;
}
.daf-buy-modal-body {
  display: flex;
  flex-direction: column;
}
.daf-buy-price-lead {
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 4px;
}
.daf-buy-subline {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.daf-modal-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.daf-modal-plan-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-app);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.daf-modal-plan-btn:hover,
.daf-modal-plan-btn:focus-visible {
  border-color: var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 10%, var(--bg-card));
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  outline: none;
}
.daf-modal-plan-btn.is-featured {
  border: 2px solid var(--cyber-cyan);
  background: color-mix(in srgb, var(--cyber-cyan) 6%, var(--bg-card));
}
.daf-modal-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.daf-modal-plan-duration {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-strong, #ffffff);
  font-family: var(--font-sans);
}
.daf-modal-plan-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.daf-modal-plan-price {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--cyber-cyan);
  white-space: nowrap;
}
.daf-modal-plan-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--cyber-cyan);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.daf-buy-steps {
  background: var(--bg-app);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.daf-buy-steps-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--color-text);
}
.daf-buy-steps-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
}
.daf-buy-steps-list li + li {
  margin-top: 5px;
}
.daf-buy-note {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
}
.daf-buy-device-hint {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 18px;
}
.daf-buy-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.daf-buy-actions .daf-auth-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}
.daf-buy-actions[hidden] {
  display: none !important;
}

@keyframes daf-landing-hero-img {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes daf-landing-hero-copy {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes daf-hero-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  30% {
    transform: translate3d(8px, -9px, 0);
  }
  65% {
    transform: translate3d(-7px, -4px, 0);
  }
  100% {
    transform: translate3d(4px, -11px, 0);
  }
}

@media (max-width: 920px) {
  
  .daf-landing-section-lead {
    margin-bottom: 36px;
  }
}

/* Landing-Header: kompakter auf Tablet (768–920), Touch ≥40px; Nav bleibt ≤960 hidden */
@media (max-width: 920px) and (min-width: 561px) {
  .daf-landing-bar {
    padding: 10px 16px;
    gap: 10px;
  }
  .daf-landing-bar-actions {
    gap: 8px;
  }
  .daf-landing-bar .daf-auth-btn,
  .daf-landing-bar .daf-landing-footer-book-btn,
  .daf-landing-bar .hud-pref-btn {
    min-height: 40px;
    height: 40px;
    touch-action: manipulation;
  }
  .daf-landing-brand {
    font-size: 0.88rem;
  }
}

@media (max-width: 560px) {
  .daf-landing-bar {
    padding: 12px 16px;
  }
  .daf-landing-bar-actions {
    gap: 8px;
  }
  .daf-landing-hero {
    align-items: flex-end;
    padding: 40px 16px 56px;
  }
  .daf-landing-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .daf-landing-hero-actions .daf-auth-btn {
    width: 100%;
  }
  
  .daf-landing-screens {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 520px) {
  .daf-landing-shot-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daf-landing-hero-img,
  .daf-landing-hero-inner,
  .daf-landing.is-animated .daf-landing-hero-img,
  .daf-landing.is-animated .daf-landing-hero-img.is-active,
  .daf-landing.is-animated .daf-landing-hero-inner {
    animation: none;
    opacity: 0;
    transform: none;
    transition: none;
  }
  .daf-landing-hero-img.is-active,
  .daf-landing.is-animated .daf-landing-hero-img.is-active {
    opacity: 1;
  }
  .daf-landing-hero-inner,
  .daf-landing.is-animated .daf-landing-hero-inner {
    opacity: 1;
  }
  .daf-auth-btn,
  .daf-landing-window,
  .daf-landing-shot-media img {
    transition: none;
  }
  .daf-landing-window:hover,
  .daf-landing-window:focus-within {
    transform: none;
  }
}

/* Kontakt page: Bild links über volle Kartenhöhe, Formular rechts */
.kontakt-page .kontakt-card {
  overflow: hidden;
}
.kontakt-page .kontakt-card > .cyber-card-header {
  display: none;
}
.kontakt-page .cyber-card-body {
  padding: 0;
}
.kontakt-page .kontakt-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1.28fr);
  align-items: stretch;
}
.kontakt-page .kontakt-visual {
  position: relative;
  margin: 0;
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border-right: 1px solid var(--color-border);
}
.kontakt-page .kontakt-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  border-radius: 0;
}
.kontakt-page .kontakt-main {
  min-width: 0;
  padding: 18px;
}
.kontakt-page .kontakt-main > .cyber-card-header,
.kontakt-page .kontakt-card-title,
.kontakt-page .kontakt-main > h1 {
  display: none !important;
}
@media (max-width: 900px) {
  .kontakt-page .kontakt-layout {
    grid-template-columns: 1fr;
  }
  .kontakt-page .kontakt-visual {
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    min-height: 280px;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .kontakt-page .kontakt-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 560px) {
  .kontakt-page .kontakt-main {
    padding: 14px;
  }
  .kontakt-page .kontakt-visual {
    min-height: 220px;
    aspect-ratio: 3 / 2;
  }
}

/* Kontakt / Feedback form */
.daf-feedback-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-width: 36rem;
}
.daf-feedback-form .daf-auth-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.daf-feedback-form .daf-auth-label:first-of-type {
  margin-top: 0;
}
.daf-feedback-message {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.45;
  font-family: var(--font-sans);
}
.daf-feedback-chapter-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.daf-feedback-chapter-wrap[hidden] {
  display: none !important;
}
.daf-feedback-chapter {
  margin: 0;
}
.daf-feedback-form select.daf-auth-input {
  appearance: auto;
  cursor: pointer;
}
.daf-feedback-form .daf-auth-input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 35%, transparent);
}
.daf-feedback-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.daf-feedback-field-error {
  margin: 0 0 4px;
  color: #dc2626;
  font-size: 0.88rem;
  line-height: 1.4;
}
.legal-page .daf-feedback-field-error {
  margin: 0 0 4px;
  color: #dc2626;
}
.daf-feedback-field-error[hidden] {
  display: none !important;
}
.daf-feedback-status,
.legal-page .daf-feedback-status {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.daf-feedback-status.is-error {
  color: #dc2626;
}
.daf-feedback-status.is-info {
  color: var(--color-text-muted);
}
.daf-feedback-status[hidden],
.daf-feedback-success[hidden],
.daf-feedback-form[hidden],
.daf-appointment-success[hidden] {
  display: none !important;
}

/* Product Info Modal */
.daf-productinfo-modal {
  max-width: 720px;
  width: 94vw;
}

.daf-productinfo-modal-body {
  max-height: min(80vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 6px 12px 2px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-text);
}

.daf-productinfo-modal-body p {
  margin: 0 0 12px 0;
}

.daf-productinfo-lead-in {
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

.daf-productinfo-modal-body::-webkit-scrollbar {
  width: 6px;
}
.daf-productinfo-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.daf-productinfo-modal-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cyber-cyan) 30%, transparent);
  border-radius: 3px;
}

.daf-productinfo-section {
  margin-bottom: 24px;
}

.daf-productinfo-h3 {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cyber-cyan);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--cyber-cyan) 25%, transparent);
  letter-spacing: 0.02em;
}

.daf-productinfo-h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 16px 0 6px 0;
}

.daf-productinfo-card {
  background: color-mix(in srgb, var(--bg-app) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyber-cyan) 30%, var(--color-border));
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0 16px;
}

.daf-productinfo-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.daf-productinfo-row:last-child {
  margin-bottom: 0;
}
.daf-productinfo-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyber-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.daf-productinfo-val {
  font-size: 0.92rem;
  color: var(--color-text);
}

.daf-productinfo-list {
  margin: 8px 0 14px 0;
  padding-left: 22px;
}
.daf-productinfo-list li {
  margin-bottom: 6px;
}

.daf-productinfo-highlight {
  background: color-mix(in srgb, var(--cyber-cyan) 10%, var(--bg-card));
  border-left: 3px solid var(--cyber-cyan);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin: 16px 0;
}
.daf-productinfo-highlight strong {
  display: block;
  font-size: 0.98rem;
  color: var(--cyber-cyan);
  margin-bottom: 4px;
}
.daf-productinfo-highlight p {
  margin: 0;
}

.daf-productinfo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--cyber-cyan) 25%, transparent);
}

.daf-productinfo-actions .daf-auth-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 0.92rem;
}

/* Online appointment modal */
.daf-appointment-modal-body {
  max-height: min(78vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px 4px;
}
.daf-appointment-modal .daf-feedback-form {
  max-width: none;
  margin-top: 12px;
}
.daf-appointment-optional {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.92em;
}
.daf-appointment-kontakt-hint {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--text-muted, #64748b);
  text-align: center;
}
.daf-appointment-success {
  margin-top: 8px;
  text-align: center;
}
.daf-appointment-success-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--cyber-cyan);
  box-shadow: 0 0 16px rgba(0, 242, 255, 0.35);
}
.daf-appointment-success .info-box {
  text-align: left;
}
.daf-appointment-label-line {
  display: inline;
  white-space: normal;
}
.daf-appointment-form .daf-label-required > span:first-child:not(.daf-appointment-label-line)::after {
  content: " *";
  color: var(--cyber-cyan);
  font-weight: 700;
}
.daf-appointment-form .daf-required-mark {
  color: var(--cyber-cyan);
  font-weight: 700;
}
.daf-appointment-submit.daf-auth-btn-primary {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--cyber-cyan) 78%, #0b1220);
  border-color: color-mix(in srgb, var(--cyber-cyan) 70%, #fff);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
}
.daf-appointment-submit.daf-auth-btn-primary:hover {
  color: #fff;
  background: color-mix(in srgb, var(--cyber-cyan) 55%, #0b1220);
  border-color: var(--cyber-cyan);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyber-cyan) 28%, transparent), 0 10px 22px rgba(6, 182, 212, 0.28);
  transform: translateY(-1px);
}
.daf-appointment-submit.daf-auth-btn-primary:active {
  color: #fff;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}
.daf-appointment-submit.daf-auth-btn-primary:focus-visible {
  color: #fff;
  outline: 2px solid color-mix(in srgb, var(--cyber-cyan) 65%, #fff);
  outline-offset: 2px;
}
.daf-appointment-success .daf-auth-btn {
  margin-top: 12px;
}
.daf-feedback-success .info-box {
  margin-bottom: 16px;
}
.daf-auth-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}
.daf-landing-blocked-main .daf-auth-btn {
  margin-top: 24px;
  align-self: flex-start;
}

@media (max-width: 560px) {
  .daf-feedback-form {
    max-width: none;
  }
  .daf-landing-blocked-main .daf-auth-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Wegweiser: 06 Visuelle Erklärung Component Styles
   ========================================================================== */
/* ==========================================================================
   Wegweiser: Visuelle Modell- und Erklärungsansichten (Startseite & Innenseiten)
   ========================================================================== */
.vg-integrated-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--text-primary, #0f172a);
}

/* Static Full-Width Top Image Container */
.vg-static-image-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.vg-static-screenshot {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 200px;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 7px;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hotspots on Static Image */
.vg-hotspot {
  position: absolute;
  z-index: 30;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.vg-hotspot.is-active {
  z-index: 45;
}

.vg-hotspot.is-dimmed {
  opacity: 0.25;
  filter: grayscale(0.85);
  pointer-events: auto;
}

.vg-hotspot.is-dimmed:hover {
  opacity: 0.85;
  filter: grayscale(0);
}

.vg-pin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--cyber-cyan, #0284c7);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
  border: 2px solid #ffffff;
  position: relative;
}

.vg-pin::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--cyber-cyan, #0284c7);
  opacity: 0.35;
  z-index: -1;
  animation: pulse-ring 2s infinite;
}

.vg-hotspot.is-dimmed .vg-pin::after {
  animation: none;
  opacity: 0;
}

.vg-hotspot:hover .vg-pin,
.vg-hotspot.is-active .vg-pin {
  transform: scale(1.35);
  box-shadow: 0 0 16px var(--cyber-cyan, #0284c7);
}

/* Tooltip (Erklärwolke) Base */
.vg-tooltip {
  position: absolute;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

/* Default position (above) */
.vg-hotspot .vg-tooltip {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

/* Top-edge spots (open BELOW pin so it never clips top) */
#ww-hspot-1 .vg-tooltip,
#ww-hspot-2 .vg-tooltip,
#ww-hspot-3 .vg-tooltip,
#ww-hspot-4 .vg-tooltip,
#ww-hspot-5 .vg-tooltip,
#ww-hspot-6 .vg-tooltip,
#ww-hspot-7 .vg-tooltip {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}

/* Left-edge spots: align LEFT so it never clips left */
#ww-spot-1 .vg-tooltip,
#ww-spot-6 .vg-tooltip {
  left: 0;
  transform: translateY(4px);
}

/* Right-edge spots: align RIGHT so it never clips right */
#ww-spot-2 .vg-tooltip,
#ww-spot-5 .vg-tooltip,
#ww-spot-7 .vg-tooltip {
  left: auto;
  right: 0;
  transform: translateY(4px);
}

/* Hover & Active / Clicked States */
.vg-hotspot:hover .vg-tooltip,
.vg-hotspot.is-active .vg-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

#ww-hspot-5:hover .vg-tooltip,
#ww-hspot-5.is-active .vg-tooltip {
  transform: translateX(-50%) translateY(0) !important;
}

/* 2. EXPLANATION CARDS */
.vg-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.vg-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  outline: none;
}

/* 01 Startseite + 02 Innenseiten: sanfter Seitenfarben-Verlauf auf Erklärkarten */
#auf-ein-wort-view-nav .vg-card,
#auf-ein-wort-view-visuell .vg-card {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-app) 68%, var(--color-border)),
      transparent 58%
    ),
    var(--bg-surface, var(--bg-card, #ffffff));
}

.vg-card:hover {
  border-color: var(--cyber-cyan, #0284c7);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vg-card.is-active {
  background: var(--bg-surface-subtle, #f8fafc);
  box-shadow: 0 0 0 2px var(--cyber-cyan, #0284c7), 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--cyber-cyan, #0284c7);
}

#auf-ein-wort-view-nav .vg-card.is-active,
#auf-ein-wort-view-visuell .vg-card.is-active {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-app) 48%, var(--color-border)),
      transparent 62%
    ),
    var(--bg-surface-subtle, color-mix(in srgb, var(--bg-app) 55%, var(--bg-card, #ffffff)));
}

.vg-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}

.vg-card-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--cyber-cyan, #0284c7);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vg-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
  line-height: 1.3;
}

.vg-card-hotkey {
  margin-left: auto;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  background: var(--bg-surface-subtle, #f1f5f9);
  border: 1px solid var(--border-color, #cbd5e1);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--text-secondary, #475569);
  font-weight: 600;
}

.vg-card-desc {
  font-size: 0.86rem;
  color: var(--text-secondary, #334155);
  line-height: 1.48;
  margin: 0;
}

@media (max-width: 768px) {
  .vg-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== UX: Lernpfad auf Startseite, leere Zustände, Erstbesuch-Tour ===== */
.home-progress-weakness {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan, #22d3ee) 40%, transparent);
  border-left: 3px solid var(--cyber-cyan, #22d3ee);
  background: color-mix(in srgb, var(--cyber-cyan, #22d3ee) 10%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cyber-cyan, #22d3ee) 12%, transparent);
}
.home-progress-weakness[hidden] { display: none !important; }

.portal-empty-state {
  list-style: none;
  margin: 0;
  padding: 18px 16px 14px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--color-text-muted, #64748b) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-elevated, #0f172a) 40%, transparent);
}
.portal-empty-icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--cyber-gold, #fbbf24);
}
.portal-empty-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-text, #e2e8f0);
}
.portal-empty-lead {
  margin: 0 auto 14px;
  max-width: 36em;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text-muted, #94a3b8);
}
.portal-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.portal-empty-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--color-text-muted, #64748b) 45%, transparent);
  background: transparent;
  color: var(--color-text, #e2e8f0);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.portal-empty-btn:hover {
  border-color: var(--cyber-cyan, #22d3ee);
  background: color-mix(in srgb, var(--cyber-cyan, #22d3ee) 10%, transparent);
}
.portal-empty-btn.is-primary {
  border-color: color-mix(in srgb, var(--cyber-cyan, #22d3ee) 55%, transparent);
  background: color-mix(in srgb, var(--cyber-cyan, #22d3ee) 18%, transparent);
  font-weight: 600;
}

.portal-onboarding {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color-scheme: light;
}
.portal-onboarding[hidden] { display: none !important; }
.portal-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,
      color-mix(in srgb, var(--cyber-cyan, #06b6d4) 12%, transparent),
      transparent 70%),
    rgba(248, 250, 252, 0.86);
  backdrop-filter: blur(5px);
}
.portal-onboarding-card {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  padding: 26px 24px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 28%, #cbd5e1);
  background:
    radial-gradient(ellipse 120% 80% at 100% 0%,
      color-mix(in srgb, var(--cyber-pink, #ec4899) 10%, transparent),
      transparent 55%),
    radial-gradient(ellipse 100% 70% at 0% 100%,
      color-mix(in srgb, var(--cyber-cyan, #06b6d4) 14%, transparent),
      transparent 50%),
    #ffffff;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #0f172a;
  overflow: hidden;
}
.portal-onboarding-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cyber-cyan, #06b6d4),
    var(--cyber-pink, #ec4899)
  );
}
.portal-onboarding-kicker {
  margin: 0 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber-cyan, #0891b2);
  font-weight: 700;
}
.portal-onboarding-title {
  margin: 0 0 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-weight: 700;
}
.portal-onboarding-text {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
}
.portal-onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.portal-onboarding-skip {
  appearance: none;
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 0.8rem;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.portal-onboarding-skip:hover { color: #0f172a; }

.portal-onboarding-card .st-action-btn {
  width: 100%;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--cyber-cyan, #06b6d4) 40%, #cbd5e1);
  border-left: 3px solid var(--cyber-cyan, #0891b2);
  background: #f8fafc;
  color: #0e7490;
}
.portal-onboarding-card .st-action-btn:hover {
  background: color-mix(in srgb, var(--cyber-cyan, #06b6d4) 10%, #ffffff);
  border-color: var(--cyber-cyan, #0891b2);
}
.portal-onboarding-card .st-action-btn.is-primary {
  background: linear-gradient(
    135deg,
    var(--cyber-cyan, #22d3ee),
    color-mix(in srgb, var(--cyber-cyan, #0891b2) 70%, var(--cyber-pink, #ec4899))
  );
  border-color: transparent;
  border-left-width: 0;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cyber-cyan, #06b6d4) 35%, transparent);
}
.portal-onboarding-card .st-action-btn.is-primary:hover {
  filter: brightness(0.96);
  color: #ffffff;
}

@media (max-width: 480px) {
  .portal-onboarding { padding: 16px; }
  .portal-onboarding-card { padding: 22px 18px 16px; }
  .portal-onboarding-title { font-size: 1.28rem; }
}