/* mrmedia-portal — ein Token-System für Kundenbereich und Admin (Modus „Operate“, PRODUCT.md).
   Farben aus mrmedia-web/DESIGN.md (Hex normativ). Schrift Outfit, Zahlen tabular-nums.
   Kontraste gerechnet (DESIGN.md, Rechen-Regel): mist auf midnight 5,63:1 · faint nur auf ink/midnight (≥ 4,72:1)
   · coral auf midnight 6,2:1 · bad-text #FF7A86 auf getönter Bad-Fläche 6,3:1 · ink auf coral 6,85:1. */
@font-face { font-family: Outfit; src: url(/public/outfit.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root { color-scheme: dark;
  /* Farben */
  --ink: #0B0F19; --midnight: #111827; --slate: #1E2636; --slate-raised: #212A3E;
  --mist: #8A91A3; --faint: #7C8494; --cloud: #F3F4F6;
  --coral: #FF6B5B; --coral-deep: #E8533F; --coral-soft: #D79A92;
  --on: #34D399; --bad: #FF5B6A; --bad-text: #FF7A86; --warn: #F5A623; --daten2: #4E7BE8;
  --line: rgba(255, 255, 255, .08); --rand: rgba(255, 255, 255, .15); --rand-stark: rgba(255, 255, 255, .24);
  --tint-on: rgba(52, 211, 153, .08); --tint-bad: rgba(255, 91, 106, .10); --tint-warn: rgba(245, 166, 35, .08); --tint-coral: rgba(255, 107, 91, .08);
  --feld-grund: rgba(0, 0, 0, .3);
  /* Rollen, die im hellen Modus anders liegen als ihr Grundton (seit 15.10.2026, Schalter in der Leiste) */
  --akzent: var(--coral);          /* Coral als SCHRIFT — hell zu schwach, dort dunkler */
  --auf-coral: #0B0F19;            /* Schrift auf Coral-/Amber-Fläche, in beiden Modi dunkel (6,85:1) */
  --spur: rgba(255, 255, 255, .07); --zeile-hover: rgba(255, 255, 255, .02);
  --schatten: 0 30px 80px -40px rgba(0, 0, 0, .8); --fuss-grund: rgba(11, 15, 25, .85);
  /* Radien (Panel-Leiter bis 12px, Badge 4px) */
  --r-bar: 3px; --r-badge: 4px; --r-control: 9px; --r-panel: 12px;
  /* Abstände */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* Schrift */
  --fs-label: 12.5px; --fs-klein: 13px; --fs-text: 15px; --fs-titel: 17px; --fs-h1: clamp(22px, 2.6vw, 28px); --fs-daten: clamp(22px, 2.4vw, 28px);
  --leiste: 240px; --inhalt: 1120px;
}

/* Heller Modus (Schalter „Hell/Dunkel“ in der Leiste, Cookie `thema`, Server setzt data-theme vor dem ersten Bild).
   Dunkel bleibt Vorgabe (Marke). Kontraste gerechnet auf #FFFFFF bzw. #F4F5F8:
   cloud #111827 17,7:1 · mist #4A5262 7,6:1 · faint #5A6170 6,1:1 · akzent #B8382A 5,6:1 · on #0A7A4E 5,4:1
   · warn #8A5300 6,6:1 · bad-text #B4232F 6,4:1 · daten2 #2D5BC9 6,0:1 · auf-coral auf Coral unverändert 6,85:1
   · coral-soft #A34B40 (SSH-Befehl, code, Wortmarke) 5,3:1 auf ink, 5,1:1 auf slate, 4,75:1 auf slate-raised —
   vorher #B5574B mit 4,35 / 4,16:1 unter AA (Gestaltungslauf 16.10.2026). */
:root[data-theme="light"] { color-scheme: light;
  --ink: #F4F5F8; --midnight: #FFFFFF; --slate: #EEF0F4; --slate-raised: #E6E9EF;
  --mist: #4A5262; --faint: #5A6170; --cloud: #111827; --coral-soft: #A34B40;
  --akzent: #B8382A; --on: #0A7A4E; --bad: #C42B3A; --bad-text: #B4232F; --warn: #8A5300; --daten2: #2D5BC9;
  --line: rgba(17, 24, 39, .09); --rand: rgba(17, 24, 39, .16); --rand-stark: rgba(17, 24, 39, .28);
  --tint-on: rgba(10, 122, 78, .08); --tint-bad: rgba(196, 43, 58, .08); --tint-warn: rgba(245, 166, 35, .14); --tint-coral: rgba(255, 107, 91, .10);
  --feld-grund: #FFFFFF; --spur: rgba(17, 24, 39, .08); --zeile-hover: rgba(17, 24, 39, .03);
  --schatten: 0 24px 60px -36px rgba(17, 24, 39, .35); --fuss-grund: rgba(255, 255, 255, .9);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* sonst gewinnt z. B. .knopf-leise { display: inline-flex } — Passkey-Knopf ohne JS sichtbar (23.10.2026) */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cloud); font: 400 var(--fs-text)/1.5 Outfit, system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--akzent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(255, 107, 91, .35); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------------------------------------
   Rahmen: Seitenleiste ab 1000px, darunter Kopfzeile mit Menü
   --------------------------------------------------------------------------------------------- */
.sprung { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--coral); color: var(--auf-coral); padding: 8px 14px; border-radius: var(--r-control); font-weight: 600; }
.sprung:focus { left: 8px; }
.huelle { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); min-height: 100vh; }
.leiste { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s5); padding: 22px 14px 16px; background: var(--midnight); border-right: 1px solid var(--line); overflow-y: auto; }
.leiste > .logo { padding: 0 8px; }
.leiste nav ul, .menue-tafel nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.leiste nav a, .menue-tafel nav a { display: block; color: var(--mist); font-weight: 500; padding: 8px 10px; border-radius: var(--r-control); transition: background .15s, color .15s; }
.leiste nav a:hover, .menue-tafel nav a:hover { color: var(--cloud); background: var(--slate); text-decoration: none; }
.leiste nav a.aktiv, .menue-tafel nav a.aktiv { color: var(--cloud); background: var(--slate-raised); box-shadow: inset 2px 0 0 var(--coral); }
.leiste-unten { margin-top: auto; display: grid; gap: var(--s3); padding: var(--s4) 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-klein); }
.leiste-unten .ich { margin: 0; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontoname { margin: 0; display: grid; gap: 2px; color: var(--cloud); }
.kontoname span, .kontowahl span { color: var(--mist); font-size: var(--fs-label); }
.kontowahl { margin: 0; } .kontowahl label { display: grid; gap: 4px; } .kontowahl select { width: 100%; }
.leiste-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; }
.leiste-knoepfe > form.inline { margin-left: auto; }   /* „Dunkel“/„Abmelden“ ragten im hellen Modus über die Leiste (16.10.2026) */
.sprache { color: var(--mist); font-size: var(--fs-klein); }
.sprache:hover { color: var(--cloud); }
.spalte { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: var(--inhalt); margin: 0 auto; padding: 32px 40px 24px; display: grid; gap: var(--s5); align-content: start; flex: 1; }
.kopf-mobil { display: none; }

.logo { display: inline-flex; gap: 10px; align-items: center; color: var(--cloud); }
.logo:hover { text-decoration: none; }
.logo img { flex: none; }
.wm { font-size: 19px; font-weight: 300; letter-spacing: -0.02em; color: var(--coral-soft); }
.wm b { font-weight: 700; color: var(--cloud); }  /* wie die Website (mrmedia-web globals.css .logo-word) — DESIGN.md §5 sagt Coral, s. GESTALTUNG.md */
.wm-zusatz { font-size: var(--fs-klein); color: var(--mist); font-weight: 500; padding-left: 10px; border-left: 1px solid var(--rand); }

.fuss { max-width: var(--inhalt); width: 100%; margin: 0 auto; padding: 8px 40px 32px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-klein); }
.fuss a { color: var(--faint); }
.fuss a:hover { color: var(--cloud); }

/* Gast-Rahmen (Login, Registrierung, Einladung, Kündigen ohne Login) */
.gast-kopf { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; max-width: 1120px; width: 100%; margin: 0 auto; }
.gast-inhalt { max-width: 1120px; padding-top: 8px; }
body.gast .fuss { justify-content: center; }

