/*
 * static/haut/roehre.css – die Haut „Röhre" für den Marketing Hub.
 *
 * Michael, 21.10.2026: „ich möchte bitte ein neues Theme: im Stil von 80/90 Jahre Rechner wie in den
 * Serien LOST, SILO, Severance oder so."
 * Geboren im Office Hub (static/haut/roehre.css, docs/haut_kontext.md §3d); diese Datei ist die Fassung
 * für die Klassen des Marketing Hubs. Token und Palette stehen wortgleich wie dort, nur die Selektoren
 * sind andere. Wer hier einen Wert ändert, ändert ihn dort mit.
 *
 * Die Idee in zwei Erscheinungsbildern:
 *   hell   = das Gehäuse. Beiger Kunststoff wie ein Terminal aus den Achtzigern, Knöpfe mit Fase
 *            (oben links Licht, unten rechts Schatten), harte Schlagschatten statt weicher Wolken.
 *            Kopf und Fußzeile sind der Bildschirm im Gehäuse: Nachtblau mit Zeilenraster und kaltem
 *            Türkis – das Büro-Terminal aus Severance. Fenster tragen eine nachtblaue Titelleiste.
 *   dunkel = der Phosphor. Grün auf Schwarz wie der Rechner in der Luke (LOST) und im Silo: Text
 *            glimmt leicht nach, über allem ein feines Zeilenraster mit dunkleren Rändern, Zähler in
 *            Bernstein. Hauptknöpfe und der aktive Reiter in Inversschrift, Fenster mit doppelter
 *            Linie wie eine Maske auf dem Textbildschirm, Kartentitel mit Eingabezeichen „>".
 * Schrift: alles in IBM Plex Mono (ist schon geladen), Schriftzug, Titel und Kennzahlen in VT323 – der
 * Zeichensatz des DEC VT320, liegt als Datei unter static/fonts/ (OFL). Beim Laden schaltet sich der
 * Bildschirm einmal ein, der Cursor hinter dem Schriftzug blinkt ein paar Mal und bleibt dann stehen.
 * Wer weniger Bewegung will, bekommt beides nicht.
 *
 * Alles hier steht unter [data-haut="roehre"] am <html> (Mechanik: static/haut/haut.js). Aufbau wie
 * reinraum.css: 1. Token, 2. Hausklassen, am Ende „Röhren-Handschrift".
 *
 * Kniff aus dem Office: in Kopf, Fußzeile und Fenster-Titelleisten werden die Token (--text, --text-dim,
 * --primary, --border, --surface*) auf die Bildschirmfarben umgelegt, statt jedes Element darin zu
 * kennen – Knöpfe, Auswahlfelder und Titel im Kopf des Newsletter-Wizards folgen so von allein.
 * `class="btn"` ist im Marketing Hub ein gewöhnlicher Knopf (eigene Fläche, Rand) – der
 * :where(.btn)-Kniff des Office ist hier nicht nötig; .btn bekommt direkt die Taste mit Fase.
 *
 * Bewusst nicht umgefärbt: die Chat-Pille (#mc-btn, #mc-head – kupfern wie im Office), die
 * Signage-Designstation, Diagrammfarben und die Vorschauen von Beiträgen.
 */

@font-face{font-family:'VT323';src:url('/static/fonts/VT323-Regular.ttf') format('truetype');font-display:swap}

/* ── 1. Token ──────────────────────────────────────────────────────────────────────────────── */
/* `html[…]`, nicht `[…]`: die Token-Blöcke in index.html/newsletter.html (`:root`, `[data-theme]`)
   stehen HINTER dieser Datei und hätten bei gleicher Spezifität das letzte Wort. */
