/*
 * static/haut/reinraum.css – die Haut „Reinraum" für den ganzen Office Hub.
 *
 * Michael, 24.09.2026: „Für den Production Hub ein neues Theme in einer sehr modernen macOS-Glas-Optik
 * – sehr technisch, gern mit Elektronik- oder Maschinenbauteilen, hochwertige Farben: Edelstahl,
 * Elektronik, Reinraum … und das neue Theme auch im Office Hub und im Marketing Hub verfügbar machen."
 * Geboren im Production Hub; diese Datei ist die Fassung für die Klassen des Office Hubs. Die
 * Geschwister (PH, MH) tragen dieselben Token und dieselben Muster – nur die Selektoren sind andere.
 *
 * Die Idee in zwei Erscheinungsbildern:
 *   hell   = Reinraum. Gebürsteter Edelstahl als Grund (feiner Längsschliff, ein breiter Glanz), darauf
 *            das Deckenraster eines Reinraums und blasse Leiterbahnen. Glas kühl-weiß, Schrift Graphit,
 *            Akzent ein tiefes Signalcyan, Meldeleuchten in Bernstein.
 *   dunkel = Leiterplatte bei Nacht. Eloxiertes Graphit, Leiterbahnen in Cyan mit Lötaugen in Kupfer,
 *            Glas rauchig, Akzent ein helles Cyan, das auf Knöpfen ganz leicht leuchtet.
 * Technische Handschrift: Kennzahlen in IBM Plex Mono (Tabellenziffern), Beschriftungen in Mono-
 * Versalien, eine Leuchtdiode vor Kartentiteln, Passermarken in den Ecken der Karten, eine Leiterbahn
 * als Unterkante des Kopfs. Glas, Kante oben, zwei Schatten und Blur mit Maß wie bei Virtual Nature.
 *
 * Alles hier steht unter [data-haut="reinraum"] am <html> (Mechanik: static/haut/haut.js). Aufbau wie
 * virtual-nature.css (diffbar gehalten), dazu am Ende „Reinraum-Handschrift".
 *
 * Bewusst nicht umgefärbt: Aufgaben (--as-*), Dienstplan (--dp-*), BAX, Aura-Kachel,
 * GF-/Gaming-Center-Einträge – eigene Farbwelten mit Absicht.
 */

/* ── 1. Token ──────────────────────────────────────────────────────────────────────────────── */
/* `html[…]`, nicht `[…]`: die Token-Blöcke in index.html/settings.html (`:root,[data-theme]`) stehen
   HINTER dieser Datei und hätten bei gleicher Spezifität das letzte Wort. */