.band { background: #F5A623; color: var(--auf-coral); padding: 8px 24px; font-weight: 600; font-size: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.band.stoerung { background: #B4232F; color: #fff; }    /* weiß auf #B4232F 6,4:1 */
.band.wartung { background: #1E4FC2; color: #fff; }     /* weiß auf #1E4FC2 7,0:1 */
.band button { background: var(--ink); color: var(--cloud); border-color: var(--ink); }
.band a { color: inherit; text-decoration: underline; }

@media (max-width: 999px) {
  .huelle { display: block; }
  .leiste { display: none; }
  .kopf-mobil { display: flex; position: sticky; top: 0; z-index: 5; justify-content: space-between; align-items: center; gap: var(--s3); padding: 10px 16px; background: var(--midnight); border-bottom: 1px solid var(--line); }
  .menue > summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--rand); border-radius: var(--r-control); font-weight: 500; font-size: 14px; }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border: solid var(--mist); border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
  .menue[open] > summary { background: var(--slate-raised); }
  .menue[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
  .menue-tafel { position: absolute; left: 0; right: 0; top: 100%; background: var(--midnight); border-bottom: 1px solid var(--line); padding: 10px 16px 18px; display: grid; gap: var(--s4); max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: var(--schatten); }
  .menue-tafel nav a { padding: 11px 12px; font-size: 16px; }
  main { padding: 20px 16px 16px; gap: var(--s4); }
  .fuss { padding: 8px 16px 28px; }
  .gast-kopf { padding: 16px; }
}

/* ---------------------------------------------------------------------------------------------
   Typografie und Seitenkopf
   --------------------------------------------------------------------------------------------- */
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
h2 { margin: 0 0 var(--s4); font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
h2 .leise, h2 small { font-weight: 400; }
h3 { margin: var(--s5) 0 var(--s3); font-size: 15px; font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
.unter { color: var(--mist); margin: 6px 0 0; max-width: 70ch; }
.leise { color: var(--mist); font-size: 14px; }
small { color: var(--mist); font-size: var(--fs-klein); }
.label { color: var(--mist); font-size: var(--fs-label); font-weight: 500; }
.leer { color: var(--mist); margin: 0; }
.r { text-align: right; }
.on { color: var(--on); } .warn { color: var(--warn); } .bad { color: var(--bad); }
b, strong { font-weight: 600; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--coral-soft); background: var(--slate); padding: 2px 6px; border-radius: var(--r-badge); overflow-wrap: anywhere; }
pre { overflow-x: auto; }

.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.kopfzeile > div:first-child { min-width: 0; }
.kopfzeile > .knoepfe { flex: none; }
.pfad ol { list-style: none; margin: 0 0 -8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-klein); color: var(--mist); }
.pfad li + li::before { content: '/'; margin: 0 8px; color: var(--faint); }
.pfad a { color: var(--mist); } .pfad a:hover { color: var(--cloud); }
.pfad [aria-current] { color: var(--cloud); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; display: inline-block; vertical-align: bottom; }

/* Status: LED + Wort */
.st { font-weight: 500; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.st.on i { background: var(--on); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.st.warn i { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 166, 35, .18); }
.st.bad i { background: var(--bad); box-shadow: 0 0 0 3px rgba(255, 91, 106, .18); }
.st.leise { color: var(--mist); font-size: inherit; }

/* ---------------------------------------------------------------------------------------------
   Flächen
   --------------------------------------------------------------------------------------------- */
.feld { background: var(--midnight); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 24px; min-width: 0; }
.feld > h2:first-child { margin-bottom: var(--s4); }
.feld + .feld { margin-top: 0; }
.feld.ruhig { background: transparent; }
.feld .abschnitt { border-top: 1px solid var(--line); margin-top: var(--s5); padding-top: var(--s5); }
.raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.raster.gleich, .raster:has(> .feld:not(.breit) + .feld:not(.breit)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster > .stapel { display: grid; gap: var(--s5); align-content: start; }
.mitte { max-width: 440px; margin: 24px auto 0; width: 100%; }
.mitte .feld { padding: 28px; }
.mitte h1 { font-size: 24px; margin: 0 0 4px; }
.mitte .formular { margin-top: var(--s5); }

/* Kennzahlen-Leiste (Messwerte: Wert groß, Bezugsgröße darunter) */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--midnight); border: 1px solid var(--line); border-radius: var(--r-panel); }
.zahlen > div { padding: 18px 22px; border-left: 1px solid var(--line); display: grid; gap: 4px; align-content: start; min-width: 0; }
.zahlen > div:first-child { border-left: 0; }
.zahlen strong { font-size: var(--fs-daten); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.zahlen small { overflow-wrap: anywhere; }
.zahlen small a { color: var(--akzent); }

/* Datenblatt (Key/Value) */
.daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; font-size: 14px; }
.daten dt, .daten dd { padding: 9px 0; border-top: 1px solid var(--line); }
.daten dt:first-of-type, .daten dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.daten dt { color: var(--mist); }
.daten dd { margin: 0; overflow-wrap: anywhere; text-align: right; padding-left: var(--s5); }
.daten dd .kopier { justify-content: flex-end; }

/* Meldungen: Vollrahmen + Tönung + Status-Wort (kein Seitenstreifen) */
.meldung { padding: 12px 16px; border-radius: var(--r-control); border: 1px solid rgba(245, 166, 35, .35); background: var(--tint-warn); margin: 0; overflow-wrap: anywhere; }
.meldung::before { content: 'Hinweis'; font-weight: 600; color: var(--warn); margin-right: 10px; }
.meldung.ok { border-color: rgba(52, 211, 153, .35); background: var(--tint-on); }
.meldung.ok::before { content: 'OK'; color: var(--on); }
.meldung.bad { border-color: rgba(255, 91, 106, .35); background: var(--tint-bad); color: var(--cloud); }
.meldung.bad::before { content: 'Achtung'; color: var(--bad-text); }
html[lang=en] .meldung::before { content: 'Note'; }
html[lang=en] .meldung.bad::before { content: 'Attention'; }
.meldung form.inline { display: inline-flex; margin-left: 8px; }
.meldung .knoepfe { margin-top: 10px; }

/* Aufgabenliste (Konto-Hinweise auf der Übersicht) */
.aufgaben { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--midnight); }
.aufgaben li { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.aufgaben li:first-child { border-top: 0; }
.aufgaben .was { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.aufgaben .was b { font-weight: 600; }
.aufgaben .was span { color: var(--mist); font-size: 14px; }
.aufgaben form { margin: 0; }

/* ---------------------------------------------------------------------------------------------
   Knöpfe
   --------------------------------------------------------------------------------------------- */
button, .knopf, .knopf-leise { font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--cloud); background: transparent; border: 1px solid var(--rand); border-radius: var(--r-control); padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .1s; white-space: nowrap; }
button:hover, .knopf-leise:hover { border-color: var(--coral); text-decoration: none; }
button:active, .knopf:active, .knopf-leise:active { transform: scale(.97); }
button:disabled, button[disabled] { opacity: .35; pointer-events: none; }
.knopf, button.knopf, .formular button:not(.gefahr):not(.still):not(.leise-knopf), .formular .knoepfe button:not(.gefahr) { background: var(--coral); border-color: var(--coral); color: var(--auf-coral); font-weight: 600; }
.knopf:hover, button.knopf:hover, .formular button:not(.gefahr):not(.still):not(.leise-knopf):hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--auf-coral); text-decoration: none; }
button.gefahr, .knopf.gefahr { border-color: rgba(255, 91, 106, .45); color: var(--bad-text); background: var(--tint-bad); }
button.gefahr:hover { border-color: var(--bad); background: rgba(255, 91, 106, .16); }
button.still { border-color: transparent; color: var(--mist); padding: 6px 8px; }
button.still:hover { color: var(--cloud); border-color: var(--rand); }
button.laedt { cursor: progress; }
button.laedt::after { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
form.inline { margin: 0; display: inline; }
form { margin: 0; }

/* Kopieren */
.kopier { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; flex-wrap: wrap; }
.kopier .wert { font-weight: 500; overflow-wrap: anywhere; }
.kopier .befehl { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--coral-soft); background: var(--ink); border: 1px solid var(--line); padding: 6px 10px; border-radius: var(--r-badge); overflow-wrap: anywhere; }
.kopier-knopf { font-size: 12.5px; padding: 5px 10px; min-height: 28px; color: var(--mist); border-color: var(--line); }
.kopier-knopf:hover { color: var(--akzent); }
.kopier-knopf.ok { color: var(--on); border-color: rgba(52, 211, 153, .4); }

/* ---------------------------------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------------------------------- */
.formular { display: grid; gap: 14px; margin: 0; max-width: 560px; }
.feld .formular { max-width: none; }
.formular label { display: grid; gap: 6px; color: var(--mist); font-size: var(--fs-klein); font-weight: 500; }
.formular .zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formular.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formular.zwei .ganz, .formular.zwei > button { grid-column: 1 / -1; }
.formular > button, .formular > .knoepfe { justify-self: start; margin-top: 4px; }
input, select, textarea { font: inherit; font-size: 15px; color: var(--cloud); background: var(--feld-grund); border: 1px solid var(--rand); border-radius: var(--r-control); padding: 9px 12px; min-width: 0; width: 100%; transition: border-color .15s; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--coral); }
input[type=range] { padding: 0; accent-color: var(--coral); background: none; border: 0; }
/* Schieberegler selbst gezeichnet: die Browser-Spur war im hellen Modus fast schwarz (Audit 23.10.2026). Spur = erhöhte Fläche + Rand,
   Daumen = Coral (aktive Auswahl). Füllung bis zum Wert per --wert (app.js setzt sie), ohne JS bleibt die Spur einfarbig. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 28px; cursor: pointer; --wert: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid var(--rand);
  background: linear-gradient(to right, var(--coral) 0 var(--wert), var(--slate-raised) var(--wert)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; border: 1px solid var(--rand); background: var(--slate-raised); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--coral); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--coral); border: 2px solid var(--midnight); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--coral); border: 2px solid var(--midnight); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--coral); outline-offset: 2px; }
input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--coral); outline-offset: 2px; }
input[type=file] { font-size: 13px; color: var(--mist); padding: 7px; }
input::placeholder, textarea::placeholder { color: var(--mist); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--rand-stark); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--coral); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
input:disabled { color: var(--mist); }
input[aria-invalid=true] { border-color: var(--bad); }
textarea { resize: vertical; line-height: 1.5; }
.formular textarea { min-height: 110px; }
select { appearance: none; background: var(--feld-grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A91A3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 34px; }
.haken { display: flex !important; gap: 10px !important; align-items: flex-start; color: var(--cloud) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45; cursor: pointer; }
.haken input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl .haken { border: 1px solid var(--line); border-radius: var(--r-control); padding: 7px 11px; align-items: center; }
.wahl .haken input { margin-top: 0; }
.wahl .haken:has(input:checked) { border-color: rgba(255, 107, 91, .5); background: var(--tint-coral); }
.konfig-wert { color: var(--cloud); font-weight: 600; }

/* ---------------------------------------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--mist); font-size: var(--fs-label); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
tr:last-child td { border-bottom: 0; }
td .leise { font-size: 13px; }
.kurz { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelle { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.zeilen-link tbody tr { position: relative; }
table.zeilen-link tbody tr:hover td { background: var(--zeile-hover); }
.name-zeile { display: grid; gap: 2px; }
.name-zeile a { font-weight: 500; }
.summe { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; border-top: 1px solid var(--rand); padding-top: 14px; margin: 6px 0 var(--s3); }

/* Schmale Bildschirme: Listen-Tabellen werden zu Zeilenblöcken, Zellbeschriftung aus data-l (sichtbarer Text im DOM) */
@media (max-width: 700px) {
  table.stapeln, table.stapeln tbody, table.stapeln tr, table.stapeln td { display: block; width: 100%; }
  table.stapeln thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stapeln tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stapeln tr:last-child { border-bottom: 0; }
  table.stapeln td { border: 0; padding: 3px 0; text-align: left; display: flex; justify-content: space-between; gap: 12px; }
  table.stapeln td.r { text-align: right; }
  /* Aktionsknopf einer Zeile: eigene volle Zeile statt neben dem letzten Wert (stand schief unter „Verlängerung“, Audit 23.10.2026) */
  table.stapeln td.aktion { display: block; padding-top: 10px; }
  table.stapeln td.aktion:empty { display: none; }
  table.stapeln td.aktion > .knopf-leise, table.stapeln td.aktion > .knopf { display: flex; width: 100%; min-height: 44px; justify-content: center; }
  table.stapeln td > .lab { color: var(--mist); font-size: 13px; flex: none; }
  table.stapeln td:first-child { font-size: 15px; }
  .feld > table:not(.stapeln), .feld > details table { display: block; overflow-x: auto; }
}
@media (min-width: 701px) { td > .lab { display: none; } }

/* ---------------------------------------------------------------------------------------------
   Reiter, Balken, Sonstiges
   --------------------------------------------------------------------------------------------- */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
