/* ============================================================
   Fylgra -- geteiltes Stylesheet fuer die statischen Marketing-Seiten
   ============================================================
   Wird per <link rel="stylesheet" href="/landing.css" /> von
   landing.html (Startseite) UND demo.html (interaktive Tour) eingebunden.
   Enthaelt: Tokens, Basis-Styles, Nav/Footer, Buttons, Panels, die
   Discord-Chrome-Mocks (.dc-*), Ticket-Mocks (.tk-*), Hero-/Dashboard-
   Mocks (.hv-*), den Dashboard-Rahmen (.dsh-*), die Rechte-Matrix
   (.mx-*) und das Schublade/Tab-Pattern (.dr-*).

   Bewusst KEINE Kopplung an app/web/src/app.css (Web-Dashboard):
   gleiche Optik/Begriffe, aber eigene, getrennte Definitionen -- s.
   docs/DESIGN.md Paragraph 6 ("Landing-Mocks", "Aufklappbare
   Funktions-Karte", "Vorschau-Schublade"). Aendert app.css eine dieser
   Klassen spaeter anders, bricht das hier nicht automatisch, muss aber
   ggf. manuell nachgezogen werden.

   Seitenspezifisches, das wirklich nur eine Seite betrifft, bleibt
   inline im jeweiligen <style>-Block der HTML-Datei.
   ============================================================ */

  img { max-width: 100%; height: auto; }
  [hidden] { display: none !important; }
  .auth-note {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    max-width: calc(100vw - 32px);
    background: #1a1c22;
    border: 1px solid var(--warn);
    color: #eef1f6;
    font: 500 13.5px/1.4 "Hanken Grotesk", system-ui, sans-serif;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    text-align: center;
  }
  /* Mehrzeiliger Hinweis (auth_error=login_binding): keine Pille, schmaler,
     bleibt stehen, bis man ihn antippt oder den Knopf nimmt. */
  .auth-note.auth-note-lang {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 14px;
    width: min(560px, calc(100vw - 32px));
    text-align: left;
    padding: 12px 10px 12px 16px;
    cursor: pointer;
  }
  .auth-note-zu {
    flex: none;
    min-width: 32px;
    min-height: 32px;
    margin: -6px 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font: 400 22px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  .auth-note-zu:focus-visible { outline: 2px solid var(--warn); outline-offset: 1px; }
  /* Hinweis „This page is also available in English →“ (sprachhinweis.js,
     nur auf den deutschen Seiten, nur bei nicht-deutscher Browsersprache).
     Absolut statt fixed: Er steht beim Ankommen unter der Kopfleiste und
     rollt mit dem Hero weg, statt beim Lesen dauerhaft im Bild zu bleiben.
     z-index unter der Kopfleiste (50), damit die ihn beim Rollen verdeckt.
     Hero und Demo-Einstieg beginnen erst bei ~132 px, darüber ist Platz. */
  .lang-hint {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 32px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 4px 3px 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    font: 500 13.5px/1.4 "Hanken Grotesk", system-ui, sans-serif;
    color: var(--ink-dim);
  }
  .lang-hint a {
    color: var(--signal-bright);
    text-decoration: none;
    border-radius: 6px;
  }
  .lang-hint a:hover { text-decoration: underline; }
  .lang-hint a:focus-visible,
  .lang-hint-zu:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .lang-hint-zu {
    flex: none;
    min-width: 36px;
    min-height: 36px;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--ink-dim);
    font: 400 20px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  .lang-hint-zu:hover { color: var(--ink); background: var(--panel-2); }
  /* ============================================================
     Fylgra — dunkles "Operator-Konsole"-Setup, ein blaues Signal.
     Bewusst einthemig (Nacht). Alle Farben explizit gesetzt.
     Die Token-Werte spiegeln app/web/src/theme.css — Referenz: docs/DESIGN.md.
     (Standalone-Datei, darum hier dupliziert statt @import.)
     ============================================================ */
  :root {
    --ground: #0a0c11;
    --ground-2: #0c0f16;
    --panel: #11141c;
    --panel-2: #161b26;
    --line: #262d3c;
    --line-soft: #1a2029;
    --ink: #eef1f6;
    --ink-dim: #9aa1b0;
    --ink-faint: #7c8494;
    --signal: #4c8cff;
    --signal-bright: #86b2ff;
    --signal-deep: #15264a;
    --glow: rgba(76, 140, 255, 0.5);
    --glow-soft: rgba(76, 140, 255, 0.13);
    --live: #3ddc84;
    --deny: #ff6b6b;
    --warn: #ffcf5c;
    --radius: 14px;
    --radius-sm: 9px;
    --maxw: 1140px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
      sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ambientes Signal-Leuchten + feines Raster */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(900px 520px at 50% -8%, rgba(76, 140, 255, 0.16), transparent 70%),
      radial-gradient(700px 500px at 88% 8%, rgba(76, 140, 255, 0.07), transparent 70%);
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
  }

  /* ---------- Marke ---------- */
  .mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, #17294c, #101a30);
    border: 1px solid #2a3d63;
    color: var(--signal-bright);
    box-shadow: 0 0 18px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex: none;
  }
  .mark svg {
    width: 17px;
    height: 17px;
  }
  .wordmark {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--ink);
  }
  .wordmark b {
    color: var(--signal);
    font-weight: 700;
  }

  /* ---------- Nav ---------- */
  header.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
    border-bottom: 1px solid transparent;
  }
  header.nav.scrolled {
    background: rgba(10, 12, 17, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line-soft);
  }
  .nav-in {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 66px;
  }
  .nav-links {
    display: flex;
    gap: 26px;
    margin-left: 10px;
  }
  .nav-links a {
    font-size: 14.5px;
    color: var(--ink-dim);
    transition: color 0.15s ease;
  }
  .nav-links a:hover {
    color: var(--ink);
  }
  .nav-links a[aria-current="page"] {
    color: var(--signal-bright);
    font-weight: 600;
  }
  .nav-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .t-short {
    display: none;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 14.5px/1 "Hanken Grotesk", sans-serif;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.15s ease,
      background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }
  .btn svg {
    width: 15px;
    height: 15px;
  }
  /* Mock-Buttons in den Ticket-Vorschauen sind reale <button disabled> ohne
     Funktion – Hover/Fokus/Zeiger müssen still bleiben, sonst wirken sie
     bedienbar. Sichtbare Optik bleibt unverändert (kein Aufhellen/Dimmen). */
  .btn:disabled {
    cursor: default;
  }
  .btn-primary {
    background: linear-gradient(180deg, #4f8bf6, #356fe0);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 26px -8px var(--glow),
      0 0 26px -6px var(--glow-soft);
  }
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px -8px var(--glow),
      0 0 44px -4px var(--glow-soft);
  }
  .btn-ghost {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--line);
    color: var(--ink);
  }
  .btn-ghost:hover {
    border-color: var(--signal);
    color: #fff;
    box-shadow: 0 0 22px -8px var(--glow);
  }
  .btn-lg {
    padding: 15px 24px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* ---------- Sektionen ---------- */
  .band {
    /* padding-block statt Kurzform: Abschnitte tragen `class="band wrap"`, und
       die Kurzform setzte die seitlichen 24px von `.wrap` auf 0 zurueck -- auf
       schmalen Geraeten klebte der Text dadurch am Displayrand. */
    padding-block: clamp(72px, 13vh, 132px);
    position: relative;
    z-index: 1;
  }
  .band + .band {
    padding-top: 0;
  }
  section[id] {
    scroll-margin-top: 84px;
  }

  .eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
  }
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--signal);
    opacity: 0.6;
  }

  h1,
  h2,
  h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
  }
  h2 {
    font-size: clamp(28px, 4vw, 40px);
  }
  .lede {
    color: var(--ink-dim);
    font-size: clamp(16px, 2vw, 18.5px);
    max-width: 60ch;
    margin: 16px 0 0;
  }

  /* ---------- Hero ---------- */
  .hero {
    /* wie bei `.band`: seitliches Padding kommt aus `.wrap` auf demselben
       Element und darf hier nicht ueberschrieben werden. */
    padding-block: 138px clamp(80px, 12vh, 120px);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 54px;
    align-items: center;
  }
  .hero h1 {
    font-size: clamp(34px, 5.4vw, 58px);
  }
  .hero .lede {
    font-size: clamp(16.5px, 2vw, 19px);
    margin-top: 22px;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
  }
  .hero-meta {
    margin-top: 22px;
    display: flex;
    /* Zeilenabstand enger als der Abstand zwischen den Merksaetzen: bei
       gleichem `gap` franste der Block unter den Knoepfen aus. */
    gap: 9px 22px;
    flex-wrap: wrap;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    color: var(--ink-faint);
  }
  .hero-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .hero-meta .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 8px var(--live);
  }

  /* Hero-Visual: zwei reale Bausteine aus der Dashboard-Übersicht. */
  .hero-vis {
    position: relative;
  }
  .panel {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  }
  .hv-dash {
    padding: 16px;
    position: relative;
    z-index: 1;
  }
  .hv-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--ink-dim);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .hv-head .tabs {
    margin-left: auto;
    display: flex;
    gap: 12px;
    color: var(--ink-faint);
  }
  .hv-head .tabs b {
    color: var(--signal-bright);
    font-weight: 500;
  }
  .hv-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    background: var(--ground-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--live);
    font-size: 13px;
    font-weight: 700;
  }
  .hv-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 8px var(--live);
  }
  .hv-status small {
    margin-left: 3px;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 500;
  }
  .hv-card {
    background: var(--ground-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 4px 14px 12px;
  }
  .hv-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 7px;
  }
  .hv-card-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
  }
  .hv-card-head svg,
  .hv-plan-preview svg {
    width: 14px;
    height: 14px;
    color: var(--signal-bright);
    vertical-align: -2px;
    margin-right: 5px;
  }
  .hv-action {
    margin-left: auto;
    color: var(--ink-dim);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 4px 7px;
    font-size: 10.5px;
    font-weight: 600;
  }
  .hv-plan-preview h4 {
    margin: 0 0 6px;
    font-size: 13px;
  }
  .hv-plan-preview .foot {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--ink-faint);
  }

  .hv-poll {
    position: absolute;
    right: 0;
    bottom: -34px;
    width: min(310px, 84%);
    z-index: 2;
    padding: 4px 14px 12px;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.72), 0 0 46px -10px var(--glow-soft);
  }
  .embed {
    padding-bottom: 2px;
  }
  .embed h4 {
    margin: 0 0 9px;
    font-size: 13.5px;
    font-weight: 700;
  }
  .opt {
    font-size: 12px;
    margin-top: 8px;
  }
  .opt .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: var(--ink-dim);
  }
  .opt .bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }
  .opt .fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--signal), var(--signal-bright));
    width: var(--w);
  }
  .opt.lead .fill {
    box-shadow: 0 0 14px -1px var(--glow);
  }
  .embed .foot {
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--ink-faint);
    font-family: "JetBrains Mono", monospace;
  }
  html.js .hv-poll .fill {
    animation: fillbar 1s var(--ease) 0.35s both;
  }
  @keyframes fillbar {
    from {
      width: 14%;
    }
    to {
      width: var(--w);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .hv-poll .fill {
      animation: none;
    }
  }

  /* ---------- Dashboard-Startseite (Attrappe von DashboardView.tsx) ----------
     Erweitert dieselbe .hv-*-Familie wie die Hero-Vorschau (s. DESIGN.md §5) –
     eine Kartenoptik für alle "kompakten Dashboard-Ansicht"-Mocks der Landing. */
  .hv-dash-full {
    padding: 4px 20px 22px;
  }
  .hv-page-head {
    margin: 15px 0 13px;
  }
  .hv-page-head h4 {
    margin: 0 0 4px;
    font-size: 15px;
  }
  .hv-page-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-faint);
  }
  .hv-time {
    margin-left: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--ink-faint);
  }
  .hv-guild-av {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--signal-deep);
    color: var(--signal-bright);
    font-size: 11px;
    font-weight: 700;
    flex: none;
  }
  .hv-action.ghost {
    margin-left: 6px;
    background: transparent;
  }
  .hv-danger {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(255, 207, 92, 0.08);
    color: var(--warn);
    font-size: 12px;
  }
  .hv-danger svg {
    width: 13px;
    height: 13px;
    flex: none;
  }
  .hv-danger .mono {
    margin-left: 2px;
    font-family: "JetBrains Mono", monospace;
    color: var(--ink-faint);
    font-size: 11px;
  }
  .hv-server-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .kpi-n {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .kpi-l {
    font-size: 10.5px;
    color: var(--ink-faint);
  }
  .hv-sync-hint {
    margin-top: 10px;
    font-size: 11px;
    color: var(--ink-faint);
  }
  .hv-changes h4 {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--ink-dim);
  }
  .hv-change {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px dashed var(--line-soft);
    font-size: 12px;
  }
  .hv-change:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
  .hv-change .mono {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .hv-ticket-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-dim);
    padding: 0 14px 10px;
  }
  .hv-section-label {
    margin: 20px 0 9px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .hv-section-label::before {
    content: "// ";
    color: var(--signal);
    opacity: 0.6;
  }
  /* Rubrik in der App-Attrappe (Rechte-Simulator auf Landing und Demo), Maße wie `.section-label` der App
     (paul S-3). Bleibt ein `div`: die Attrappe ist Bild, keine Gliederung der Seite. */
  .section-label {
    margin: 18px 0 9px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .section-label:first-child { margin-top: 0; }
  .section-label::before { content: "// "; content: "// " / ""; color: var(--signal); opacity: 0.6; }
  .hv-mods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mod-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--ground-2);
  }
  .mod-card.off {
    opacity: 0.55;
  }
  .mod-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .mod-card-top svg {
    width: 14px;
    height: 14px;
    color: var(--signal-bright);
    flex: none;
  }
  .mod-card-name {
    font-size: 12px;
    font-weight: 600;
  }
  .hdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
    flex: none;
  }
  .mod-card-line {
    font-size: 10.5px;
    color: var(--ink-faint);
    padding-left: 21px;
  }
  @media (max-width: 560px) {
    .hv-server-cols,
    .hv-mods {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Reveal-on-scroll ---------- */
  .reveal {
    opacity: 1;
    transform: none;
  }
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  html.js .reveal.in {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* ---------- Funktionen ---------- */
  .feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 44px;
  }
  .feat {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .feat:hover {
    border-color: var(--line);
    background: var(--panel-2);
    transform: translateY(-2px);
  }
  .feat-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ficon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--signal-deep);
    color: var(--signal-bright);
    box-shadow: inset 0 0 18px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    flex: none;
  }
  .ficon svg {
    width: 19px;
    height: 19px;
  }
  .feat h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .feat p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-dim);
    line-height: 1.55;
  }
  .tag {
    margin-left: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
  }
  .tag.live {
    color: var(--live);
    background: rgba(61, 220, 132, 0.1);
  }
  .tag.live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 7px var(--live);
  }
  .tag.soon {
    color: var(--ink-dim);
    border: 1px solid var(--line);
  }
  .feat.wide {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: linear-gradient(120deg, var(--panel-2), var(--panel));
  }
  .feat.wide .txt h3 {
    margin-bottom: 4px;
  }
  .feat.wide .txt p {
    max-width: 62ch;
  }

  /* ---------- Ticket-System ---------- */
  .chk-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 12px;
  }
  .chk-list li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    color: var(--ink-dim);
  }
  .chk-list li svg {
    width: 17px;
    height: 17px;
    color: var(--signal);
    flex: none;
    margin-top: 3px;
  }
  .chk-list li b {
    color: var(--ink);
    font-weight: 700;
  }
  .scope-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 0 0 10px;
  }
  .scope-tag::before {
    content: "// ";
    color: var(--signal);
    opacity: 0.6;
  }
  .tk-mock {
    display: flex;
    flex-direction: column;
  }
  .tk-mock > .dc-modal,
  .tk-mock > .panel + .panel,
  .tk-mock > .tk-link-hint + .panel {
    margin-top: 14px;
  }
  .tk-mock.tk-mock-wide {
    grid-column: 1 / -1;
  }

  /* Das Formular-Modal, das ein Klick auf einen Panel-Button öffnet
     (bot.py::_FieldModal) – Discord-Dialog-Chrome, kein Fylgra-Panel. */
  .dc-modal {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }
  .dc-modal-head {
    font-weight: 700;
    font-size: 15px;
    padding: 15px 17px 13px;
  }
  .dc-modal-body {
    padding: 0 17px 4px;
  }
  .dc-lbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .dc-lbl + .dc-input,
  .dc-lbl + .dc-radio,
  .dc-lbl + .dc-upload {
    margin-bottom: 15px;
  }
  .dc-input {
    height: 34px;
    border-radius: 4px;
    background: var(--ground-2);
    border: 1px solid #20242c;
  }
  .dc-input.dc-input-lg {
    height: 58px;
  }
  .dc-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
  }
  .dc-radio span {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .dc-radio i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-faint);
    flex: none;
  }
  .dc-radio span.on i {
    border-color: #5865f2;
    border-width: 5px;
  }
  .dc-upload {
    border: 1px dashed var(--line);
    border-radius: 4px;
    padding: 13px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-faint);
  }
  .dc-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 13px 17px;
    background: var(--ground-2);
    border-top: 1px solid var(--line-soft);
  }
  .dc-btn.dc-btn-link {
    background: none;
    color: var(--ink);
    padding: 8px 4px;
  }

  /* Discord-Chrome: Nachricht mit Bot-Avatar + Embed. Discord-Blurple (#5865F2)
     ist bewusst die einzige Fremdfarbe hier – alles andere kommt aus den Tokens. */
  .dc-channel {
    max-width: 640px;
    padding: 18px 20px 20px;
  }
  .dc-channel.dc-wide {
    max-width: none;
  }
  .dc-msg {
    display: flex;
    gap: 13px;
    max-width: 600px;
  }
  .dc-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
  }
  .dc-avatar svg {
    width: 20px;
    height: 20px;
  }
  .dc-body {
    flex: 1;
    min-width: 0;
  }
  .dc-headrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .dc-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
  }
  .dc-appbadge {
    background: #5865f2;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 4px;
  }
  .dc-embed {
    border-left: 4px solid #5865f2;
    background: var(--ground-2);
    border-radius: 4px 8px 8px 4px;
    padding: 11px 13px 13px;
  }
  .dc-embed.open {
    border-left-color: var(--live);
  }
  .dc-embed h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
  }
  .dc-embed p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--ink-dim);
  }
  .dc-fields-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 8px;
  }
  .dc-fields-grid .dc-field {
    min-width: 110px;
  }
  .dc-field + .dc-field {
    margin-top: 8px;
  }
  .dc-field-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .dc-field-value {
    font-size: 12.5px;
    color: var(--ink-dim);
    line-height: 1.55;
  }
  .dc-mention {
    background: var(--signal-deep);
    color: var(--signal-bright);
    padding: 0 5px;
    border-radius: 3px;
    font-weight: 500;
  }
  .dc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12.5px/1 "Hanken Grotesk", sans-serif;
    padding: 8px 14px;
    border-radius: 4px;
    border: 0;
  }
  .dc-btn.dc-btn-primary {
    background: #5865f2;
    color: #fff;
  }
  .dc-btn.dc-btn-secondary {
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .dc-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--ground-2);
    color: var(--ink-faint);
    font-size: 12.5px;
  }
  .dc-select svg {
    width: 12px;
    height: 12px;
    margin-left: auto;
  }

  /* Einrichtungsassistent – dieselben Klassennamen wie im Dashboard
     (app.css), damit Optik und Begriffe 1:1 übereinstimmen. */
  .tk-wizard {
    max-width: 640px;
    padding: 20px 22px 22px;
  }
  /* Kompakter zweiter Assistenten-Block: Schritt 3 „Panel", der die
     Nachricht links oben erzeugt. Gleiche Bausteine wie der Formular-Block. */
  .tk-panelstep .tk-sel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .tk-lab {
    display: block;
    font-size: 12px;
    color: var(--ink-dim);
    margin-bottom: 5px;
  }
  .tk-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    background: var(--ground-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
  }
  .tk-sel svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--ink-faint);
  }
  .tk-pick {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    padding: 7px 11px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--ground-2);
    margin-bottom: 6px;
  }
  .tk-pick .tk-grip {
    margin-top: 0;
  }
  .tk-pick .tk-grip svg {
    width: 9px;
    height: 13px;
  }
  /* Lesehilfe unter "Rechte-Auflösung": die drei Schritte sind Schichten, keine
     widersprüchlichen Aussagen. Bewusst als Anmerkung der Seite gesetzt – kursiv
     in der Fliesstext-Schrift statt im Mono-"//"-Stil, damit sie niemand für
     einen Teil des Dashboards hält. Das echte Dashboard zeigt diesen Satz nicht. */
  .sim-hint {
    margin: 2px 0 10px;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-faint);
    border-left: 2px solid var(--line);
    padding-left: 9px;
  }
  .tk-link-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin: 9px 0 0;
  }
  .tk-link-hint::before {
    content: "// ";
    color: var(--signal);
    opacity: 0.6;
  }
  .tk-wizard-head {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
  }
  .tk-steps {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .tk-substeps {
    margin: 0 0 10px 4px;
    padding-left: 10px;
    border-left: 2px solid var(--line);
  }
  .tk-substeps .tk-step {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .tk-step {
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ink-faint);
    font-weight: 600;
    font-size: 11.5px;
    border: 1px solid var(--line);
  }
  .tk-step.on {
    color: var(--signal-bright);
    border-color: var(--signal);
    background: var(--signal-deep);
  }
  .tk-step.done {
    color: var(--ink-dim);
    border-color: var(--line);
  }
  .tk-hint {
    color: var(--ink-faint);
    font-size: 12.5px;
    margin: 0 0 14px;
  }
  .tk-field-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--ground-2);
    margin-bottom: 7px;
  }
  .tk-field-row:last-child {
    margin-bottom: 0;
  }
  .tk-grip {
    color: var(--ink-faint);
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: none;
  }
  .tk-field-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-faint);
    font-family: "JetBrains Mono", monospace;
  }
  .tk-field-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
  }
  .tk-kind {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--signal-bright);
    background: var(--signal-deep);
    border: 1px solid #2c3d61;
    padding: 2px 8px;
    border-radius: 6px;
    flex: none;
  }
  .tk-flabel {
    color: var(--ink);
  }
  .tk-freq,
  .tk-fopts {
    color: var(--ink-faint);
    font-size: 12px;
  }
  .tk-wizard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }

  /* Ticket-Verlauf im Web-Dashboard: dieselben .tk-msg-Klassen wie in app.css. */
  .tk-webview {
    padding: 18px 20px 20px;
  }
  .tk-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin: 0 0 10px;
  }
  .tk-msg {
    padding: 9px 11px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--ground-2);
    margin-bottom: 8px;
  }
  .tk-msg:last-of-type {
    margin-bottom: 0;
  }
  .tk-msg.note {
    border-color: var(--warn);
    background: var(--panel-2);
  }
  .tk-msg-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-dim);
    margin-bottom: 4px;
  }
  .tk-msg-head .when {
    margin-left: auto;
    color: var(--ink-faint);
    font-size: 11px;
  }
  .tk-src {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--ink-faint);
    font-style: normal;
  }
  .tk-msg-body {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
  }
  .tk-composer {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
  }
  .tk-composer-box {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--ground-2);
    color: var(--ink-faint);
    font-size: 13px;
  }
  .tk-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  /* ---------- Dashboard-Sektion ---------- */
  .split {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 54px;
    align-items: start;
    margin-top: 8px;
  }
  .split ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 12px;
  }
  .split li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    color: var(--ink-dim);
  }
  .split li svg {
    width: 17px;
    height: 17px;
    color: var(--signal);
    flex: none;
    margin-top: 3px;
  }
  .split li b {
    color: var(--ink);
    font-weight: 700;
  }

  /* Matrix-Mock = Rollen × Kanäle, wie die echte Rechte-Matrix (Kompakt-Ansicht).
     Die frühere Rollen×Rechte-Variante kommt evtl. als 2. Matrix (per-Kanal). */
  .matrix {
    padding: 15px 16px 16px;
    font-size: 12px;
  }
  .mx-scope {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    padding: 0 2px 12px;
  }
  .mx-scope::before {
    content: "// ";
    color: var(--signal);
    opacity: 0.6;
  }
  .matrix .mrow {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
  }
  .matrix .mrow:not(.h) {
    border-top: 1px solid var(--line-soft);
  }
  .matrix .mrow.h {
    color: var(--ink-faint);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 8px;
    align-items: end;
  }
  .matrix .mrow.h > span {
    text-align: center;
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .matrix .mrow.h > .role-h {
    text-align: left;
  }
  .matrix .role {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    padding: 11px 0;
  }
  .matrix .rdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
  }
  .matrix .mx-c {
    display: grid;
    place-items: center;
    border-radius: 4px;
  }
  .matrix .mx-c svg {
    width: 15px;
    height: 15px;
  }
  .matrix .mx-c.y {
    background: rgba(61, 220, 132, 0.07);
    color: var(--live);
  }
  .matrix .mx-c.n {
    color: var(--ink-faint);
    opacity: 0.5;
  }
  .matrix .mx-c.iscat {
    box-shadow: inset 3px 0 0 var(--signal);
  }
  .matrix .mrow.h .iscat {
    box-shadow: none;
    color: var(--signal);
    font-weight: 700;
  }
  .matrix .mbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
  }
  .pill {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--signal-bright);
    background: var(--signal-deep);
    padding: 4px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--signal-bright);
    box-shadow: 0 0 7px var(--signal);
  }
  .mbar .btn {
    margin-left: auto;
    padding: 8px 13px;
    font-size: 12.5px;
  }

  /* ---------- Roadmap ---------- */
  .road {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 44px;
    position: relative;
    /* align-items:start statt stretch – Spalte 01 hat spürbar mehr Einträge
       als 02/03; ohne das würden die kürzeren Karten auf gleiche Höhe
       gedehnt und unten leer wirken. */
    align-items: start;
  }
  .phase {
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 22px;
  }
  .phase .no {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--signal);
    letter-spacing: 0.1em;
  }
  .phase h3 {
    font-size: 16px;
    margin: 6px 0 14px;
  }
  .phase ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
  }
  .phase li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ink-dim);
  }
  .phase li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
    flex: none;
  }
  .phase.now {
    border-color: #2c3d61;
    box-shadow: 0 0 40px -14px var(--glow-soft);
  }
  .phase.now li::before {
    background: var(--signal);
    box-shadow: 0 0 8px var(--signal);
  }
  .phase.now ul {
    gap: 7px;
  }

  /* ---------- CTA ---------- */
  .cta {
    text-align: center;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(40px, 7vw, 70px) 24px;
    box-shadow: 0 0 90px -30px var(--glow);
  }
  .cta h2 {
    font-size: clamp(26px, 4vw, 38px);
  }
  .cta .lede {
    margin: 14px auto 0;
  }
  .soon-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal-bright);
    background: var(--signal-deep);
    border: 1px solid #2c3d61;
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 18px;
  }
  .soon-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal-bright);
    box-shadow: 0 0 8px var(--signal);
  }
  .cta-actions {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .cta-actions a.plain {
    font-size: 14.5px;
    color: var(--ink-dim);
  }
  .cta-actions a.plain:hover {
    color: var(--ink);
  }

  /* ---------- Footer ---------- */
  footer {
    border-top: 1px solid var(--line-soft);
    padding: 40px 0 56px;
    position: relative;
    z-index: 1;
  }
  .foot-in {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: center;
  }
  .foot-in .brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .foot-in p {
    margin: 4px 0 0;
    color: var(--ink-faint);
    font-size: 13px;
  }
  .foot-links {
    margin-left: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--ink-dim);
    font-family: "JetBrains Mono", monospace;
  }
  .foot-links a:hover {
    color: var(--ink);
  }
  .disclaim {
    margin-top: 22px;
    font-size: 12.5px;
    color: var(--ink-dim);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .hero-grid,
    .split {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .tk-duo {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .dc-msg {
      max-width: none;
    }
    .hv-poll {
      position: static;
      width: 100%;
      margin-top: 16px;
    }
    .feat-grid,
    .road {
      grid-template-columns: repeat(2, 1fr);
    }
    .feat.wide {
      grid-column: span 2;
    }
  }
  @media (max-width: 560px) {
    .t-long {
      display: none;
    }
    .t-short {
      display: inline;
    }
    .nav-in {
      gap: 10px;
    }
  }
  @media (max-width: 720px) {
    .nav-links {
      display: none;
    }
    body {
      font-size: 16px;
    }
    .feat-grid,
    .road {
      grid-template-columns: 1fr;
    }
    .feat.wide {
      grid-column: span 1;
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 420px) {
    .nav-cta .btn-ghost {
      display: none;
    }
    /* **Der Sprachumschalter bleibt.** Für „Anmelden" ist das Ausblenden
       richtig – der Weg steht weiter unten auf der Seite noch einmal. Für den
       Umschalter nicht: Wer über die Spracherkennung in der falschen Fassung
       gelandet ist, braucht ihn genau hier, und der Fuß einer Seite dieser
       Länge ist kein Ausweg. Auf einem Telefon war er damit praktisch nicht
       zu finden (Betreiber, 2026-09-22).

       Kompakter als die übrigen Knöpfe, weil neben ihm noch „Demo" steht und
       die Kopfleiste bei 390 px sonst umbricht. */
    .nav-cta .btn-ghost.nav-lang {
      display: inline-flex;
      padding: 7px 10px;
      font-size: 13px;
    }
  }

  /* ============ aufklappbare Funktionen-Karten ============ */
  .feat-x { position: relative; cursor: pointer; }
  .feat-hit {
    all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px;
    margin-top: 14px; cursor: pointer; color: var(--signal-bright);
    font: 600 13px/1 "Hanken Grotesk", system-ui, sans-serif;
  }
  .feat-hit svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
  .feat-hit::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
  .feat-x:hover .feat-hit { color: #fff; }
  .feat-hit:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
  .feat-x[data-open="true"] {
    border-color: rgba(76, 140, 255, .42);
    box-shadow: 0 0 0 1px rgba(76, 140, 255, .18), 0 18px 40px -28px var(--glow);
  }
  .feat-x[data-open="true"] .feat-hit svg { transform: rotate(180deg); }
  .feat p { margin-bottom: 0; }

  /* `overflow: hidden` ist hier kein Clipping-Bedarf, sondern die Bremse gegen
   * einen Grid-Blowout: ohne sie zaehlt bei `1fr` die Mindestbreite des tief
   * verschachtelten Dashboard-Rahmens (Struktur-Schublade) mit, und die einzige
   * Spalte wuerde auf schmalen Breiten ueber den Viewport hinaus wachsen. */
  .feat-drawer { grid-column: 1 / -1; overflow: hidden; }
  .dr {
    border: 1px solid rgba(76, 140, 255, .3); border-radius: var(--radius);
    background: var(--ground-2); padding: 22px 22px 24px; scroll-margin-top: 92px;
  }
  html.js .dr { animation: drawerIn .28s var(--ease) both; }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) { html.js .dr { animation: none; } }
  .dr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .dr-head h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
  .dr-close {
    all: unset; cursor: pointer; color: var(--ink-faint);
    font: 500 12.5px/1 "JetBrains Mono", monospace;
  }
  .dr-close:hover { color: var(--ink); }
  .dr-close:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
  .dr-lede { margin: 8px 0 0; color: var(--ink-dim); font-size: 15.5px; max-width: 72ch; }
  .dr-tabs { display: flex; gap: 18px; margin: 18px 0 0; border-bottom: 1px solid var(--line-soft); overflow: auto; scrollbar-width: none; }
  .dr-tabs::-webkit-scrollbar { display: none; }
  .dr-tab {
    all: unset; cursor: pointer; white-space: nowrap; color: var(--ink-faint);
    font: 600 13.5px/1 "Hanken Grotesk", system-ui, sans-serif; padding: 0 2px 9px;
  }
  .dr-tab:hover { color: var(--ink-dim); }
  .dr-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
  .dr-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
  .dr-frame { margin-top: 20px; }
  /* Zwei feste Spalten statt `auto-fit`: `auto-fit` klappt leere Spuren nur dann
   * zusammen, wenn KEIN Element über die ganze Zeile geht – die `.scope-tag` tut
   * das aber. Ergebnis war eine Drittel-breite Spalte mit leerer Fläche daneben. */
  .dr-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .dr-stage > .scope-tag { grid-column: 1 / -1; margin: 0; }
  .dr-col { display: grid; gap: 10px; align-items: start; min-width: 0; }
  /* die uebernommenen Mocks liegen in der Schublade flach nebeneinander */
  .dr-stage > .tk-mock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; grid-column: 1 / -1; }
  .dr-stage > .tk-mock > .scope-tag { grid-column: 1 / -1; margin: 0; }
  /* Der Hinweis darf NICHT über die Zeile spannen – sonst schiebt er das zweite
   * Panel in die nächste Zeile. Er sitzt darum in `.dr-col` beim ersten Panel. */
  .dr-col > .tk-link-hint { margin: 0; }
  .dr-stage > .tk-mock > .dc-modal, .dr-stage > .tk-mock > .panel + .panel,
  .dr-stage > .tk-mock > .tk-link-hint + .panel { margin-top: 0; }
  .dr-stage > .tk-mock.tk-mock-wide > .tk-duo { grid-column: 1 / -1; }
  .dr-stage .panel.matrix, .dr-stage .hv-poll-flat { position: static; width: auto; margin: 0; }
  .dr-points { margin: 22px 0 0; }
  /* Dashboard-Abschnitt: Text oben, Attrappe über die volle Breite darunter.
   * Zweispaltig blieb der Textblock rund 500px kurz gegen einen 1000px hohen
   * Mock – die halbe Sektion war leer. */
  .dash-intro { max-width: 74ch; }
  .dash-intro ul { margin-bottom: 0; }
  .hv-dash-full { margin-top: 34px; }
  /* Fünf Modul-Karten in zwei Spalten: die letzte nimmt die ganze Zeile,
   * damit keine halbe Zeile leer bleibt. */
  .hv-mods > .mod-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Schublade mit nur einem Mock: die Kernpunkte stehen daneben statt darunter –
   * sonst bleibt die halbe Zeile leer. Unter 901px wieder untereinander. */
  @media (min-width: 901px) {
    .dr-solo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 26px; align-items: start; }
    .dr-solo > .dr-head, .dr-solo > .dr-lede { grid-column: 1 / -1; }
    .dr-solo > .dr-frame { margin-top: 20px; }
    .dr-solo > .dr-points { margin-top: 20px; align-self: center; }
    .dr-solo .dr-stage { grid-template-columns: minmax(0, 1fr); }
  }
  .dr-foot { margin-top: 40px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink-dim); font-size: 15px; }

  /* ============ Dashboard-Rahmen der Struktur-Schublade (nur landing.html) ============
     Bildet Sidebar + Topbar aus web/src/Shell.tsx nach – eigene, standalone Definition,
     keine technische Kopplung (s. DESIGN.md §6, wie schon .tk-*). Reines Bild: nichts
     darin ist bedienbar, nur die .dr-tabs oben schalten die vier Reiter um. */
  .dsh {
    display: flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--ground);
    overflow: hidden;
  }
  .dsh-sidebar {
    width: 176px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--line);
  }
  .dsh-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
  }
  .dsh-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 7px;
    flex: 1;
  }
  .dsh-nav-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 9px 6px 4px;
  }
  .dsh-nav-title::before {
    content: "// ";
    color: var(--signal);
    opacity: 0.65;
  }
  .dsh-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 7px;
    color: var(--ink-faint);
    font-size: 11.5px;
    white-space: nowrap;
  }
  .dsh-nav-item svg {
    width: 13px;
    height: 13px;
    flex: none;
  }
  .dsh-nav-item.active {
    background: rgba(76, 140, 255, 0.14);
    color: var(--signal-bright);
    font-weight: 600;
  }
  /* Echte Bedienelemente statt Bild: nur auf der Demo-Seite (demo.html) sind
   * .dsh-brand/.dsh-nav-item als <button> gerendert (dort ist die Sidebar die
   * Bühne selbst) – in der Landing-Schublade bleiben es <span>/<div>, auf die
   * diese Regeln dank Element-Selektor nie greifen. Gemeinsame Definition,
   * weil sie nichts an der bestehenden Optik der Schublade aendert. */
  button.dsh-brand, button.dsh-nav-item {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  button.dsh-brand { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
  button.dsh-brand:hover .wordmark { color: var(--signal-bright); }
  button.dsh-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 7px;
    /* heller als die gedaempften <span>-Eintraege (var(--ink-faint), s.
       .dsh-nav-item oben) – nur Eintraege mit Attrappe sind ueberhaupt ein
       <button>, das ist hier das einzige Signal "das geht", ohne Label. */
    color: var(--ink-dim);
    font-size: 11.5px;
    font-family: inherit;
    white-space: nowrap;
  }
  button.dsh-nav-item svg { width: 13px; height: 13px; flex: none; }
  button.dsh-nav-item:hover { background: var(--line-soft); color: var(--ink); }
  button.dsh-brand:focus-visible, button.dsh-nav-item:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
    border-radius: 7px;
  }
  button.dsh-nav-item.active {
    background: rgba(76, 140, 255, 0.14);
    color: var(--signal-bright);
    font-weight: 600;
  }
  .dsh-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    color: var(--ink-faint);
  }
  .dsh-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .dsh-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .dsh-server {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--ink-dim);
  }
  .dsh-server svg {
    color: var(--ink-faint);
  }
  .dsh-server-avatar {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    background: var(--signal-deep);
    color: var(--signal-bright);
    font-size: 10px;
    font-weight: 700;
    flex: none;
  }
  .dsh-server-avatar.dsh-user {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .dsh-topbtn {
    all: unset;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--ink-faint);
    cursor: default;
  }
  .dsh-topbtn svg {
    width: 15px;
    height: 15px;
  }
  .dsh-spacer {
    flex: 1;
  }
  .dsh-pending {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--warn);
    color: var(--warn);
    font-size: 11px;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
  }
  .dsh-pending .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 6px var(--warn);
  }
  .dsh-content {
    padding: 16px;
    overflow-x: auto;
  }
  .dr-stage.dsh-pane {
    display: block;
  }
  .dsh-note {
    margin: 0 0 14px;
    color: var(--ink-dim);
    font-size: 13px;
    max-width: 64ch;
  }
  .dsh-tablewrap {
    overflow-x: auto;
  }
  @media (max-width: 900px) {
    .dsh-sidebar { display: none; }
  }

  /* ---- Änderungen-Tabelle, Verlauf, Audit-Log: eigene, an ChangesView.tsx /
   * HistoryView.tsx / AuditView.tsx angelehnte Klassennamen (separate Definition,
   * s. Kommentar oben). ---- */
  /* max-width, keine feste Breite: bleibt in schmalen Rahmen (Landing-
   * Schublade) voll flexibel, streckt sich aber auf der breiteren Demo-Buehne
   * nicht bis auf 1300px+ Spaltenabstaende auseinander. */
  .changes-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 12.5px; }
  .changes-table th, .changes-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
  .changes-table th { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
  .changes-table tr:last-child td { border-bottom: 0; }
  .changes-table .arrow { color: var(--ink-faint); margin: 0 5px; }
  .btn-xs { padding: 5px 8px; font-size: 12px; border-radius: 7px; }
  .status-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
  .status-tag.allow { color: var(--live); }
  .status-tag.deny { color: var(--deny); }
  .status-tag.neutral { color: var(--ink-faint); }

  .cset { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--ground-2); overflow: hidden; }
  .cset + .cset { margin-top: 8px; }
  .cset-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  .cset-head > svg:first-child { width: 14px; height: 14px; color: var(--signal-bright); flex: none; }
  .cset-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cset-title { font-size: 12.5px; font-weight: 600; }
  .cset-meta { font-size: 10.5px; color: var(--ink-faint); }
  .cset-undo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--warn); color: var(--warn); background: transparent; font-weight: 600; font-size: 10.5px; white-space: nowrap; flex: none; }
  .cset-undo svg { width: 11px; height: 11px; }
  .cset-body { border-top: 1px solid var(--line-soft); padding: 6px 12px 10px; }
  .cchange { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; }
  .cchange:last-child { border-bottom: 0; }
  .cchange input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--signal); flex: none; }
  .chev { width: 13px; height: 13px; color: var(--ink-faint); flex: none; transition: transform 0.15s; }
  .chev.open { transform: rotate(180deg); }

  .audit-row { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--ground-2); }
  .audit-row + .audit-row { margin-top: 8px; }
  .audit-row-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
  .avatar-sm { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--signal-deep); color: var(--signal-bright); font-size: 10px; font-weight: 700; flex: none; }
  .audit-row-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-dim); }
  .audit-row-txt b { color: var(--ink); }
  .when { color: var(--ink-faint); font-size: 10.5px; white-space: nowrap; }
  .diff.mono { margin: 0 12px 10px; padding: 9px 10px; background: var(--ground); border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim); white-space: pre-wrap; }

  /* ---- Rollen-/Nutzer-Simulator: eigene, an SimulatorView.tsx angelehnte
   * Klassennamen (gleiche Trennung wie .dl-*/.chip/.trace weiter unten – s.
   * Kommentar am Anfang des .dsh-Blocks). Genutzt in der Struktur-Schublade
   * (Rollen-Variante) UND auf demo.html (beide Varianten). ---- */
  .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .select-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 3px 10px; background: var(--ground-2); }
  .select-wrap svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
  .sim-select-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; font-weight: 600; font-size: 13px; color: var(--ink); }
  .sim-select-trigger svg { width: 12px; height: 12px; color: var(--ink-faint); }
  .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); background: var(--ground-2); border-radius: 999px; color: var(--ink-dim); font-size: 12.5px; font-weight: 500; }
  .chip.on { background: rgba(76, 140, 255, 0.14); border-color: var(--signal); color: var(--signal-bright); }
  .chip .box { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; display: grid; place-items: center; flex: none; }
  .chip .box svg { width: 9px; height: 9px; }
  .chip.on .box { background: var(--signal); border-color: var(--signal); color: #fff; }
  .role-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
  .role-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--signal); background: rgba(76, 140, 255, 0.14); color: var(--signal-bright); font-size: 12px; font-weight: 600; }
  .role-check .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .sim-grid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
  @media (max-width: 860px) { .sim-grid { grid-template-columns: 1fr; } }
  .discord-list { padding: 8px; }
  .dl-head { padding: 6px 8px; font-size: 12px; color: var(--ink-dim); }
  .dl-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 8px 4px; }
  .dl-chan { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 6px; color: var(--ink-dim); font-weight: 500; font-size: 13px; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; }
  .dl-chan svg:first-child { width: 14px; height: 14px; flex: none; color: var(--ink-faint); }
  .dl-chan.sel { background: rgba(76, 140, 255, 0.14); color: var(--signal-bright); }
  .dl-chan.sel svg:first-child { color: var(--signal-bright); }
  .dl-chan.ghost { opacity: 0.5; }
  .dl-chan .eye-off { margin-left: auto; width: 13px; height: 13px; flex: none; }
  .eff-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px; border-radius: 9px; background: var(--ground-2); }
  .eff-summary .big { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .eff-summary .big svg { width: 17px; height: 17px; }
  .trace { display: flex; flex-direction: column; margin-top: 2px; }
  .trace-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
  .trace-row:last-child { border-bottom: 0; }
  .trace-row .rail { color: var(--ink-faint); font-family: "JetBrains Mono", monospace; }
  .trace-row .lbl small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; }
  .trace-row .val { font-weight: 700; font-size: 12px; white-space: nowrap; }
  .trace-row .val.allow { color: var(--live); }
  .trace-row .val.deny { color: var(--deny); }
  .trace-row .val.neutral { color: var(--ink-faint); }

  @media (max-width: 900px) {
    /* Zwei Mock-Spalten brauchen je ~380px, darunter wird es unleserlich. */
    .dr-stage, .dr-stage > .tk-mock { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 720px) {
    .dr { padding: 16px 14px 18px; }
  }

  /* ============================================================
     Einwilligungs-Banner (consent.js)
     ============================================================
     Hier statt in legal.css, weil der Banner auf ALLEN oeffentlichen
     Seiten erscheinen kann -- landing.css ist das einzige Stylesheet,
     das jede von ihnen laedt.

     Unten angedockt statt als Overlay ueber der Seite: der Banner
     verdeckt nichts und blockiert nichts. Wer ihn ignoriert, kann die
     Seite trotzdem vollstaendig lesen -- es wird dann nur nicht
     gemessen. Eine Sperre waere hier unangemessen, weil es um eine
     freiwillige Messung geht und nicht um eine Funktion der Seite.

     Beide Schaltflaechen sind bewusst gleich gross und gleich
     auffaellig (s. Kopfkommentar consent.js).
     ============================================================ */
  .consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
    animation: consent-in 0.28s var(--ease) both;
  }
  @keyframes consent-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .consent { animation: none; }
  }

  .consent-in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .consent-copy { flex: 1; min-width: 0; }
  .consent-copy h2 {
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .consent-copy p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-dim);
    margin: 0;
  }
  .consent-copy a { color: var(--signal-bright); }

  .consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  /* Gleiche Mindestbreite fuer beide Schaltflaechen: "Ablehnen" darf
     optisch nicht zurueckstehen. */
  .consent-actions .btn { min-width: 132px; justify-content: center; }

  @media (max-width: 720px) {
    .consent-in {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 16px;
    }
    .consent-actions .btn { flex: 1; min-width: 0; }
  }

  /* ============================================================
     Rechte-zuerst-Aufbau der Startseite (2026-09-15)
     ------------------------------------------------------------
     Hero zeigt Matrix + Simulator statt Umfrage, die Rechte-Ansicht
     ist ein eigener Abschnitt statt einer Schublade, und aus dem
     alten 10er-Karten-Raster wurde eine dichte Liste. Alles hier
     baut auf vorhandenen Klassen auf (.matrix, .trace, .phase),
     ergaenzt also nur, wo die neue Anordnung es braucht.
     ============================================================ */

  /* ---------- Hero: Matrix-Panel + Simulator-Panel ---------- */
  .hv-mxwrap { padding: 16px; position: relative; z-index: 1; }
  .hv-mx { padding: 12px 0 0; }
  /* drei Kanaele statt vier: im Hero ist die Spalte schmaler */
  .hv-mx .mrow { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
  /* vorgemerkt = noch nicht auf Discord. Gelb wie im Dashboard. */
  .matrix .mx-c.y.stg {
    background: rgba(255, 207, 92, 0.12);
    color: var(--warn);
    box-shadow: inset 0 0 0 1px rgba(255, 207, 92, 0.45);
    position: relative;
  }
  .stg-mark {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--warn);
  }
  /* Unter dem Matrix-Panel steht bewusst KEINE zweite Attrappe: zwei gleich
     schwere Panels lasen sich als zwei zusammenkopierte Screenshots. Stattdessen
     eine flache Auswertungszeile -- ein Bild, eine Folgerung daraus. Kein
     Panel-Hintergrund, kein Rahmen, nur die Akzentkante links. */
  .hv-verdict {
    margin-top: 12px;
    padding: 12px 16px 13px;
    border-left: 2px solid var(--signal);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(90deg, var(--glow-soft), transparent 70%);
    display: grid;
    gap: 7px;
  }
  .hv-verdict-head {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
  }
  .hv-verdict-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-dim);
  }
  .hv-verdict-row b { font-weight: 700; }
  .hv-verdict-row b.deny { color: var(--deny); }
  .hv-verdict-row b.allow { color: var(--live); }
  .hv-verdict-arrow { color: var(--ink-faint); }
  /* Einmal deutlich sagen, dass keine dieser Zahlen echt ist. */
  .mock-cap {
    margin: 12px 0 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
  }

  /* ---------- Rechte-Abschnitt ---------- */
  /* Derselbe Rahmen wie eine Schublade, aber fest eingebaut: keine
     Einblend-Animation, kein Akzentrand eines gerade geoeffneten Blocks. */
  .dr-static {
    animation: none !important;
    margin-top: 40px;
    border-color: var(--line);
  }
  .ctl-points {
    margin-top: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 14px;
  }
  .ctl-note { margin: 24px 0 0; color: var(--ink-faint); font-size: 14.5px; }
  @media (max-width: 760px) {
    .ctl-points { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Modul-Abschnitt ---------- */
  .anchor { display: block; height: 0; scroll-margin-top: 92px; }
  .sub-lede { margin: 46px 0 22px; color: var(--ink-dim); font-size: 15.5px; }
  .mods-h { margin: 52px 0 0; font-size: 17px; letter-spacing: -0.01em; }
  .mods { margin: 16px 0 0; }
  .mods > div {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 6px 26px;
    padding: 14px 2px;
    border-top: 1px solid var(--line-soft);
  }
  .mods > div:last-child { border-bottom: 1px solid var(--line-soft); }
  .mods dt { font-weight: 600; font-size: 15px; }
  .mods dd { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
  @media (max-width: 640px) {
    .mods > div { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Sicherheit ---------- */
  .sec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 40px;
  }
  .sec-side { display: grid; gap: 18px; }
  .sec-block { padding: 20px 22px 22px; }
  /* Blocktitel als echte Überschrift im Stil der Mono-Rubrik (paul L-S1/S-3), wie `.ref-col-titel` im Baustein. */
  .sec-titel {
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.4;
  }
  .sec-titel::before { content: "// "; content: "// " / ""; color: var(--signal); opacity: 0.6; }
  .perms { margin: 14px 0 0; }
  .perms > div { padding: 12px 0; border-top: 1px solid var(--line-soft); }
  .perms > div:first-child { border-top: 0; padding-top: 4px; }
  .perms dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    color: var(--ink);
  }
  .perms dd { margin: 5px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
  .perms.qa dt { font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 15px; font-weight: 600; }
  .priv {
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warn);
    border: 1px solid rgba(255, 207, 92, 0.4);
    border-radius: 999px;
    padding: 2px 7px;
  }
  .perms dd.perm-keys { margin-top: 4px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
  .reserve-label { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
  .reserve { margin: 12px 0 0; display: grid; gap: 8px; }
  .reserve > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .reserve dt { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-dim); }
  .reserve dd { margin: 0; color: var(--ink-faint); font-size: 13px; line-height: 1.5; }
  @media (max-width: 480px) {
    .reserve > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
  .sec-txt { margin: 12px 0 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
  .sec-links { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-faint); }
  @media (max-width: 900px) {
    .sec-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Stand (zwei Spalten statt drei Phasen) ---------- */
  .road.road-2 { grid-template-columns: repeat(2, 1fr); }
  .phase li time {
    flex: none;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: var(--ink-faint);
  }
  @media (max-width: 720px) {
    .road.road-2 { grid-template-columns: 1fr; }
  }

  /* ---------- Einladen / Abschluss ---------- */
  .price-note { margin: 14px auto 0; max-width: 620px; color: var(--ink-faint); font-size: 14px; }

  /* ============================================================
     Refresh 2026-09-28: Einladen, Pro, Community Pulse, Themes
     ============================================================ */

  /* Hinweis im Hero, dass Fylgra offen ist */
  .launch-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 22px; padding: 5px 12px; border-radius: 999px;
    font-size: 13.5px; font-weight: 500; color: var(--ink-dim);
    background: rgba(61, 220, 132, 0.08); border: 1px solid rgba(61, 220, 132, 0.28);
  }
  .launch-chip .dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--live);
  }
  /* „Offen“ ist grün wie .tag.live – auch der Chip im Abschluss */
  .soon-chip.live { color: var(--live); background: rgba(61, 220, 132, 0.08); border-color: rgba(61, 220, 132, 0.28); }
  .soon-chip.live::before { background: var(--live); box-shadow: 0 0 8px var(--live); }

  /* Pro-Schild, gleiche Form wie .tag.live/.soon */
  .tag.pro {
    color: var(--signal-bright);
    background: var(--signal-deep);
    border: 1px solid #2c3d61;
  }
  .dr-tab .tag { margin-left: 6px; padding: 1px 5px; font-size: 10px; vertical-align: 1px; }

  /* Vier Karten: auf breiten Schirmen 2 × 2 statt 3 + 1 */
  .feat-grid.feat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feat-grid-4 .feat-x > p { flex: 1 1 auto; }
  @media (max-width: 720px) {
    .feat-grid.feat-grid-4 { grid-template-columns: 1fr; }
  }

  /* Rollback / Backups unter dem Rechte-Abschnitt */
  .more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
  .more {
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 22px 24px;
  }
  .more-top { display: flex; align-items: center; gap: 12px; }
  .more h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0; }
  .more p { margin: 10px 0 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
  @media (max-width: 760px) {
    .more-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Community-Pulse-Attrappe (.pl-*) ---------- */
  .dr-stage > .pl { grid-column: 1 / -1; }
  .dr-lede code {
    font-family: "JetBrains Mono", monospace; font-size: 0.88em;
    background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 5px;
  }
  .pl { padding: 18px; display: grid; gap: 16px; min-width: 0; }
  .pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .pl-head .scope-tag { margin: 0; }
  .pl-note { font-size: 11.5px; color: var(--ink-faint); }
  .pl-seg {
    display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
    font-size: 11.5px; color: var(--ink-dim);
  }
  .pl-seg span { padding: 4px 10px; }
  .pl-seg span + span { border-left: 1px solid var(--line); }
  .pl-seg .on { background: var(--signal-deep); color: var(--ink); }
  .pl-seg .lock { color: var(--ink-faint); }
  .pl-seg .lock::after { content: " · Pro"; color: var(--signal-bright); }
  .pl-kpis .kpi {
    background: var(--ground-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .pl-kpis .kpi-n { font-size: 20px; }
  .pl-kpis .kpi-l { font-size: 11.5px; }
  .pl-trend { font-size: 10.5px; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; }
  .pl-trend.up { color: var(--live); }
  .pl-block { min-width: 0; }
  .pl-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .pl-sub b { font-size: 13px; }
  .pl-sub span { font-size: 11.5px; color: var(--ink-faint); }
  .pl-sub-2 { margin-top: 16px; }
  .pl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

  .pl-bars { display: flex; align-items: flex-end; gap: 3px; height: 74px; }
  .pl-bars i {
    flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, rgba(76, 140, 255, 0.75), rgba(76, 140, 255, 0.28));
  }
  .pl-bars i.peak { background: var(--signal-bright); box-shadow: 0 0 10px var(--glow); }

  .pl-rank, .pl-funnel, .pl-keep, .pl-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
  .pl-rank li, .pl-funnel li {
    display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  }
  .pl-funnel li { grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; }
  .pl-rank li > span:first-child, .pl-funnel li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-rank i, .pl-funnel i {
    height: 8px; border-radius: 4px; width: var(--w);
    background: linear-gradient(90deg, rgba(76, 140, 255, 0.35), var(--signal));
  }
  .pl-keep li, .pl-top li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line-soft); padding-bottom: 6px; }
  .pl-keep li:last-child, .pl-top li:last-child { border-bottom: 0; padding-bottom: 0; }
  .pl .mono { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
  .pl-top { counter-reset: platz; }
  .pl-top li span:first-child::before {
    counter-increment: platz; content: counter(platz) ". ";
    color: var(--ink-faint); font-family: "JetBrains Mono", monospace; font-size: 12px;
  }
  .pl-fine { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
  .pl-fine-lg { font-size: 13px; color: var(--ink-dim); margin: 0; }

  /* ---- Reiter 2/3 nach der echten Seite (Paket F): Karten wie `DiagrammKarte` ---- */
  .pl-karte {
    display: grid; gap: 10px; align-content: start; min-width: 0;
    background: var(--ground-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px;
  }
  .pl-kk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .pl-kt {
    margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
  }
  .pl-kopf-r { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pl-seg-k { font-size: 11px; }
  .pl-seg-k span { padding: 3px 9px; }
  .pl-zr { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint); }
  .pl-zone { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); }
  .pl-spitze { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); min-height: 1.3em; }
  .pl-spitzen { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ink-dim); }
  .pl-unter, .pl-fine-0 { margin: 0; }
  .pl-beispiel { margin: 0; color: var(--ink-dim); }

  /* Uhrzeiten: breit Wochentage als Zeilen, schmal gedreht (wie `Heatmap gedreht`) */
  .pl-heat { display: grid; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 3px; }
  .pl-heat-hoch { display: none; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
  .pl-heat-y, .pl-heat-h, .pl-cal-m {
    font-size: 10.5px; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; white-space: nowrap;
  }
  .pl-heat-y { align-self: center; }
  .pl-heat-h { overflow: visible; }
  .pl-heat-hoch .pl-heat-h { text-align: center; }
  .pl-heat i, .pl-cal-band i, .pl-blatt-raster i, .pl-legende i {
    display: block; border-radius: 3px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-soft);
  }
  .pl-heat i { height: 17px; }
  .pl-heat-hoch i { height: 11px; border-radius: 2px; }
  .pl-heat i.h1, .pl-cal-band i.h1, .pl-blatt-raster i.h1, .pl-legende i.h1 { background: rgba(76, 140, 255, 0.28); box-shadow: none; }
  .pl-heat i.h2, .pl-cal-band i.h2, .pl-blatt-raster i.h2, .pl-legende i.h2 { background: rgba(76, 140, 255, 0.5); box-shadow: none; }
  .pl-heat i.h3, .pl-cal-band i.h3, .pl-blatt-raster i.h3, .pl-legende i.h3 { background: rgba(76, 140, 255, 0.74); box-shadow: none; }
  .pl-heat i.h4, .pl-cal-band i.h4, .pl-blatt-raster i.h4, .pl-legende i.h4 { background: var(--signal); box-shadow: none; }
  .pl-legende {
    display: flex; align-items: center; justify-content: flex-end; gap: 3px;
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-faint);
  }
  .pl-legende i { width: 10px; height: 10px; border-radius: 2px; }
  .pl-legende span:first-child { margin-right: 3px; }
  .pl-legende i + span { margin-left: 3px; }
  .pl-legende span:last-child { margin-left: 6px; font-family: "Hanken Grotesk", system-ui, sans-serif; }

  /* Jahresverlauf: breit ein Band aus Wochenspalten, schmal ein Blatt je Monat */
  .pl-cal-band { display: grid; grid-template-columns: 26px repeat(var(--wochen), minmax(0, 1fr)); gap: 3px; }
  .pl-cal-band i, .pl-cal-band b, .pl-blatt-raster i, .pl-blatt-raster b { display: block; aspect-ratio: 1; border-radius: 2px; }
  .pl-cal-blaetter { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .pl-blatt > b { display: block; font-size: 12px; font-weight: 600; color: var(--ink-dim); margin-bottom: 4px; }
  .pl-blatt-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .pl-blatt-raster span {
    font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-faint); text-align: center;
  }

  /* Kanäle im Vergleich (`Linienvergleich`) */
  .pl-vgl { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
  .pl-vgl-y {
    grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: right;
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-faint); line-height: 1; height: 150px;
  }
  .pl-lines { grid-column: 2; grid-row: 1; width: 100%; height: 150px; display: block; overflow: visible; }
  .pl-lines path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  .pl-lines .pl-gitter { stroke: var(--line); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  .pl-lines .pl-achse { stroke: var(--line); vector-effect: non-scaling-stroke; }
  /* Spiegel von --chart-vgl-1..3 (web/src/theme.css) samt Strichmuster wie im Linienvergleich */
  .pl-lines .l1 { stroke: var(--signal); stroke-width: 2.5; }
  .pl-lines .l2 { stroke: #3cc3d6; stroke-dasharray: 6 4; }
  .pl-lines .l3 { stroke: #a48cff; stroke-dasharray: 2 3; }
  /* Laufender Tag (F-9): gestrichelt und blasser, wie `liveName` in der App */
  .pl-lines .pl-live { stroke-dasharray: 4 4; opacity: 0.75; }
  .pl-heute { font-style: italic; }
  .pl-cal-band i.pl-live, .pl-blatt-raster i.pl-live { outline: 1px dashed var(--signal-bright); outline-offset: -1px; }
  .pl-vgl-x {
    grid-column: 2; display: flex; justify-content: space-between; margin-top: 6px;
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-faint);
  }
  .pl-vgl-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .pl-vgl-leg li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
  .pl-vgl-leg i { width: 16px; height: 2px; border-radius: 1px; }
  .pl-vgl-leg .c1 { background: var(--signal); height: 3px; }
  .pl-vgl-leg .c2 { background: repeating-linear-gradient(90deg, #3cc3d6 0 6px, transparent 6px 10px); }
  .pl-vgl-leg .c3 { background: repeating-linear-gradient(90deg, #a48cff 0 2px, transparent 2px 5px); }
  .pl-wahl {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--ink);
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  }
  .pl-wahl svg { color: var(--ink-faint); }
  .pl-kfuss { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
  .pl-kfuss-r { justify-content: flex-end; }
  .pl-linkish { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-dim); }
  .pl-links { margin-left: 0; }
  .pl-nowrap { white-space: nowrap; }
  .pl-beispiel b { font-weight: 600; color: var(--ink); }
  .pl-fuss-satz { font-size: 12px; color: var(--ink-faint); }
  .pl-chev { flex: none; color: var(--ink-faint); }

  /* Listen mit Balken (Aktivste Kanäle, Sprachkanäle, Top-Mitglieder) */
  .pl-liste, .pl-toplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; }
  .pl-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 10px; }
  .pl-toplist li { display: grid; grid-template-columns: 12px 22px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
  .pl-ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
  .pl-liste li > i, .pl-toplist li > i {
    grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden;
  }
  .pl-liste li > i::before, .pl-toplist li > i::before {
    content: ""; display: block; height: 100%; width: var(--w); border-radius: 3px;
    background: linear-gradient(90deg, rgba(76, 140, 255, 0.55), var(--signal));
  }
  .pl-liste-v li > i::before { background: linear-gradient(90deg, rgba(60, 195, 214, 0.55), #3cc3d6); }
  .pl-pill { font-family: "JetBrains Mono", monospace; font-size: 10.5px; white-space: nowrap; }
  .pl-pill.up { color: var(--live); }
  .pl-pill.dn { color: var(--deny); }
  .pl-laut { margin-right: 6px; vertical-align: -1px; color: var(--ink-faint); }
  .pl-rang { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); text-align: right; }
  .pl-av {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--panel-2); border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; color: var(--ink-dim);
  }

  .pl-csv {
    display: inline-flex; align-items: center; gap: 6px; cursor: default;
    font: 600 12px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ink);
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px;
  }
  .pl-csv:disabled { opacity: 1; }

  @media (max-width: 760px) {
    .pl-cols { grid-template-columns: minmax(0, 1fr); }
    .pl-kpis { grid-template-columns: repeat(2, 1fr); }
    .pl-rank li { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto; }
    .pl-funnel li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .pl-funnel li > span:first-child { grid-column: 1 / -1; white-space: normal; }
    .pl-keep-schmal { display: none; }
  }

  /* ---------- Themes-Teaser ---------- */
  .themes { margin-top: 56px; }
  .themes-txt .mods-h { margin-top: 0; }
  .themes-txt p { margin: 10px 0 0; max-width: 70ch; color: var(--ink-dim); font-size: 15px; }
  @media (max-width: 560px) {
    .pl-heat:not(.pl-heat-hoch) { display: none; }
    .pl-heat-hoch { display: grid; }
    .pl-cal-band { display: none; }
    .pl-cal-blaetter { display: grid; }
    .pl-karte { padding: 12px; }
    .pl-heat-hoch .pl-heat-y { height: 11px; line-height: 11px; align-self: start; }
    /* Drei Datumsangaben passen schmal nicht nebeneinander: Anfang und Ende genügen. */
    .pl-vgl-x span:nth-child(2) { display: none; }
  }
  .themes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
  .theme-shot { margin: 0; }
  .theme-shot img {
    display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
    border: 1px solid var(--line); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
    background: var(--panel);
  }
  .theme-shot figcaption {
    margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint);
  }
  @media (max-width: 560px) {
    .themes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .theme-shot figcaption { font-size: 10.5px; }
  }

  /* ---------- Feedback-Hinweis im Abschluss ---------- */
  .feedback-note {
    margin: 30px auto 0; max-width: 620px; text-align: left;
    padding: 16px 18px; border-radius: var(--radius-sm);
    background: rgba(76, 140, 255, 0.06); border: 1px solid #2c3d61;
  }
  .feedback-note p { margin: 0; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }
  .feedback-note b { color: var(--ink); font-weight: 600; }
  .feedback-note a { color: var(--signal-bright); }

  /* Anmelden unter dem Hero nur dort, wo die Navigation ihn ausblendet (≤ 420 px) */
  .hero-login { display: none; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-faint); }
  .hero-login a { color: var(--signal-bright); }
  @media (max-width: 420px) {
    .hero-login { display: block; }
  }
  .theme-link { display: block; border-radius: var(--radius-sm); }
  .theme-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .theme-link:hover img { border-color: var(--signal); }

  /* Theme-Großansicht (<dialog class="lightbox">) */
  .lightbox {
    padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); color: var(--ink);
    width: min(1280px, 94vw); max-width: none; max-height: 92vh; overflow: visible;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  }
  .lightbox::backdrop { background: rgba(5, 7, 10, 0.8); backdrop-filter: blur(3px); }
  .lightbox figure { margin: 0; }
  .lightbox img {
    display: block; width: 100%; height: auto; max-height: calc(92vh - 44px); object-fit: contain;
    border-radius: var(--radius) var(--radius) 0 0; background: var(--ground);
  }
  .lightbox figcaption {
    padding: 10px 16px 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-dim);
  }
  .lightbox-zu {
    position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
    font: 600 14px/1 system-ui, sans-serif;
  }
  .lightbox-zu:hover { border-color: var(--signal); }
  .lightbox-zu:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  html:has(.lightbox[open]) { overflow: hidden; }
  @media (max-width: 560px) {
    .lightbox-zu { top: 6px; right: 6px; }
  }

  /* Hinweis im Abschluss: Bot-Rolle nach oben ziehen (Discord setzt sie zuerst ganz unten ein) */
  .role-note {
    margin: 26px auto 0; max-width: 620px; text-align: left;
    padding: 14px 18px; border-radius: var(--radius-sm);
    font-size: 14.5px; line-height: 1.6; color: var(--ink-dim);
    background: rgba(255, 207, 92, 0.06); border: 1px solid rgba(255, 207, 92, 0.3);
  }
  .role-note b { color: var(--warn); font-weight: 600; }
  .role-note + .feedback-note { margin-top: 14px; }

  /* Pulse-Bildkarten (Reiter 4): drei echte Renderer-Bilder nebeneinander */
  .pl-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .pl-karte figcaption { display: grid; gap: 3px; font-family: inherit; font-size: 12px; color: var(--ink-dim); }
  .pl-karte figcaption b { font-weight: 500; color: var(--ink-dim); }
  .pl-karte figcaption code { font-family: "JetBrains Mono", monospace; color: var(--ink); }
  .pl-karte figcaption span { color: var(--ink-faint); line-height: 1.45; }
  @media (max-width: 760px) {
    .pl-karten { grid-template-columns: minmax(0, 1fr); }
  }

  /* E19: Hinweis direkt unter den Einladen-Knöpfen, dass Administrator abwählbar ist */
  .invite-note { margin: 12px 0 0; max-width: 56ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); }
  .invite-note a { color: var(--signal-bright); white-space: nowrap; }
  .invite-note-cta { margin: 14px auto 0; text-align: center; }
  #sicherheit-admin { scroll-margin-top: 92px; }