/* ============================================================================ portal-design.css — Zentrale Gestaltungsschicht des Mitarbeiterportals Fassung 2 (2026-07-24) — mit Guard-Klasse ---------------------------------------------------------------------------- Materialkonzept: dunkler Stahl (Buehne) -> Graphitblech (Strukturfelder) -> Rauchglas (Kacheln, Eingaben) -> Neon-Hinterleuchtung (Firmenakzent) ============================================================================ OPT-IN — die wichtigste Eigenschaft dieser Datei ============================================================================ Die Datei darf ueberall als erstes Stylesheet geladen werden. Sie bewirkt NICHTS, solange am nicht die Klasse "pd" steht: -> Design aktiv -> Seite bleibt pixelidentisch Damit ist der Rollout seitenweise steuerbar und jederzeit anhaltbar. Zwei Spezifitaetsebenen, bewusst getrennt: 1. Buehne und Komponenten -> body.pd, .pd-* Normale Spezifitaet. Das ist die Identitaet des Designs, sie soll tragen. 2. Element-Defaults -> :where(body.pd) th { ... } :where() erhoeht die Spezifitaet NICHT. Die Regel wirkt nur auf pd-Seiten, bleibt aber von seitenlokalem CSS ueberschreibbar. Deshalb muss eine Seite beim Umstellen nicht sofort komplett aufgeraeumt sein. NICHT einbinden in: PDF-Erzeuger (dompdf kennt keine CSS-Variablen), Druckansichten, MASTER_Montagebericht (html2pdf klont das sichtbare DOM ins Archiv-PDF). ============================================================================ */ /* ========================================================================== 1 MATERIALIEN — prozedural erzeugt, keine Bilddateien, kein CDN ========================================================================== */ :root{ --pd-rausch-fein:url("data:image/svg+xml;utf8,"); --pd-rausch-grob:url("data:image/svg+xml;utf8,"); --pd-schliff:url("data:image/svg+xml;utf8,"); } /* ========================================================================== 2 TOKENS Ebene 1 = Rohwerte. Ebene 2 = semantische Rollen. Nur Ebene 2 verwenden. ========================================================================== */ :root{ /* --- Ebene 1: Rohwerte --- */ --pd-stahl-900:#15181c; --pd-stahl-800:#1d2126; --pd-stahl-700:#2b3036; --pd-stahl-600:#41474e; --pd-blech-hell:#3b4149; --pd-blech-mittel:#2d3239; --pd-blech-tief:#25292f; --pd-blech-rand:#15181c; /* Status-LED (Abschnitt 7): Grundfarbe + vier handgetunte Stufen je Farbe. Die Stufen sind BEWUSST feste Werte, keine Mischpol-Rechnung: die getunten Toene halten die Saettigung (hell: Gruenkanal 255, tief/rand: Nebentoene staerker entzogen), was eine lineare Weiss-/Schwarz-Mischung nicht trifft (gemessen bis 27/255 Abweichung). */ --pd-led-gruen:#22c55e; --pd-led-amber:#f59e0b; --pd-led-rot:#ef4444; --pd-led-gruen-hell:#8affb9; --pd-led-gruen-tief:#12924a; --pd-led-gruen-rand:#0a5c2f; --pd-led-gruen-kern:#e8fff1; --pd-led-amber-hell:#ffd98a; --pd-led-amber-tief:#b96f04; --pd-led-amber-rand:#7a4802; --pd-led-amber-kern:#fff6e0; --pd-led-rot-hell:#ffa8a8; --pd-led-rot-tief:#b81f1f; --pd-led-rot-rand:#7a1010; --pd-led-rot-kern:#ffecec; /* --- Ebene 2: semantische Rollen --- */ --pd-glas:rgba(11,13,16,.6); --pd-glas-rand:rgba(255,255,255,.16); --pd-glas-rand-licht:rgba(255,255,255,.4); --pd-flaeche-hell:rgba(255,255,255,.12); /* dezente helle Fläche auf Blech (Zähler, Abzeichen) */ --pd-flaeche-hell-stark:color-mix(in srgb, var(--pd-aufhell) 20%, transparent); /* abgestufte helle Fläche für Hover-/Aktivzustände */ --pd-text:#e8ebee; /* Text auf Blech */ --pd-text-leise:#98a1aa; --pd-text-glas:#f3f5f7; /* Text auf/in Glas */ --pd-text-glas-basis:235 240 245; /* Kanaltripel: gedämpfter Glas-Text (leise + Placeholder) */ --pd-text-glas-leise:rgb(var(--pd-text-glas-basis) / .6); /* Akzenttext-Pol (Firmenname, Links). Ersetzt --pd-aufhell an diesen zwei Stellen, damit ein Theme den Textkontrast drehen kann, ohne die 3D-Knopf- Pole zu stören. Default #fff = bisheriges --pd-aufhell → byte-identisch. */ --pd-text-akzent:#fff; /* Tinte für Text AUF einer gefüllten Statusfläche (--pd-ok/--pd-warn/ --pd-fehler/--pd-info als Hintergrund) — dunkles Gegenstück zu --pd-text-akzent (dessen helle Variante auf Neon-Flächen liegt). Wert = heutiger --pd-stahl-900; die 22 direkten stahl-900-Konsumenten werden in einem eigenen Schritt hierher umgehängt → byte-identisch. ACHTUNG Theme: Wer die Statusfarben DUNKEL dreht, muss diese Rolle auf einen HELLEN Wert drehen, sonst steht Dunkel auf Dunkel. */ --pd-text-auf-status:#15181c; /* Trenn-/Tabellenlinienfarbe, unabhängig vom Glanz-Pol. Kanaltripel, Default = --pd-glanz-hell (255 255 255) → byte-identisch. Ein helles Theme setzt sie dunkel, damit Linien nicht auf hellem Grund verschwinden. */ --pd-linie:255 255 255; /* Semantische Flächen: Bühnen-Verlaufsstufen (1 hell/oben … 4 dunkel/unten) und Blech, damit ein Theme NICHT die Rohwerte der Ebene 1 anfassen muss. Eigene Literalwerte (= die heutigen Rohwert-Farben) → byte-identisch und unabhängig von Ebene 1. Sie spiegeln die Rohwerte der Stahl- und Blech- Tokens, die dadurch sonst ungenutzt bleiben. */ --pd-flaeche-buehne-1:#41474e; --pd-flaeche-buehne-2:#2b3036; --pd-flaeche-buehne-3:#1d2126; --pd-flaeche-buehne-4:#15181c; --pd-flaeche-blech-hell:#3b4149; --pd-flaeche-blech-mittel:#2d3239; --pd-flaeche-blech-tief:#25292f; --pd-flaeche-blech-rand:#15181c; /* Eingabe-Fläche + -Rand, getrennt von der Kachel-Glasfläche und vom Glanz-Pol. Eigene Literalwerte (= die heutigen) → byte-identisch. */ --pd-eingabe-fuellung:rgba(11,13,16,.6); --pd-eingabe-rand:rgba(0,0,0,.3); --pd-radius-feld:1.1rem; --pd-radius-kachel:.85rem; --pd-radius-eingabe:.6rem; /* Statusfarben für Text */ --pd-ok:#34d399; --pd-warn:#fbbf24; --pd-fehler:#f87171; --pd-info:#60a5fa; /* neutral-informativ (z. B. „eingereicht, wartet auf Büro") */ --pd-papier:#f5f6f7; /* helle Arbeitsfläche, wo dunkle Tinte gebraucht wird (Unterschrift-Canvas) */ /* Dunkle Tinte auf --pd-papier (Text und Linien im Papierfeld des Urlaubsantrags; wird ausgedruckt und handschriftlich ausgefüllt). Sonderbedingung analog --pd-papier: bleibt in JEDEM Theme dunkel — Papier und Tinte sind ein Paar und dürfen nur gemeinsam gedreht werden. */ --pd-tinte:#15181c; /* Schwach getönte Statusflächen (Box-Hintergründe: Flash, Warnbox, Chips). Fläche = Rolle bei 12 % auf Blech; deckungsgleich mit pd-meldung. Rand/Text bleiben die Vollrolle (--pd-ok etc.). Rein additiv — bestehende Komponenten nutzen sie nicht. NUR fuer firmenUNABHAENGIGE Rollen (Status): Fuer --pd-neon gilt das NICHT — ein in :root gebackenes color-mix(var(--pd-neon) …) friert auf die neutrale Portalfarbe ein (bekannter Fallstrick, s. Kommentar bei den Firmen-Ring-Rollen). */ --pd-ok-schwach: color-mix(in srgb, var(--pd-ok) 12%, transparent); --pd-warn-schwach: color-mix(in srgb, var(--pd-warn) 12%, transparent); --pd-fehler-schwach: color-mix(in srgb, var(--pd-fehler) 12%, transparent); --pd-info-schwach: color-mix(in srgb, var(--pd-info) 12%, transparent); /* Journal-Kategorien (Auftragsportal-Vorgangsverlauf): kategorische Randfarben je Ereignistyp. Firm-UNABHÄNGIG (eine Kategorie behält ihre Farbe beim Firmenwechsel). Fürs dunkle Design aufgehellt gegenüber den früheren Hell-Werten, damit die 3px-Randakzente auf Blech sichtbar bleiben. */ --pd-journal-status:#a78bfa; /* Statuswechsel — Violett (war #6a1b9a) */ --pd-journal-system:#9aa4ae; /* System/automatisch — Grau (war #9ca3af) */ --pd-journal-email:#38bdf8; /* E-Mail ein/aus — Himmelblau (war #0ea5e9) */ --pd-journal-entscheidung:#fbbf24; /* Entscheidung — Amber (war #f59e0b) */ --pd-journal-dokument:#34d399; /* Dokument — Grün (war #10b981) */ --pd-journal-anruf:#2dd4bf; /* Anruf — Türkis/Teal (war #8b5cf6; von Status-Violett weggezogen) */ /* Mischpole für color-mix(): Aufhellen/Abdunkeln einer Rolle. Als Rollen ausgelagert, damit ein späteres sie mitdrehen kann (heutiges Dunkeldesign: hell=Weiß, dunkel=Schwarz — byte-identisch zu vorher). */ --pd-aufhell:#fff; /* heller Pol (Text/Fläche aufhellen) */ --pd-abdunkel:#000; /* dunkler Pol (Hover/Fläche abdunkeln) */ /* --- Ebene 2: Material-Rollen (Anmutung statt nur Farbe) --- Ein Theme kann hierüber die Materialität ändern (matt statt glänzend, flach statt tief, kühl statt warm). Heutige Werte sind Default, deshalb optisch byte-identisch zum Vorzustand. Neon-Pole laufen über color-mix, Bühnen- und Glanz-Pole über rgb(var / Alpha) mit Kanaltripeln (siehe die jeweiligen Kommentare) — beide Wege ergeben exakt die früheren Werte. */ /* Bühnen-Stimmung (body.pd::before): Weißlicht + drei Warm-Radiale. Als Kanaltripel „r g b" (nicht als Farbe), damit der Ausblendpunkt rgb(var / 0) exakt denselben Farbton bei Alpha 0 behält wie zuvor. Sonst blendet Chrome nach transparent = Schwarz-transparent aus und legt einen Grauschleier über die ganze Bühne. */ --pd-buehne-licht:255 255 255; --pd-buehne-glut-1:146 74 32; /* Warm-Radial re. unten */ --pd-buehne-glut-2:120 62 30; /* Warm-Radial li. unten */ --pd-buehne-glut-3:133 80 44; /* Warm-Radial re. oben */ /* Glas-Glanz: helle/dunkle Pole der inset-Kanten und Deckverläufe. Als Kanaltripel „r g b" und über rgb(var / Alpha) benutzt — NICHT per color-mix. Grund: color-mix-Verlaufsstops dithern in Chrome minimal anders als plain rgba (≤3/255 auf den Kachelflächen); rgb(var/α) rendert dagegen byte-gleich zum früheren rgba(255,255,255,.x)/rgba(0,0,0,.x). */ --pd-glanz-hell:255 255 255; --pd-glanz-tief:0 0 0; /* Abdunkelungs-Schleier (Scrim) hinter Modal-/Overlay-Karten (Sende- Overlay). Kanaltripel „r g b" wie die Glanz-Pole, gelesen als rgb(var(--pd-schleier) / ) — die DECKKRAFT liegt an der Verwendungsstelle, nicht in der Rolle. Wert = der originale Slate-Ton des Overlays (rgba(15,23,42,.55) vor der Verrollung aa82a7b; dort war er auf den Mischpol --pd-abdunkel geraten und damit auf pd-Seiten zu reinem Schwarz verschoben — Original schlaegt Konstruktion). KEIN Mischpol: der Schleier bleibt auch in einem hellen Theme dunkel. */ --pd-schleier:15 23 42; /* Karten-/Kachel-Schatten OHNE Neon — Glanz-/Tiefen-Anteil zentral & theme- drehbar in :root. Der Firmen-Ring (Neon) liegt separat an .pd-feld/ .pd-kachel, weil er per data-firma-lokal am Container auflösen muss (ein in :root gebackenes var(--pd-neon) friert auf Neutral). Die box-shadow- Reihenfolge bleibt exakt erhalten: beim Feld sitzt der Ring MITTEN im Stapel → --pd-schatten-feld (Kanten, vor dem Ring) + --pd-schatten-feld-wurf (Schlagschatten, nach dem Ring); bei der Kachel liegt der Ring zuletzt → eine Rolle genügt. Default = bisherige Werte → byte-identisch. */ --pd-schatten-feld: inset 0 1px 0 rgb(var(--pd-glanz-hell) / .09), inset 0 -2px 8px rgb(var(--pd-glanz-tief) / .4); --pd-schatten-feld-wurf: 0 14px 34px rgb(var(--pd-glanz-tief) / .4); --pd-schatten-kachel: 0 3px 5px rgb(var(--pd-glanz-tief) / .35), 0 18px 30px -8px rgb(var(--pd-glanz-tief) / .5), inset 0 0 0 1px rgb(var(--pd-glanz-hell) / .13), inset 0 2px 2px -1px rgb(var(--pd-glanz-hell) / .5), inset 2px 0 3px -1px rgb(var(--pd-glanz-hell) / .16), inset -2px 0 3px -1px rgb(var(--pd-glanz-hell) / .07), inset 0 -3px 2px -1px rgb(var(--pd-glanz-hell) / .13), inset 0 -18px 26px -12px rgb(var(--pd-glanz-tief) / .65); /* Intensität des Firmen-Rings (0 = aus … 1 = heute). Skaliert die Neon- Mischanteile in --pd-firmenring-feld/-kachel. Default 1 → byte-identisch. */ --pd-firmenring-staerke:1; /* Kachel-Detail: Mattkörnung-Deckkraft (.pd-kachel::after) und die dunkle untere Tiefenkante (.pd-kachel border-bottom, Farbe + Breite getrennt). Kante-Farbe als Kanaltripel, weil ihr Farbton (5 7 9) knapp neben Schwarz liegt und über rgb(var/α) byte-genau bleiben muss (--pd-glanz-tief = 0 0 0 träfe sie nicht). Die Breite ist eine eigene Rolle, damit ein flaches Theme die Tiefenkante dünner ziehen oder ganz entfernen kann. */ --pd-glas-koernung:.05; --pd-kachel-kante:5 7 9; --pd-kachel-kante-staerke:4px; /* Flachglas-Fläche für den sparsam-Modus (backdrop-filter aus): opaker Ersatz fürs Rauchglas, wenn keine Unschärfe möglich ist. */ --pd-glas-flach:#12161a; /* Glas-Unschärfe (backdrop-filter der Kacheln) */ --pd-glas-unschaerfe:20px; --pd-glas-saettigung:160%; /* Verlaufswinkel — drei distinkte Materialwinkel, byte-identisch nur getrennt haltbar (Bühne 165°, Blech 172°, Glas-Deckglanz 180°). */ --pd-verlauf-winkel-buehne:165deg; /* Bühnen-Grundverlauf */ --pd-verlauf-winkel-feld:172deg; /* Strukturfelder (.pd-feld, fieldset) */ --pd-verlauf-winkel-glas:180deg; /* Kachel-Deckglanz */ --pd-verlauf-winkel-trenner:90deg; /* Gruppen-Trennlinie (war „to right") */ /* Textur-Overlay der Bühne (body.pd::after) */ --pd-textur-deckkraft:.16; --pd-textur-blend:overlay; /* Randstärke — EINZIGE Material-Rolle mit ±px-Nebenwirkung auf die Box. Ein Theme, das sie ändert, verschiebt die Feld-/Fieldset-Größe minimal. */ --pd-rand-staerke:1px; /* Tabellen-Linienbreiten als eigenes Paar, entkoppelt von --pd-rand-staerke: Kopf betont (2px), Zeile fein (1px) — so dreht ein Theme die Tabellen- dichte unabhängig von der Feld-Randstärke. */ --pd-tabelle-kopf-staerke:2px; --pd-tabelle-zeile-staerke:1px; /* Radius Primärknopf (Konsistenzfix: nutzte fest .7rem) */ --pd-radius-knopf:.7rem; /* Primärknopf-Textfarbe (war fest #fff; im hellen Theme drehbar) */ --pd-knopf-text:#fff; /* Select-Aufklappliste (Konsistenzfix: nutzte feste Hex-Werte) */ --pd-auswahl-flaeche:#22262a; --pd-auswahl-text:#f2f4f6; /* Die kompletten Schatten-Strings --pd-schatten-feld/-kachel stehen BEWUSST NICHT hier: Sie enthalten var(--pd-neon). Ein in :root gebackenes var(--pd-neon) friert auf die neutrale Portalfarbe ein (die Firmen-Weiche sitzt unterhalb von :root und greift nicht mehr). Deshalb werden beide Rollen je Komponente an .pd-feld bzw. .pd-kachel deklariert — dort löst die Firmenglut korrekt auf (wie das frühere --ks an der Kachel). Ein Theme übersteuert sie per [data-theme] .pd-feld / .pd-kachel. */ } /* ========================================================================== 3 FIRMENAKZENT Gesetzt über . Ohne Attribut greift die neutrale Portalfarbe — für alle Bereiche ohne Firmenbezug (Büroportal allgemein, Benutzerverwaltung, Portal-Auswahl). ========================================================================== */ :root{ --pd-neon:#1e9bb8; --pd-neon-tief:#0d6f87; } /* neutral: Portal */ [data-firma="as"]{ --pd-neon:#6d3bfa; --pd-neon-tief:#4c24c4; } /* Aufzugtechnik Schiefer */ [data-firma="ma"]{ --pd-neon:#1e63ff; --pd-neon-tief:#0a3fbf; } /* Mein Aufzug GmbH */ /* Bereichsweise Übersteuerung, falls einzelne Werkzeuge im Büroportal eine abweichende Firma zeigen (Attribut am Container statt am ). */ [data-firma-lokal="as"]{ --pd-neon:#6d3bfa; --pd-neon-tief:#4c24c4; } [data-firma-lokal="ma"]{ --pd-neon:#1e63ff; --pd-neon-tief:#0a3fbf; } [data-firma-lokal="neutral"]{--pd-neon:#1e9bb8; --pd-neon-tief:#0d6f87; } /* ========================================================================== 3b LIGHT-TRIOS — helle Rollen für Flächen, die auch unter pd bewusst hell bleiben. Heute genutzt vom Sende-Overlay (mitarbeiterportal/assets/sendebestaetigung.js); ungenutzte Rollen wurden 2026-08-06 entfernt. !!! WARNUNG — NICHT DIREKT AUF pd-SEITEN VERWENDEN: Diese Rollen tragen Werte für einen HELLEN Kontext. Wer sie beim Umstellen einer Seite auf pd (dunkles Design) direkt einsetzt, erzeugt weiße Karten auf dunklem Grund und die Pilot-Kollision (weiße Schrift auf weißer Karte). Sie sind Vokabular für gezielt hell gehaltene Flächen (Overlay) bzw. ein späteres HELLES Theme — NICHT für das Standard-Dunkeldesign. Die Status-Tinte ist eine EIGENE Rolle (--pd-*-tinte), getrennt von --pd-ok/… (Letzteres ist der Status-Akzent des Dunkeldesigns). ========================================================================== */ :root{ /* Karte/Text (hell) */ --pd-karte:#ffffff; /* weiße Overlay-Karte */ --pd-text-buero-mittel:#374151; /* Standard-Body/Detailtext auf heller Karte */ /* Status auf heller Fläche */ --pd-ok-rand:#16a34a; /* Grün-Akzent: Haken, OK-Knopf */ --pd-ok-tinte:#166534; /* dunkelgrüne Text-Tinte */ --pd-warn-tinte:#92400e; /* Amber-Text-Tinte */ --pd-warn-akzent:#d97706; /* kräftiges Amber für Akzente AUF heller Fläche (Warn-Variante des Overlays) */ } /* ========================================================================== 4 BÜHNE — der Stahl hinter allem ========================================================================== */ body.pd{ margin:0; min-height:100vh; background-color:var(--pd-flaeche-buehne-3); color:var(--pd-text); font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; line-height:1.45; } body.pd::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(120% 70% at 22% -8%, rgb(var(--pd-buehne-licht) / .13), transparent 58%), radial-gradient(58% 44% at 88% 108%, rgb(var(--pd-buehne-glut-1) / .55), rgb(var(--pd-buehne-glut-1) / 0) 70%), radial-gradient(42% 34% at -6% 96%, rgb(var(--pd-buehne-glut-2) / .40), rgb(var(--pd-buehne-glut-2) / 0) 70%), radial-gradient(30% 22% at 102% 12%, rgb(var(--pd-buehne-glut-3) / .28), rgb(var(--pd-buehne-glut-3) / 0) 75%), linear-gradient(var(--pd-verlauf-winkel-buehne), var(--pd-flaeche-buehne-1) 0%, var(--pd-flaeche-buehne-2) 34%, var(--pd-flaeche-buehne-3) 68%, var(--pd-flaeche-buehne-4) 100%); } body.pd::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: var(--pd-schliff) 0 0/520px 130px, var(--pd-rausch-grob) 0 0/420px 420px, var(--pd-rausch-fein) 0 0/240px 240px; opacity:var(--pd-textur-deckkraft); mix-blend-mode:var(--pd-textur-blend); } /* ========================================================================== 5 BLECH — die Strukturfelder (ersetzt die bisherigen weißen Container) ========================================================================== */ .pd-feld{ position:relative; background: var(--pd-schliff) 0 0/520px 130px, var(--pd-rausch-fein) 0 0/240px 240px, linear-gradient(var(--pd-verlauf-winkel-feld), var(--pd-flaeche-blech-hell) 0%, var(--pd-flaeche-blech-mittel) 55%, var(--pd-flaeche-blech-tief) 100%); background-blend-mode:soft-light, overlay, normal; border:var(--pd-rand-staerke) solid var(--pd-flaeche-blech-rand); border-radius:var(--pd-radius-feld); padding:1.4rem 1.5rem 1.6rem; /* Firmen-Ring (Neon) am Element — resolvt auch bei data-firma-lokal korrekt; Glanz/Tiefe kommen zentral aus :root (--pd-schatten-feld/-wurf). */ --pd-firmenring-feld: 0 0 0 1px color-mix(in srgb, var(--pd-neon) calc(32% * var(--pd-firmenring-staerke)), transparent), 0 0 24px -2px color-mix(in srgb, var(--pd-neon) calc(50% * var(--pd-firmenring-staerke)), transparent), 0 20px 55px -10px color-mix(in srgb, var(--pd-neon) calc(72% * var(--pd-firmenring-staerke)), transparent); box-shadow:var(--pd-schatten-feld), var(--pd-firmenring-feld), var(--pd-schatten-feld-wurf); transition:box-shadow .35s ease; } .pd-huelle{ max-width:66rem; margin:0 auto; padding:1.4rem 1.25rem 4rem; display:grid; gap:1.4rem; } .pd-gruppe{ font-size:.72rem; font-weight:750; letter-spacing:.2em; text-transform:uppercase; color:var(--pd-text-leise); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; } .pd-gruppe::after{ content:""; flex:1; height:2px; border-radius:1px; background:linear-gradient(var(--pd-verlauf-winkel-trenner), rgb(var(--pd-linie) / .12), transparent); box-shadow:0 1px 0 rgb(var(--pd-glanz-tief) / .45); } /* ========================================================================== 6 GLASKACHELN ========================================================================== */ .pd-kacheln{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr)); gap:1.1rem; } .pd-kachel{ /* Firmen-Ring (Neon) am Element; Glanz/Tiefe zentral aus :root (--pd-schatten-kachel). Firma resolvt hier korrekt (auch data-firma-lokal). */ --pd-firmenring-kachel: inset 0 -7px 12px -4px color-mix(in srgb, var(--pd-neon) calc(26% * var(--pd-firmenring-staerke)), transparent); position:relative; display:block; text-decoration:none; color:var(--pd-text-glas); padding:1.15rem 1.25rem 1.3rem; min-height:6.2rem; border:none; border-bottom:var(--pd-kachel-kante-staerke) solid rgb(var(--pd-kachel-kante) / .55); border-radius:var(--pd-radius-kachel); background: linear-gradient(var(--pd-verlauf-winkel-glas), rgb(var(--pd-glanz-hell) / .13) 0%, rgb(var(--pd-glanz-hell) / .03) 30%, rgb(var(--pd-glanz-tief) / .1) 62%, rgb(var(--pd-glanz-tief) / .26) 100%), var(--pd-glas); backdrop-filter:blur(var(--pd-glas-unschaerfe)) saturate(var(--pd-glas-saettigung)); -webkit-backdrop-filter:blur(var(--pd-glas-unschaerfe)) saturate(var(--pd-glas-saettigung)); box-shadow:var(--pd-schatten-kachel), var(--pd-firmenring-kachel); transition:transform .16s ease, box-shadow .16s ease; overflow:hidden; } .pd-kachel::before{ /* Rückseite des Glasklotzes */ content:""; position:absolute; inset:5px; border-radius:.55rem; pointer-events:none; border:1px solid rgb(var(--pd-glanz-hell) / .07); /* Reflexlinie bleibt fest 1px, nicht theme-drehbar */ background:radial-gradient(120% 80% at 50% -20%, rgb(var(--pd-glanz-hell) / .07), transparent 55%); box-shadow:inset 0 0 22px rgb(var(--pd-glanz-hell) / .04); } .pd-kachel::after{ /* Mattkörnung */ content:""; position:absolute; inset:0; pointer-events:none; background:var(--pd-rausch-fein) 0 0/240px 240px; opacity:var(--pd-glas-koernung); } .pd-kachel:hover{ transform:translateY(-3px); box-shadow:var(--pd-schatten-kachel), var(--pd-firmenring-kachel), 0 28px 46px -10px rgb(var(--pd-glanz-tief) / .55); } .pd-kachel:active{ transform:translateY(1px); box-shadow:var(--pd-schatten-kachel), var(--pd-firmenring-kachel), inset 0 4px 12px rgb(var(--pd-glanz-tief) / .4); } .pd-kachel:focus-visible{ outline:2px solid var(--pd-neon); outline-offset:3px; } .pd-kachel h3{ margin:0 0 .25rem; font-size:1.03rem; font-weight:750; } .pd-kachel p{ margin:0; font-size:.84rem; color:var(--pd-text-glas-leise); } .pd-kachel--gross{ grid-column:span 2; } .pd-kachel--gross h3{ font-size:1.18rem; } @media (max-width:600px){ .pd-kachel--gross{ grid-column:span 1; } } /* ========================================================================== 7 STATUS-LED Markup: Text ========================================================================== */ .pd-status{ display:inline-flex; align-items:center; gap:.55rem; margin-top:.9rem; font-size:.82rem; font-weight:750; padding:.32rem .75rem .32rem .6rem; border-radius:999px; /* Mischpole statt fester Schwarz-/Weissanteile. --pd-glas (α .6) und --pd-glas-rand (α .16) waeren sichtbar staerker als .34/.11 — daher bewusst NICHT diese Rollen, sondern Pol + Prozentwert. */ background:color-mix(in srgb, var(--pd-abdunkel) 34%, transparent); border:1px solid color-mix(in srgb, var(--pd-aufhell) 11%, transparent); box-shadow:inset 0 1px 2px color-mix(in srgb, var(--pd-abdunkel) 40%, transparent); } .pd-led{ position:relative; flex:none; width:.62rem; height:.62rem; border-radius:50%; background:radial-gradient(circle at 50% 62%, var(--led-hell) 0%, var(--led) 42%, var(--led-tief) 78%, var(--led-rand) 100%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.55), inset 0 -1px 1.5px rgba(0,0,0,.4), 0 0 3px var(--led), 0 0 9px -1px color-mix(in srgb, var(--led) 75%, transparent), 0 0 20px -3px color-mix(in srgb, var(--led) 55%, transparent); } .pd-led::before{ content:""; position:absolute; left:26%; top:30%; width:34%; height:34%; border-radius:50%; background:var(--led-kern); filter:blur(.4px); } .pd-led::after{ content:""; position:absolute; left:22%; top:16%; width:26%; height:20%; border-radius:50%; background:rgba(255,255,255,.75); filter:blur(.3px); } .pd-status--ok{ color:var(--pd-ok); } .pd-status--ok .pd-led{ --led:var(--pd-led-gruen); --led-hell:var(--pd-led-gruen-hell); --led-tief:var(--pd-led-gruen-tief); --led-rand:var(--pd-led-gruen-rand); --led-kern:var(--pd-led-gruen-kern); } .pd-status--warn{ color:var(--pd-warn); } .pd-status--warn .pd-led{ --led:var(--pd-led-amber); --led-hell:var(--pd-led-amber-hell); --led-tief:var(--pd-led-amber-tief); --led-rand:var(--pd-led-amber-rand); --led-kern:var(--pd-led-amber-kern); } .pd-status--fehler{ color:var(--pd-fehler); } .pd-status--fehler .pd-led{ --led:var(--pd-led-rot); --led-hell:var(--pd-led-rot-hell); --led-tief:var(--pd-led-rot-tief); --led-rand:var(--pd-led-rot-rand); --led-kern:var(--pd-led-rot-kern); } /* Erloschene LED („keine Pruefung"): Grautoene auf der --pd-text-leise-Achse statt fester Hexes (frueher #4a5158/#343a40/#22272c — Abweichung ≤3/255). */ .pd-led--aus{ background:radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--pd-text-leise) 50%, var(--pd-abdunkel)) 0%, color-mix(in srgb, var(--pd-text-leise) 36%, var(--pd-abdunkel)) 55%, color-mix(in srgb, var(--pd-text-leise) 24%, var(--pd-abdunkel)) 100%); box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--pd-abdunkel) 60%, transparent), inset 0 -1px 1.5px color-mix(in srgb, var(--pd-abdunkel) 45%, transparent); } .pd-led--aus::before{ background:color-mix(in srgb, var(--pd-aufhell) 6%, transparent); } .pd-led--aus::after{ background:color-mix(in srgb, var(--pd-aufhell) 22%, transparent); } /* ========================================================================== 8 FIRMENNAME — ausgestanzt, hinterleuchtet ========================================================================== */ .pd-firma{ display:inline-block; font-weight:800; font-size:1.15rem; letter-spacing:.015em; color:color-mix(in srgb, var(--pd-neon) 34%, var(--pd-text-akzent)); text-shadow: 1px 1px 0 rgb(var(--pd-glanz-tief) / .9), 2px 2px 1px rgb(var(--pd-glanz-tief) / .55), 3px 3px 3px rgb(var(--pd-glanz-tief) / .3), 0 0 6px color-mix(in srgb, var(--pd-neon) 85%, transparent), 0 1px 14px color-mix(in srgb, var(--pd-neon) 62%, transparent), 0 2px 26px color-mix(in srgb, var(--pd-neon) 40%, transparent); } .pd-bereich{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pd-text-leise); } /* ========================================================================== 9 ELEMENT-DEFAULTS Nur auf pd-Seiten. Dank :where() ohne zusaetzliche Spezifitaet — seiten- lokales CSS ueberschreibt sie weiterhin problemlos. ========================================================================== */ :where(body.pd) h1, :where(body.pd) h2, :where(body.pd) h3, :where(body.pd) h4{ color:var(--pd-text); letter-spacing:-.01em; } :where(body.pd) a{ color:color-mix(in srgb, var(--pd-neon) 45%, var(--pd-text-akzent)); } :where(body.pd) label{ display:block; font-size:.85rem; font-weight:700; margin:.95rem 0 .35rem; color:var(--pd-text); } /* box-sizing zentral (kam frueher aus style.css via *{...}). Entkoppelte pd-Seiten brauchten es sonst lokal, sonst ragen width:100%-Felder ums Padding ueber ihren Container. */ :where(body.pd) input, :where(body.pd) select, :where(body.pd) textarea, :where(body.pd) button, :where(body.pd) input[type=submit], .pd-btn{ box-sizing:border-box; } :where(body.pd) input[type=text], :where(body.pd) input[type=date], :where(body.pd) input[type=time], :where(body.pd) input[type=number], :where(body.pd) input[type=email], :where(body.pd) input[type=tel], :where(body.pd) input[type=password], :where(body.pd) select, :where(body.pd) textarea{ width:100%; font:inherit; font-size:1rem; color:var(--pd-text-glas); background:linear-gradient(var(--pd-verlauf-winkel-glas), rgb(var(--pd-glanz-tief) / .12), transparent 30%), var(--pd-eingabe-fuellung); border:var(--pd-rand-staerke) solid var(--pd-eingabe-rand); border-radius:var(--pd-radius-eingabe); padding:.8rem .95rem; min-height:3.25rem; /* handschuhtauglich */ box-shadow:inset 0 2px 5px rgb(var(--pd-glanz-tief) / .45), 0 1px 0 rgb(var(--pd-glanz-hell) / .08); } :where(body.pd) select option{ background:var(--pd-auswahl-flaeche); color:var(--pd-auswahl-text); } :where(body.pd) textarea{ min-height:6.5rem; resize:vertical; } :where(body.pd) input:focus, :where(body.pd) select:focus, :where(body.pd) textarea:focus{ outline:2px solid var(--pd-neon); outline-offset:1px; } :where(body.pd) input::placeholder, :where(body.pd) textarea::placeholder{ color:rgb(var(--pd-text-glas-basis) / .45); } :where(body.pd) button, :where(body.pd) input[type=submit], .pd-btn{ /* Auch verhaelt sich wie ein Knopf: zentriert, ohne Link-Unterstreichung (frueher pro Seite lokal geflickt). */ display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font:inherit; font-size:1.05rem; font-weight:750; color:var(--pd-knopf-text); background:linear-gradient(var(--pd-verlauf-winkel-glas), color-mix(in srgb, var(--pd-neon-tief) 82%, var(--pd-aufhell) 18%), var(--pd-neon-tief) 55%, color-mix(in srgb, var(--pd-neon-tief) 78%, var(--pd-abdunkel) 22%)); border:var(--pd-rand-staerke) solid color-mix(in srgb, var(--pd-neon-tief) 65%, var(--pd-abdunkel) 35%); border-radius:var(--pd-radius-knopf); min-height:3.5rem; padding:0 1.4rem; cursor:pointer; box-shadow:0 6px 20px color-mix(in srgb, var(--pd-neon-tief) 50%, transparent), inset 0 1px 0 rgb(var(--pd-glanz-hell) / .4); } :where(body.pd) button:active, .pd-btn:active{ box-shadow:inset 0 3px 8px rgb(var(--pd-glanz-tief) / .4); transform:translateY(1px); } :where(body.pd) button:focus-visible, .pd-btn:focus-visible{ outline:2px solid var(--pd-neon); outline-offset:2px; } /* Leise Zweitvariante: gedaempfte Flaeche statt Akzent — fuer nachgeordnete Aktionen neben einem Primaerknopf (z. B. Ansehen, PDF-Liste, Reset). */ .pd-btn--leise{ background:var(--pd-flaeche-hell); color:var(--pd-text); border:var(--pd-rand-staerke) solid var(--pd-glas-rand); box-shadow:none; } :where(body.pd) fieldset{ border:var(--pd-rand-staerke) solid var(--pd-flaeche-blech-rand); border-radius:var(--pd-radius-feld); background:linear-gradient(var(--pd-verlauf-winkel-feld), var(--pd-flaeche-blech-hell), var(--pd-flaeche-blech-tief)); padding:1.2rem 1.3rem 1.4rem; margin:0 0 1.1rem; } :where(body.pd) legend{ font-size:.72rem; font-weight:750; letter-spacing:.2em; text-transform:uppercase; color:var(--pd-text-leise); padding:0 .4rem; } /* Tabellen — dicht und bürotauglich, kein Glas (Lesbarkeit vor Effekt) */ :where(body.pd) table{ width:100%; border-collapse:collapse; font-size:.9rem; } :where(body.pd) th{ text-align:left; font-size:.72rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--pd-text-leise); padding:.6rem .7rem; border-bottom:var(--pd-tabelle-kopf-staerke) solid rgb(var(--pd-linie) / .14); } :where(body.pd) td{ padding:.55rem .7rem; border-bottom:var(--pd-tabelle-zeile-staerke) solid rgb(var(--pd-linie) / .07); color:var(--pd-text); } :where(body.pd) tbody tr:hover td{ background:rgb(var(--pd-linie) / .04); } /* ========================================================================== 10 RÜCKSICHTNAHME ========================================================================== */ @media (prefers-reduced-motion: reduce){ body.pd *{ transition:none !important; } } /* Sparsame Variante ohne backdrop-filter für schwache Geräte (ältere iPads). Per setzbar. */ [data-leistung="sparsam"] .pd-kachel{ backdrop-filter:none; -webkit-backdrop-filter:none; background:linear-gradient(var(--pd-verlauf-winkel-glas), rgb(var(--pd-glanz-hell) / .1), rgb(var(--pd-glanz-tief) / .28)), var(--pd-glas-flach); } @media print{ body.pd::before, body.pd::after{ display:none; } body.pd{ background:#fff; color:#000; } } /* ========================================================================== 11 ZENTRALE ERGAENZUNGEN (2026-07-27) Drei wiederverwendbare Bausteine, rein aus Rollen gemischt. Firmenfarbe (--pd-neon) wird je Komponente aufgeloest, nie in :root eingefroren. ========================================================================== */ /* --- 11a MELDUNG (Flash) ------------------------------------------------ Statuskasten in vier Varianten. Flaeche + Rand aus der Statusrolle gemischt, Text in der Statusrolle. Muster: color-mix wie im Auftragsportal. */ .pd-meldung{ --c:var(--pd-text); margin:0 0 1rem; padding:.7rem .95rem; border:var(--pd-rand-staerke) solid color-mix(in srgb, var(--c) 40%, transparent); border-radius:var(--pd-radius-eingabe); color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); } .pd-meldung--ok{ --c:var(--pd-ok); } .pd-meldung--fehler{ --c:var(--pd-fehler); } .pd-meldung--warn{ --c:var(--pd-warn); } .pd-meldung--info{ --c:var(--pd-info); } /* --- 11b KLEINER AKTIONSKNOPF ------------------------------------------ Kompakter Knopf fuer Tabellen-/Zeilenaktionen. Setzt die grossen pd-