/* ESD Modul-Hülle - Prototyp H1 (nach Judge-Runde 2026-08-25). Tokens: knowledge/design-system.md §1.1 (Materie-Nacht),
   Bedien-Skala §3.6, Radius-Kanon §11, Motion §8.1/8.2. Eigenständige Anwendung: kein Elementor-Defense-Layer.
   Regeln aus der Judge-Runde: ein Blau je Bereich (Renderer), Mono nur für Maschinenwerte (.technik), Meta ist Prosa (.meta),
   helle Insel nur in der Inhaltsspalte (.spalte.is-insel), Korn und eine Lichtquelle auf dem Grund (nicht auf Karten). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Materie-Nacht */
  --machine: #0d0d10;
  --machine-sunken: #08080B;
  --machine-panel: #131318;
  --machine-panel-hi: #1B1C22;
  --machine-line: rgba(235,235,245,.16);
  --machine-line-2: rgba(235,235,245,.22);
  --text-primary: #FAFAF7;
  --text-secondary: rgba(235,235,245,.60);
  /* App-Ausnahme zum DS-Tertiär (.32/.40): in einer Bedien-Oberfläche muss Meta lesbar sein; .55 misst >= 4,5:1 auf --machine. */
  --text-tertiary: rgba(235,235,245,.55);
  --accent: #0066FF;
  --accent-lit: #3D8BFF;
  --accent-tint-d: rgba(61,139,255,.14);
  --c-live: #30D158;
  --c-warn: #FFD60A;
  --c-warn-text: #FFC24A;
  --c-error: #FF453A;
  --c-error-text: #FF8A80;
  --c-ai: #BF5AF2;
  --shadow-d-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-d-md: 0 2px 4px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
  /* Helle Insel (nur Übernahme, nur Inhaltsspalte) */
  --paper: #F5F5F7;
  --panel: #FFFFFF;
  --ink: #16181D;
  --ink-2: rgba(22,24,29,.64);
  --ink-3: rgba(22,24,29,.62);
  --hair: rgba(22,24,29,.12);
  --accent-text: #0052CC;
  --c-live-ink: #177A38;
  --c-error-ink: #D70015;
  --shadow-md: 0 2px 6px rgba(22,24,29,.07), 0 12px 32px rgba(22,24,29,.08);
  /* Skala */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  --r-pill: 100px;
  --r-card: 20px;
  --r-field: 12px;
  --nav-w: 232px;
  --proto-h: 46px; /* Prototyp-Leiste: nur im Prototyp, im Produkt 0 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.5;
  background: var(--machine); color: var(--text-primary);
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate;
}
/* Eine Lichtquelle von oben + Korn auf dem Grund (DS §2.7). Beides liegt HINTER der App (z-index 0), Karten sind opak. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(250,250,247,.045), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04; mix-blend-mode: soft-light; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1rem; line-height: 1.35; }
p { margin: 0; }
a { color: var(--accent-lit); }
button { font: inherit; }
code { font-family: var(--mono); font-size: 0.875em; }
.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 40; padding: 10px 16px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }

/* Zwei Meta-Klassen (Judge 2): .meta = Prosa in Inter, .technik = Maschinenwerte in Mono */
.meta { font-family: var(--font); font-size: 0.8125rem; color: var(--text-tertiary); }
.technik { font-family: var(--mono); font-size: 0.75rem; color: var(--text-tertiary); letter-spacing: .01em; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Gerüst ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; }
.proto { grid-column: 1 / -1; position: sticky; top: 0; z-index: 15; min-height: var(--proto-h); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px;
  border-bottom: 1px dashed var(--machine-line-2); background: var(--machine-sunken); font-size: 0.8125rem; color: var(--text-secondary); }