html[data-haut="reinraum"]{
  --rr-stahl:#e6eaed;--rr-karte:#f7f9fa;--rr-nebel:#dde3e7;--rr-linie:#c9d1d7;--rr-moos:#7fa7b3;--rr-wald:#0b7285;--rr-wald-d:#095d6d;
  --rr-himmel:#d7e6ec;--rr-sand:#e9e4da;--rr-rinde:#1b232b;--rr-stein:#5f6c77;--rr-bernstein:#c98410;--rr-kupfer:#b8743a;
  --bg:var(--rr-stahl);--bg2:var(--rr-nebel);
  --surface:rgba(248,250,251,.88);--surface2:rgba(221,227,231,.55);--bg-card:var(--surface);--bg-secondary:var(--surface2);
  --border:var(--rr-linie);--text:var(--rr-rinde);--text-dim:var(--rr-stein);
  --primary:var(--rr-wald);--primary-h:var(--rr-wald-d);--secondary:var(--rr-bernstein);--secondary-h:#a86d0c;
  --success:#1f8a5b;--warning:#b7791f;--danger:#c23a3a;
  --shadow:rgba(27,35,43,.10);
  --hbg:rgba(240,243,245,.72);--htx:var(--rr-rinde);
  /* Glas */
  --haut-glas:rgba(248,250,251,.70);--haut-glas-d:rgba(248,250,251,.88);
  --haut-kante:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(27,35,43,.05),inset 0 0 0 1px rgba(255,255,255,.35);
  --haut-schatten:0 1px 2px rgba(27,35,43,.07),0 10px 30px rgba(27,35,43,.10);
  --haut-schatten-tief:0 2px 6px rgba(27,35,43,.09),0 24px 60px rgba(27,35,43,.18);
  --haut-blur:blur(20px) saturate(1.25);
  --haut-rand:rgba(255,255,255,.75);
  /* Knopf aus gebürstetem Stahl: heller Verlauf, darüber feiner Längsschliff */
  --haut-knopf:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,rgba(27,35,43,.015) 1px 3px),linear-gradient(180deg,#fdfefe,#e3e8ec);
  --haut-knopf-hover:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,rgba(27,35,43,.015) 1px 3px),linear-gradient(180deg,#fff,#d9e3e8);
  --haut-haupt:linear-gradient(180deg,#1591a6,var(--rr-wald));
  --haut-haupt-hover:linear-gradient(180deg,#128499,var(--rr-wald-d));
  --haut-haupt-txt:#fff;
  --haut-leuchte:0 0 0 rgba(0,0,0,0);
  --rr-marke:rgba(27,35,43,.28);
  /* Grund: Leiterbahnen (240er Kachel), Deckenraster (48er), breiter Glanz, feiner Längsschliff */
  --haut-flecken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%230b7285' stroke-opacity='.11' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h70l20-20h70M50 113v47l-20 20v60M30 0v12M240 150h-50l-20 20h-60l-15 15v22M0 150h14M135 0v25M135 240v-14M178 90v-6M186 90v-6M194 90v-6M202 90v-6M178 116v6M186 116v6M194 116v6M202 116v6'/%3E%3Crect x='170' y='90' width='40' height='26' rx='2'/%3E%3Cg stroke-opacity='.16'%3E%3Ccircle cx='50' cy='110' r='3'/%3E%3Ccircle cx='30' cy='15' r='3'/%3E%3Ccircle cx='95' cy='210' r='3'/%3E%3Ccircle cx='17' cy='150' r='3'/%3E%3Ccircle cx='135' cy='28' r='3'/%3E%3Ccircle cx='135' cy='223' r='3'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(rgba(27,35,43,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,35,43,.035) 1px,transparent 1px),linear-gradient(115deg,rgba(255,255,255,.6) 0%,transparent 32%,rgba(255,255,255,.38) 52%,transparent 74%,rgba(255,255,255,.25) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,rgba(27,35,43,.012) 1px 3px);
  --haut-flecken-groesse:240px 240px,48px 48px,48px 48px,auto,auto;
  color-scheme:light;
}
/* Nacht: Leiterplatte. Eloxiertes Graphit, Glas rauchig, Primär ein helles Cyan mit dunkler Schrift. */
html[data-haut="reinraum"][data-theme="dark"]{
  --bg:#0e1317;--bg2:#151c21;
  --surface:rgba(22,29,34,.90);--surface2:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.10);--text:#e3e9ee;--text-dim:#8e9ca7;
  --primary:#4fc3d6;--primary-h:#72d2e1;--secondary:#f0a93b;--secondary-h:#f5bb62;
  --success:#3ecf8e;--warning:#f0b44c;--danger:#f0625a;
  --shadow:rgba(0,0,0,.4);
  --hbg:rgba(14,19,23,.72);--htx:#e3e9ee;
  --haut-glas:rgba(22,29,34,.66);--haut-glas-d:rgba(22,29,34,.86);
  --haut-kante:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.035);
  --haut-schatten:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --haut-schatten-tief:0 2px 6px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.5);
  --haut-rand:rgba(255,255,255,.09);
  --haut-knopf:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  --haut-knopf-hover:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07));
  --haut-haupt:linear-gradient(180deg,#6dd3e3,#3fb3c7);
  --haut-haupt-hover:linear-gradient(180deg,#85dce9,#52bfd2);
  --haut-haupt-txt:#04232b;
  --haut-leuchte:0 0 18px rgba(79,195,214,.28);
  --rr-marke:rgba(79,195,214,.4);
  --haut-flecken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%234fc3d6' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h70l20-20h70M50 113v47l-20 20v60M30 0v12M240 150h-50l-20 20h-60l-15 15v22M0 150h14M135 0v25M135 240v-14M178 90v-6M186 90v-6M194 90v-6M202 90v-6M178 116v6M186 116v6M194 116v6M202 116v6'/%3E%3Crect x='170' y='90' width='40' height='26' rx='2'/%3E%3Cg stroke='%23d08a4a' stroke-opacity='.2'%3E%3Ccircle cx='50' cy='110' r='3'/%3E%3Ccircle cx='30' cy='15' r='3'/%3E%3Ccircle cx='95' cy='210' r='3'/%3E%3Ccircle cx='17' cy='150' r='3'/%3E%3Ccircle cx='135' cy='28' r='3'/%3E%3Ccircle cx='135' cy='223' r='3'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),radial-gradient(60% 45% at 85% 0%,rgba(79,195,214,.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(208,138,74,.07),transparent 70%);
  color-scheme:dark;
}

/* ── 2. Grund, Schrift ─────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] body{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse);background-attachment:fixed}
[data-haut="reinraum"] .main-scroll{background:transparent}

/* ── Kopf: Glas statt Farbfläche, Schrift in Graphit ─────────────────────────────────────────── */
[data-haut="reinraum"] .header{background:var(--hbg);color:var(--htx);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur);border-bottom:1px solid var(--haut-rand);box-shadow:0 1px 0 rgba(27,35,43,.06),0 8px 24px rgba(27,35,43,.05)}
[data-haut="reinraum"] .logo-main,[data-haut="reinraum"] .logo-main-hdr{color:var(--primary);letter-spacing:2px}
/* Das Firmenlogo (hochgeladenes Bild, weiß gezeichnet) wäre auf dem hellen Glas unsichtbar – hell wird es
   schwarz (wie bei Virtual Nature, Michael 16.09.2026), in der Nacht bleibt es weiß. brightness(0)
   macht jede Zeichenfarbe schwarz und lässt die Transparenz stehen. */
