/*
 * static/haut/roehre.css – die Haut „Röhre" für den ganzen Office 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."
 *
 * 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.
 *            Der Kopf ist 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 im Hub geladen), Titel, Uhr und Kennzahlen in VT323 –
 * der Zeichensatz des DEC VT320, liegt als Datei unter static/fonts/ (OFL). Beim Laden schaltet sich
 * der Bildschirm einmal ein (ein Strich in der Mitte, dann geht das Bild auf), 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" und der App-Abschnitt.
 *
 * Bewusst nicht umgefärbt: Aufgaben (--as-*), Dienstplan (--dp-*), BAX, Aura-Kachel,
 * GF-/Gaming-Center-Einträge – eigene Farbwelten mit Absicht.
 */

@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 der Seiten (`: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);--bg-card:var(--surface);--bg-secondary:var(--surface2);
  --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);
  /* Die --haut-*-Token lesen auch theke.html und waldruhe.html. Hier ist nichts 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;--bg-card:var(--surface);--bg-secondary:var(--surface2);
  --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)}
/* 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"] .main-scroll{background:transparent}

/* ── Kopf: der Bildschirm im Gehäuse ───────────────────────────────────────────────────────── */
[data-haut="roehre"] .header{background-color:var(--hbg);background-image:var(--rh-zeilen);color:var(--htx);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 2px 0 var(--rh-fase-dunkel)}
[data-haut="roehre"][data-theme="dark"] .header{box-shadow:inset 0 -1px 0 var(--border),0 1px 0 rgba(61,255,127,.18)}
[data-haut="roehre"] .logo-sub,[data-haut="roehre"] .logo-sub-hdr{color:var(--htx);opacity:.55}
[data-haut="roehre"] .logo-img{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--htx) 40%,transparent))}
[data-haut="roehre"] .pill{background:transparent;color:var(--htx);border:1px solid color-mix(in srgb,var(--htx) 35%,transparent);border-radius:2px}
[data-haut="roehre"] .hclock{color:var(--htx);opacity:.9}
[data-haut="roehre"] .theme-btn,[data-haut="roehre"] .back-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"] .back-btn:hover,[data-haut="roehre"] .meld-btn:hover{background:var(--htx);color:var(--hbg)}
[data-haut="roehre"] .logout-btn{color:color-mix(in srgb,var(--htx) 70%,transparent);border-radius:2px}
[data-haut="roehre"] .logout-btn:hover{background:var(--htx);color:var(--hbg)}
[data-haut="roehre"] .profile-av{border-radius:2px;border-color:color-mix(in srgb,var(--htx) 45%,transparent)}
[data-haut="roehre"] .profile-av:hover{border-color:var(--htx)}
[data-haut="roehre"] .snav-burger{color:var(--htx)}
[data-haut="roehre"] .header .nav-tab{color:color-mix(in srgb,var(--htx) 65%,transparent)}
[data-haut="roehre"] .header .nav-tab:hover{color:var(--htx)}
[data-haut="roehre"] .header .nav-tab.active{color:var(--htx);border-bottom-color:var(--htx)}

/* ── Fußzeile: unterer Rand des Bildschirms ────────────────────────────────────────────────── */
[data-haut="roehre"] .footer{background-color:var(--hbg);background-image:var(--rh-zeilen);border-top:1px solid color-mix(in srgb,var(--htx) 18%,transparent)}
[data-haut="roehre"] .footer-text,[data-haut="roehre"] .footer-ws,[data-haut="roehre"] .footer-gear{color:color-mix(in srgb,var(--htx) 60%,transparent)}
[data-haut="roehre"] .footer-gear:hover{color:var(--hbg);background:var(--htx)}

/* ── Seitenleiste (index.html: .snav · settings.html: .tab-bar) ───────────────────────────── */
[data-haut="roehre"] .snav,[data-haut="roehre"] .tab-bar{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,[data-haut="roehre"][data-theme="dark"] .tab-bar{background:var(--bg);border-right:1px solid var(--border);box-shadow:none}
[data-haut="roehre"] .snav-search,[data-haut="roehre"] .nav-search{background:var(--surface);border:1px solid var(--border);border-radius:2px;box-shadow:inset 1px 1px 0 var(--rh-fase-dunkel)}
[data-haut="roehre"][data-theme="dark"] .snav-search,[data-haut="roehre"][data-theme="dark"] .nav-search{background:#000;box-shadow:none}
[data-haut="roehre"] .snav .nav-tab,[data-haut="roehre"] .tab-bar .tab-btn{border-radius:2px;font-size:12.5px;letter-spacing:0}
[data-haut="roehre"] .snav .nav-tab:hover,[data-haut="roehre"] .tab-bar .tab-btn:hover{background:var(--surface);color:var(--text)}
[data-haut="roehre"][data-theme="dark"] .snav .nav-tab:hover,[data-haut="roehre"][data-theme="dark"] .tab-bar .tab-btn:hover{background:rgba(61,255,127,.08)}
/* Aktiver Eintrag: hell der Bildschirm-Balken (Nachtblau, Türkis), nachts Inversschrift. */
[data-haut="roehre"] .snav .nav-tab.active,[data-haut="roehre"] .tab-bar .tab-btn.active,[data-haut="roehre"] .tab-bar .tab-btn.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"] .snav .nav-tab.active,[data-haut="roehre"][data-theme="dark"] .tab-bar .tab-btn.active,[data-haut="roehre"][data-theme="dark"] .tab-bar .tab-btn.active:hover{background:var(--primary);color:#021407;box-shadow:var(--haut-leuchte);text-shadow:none}
[data-haut="roehre"] .snav .nav-tab.active .snav-ic,[data-haut="roehre"] .tab-bar .tab-btn.active .tb-ic{color:inherit}
[data-haut="roehre"] .snav .nav-tab.active .nbadge{background:rgba(255,255,255,.25);color:inherit}
[data-haut="roehre"] .snav-group,[data-haut="roehre"] .nav-section{color:var(--text-dim);font-family:var(--rh-roehre);font-weight:400;letter-spacing:.12em;font-size:15px;text-transform:uppercase}
[data-haut="roehre"][data-theme="dark"] .snav-group,[data-haut="roehre"][data-theme="dark"] .nav-section{color:var(--rh-phosphor-dim)}
[data-haut="roehre"] .snav-collapse-btn{background:var(--haut-knopf);border:1px solid var(--border);border-radius:2px;box-shadow:var(--haut-kante)}
[data-haut="roehre"] .snav-foot{border-top-color:var(--border)}
[data-haut="roehre"] #snav-mob-overlay.show{background:rgba(19,34,43,.35)}

/* ── Karten, Kacheln ───────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] .card,[data-haut="roehre"] .stat-card,[data-haut="roehre"] .mod-tile,[data-haut="roehre"] .dash-tile,[data-haut="roehre"] .kat-tile,[data-haut="roehre"] .integration-item,[data-haut="roehre"] .login-box,[data-haut="roehre"] .pipeline-stage{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"] .mod-tile,[data-haut="roehre"][data-theme="dark"] .dash-tile,[data-haut="roehre"][data-theme="dark"] .kat-tile,[data-haut="roehre"][data-theme="dark"] .integration-item,[data-haut="roehre"][data-theme="dark"] .pipeline-stage{border-radius:0;box-shadow:none}
[data-haut="roehre"] .stat-card[onclick]:hover,[data-haut="roehre"] .kat-tile:hover{transform:translate(-1px,-1px);box-shadow:var(--haut-kante),4px 4px 0 rgba(19,34,43,.18)}
[data-haut="roehre"][data-theme="dark"] .stat-card[onclick]:hover,[data-haut="roehre"][data-theme="dark"] .kat-tile:hover{transform:none;border-color:var(--primary);box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .card-header{background:var(--surface2);border-bottom:1px solid var(--border)}
[data-haut="roehre"][data-theme="dark"] .card-header{background:transparent;border-bottom:1px dashed var(--border)}
[data-haut="roehre"] .card-title,[data-haut="roehre"] .modal-title,[data-haut="roehre"] .settings-section-title{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"] .settings-section-title{background:transparent}
[data-haut="roehre"] .stat-card{border-top:3px solid var(--primary)}
[data-haut="roehre"] .stat-value{font-family:var(--rh-roehre);font-weight:400;font-size:52px;letter-spacing:.02em}
[data-haut="roehre"] .stat-label,[data-haut="roehre"] .mod-tile-lbl,[data-haut="roehre"] .dash-tile-lbl{letter-spacing:.14em}
[data-haut="roehre"] .mod-tile-val{font-family:var(--rh-roehre);font-weight:400;font-size:32px}
[data-haut="roehre"] .dash-tile-ic{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 ───────────────────────────────────────────── */
/* Ein Knopf ohne Art (`class="btn"`) ist im Hub oft die gewählte Hälfte eines Umschalters (die andere
   trägt btn-ghost) – ohne Regel malt der Browser ihn grau. Hier: eine gedrückte Taste, nachts ein
   gefülltes Feld. Über :where() ohne Gewicht, damit jede Regel der Seite für einen Knopf vorgeht. */
[data-haut="roehre"] :where(.btn){background:var(--rh-gehaeuse-2);color:var(--text);box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 70%,transparent),inset -1px -1px 0 var(--rh-fase-hell)}
[data-haut="roehre"]:where([data-theme="dark"]) :where(.btn){background:rgba(61,255,127,.16);color:var(--primary);box-shadow:inset 0 0 0 1px var(--rh-phosphor-dim)}
[data-haut="roehre"] .btn{border-radius:2px;letter-spacing:.02em;font-weight:500;transition:background .1s,color .1s}
[data-haut="roehre"] .btn:active{transform:translate(1px,1px)}
[data-haut="roehre"] .btn-primary,[data-haut="roehre"] .btn-secondary,[data-haut="roehre"] .btn-success,[data-haut="roehre"] .btn-danger,[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"] .drs-seg button.an,[data-haut="roehre"] .drs-fertig{background:var(--haut-haupt);color:var(--haut-haupt-txt)}
[data-haut="roehre"] .btn-primary:hover,[data-haut="roehre"] .drs-fertig:hover{background:var(--haut-haupt-hover)}
[data-haut="roehre"] .btn-primary:active,[data-haut="roehre"] .btn-secondary:active{box-shadow:inset 1px 1px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.2)}
[data-haut="roehre"] .btn-ghost,[data-haut="roehre"] .row-btn,[data-haut="roehre"] .pp-mini-btn,[data-haut="roehre"] .fulf-rowbtn,[data-haut="roehre"] .modal-close{background:var(--haut-knopf);border:1px solid var(--rh-fase-dunkel);border-radius:2px;color:var(--text);box-shadow:inset 1px 1px 0 var(--rh-fase-hell),inset -1px -1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 50%,transparent)}
[data-haut="roehre"] .btn-ghost:hover,[data-haut="roehre"] .row-btn:hover,[data-haut="roehre"] .pp-mini-btn:hover{background:var(--haut-knopf-hover);color:var(--text);border-color:var(--primary)}
[data-haut="roehre"] .btn-ghost:active,[data-haut="roehre"] .row-btn:active{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"][data-theme="dark"] .btn-primary,[data-haut="roehre"][data-theme="dark"] .btn-secondary,[data-haut="roehre"][data-theme="dark"] .btn-success,[data-haut="roehre"][data-theme="dark"] .btn-danger,[data-haut="roehre"][data-theme="dark"] .drs-seg button.an,[data-haut="roehre"][data-theme="dark"] .drs-fertig{box-shadow:var(--haut-leuchte);text-shadow:none;color:#021407}
[data-haut="roehre"][data-theme="dark"] .btn-ghost,[data-haut="roehre"][data-theme="dark"] .row-btn,[data-haut="roehre"][data-theme="dark"] .pp-mini-btn,[data-haut="roehre"][data-theme="dark"] .fulf-rowbtn,[data-haut="roehre"][data-theme="dark"] .modal-close{background:transparent;border-color:var(--rh-phosphor-dim);color:var(--primary);box-shadow:none}
[data-haut="roehre"][data-theme="dark"] .btn-ghost:hover,[data-haut="roehre"][data-theme="dark"] .row-btn:hover,[data-haut="roehre"][data-theme="dark"] .pp-mini-btn:hover,[data-haut="roehre"][data-theme="dark"] .modal-close:hover{background:var(--primary);color:#021407;border-color:var(--primary);text-shadow:none}
[data-haut="roehre"] .subtab-btn,[data-haut="roehre"] .tab-btn{letter-spacing:.04em;font-size:12.5px;font-weight:500}
[data-haut="roehre"] .subtab-btn.active,[data-haut="roehre"] .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Eingaben: hell eingelassen, nachts schwarz mit Phosphorrand ───────────────────────────── */
[data-haut="roehre"] .finput,[data-haut="roehre"] .fselect,[data-haut="roehre"] .ftextarea,[data-haut="roehre"] .form-control{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"] .ftextarea,[data-haut="roehre"][data-theme="dark"] .form-control{background:#000;border-color:var(--border);box-shadow:none}
[data-haut="roehre"] .finput:focus,[data-haut="roehre"] .fselect:focus,[data-haut="roehre"] .ftextarea:focus,[data-haut="roehre"] .form-control:focus{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"] .ftextarea:focus,[data-haut="roehre"][data-theme="dark"] .form-control:focus{box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .form-label,[data-haut="roehre"] .flabel{letter-spacing:.12em;font-size:10.5px;font-weight:500;text-transform:uppercase}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────── */
[data-haut="roehre"] .pill-tag,[data-haut="roehre"] .dt-chip,[data-haut="roehre"] .sbadge{border-radius:2px}
[data-haut="roehre"] .nbadge{background:var(--secondary);color:#fff;border-radius:2px}
[data-haut="roehre"][data-theme="dark"] .nbadge{color:#241603;text-shadow:none;box-shadow:0 0 8px color-mix(in srgb,var(--secondary) 55%,transparent)}

/* ── Schwebende Schichten: Fenster mit Titelleiste ─────────────────────────────────────────── */
[data-haut="roehre"] .modal-overlay,[data-haut="roehre"] .drs-overlay{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{background:rgba(0,0,0,.72)}
[data-haut="roehre"] .modal,[data-haut="roehre"] .drs-modal,[data-haut="roehre"] #profile-panel,[data-haut="roehre"] #meld-panel{background:var(--surface);border:2px solid var(--rh-tinte);border-radius:3px;box-shadow:var(--haut-kante),var(--haut-schatten-tief)}
/* hell: die Titelleiste ist ein Stück Bildschirm. Viele Fenster bauen ihren Kopf selbst (Titel als <span>,
   Kreuz mit color:inherit, Unterzeilen in --text-dim) – deshalb werden im Kopf die Token selbst
   umgelegt, dann folgt jedes Element darin von allein. */
[data-haut="roehre"] .modal-header,[data-haut="roehre"] .pp-head{background-color:var(--rh-schirm);background-image:var(--rh-zeilen);border-bottom:2px solid var(--rh-tinte);
  --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);color:var(--text)}
[data-haut="roehre"] .modal-header .modal-title{color:var(--rh-schirm-txt);text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .modal-header .modal-close{background:transparent;color:var(--rh-schirm-txt);border-color:color-mix(in srgb,var(--rh-schirm-txt) 40%,transparent);box-shadow:none}
[data-haut="roehre"] .modal-header .modal-close:hover{background:var(--rh-schirm-txt);color:var(--rh-schirm)}
[data-haut="roehre"] .modal-footer{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"] #profile-panel,[data-haut="roehre"][data-theme="dark"] #meld-panel{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"] .pp-head{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}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-title{color:var(--primary)}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-close{color:var(--primary);border-color:var(--rh-phosphor-dim)}
[data-haut="roehre"][data-theme="dark"] .modal-header .modal-close:hover{background:var(--primary);color:#021407}
[data-haut="roehre"] .pp-row.clickable:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)}
[data-haut="roehre"] .pp-div{background:var(--border)}
[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-kopf b{font-family:var(--rh-roehre);font-weight:400;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
[data-haut="roehre"] .toast{background:var(--surface);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{background:#020702;border-color:var(--rh-phosphor-dim);border-left-color:var(--primary);box-shadow:var(--haut-leuchte)}

/* ── 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}
[data-haut="roehre"] .login-header{background-color:var(--rh-schirm);background-image:var(--rh-zeilen);border-bottom:2px solid var(--rh-tinte)}
[data-haut="roehre"][data-theme="dark"] .login-header{background-color:#020702;border-bottom:1px dashed var(--rh-phosphor-dim)}
[data-haut="roehre"] .login-logo{color:var(--htx)}
[data-haut="roehre"] .login-sub{color:var(--htx);opacity:.55}
[data-haut="roehre"] .login-err{border-radius:2px}
[data-haut="roehre"] .login-pk{border-radius:2px}

/* ── Sonstiges aus dem gemeinsamen CSS ─────────────────────────────────────────────────────── */
[data-haut="roehre"] .pp-track.on{background:var(--primary)}
[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, Uhr: Zeichensatz des Terminals, glimmend. */
[data-haut="roehre"] .logo-main,[data-haut="roehre"] .logo-main-hdr,[data-haut="roehre"] .login-logo{font-family:var(--rh-roehre);font-weight:400;font-size:30px;letter-spacing:.08em;color:var(--htx);text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] .login-logo{font-size:38px}
[data-haut="roehre"] .hclock{font-family:var(--rh-roehre);font-size:20px;letter-spacing:.08em;text-shadow:var(--rh-glimmen)}
/* 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. */
[data-haut="roehre"] .logo-main::after,[data-haut="roehre"] .login-logo::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"] .login-logo::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{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,[data-haut="roehre"][data-theme="dark"] .mod-tile-val{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. */
[data-haut="roehre"][data-theme="dark"] body::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. */
[data-haut="roehre"] body::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"] .logo-main::after,[data-haut="roehre"] .login-logo::after{animation:none}
  [data-haut="roehre"] .btn{transition:none}
}

/* ══ Mobile App (frontend/app/, eigene Klassen und Token – docs/pwa_neubau_konzept.md) ═══════
   Dieselbe Palette, dieselbe Fase. Die App setzt ihre Schrift über --schrift/--mono. */
html[data-haut="roehre"]{
  --schrift:var(--rh-schrift);--mono:var(--rh-schrift);
  --primary-soft:rgba(23,100,122,.12);--on-primary:#f4fbfc;
  --border-soft:rgba(19,34,43,.12);--text-faint:#8d9390;
  --success-soft:rgba(46,122,60,.13);--warning-soft:rgba(168,112,15,.15);--danger-soft:rgba(179,53,43,.12);
  --leiste-bg:var(--rh-gehaeuse-2);--kopf-bg:var(--rh-schirm);
  --shadow-1:var(--rh-schlag);--shadow-2:var(--haut-schatten-tief);
  --skelett:linear-gradient(90deg,var(--rh-gehaeuse-2) 25%,var(--rh-karte) 40%,var(--rh-gehaeuse-2) 55%);
}
html[data-haut="roehre"][data-theme="dark"]{
  --primary-soft:rgba(61,255,127,.14);--on-primary:#021407;
  --border-soft:rgba(61,255,127,.12);--text-faint:#3f7049;
  --success-soft:rgba(61,255,127,.14);--warning-soft:rgba(255,179,71,.16);--danger-soft:rgba(255,95,82,.16);
  --leiste-bg:#020602;--kopf-bg:#020602;
  --shadow-1:none;
  --skelett:linear-gradient(90deg,#061009 25%,#0d1f12 40%,#061009 55%);
}
/* Kopf der App (und der Theke, die dieselbe Klasse trägt): ein Stück Bildschirm – Token darin umgelegt wie
   in der Titelleiste der Fenster. */
[data-haut="roehre"] .kopf{background-color:var(--kopf-bg);background-image:var(--rh-zeilen);border-bottom:2px solid var(--rh-tinte);
  --text:var(--rh-schirm-txt);--text-dim:var(--rh-schirm-dim);--primary:var(--rh-schirm-txt);--border:rgba(159,230,238,.3);--haut-rand: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);color:var(--text)}
[data-haut="roehre"][data-theme="dark"] .kopf{border-bottom:1px solid #1c4227;
  --text:#a8f5b8;--text-dim:#5a9a68;--primary:var(--rh-phosphor);--border:#1c4227;--haut-rand:#1c4227;--surface:#061009;--surface2:#0b1a0f;--haut-knopf:transparent;--haut-knopf-hover:rgba(61,255,127,.10)}
[data-haut="roehre"] .kopf .kopf-titel,[data-haut="roehre"] .kopf .kopf-knopf{color:var(--htx)}
[data-haut="roehre"] .kopf-titel{font-family:var(--rh-roehre);font-weight:400;font-size:24px;letter-spacing:.06em;text-transform:uppercase;text-shadow:var(--rh-glimmen)}
[data-haut="roehre"] h1.titel,[data-haut="roehre"] .wortmarke{font-family:var(--rh-roehre);font-weight:400;letter-spacing:.04em}
[data-haut="roehre"] h1.titel{font-size:38px}
[data-haut="roehre"] .leiste{background:var(--leiste-bg);border-top:2px solid var(--border)}
[data-haut="roehre"][data-theme="dark"] .leiste{border-top:1px solid var(--border)}
[data-haut="roehre"] .karte,[data-haut="roehre"] .liste,[data-haut="roehre"] .kachel,[data-haut="roehre"] .menue-eintrag{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"] .karte,[data-haut="roehre"][data-theme="dark"] .liste,[data-haut="roehre"][data-theme="dark"] .kachel,[data-haut="roehre"][data-theme="dark"] .menue-eintrag{border-radius:0;box-shadow:none}
[data-haut="roehre"] .karte.flach{box-shadow:var(--haut-kante)}
[data-haut="roehre"] .karte.akzent{background-color:var(--rh-schirm);background-image:var(--rh-zeilen);color:var(--rh-schirm-txt);border-color:var(--rh-tinte)}
[data-haut="roehre"][data-theme="dark"] .karte.akzent{background:var(--primary);color:#021407;text-shadow:none;box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .zeile{border-bottom-color:var(--border-soft)}
[data-haut="roehre"] .zeile:active{background:var(--primary-soft)}
[data-haut="roehre"] .knopf{border-radius:2px;background:var(--haut-haupt);color:var(--haut-haupt-txt);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"][data-theme="dark"] .knopf{box-shadow:var(--haut-leuchte);text-shadow:none}
[data-haut="roehre"] .knopf.zweit{background:var(--haut-knopf);color:var(--text);border:1px solid var(--rh-fase-dunkel);box-shadow:inset 1px 1px 0 var(--rh-fase-hell),inset -1px -1px 0 color-mix(in srgb,var(--rh-fase-dunkel) 50%,transparent)}
[data-haut="roehre"][data-theme="dark"] .knopf.zweit{background:transparent;color:var(--primary);border-color:var(--rh-phosphor-dim);box-shadow:none}
[data-haut="roehre"] .knopf.still{background:transparent;color:var(--primary);box-shadow:none;border:none}
[data-haut="roehre"] .knopf.gefahr{background:var(--danger);color:#fff}
[data-haut="roehre"] .knopf.gefahr.zweit{background:var(--danger-soft);color:var(--danger);box-shadow:none;border:none}
[data-haut="roehre"] .chip{border-radius:2px;background:var(--haut-knopf);border-color:var(--rh-fase-dunkel);box-shadow:inset 1px 1px 0 var(--rh-fase-hell)}
[data-haut="roehre"][data-theme="dark"] .chip{background:transparent;border-color:var(--border);box-shadow:none}
[data-haut="roehre"] .chip.aktiv{background:var(--haut-haupt);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:none;text-shadow:none}
[data-haut="roehre"] .eingabe,[data-haut="roehre"] .auswahl,[data-haut="roehre"] .textfeld{background:#fffdf8;border-color: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"] .eingabe,[data-haut="roehre"][data-theme="dark"] .auswahl,[data-haut="roehre"][data-theme="dark"] .textfeld{background:#000;border-color:var(--border);box-shadow:none}
[data-haut="roehre"] .sheet-hintergrund{background:rgba(19,34,43,.38)}
[data-haut="roehre"][data-theme="dark"] .sheet-hintergrund{background:rgba(0,0,0,.72)}
[data-haut="roehre"] .sheet{background:var(--surface);border:2px solid var(--rh-tinte);border-bottom:none;border-radius:6px 6px 0 0;box-shadow:var(--haut-schatten-tief)}
[data-haut="roehre"][data-theme="dark"] .sheet{background:#020702;border:4px double var(--rh-phosphor-dim);border-bottom:none;border-radius:0}
[data-haut="roehre"] .toast{background:var(--surface);color:var(--text);border:1px solid var(--rh-tinte);border-radius:2px;box-shadow:var(--haut-schatten-tief)}
[data-haut="roehre"] .anmeldung-logo{border-radius:3px;background-color:var(--rh-schirm);background-image:var(--rh-zeilen);box-shadow:var(--rh-schlag)}
[data-haut="roehre"][data-theme="dark"] .anmeldung-logo{background:var(--primary);box-shadow:var(--haut-leuchte)}
[data-haut="roehre"] .anmeldung,[data-haut="roehre"] .splash{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse)}
[data-haut="roehre"] .schalter[aria-checked="true"]{background:var(--primary)}
[data-haut="roehre"] .abzeichen{border-radius:2px}