.proto__tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.proto label { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.proto select { font: inherit; font-size: 0.8125rem; max-width: min(320px, 58vw); text-overflow: ellipsis; background-color: var(--machine-panel); color: var(--text-primary); border: 1px solid var(--machine-line-2); border-radius: 8px; padding: 6px 8px; min-height: 32px; }

.nav { grid-row: 2; position: sticky; top: var(--proto-h); align-self: start; height: calc(100vh - var(--proto-h)); height: calc(100svh - var(--proto-h)); overflow-y: auto;
  padding: 24px 12px 16px; border-right: 1px solid var(--machine-line); background: var(--machine-sunken); display: flex; flex-direction: column; gap: 4px; }
.nav[hidden], .tabs[hidden] { display: none !important; }
.nav__marke { display: flex; align-items: center; gap: 10px; padding: 4px 12px 24px; }
.nav__logo { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 0.8125rem; color: #fff; flex: 0 0 auto; }
.nav__markenname { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.3; }
.nav__markenname strong { display: block; color: var(--text-primary); font-weight: 600; }
.nav__link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.nav__link svg { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav__link[aria-current="page"] { background: var(--accent-tint-d); color: var(--text-primary); }
.nav__link:active { transform: scale(.98); }
.nav__trenner { height: 1px; margin: 12px 12px; background: var(--machine-line); }
.nav__unten { margin-top: auto; }
.nav__version { padding: 12px 12px 0; font-size: 0.75rem; line-height: 1.5; }

/* Kopf: festes Raster Titel | Ampel | Nutzer (Judge 2: kein Sprung zwischen Screens) */
.spalte { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 24px 32px 0; min-height: 96px; }
.kopf__titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kopf__titel h1 { font-size: 1.5rem; }
.kopf__kunde { font-size: 0.8125rem; color: var(--text-secondary); }
.kopf__puls { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kopf__nutzer { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.puls { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--machine-line-2); background: var(--machine-panel); font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.puls--rot { border-color: rgba(255,69,58,.55); }
.puls--gelb { border-color: rgba(255,214,10,.45); }
.puls__zeit { color: var(--text-secondary); font-weight: 400; }
.puls__folge { font-size: 0.8125rem; color: var(--c-error-text); }
.punkt { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; }
.punkt--gruen { background: var(--c-live); }
.punkt--gelb { background: var(--c-warn); }
.punkt--rot { background: var(--c-error); }
.punkt--grau { background: var(--text-tertiary); }
.puls .punkt--gruen::after, .puls .punkt--rot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }

.haupt { padding: 0 32px 96px; max-width: calc(1200px + 64px); width: 100%; display: grid; gap: 24px; align-content: start; margin-top: 24px; }

/* ---------- Panel (Materie-Nacht-Karte) ---------- */
.panel { background: var(--machine-panel); border: 1px solid var(--machine-line); border-radius: var(--r-card); padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-d-md); display: grid; gap: 16px; min-width: 0; }
.panel > * { min-width: 0; }
.panel--nachrangig { opacity: .55; }
.panel__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.panel__kopf > div { display: grid; gap: 8px; }
.panel__hinweis { color: var(--text-secondary); font-size: 0.9375rem; max-width: 70ch; }
.panel__sperre { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-secondary); }
.panel__sperre svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.panel__aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.panel__aktionen--unten { justify-content: flex-start; }
.panel--fehler { border-color: var(--c-error); }
.panel--fehler .panel__kopf h2 { color: var(--c-error); }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--machine-line-2); background: var(--machine-panel-hi); color: var(--text-primary); font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 120ms var(--ease-out); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn--primaer { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--gefahr { border-color: rgba(255,69,58,.5); color: #FF6B60; }
.btn--klein { min-height: 36px; padding: 0 14px; font-size: 0.8125rem; }
.btn--leise { background: transparent; }
.btn--aktiv { background: var(--machine-panel-hi); border-color: var(--text-secondary); color: var(--text-primary); }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn__grund { font-size: 0.8125rem; color: var(--text-secondary); align-self: center; }
.sperre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.segment { display: inline-flex; gap: 6px; }

/* ---------- Verdikt + Ampel ---------- */
.verdikt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--machine-line); background: var(--machine-sunken); }
.verdikt__text { font-size: 1.0625rem; font-weight: 600; }
.verdikt__folge { font-size: 0.9375rem; color: var(--text-secondary); }
.verdikt--rot { border-color: rgba(255,69,58,.5); }
.verdikt--gelb { border-color: rgba(255,214,10,.4); }
.ampel { display: grid; gap: 1px; background: var(--machine-line); border: 1px solid var(--machine-line); border-radius: 16px; overflow: hidden; }
.ampel__zeile { display: grid; grid-template-columns: 22px minmax(140px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--machine-panel); }
.ampel__label { font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
.ampel__wert { color: var(--text-secondary); font-size: 0.9375rem; }
.ampel__zeit { font-family: var(--mono); font-size: 0.75rem; color: var(--text-tertiary); white-space: nowrap; }
.ampel__hilfe { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-secondary); font-size: 0.8125rem; }
.ampel__zeile--rot .ampel__wert { color: var(--c-error-text); }
.ampel__zeile--rot .ampel__hilfe { color: var(--text-primary); }
.ampel__zeile--gelb .ampel__wert { color: var(--c-warn-text); }
.ampel__nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--machine-line-2); font-family: var(--mono); font-size: 0.75rem; }

