/*
 * static/haut/reinraum.css – die Haut „Reinraum" für den Marketing 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 … Gleichzeitig mach das neue Theme dann auch für den Office Hub und für den
 * Marketing Hub verfügbar."
 * Geboren im Production Hub; diese Datei ist die Fassung für die Klassen des Marketing Hubs. Die
 * Geschwister – Office Hub static/haut/reinraum.css, Production Hub static/haut/reinraum.css – tragen
 * dieselben Token und dieselben Muster, nur die Selektoren sind andere. Wer hier einen Wert ändert,
 * ändert ihn dort mit.
 *
 * 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-berry.css (diffbar gehalten), dazu am Ende „Reinraum-Handschrift".
 *
 * Bewusst nicht umgefärbt: die Chat-Pille (#mc-btn, kupfern wie im Office), die Signage-Designstation,
 * Diagrammfarben und die Vorschauen von Beiträgen (die zeigen, was draußen ankommt, nicht die Oberfläche).
 */

/* ── 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="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);--hover:rgba(11,114,133,.07);
  --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-haupt-schatten: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);
  --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);--hover:rgba(255,255,255,.06);
  --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-haupt-schatten:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(79,195,214,.18);
  --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"] body.im-rahmen{background:transparent}
[data-haut="reinraum"] h1,[data-haut="reinraum"] h2{color:var(--text)}

/* ── Kopf: Glas statt Fläche ───────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] #topbar{background-color: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"] body.im-rahmen #topbar{background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"] .tb-logo:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="reinraum"] .tb-logo .tb-mark{background:var(--haut-haupt);box-shadow:var(--haut-haupt-schatten)}
[data-haut="reinraum"] .tb-logo .tb-txt{color:var(--primary);letter-spacing:3px}
[data-haut="reinraum"] .tb-logo .tb-txt small{letter-spacing:.2em}
[data-haut="reinraum"] .tb-title{color:var(--primary)}
[data-haut="reinraum"] .backlink:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="reinraum"] .theme-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"][data-theme="dark"] .theme-btn,[data-haut="reinraum"][data-theme="dark"] .meld-btn{border-color:var(--haut-rand)}
[data-haut="reinraum"] .theme-btn:hover,[data-haut="reinraum"] .meld-btn:hover{background:var(--haut-knopf-hover);color:var(--text)}
[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"] .meld-head{background:rgba(255,255,255,.3);border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"][data-theme="dark"] .meld-head{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .tb-av{border-color:var(--haut-rand);box-shadow:0 2px 8px rgba(27,35,43,.15)}
[data-haut="reinraum"] .tb-profile:hover .tb-av{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
/* Nachts ist der Akzent ein helles Cyan – weiße Initialen und das weiße M im Logo verlören darauf den
   Kontrast. Beides bekommt dann die dunkle Schrift der Hauptknöpfe. */
[data-haut="reinraum"][data-theme="dark"] .tb-av{color:var(--haut-haupt-txt)}
[data-haut="reinraum"][data-theme="dark"] .tb-mark svg{stroke:var(--haut-haupt-txt)}
[data-haut="reinraum"][data-theme="dark"] .tb-mark svg circle{fill:var(--haut-haupt-txt)}

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