.reiter a { color: var(--mist); font-weight: 500; font-size: 14px; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter a:hover { color: var(--cloud); text-decoration: none; }
.reiter a.aktiv { color: var(--cloud); border-bottom-color: var(--coral); }
.betrag { font-size: var(--fs-daten); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 var(--s3); }
.betrag .leise { font-size: 14px; letter-spacing: 0; }
.ust .spur, .spur { height: 6px; background: var(--spur); border-radius: 999px; overflow: hidden; }
.fuell { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral-deep), var(--coral)); }
.fuell.on { background: linear-gradient(90deg, var(--coral-deep), var(--coral)); } .fuell.warn { background: var(--warn); } .fuell.bad { background: var(--bad); }
.ust-zahlen { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--mist); gap: 12px; flex-wrap: wrap; }
.ust-zahlen b { color: var(--cloud); font-weight: 600; }
.schluessel { font-size: 20px; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 10px; overflow-wrap: anywhere; user-select: all; }
.qr { background: #fff; padding: 10px; border-radius: var(--r-control); width: 200px; height: 200px; }
.qr svg { width: 100%; height: 100%; }
.codes { columns: 2; font-size: 15px; letter-spacing: 0.04em; padding-left: 22px; }
.codes li { margin-bottom: 6px; }
.nachricht { border: 1px solid var(--line); border-radius: var(--r-control); padding: 12px 16px; margin: 0 0 12px; }
.nachricht.admin { border-color: rgba(255, 107, 91, .35); background: var(--tint-coral); }
.nachricht.intern { border-color: rgba(245, 166, 35, .35); background: var(--tint-warn); }
.nachricht .wer { color: var(--mist); font-size: 13px; margin-bottom: 6px; }
.nachricht .text { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.mail { white-space: pre-wrap; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); padding: 14px; font: 13px/1.5 ui-monospace, monospace; }
details > summary { cursor: pointer; }
.anhaenge { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.anhaenge li::before { content: '↳ '; color: var(--mist); }
.karte { background: var(--midnight); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.karte .preis { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.karte p { margin: 0; color: var(--mist); font-size: 13px; }

/* Produkt-Zeilen (Bestellen): Liste statt Kartenraster */
.produkte { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--midnight); overflow: hidden; }
.produkte li { border-top: 1px solid var(--line); }
.produkte li:first-child { border-top: 0; }
.produkte a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: 18px 22px; color: var(--cloud); transition: background .15s; }
.produkte a > span:first-child { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.produkte a:hover > span:first-child { transform: translateX(4px); }
.produkte a:hover { background: var(--tint-coral); text-decoration: none; }
.produkte a:hover .p-name { color: var(--akzent); }
.produkte .p-name { font-weight: 600; font-size: 16px; }
.produkte .p-text { color: var(--mist); font-size: 14px; margin-top: 2px; }
.produkte .p-preis { text-align: right; white-space: nowrap; }
.produkte .p-preis b { font-size: 18px; font-weight: 600; }
.produkte .p-preis small { display: block; }
.produkte .p-pfeil { color: var(--mist); transition: transform .2s; }
.produkte a:hover .p-pfeil { transform: translateX(4px); color: var(--akzent); }
@media (max-width: 600px) { .produkte a { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; } .produkte .p-pfeil { display: none; } }

/* Diagramm (Forecast) */
.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm text { fill: var(--mist); font-size: 12px; font-family: Outfit, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.diagramm .gitter { stroke: var(--line); }
.diagramm .null { stroke: var(--rand-stark); }
.diagramm .b-gebucht { fill: var(--coral); }
.diagramm .b-plan-ein { fill: url(#schraffur-ein); stroke: var(--coral); stroke-width: 1; }
.diagramm .b-plan-aus { fill: url(#schraffur-aus); stroke: var(--mist); stroke-width: 1; }
.diagramm .linie { fill: none; stroke: var(--cloud); stroke-width: 2; }
.diagramm .punkt { fill: var(--ink); stroke: var(--cloud); stroke-width: 2; }
.diagramm .wert { fill: var(--cloud); font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 var(--s4); padding: 0; list-style: none; font-size: 13px; color: var(--mist); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende i { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.legende .l-gebucht { background: var(--coral); }
.legende .l-plan-ein { border: 1px solid var(--coral); background: repeating-linear-gradient(135deg, rgba(255, 107, 91, .55) 0 2px, transparent 2px 5px); }
.legende .l-plan-aus { border: 1px solid var(--mist); background: repeating-linear-gradient(45deg, rgba(138, 145, 163, .6) 0 2px, transparent 2px 5px); }
.legende .l-linie { height: 2px; background: var(--cloud); border-radius: 1px; }
.zeitraum { display: inline-flex; border: 1px solid var(--rand); border-radius: var(--r-control); overflow: hidden; }
.zeitraum a { color: var(--mist); padding: 6px 12px; font-size: 13px; font-weight: 500; border-left: 1px solid var(--rand); }
.zeitraum a:first-child { border-left: 0; }
.zeitraum a:hover { color: var(--cloud); text-decoration: none; background: var(--slate); }
.zeitraum a.aktiv { color: var(--auf-coral); background: var(--coral); }
.monate details { border-top: 1px solid var(--line); }
.monate details:first-of-type { border-top: 0; }
.monate summary { list-style: none; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 11px 0; }
.monate summary::-webkit-details-marker { display: none; }
.monate summary::before { content: ''; width: 6px; height: 6px; border: solid var(--mist); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; align-self: center; }
.monate details[open] > summary::before { transform: rotate(45deg); }
.monate summary:hover { color: var(--akzent); }
.monate summary .n { color: var(--mist); font-size: 13px; }
.monate details > div { padding: 0 0 14px 30px; }

/* DNS */
table.dns td.wert { overflow-wrap: anywhere; max-width: 520px; }
table.dns tr.aktiv td { background: var(--slate); }
.dns-zeile { display: grid; grid-template-columns: 1.1fr 0.7fr 2fr 0.6fr 0.7fr; gap: 10px; align-items: start; }
.dns-zeile small { font-size: 12px; }
@media (max-width: 900px) { .dns-zeile { grid-template-columns: 1fr 1fr; } .dns-zeile .breit { grid-column: 1 / -1; } }

/* Wissen (Admin) */
.w-stand { margin: 0; color: var(--mist); font-size: 13px; }
.w-suche { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.w-suche input { flex: 1; min-width: 200px; }
.w-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.w-punkt.gruen { background: var(--on); } .w-punkt.gelb { background: var(--warn); } .w-punkt.rot { background: var(--bad); } .w-punkt.grau { background: var(--faint); }
.w-gruppe { font-size: 13px; color: var(--mist); font-weight: 600; margin: 16px 0 6px; }
.w-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.w-bereich { margin: 0 0 8px; } .w-bereich summary { font-weight: 500; }
.w-treffer { margin: 0 0 14px; } .w-treffer p { margin: 4px 0 0; font-size: 13px; }
.w-treffer mark, .w-text mark { background: rgba(255, 107, 91, 0.25); color: var(--cloud); border-radius: 2px; }
.w-doku { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.w-doku:not(:has(.w-toc)) { grid-template-columns: 1fr; }
.w-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; font-size: 13px; }
.w-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .w-toc li.e3 { padding-left: 12px; }
.w-text { max-width: 900px; line-height: 1.6; overflow-wrap: anywhere; }
.w-text h1 { font-size: 22px; margin: 0 0 12px; } .w-text h2 { font-size: 18px; margin: 26px 0 10px; display: block; } .w-text h3 { font-size: 15px; margin: 20px 0 8px; }
.w-text table { font-size: 13px; margin: 10px 0; } .w-text .tabwrap { overflow-x: auto; }
.w-text pre.code { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); padding: 12px; overflow-x: auto; font: 12.5px/1.5 ui-monospace, monospace; }
.w-text blockquote { border: 1px solid var(--line); border-radius: var(--r-control); margin: 12px 0; padding: 8px 14px; color: var(--mist); }
.w-text a.falle { font-weight: 600; }
.w-text li.todo.erledigt { color: var(--mist); }
.w-export { width: 100%; font: 13px/1.5 ui-monospace, monospace; }
@media (max-width: 900px) { .w-doku { grid-template-columns: 1fr; } .w-toc { position: static; max-height: none; } }

/* Admin-Altlasten (Buchhaltungs-Vokabular, das einzelne Admin-Seiten noch nutzen) */
.vorschlag { margin: 0 0 4px; }
.vorschlag button { font-size: 12px; padding: 3px 8px; text-align: left; }
.bestand { margin-bottom: 18px; }
.klein { font-size: 12.5px; margin-top: 2px; }

/* ---------------------------------------------------------------------------------------------
   Umbrüche
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) { .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .raster, .raster.gleich, .raster:has(> .feld:not(.breit) + .feld:not(.breit)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .feld { padding: 18px 16px; }
  .mitte .feld { padding: 22px 18px; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahlen > div { padding: 14px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .zahlen > div:nth-child(-n+2) { border-top: 0; }
  .zahlen > div:nth-child(even) { border-left: 1px solid var(--line); }
  .zahlen strong { font-size: 22px; }
  .formular .zeile, .formular.zwei { grid-template-columns: minmax(0, 1fr); }
  .daten { grid-template-columns: minmax(0, 1fr); }
  .daten dt { padding-bottom: 0; }
  .daten dd { text-align: left; border-top: 0; padding-top: 2px; padding-left: 0; }
  .daten dd .kopier { justify-content: flex-start; }
  .daten dt:first-of-type + dd { padding-top: 2px; }
  .kopfzeile { align-items: stretch; }
  .kopfzeile > .knopf, .kopfzeile > .knoepfe { width: 100%; }
  .kopfzeile > .knoepfe > * { flex: 1 1 auto; }
  .codes { columns: 1; }
  .monate summary { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .monate summary .n { display: none; }
  .monate details > div { padding-left: 0; }
}

/* Nur für Screenreader sichtbar */
.sprung-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Leerzustand mit nächstem Schritt */
.leer-zustand { display: grid; gap: 6px; justify-items: start; padding: 8px 0 4px; }
.leer-zustand .knopf { margin-top: 8px; }

/* Gefahrenzone: zugeklappt, öffnet bewusst */
details.gefahrzone > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.gefahrzone > summary::-webkit-details-marker { display: none; }
details.gefahrzone > summary > span { display: grid; gap: 2px; }
details.gefahrzone > summary::after { content: ''; width: 7px; height: 7px; border: solid var(--mist); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); flex: none; transition: transform .15s; }
details.gefahrzone[open] > summary::after { transform: rotate(-135deg); }
details.gefahrzone[open] { border-color: rgba(255, 91, 106, .35); }
details.gefahrzone .formular { margin-top: 14px; }
.verbinden .kopier { width: 100%; }
.verbinden .befehl { flex: 1 1 auto; font-size: 14px; padding: 10px 12px; }

/* VPS-Pult */
.messwerte .spur { margin: 6px 0 2px; }
.messwerte strong .st { font-size: inherit; gap: 10px; }
.messwerte strong .st i { width: 9px; height: 9px; }
.abschnitt.hart form { align-items: center; }
.abschnitt.hart .leise { flex: 1 1 220px; }
.fw-schalter { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.fw-schalter > div { display: grid; gap: 4px; flex: 1 1 260px; }
.fw-schalter p { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset legend { color: var(--mist); font-size: var(--fs-klein); font-weight: 500; padding: 0; margin-bottom: 6px; }
.zeitplan-neu { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.feld > .kopfzeile:first-child { align-items: baseline; margin-bottom: var(--s4); }
.feld > .kopfzeile:first-child h2 { margin-bottom: 0; }
.produkte .p-aus { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: 18px 22px; color: var(--mist); }
@media (max-width: 600px) { .produkte .p-aus { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; } }
.produkte a > span:first-child, .produkte .p-aus > span:first-child { display: grid; gap: 2px; min-width: 0; }

/* Bestellablauf (eine Sequenz je Seite, DESIGN.md Sequenz-Marker) */
.ablauf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--mist); }
.ablauf li { display: inline-flex; gap: 8px; align-items: baseline; }
.ablauf b { color: var(--mist); font-weight: 600; }
.ablauf li[aria-current] { color: var(--cloud); }
.ablauf li[aria-current] b { color: var(--akzent); }
.ablauf li + li::before { content: "→"; color: var(--mist); margin-right: 14px; }
.regler-kopf { display: flex; justify-content: space-between; gap: 12px; color: var(--mist); }
.regler .konfig-wert { font-size: 16px; }
.regler small { color: var(--mist); }
.kasse { position: sticky; top: 24px; }
.kasse table td { padding: 8px 12px 8px 0; }
@media (max-width: 860px) { .kasse { position: static; } }

/* Zwei-Faktor einrichten */
.zf-raster { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.schritte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.schritte-liste > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.schritte-liste > li > b { color: var(--akzent); font-weight: 600; }
.schritte-liste > li > div { display: grid; gap: 6px; justify-items: start; }
.schritte-liste small { color: var(--mist); }
.zf-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.zf-form label { flex: 0 1 160px; }
.zf-form input { font-size: 18px; letter-spacing: .08em; }
@media (max-width: 700px) { .zf-raster { grid-template-columns: 1fr; } .qr { width: 180px; height: 180px; } }
/* Leistenhintergrund läuft über die ganze Seitenhöhe, auch wenn die Leiste selbst sticky ist */
@media (min-width: 1000px) { .huelle { background: linear-gradient(to right, var(--midnight) calc(var(--leiste) - 1px), var(--line) calc(var(--leiste) - 1px), var(--line) var(--leiste), transparent var(--leiste)); } }
.tipps { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--mist); font-size: 14px; }
.verlauf .nachricht:last-of-type { margin-bottom: 0; }

/* Gast-Seiten (Login & Co.) */
.gast-rechts { display: flex; gap: 20px; align-items: center; }
body.gast .gast-inhalt { min-height: calc(100vh - 170px); align-content: center; }
.mitte .formular > button { width: 100%; justify-self: stretch; padding: 11px 16px; font-size: 15px; }
.label-zeile { display: flex; justify-content: space-between; gap: 12px; }
.label-zeile a { font-weight: 400; }
.gast-wechsel { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--mist); font-size: 14px; text-align: center; }

/* Forecast-Tabelle: Spaltengruppen Gebucht | Plan | Ergebnis */
table.forecast th.gruppe { text-align: center; color: var(--cloud); font-weight: 600; border-bottom: 1px solid var(--rand); padding-bottom: 6px; }
table.forecast thead tr:first-child th { padding-top: 0; }
table.forecast td:nth-child(4), table.forecast th.gruppe:nth-child(3), table.forecast thead tr:last-child th:nth-child(3) { border-left: 1px solid var(--line); padding-left: 12px; }
table.forecast td:nth-child(6), table.forecast th.gruppe:nth-child(4), table.forecast thead tr:last-child th:nth-child(5) { border-left: 1px solid var(--line); padding-left: 12px; }
table.forecast tfoot td { font-weight: 600; border-top: 1px solid var(--rand); border-bottom: 0; }
table.forecast { min-width: 680px; }
.diagramm { margin-top: 4px; }

/* ---------------------------------------------------------------------------------------------
   Login-Szene: Rack aus Server-Riegeln (Proportionen aus Logo/symbol-coral.svg: Riegel 4,26:1,
   Abstand 0,553 × Höhe, Radius 0,339 × Höhe, LED bei 85,4 %). Ein Loop (Drift), anhaltbar,
   steht bei „Bewegung reduzieren“. Riegel #161D2B auf Ink = 1,2:1 — bewusst Kulisse, kein Inhalt.
   --------------------------------------------------------------------------------------------- */
body.mit-szene { position: relative; overflow-x: hidden; }
body.mit-szene > :not(.szene) { position: relative; z-index: 1; }
.szene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 18%, #000 70%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 18%, #000 70%); }
.szene-rack { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 720px); will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72'%3E%3Cg fill='%23161D2B'%3E%3Crect x='28' y='16' width='40' height='9.4' rx='3.2'/%3E%3Crect x='28' y='30.6' width='40' height='9.4' rx='3.2'/%3E%3Crect x='28' y='45.2' width='40' height='9.4' rx='3.2'/%3E%3C/g%3E%3Cg fill='%23242D40'%3E%3Ccircle cx='62.2' cy='20.7' r='1.5'/%3E%3Ccircle cx='62.2' cy='35.3' r='1.5'/%3E%3Ccircle cx='62.2' cy='49.9' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 72px; animation: rack-drift 90s linear infinite; }
@keyframes rack-drift { to { transform: translateY(-720px); } }
.szene-leds i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffd2cb; opacity: 0;
  animation: led-auf .9s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.6s + var(--i) * .28s); }
@keyframes led-auf { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: .9; } 100% { opacity: .55; transform: scale(1); } }
body.mit-szene .mitte .feld { background: var(--midnight); box-shadow: var(--schatten); }
body.mit-szene .fuss a { color: var(--mist); }
.szene-pause { position: fixed !important; right: 16px; bottom: 16px; z-index: 2; font-size: 12.5px; padding: 6px 10px; color: var(--mist); background: var(--midnight); }
html.szene-steht .szene-rack, html.szene-steht .szene-leds i { animation-play-state: paused; }
/* Szene im hellen Modus: Riegel heller als der Grund, aber genauso leise (Kulisse); LEDs in Coral statt Rosa */
:root[data-theme="light"] .szene-rack { opacity: 1;   /* eigenes Muster statt invert(): invert machte aus #161D2B ein Beige (#E9E2D4, 23.10.2026) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='72'%3E%3Cg fill='%23E6E9EF'%3E%3Crect x='28' y='16' width='40' height='9.4' rx='3.2'/%3E%3Crect x='28' y='30.6' width='40' height='9.4' rx='3.2'/%3E%3Crect x='28' y='45.2' width='40' height='9.4' rx='3.2'/%3E%3C/g%3E%3Cg fill='%23D3D8E0'%3E%3Ccircle cx='62.2' cy='20.7' r='1.5'/%3E%3Ccircle cx='62.2' cy='35.3' r='1.5'/%3E%3Ccircle cx='62.2' cy='49.9' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="light"] body.mit-szene .fuss { background: rgba(244, 245, 248, .92); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="light"] .szene-leds i { background: var(--coral); }
@media (prefers-reduced-motion: reduce) { .szene-rack { animation: none; } .szene-leds i { animation: none; opacity: .55; } .szene-pause { display: none; } }
/* Diagramm auf schmalen Bildschirmen: lesbare Mindestbreite, wischt seitlich im eigenen Rahmen */
.diagramm-rahmen .diagramm { min-width: 640px; }
.kopfzeile > .klein-knoepfe { width: auto !important; }
.kopfzeile > .klein-knoepfe > * { flex: none !important; }

/* Schnellsuche (Strg/⌘ K) */
kbd { font: 500 11.5px/1 Outfit, system-ui, sans-serif; color: var(--mist); border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: var(--r-badge); padding: 3px 5px; white-space: nowrap; }
.suche-knopf { width: 100%; justify-content: space-between; color: var(--mist); background: var(--feld-grund); border-color: var(--line); font-weight: 400; padding: 8px 10px; }
.suche-knopf:hover { color: var(--cloud); border-color: var(--rand); }
dialog.palette { width: min(620px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--rand); border-radius: var(--r-panel); background: var(--midnight); color: var(--cloud); box-shadow: var(--schatten); overflow: hidden; }
dialog.palette[open] { display: flex; flex-direction: column; animation: palette-auf .16s cubic-bezier(.16, 1, .3, 1); }
@keyframes palette-auf { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
dialog.palette::backdrop { background: rgba(5, 8, 14, .6); }
.palette-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.palette-kopf input { border: 0; background: transparent; font-size: 16px; padding: 6px 2px; }
.palette-kopf input:focus, .palette-kopf input:focus-visible { outline: none; box-shadow: none; }
#palette-liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
#palette-liste li[role=option] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-control); cursor: pointer; }
#palette-liste li[role=option] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#palette-liste li[role=option] small { color: var(--mist); }
#palette-liste li[aria-selected=true] { background: var(--slate-raised); box-shadow: inset 2px 0 0 var(--coral); }
.palette-leer { padding: 14px 12px; color: var(--mist); }
.palette-fuss { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mist); }
.palette-fuss kbd { margin-right: 3px; }
@media (max-width: 999px) { .palette-fuss span:last-child { display: none; } }

/* Listenfilter */
.listenfilter { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; }
.listenfilter input { max-width: 340px; }
tr[hidden] { display: none !important; }

input[type=file]::file-selector-button { font: inherit; font-size: 13px; font-weight: 500; color: var(--cloud); background: transparent; border: 1px solid var(--rand); border-radius: var(--r-control); padding: 6px 12px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--coral); }
.csv-knopf { float: right; margin-top: -42px; font-size: 13px; }
@media (max-width: 700px) { .csv-knopf { float: none; margin: -6px 0 10px; padding-left: 0; } }
@media (max-width: 700px) {
  table.dns.stapeln td.wert { display: grid; gap: 2px; }
  table.dns.stapeln td.wert > span:last-child { overflow-wrap: anywhere; }
  table.dns.stapeln td:last-child { justify-content: flex-start; margin-top: 6px; }
  table.dns.stapeln td:last-child .knoepfe { justify-content: flex-start !important; }
}

/* Nachbesserung nach unabhängiger Prüfung */
.pos-kopf { display: block; }
.pos-details { display: grid; gap: 1px; margin-top: 4px; color: var(--mist); font-size: 13px; }
.pdf-link { font-size: 13px; }
@media (max-width: 700px) {
  table.stapeln td:has(> .pdf-link) { justify-content: flex-start; }
  .pdf-link { display: inline-block; padding: 4px 0; }
  .zahlen > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
  .csv-knopf { margin: -8px 0 10px -8px; }
}
@media (min-width: 701px) { .nur-mobil { display: none; } }
button.still.loesch { color: var(--bad); padding: 4px 6px; }
button.still.loesch:hover { border-color: rgba(255, 91, 106, .45); color: var(--bad); }
/* Kasse: Tabelle nicht als Scroll-Block, sonst fluchten die Beträge mobil nicht mit „Heute fällig“ */
@media (max-width: 700px) { .kasse > table { display: table !important; } }
body.mit-szene .fuss { background: var(--fuss-grund); border-radius: var(--r-control); padding: 10px 16px; width: auto; }
/* Ablauf: auf schmalen Bildschirmen untereinander statt umbrechender Pfeilkette */
@media (max-width: 600px) { .ablauf { flex-direction: column; gap: 4px; } .ablauf li + li::before { content: none; } }

/* Schalter Hell/Dunkel (Leiste unten und Gast-Kopf). Ohne JS ein Link mit ?thema=, mit JS ohne Neuladen. */
.thema-knopf { display: inline-flex; align-items: center; gap: 6px; color: var(--mist); font-size: var(--fs-klein); background: none; border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px 9px; cursor: pointer; }
.thema-knopf:hover { color: var(--cloud); border-color: var(--rand); text-decoration: none; }
.thema-knopf svg { width: 14px; height: 14px; flex: none; }

.thema-knopf > span { display: inline-flex; align-items: center; gap: 6px; }
.thema-knopf .t-hell { display: none; }
:root[data-theme="light"] .thema-knopf .t-hell { display: inline-flex; }
:root[data-theme="light"] .thema-knopf .t-dunkel { display: none; }

/* ---------------------------------------------------------------------------------------------
   VPS-Pult (15.10.2026, Aufbau aus dem WHMCS-Pult mrmedia_vps_overview.php übernommen): Kopf mit Riegel-Glyph
   und Zustands-LED, Power-Leiste, Auslastung mit Verlauf (Stunde/Woche), rechts Zugang/Datenblatt/Verwaltung.
   Seltenes (Firewall, Zeitplan, Passwort, Neuinstallation) liegt eine Ebene tiefer (?ansicht=…).
   --------------------------------------------------------------------------------------------- */
.pult-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.pult-id { display: flex; gap: var(--s4); align-items: center; min-width: 0; }
.pult-id h1 { margin: 0; overflow-wrap: anywhere; }
.pult-glyph { position: relative; width: 44px; height: 48px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.pult-glyph span { display: block; height: 9px; border-radius: 3px; background: var(--slate-raised); }
.pult-glyph b { position: absolute; right: 6px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.pult-kopf[data-zustand="online"] .pult-glyph span { background: var(--coral); }
.pult-kopf[data-zustand="online"] .pult-glyph span:nth-child(2) { background: var(--coral-deep); }
.pult-kopf[data-zustand="online"] .pult-glyph b { background: var(--on); box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); animation: pult-puls 2.4s ease-in-out infinite; }
.pult-kopf[data-zustand="gesperrt"] .pult-glyph b { background: var(--warn); }
.pult-kopf[data-zustand="unbekannt"] .pult-glyph b { background: var(--warn); }
@keyframes pult-puls { 50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, .08); } }
.pult-zeile { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; color: var(--mist); font-size: 14px; }
.pult-zeile em { font-style: normal; color: var(--faint); }
.pult-zustand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--cloud); }
.pult-zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.pult-kopf[data-zustand="online"] .pult-zustand { color: var(--on); }
.pult-kopf[data-zustand="online"] .pult-zustand::before { background: var(--on); box-shadow: 0 0 0 3px var(--tint-on); }
.pult-kopf[data-zustand="gesperrt"] .pult-zustand, .pult-kopf[data-zustand="unbekannt"] .pult-zustand { color: var(--warn); }
.pult-kopf[data-zustand="gesperrt"] .pult-zustand::before, .pult-kopf[data-zustand="unbekannt"] .pult-zustand::before { background: var(--warn); }
.pult-steuer { display: flex; gap: var(--s3); align-items: stretch; flex-wrap: wrap; }
.p-leiste { display: grid; grid-template-columns: repeat(4, auto); border: 1px solid var(--rand); border-radius: var(--r-panel); overflow: hidden; background: var(--midnight); margin: 0; }
.p-leiste input[type=hidden] { display: none; }
.p-knopf { display: inline-flex; align-items: center; gap: 8px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--cloud); padding: 10px 16px; font-weight: 500; }
.p-leiste > .p-knopf:nth-of-type(1) { border-left: 0; }
.p-knopf svg { width: 17px; height: 17px; color: var(--mist); flex: none; }
.p-knopf:hover:not(:disabled) { background: var(--tint-coral); border-color: var(--line); }
.p-knopf:hover:not(:disabled) svg { color: var(--akzent); }
.p-knopf[value="start"]:hover:not(:disabled) svg { color: var(--on); }
.p-knopf.hart svg { color: var(--bad-text); }
.p-knopf.hart:hover:not(:disabled) { background: var(--tint-bad); }
.p-knopf:disabled { color: var(--faint); background: var(--zeile-hover); cursor: default; opacity: 1; }
.p-knopf:disabled svg { color: var(--faint); }
.p-konsole { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-panel); padding: 10px 18px; }

.pult-mkopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: calc(var(--s3) * -1); }
.pult-mkopf h2 { margin: 0; }
.pult-mrechts { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pult-export { display: inline-flex; gap: 6px; }
.pult-export [hidden] { display: none; }  /* button {display:inline-flex} schlägt sonst das hidden-Attribut */
.pult-export .knopf-leise { padding: 4px 10px; font-size: var(--fs-klein); }
.zeitraum.klein a { padding: 4px 10px; font-size: var(--fs-klein); }
.pult-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pult-karte { background: var(--midnight); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 20px 16px; display: grid; gap: 6px; min-width: 0; }
.pk-kopf { display: flex; justify-content: space-between; gap: var(--s3); }
.pk-spitze { color: var(--faint); font-size: var(--fs-label); }
.pk-wert { margin: 0; font-size: var(--fs-daten); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.pk-wert span { font-size: 13px; color: var(--mist); margin-left: 5px; letter-spacing: 0; }
.pk-kurve { width: 100%; height: 54px; display: block; margin: 4px 0 2px; }
.pk-kurve .pk-linie { fill: none; stroke: var(--coral); stroke-width: 1.6; }
.pk-kurve .pk-flaeche { fill: var(--tint-coral); }
.pk-kurve.blau .pk-linie { stroke: var(--daten2); }
.pk-kurve.blau .pk-flaeche { fill: rgba(78, 123, 232, .10); }
.pk-leer { margin: 4px 0 2px; height: 54px; display: grid; place-items: center; color: var(--faint); font-size: var(--fs-klein); border: 1px dashed var(--line); border-radius: var(--r-control); }
.pult-karte small { color: var(--mist); }
.pult-karte { position: relative; }
.pk-kurve[data-t0] { cursor: crosshair; touch-action: pan-y; }
.pk-auswahl { position: absolute; background: var(--tint-coral); border-left: 1px solid var(--coral); border-right: 1px solid var(--coral); pointer-events: none; }
.pk-auswahl.laedt { opacity: .6; }
.pk-marke { position: absolute; pointer-events: none; }
.pk-strich { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rand-stark); }
.pk-punkt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--midnight); }
.pult-karte[data-k=net] .pk-punkt { background: var(--daten2); }
.pk-schild { position: absolute; bottom: calc(100% + 6px); transform: translateX(8px); white-space: nowrap; display: grid; gap: 1px; padding: 5px 9px; border-radius: var(--r-control);
  background: var(--slate-raised); border: 1px solid var(--rand); box-shadow: var(--schatten); font-size: 12.5px; line-height: 1.3; }