/* ---------- Kennzahlen ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kachel { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--machine-sunken); border: 1px solid var(--machine-line); box-shadow: inset 0 2px 10px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05); text-align: left; color: inherit; font: inherit; }
button.kachel { cursor: pointer; }
.kachel__label { font-size: 0.8125rem; color: var(--text-secondary); }
.kachel__wert { font-family: var(--mono); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.kachel--leit .kachel__wert { font-size: 2.25rem; }
.kachel__wert small { font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font); }
.kachel__wert--leer { color: var(--text-tertiary); font-size: 1rem; font-family: var(--font); }
.kachel__ziel { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.kachel__weg { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-lit); font-size: 0.8125rem; font-weight: 500; }
.kachel__weg svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.trend { font-family: var(--mono); font-size: 0.8125rem; color: var(--c-live); }

/* ---------- Felder ---------- */
.felder { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld__label { font-size: 0.8125rem; font-weight: 600; }
.feld__eingabe { width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 1rem; color: var(--text-primary); background-color: var(--machine-sunken);
  border: 1px solid var(--machine-line-2); border-radius: var(--r-field); transition: border-color 180ms var(--ease-out); }
textarea.feld__eingabe { min-height: 120px; resize: vertical; line-height: 1.5; }
.feld__eingabe--code { font-family: var(--mono); font-size: 0.875rem; }
.feld__eingabe--kurz { max-width: 200px; }
.feld__eingabe[readonly] { color: var(--text-secondary); }
select.feld__eingabe { background-color: var(--machine-sunken); color: var(--text-primary); }
.feld__geheim { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.feld__gruppe { display: flex; align-items: center; gap: 10px; }
.feld__hilfe { font-size: 0.8125rem; color: var(--text-secondary); }
.schalter { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.schalter input { width: 44px; height: 24px; margin: 0; appearance: none; border-radius: 12px; background: var(--machine-line-2); position: relative; cursor: pointer; transition: background-color 180ms var(--ease-out); }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 180ms var(--ease-out); }
.schalter input:checked { background: var(--accent); }
.schalter input:checked::after { transform: translateX(20px); }

/* ---------- Tabelle ---------- */
.tabelle { display: grid; gap: 12px; min-width: 0; }
.tabelle-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--machine-line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--machine-line); vertical-align: top; }
th { font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--text-secondary); background: var(--machine-sunken); white-space: nowrap; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
td.technik { font-size: 0.8125rem; color: var(--text-secondary); }
td:first-child, th:first-child { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.zeile--klick { cursor: pointer; transition: background-color 180ms var(--ease-out); }
tr.zeile--aktiv td { background: var(--accent-tint-d); }
tr.zeile--geloescht td { color: var(--text-tertiary); }
.auff-0 { color: var(--text-tertiary); }
.auff-n { color: var(--c-warn-text); font-weight: 600; }
.zeile__aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
td .zeile__aktionen { flex-wrap: nowrap; white-space: nowrap; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.filter .feld { gap: 4px; }
.filter .feld__eingabe { min-height: 44px; padding: 8px 12px; font-size: 0.9375rem; }
.filter .feld--suche { flex: 1 1 220px; }
.tabelle-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 0.8125rem; color: var(--text-secondary); }
.leer { display: grid; gap: 10px; justify-items: center; padding: 32px 24px; text-align: center; border: 1px dashed var(--machine-line-2); border-radius: 16px; }
.leer strong { font-size: 1.0625rem; }
.leer p { color: var(--text-secondary); max-width: 52ch; margin: 0; }
.leser-container:focus { outline: none; }

/* ---------- Kanal-Karten ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.karte { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--machine-sunken); border: 1px solid var(--machine-line); align-content: start; }
.karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.zustand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--machine-line-2); white-space: nowrap; flex: 0 0 auto; }
.zustand--oeffentlich { color: var(--c-live); border-color: rgba(48,209,88,.4); }
.zustand--test { color: var(--c-warn); border-color: rgba(255,214,10,.4); }
.zustand--aus { color: var(--text-secondary); }
.karte__tests { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8125rem; color: var(--text-secondary); }
.karte__sperre { font-size: 0.8125rem; color: var(--c-warn-text); }
.karte__weg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; }
.test-ok { color: var(--c-live); }
.test-offen { color: var(--text-secondary); }

/* ---------- Probe ---------- */
.proben { display: grid; gap: 1px; background: var(--machine-line); border: 1px solid var(--machine-line); border-radius: 16px; overflow: hidden; }
.probe { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--machine-panel); }
.probe__text { grid-column: 2 / -1; color: var(--text-secondary); font-size: 0.8125rem; }