/* ── Seitenleiste ──────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] #snav{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 .brand{color:var(--primary);letter-spacing:3px}
[data-haut="reinraum"] .nav-tab{transition:background .15s,color .15s,box-shadow .15s}
[data-haut="reinraum"] .nav-tab:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante),0 1px 3px rgba(27,35,43,.06)}
[data-haut="reinraum"] .nav-tab.active,[data-haut="reinraum"] .nav-tab.active:hover{background:var(--haut-haupt);color:var(--haut-haupt-txt);box-shadow:var(--haut-haupt-schatten)}

/* ── Karten, Kennzahlen, Bildkarten ────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .card,[data-haut="reinraum"] .stat-card,[data-haut="reinraum"] .mcard,[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)}
/* Dashboard: Kennzahl-Kacheln und Pillen im Kopf */
[data-haut="reinraum"] .dash-kpi{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"] .dash-kpi.klick: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"] .dash-pille{background:var(--haut-knopf);border-color:rgba(27,35,43,.10);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .dash-pille{border-color:var(--haut-rand)}
[data-haut="reinraum"] .dash-top,[data-haut="reinraum"] .dash-chip{background:rgba(255,255,255,.4);border-color:var(--haut-rand)}
[data-haut="reinraum"][data-theme="dark"] .dash-top,[data-haut="reinraum"][data-theme="dark"] .dash-chip{background:rgba(255,255,255,.04)}
[data-haut="reinraum"] .dash-zeile:hover{background:rgba(255,255,255,.4)}
[data-haut="reinraum"][data-theme="dark"] .dash-zeile:hover{background:rgba(255,255,255,.05)}
[data-haut="reinraum"] .mcard: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-title,[data-haut="reinraum"] .modal-title{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.01em;text-transform:none;font-size:15px;color:var(--text)}
[data-haut="reinraum"] #upd-banner{background:var(--haut-glas);border-color:var(--haut-rand);border-left:4px solid var(--primary);box-shadow:var(--haut-kante),0 1px 3px rgba(27,35,43,.06)}
[data-haut="reinraum"] .bl-thumb{border-color:var(--haut-rand);background:var(--surface2)}

/* ── 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);font-variant-numeric:tabular-nums}
[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: gebürsteter Stahl, Kante oben ─────────────────────────────────────────────────── */
[data-haut="reinraum"] .btn{border-radius:9px;letter-spacing:.2px;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);transition:background .15s,box-shadow .15s,transform .08s}
[data-haut="reinraum"][data-theme="dark"] .btn{border-color:var(--haut-rand)}
[data-haut="reinraum"] .btn:hover{background:var(--haut-knopf-hover);border-color:var(--rr-moos)}
[data-haut="reinraum"] .btn-primary,[data-haut="reinraum"] .btn-primary:hover,[data-haut="reinraum"] .drs-seg button.an{background:var(--haut-haupt);border-color:transparent;color:var(--haut-haupt-txt);box-shadow:var(--haut-haupt-schatten)}
[data-haut="reinraum"] .btn-primary:hover{background:var(--haut-haupt-hover)}
[data-haut="reinraum"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
[data-haut="reinraum"] .btn-ghost:hover{background:var(--haut-glas-d);box-shadow:var(--haut-kante)}
[data-haut="reinraum"][data-theme="dark"] .btn-ghost{border-color:transparent}
/* Newsletter-Wizard: aktiver Schritt, gewählter Chip, Kennzeichen „an" – auf Primär mit der Schrift der
   Hauptknöpfe, nachts also dunkel auf hellem Cyan statt weiß. */
[data-haut="reinraum"] .wpill.active,[data-haut="reinraum"] .chip.sel,[data-haut="reinraum"] .badge.on{background:var(--haut-haupt);border-color:transparent;color:var(--haut-haupt-txt);box-shadow:var(--haut-haupt-schatten)}
[data-haut="reinraum"] .wpill.active .num{color:var(--haut-haupt-txt)}
[data-haut="reinraum"] .wpill{background:var(--haut-knopf);border-color:rgba(27,35,43,.10);box-shadow:var(--haut-kante),0 1px 2px rgba(27,35,43,.06)}
[data-haut="reinraum"][data-theme="dark"] .wpill{border-color:var(--haut-rand)}
[data-haut="reinraum"] .subtabs{border-bottom-color:var(--haut-rand)}
[data-haut="reinraum"] .subtab{font-family:'Inter',sans-serif;letter-spacing:0;font-size:12.5px;font-weight:600}
[data-haut="reinraum"] .subtab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Eingaben ──────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .finput,[data-haut="reinraum"] .fselect,[data-haut="reinraum"] textarea.finput{background:rgba(255,255,255,.6);border:1px solid var(--rr-linie);border-radius:10px;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"] textarea.finput{background:rgba(255,255,255,.06);border-color:var(--haut-rand)}
[data-haut="reinraum"] .finput:focus,[data-haut="reinraum"] .fselect:focus,[data-haut="reinraum"] textarea.finput:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
[data-haut="reinraum"] .flabel{font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;font-size:10px;font-weight:500;text-transform:uppercase}
[data-haut="reinraum"] .mh-switch span{background:rgba(27,35,43,.18)}
[data-haut="reinraum"] .mh-switch input:checked+span{background:var(--primary)}
[data-haut="reinraum"] input[type="checkbox"],[data-haut="reinraum"] input[type="radio"],[data-haut="reinraum"] input[type="range"]{accent-color:var(--primary)}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] .tagpill{background:var(--haut-knopf);border-color:rgba(27,35,43,.12);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"] .tagpill{border-color:var(--haut-rand);box-shadow:var(--haut-kante)}

/* ── Schwebende Schichten: Modal, Profil, Darstellung, Chat-Fenster, Toast ────────────────── */
[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"] #pp-lokal,[data-haut="reinraum"] .drs-modal,[data-haut="reinraum"] #mc-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-item:hover,[data-haut="reinraum"] .drs-karte:hover{background:rgba(255,255,255,.35)}
[data-haut="reinraum"][data-theme="dark"] .pp-item:hover,[data-haut="reinraum"][data-theme="dark"] .drs-karte:hover{background:rgba(255,255,255,.05)}
[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,[data-haut="reinraum"] .drs-haken{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);color:var(--text);border:1px solid var(--haut-rand);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)}

/* ── Sonstiges ─────────────────────────────────────────────────────────────────────────────── */
[data-haut="reinraum"] ::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
[data-haut="reinraum"] ::-webkit-scrollbar-thumb{background:rgba(27,35,43,.18);border-radius:8px}
[data-haut="reinraum"][data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(79,195,214,.22)}

/* ── Reinraum-Handschrift ──────────────────────────────────────────────────────────────────── */
/* Leiterbahn als Unterkante des Kopfs: in der Mitte am hellsten, zu den Rändern verlaufend.
   Liegt als Hintergrundbild über der Glasfarbe (deshalb oben background-color statt background). */
[data-haut="reinraum"] #topbar{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"] body.im-rahmen #topbar{background-image:none}
/* 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-kpi{
  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,[data-haut="reinraum"] .dash-kpi{border-top:2px solid var(--primary)}
[data-haut="reinraum"] .stat-value,[data-haut="reinraum"] .dash-mini .m-v,[data-haut="reinraum"] .dash-konto .k-v{font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.02em}
[data-haut="reinraum"] .stat-label,[data-haut="reinraum"] .dash-tag,[data-haut="reinraum"] .dash-mini .m-l{letter-spacing:.16em}
/* 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"] .nav-tab.active{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"] .meld-badge{background:var(--secondary);color:#fff;font-weight:500;border-color:var(--rr-karte)}
[data-haut="reinraum"][data-theme="dark"] .meld-badge{color:#241603;border-color:var(--bg);box-shadow:0 0 8px color-mix(in srgb,var(--secondary) 55%,transparent)}
[data-haut="reinraum"] .ft-text{font-variant-numeric:tabular-nums}

/* 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"] .nav-tab{transition:none}}