html[data-haut="roehre"]{
  --rh-gehaeuse:#e6e1d3;--rh-gehaeuse-2:#dbd5c3;--rh-karte:#f4f1e8;--rh-karte-2:#ece8dc;
  --rh-linie:#b7af99;--rh-fase-hell:#fffdf6;--rh-fase-dunkel:#968d76;
  --rh-tinte:#13222b;--rh-stein:#5d6561;
  --rh-schirm:#0e1f2b;--rh-schirm-2:#16303f;--rh-schirm-txt:#9fe6ee;--rh-schirm-dim:#5f9aa5;
  --rh-petrol:#17647a;--rh-petrol-d:#104c5d;--rh-bernstein:#b06f0c;
  --rh-schrift:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --rh-roehre:'VT323','IBM Plex Mono',ui-monospace,monospace;
  --rh-zeilen:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px);
  --rh-glimmen:0 0 6px color-mix(in srgb,var(--rh-schirm-txt) 45%,transparent);
  --rh-schlag:3px 3px 0 rgba(19,34,43,.14);
  --bg:var(--rh-gehaeuse);--bg2:var(--rh-gehaeuse-2);
  --surface:var(--rh-karte);--surface2:var(--rh-karte-2);--hover:rgba(23,100,122,.07);
  --border:var(--rh-linie);--text:var(--rh-tinte);--text-dim:var(--rh-stein);
  --primary:var(--rh-petrol);--primary-h:var(--rh-petrol-d);--secondary:var(--rh-bernstein);--secondary-h:#94600b;
  --success:#2e7a3c;--warning:#a8700f;--danger:#b3352b;
  --shadow:rgba(19,34,43,.12);
  --hbg:var(--rh-schirm);--htx:var(--rh-schirm-txt);
  /* Nichts ist Glas: volle Flächen, Fase statt Kante, Schlagschatten statt Wolke, kein Weichzeichner. */
  --haut-glas:var(--rh-karte);--haut-glas-d:var(--rh-karte);
  --haut-kante:inset 1px 1px 0 var(--rh-fase-hell),inset -1px -1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 45%,transparent);
  --haut-schatten:var(--rh-schlag);
  --haut-schatten-tief:6px 6px 0 rgba(19,34,43,.18);
  --haut-blur:none;
  --haut-rand:var(--rh-linie);
  --haut-knopf:linear-gradient(180deg,#f7f4ec,#e2ddcf);
  --haut-knopf-hover:linear-gradient(180deg,#fbf9f3,#e9e5d9);
  --haut-haupt:var(--rh-petrol);--haut-haupt-hover:var(--rh-petrol-d);--haut-haupt-txt:#f4fbfc;
  --haut-leuchte:0 0 0 rgba(0,0,0,0);
  /* Grund: Kunststoff mit einem Hauch Licht von oben */
  --haut-flecken:linear-gradient(180deg,rgba(255,253,246,.55),transparent 40%),linear-gradient(0deg,rgba(150,141,118,.10),transparent 30%);
  --haut-flecken-groesse:auto,auto;
  color-scheme:light;
}
/* Nacht: Phosphor. Schwarz mit einem Stich Grün, die Mitte des Schirms ein wenig heller. */
html[data-haut="roehre"][data-theme="dark"]{
  --rh-phosphor:#3dff7f;--rh-phosphor-dim:#2a9d52;
  --rh-glimmen:0 0 7px color-mix(in srgb,var(--rh-phosphor) 55%,transparent);
  --rh-schlag:none;
  --bg:#030803;--bg2:#061009;
  --surface:#061009;--surface2:#0b1a0f;--hover:rgba(61,255,127,.08);
  --border:#1c4227;--text:#a8f5b8;--text-dim:#5a9a68;
  --primary:var(--rh-phosphor);--primary-h:#7cffa8;--secondary:#ffb347;--secondary-h:#ffc672;
  --success:#3dff7f;--warning:#ffb347;--danger:#ff5f52;
  --shadow:rgba(0,0,0,.6);
  --hbg:#020602;--htx:#a8f5b8;
  --haut-glas:#061009;--haut-glas-d:#061009;
  --haut-kante:0 0 0 0 transparent;
  --haut-schatten:0 0 0 0 transparent;
  --haut-schatten-tief:0 0 0 1px #0f2a17,0 0 40px rgba(61,255,127,.06);
  --haut-rand:#1c4227;
  --haut-knopf:transparent;--haut-knopf-hover:rgba(61,255,127,.10);
  --haut-haupt:var(--rh-phosphor);--haut-haupt-hover:#7cffa8;--haut-haupt-txt:#021407;
  --haut-leuchte:0 0 14px rgba(61,255,127,.35);
  --haut-flecken:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(61,255,127,.055),transparent 75%);
  --haut-flecken-groesse:auto;
  color-scheme:dark;
}

/* ── 2. Grund, Schrift ─────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] body{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse);background-attachment:fixed;font-family:var(--rh-schrift)}
[data-haut="roehre"] body.im-rahmen{background:transparent}
/* Alles in Schreibmaschinenschrift. `body *` statt einzelner Klassen: im Hub setzen Dutzende Regeln
   ihre Schrift selbst (Inter, Anton). Was die Seite inline setzt, bleibt – das ist gewollt. */
[data-haut="roehre"] body *{font-family:var(--rh-schrift)}
[data-haut="roehre"][data-theme="dark"] body{text-shadow:0 0 .4px currentColor,0 0 3px color-mix(in srgb,currentColor 30%,transparent)}
[data-haut="roehre"] h1,[data-haut="roehre"] h2{font-family:var(--rh-roehre);font-weight:400;letter-spacing:.06em}

/* ── Kopf und Fußzeile: der Bildschirm im Gehäuse ──────────────────────────────────────────── */
/* Im Kopf die Token umgelegt: alles darin (Zurück-Link, Knöpfe und Auswahlfeld des Newsletter-Wizards,
   Glocke, Mappe) folgt den Bildschirmfarben, ohne dass jedes Element hier stehen muss. */
[data-haut="roehre"] body:not(.im-rahmen) #topbar,[data-haut="roehre"] #footbar{background-color:var(--hbg);background-image:var(--rh-zeilen);color:var(--htx);
  --text:var(--rh-schirm-txt);--text-dim:var(--rh-schirm-dim);--primary:var(--rh-schirm-txt);--primary-h:#c4f2f6;--border:rgba(159,230,238,.3);
  --surface:var(--rh-schirm-2);--surface2:var(--rh-schirm-2);--hover:rgba(159,230,238,.12);
  --haut-knopf:transparent;--haut-knopf-hover:var(--rh-schirm-2);--haut-haupt:var(--rh-schirm-txt);--haut-haupt-hover:#c4f2f6;--haut-haupt-txt:var(--rh-schirm);
  --rh-fase-hell:rgba(159,230,238,.18);--rh-fase-dunkel:rgba(159,230,238,.45)}