/* ---------- Hörprobe ---------- */
.hp__satz { padding: 12px 16px; border-radius: 12px; background: var(--machine-sunken); border: 1px solid var(--machine-line); font-size: 0.9375rem; color: var(--text-secondary); }
.hp__satz strong { color: var(--text-primary); font-weight: 500; }
.hp tr.is-playing td { background: var(--accent-tint-d); }
.hp__name { white-space: nowrap; }
.hp__play { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; }
.hp__play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hp__balken { display: none; height: 4px; border-radius: 2px; background: var(--machine-line-2); overflow: hidden; margin-top: 6px; }
.hp__balken i { display: block; height: 100%; width: 100%; background: var(--accent-lit); transform-origin: left; transform: scaleX(0); }
.is-playing .hp__balken { display: block; }
.is-playing .hp__balken i { animation: hp-lauf 2.6s linear forwards; }
@keyframes hp-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hp__aktiv { color: var(--c-live); font-size: 0.75rem; font-weight: 600; }
.regie { display: grid; gap: 8px; }
.desktop-hinweis { display: none; font-size: 0.8125rem; color: var(--text-secondary); }

/* ---------- Versionen ---------- */
.ver { display: grid; gap: 16px; }
.ver__aktuell { display: grid; gap: 8px; }
.ver__text { white-space: pre-wrap; font-size: 0.9375rem; line-height: 1.55; padding: 14px 16px; border-radius: 12px; background: var(--machine-sunken); border: 1px solid var(--machine-line); }
.ver__text--gesperrt { color: var(--text-secondary); }
.ver__hist { display: grid; gap: 8px; }
.ver__eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--machine-line); font-size: 0.875rem; }
.ver__eintrag .meta { margin-right: auto; }
.diff { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--machine-sunken); border: 1px solid var(--machine-line); display: grid; }
.diff__z { padding: 1px 8px; border-radius: 4px; }
.diff__z--plus { background: rgba(48,209,88,.14); color: #8BE9A0; }
.diff__z--minus { background: rgba(255,69,58,.14); color: #FF9A92; text-decoration: line-through; }

/* ---------- Konsole + Leser ---------- */
.konsole { display: grid; gap: 12px; }
.konsole__verlauf { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; padding: 14px 16px; border-radius: 16px; background: var(--machine-sunken); border: 1px solid var(--machine-line); box-shadow: inset 0 2px 10px rgba(0,0,0,.6); }
.zug { display: grid; grid-template-columns: 44px 72px 1fr; gap: 10px; align-items: baseline; font-size: 0.9375rem; }
.zug__s { font-family: var(--mono); font-size: 0.75rem; color: var(--text-tertiary); text-align: right; }
.zug__wer { font-size: 0.6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.zug--agent .zug__wer { color: var(--accent-lit); }
.zug--anrufer .zug__wer { color: var(--c-live); }
.zug--ki .zug__wer { color: var(--c-ai); }
.zug--notiz, .zug--werkzeug { grid-template-columns: 44px 1fr; font-size: 0.8125rem; }
.zug--notiz .zug__text { color: var(--c-warn-text); }
.zug--werkzeug .zug__text { color: var(--accent-lit); font-family: var(--mono); }
.konsole__form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.leser { display: grid; gap: 12px; }
.leser__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 0.8125rem; color: var(--text-secondary); }
.leser__verlauf { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--machine-sunken); border: 1px solid var(--machine-line); box-shadow: inset 0 2px 10px rgba(0,0,0,.6); }

/* ---------- Checkliste ---------- */
.check { display: grid; gap: 1px; background: var(--machine-line); border: 1px solid var(--machine-line); border-radius: 16px; overflow: hidden; }
.check__punkt { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; background: var(--machine-panel); }
.check__ikon { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--machine-line-2); display: grid; place-items: center; font-size: 0.75rem; font-family: var(--mono); color: var(--text-secondary); }
.check__ikon--bestanden { border-color: var(--c-live); color: var(--c-live); font-family: var(--font); }
.check__ikon--fehlgeschlagen { border-color: var(--c-error); color: var(--c-error); font-family: var(--font); }
.check__text { font-size: 0.9375rem; }
.check__ergebnis { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.check__meta { grid-column: 2; }
.check__fortschritt { font-size: 0.8125rem; color: var(--text-secondary); }

/* ---------- Warteschlange ---------- */
.entwurf { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--machine-sunken); border: 1px solid var(--machine-line); }
.entwurf__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.entwurf__vorschau { font-size: 0.9375rem; line-height: 1.55; padding: 12px 14px; border-left: 2px solid var(--c-ai); }
mark.zitat { background: rgba(255,69,58,.18); color: #FFB3AD; padding: 0 3px; border-radius: 4px; }
.kritiker { display: grid; gap: 6px; }
.kritiker__z { display: grid; grid-template-columns: 22px 110px 1fr; gap: 10px; align-items: baseline; font-size: 0.875rem; }
.kritiker__name { font-weight: 600; }
.kritiker__z--veto .kritiker__text { color: var(--c-error-text); }
.entwurf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entwurf--erledigt { opacity: .7; }

/* ---------- Protokoll ---------- */
.protokoll { display: grid; gap: 1px; background: var(--machine-line); border: 1px solid var(--machine-line); border-radius: 16px; overflow: hidden; }
.protokoll__z { display: grid; grid-template-columns: 110px 130px 1fr; gap: 12px; padding: 10px 16px; background: var(--machine-panel); font-size: 0.875rem; }
.protokoll__details { grid-column: 3; color: var(--text-secondary); font-size: 0.8125rem; }

/* ---------- Markdown ---------- */
.md { display: grid; gap: 10px; max-width: 70ch; font-size: 0.9375rem; line-height: 1.55; }
.md h3 { font-size: 1.125rem; margin-top: 8px; } .md h4 { font-size: 1rem; }
.md ul, .md ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.md code { font-size: 0.8125rem; padding: 1px 6px; border-radius: 6px; background: var(--machine-sunken); border: 1px solid var(--machine-line); }

/* ---------- Erststart ---------- */
.erststart { max-width: 560px; margin: 24px auto; display: grid; gap: 16px; width: 100%; }
.server-hinweis { font-family: var(--mono); font-size: 0.8125rem; padding: 12px 14px; border-radius: 12px; background: var(--machine-sunken); border: 1px solid var(--machine-line); color: var(--text-secondary); word-break: break-word; }

/* ---------- Dialog + Toast ---------- */
dialog { border: 1px solid var(--machine-line-2); border-radius: var(--r-card); background: var(--machine-panel); color: var(--text-primary); padding: 24px; width: min(92vw, 460px); box-shadow: var(--shadow-d-md); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog__form { display: grid; gap: 16px; }
.dialog__aktionen { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 30;
  padding: 12px 18px; border-radius: var(--r-pill); background: var(--machine-panel-hi); border: 1px solid var(--machine-line-2); box-shadow: var(--shadow-d-md); font-size: 0.9375rem; max-width: min(92vw, 560px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.toast.is-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile Tabs ---------- */
.tabs { display: none; }

/* ---------- Helle Insel: nur die Inhaltsspalte (Übernahme). Navigation und Rest bleiben dunkel = sichtbarer Kontrast-Peak. ---------- */
.spalte.is-insel { --machine: var(--paper); --machine-sunken: #ECECEF; --machine-panel: var(--panel); --machine-panel-hi: #F7F7F9;
  --machine-line: var(--hair); --machine-line-2: rgba(22,24,29,.2); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3);
  --accent-lit: var(--accent-text); --accent-tint-d: rgba(0,102,255,.08); --c-live: var(--c-live-ink); --c-error: var(--c-error-ink); --c-error-text: var(--c-error-ink); --c-warn-text: #8A5A00;
  --shadow-d-md: var(--shadow-md); color-scheme: light; background: var(--paper); color: var(--ink); }
.spalte.is-insel .btn--primaer { color: #fff; }
.spalte.is-insel .kachel, .spalte.is-insel .konsole__verlauf, .spalte.is-insel .leser__verlauf { box-shadow: none; }
.spalte.is-insel .schalter input::after { background: #fff; }
.spalte.is-insel mark.zitat { background: rgba(215,0,21,.12); color: var(--c-error-ink); }

/* ---------- Übergänge zwischen Bereichen ---------- */
.haupt.is-wechsel { animation: einblenden 220ms var(--ease-out); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Hover nur mit echtem Zeiger ---------- */
@media (hover: hover) {
  .nav__link:hover { background: var(--machine-panel-hi); color: var(--text-primary); }
  .btn:hover { background: var(--machine-panel-hi); border-color: var(--machine-line-2); }
  .btn--primaer:hover { background: #2E7BFF; border-color: #2E7BFF; }
  tr.zeile--klick:hover td { background: var(--machine-panel-hi); }
  .feld__eingabe:hover { border-color: var(--machine-line-2); }
  button.kachel:hover { border-color: var(--machine-line-2); }
}
@media (hover: none) {
  .nav__link:hover, .btn:hover, tr.zeile--klick:hover td { background: inherit; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1023px) {
  :root { --nav-w: 200px; }
  .kopf, .haupt { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .spalte { grid-column: 1; }
  .nav { position: fixed; inset: 0; z-index: 20; height: auto; transform: translateX(-100%); transition: transform 220ms var(--ease-out); border-right: 0; padding-bottom: 88px; }
  body.nav-offen .nav { transform: none; }
  .kopf { grid-template-columns: 1fr; gap: 8px; padding: 16px 12px 0; min-height: 0; }
  .kopf__titel h1 { font-size: 1.25rem; }
  .kopf__puls { align-items: flex-start; }
  .puls { min-height: 36px; font-size: 0.875rem; white-space: normal; }
  .kopf__nutzer { display: none; }
  .haupt { padding: 0 12px 104px; gap: 16px; margin-top: 16px; }
  .panel { padding: 12px; border-radius: 16px; gap: 12px; }
  .meta, .technik { font-size: 0.8125rem; }
  .ampel__zeile { grid-template-columns: 22px 1fr auto; }
  .ampel__wert { grid-column: 2 / -1; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--machine-sunken); border-top: 1px solid var(--machine-line); }
  .tab { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border-radius: 12px; border: 0; background: transparent; color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; text-decoration: none; cursor: pointer; }
  .tab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .tab[aria-current="page"], .tab.is-aktiv { color: var(--text-primary); background: var(--accent-tint-d); }
  .tab:active { transform: scale(.97); }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kachel__wert { font-size: 1.25rem; }
  .kachel--leit .kachel__wert { font-size: 1.75rem; }
  .nur-desktop { display: none; }
  .desktop-hinweis { display: block; }
  .konsole__form { grid-template-columns: 1fr; }
  .zug { grid-template-columns: 36px 1fr; }
  .zug__wer { grid-column: 2; }
  .zug__text { grid-column: 2; }
  .zug--notiz, .zug--werkzeug { grid-template-columns: 36px 1fr; }
  .kritiker__z { grid-template-columns: 22px 1fr; }
  .kritiker__text { grid-column: 2; }
  .check__punkt { grid-template-columns: 28px 1fr; }
  .check__punkt .zeile__aktionen, .check__ergebnis { grid-column: 2; white-space: normal; }
  .protokoll__z { grid-template-columns: 1fr; gap: 2px; }
  .protokoll__details { grid-column: 1; }
  .panel__aktionen { justify-content: stretch; }
  .panel__aktionen .btn { flex: 1 1 auto; }
  .entwurf { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .puls .punkt::after { display: none; }
  .is-playing .hp__balken i { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- Anmeldung + Einrichtung (H3): eine Karte auf dem Grund */
body.auth { display: grid; place-items: center; min-height: 100svh; padding: 24px; }
.auth__karte { width: min(460px, 100%); display: grid; gap: 18px; padding: 28px 24px; }
.auth__karte h1 { font-size: 1.5rem; margin: 0; }
.auth__karte h1:focus { outline: none; }
.auth__marke { display: flex; align-items: center; gap: 12px; }
.auth__marke .nav__markenname { display: grid; }
.auth__marke .nav__markenname span { color: var(--text-secondary); font-size: 0.8125rem; }
.auth__karte .felder { display: grid; gap: 14px; }
.auth__karte .panel__aktionen--unten { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.auth__fuss { margin: 0; }
.auth__codes { margin: 0; padding: 14px 16px; border: 1px solid var(--machine-line); border-radius: 12px; background: var(--machine); line-height: 1.7; white-space: pre-wrap; }
.auth__karte a { color: var(--accent-lit); }
.auth__karte [hidden] { display: none !important; }

/* Live-Modus: Prototyp-Leiste weg, einmalige Werte im Dialog */
.proto[hidden] { display: none !important; }
#dialog-einmal[hidden] { display: none !important; }
#dialog-einmal-wert { font-size: 0.8125rem; white-space: pre-wrap; word-break: break-all; }
.panel__fehler { margin: 12px 0 0; }
.feld[hidden], .dialog__form [hidden] { display: none !important; }