[data-haut="reinraum"] .logo-img{filter:brightness(0);opacity:.85}
[data-haut="reinraum"][data-theme="dark"] .logo-img{filter:none;opacity:.9}
[data-haut="reinraum"] .logo-sub,[data-haut="reinraum"] .logo-sub-hdr{color:var(--text-dim);opacity:1}
[data-haut="reinraum"] .pill{background:var(--haut-knopf);color:var(--text);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06);border:1px solid rgba(27,35,43,.08)}
[data-haut="reinraum"] .hclock{opacity:.8;color:var(--text-dim)}
[data-haut="reinraum"] .theme-btn,[data-haut="reinraum"] .back-btn,[data-haut="reinraum"] .meld-btn{background:var(--haut-knopf);color:var(--text);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06);border:1px solid rgba(27,35,43,.08)}
[data-haut="reinraum"] .theme-btn:hover,[data-haut="reinraum"] .back-btn:hover,[data-haut="reinraum"] .meld-btn:hover{background:var(--haut-knopf-hover);color:var(--text)}
/* Glocke: die Grundregel malt sie weiß auf Weiß – im hellen Glas-Kopf unsichtbar. Strich in der Schriftfarbe. */
[data-haut="reinraum"] .meld-btn .meld-stumm-strich{background:currentColor}
[data-haut="reinraum"] .logout-btn{color:var(--text-dim)}
[data-haut="reinraum"] .logout-btn:hover{background:var(--surface2);color:var(--text)}
[data-haut="reinraum"] .profile-av{border-color:var(--haut-rand);box-shadow:0 2px 8px rgba(27,35,43,.15)}
[data-haut="reinraum"] .profile-av:hover{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
[data-haut="reinraum"] .snav-burger{color:var(--text)}
[data-haut="reinraum"] .nav-tab{color:var(--text-dim)}
[data-haut="reinraum"] .header .nav-tab:hover{color:var(--text)}
[data-haut="reinraum"] .header .nav-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Fußzeile ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .footer{background:var(--hbg);border-top:1px solid var(--haut-rand);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .footer-text,[data-haut="reinraum"] .footer-ws,[data-haut="reinraum"] .footer-gear{color:var(--text-dim)}
[data-haut="reinraum"] .footer-gear:hover{color:var(--text);background:var(--surface2)}

/* ── Seitenleiste (index.html: .snav · settings.html: .tab-bar) ───────────────────────────── */
[data-haut="reinraum"] .snav,[data-haut="reinraum"] .tab-bar{background:var(--haut-glas);border-right:1px solid var(--haut-rand);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur);box-shadow:1px 0 0 rgba(27,35,43,.05)}
[data-haut="reinraum"] .snav-search,[data-haut="reinraum"] .nav-search{background:rgba(255,255,255,.55);border-color:var(--haut-rand);box-shadow:inset 0 1px 2px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .snav-search,[data-haut="reinraum"][data-theme="dark"] .nav-search{background:rgba(255,255,255,.06)}
[data-haut="reinraum"] .snav .nav-tab,[data-haut="reinraum"] .tab-bar .tab-btn{border-radius:10px;transition:background .15s,color .15s,box-shadow .15s}
[data-haut="reinraum"] .snav .nav-tab:hover,[data-haut="reinraum"] .tab-bar .tab-btn:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante),0 1px 3px rgba(27,35,43,.06)}
[data-haut="reinraum"] .snav .nav-tab.active,[data-haut="reinraum"] .tab-bar .tab-btn.active,[data-haut="reinraum"] .tab-bar .tab-btn.active:hover{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(11,114,133,.3),0 6px 16px rgba(11,114,133,.25)}
[data-haut="reinraum"] .snav .nav-tab.active .snav-ic,[data-haut="reinraum"] .tab-bar .tab-btn.active .tb-ic{color:var(--haut-haupt-txt)}
[data-haut="reinraum"] .snav .nav-tab.active .nbadge{background:rgba(255,255,255,.28)}
[data-haut="reinraum"] .snav-group,[data-haut="reinraum"] .nav-section{color:var(--text-dim);font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.14em;font-size:10px;text-transform:uppercase}
[data-haut="reinraum"] .snav-collapse-btn{background:var(--haut-knopf);border-color:var(--haut-rand);box-shadow:var(--haut-kante)}
[data-haut="reinraum"] .snav-foot{border-top-color:var(--haut-rand)}
[data-haut="reinraum"] #snav-mob-overlay.show{background:rgba(27,35,43,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ── Karten, Kacheln ───────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .card,[data-haut="reinraum"] .stat-card,[data-haut="reinraum"] .mod-tile,[data-haut="reinraum"] .dash-tile,[data-haut="reinraum"] .kat-tile,[data-haut="reinraum"] .integration-item,[data-haut="reinraum"] .login-box{background-color:var(--haut-glas);border:1px solid var(--haut-rand);border-radius:12px;box-shadow:var(--haut-kante),var(--haut-schatten)}
[data-haut="reinraum"] .stat-card,[data-haut="reinraum"] .mod-tile{border-top-width:3px}
[data-haut="reinraum"] .stat-card[onclick]:hover,[data-haut="reinraum"] .kat-tile:hover{box-shadow:var(--haut-kante),0 2px 4px rgba(27,35,43,.06),0 12px 28px rgba(27,35,43,.10)}
[data-haut="reinraum"] .card-header{background:rgba(255,255,255,.35);border-bottom:1px solid var(--haut-rand)}
[data-haut="reinraum"][data-theme="dark"] .card-header{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .card-title,[data-haut="reinraum"] .modal-title,[data-haut="reinraum"] .settings-section-title{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:15px;color:var(--text)}
[data-haut="reinraum"] .settings-section-title{background:transparent}
[data-haut="reinraum"] .pipeline-stage{background:var(--haut-glas);border-color:var(--haut-rand);box-shadow:var(--haut-kante),0 1px 3px rgba(27,35,43,.06);border-radius:12px}
[data-haut="reinraum"] .pipeline-stage:hover{background:var(--haut-glas-d)}

/* ── Tabellen ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .data-table th{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand);font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;font-size:10px;font-weight:500;text-transform:uppercase}
[data-haut="reinraum"][data-theme="dark"] .data-table th{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .data-table td{border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"] .data-table tbody tr:hover{background:rgba(255,255,255,.35)}
[data-haut="reinraum"][data-theme="dark"] .data-table tbody tr:hover{background:rgba(255,255,255,.05)}

/* ── Knöpfe: flacher Verlauf, Kante oben ───────────────────────────────────────────────────── */
[data-haut="reinraum"] .btn{border-radius:9px;letter-spacing:.2px;transition:background .15s,box-shadow .15s,transform .08s}
[data-haut="reinraum"] .btn-primary,[data-haut="reinraum"] .btn-secondary,[data-haut="reinraum"] .drs-seg button.an{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(11,114,133,.3),0 6px 16px rgba(11,114,133,.22)}
[data-haut="reinraum"] .btn-primary:hover,[data-haut="reinraum"] .btn-secondary:hover{background:var(--haut-haupt-hover)}
[data-haut="reinraum"] .btn-success{background:linear-gradient(180deg,#2aa56f,var(--success));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(31,138,91,.25)}
[data-haut="reinraum"] .btn-danger{background:linear-gradient(180deg,#d65454,var(--danger));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(194,58,58,.25)}
[data-haut="reinraum"] .btn-ghost,[data-haut="reinraum"] .row-btn,[data-haut="reinraum"] .pp-mini-btn,[data-haut="reinraum"] .fulf-rowbtn{background:var(--haut-knopf);border:1px solid rgba(27,35,43,.10);color:var(--text);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06),0 4px 12px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .btn-ghost,[data-haut="reinraum"][data-theme="dark"] .row-btn,[data-haut="reinraum"][data-theme="dark"] .pp-mini-btn{border-color:var(--haut-rand)}
[data-haut="reinraum"] .btn-ghost:hover,[data-haut="reinraum"] .row-btn:hover,[data-haut="reinraum"] .pp-mini-btn:hover{background:var(--haut-knopf-hover);color:var(--text);border-color:var(--rr-moos)}
[data-haut="reinraum"] .subtab-btn,[data-haut="reinraum"] .tab-btn{font-family:'Inter',sans-serif;letter-spacing:0;font-size:12.5px;font-weight:600}
[data-haut="reinraum"] .subtab-btn.active,[data-haut="reinraum"] .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Eingaben ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .finput,[data-haut="reinraum"] .fselect,[data-haut="reinraum"] .ftextarea,[data-haut="reinraum"] .form-control{background:rgba(255,255,255,.6);border:1px solid var(--rr-linie);border-radius:10px;font-family:'Inter',sans-serif;box-shadow:inset 0 1px 2px rgba(27,35,43,.05)}
[data-haut="reinraum"][data-theme="dark"] .finput,[data-haut="reinraum"][data-theme="dark"] .fselect,[data-haut="reinraum"][data-theme="dark"] .ftextarea,[data-haut="reinraum"][data-theme="dark"] .form-control{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="reinraum"] .finput:focus,[data-haut="reinraum"] .fselect:focus,[data-haut="reinraum"] .ftextarea:focus,[data-haut="reinraum"] .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
[data-haut="reinraum"] .form-label,[data-haut="reinraum"] .flabel{font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;font-size:10px;font-weight:500;text-transform:uppercase}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .dt-chip,[data-haut="reinraum"] .sbadge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
[data-haut="reinraum"] .nbadge{background:var(--primary);color:#fff}

/* ── Schwebende Schichten: Modal, Profil-Panel, Darstellung, Toasts ───────────────────────── */
[data-haut="reinraum"] .modal-overlay{background:rgba(27,35,43,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="reinraum"][data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.45)}
[data-haut="reinraum"] .modal{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-radius:20px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .modal-header{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"][data-theme="dark"] .modal-header{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .modal-footer{border-top-color:var(--haut-rand)}
[data-haut="reinraum"] #profile-panel,[data-haut="reinraum"] .drs-modal{background:var(--haut-glas);border:1px solid var(--haut-rand);border-radius:18px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] #meld-panel{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-radius:18px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .pp-head{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"][data-theme="dark"] .pp-head{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .pp-row.clickable:hover,[data-haut="reinraum"] .drs-karte:hover{background:rgba(255,255,255,.35)}
[data-haut="reinraum"][data-theme="dark"] .pp-row.clickable:hover,[data-haut="reinraum"][data-theme="dark"] .drs-karte:hover{background:rgba(255,255,255,.05)}
[data-haut="reinraum"] .pp-div{background:var(--haut-rand)}
[data-haut="reinraum"] .drs-karte{background:var(--haut-glas);border-color:var(--haut-rand);box-shadow:var(--haut-kante),0 1px 3px rgba(27,35,43,.06)}
[data-haut="reinraum"] .drs-karte.an{border-color:var(--primary)}
[data-haut="reinraum"] .drs-overlay{background:rgba(27,35,43,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="reinraum"][data-theme="dark"] .drs-overlay{background:rgba(0,0,0,.45)}
[data-haut="reinraum"] .drs-fertig{background:var(--haut-haupt);color:var(--haut-haupt-txt)}
[data-haut="reinraum"] .drs-seg{background:rgba(255,255,255,.5);border-color:rgba(27,35,43,.12);box-shadow:inset 0 1px 2px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .drs-seg{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="reinraum"] .toast{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-left-width:4px;border-radius:14px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}

/* ── Anmeldung ─────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .login-overlay{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse)}
[data-haut="reinraum"] .login-box{border-radius:22px;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .login-header{background:linear-gradient(160deg,var(--rr-himmel),var(--rr-nebel) 60%,#cfd8de)}
[data-haut="reinraum"][data-theme="dark"] .login-header{background:linear-gradient(160deg,#12303a,#172027 65%,#2a2118)}
[data-haut="reinraum"] .login-logo{color:var(--primary);letter-spacing:3px}
[data-haut="reinraum"] .login-sub{color:var(--text-dim)}

/* ── Sonstiges aus dem gemeinsamen CSS ─────────────────────────────────────────────────────── */
[data-haut="reinraum"] .pp-track.on{background:var(--primary)}
[data-haut="reinraum"] .tsm-type-btn.selected{background:var(--haut-glas-d)}
[data-haut="reinraum"] ::selection{background:color-mix(in srgb,var(--primary) 25%,transparent)}
[data-haut="reinraum"] ::-webkit-scrollbar-thumb{background:rgba(27,35,43,.18);border-radius:8px}

/* ── Reinraum-Handschrift ──────────────────────────────────────────────────────────────────── */
/* Leiterbahn als Unterkante des Kopfs: in der Mitte am hellsten, zu den Rändern verlaufend. */
[data-haut="reinraum"] .header,[data-haut="reinraum"] .kopf{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 55%,transparent) 30%,color-mix(in srgb,var(--primary) 55%,transparent) 70%,transparent);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%}
[data-haut="reinraum"] .logo-main,[data-haut="reinraum"] .logo-main-hdr{letter-spacing:3px}
[data-haut="reinraum"] .logo-sub,[data-haut="reinraum"] .logo-sub-hdr{letter-spacing:.2em}
/* Leuchtdiode vor dem Kartentitel – im Hellen ein ruhiger Punkt, nachts glimmt er. */
[data-haut="reinraum"] .card-title::before,[data-haut="reinraum"] .modal-title::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 8px 2px 0;vertical-align:middle;background:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)}
[data-haut="reinraum"][data-theme="dark"] .card-title::before,[data-haut="reinraum"][data-theme="dark"] .modal-title::before{box-shadow:0 0 6px var(--primary),0 0 0 2px color-mix(in srgb,var(--primary) 22%,transparent)}
/* Passermarken: vier feine Winkel in den Ecken – wie auf einer Zeichnung aus dem Maschinenbau. Liegen
   als Hintergrund-Ebenen über der Glasfläche, kosten keine Elemente und bleiben unter dem Inhalt. */
[data-haut="reinraum"] .card,[data-haut="reinraum"] .stat-card,[data-haut="reinraum"] .dash-tile,[data-haut="reinraum"] .kat-tile,[data-haut="reinraum"] .kachel{
  background-image:linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke)),linear-gradient(var(--rr-marke),var(--rr-marke));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;
  background-position:5px 5px,5px 5px,calc(100% - 5px) 5px,calc(100% - 5px) 5px,5px calc(100% - 5px),5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) calc(100% - 5px);
  background-repeat:no-repeat}
/* Kennzahlen: Mono mit Tabellenziffern, Kopfzeile der Kachel als Signalleiste */
[data-haut="reinraum"] .stat-card{border-top:2px solid var(--primary)}
[data-haut="reinraum"] .stat-value{font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.02em}
[data-haut="reinraum"] .stat-label{letter-spacing:.16em}
[data-haut="reinraum"] .card-title,[data-haut="reinraum"] .modal-title{letter-spacing:.01em}
/* Nachts leuchten Hauptknöpfe und der aktive Reiter ganz leicht – wie eine Anzeige hinter Glas. */
[data-haut="reinraum"][data-theme="dark"] .btn-primary,[data-haut="reinraum"][data-theme="dark"] .snav .nav-tab.active,[data-haut="reinraum"][data-theme="dark"] .tab-bar .tab-btn.active,[data-haut="reinraum"][data-theme="dark"] .knopf:not(.zweit):not(.still):not(.gefahr){box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--haut-leuchte)}
/* Meldeleuchten: Zähler in Bernstein, wie eine Status-LED an der Maschine */
[data-haut="reinraum"] .nbadge{background:var(--secondary);color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:500}
[data-haut="reinraum"][data-theme="dark"] .nbadge{color:#241603;box-shadow:0 0 8px color-mix(in srgb,var(--secondary) 55%,transparent)}
[data-haut="reinraum"] .hclock{font-variant-numeric:tabular-nums;letter-spacing:.12em}
[data-haut="reinraum"] ::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
[data-haut="reinraum"][data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(79,195,214,.22)}

/* Ohne Weichzeichner (alte Browser): die Flächen werden dichter, damit nichts durchscheint. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-haut="reinraum"]{--haut-glas:rgba(248,250,251,.96);--haut-glas-d:rgba(248,250,251,.98);--hbg:rgba(240,243,245,.97)}
  html[data-haut="reinraum"][data-theme="dark"]{--haut-glas:rgba(22,29,34,.96);--haut-glas-d:rgba(22,29,34,.98);--hbg:rgba(14,19,23,.97)}
}
/* Wer weniger Bewegung will, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){[data-haut="reinraum"] .btn,[data-haut="reinraum"] .snav .nav-tab{transition:none}}

/* ══ Mobile App (frontend/app/, eigene Klassen und Token – docs/pwa_neubau_konzept.md) ═══════
   Dieselbe Palette, dieselben Glas-Regeln. Kopf und Leiste haben in der App schon Blur; Karten,
   Listen, Kacheln, Menü-Einträge und Blätter bekommen Glasfläche, Kante und Schatten. */
html[data-haut="reinraum"]{
  --primary-soft:rgba(11,114,133,.12);--on-primary:#fff;
  --border-soft:rgba(27,35,43,.10);--text-faint:#96a2ab;
  --success-soft:rgba(31,138,91,.13);--warning-soft:rgba(183,121,31,.15);--danger-soft:rgba(194,58,58,.12);
  --leiste-bg:rgba(248,250,251,.72);--kopf-bg:rgba(240,243,245,.72);
  --shadow-1:var(--haut-schatten);--shadow-2:var(--haut-schatten-tief);
  --skelett:linear-gradient(90deg,var(--rr-nebel) 25%,var(--rr-karte) 40%,var(--rr-nebel) 55%);
}
html[data-haut="reinraum"][data-theme="dark"]{
  --primary-soft:rgba(79,195,214,.16);--on-primary:#04232b;
  --border-soft:rgba(255,255,255,.08);--text-faint:#66737d;
  --success-soft:rgba(62,207,142,.16);--warning-soft:rgba(240,180,76,.16);--danger-soft:rgba(240,98,90,.16);
  --leiste-bg:rgba(14,19,23,.76);--kopf-bg:rgba(14,19,23,.76);
  --skelett:linear-gradient(90deg,#151c21 25%,#1d262c 40%,#151c21 55%);
}
[data-haut="reinraum"] .kopf{background:var(--kopf-bg);border-bottom:1px solid var(--haut-rand);box-shadow:0 1px 0 rgba(27,35,43,.05),0 8px 24px rgba(27,35,43,.05)}
[data-haut="reinraum"] .leiste{background:var(--leiste-bg);border-top:1px solid var(--haut-rand)}
[data-haut="reinraum"] .karte,[data-haut="reinraum"] .liste,[data-haut="reinraum"] .kachel,[data-haut="reinraum"] .menue-eintrag{background:var(--haut-glas);border:1px solid var(--haut-rand);box-shadow:var(--haut-kante),var(--haut-schatten)}
[data-haut="reinraum"] .karte.flach{box-shadow:var(--haut-kante);border-color:var(--haut-rand)}
[data-haut="reinraum"] .karte.akzent{background:var(--haut-haupt);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(11,114,133,.28)}
[data-haut="reinraum"] .zeile{border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"] .zeile:active{background:rgba(255,255,255,.35)}
[data-haut="reinraum"][data-theme="dark"] .zeile:active{background:rgba(255,255,255,.05)}
[data-haut="reinraum"] .knopf{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(11,114,133,.3),0 6px 16px rgba(11,114,133,.22)}
[data-haut="reinraum"] .knopf.zweit{background:var(--haut-knopf);color:var(--text);border:1px solid rgba(27,35,43,.10);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06),0 4px 12px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .knopf.zweit{border-color:var(--haut-rand)}
[data-haut="reinraum"] .knopf.still{background:transparent;color:var(--primary);box-shadow:none}
[data-haut="reinraum"] .knopf.gefahr{background:linear-gradient(180deg,#d65454,var(--danger));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(194,58,58,.25)}
[data-haut="reinraum"] .knopf.gefahr.zweit{background:var(--danger-soft);color:var(--danger);box-shadow:none;border:none}
[data-haut="reinraum"] .chip{background:var(--haut-knopf);border-color:var(--haut-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .chip{box-shadow:var(--haut-kante)}
[data-haut="reinraum"] .chip.aktiv{background:var(--haut-haupt);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
[data-haut="reinraum"] .eingabe,[data-haut="reinraum"] .auswahl,[data-haut="reinraum"] .textfeld{background:rgba(255,255,255,.6);border-color:var(--rr-linie);box-shadow:inset 0 1px 2px rgba(27,35,43,.05)}
[data-haut="reinraum"][data-theme="dark"] .eingabe,[data-haut="reinraum"][data-theme="dark"] .auswahl,[data-haut="reinraum"][data-theme="dark"] .textfeld{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="reinraum"] .sheet-hintergrund{background:rgba(27,35,43,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-haut="reinraum"][data-theme="dark"] .sheet-hintergrund{background:rgba(0,0,0,.45)}
[data-haut="reinraum"] .sheet{background:var(--haut-glas-d);border:1px solid var(--haut-rand);border-bottom:none;box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .toast{background:var(--haut-glas-d);color:var(--text);border:1px solid var(--haut-rand);box-shadow:var(--haut-kante),var(--haut-schatten-tief);backdrop-filter:var(--haut-blur);-webkit-backdrop-filter:var(--haut-blur)}
[data-haut="reinraum"] .anmeldung-logo{background:var(--haut-haupt);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(11,114,133,.28)}
[data-haut="reinraum"] .anmeldung,[data-haut="reinraum"] .splash{background-color:var(--bg);background-image:var(--haut-flecken);background-size:var(--haut-flecken-groesse)}
[data-haut="reinraum"] .schalter[aria-checked="true"]{background:var(--primary)}
[data-haut="reinraum"] .abzeichen{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}