.pk-schild.links { transform: translateX(calc(-100% - 8px)); }
.pk-schild b { font-weight: 600; color: var(--cloud); }
.pk-schild small { color: var(--mist); font-size: 11.5px; }
.pult-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: calc(var(--s3) * -1); font-size: var(--fs-klein); color: var(--mist); }
.pult-wahl label { display: inline-flex; align-items: center; gap: 6px; }
.pult-wahl input { width: auto; padding: 5px 8px; font-size: var(--fs-klein); }
.pult-wahl button { padding: 5px 12px; font-size: var(--fs-klein); }
.pult-wahl.an button { background: var(--coral); border-color: var(--coral); color: var(--auf-coral); font-weight: 600; }
.pult-wahl-tipp { font-size: 12.5px; }
@media (hover: none) { .pult-wahl-tipp { display: none; } }
.pk-achse { display: flex; justify-content: space-between; color: var(--faint); font-size: 11.5px; margin-top: -2px; }
.pult-ab { margin: calc(var(--s3) * -1) 0 0; font-size: var(--fs-klein); }
@media (max-width: 600px) { .pult-mkopf { flex-wrap: wrap; } .zeitraum.klein a { padding: 4px 8px; } }

.pult-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.pult-spalte { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.pult-balken + .pult-balken { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.pult-balken .spur { margin: 8px 0 0; }
.pult-balken p { margin: 8px 0 0; font-size: var(--fs-klein); }
.pb-kopf { display: flex; justify-content: space-between; gap: var(--s3); color: var(--mist); }
.pb-kopf b { color: var(--cloud); font-weight: 500; }
.fuell.blau { background: var(--daten2); }
.pult-ereignisse { list-style: none; margin: 0; padding: 0; display: grid; }
.pult-ereignisse li { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pult-ereignisse li:first-child { border-top: 0; padding-top: 0; }
.pult-ereignisse .st { font-weight: 500; color: var(--cloud); }
.pult-verwaltung ul { list-style: none; margin: calc(var(--s2) * -1) 0 0; padding: 0; display: grid; }
.pult-verwaltung a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 11px 0; border-top: 1px solid var(--line); color: var(--cloud); }
.pult-verwaltung li:first-child a { border-top: 0; }
.pult-verwaltung a b { font-weight: 500; }
.pult-verwaltung a span { color: var(--mist); font-size: var(--fs-klein); }
.pult-verwaltung a span::after { content: " →"; color: var(--faint); }
.pult-verwaltung a:hover { text-decoration: none; }
.pult-verwaltung a:hover b { color: var(--akzent); }
.gefahr-feld { border-color: rgba(255, 91, 106, .35); }
.pult-hilfe { margin: 0; font-size: var(--fs-klein); max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .pult-kopf[data-zustand="online"] .pult-glyph b { animation: none; } }
@media (max-width: 1000px) { .pult-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .pult-karten { grid-template-columns: minmax(0, 1fr); } .pult-steuer { width: 100%; } .p-leiste { flex: 1; } }
@media (max-width: 600px) {
  .p-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .p-leiste > .p-knopf:nth-of-type(3) { border-left: 0; }
  .p-leiste > .p-knopf:nth-of-type(n+3) { border-top: 1px solid var(--line); }
  .p-knopf { justify-content: center; }
  .p-konsole { width: 100%; justify-content: center; }
}
/* Gast-Kopf auf dem Handy: Schalter nur als Symbol (aria-label trägt den Namen), sonst schiebt er „Zur Website“ ins Logo */
@media (max-width: 600px) {
  .gast-kopf { padding: 16px; gap: 12px; }
  .gast-rechts { gap: 12px; }
  .gast-kopf .thema-knopf > span { font-size: 0; gap: 0; }
  .gast-kopf .thema-knopf { padding: 6px 8px; }
}
/* Sicherungen (Pult-Unteransicht) */
.bk-kopf { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.bk-kopf p { margin: 0; flex: 1 1 280px; font-size: var(--fs-klein); }
.bk-liste td.r { display: flex; gap: var(--s2); justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; }
.bk-aktion { text-align: right; }
.bk-aktion summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; color: var(--cloud); border: 1px solid var(--rand); border-radius: var(--r-control); padding: 6px 12px; font-size: 14px; font-weight: 500; }
.bk-aktion summary::-webkit-details-marker { display: none; }
.bk-aktion[open] summary { border-color: rgba(255, 91, 106, .45); color: var(--bad-text); }
.bk-aktion .formular { margin-top: var(--s3); width: min(420px, 80vw); text-align: left; }

/* ---- Sicherungen: Dateibrowser (15.10.2026, vps-pult.ts ansicht=dateien) ---- */
.bk-dateien { padding: 6px 12px; }
.mitte-schmal { max-width: 560px; }
.dt-pfad { margin: 0 0 var(--s4); }
.dt-pfad ol { flex-wrap: wrap; }
.dt-name { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.dt-name::before { content: ""; flex: none; width: 14px; height: 11px; border-radius: 2px; border: 1.5px solid var(--faint); }
.dt-name.ordner::before { border-color: var(--akzent); background: var(--tint-coral); border-top-left-radius: 0; }
.dt-name.datei::before { width: 10px; height: 13px; }
.dt-liste tr.leise .dt-name a { color: var(--mist); }
.dt-liste td.r .knopf-leise { padding: 5px 10px; font-size: var(--fs-klein); }

/* ---------------------------------------------------------------------------------------------
   Guthaben aufladen (/konto/zahlung#aufladen, 15.10.2026) — Betragswahl als Haken-Chips wie die Tage im Zeitplan
   --------------------------------------------------------------------------------------------- */
.aufladen fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s3); min-width: 0; }
.aufladen legend { padding: 0; margin-bottom: var(--s2); font-weight: 600; }
.aufladen-wahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.aufladen-wahl .haken { border: 1px solid var(--rand); border-radius: var(--r-control); padding: 7px 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.aufladen-wahl .haken:has(input:checked) { border-color: rgba(255, 107, 91, .5); background: var(--tint-coral); }
.aufladen p { margin: 0; font-size: var(--fs-klein); }
#aufladen .aufgaben { margin: var(--s3) 0; }
@media (max-width: 600px) { .aufladen-wahl .haken { flex: 1 1 40%; justify-content: center; } }

/* ---------------------------------------------------------------------------------------------
   Konto (15.10.2026, „so wenig scrollen wie möglich“): Profil = Kundendaten dicht + Login, je eine Bildschirmhöhe.
   Sicherheit = 2FA links, Passwort/Login-Mail zugeklappt + Geräte kurz rechts. Aktivität eigener Reiter mit Seiten.
   --------------------------------------------------------------------------------------------- */
.konto-profil, .konto-sicherheit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.konto-profil > .stapel, .konto-sicherheit > .stapel { display: grid; gap: var(--s4); align-content: start; }
.konto-sicherheit > .feld, .konto-sicherheit > .stapel:first-child { min-width: 0; }
/* Kundendaten als 4-Spalten-Raster: Mail|Firma · Vorname Nachname|Straße · PLZ Ort Land Bundesland · Telefon USt|Speichern */
.profil-form { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.profil-form > label { grid-column: span 2; }
.profil-form > .zeile { display: contents; }
.profil-form > .zeile > label { grid-column: span 1; }
.profil-form > .profil-knopf { grid-column: span 2; align-self: end; justify-self: end; }
.konto-kurz { display: grid; gap: 8px; color: var(--cloud); padding: 18px 22px; }
.konto-kurz:hover { text-decoration: none; border-color: var(--rand); }
.konto-kurz > span:first-child { display: grid; gap: 4px; }
.konto-kurz small { color: var(--mist); font-size: var(--fs-klein); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.konto-kurz .st { font-size: var(--fs-klein); }
.konto-kurz-ziel { color: var(--akzent); font-size: var(--fs-klein); font-weight: 500; }
/* zugeklappte Formulare: Kopf wie die Gefahrzone, aber neutral */
details.klapp { padding: 0; }
details.klapp > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 16px 22px; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary > span { display: grid; gap: 2px; }
details.klapp > summary > span .leise { font-size: var(--fs-klein); font-weight: 400; }
details.klapp > summary::after { content: ''; flex: none; width: 7px; height: 7px; border: solid var(--mist); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
details.klapp[open] > summary::after { transform: rotate(-135deg); }
details.klapp > summary:hover b { color: var(--akzent); }
details.klapp > form { padding: 0 22px 20px; }
.geraete { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; }
.geraete li { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.geraete li:first-child { border-top: 0; padding-top: 0; }
.geraete li > span:last-child { white-space: nowrap; font-size: var(--fs-klein); }
.geraete .on { font-size: var(--fs-klein); }
details.mehr > summary { margin-top: 8px; color: var(--akzent); font-size: var(--fs-klein); font-weight: 500; }
details.mehr > .geraete { margin-top: 4px; }
.geraete-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.geraete-kopf h2 { margin: 0; }
.geraete-kopf button.still { padding: 0; border: 0; font-size: var(--fs-klein); color: var(--akzent); }
.geraete li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
table.aktivitaet .anzahl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-badge); background: var(--slate-raised); color: var(--mist); font-size: 12px; font-weight: 600; }
table.aktivitaet td { padding-top: 9px; padding-bottom: 9px; }
table.aktivitaet td.wer { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blaettern { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s4); font-size: var(--fs-klein); }
@media (max-width: 1100px) { .profil-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profil-form > label, .profil-form > .profil-knopf { grid-column: span 2; } .profil-form > .profil-knopf { justify-self: start; } }
@media (max-width: 900px) { .konto-profil, .konto-sicherheit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .profil-form > .zeile > label { grid-column: span 2; } }
/* Aktivität auf dem Handy: Was in voller Breite, darunter „wer · Zeit“ in einer Zeile, IP weg (steht am Desktop) */
@media (max-width: 700px) {
  table.aktivitaet td.ip { display: none !important; }
  table.aktivitaet tr { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 10px 0; }
  table.aktivitaet td { padding: 0 !important; border: 0 !important; }
  table.aktivitaet td:first-child { grid-column: 1 / -1; }
  table.aktivitaet td .lab { display: none !important; }
  table.aktivitaet td.wer { max-width: 160px; }
  table.aktivitaet td.r { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------
   Gameserver-Pult (game-pult.ts, 15.10.2026): nutzt die VPS-Pult-Bausteine (.pult-*, .p-leiste, .pk-*);
   hier nur Konsole, Einstellungs-Raster und server.properties.
   --------------------------------------------------------------------------------------------- */
.pk-wert .pk-zahl { font: inherit; color: inherit; margin: 0; }   /* große Zahl im Gameserver-Pult (die Einheit danach bleibt klein) */
.spiel-konsole .konsole-log { margin: var(--s3) 0 0; height: min(calc(100vh - 470px), 520px); min-height: 260px; overflow: auto; padding: 14px 16px; border-radius: var(--r-control);
  background: #070A12; color: #D7DCE6; border: 1px solid var(--line); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.spiel-konsole .konsole-log:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
:root[data-theme="light"] .spiel-konsole .konsole-log { background: #0F1420; color: #E6E9EF; }   /* Konsole bleibt dunkel: Log-Farben der Spiele sind dafür gemacht */
.konsole-befehl { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.konsole-befehl > span { color: var(--akzent); font-weight: 600; }
.konsole-befehl input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.spiel-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.spiel-var { max-width: none; gap: 6px; align-content: start; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.spiel-var small { font-size: var(--fs-klein); }
.spiel-var > button { justify-self: start; }
.spiel-props { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.spiel-props .breit, .spiel-props > .knoepfe { grid-column: 1 / -1; }
.spiel-props label small { display: block; font-weight: 400; margin-top: 2px; }
.spiel-props label.haken { align-self: end; }
/* Übersicht (Layout-Entscheid 15.10.2026): vier Karten, darunter zwei gleich hohe Spalten — Desktop ohne Scrollen */
.spiel-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spiel-disk { height: 54px; display: flex; align-items: center; margin: 4px 0 2px; }
.spiel-disk .spur { width: 100%; }
.spiel-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.spiel-zwei > .feld { margin: 0; }
.spiel-zwei > details.gefahrzone { align-self: start; }   /* zugeklappt nicht auf Spaltenhöhe strecken */
@media (max-width: 1100px) { .spiel-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .spiel-vars, .spiel-props, .spiel-zwei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .spiel-karten { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------------------------
   Pult-Reiter (src/views/pult.ts, 15.10.2026): Verwaltung als Leiste unter dem Kopf statt Karte unten rechts.
   Gilt für VPS- und Gameserver-Pult. Auf dem Handy seitlich wischbar, aktiver Reiter mit Coral-Unterstrich.
   --------------------------------------------------------------------------------------------- */
.pult-reiter { position: relative; min-width: 0; margin-top: calc(var(--s2) * -1); } /* min-width: als Grid-Kind von main sonst so breit wie alle Reiter (390 px: 748 px Überstand) */
.pr-scroll { position: relative; overflow-x: auto; scrollbar-width: none; }
.pr-scroll::-webkit-scrollbar { display: none; }
.pult-reiter ul { list-style: none; margin: 0; padding: 0; }
/* Gruppen (16.10.2026): Titelzeile klein darüber, eigene Grundlinie je Gruppe — die Lücke zwischen den Linien trennt die
   Gruppen, ohne Kästen oder Trennstriche. Desktop bricht nur zwischen Gruppen um. */
.pr-gruppen { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: flex-end; }
.pr-gruppe { display: grid; gap: 2px; min-width: 0; }
.pr-gruppe > ul { display: flex; border-bottom: 1px solid var(--line); }
.pr-titel { font-size: 11.5px; line-height: 1.4; color: var(--faint); padding: 0 10px; white-space: nowrap; }
.pr-gruppe.raus { margin-left: auto; }
.pr-gruppe.raus > ul { border-bottom-color: transparent; }
.pult-reiter a { display: block; padding: 8px 10px 9px; color: var(--mist); font-weight: 500; font-size: 14.5px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pult-reiter a:hover { color: var(--cloud); text-decoration: none; }
.pult-reiter a.aktiv { color: var(--cloud); border-bottom-color: var(--coral); }
.pult-reiter a.gefahr:hover { color: var(--bad-text); }
.pult-reiter a.raus::after { content: " ↗"; color: var(--faint); }
.pult-reiter a:focus-visible { outline-offset: -2px; }
.pr-wisch { display: none; }
@media (max-width: 700px) {
  /* Handy: eine Zeile zum Wischen. Rechts blendet die Leiste aus und „wischen →“ steht in der Titelzeile; das
     Polster am Ende sorgt dafür, dass der letzte Reiter ganz aus der Ausblendung herausgewischt werden kann. */
  .pr-gruppen { flex-wrap: nowrap; gap: 0 var(--s4); padding-right: 44px; width: max-content; }
  .pr-gruppe.raus { margin-left: 0; }
  .pr-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .pr-wisch { display: block; position: absolute; right: 0; top: 0; font-size: 11.5px; line-height: 1.4; color: var(--mist); background: var(--ink); padding-left: 8px; pointer-events: none; }
  .pult-reiter.am-ende .pr-scroll { -webkit-mask-image: none; mask-image: none; }
  .pult-reiter.am-ende .pr-wisch { display: none; }
}
.pult-raster.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pult-raster.gleich { grid-template-columns: minmax(0, 1fr); } }
/* Eigener Zeitraum als Aufklapp-Feld neben Stunde/Tag/… — keine eigene Zeile mehr; offen schwebt das Formular darüber */
.pult-wahl-klapp { position: relative; }
.pult-wahl-klapp > summary { list-style: none; border: 1px solid var(--rand); border-radius: var(--r-control); padding: 4px 10px; font-size: var(--fs-klein); font-weight: 500; color: var(--mist); white-space: nowrap; }
.pult-wahl-klapp > summary::-webkit-details-marker { display: none; }
.pult-wahl-klapp > summary:hover, .pult-wahl-klapp[open] > summary { color: var(--cloud); }
.pult-wahl-klapp.an > summary { background: var(--coral); border-color: var(--coral); color: var(--auf-coral); }
.pult-wahl-klapp > .pult-wahl { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; margin: 0; width: max-content; max-width: min(560px, 92vw);
  background: var(--midnight); border: 1px solid var(--rand); border-radius: var(--r-panel); box-shadow: var(--schatten); padding: 14px 16px; }
/* Datenblatt in zwei Spalten (Schlüssel Wert | Schlüssel Wert) — halbe Höhe */
.daten.blatt-zwei { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 0; }
.daten.blatt-zwei dt:nth-of-type(odd) { padding-right: 0; }
.daten.blatt-zwei dt:nth-of-type(even) { padding-left: var(--s5); }
.daten.blatt-zwei dt:nth-of-type(2), .daten.blatt-zwei dt:nth-of-type(2) + dd { border-top: 0; padding-top: 0; }
@media (max-width: 600px) { .daten.blatt-zwei { grid-template-columns: max-content minmax(0, 1fr); } .daten.blatt-zwei dt:nth-of-type(even) { padding-left: 0; } .daten.blatt-zwei dt:nth-of-type(2), .daten.blatt-zwei dt:nth-of-type(2) + dd { border-top: 1px solid var(--line); padding-top: 9px; } }

/* ---- Spiel-Editoren (PRD-58, src/module/game-editor.ts) ---- */
.editor-teile { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.editor-teile a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--mist); font-size: 14px; }
.editor-teile a:hover { color: var(--cloud); text-decoration: none; }
.editor-teile a.aktiv { color: var(--cloud); border-color: var(--mist); }
.spiel-props .editor-gruppe { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--mist); margin: 8px 0 -4px; padding-top: 10px; border-top: 1px solid var(--line); }
.spiel-props .editor-gruppe:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.spiel-props textarea { width: 100%; font: inherit; }

/* ---- Netzwerk & Zugang (PRD-58) ---- */
pre.netz-start { margin: 6px 0 0; white-space: pre-wrap; }
pre.netz-start code { display: block; padding: 10px 12px; }
form.netz-notiz { display: flex; gap: 8px; align-items: center; }
form.netz-notiz input { flex: 1 1 auto; min-width: 0; max-width: 260px; }

/* ---- Dateien, Sicherungen, Zeitpläne (PRD-58, src/module/game-dateien.ts · game-sicherungen.ts · game-zeitplaene.ts) ---- */
.dt-werkzeug { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; justify-content: space-between; margin-bottom: var(--s4); }
.dt-hoch { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; min-width: 0; }
.dt-wahl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.dt-wahl > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dt-wahl input[type=file] { font-size: var(--fs-klein); color: var(--mist); max-width: min(320px, 100%); }
.dt-hoch.ueber { outline: 2px dashed var(--coral); outline-offset: 6px; border-radius: var(--r-control); }
.dt-fortschritt { font-variant-numeric: tabular-nums; }
.dt-neu .formular { width: min(360px, 84vw); }
.dt-liste .dt-haken { width: 28px; }
.dt-liste .dt-haken input { width: 16px; height: 16px; }
.dt-liste td.r { display: flex; gap: var(--s2); justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; }
.dt-liste td.r .bk-aktion summary { padding: 5px 10px; font-size: var(--fs-klein); }
.dt-liste td.r .bk-aktion .formular + .formular { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.dt-sammel { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.dt-editor textarea { width: 100%; min-height: 50vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; tab-size: 4; white-space: pre; overflow: auto; }
.bad-text { color: var(--bad-text); }
.zp-oben { margin-bottom: var(--s4); }
/* Eigener Zeitplan (Befund Mauri 17.10.): zugeklappt nur so hoch wie die Kopfzeile statt leerer Kasten auf Spaltenhöhe,
   Pfeil rechts wie details.klapp, Fokusrahmen nur bei Tastatur und mit dem Radius der Karte statt eckig um die Zeile. */
.spiel-zwei > details.zp-neu:not([open]) { align-self: start; }
.zp-neu > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; position: relative; padding-right: 24px; border-radius: var(--r-control); }
.zp-neu > summary::-webkit-details-marker { display: none; }
.zp-neu > summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--mist); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.zp-neu[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.zp-neu > summary:hover b { color: var(--akzent); }
.zp-neu > summary:focus:not(:focus-visible) { outline: none; }
.zp-neu > summary:focus-visible { outline-offset: 6px; }
.zp-neu .formular { margin-top: var(--s3); }
.zp-cron { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.zp-cron input { font-variant-numeric: tabular-nums; }
.zp-cron small { display: block; margin-top: 2px; }
@media (max-width: 600px) { .zp-cron { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zp-plan { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.zp-plan:first-of-type { border-top: 0; padding-top: 0; }
.zp-plan.aus h3 { color: var(--mist); }
.zp-kopf { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: flex-start; }
.zp-kopf h3 { margin: 0 0 2px; font-size: 16px; }
.zp-kopf p { margin: 0; overflow-wrap: anywhere; }
.zp-kopf .knoepfe { gap: var(--s2); }
.zp-kopf .knopf-leise { padding: 5px 10px; font-size: var(--fs-klein); }
.zp-aufgaben { margin: var(--s3) 0 0; padding-left: 22px; display: grid; gap: 4px; }
.zp-aufgaben li { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; overflow-wrap: anywhere; }
.zp-knoepfe { display: inline-flex; gap: 2px; flex: none; }
.zp-fuss { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.zp-fuss .bk-aktion { text-align: left; }
.zp-fuss .bk-aktion summary { padding: 5px 10px; font-size: var(--fs-klein); }
.zp-fuss .bk-aktion .formular { width: min(520px, 84vw); }

/* ---- Pult-Gestaltung (PRD-58, 16.10.2026): Formular-Raster, lange Editoren, Handy-Karten — für VPS- und Gameserver-Pult ---- */
/* Raster: jede Zelle beginnt oben (keine gestreckten Eingabefelder), Hinweise stehen unter dem Feld, nie darin (FALLEN P78).
   Schalter stehen als Kasten in Höhe eines Eingabefelds auf der Feldzeile — 25 px = Beschriftungszeile + Abstand. */
.spiel-props > label { align-self: start; align-content: start; }
.spiel-props > label.haken { align-self: start; margin-top: 25px; min-height: 42px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-control); }
.spiel-props > label.haken:has(small) { align-items: flex-start; }
.spiel-props > label.haken:has(input:checked) { border-color: var(--rand); }
.spiel-props > label.haken input { margin-top: 0; }
.spiel-props > label.haken:has(small) input { margin-top: 3px; }
.spiel-props > .knoepfe label.haken { margin-top: 0; min-height: 0; padding: 0; border: 0; }
.spiel-props label small { color: var(--mist); line-height: 1.4; }
/* Lange Editoren: Gruppen als Sprungleiste über dem Formular, Speichern bleibt unten am Bildschirm stehen */
.editor-sprung { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 var(--s4); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); font-size: var(--fs-klein); }
.editor-sprung span { color: var(--faint); }
.editor-sprung a { color: var(--mist); }
.editor-sprung a:hover { color: var(--cloud); }
.spiel-props .editor-gruppe { scroll-margin-top: 16px; display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.spiel-props .editor-gruppe small { font-weight: 400; color: var(--faint); letter-spacing: 0; }
.spiel-props.lang > .knoepfe { position: sticky; bottom: 0; z-index: 2; justify-self: stretch; margin: 4px -24px 0; padding: 12px 24px; background: var(--fuss-grund); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 700px) { .spiel-props.lang > .knoepfe { margin: 4px -16px 0; padding: 12px 16px; } }
/* Handy: Messkarten zu zweit statt untereinander (vorher 4 × 175 px Höhe für vier Zahlen) */
@media (max-width: 600px) {
  .pult-karten, .spiel-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .pult-karten > .pult-karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pult-karte { padding: 14px 14px 12px; }
  .pk-kurve, .spiel-disk { height: 40px; }
  .pult-karte small { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------------------------------
   Gestaltungslauf 16.10.2026 (Impeccable + UI/UX Pro Max, Bericht data/gestaltung-2026-10-16/BERICHT.md).
   Nur Darstellung — keine Logik, keine Texte.
   --------------------------------------------------------------------------------------------- */
/* Aktivität: lange Fehlermeldungen ohne Leerzeichen (URLs, JSON) schoben die Seite auf 390 px um 131 px nach rechts */
table.aktivitaet td:first-child { overflow-wrap: anywhere; min-width: 0; }
/* Uhrzeitfeld: der Fokus sitzt in den Segmenten, :focus-visible greift dort nicht — Rahmen trotzdem zeigen */
input[type=time]:focus-within, input[type=date]:focus-within, input[type=datetime-local]:focus-within { outline: 2px solid var(--coral); outline-offset: 1px; }

/* Datenblatt in zwei Spalten auf dem Handy: Schlüssel und Wert stießen ohne Abstand aneinander („Bezahlt bis14.11.2026“) */
@media (max-width: 600px) {
  .daten.blatt-zwei dt, .daten.blatt-zwei dd { padding: 9px 0; border-top: 1px solid var(--line); }
  .daten.blatt-zwei dd { text-align: right; padding-left: var(--s4); }
  .daten.blatt-zwei dd .kopier { justify-content: flex-end; }
  .daten.blatt-zwei dt:first-of-type, .daten.blatt-zwei dt:first-of-type + dd { border-top: 0; padding-top: 0; }
}

/* Dateiliste auf dem Handy: eine Datei = zwei Zeilen statt fünf (vorher 4,9 Bildschirme für 24 Einträge).
   Zeile 1: Haken · Name · Aktionen, Zeile 2: Größe · Geändert. Offenes „Mehr“ bekommt die volle Breite. */
@media (max-width: 700px) {
  table.dt-liste tr { display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0; align-items: center; padding: 8px 0; }
  table.dt-liste td { padding: 0; min-width: 0; }
  table.dt-liste td.dt-haken { grid-column: 1; grid-row: 1 / span 2; width: auto; justify-content: center; }
  table.dt-liste td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  table.dt-liste td:nth-child(3) { grid-column: 2; grid-row: 2; }
  table.dt-liste td:nth-child(4) { grid-column: 3; grid-row: 2; }
  table.dt-liste td:nth-child(3), table.dt-liste td:nth-child(4) { justify-content: flex-start; font-size: var(--fs-klein); color: var(--mist); }
  table.dt-liste td:nth-child(3) > .lab, table.dt-liste td:nth-child(4) > .lab { display: none; }
  table.dt-liste td.r { grid-column: 4; grid-row: 1 / span 2; align-items: center; }
  table.dt-liste td.r:has(details[open]) { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }
}

/* Touch-Ziele ≥ 44 px auf dem Handy und überall mit grober Zeigersteuerung (WCAG 2.5.5, UI/UX Pro Max „touch-target“).
   Gemessen vorher auf 390 px: 1959 Bedienelemente unter 44 px, davon 628 unter 24 px (Fußzeile, Pfad, Sprache, Haken).
   Knöpfe und Felder werden höher; reine Textlinks behalten ihr Bild und bekommen die Fläche über Polster + Gegenrand. */
@media (max-width: 700px), (pointer: coarse) {
  button, .knopf, .knopf-leise, .p-knopf, .p-konsole, .thema-knopf, .suche-knopf, .sprung,
  .bk-aktion summary, .zp-neu > summary, details.mehr > summary, .pult-wahl-klapp > summary, .menue > summary,
  details.klapp > summary, details.gefahrzone > summary { min-height: 44px; }
  /* höhere Knöpfe: Text mittig statt oben („Mehr“, „Neu …“, 390 px) */
  .pult-wahl-klapp > summary, .menue > summary { display: flex; align-items: center; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select { min-height: 44px; }
  .pult-reiter a, .reiter a, .editor-teile a, .zeitraum a { min-height: 44px; display: inline-flex; align-items: center; }
  .pult-reiter a { display: flex; }
  .haken { min-height: 44px; }
  .wahl .haken, .aufladen-wahl .haken, .dt-sammel .haken { align-items: center; }
  input[type=checkbox], input[type=radio], .haken input, .dt-liste .dt-haken input { width: 22px; height: 22px; }
  .kopier-knopf, .logo, .spiel-props > .knoepfe label.haken { min-height: 44px; }
  .gast-kopf .thema-knopf { min-width: 44px; justify-content: center; }
  /* Textlinks: Fläche über Polster, Gegenrand hält das Bild ruhig (Nachbarn sind kein Bedienelement) */
  .sprache, .pfad a, .pdf-link, .name-zeile a, .dt-name a, .blaettern a, .label-zeile a, .editor-sprung a, .zeitraum a,
  .geraete-kopf button.still, .zahlen small a, .aufgaben a:not(.knopf):not(.knopf-leise), .kopfzeile a.leise,
  td > a:only-child { display: inline-block; min-height: 44px; min-width: 44px; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  .pdf-link { text-align: center; }
  .zeitraum a { display: inline-flex; justify-content: center; margin: 0; }
  /* Fußzeile: Links liegen in Reihen untereinander — dort echte Höhe statt Gegenrand, sonst überdecken sich die Flächen */
  .fuss { row-gap: 0; padding-top: 0; }
  .fuss a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* einzelne Wege-Links unter Formularen („← Login“): echte Höhe, sonst ragt die Fläche in den Knopf darüber */
  /* nur nackte <p> („← Bestellen“): :only-child zählt keine Textknoten — ein Link mitten im Satz (p.leise, p.unter) bekam
     sonst 44 px Zeilenhöhe und riss den Absatz auf („Server-Pult“, 390 px, Impeccable 4.7.0) */
  p:not([class]) > a:only-child { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  /* Haken in der Dateiliste: die Beschriftung um den Haken ist die Fläche (game-dateien.ts .dt-hakenfeld) */
  .dt-hakenfeld { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -11px; cursor: pointer; }
  .dt-liste .dt-haken input { margin: 0; }
}
/* Produktzeilen: lange Beschreibungen ohne Leerzeichen liefen unter den Preis (Testshop, 390 px) */
.produkte .p-text { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------------------------
   Admin-Lauf 17.10.2026 (PRD-59, Bericht data/prd59-2026-10-17/admin/BERICHT.md). Nur Darstellung.
   --------------------------------------------------------------------------------------------- */
/* Wissen: Dateipfade ohne Leerzeichen schoben die Seite auf 390 px um 64 px nach rechts */
.w-liste, .w-treffer { overflow-wrap: anywhere; }
@media (max-width: 700px), (pointer: coarse) {
  /* Nebenlinks in Kopfzeilen („Protokoll“, „Domain-Endungen“), Titel-Links („Kundenansicht“), Inhaltsverzeichnis der Doku */
  .kopfzeile .knoepfe > a:not(.knopf) { display: inline-flex; align-items: center; min-height: 44px; }
  h2 > a.leise { display: inline-block; min-height: 44px; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  .w-toc a { display: flex; align-items: center; min-height: 44px; }
  .w-bereich > summary, .w-suche > a { display: flex; align-items: center; min-height: 44px; }
  .w-suche > a { display: inline-flex; }
  .daten dd > a:only-child { display: inline-block; min-height: 44px; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
}


/* Webspace-Pult: Cronjobs und Zugang (17.10.2026) */
.umbruch { overflow-wrap: anywhere; word-break: break-all; }
.cron-zeit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.cron-zeit label { min-width: 0; }
.cron-aendern { margin-top: var(--s2); text-align: left; }
.cron-aendern > summary { cursor: pointer; color: var(--mist); font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }
.cron-aendern[open] > summary { color: var(--cloud); }
@media (max-width: 700px) { .cron-zeit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Weitere Anmeldewege (Passkey, Discord/Google/GitHub) unter dem Login und über der Registrierung */
.trenner { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--faint); font-size: var(--fs-klein); }
.trenner::before, .trenner::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.andere-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.andere-wege > * { flex: 1 1 120px; }
.andere-wege [data-passkey-login] { flex-basis: 100%; }
.andere-wege .knopf-leise, .andere-wege button { min-height: 42px; }
.andere-wege svg, .anbieter-zeile svg { width: 18px; height: 18px; flex: none; }
.anbieter-zeile { display: inline-flex; align-items: center; gap: 8px; }
.formular .andere-wege + .trenner { margin-top: 4px; }
.konto-wege { display: grid; gap: var(--s4); max-width: 760px; }
.wege-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--s4); }
.wege-liste li > span:nth-child(2) { white-space: nowrap; font-size: var(--fs-klein); }
@media (max-width: 600px) { .wege-liste li { grid-template-columns: minmax(0, 1fr) auto; } .wege-liste li > span:nth-child(2) { grid-row: 2; grid-column: 1; white-space: normal; } .wege-liste li > form { grid-row: 1 / 3; grid-column: 2; } }
/* Audit 23.10.2026: Reiterleiste wischt mobil seitlich — weicher Rand rechts zeigt, dass es weitergeht; der aktive Reiter
   rollt per app.js in Sicht. Status in den Kennzahlen (z. B. „Automatisch zahlen: aus“): LED mittig zur großen Ziffernhöhe. */
@media (max-width: 760px) {
  .reiter { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); padding-right: 24px; }
}
.zahlen strong > .st { gap: 10px; vertical-align: middle; }
.zahlen strong > .st i { width: 9px; height: 9px; transform: translateY(2px); }

/* ---------------------------------------------------------------------------------------------
   Impeccable 4.7.0, 23.10.2026 (zweiter Lauf nach 4.3.1). Nur Darstellung.
   --------------------------------------------------------------------------------------------- */
/* Browser-Flächen aus der Palette: Schreibmarke und Rollbalken (Leiste, Palette, Konsole, Tabellen) statt Systemgrau */
:root { scrollbar-color: var(--rand-stark) transparent; }
input, textarea { caret-color: var(--akzent); }
/* Umbruch: Überschriften ausgewogen, Fließtext ohne Einzelwort in der letzten Zeile (Detector „straggler“, 12 Stellen) */
h1, h3, .mitte h1 { text-wrap: balance; }
p, li, dd, small, .leise, .meldung { text-wrap: pretty; }
/* Zeilenlänge: Erklärsätze in breiten Feldern liefen auf 109–140 Zeichen (Anmeldewege, Partner-Bedingungen). Outfit ist schmal:
   58ch ≈ 80 Zeichen je Zeile */
.feld > p.leise, .feld > p:not([class]), .bedingungen li, .feld > .kopfzeile + p { max-width: 58ch; }
/* 404 (section.feld.leer-zustand): .leer-zustand nahm dem Feld das Seitenpolster, Text klebte am Rand;
   „Zur Übersicht“ stand durch den Leerzustands-Abstand 8 px tiefer als die Nachbarknöpfe */
.feld.leer-zustand { padding: 22px 24px; gap: 8px; }
.leer-zustand .knoepfe .knopf { margin-top: 0; }
@media (max-width: 700px) { .feld.leer-zustand { padding: 18px 16px; } }
/* Feld, das nur eine Meldung trägt (Testbetrieb, Fehlerseite): kein Kasten im Kasten */
.feld:has(> .meldung:only-child) { background: none; border: 0; padding: 0; }
/* Kopierwert in Datenblatt und Tabelle: der 28-px-Knopf schob den Wert 4 px unter die Beschriftung der Zeile */
@media (min-width: 701px) and (pointer: fine) { td .kopier, .daten dd .kopier { margin-block: -4px; } }
/* Gestapelte Tabellen (Handy): Beschriftung auf der Grundlinie des Werts statt oben neben dem 44-px-Kopierknopf */
@media (max-width: 700px) { table.stapeln td { align-items: baseline; } }
/* Regler im Konfigurator: Hinweis („0–8 · je Einheit“) gehörte optisch schon zum nächsten Feld — enger an den eigenen Regler */
.regler { gap: 2px; }
.formular > .regler + label { margin-top: 6px; }
/* Konto-Kurzkarten: gleiche Innenkante wie die Felder darüber (22 → 24 px) */
.konto-kurz { padding: 18px 24px; }
/* Login auf dem Handy: „Bewegung anhalten“ lag fest unten rechts über den Rechtslinks — dort im Fluss unter der Fußzeile */
@media (max-width: 700px) { .szene-pause { position: relative !important; right: auto; bottom: auto; display: flex; margin: 0 auto 20px; } }
/* Bewegung reduzieren: der Ladekreis ist Rückmeldung, keine Zierde — er dreht weiter, nur langsamer */
@media (prefers-reduced-motion: reduce) { button.laedt::after { animation: dreh 1.6s linear infinite !important; } }
/* Kasse: Beträge der Positionen standen 12 px links von „Heute fällig“ — .kasse td hob das Nullpolster der letzten Spalte auf */
.kasse table td:last-child { padding-right: 0; }
/* Teilnahmebedingungen (Partner): sechs mehrzeilige Punkte ohne Luft dazwischen lasen sich als ein Block */
.bedingungen li + li { margin-top: 6px; }

/* Managed-Pult (src/module/managed-*.ts, 24.10.2026): Abstände statt Inline-Styles, dichte Datentabelle, Zeilenformular */
.mp-luft { margin-top: var(--s3); }
.mp-unten { margin-bottom: var(--s3); }
.mp-pfad { margin: 0 0 var(--s3); }
.mp-schmal { max-width: 420px; }
.mp-log { max-height: 60vh; white-space: pre-wrap; }
.mp-code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.mp-gruppe { border: 0; padding: 0; margin: 0; }
.mp-gruppe legend { padding: 0; margin-bottom: var(--s2); }
/* QR-Code bleibt in beiden Modi dunkel auf weiß — Scanner brauchen den Kontrast, nicht die Palette */
.mp-qr { max-width: 260px; background: #fff; padding: var(--s3); border-radius: var(--r-control); }
.mp-qr svg { display: block; width: 100%; height: auto; }
/* System-Reiter: letzte Karte je Spalte füllt die Spalte, damit beide Spalten unten bündig enden (GESTALTUNG §6) — nur hier */
.mp-system .pult-spalte { display: flex; flex-direction: column; gap: var(--s5); }
.mp-system .pult-spalte > .feld:last-child { flex: 1; }
/* Datentabelle: eine Zeile je Datensatz, Werte nicht umbrechen, lange Werte abschneiden (voller Wert im title / beim Öffnen) */
table.db-daten th, table.db-daten td { padding: 8px 16px 8px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.db-daten td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.db-daten th a { color: var(--mist); }
table.db-daten th[aria-sort] a { color: var(--cloud); }
table.db-daten tbody tr:hover td { background: var(--zeile-hover); }
table.db-daten td a { font-weight: 500; }
/* Zeile bearbeiten: Name + Typ in einer Zeile, Feld darunter, NULL als eigener Haken (nicht im Label des Textfelds) */
.db-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); align-items: start; }
.db-formular .ganz { grid-column: 1 / -1; }
.db-feld { display: grid; gap: 6px; min-width: 0; }
.db-feld > label:first-child { display: flex; gap: var(--s2); align-items: baseline; color: var(--mist); font-size: var(--fs-klein); font-weight: 500; }
.db-feld > label:first-child span:first-child { color: var(--cloud); }
.db-feld textarea { min-height: 88px; }
.db-feld .haken { font-size: var(--fs-klein) !important; }
@media (max-width: 700px) { .db-formular { grid-template-columns: minmax(0, 1fr); } }
.mp-teile { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
/* Managed-Pult, Firewall-Verlauf: rein = Coral-Fläche, raus = blaue Linie (Legende mit Wort, nicht nur Farbe) */
.diagramm .fw-rein { fill: none; stroke: var(--coral); stroke-width: 1.6; }
.diagramm .fw-rein-flaeche { fill: var(--tint-coral); }
.diagramm .fw-raus { fill: none; stroke: var(--daten2); stroke-width: 1.6; }
.legende .l-rein, .legende .l-raus { height: 3px; border-radius: 2px; }
.legende .l-rein { background: var(--coral); } .legende .l-raus { background: var(--daten2); }
/* Managed-Pult, Windows (FiveM-Log, Dateibaum, Rollen) */
.mp-log { max-height: 420px; overflow: auto; margin: 0; padding: 12px 14px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); white-space: pre; font-size: 12px; }
.mp-ordnerpfad { margin: 0 0 var(--s4); }
.mp-dateien { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.mp-baum td { padding-top: 7px; padding-bottom: 7px; }
.mp-ordner { font-weight: 500; }
a.mp-ordner::after, span.mp-ordner::after { content: '/'; color: var(--mist); margin-left: 1px; }
.mp-rechte select { min-width: 150px; }
details.klapp > form.mp-rolle-weg { padding-top: 0; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); margin: 0 22px; padding: 14px 0 18px; }
@media (max-width: 1000px) { .mp-dateien { grid-template-columns: minmax(0, 1fr); } }
.pk-wert .mp-an { color: var(--on); } .pk-wert .mp-halb { color: var(--warn); } .pk-wert .mp-aus { color: var(--bad-text); }
/* Managed-Pult, Reiter System: eine Karte je Maschine */
.mp-maschinen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.mp-maschinen .mpm { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mpm-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mpm-kopf b { font-size: 16px; }
.mpm-kopf .leise { font-size: var(--fs-klein); }
.mpm-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.mpm-punkt.an { background: var(--on); } .mpm-punkt.aus { background: var(--bad); }
.mpm-os { margin: 0; font-size: var(--fs-klein); }
.mpm-hinweise { margin: 2px 0 0; font-size: var(--fs-klein); }
.mp-details { margin: var(--s5) 0 var(--s3); font-size: 18px; }