/* ========================================================================= PLANWERK DESIGN SYSTEM 1.2 — Tokens Abgeleitet aus der Hausmarke hundertzwölf (100zwoelf.p2cx.de). Ersetzt den :root-Block in /shared/styles.css. Benennung folgt der bestehenden deutschen Konvention (--farbe-*, --abstand-*). Alle Farbpaare sind gegen WCAG 2.1 AA gerechnet; Werte in den Kommentaren. ========================================================================= */ :root { /* -- MARKE --------------------------------------------------------------- Das Signalrot der 112. Es gehört der Marke, nicht der Bedienung. ACHTUNG: Weiß auf #FE0000 erreicht nur 4,03:1. Zulässig ausschließlich für große Schrift (≥ 24 px, oder ≥ 18,66 px fett) und für Flächen ohne Fließtext. Für alles andere gilt --marke-rot-fest. */ --marke-rot: #FE0000; /* Logo, Kontaktaufruf, Versal-Kicker, Icons. Auf Flächen nur mit Schrift ab 18 px. */ --marke-rot-fest: #D40000; /* Weiß darauf 5,5:1 — rote Flächen mit Schrift unter 18 px */ --marke-ueberschrift: #111111; /* Überschriftenfarbe der Hausseite. KEINE Markenfläche — die Website hat auf /ueber-uns, /referenzen und /branchen null dunkle Flächen. */ /* -- SCHICHT 1 · OBERFLÄCHE --------------------------------------------- Chrome, Navigation, Flächen, Handlungsaufforderungen. Grundfläche ist Weiß, abgesetzt über #F3F4F6 und #E5E7EB — genau wie die Hausseite, die keine dunklen Flächen kennt. */ --farbe-bg: #FFFFFF; --farbe-flaeche: #F9FAFB; /* Seitenleiste, Tabellenkopf */ --farbe-flaeche-2: #F3F4F6; /* Chips, deaktivierte Felder — Hausfarbe */ --farbe-karte: #FFFFFF; --farbe-invers: #111111; /* Freigabestempel, invertierte Kopfzeilen. Sparsam — die Marke arbeitet hell. */ --farbe-text: #111111; /* 18,9:1 — Hausfarbe */ --farbe-text-2: #333333; /* 12,6:1 — Hausfarbe, Fließ- und Hilfetext */ --farbe-text-3: #6B7280; /* 4,8:1 — Labels, nicht unter 14 px */ --farbe-text-invers: #FFFFFF; --farbe-rand-fein: #E5E7EB; /* Hausfarbe · nur dekorative Trennlinien */ --farbe-rand: #D1D5DB; /* Kartenkontur */ --farbe-rand-stark: #8A919E; /* 3,2:1 — Pflicht für Bedienelement-Konturen: Felder, Buttons, Checkboxen, Selects */ /* KONTEXTREGEL — zwei Primäraktionen, nach Zone: Marke (Startseite, Konto, Marketing, Kontakt) → --farbe-primaer-marke Werkzeug (Risikoanalyse, Notfallhandbuch, Brandschutz, Cockpit) → --farbe-primaer. Dort gehört Rot allein der Gefahr. */ --farbe-primaer-marke: #FE0000; /* nur mit Schrift ab 18 px, sonst #D40000 */ --farbe-primaer: #111111; /* Fachmodule · Weiß darauf 18,9:1 */ --farbe-primaer-hover: #262626; /* 15,1:1 */ --farbe-primaer-aktiv: #3A3A3A; /* 11,4:1 */ --farbe-primaer-soft: #EDEDEF; --farbe-primaer-auf-soft: #1F1F1F; --fokus-ring: 0 0 0 3px rgba(254, 0, 0, .40); /* Hausrot als Fokus */ --fokus-ring-invers: 0 0 0 3px rgba(255, 255, 255, .70); /* -- SCHICHT 2 · STATUS ------------------------------------------------- Bearbeitungszustand eines Datensatzes. Sechs Rollen, modulübergreifend. Fünf davon sind flache Badges. „Freigegeben" ist der einzige gefüllte — ein Stempel. Der Unterschied ist damit Form, nicht nur Farbe. */ --status-offen: #374151; --status-offen-bg: #F3F4F6; /* 9,4:1 */ --status-arbeit: #8A5A00; --status-arbeit-bg: #FAEFD8; /* 5,2:1 */ --status-geprueft: #1E6F4C; --status-geprueft-bg: #E4F1EA; /* 5,3:1 */ --status-freigegeben: #FFFFFF; --status-freigegeben-bg: #111111; /* 18,9:1 */ --status-fehler: #B3231C; --status-fehler-bg: #FAE6E4; /* 5,5:1 */ --status-abgewiesen: #8C2F28; --status-abgewiesen-bg: #F4E7E5; /* 7,4:1 */ /* -- SCHICHT 3 · RISIKO ------------------------------------------------- Ausschließlich für Bewertungsergebnisse: Score 0–5, Zonen, Z1/Z2/Z3, Gefährdungsstufen, ALARP. Die Helligkeit steigt monoton mit der Stufe, damit die Skala in Graustufen, im Ausdruck und bei Rotschwäche lesbar bleibt. Die Spitze liegt in der Farbfamilie der Marke, ist aber auf AA nachgezogen. REGEL: nie ohne Ziffer oder Wort in derselben Zelle. */ --risiko-normal: #2C7A5B; /* Score 0–1 · Normalbereich · Weiß 5,2:1 */ --risiko-grenz: #9A6100; /* Score 2–3 · Grenzbereich · Weiß 5,1:1 */ --risiko-verbot: #C81007; /* Score ≥ 4 · Verbotsbereich · Weiß 5,9:1 */ --risiko-normal-bg: #E4F1EA; --risiko-grenz-bg: #FAEFD8; --risiko-verbot-bg: #FAE6E4; /* Schutzziel-Pfade — identisch mit den Zonen, eigener Name für Lesbarkeit */ --z1: var(--risiko-verbot); --z2: var(--risiko-grenz); --z3: var(--risiko-normal); /* -- SCHICHT 4 · DATENREIHEN -------------------------------------------- Kategoriale Palette für Diagramme, Karten und Legenden. Jeder Ton ≥ 4,8:1 gegen Weiß. In dieser Reihenfolge vergeben. Kein Rot — das bliebe in einer Risikoanwendung nicht neutral lesbar. */ --dv-1: #14507E; /* Tiefblau 8,5:1 */ --dv-2: #A85B12; /* Rostbraun 5,0:1 */ --dv-3: #2C7A5B; /* Tannengrün 5,2:1 */ --dv-4: #6B3FA0; /* Violett 7,4:1 */ --dv-5: #0E6E78; /* Petrol 6,0:1 */ --dv-6: #9E1D5C; /* Beere 7,5:1 */ --dv-7: #5C6470; /* Schiefer 6,0:1 */ --dv-8: #7A6A18; /* Oliv 5,4:1 */ /* -- TYPOGRAFIE --------------------------------------------------------- Inter ist die Hausschrift — auf der Website wie in der Anwendung, dort bereits self-hosted unter /vendor/inter/. Neu: eine Monospace für IDs, Zeitstempel, Koordinaten und Messwerte. */ --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --schrift-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-2xs: 0.6875rem; /* 11px — nur Versal-Labels, nie Fließtext */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px — Tabellen, Labels, Buttons */ --text-base: 1rem; /* 16px — Fließtext */ --text-md: 1.125rem; /* 18px — Kartentitel */ --text-lg: 1.25rem; /* 20px — Abschnittstitel, Lead */ --text-xl: 1.5rem; /* 24px — H2 */ --text-2xl: 1.875rem; /* 30px — H1, verbindlich für ALLE Seitentitel */ --text-3xl: 2.25rem; /* 36px — H2 der Hausseite, Modul-Startseiten */ --text-4xl: 4.5rem; /* 72px — nur Marketing-Hero, wie auf der Hausseite */ --zeile-eng: 1.2; --zeile-normal: 1.55; --zeile-weit: 1.65; /* sicherheitskritischer Fließtext */ --schnitt-normal: 400; --schnitt-mittel: 500; /* Buttons, Feldwerte */ --schnitt-halb: 600; /* Überschriften, Labels, Kennzahlen */ --schnitt-fett: 700; /* nur Kennzahlen */ /* Laufweite — von der Hausseite übernommen */ --spur-display: -.025em; /* ab 36 px */ --spur-gross: -.02em; /* 24–30 px */ --spur-normal: -.01em; /* 16–20 px */ --spur-versal: .12em; /* Versal-Labels, Schnitt 600 */ /* -- ABSTÄNDE (4-px-Raster, unverändert übernommen) --------------------- */ --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-6: 24px; --abstand-8: 32px; --abstand-12: 48px; --abstand-16: 64px; /* -- RADIEN ------------------------------------------------------------- Die Hausseite arbeitet mit 2 px und 4 px. Das ist die Kante, die Planwerk übernimmt: institutionell, nicht abgerundet-freundlich. Die bisherigen 6, 8 und 12 px entfallen. */ --radius-klein: 2px; /* Badge, Score-Chip, Checkbox, Nummernmarke */ --radius: 2px; /* Eingabefeld, Button, Select — wie die Hausseite */ --radius-karte: 4px; /* Karte, Panel, Tabellencontainer */ --radius-gross: 8px; /* nur Dialog und Overlay */ --radius-punkt: 9999px;/* nur runde Statuspunkte und Avatare */ /* -- ERHEBUNG ----------------------------------------------------------- Karten tragen eine Kontur ODER einen Schatten, nie beides. */ --schatten-karte: 0 1px 2px rgba(17, 17, 17, .04); --schatten-hover: 0 2px 6px rgba(17, 17, 17, .07); --schatten-overlay:0 8px 24px rgba(17, 17, 17, .12), 0 2px 6px rgba(17, 17, 17, .06); --schatten-dialog: 0 16px 48px rgba(17, 17, 17, .18), 0 4px 12px rgba(17, 17, 17, .08); /* -- BEWEGUNG ----------------------------------------------------------- Sicherheitssoftware. Kein Federn, kein Überschwingen. */ --dauer-schnell: 120ms; --dauer-normal: 180ms; --dauer-langsam: 260ms; --kurve: cubic-bezier(.2, .8, .2, 1); --uebergang: color var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve), box-shadow var(--dauer-schnell) var(--kurve); /* -- LAYOUT ------------------------------------------------------------- 1280 / 768 / 672 sind die Breiten der Hausseite. Planwerk hat 1280 bereits als --seite-spalte, benutzt es nur nicht überall. */ --seite-spalte: 1280px; --seite-spalte-weit: 1600px; /* nur Dashboards, Matrizen, breite Tabellen */ --lese-spalte: 672px; /* Hausseiten-Textbreite, ≈ 72 Zeichen */ --formular-spalte: 640px; /* sicherheitskritische Eingaben */ --seite-rand: max(1.5rem, (100% - var(--seite-spalte)) / 2); --sidebar-breite: 248px; --sidebar-breite-schmal: 72px; --kopf-hoehe: 56px; --tabellenzeile: 44px; /* Mindesthöhe, Klickziel ≥ 44 px */ --icon-raster: 24px; --icon-strich: 1.75; /* Strichstärke der Hausseite */ } /* ========================================================================= PFLICHT-BASIS ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--farbe-bg); color: var(--farbe-text); font-family: var(--schrift); font-size: var(--text-base); line-height: var(--zeile-normal); letter-spacing: var(--spur-normal); font-synthesis-weight: none; } h1, h2, h3 { letter-spacing: var(--spur-gross); font-weight: var(--schnitt-halb); } h1 { font-size: var(--text-2xl); } /* Jede Zahl, die in einer Spalte, Matrix oder Kennzahl steht. */ table, .kennzahl, .score, .matrix, [data-zahl] { font-variant-numeric: tabular-nums; } /* IDs, Zeitstempel, Koordinaten, Aktenzeichen. */ .mono, code, kbd, samp, time, .id, .index { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; } /* Versal-Label — Maße von der Hausseite übernommen. */ .label-versal { font-size: var(--text-2xs); font-weight: var(--schnitt-halb); letter-spacing: var(--spur-versal); text-transform: uppercase; color: var(--farbe-text-3); } /* Sichtbarer Fokus — ohne Ausnahme, in jedem Modul. Ring im Hausrot. */ :focus-visible { outline: 2px solid var(--marke-rot); outline-offset: 2px; box-shadow: var(--fokus-ring); } .ist-aktiv :focus-visible, .btn-primaer:focus-visible { outline-color: #FFFFFF; box-shadow: var(--fokus-ring-invers); } /* Fließtext bekommt immer eine Lesebreite. */ p, .fliesstext { max-width: var(--lese-spalte); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= MIGRATION — Altnamen bleiben gültig und zeigen auf die neuen Werte. So bricht kein bestehendes Modul, während umgestellt wird. Nach der Umstellung ersatzlos löschen. ========================================================================= */ :root { /* aus /shared/styles.css */ --farbe-akzent: var(--farbe-primaer); /* war #fe0000 — in Fachmodulen jetzt neutral; auf Marken- seiten --farbe-primaer-marke */ --farbe-akzent-hover: var(--farbe-primaer-hover); /* war #d40000 */ --farbe-akzent-soft: var(--farbe-primaer-soft); /* war #fde8e8 */ --farbe-akzent-tief: var(--farbe-primaer-aktiv); /* war #b91c1c */ --farbe-muted: var(--farbe-text-3); --farbe-surface: var(--farbe-flaeche-2); /* --radius und --schatten-hover heissen in alt und neu gleich und sind oben (Z. 167 bzw. 177) bereits korrekt gesetzt. Ein Alias "--radius: var(--radius)" referenziert sich selbst -> per CSS-Spezifikation "invalid at computed-value time", die Eigenschaft wird leer und border-radius:var(--radius) rendert als 0px. Empirisch bestaetigt. Daher hier bewusst KEIN Selbst-Alias. */ --schatten: var(--schatten-karte); /* aus /apps/risikoanalyse/styles.css und /apps/notfallhandbuch/styles.css */ --bg: var(--farbe-bg); --panel: var(--farbe-karte); --ink: var(--farbe-text); --muted: var(--farbe-text-3); --line: var(--farbe-rand-fein); --line-strong: var(--farbe-rand); --accent: var(--farbe-primaer); --accent-d: var(--farbe-primaer-hover); --accent-dd: var(--farbe-primaer-aktiv); --accent-soft: var(--farbe-primaer-soft); --ok: var(--status-geprueft); /* war #34c759 */ --warn: var(--status-arbeit); /* war #ff9f0a */ --bad: var(--status-fehler); /* war #ff3b30 */ --sidebar: var(--farbe-flaeche); --sbw: var(--sidebar-breite); --z1-tx: var(--risiko-verbot); --z2-tx: var(--risiko-grenz); --z3-tx: var(--risiko-normal); /* aus /apps/cockpit/styles.css */ --status-gut: var(--risiko-normal); /* war #0ca30c */ --status-warnung: var(--risiko-grenz); /* war #fab219 */ --status-kritisch: var(--risiko-verbot); /* war #d03b3b */ /* aus /apps/brandschutzbegehung/styles.css */ --bsb-offen: var(--status-offen); /* war #e05b41 */ --bsb-geschlossen: var(--status-geprueft);/* war #2f9e8f */ --bsb-unbekannt: var(--farbe-text-3); --bsb-gering: var(--risiko-normal); /* war #e8c79a — Weiß darauf 1,6:1 */ --bsb-mittel: var(--risiko-grenz); /* war #e39149 — Weiß darauf 2,5:1 */ --bsb-hoch: var(--risiko-verbot); /* war #d5482f */ --bsb-bau-a: var(--dv-1); --bsb-bau-b: var(--dv-3); }