[data-haut="roehre"] body:not(.im-rahmen) #topbar{border-bottom:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 2px 0 var(--rh-fase-dunkel)}
[data-haut="roehre"] #footbar{border-top:1px solid color-mix(in srgb,var(--htx) 18%,transparent)}
[data-haut="roehre"][data-theme="dark"] body:not(.im-rahmen) #topbar,[data-haut="roehre"][data-theme="dark"] #footbar{
  --text:#a8f5b8;--text-dim:#5a9a68;--primary:var(--rh-phosphor);--primary-h:#7cffa8;--border:#1c4227;
  --surface:#061009;--surface2:#0b1a0f;--hover:rgba(61,255,127,.10);
  --haut-knopf:transparent;--haut-knopf-hover:rgba(61,255,127,.10);--haut-haupt:var(--rh-phosphor);--haut-haupt-hover:#7cffa8;--haut-haupt-txt:#021407}
[data-haut="roehre"][data-theme="dark"] body:not(.im-rahmen) #topbar{box-shadow:inset 0 -1px 0 #1c4227,0 1px 0 rgba(61,255,127,.18)}
/* Im Rahmen (Newsletter im Hub) ist die Kopfzeile nur ein Seitentitel – kein zweiter Bildschirm. */
[data-haut="roehre"] body.im-rahmen #topbar{background:transparent;box-shadow:none}
[data-haut="roehre"] .tb-logo:hover,[data-haut="roehre"] .backlink:hover{background:var(--hover);color:var(--text)}
[data-haut="roehre"] .tb-logo,[data-haut="roehre"] .backlink{border-radius:2px}
[data-haut="roehre"] .tb-logo .tb-mark{background:transparent;border:1px solid color-mix(in srgb,var(--htx) 45%,transparent);border-radius:2px;box-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .tb-mark svg{stroke:var(--htx);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--htx) 45%,transparent))}
[data-haut="roehre"] .tb-mark svg circle{fill:var(--htx)}
[data-haut="roehre"] .tb-logo .tb-txt small{color:var(--htx);opacity:.55;letter-spacing:.2em}
[data-haut="roehre"] .theme-btn,[data-haut="roehre"] .meld-btn{background:transparent;color:var(--htx);border:1px solid color-mix(in srgb,var(--htx) 35%,transparent);border-radius:2px}
[data-haut="roehre"] .theme-btn:hover,[data-haut="roehre"] .meld-btn:hover{background:var(--htx);color:var(--hbg)}
[data-haut="roehre"] body.im-rahmen .theme-btn{color:var(--text);border-color:var(--border)}
[data-haut="roehre"] .tb-av{border-radius:2px;background-color:var(--rh-schirm-2);color:var(--htx);border:1px solid color-mix(in srgb,var(--htx) 45%,transparent)}
[data-haut="roehre"][data-theme="dark"] .tb-av{background-color:#061009}
[data-haut="roehre"] .tb-profile:hover .tb-av{border-color:var(--htx);box-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .ft-text b{color:var(--htx)}
[data-haut="roehre"] .ft-gear{border-radius:2px}
[data-haut="roehre"] .ft-gear:hover{color:var(--hbg);background:var(--htx)}

/* ── Seitenleiste ──────────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] #snav{background:var(--bg2);border-right:2px solid var(--border);box-shadow:inset -1px 0 0 var(--rh-fase-hell)}
[data-haut="roehre"][data-theme="dark"] #snav{background:var(--bg);border-right:1px solid var(--border);box-shadow:none}
[data-haut="roehre"] #snav .brand{font-family:var(--rh-roehre);font-size:24px;letter-spacing:.1em;color:var(--primary);text-shadow:var(--rh-glimmen)}
[data-haut="roehre"]:not([data-theme="dark"]) #snav .brand{text-shadow:none}
/* Abschnittsköpfe der Leiste (Planen, Produzieren …) tragen keine Klasse, nur Inline-Stil. */
[data-haut="roehre"] #snav>div:not([class]){font-family:var(--rh-roehre)!important;font-weight:400!important;letter-spacing:.12em!important;font-size:15px!important}
[data-haut="roehre"][data-theme="dark"] #snav>div:not([class]){color:var(--rh-phosphor-dim)!important}
[data-haut="roehre"] .nav-tab{border-radius:2px;font-size:12.5px;font-weight:500;letter-spacing:0}
[data-haut="roehre"] .nav-tab:hover{background:var(--surface);color:var(--text)}
[data-haut="roehre"][data-theme="dark"] .nav-tab:hover{background:rgba(61,255,127,.08)}
/* Aktiver Eintrag: hell der Bildschirm-Balken (Nachtblau, Türkis), nachts Inversschrift. */
[data-haut="roehre"] .nav-tab.active,[data-haut="roehre"] .nav-tab.active:hover{background:var(--rh-schirm);color:var(--rh-schirm-txt);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35)}
[data-haut="roehre"][data-theme="dark"] .nav-tab.active,[data-haut="roehre"][data-theme="dark"] .nav-tab.active:hover{background:var(--primary);color:#021407;box-shadow:var(--haut-leuchte);text-shadow:none}

/* ── Karten, Kennzahlen, Bildkarten ────────────────────────────────────────────────────────── */
[data-haut="roehre"] .card,[data-haut="roehre"] .stat-card,[data-haut="roehre"] .dash-kpi,[data-haut="roehre"] .mcard,[data-haut="roehre"] .login-box{background:var(--surface);border:1px solid var(--border);border-radius:3px;box-shadow:var(--haut-kante),var(--rh-schlag)}
[data-haut="roehre"][data-theme="dark"] .card,[data-haut="roehre"][data-theme="dark"] .stat-card,[data-haut="roehre"][data-theme="dark"] .dash-kpi,[data-haut="roehre"][data-theme="dark"] .mcard{border-radius:0;box-shadow:none}
[data-haut="roehre"] .dash-kpi.klick:hover,[data-haut="roehre"] .mcard:hover{transform:translate(-1px,-1px);box-shadow:var(--haut-kante),4px 4px 0 rgba(19,34,43,.18)}
[data-haut="roehre"][data-theme="dark"] .dash-kpi.klick:hover,[data-haut="roehre"][data-theme="dark"] .mcard:hover{transform:none;border-color:var(--primary);box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .card-title,[data-haut="roehre"] .modal-title,[data-haut="roehre"] .hd-titel,[data-haut="roehre"] .fmm-titel,[data-haut="roehre"] .meld-head h3{font-family:var(--rh-roehre);font-weight:400;font-size:22px;letter-spacing:.06em;line-height:1;text-transform:uppercase;color:var(--primary)}
[data-haut="roehre"] .stat-card,[data-haut="roehre"] .dash-kpi{border-top:3px solid var(--primary)}
[data-haut="roehre"] .stat-value{font-family:var(--rh-roehre);font-weight:400;font-size:44px;letter-spacing:.02em}
[data-haut="roehre"] .dash-kpi .stat-value{font-size:38px;margin-bottom:4px}
[data-haut="roehre"] .stat-label,[data-haut="roehre"] .dash-tag{letter-spacing:.14em}
[data-haut="roehre"] .dash-pille,[data-haut="roehre"] .dash-chip,[data-haut="roehre"] .dash-delta,[data-haut="roehre"] .tagpill,[data-haut="roehre"] .badge,[data-haut="roehre"] .chip{border-radius:2px}
[data-haut="roehre"] .dash-zeile,[data-haut="roehre"] .bl-thumb,[data-haut="roehre"] .mcard img{border-radius:2px}
[data-haut="roehre"] #upd-banner{background:var(--surface);border-radius:2px;border-left:5px solid var(--primary);box-shadow:var(--haut-kante),var(--rh-schlag)}
/* Newsletter-Wizard: Karten der Schritte */
[data-haut="roehre"] .anlass-card,[data-haut="roehre"] .var-card,[data-haut="roehre"] .set-card,[data-haut="roehre"] .idea-card,[data-haut="roehre"] .hero-card,[data-haut="roehre"] #prev-frame,[data-haut="roehre"] .prod-thumb,[data-haut="roehre"] .icobtn{border-radius:2px}

/* ── Tabellen ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] .data-table th{background:var(--surface2);border-bottom:2px solid var(--border);letter-spacing:.14em;font-size:10.5px;font-weight:500;text-transform:uppercase}
[data-haut="roehre"][data-theme="dark"] .data-table th{background:transparent;color:var(--rh-phosphor-dim);border-bottom:1px dashed var(--rh-phosphor-dim)}
[data-haut="roehre"] .data-table td{border-bottom-color:color-mix(in srgb,var(--border) 60%,transparent)}
[data-haut="roehre"] .data-table tbody tr:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
[data-haut="roehre"][data-theme="dark"] .data-table tbody tr:hover{background:rgba(61,255,127,.07)}

/* ── Knöpfe: hell mit Fase, nachts Inversschrift ───────────────────────────────────────────── */
/* .btn ist im Marketing Hub der gewöhnliche Knopf: eine Taste aus dem Gehäuse, nachts ein Rahmen. */
[data-haut="roehre"] .btn,[data-haut="roehre"] .wpill,[data-haut="roehre"] .hd-knopf{background:var(--haut-knopf);border:1px solid var(--rh-fase-dunkel);border-radius:2px;color:var(--text);letter-spacing:.02em;font-weight:500;box-shadow:inset 1px 1px 0 var(--rh-fase-hell),inset -1px -1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 50%,transparent);transition:background .1s,color .1s}
[data-haut="roehre"] .btn:hover,[data-haut="roehre"] .wpill:hover,[data-haut="roehre"] .hd-knopf:hover{background:var(--haut-knopf-hover);color:var(--text);border-color:var(--primary)}
[data-haut="roehre"] .btn:active,[data-haut="roehre"] .hd-knopf:active{transform:translate(1px,1px);box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 60%,transparent),inset -1px -1px 0 var(--rh-fase-hell)}
[data-haut="roehre"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
[data-haut="roehre"] .btn-ghost:hover{background:var(--haut-knopf-hover);border-color:var(--rh-fase-dunkel)}
[data-haut="roehre"] .btn-primary,[data-haut="roehre"] .hd-knopf.haupt,[data-haut="roehre"] .hd-knopf.gefahr,[data-haut="roehre"] .drs-seg button.an,[data-haut="roehre"] .drs-fertig{box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(0,0,0,.3),2px 2px 0 rgba(19,34,43,.2)}
[data-haut="roehre"] .btn-primary,[data-haut="roehre"] .btn-primary:hover,[data-haut="roehre"] .hd-knopf.haupt,[data-haut="roehre"] .drs-seg button.an,[data-haut="roehre"] .drs-fertig{background:var(--haut-haupt);border-color:transparent;color:var(--haut-haupt-txt)}
[data-haut="roehre"] .btn-primary:hover,[data-haut="roehre"] .hd-knopf.haupt:hover,[data-haut="roehre"] .drs-fertig:hover{background:var(--haut-haupt-hover);color:var(--haut-haupt-txt)}
[data-haut="roehre"] .btn-primary:active{box-shadow:inset 1px 1px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2)}
[data-haut="roehre"] .hd-knopf.gefahr{background:var(--danger);border-color:transparent;color:#fff}
/* Kopf: die Knöpfe sind Bildschirmschrift, keine Tasten aus dem Gehäuse */
[data-haut="roehre"] body:not(.im-rahmen) #topbar .btn{box-shadow:none;border-color:color-mix(in srgb,var(--htx) 35%,transparent)}
[data-haut="roehre"] body:not(.im-rahmen) #topbar .btn-primary{border-color:transparent}
[data-haut="roehre"][data-theme="dark"] .btn,[data-haut="roehre"][data-theme="dark"] .wpill,[data-haut="roehre"][data-theme="dark"] .hd-knopf{background:transparent;border-color:var(--rh-phosphor-dim);color:var(--primary);box-shadow:none}
[data-haut="roehre"][data-theme="dark"] .btn:hover,[data-haut="roehre"][data-theme="dark"] .wpill:hover,[data-haut="roehre"][data-theme="dark"] .hd-knopf:hover{background:var(--primary);color:#021407;border-color:var(--primary);text-shadow:none}
[data-haut="roehre"][data-theme="dark"] .btn-ghost{border-color:transparent}
[data-haut="roehre"][data-theme="dark"] .btn-primary,[data-haut="roehre"][data-theme="dark"] .hd-knopf.haupt,[data-haut="roehre"][data-theme="dark"] .drs-seg button.an,[data-haut="roehre"][data-theme="dark"] .drs-fertig{background:var(--haut-haupt);border-color:transparent;box-shadow:var(--haut-leuchte);text-shadow:none;color:#021407}
[data-haut="roehre"][data-theme="dark"] .hd-knopf.gefahr{background:var(--danger);color:#1a0402;text-shadow:none}
[data-haut="roehre"] .subtab{letter-spacing:.04em;font-size:12.5px;font-weight:500}
[data-haut="roehre"] .subtab.active{color:var(--primary);border-bottom-color:var(--primary)}
/* Newsletter-Wizard: aktiver Schritt, gewählter Chip, Kennzeichen – hell der Bildschirm-Balken,
   nachts Inversschrift. Weiß auf Phosphor wäre nicht lesbar. */
[data-haut="roehre"] .wpill.active,[data-haut="roehre"] .wpill.active:hover{background:var(--rh-schirm);color:var(--rh-schirm-txt);border-color:var(--rh-tinte);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35)}
[data-haut="roehre"] .wpill .num{border-radius:2px}
[data-haut="roehre"] .wpill.active .num{background:rgba(159,230,238,.18);color:var(--rh-schirm-txt)}
[data-haut="roehre"] .chip.sel,[data-haut="roehre"] .badge.on{background:var(--haut-haupt);border-color:transparent;color:var(--haut-haupt-txt)}
[data-haut="roehre"][data-theme="dark"] .wpill.active,[data-haut="roehre"][data-theme="dark"] .wpill.active:hover{background:var(--primary);color:#021407;border-color:var(--primary);box-shadow:var(--haut-leuchte);text-shadow:none}
[data-haut="roehre"][data-theme="dark"] .wpill.active .num{background:rgba(2,20,7,.2);color:#021407}
[data-haut="roehre"][data-theme="dark"] .chip.sel,[data-haut="roehre"][data-theme="dark"] .badge.on,[data-haut="roehre"][data-theme="dark"] .badge.ok,[data-haut="roehre"][data-theme="dark"] .badge.warn,[data-haut="roehre"][data-theme="dark"] .wpill.done .num,[data-haut="roehre"][data-theme="dark"] .dash-chip.raus{color:#021407;text-shadow:none}

/* ── Eingaben: hell eingelassen, nachts schwarz mit Phosphorrand ───────────────────────────── */
[data-haut="roehre"] .finput,[data-haut="roehre"] .fselect,[data-haut="roehre"] textarea.finput,[data-haut="roehre"] .hd-feld input,[data-haut="roehre"] .hd-feld textarea{background:#fffdf8;border:1px solid var(--rh-fase-dunkel);border-radius:2px;box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 55%,transparent);caret-color:var(--primary)}
[data-haut="roehre"][data-theme="dark"] .finput,[data-haut="roehre"][data-theme="dark"] .fselect,[data-haut="roehre"][data-theme="dark"] textarea.finput,[data-haut="roehre"][data-theme="dark"] .hd-feld input,[data-haut="roehre"][data-theme="dark"] .hd-feld textarea{background:#000;border-color:var(--border);box-shadow:none}
/* im Kopf (Newsletter: Auswahl des Newsletters) ist das Feld ein Stück Bildschirm */
[data-haut="roehre"] body:not(.im-rahmen) #topbar .finput,[data-haut="roehre"] body:not(.im-rahmen) #topbar .fselect{background:var(--rh-schirm-2);color:var(--text);border-color:var(--border);box-shadow:none}
[data-haut="roehre"][data-theme="dark"] body:not(.im-rahmen) #topbar .finput,[data-haut="roehre"][data-theme="dark"] body:not(.im-rahmen) #topbar .fselect{background:#000}
[data-haut="roehre"] .finput:focus,[data-haut="roehre"] .fselect:focus,[data-haut="roehre"] textarea.finput:focus,[data-haut="roehre"] .hd-feld input:focus,[data-haut="roehre"] .hd-feld textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
[data-haut="roehre"][data-theme="dark"] .finput:focus,[data-haut="roehre"][data-theme="dark"] .fselect:focus,[data-haut="roehre"][data-theme="dark"] textarea.finput:focus{box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .flabel{letter-spacing:.12em;font-size:10.5px;font-weight:500;text-transform:uppercase}
[data-haut="roehre"] .mh-switch span{border-radius:2px}
[data-haut="roehre"] .mh-switch span::after{border-radius:1px}
[data-haut="roehre"] .mh-switch input:checked+span{background:var(--primary)}
[data-haut="roehre"][data-theme="dark"] .mh-switch span::after{background:#021407}
[data-haut="roehre"][data-theme="dark"] .mh-switch input:not(:checked)+span::after{background:var(--text-dim)}
[data-haut="roehre"] input[type="checkbox"],[data-haut="roehre"] input[type="radio"],[data-haut="roehre"] input[type="range"]{accent-color:var(--primary)}

/* ── Zähler: Meldeleuchte in Bernstein ─────────────────────────────────────────────────────── */
[data-haut="roehre"] .meld-badge{background:var(--rh-bernstein);color:#fff;border-radius:2px;border-color:var(--hbg)}
[data-haut="roehre"][data-theme="dark"] .meld-badge{background:#ffb347;color:#241603;text-shadow:none;box-shadow:0 0 8px rgba(255,179,71,.55)}

/* ── Schwebende Schichten: Fenster mit Titelleiste ─────────────────────────────────────────── */
[data-haut="roehre"] .modal-overlay,[data-haut="roehre"] .drs-overlay,[data-haut="roehre"] .hd-hg,[data-haut="roehre"] .fmm-hg{background:rgba(19,34,43,.38);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-haut="roehre"][data-theme="dark"] .modal-overlay,[data-haut="roehre"][data-theme="dark"] .drs-overlay,[data-haut="roehre"][data-theme="dark"] .hd-hg,[data-haut="roehre"][data-theme="dark"] .fmm-hg{background:rgba(0,0,0,.72)}
[data-haut="roehre"] .modal,[data-haut="roehre"] .drs-modal,[data-haut="roehre"] #pp-lokal,[data-haut="roehre"] #meld-panel,[data-haut="roehre"] .hd-karte,[data-haut="roehre"] .fmm-karte{background:var(--surface);border:2px solid var(--rh-tinte);border-radius:3px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:none;-webkit-backdrop-filter:none}
/* hell: die Titelleiste ist ein Stück Bildschirm – Token darin umgelegt, alles im Kopf folgt. */
[data-haut="roehre"] .modal-header,[data-haut="roehre"] .meld-head,[data-haut="roehre"] .hd-kopf,[data-haut="roehre"] .fmm-kopf{background-color:var(--rh-schirm);background-image:var(--rh-zeilen);border-bottom:2px solid var(--rh-tinte);border-radius:0;
  --text:var(--rh-schirm-txt);--text-dim:var(--rh-schirm-dim);--primary:var(--rh-schirm-txt);--border:rgba(159,230,238,.3);--surface:var(--rh-schirm-2);--surface2:var(--rh-schirm-2);
  --haut-knopf:transparent;--haut-knopf-hover:var(--rh-schirm-2);--rh-fase-hell:rgba(159,230,238,.18);--rh-fase-dunkel:rgba(159,230,238,.45);color:var(--text)}
[data-haut="roehre"] .modal-header .modal-title,[data-haut="roehre"] .meld-head h3,[data-haut="roehre"] .hd-kopf .hd-titel,[data-haut="roehre"] .fmm-kopf .fmm-titel{color:var(--rh-schirm-txt);text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .modal-header .modal-close,[data-haut="roehre"] .hd-zu,[data-haut="roehre"] .fmm-kopf .btn{background:transparent;color:var(--rh-schirm-txt);border:1px solid color-mix(in srgb,var(--rh-schirm-txt) 40%,transparent);border-radius:2px;box-shadow:none}
[data-haut="roehre"] .modal-header .modal-close:hover,[data-haut="roehre"] .hd-zu:hover,[data-haut="roehre"] .fmm-kopf .btn:hover{background:var(--rh-schirm-txt);color:var(--rh-schirm);border-color:var(--rh-schirm-txt)}
[data-haut="roehre"] .modal-close{min-width:28px;min-height:28px}
[data-haut="roehre"] .modal-footer,[data-haut="roehre"] .hd-fuss{border-top:1px solid var(--border)}
/* nachts: doppelte Linie wie eine Maske auf dem Textbildschirm */
[data-haut="roehre"][data-theme="dark"] .modal,[data-haut="roehre"][data-theme="dark"] .drs-modal,[data-haut="roehre"][data-theme="dark"] #pp-lokal,[data-haut="roehre"][data-theme="dark"] #meld-panel,[data-haut="roehre"][data-theme="dark"] .hd-karte,[data-haut="roehre"][data-theme="dark"] .fmm-karte{background:#020702;border:4px double var(--rh-phosphor-dim);border-radius:0}
[data-haut="roehre"][data-theme="dark"] .modal-header,[data-haut="roehre"][data-theme="dark"] .meld-head,[data-haut="roehre"][data-theme="dark"] .hd-kopf,[data-haut="roehre"][data-theme="dark"] .fmm-kopf{background:#020702;border-bottom:1px dashed var(--rh-phosphor-dim);
  --text:#a8f5b8;--text-dim:#5a9a68;--primary:var(--rh-phosphor);--border:#1c4227;--surface:#061009;--surface2:#0b1a0f;--haut-knopf:transparent;--haut-knopf-hover:rgba(61,255,127,.10)}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-title,[data-haut="roehre"][data-theme="dark"] .meld-head h3,[data-haut="roehre"][data-theme="dark"] .hd-kopf .hd-titel,[data-haut="roehre"][data-theme="dark"] .fmm-kopf .fmm-titel{color:var(--primary)}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-close,[data-haut="roehre"][data-theme="dark"] .hd-zu,[data-haut="roehre"][data-theme="dark"] .fmm-kopf .btn{color:var(--primary);border-color:var(--rh-phosphor-dim)}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-close:hover,[data-haut="roehre"][data-theme="dark"] .hd-zu:hover,[data-haut="roehre"][data-theme="dark"] .fmm-kopf .btn:hover{background:var(--primary);color:#021407;text-shadow:none}
[data-haut="roehre"] .hd-punkt,[data-haut="roehre"] .hd-kasten{border-radius:2px}
[data-haut="roehre"] .pp-item:hover,[data-haut="roehre"] .meld-row:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)}
[data-haut="roehre"] .meld-dot{border-radius:1px;box-shadow:0 0 6px color-mix(in srgb,var(--primary) 50%,transparent)}
[data-haut="roehre"] #mc-panel{border:2px solid var(--rh-tinte);border-radius:3px;box-shadow:var(--haut-schatten-tief)}
[data-haut="roehre"][data-theme="dark"] #mc-panel{border:4px double var(--rh-phosphor-dim);border-radius:0}
[data-haut="roehre"] .drs-karte{border-radius:3px;background:var(--surface2);box-shadow:var(--haut-kante)}
[data-haut="roehre"] .drs-karte.an{border-color:var(--primary)}
[data-haut="roehre"] .drs-bild,[data-haut="roehre"] .drs-seg,[data-haut="roehre"] .drs-haken,[data-haut="roehre"] .drs-fertig{border-radius:2px}
[data-haut="roehre"] .drs-haken{color:var(--haut-haupt-txt)}
[data-haut="roehre"][data-theme="dark"] .drs-haken{color:#021407;text-shadow:none}
[data-haut="roehre"] .drs-kopf b{font-family:var(--rh-roehre);font-weight:400;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
/* Hinweis unten: ein Stück Bildschirm (die Seite setzt Grund und Fehlerrot selbst, inline) */
[data-haut="roehre"] #toast{border:1px solid var(--rh-tinte);border-left-width:5px;border-radius:2px;box-shadow:var(--haut-schatten-tief)}
[data-haut="roehre"][data-theme="dark"] #toast{border-color:var(--rh-phosphor-dim);border-left-color:var(--primary);box-shadow:var(--haut-leuchte);text-shadow:none}

/* ── Anmeldung: der Schirm vor dem Einschalten ─────────────────────────────────────────────── */
[data-haut="roehre"] #login-overlay{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse)}
[data-haut="roehre"] .login-box{border:2px solid var(--rh-tinte);border-radius:4px;box-shadow:var(--haut-kante),var(--haut-schatten-tief)}
[data-haut="roehre"][data-theme="dark"] .login-box{border:4px double var(--rh-phosphor-dim);border-radius:0;background:#020702;box-shadow:none}
[data-haut="roehre"] .login-box h1{font-size:34px!important;letter-spacing:.08em;line-height:1}
[data-haut="roehre"][data-theme="dark"] .login-box h1{text-shadow:var(--rh-glimmen)}

/* ── Sonstiges ─────────────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] ::selection{background:var(--primary);color:var(--haut-haupt-txt);text-shadow:none}
[data-haut="roehre"] ::-webkit-scrollbar-thumb{background:var(--rh-linie);border-radius:0;border:2px solid var(--bg2)}
[data-haut="roehre"][data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--rh-phosphor-dim);border-color:#000}
[data-haut="roehre"][data-theme="dark"] ::-webkit-scrollbar-track{background:#000}

/* ── Röhren-Handschrift ────────────────────────────────────────────────────────────────────── */
/* Schriftzug und Seitentitel im Kopf: Zeichensatz des Terminals, glimmend. */
[data-haut="roehre"] .tb-logo .tb-txt,[data-haut="roehre"] .tb-title{font-family:var(--rh-roehre);font-weight:400;font-size:28px;letter-spacing:.08em;color:var(--htx);text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] body.im-rahmen .tb-title{color:var(--primary);text-shadow:none}
[data-haut="roehre"][data-theme="dark"] body.im-rahmen .tb-title{text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .tb-logo .tb-txt small{font-family:var(--rh-schrift);text-shadow:none}
/* Cursor hinter dem Schriftzug: blinkt ein paar Mal und bleibt dann stehen – den ganzen Tag
   blinken wäre zu viel. Auf der Anmeldung wartet er, bis jemand tippt. Beim Schriftzug steht
   die Unterzeile als Block darunter, deshalb sitzt der Cursor dort absolut neben der ersten Zeile. */
[data-haut="roehre"] .tb-logo .tb-txt{position:relative;white-space:nowrap}
/* Schmaler Schirm: der Schriftzug in VT323 ist breiter als die Anton-Zeile – eine Stufe kleiner, damit er
   nicht in zwei Zeilen bricht und die Unterzeile überdeckt. */
@media (max-width:600px){[data-haut="roehre"] .tb-logo .tb-txt,[data-haut="roehre"] .tb-title{font-size:21px;letter-spacing:.04em}}
[data-haut="roehre"] .tb-logo .tb-txt::after,[data-haut="roehre"] .login-box h1::after{content:"";display:inline-block;width:.45em;height:.8em;margin-left:.15em;vertical-align:-.05em;background:currentColor;box-shadow:var(--rh-glimmen);animation:rh-cursor 1.06s steps(1) 6}
[data-haut="roehre"] .tb-logo .tb-txt::after{position:absolute;left:100%;top:.05em}
[data-haut="roehre"] .login-box h1::after{animation-iteration-count:infinite}
@keyframes rh-cursor{50%{opacity:0}}
/* Nachts: Eingabezeichen vor den Titeln, Titel und Kennzahlen glimmen. */
[data-haut="roehre"][data-theme="dark"] .card-title::before,[data-haut="roehre"][data-theme="dark"] .modal-title::before,[data-haut="roehre"][data-theme="dark"] .hd-titel::before,[data-haut="roehre"][data-theme="dark"] .fmm-titel::before,[data-haut="roehre"][data-theme="dark"] .meld-head h3::before{content:"> ";color:var(--rh-phosphor-dim)}
[data-haut="roehre"][data-theme="dark"] .card-title,[data-haut="roehre"][data-theme="dark"] .modal-title,[data-haut="roehre"][data-theme="dark"] .stat-value{text-shadow:var(--rh-glimmen)}
/* Nachts liegt über allem das Zeilenraster des Schirms und ein dunklerer Rand – auf einer eigenen,
   festen Ebene, die keinen Klick fängt. Im Rahmen trägt der Hub sie schon. */
[data-haut="roehre"][data-theme="dark"] body:not(.im-rahmen)::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:var(--rh-zeilen),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.5) 100%);opacity:.55}
/* Einschalten: ein heller Strich in der Mitte, dann geht das Bild nach oben und unten auf. Einmal je
   Seitenaufruf – die Ebene bleibt danach unsichtbar und fängt keinen Klick. Im Rahmen nicht noch einmal. */
[data-haut="roehre"] body:not(.im-rahmen)::before{content:"";position:fixed;inset:0;z-index:2147483001;pointer-events:none;visibility:hidden;
  background:linear-gradient(var(--htx),var(--htx)) center/0 2px no-repeat,linear-gradient(#000,#000) top/100% 50% no-repeat,linear-gradient(#000,#000) bottom/100% 50% no-repeat;
  animation:rh-einschalten .62s ease-out .05s both}
@keyframes rh-einschalten{
  0%{visibility:visible;opacity:1;background-size:0 2px,100% 50%,100% 50%}
  30%{visibility:visible;opacity:1;background-size:100% 2px,100% 50%,100% 50%}
  75%{visibility:visible;opacity:1;background-size:100% 1px,100% 0,100% 0}
  100%{visibility:hidden;opacity:0;background-size:100% 0,100% 0,100% 0}
}
/* Wer weniger Bewegung will, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){
  [data-haut="roehre"] body::before{display:none}
  [data-haut="roehre"] .tb-logo .tb-txt::after,[data-haut="roehre"] .login-box h1::after{animation:none}
  [data-haut="roehre"] .btn{transition:none}
}