/* * THW Toolbox – Design-Tokens * Design-Version: 0.5.2 * Quelle: THW Corporate Design Manual, Stand 12.06.2026 (Kapitel 1.4, 1.5, 1.7, 1.8, 1.10) * Farbwerte sind unverändert aus dem CD übernommen. Abstände, Radien und * Web-Schriftgrößen sind aus den CD-Regeln abgeleitet (siehe DESIGN.md). * * Die Datei wird per Sync-Skript in jedes Modul kopiert (design/tokens.css), * zusammen mit design/assets/ (Schriften, Logo, Emblem, Pfeile). */ /* ---------- Schriften (Bundesschriften) ---------- * Entscheidung 01.11.2026: Die Web-Schnitte werden mit ausgeliefert (assets/fonts/) * und im Precache abgelegt. local() nutzt eine installierte Fassung zuerst. */ @font-face { font-family: "BundesSans"; font-style: normal; font-weight: 400; src: local("BundesSans"), local("BundesSans-Regular"), local("BundesSans Web"), local("BundesSansWeb-Regular"), local("BundesSans Office"), local("BundesSansOffice"), url("./assets/fonts/BundesSansWeb-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSans"; font-style: italic; font-weight: 400; src: local("BundesSans Italic"), local("BundesSans-Italic"), local("BundesSans-RegularItalic"), local("BundesSansWeb-Italic"), local("BundesSans Office Italic"), local("BundesSansOffice-Italic"), url("./assets/fonts/BundesSansWeb-Italic.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSans"; font-style: normal; font-weight: 700; src: local("BundesSans Bold"), local("BundesSans-Bold"), local("BundesSansWeb-Bold"), local("BundesSans Office Bold"), local("BundesSansOffice-Bold"), url("./assets/fonts/BundesSansWeb-Bold.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSans"; font-style: italic; font-weight: 700; src: local("BundesSans Bold Italic"), local("BundesSans-BoldItalic"), local("BundesSansWeb-BoldItalic"), local("BundesSans Office Bold Italic"), local("BundesSansOffice-BoldItalic"), url("./assets/fonts/BundesSansWeb-BoldItalic.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSerif"; font-style: normal; font-weight: 400; src: local("BundesSerif"), local("BundesSerif-Regular"), local("BundesSerif Web"), local("BundesSerifWeb-Regular"), local("BundesSerif Office"), local("BundesSerifOffice"), url("./assets/fonts/BundesSerifWeb-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSerif"; font-style: italic; font-weight: 400; src: local("BundesSerif Italic"), local("BundesSerif-Italic"), local("BundesSerif-RegularItalic"), local("BundesSerifWeb-Italic"), local("BundesSerif Office Italic"), local("BundesSerifOffice-Italic"), url("./assets/fonts/BundesSerifWeb-Italic.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSerif"; font-style: normal; font-weight: 700; src: local("BundesSerif Bold"), local("BundesSerif-Bold"), local("BundesSerifWeb-Bold"), local("BundesSerif Office Bold"), local("BundesSerifOffice-Bold"), url("./assets/fonts/BundesSerifWeb-Bold.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSerif"; font-style: italic; font-weight: 700; src: local("BundesSerif Bold Italic"), local("BundesSerif-BoldItalic"), local("BundesSerifWeb-BoldItalic"), local("BundesSerif Office Bold Italic"), local("BundesSerifOffice-BoldItalic"), url("./assets/fonts/BundesSerifWeb-BoldItalic.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BundesSansCond"; font-style: normal; font-weight: 400; src: local("BundesSans Cond"), local("BundesSansCond-Regular"), local("BundesSansCondWeb-Regular"), local("BundesSans Cond Web"), local("BundesSans Cond Office"), local("BundesSansCondOffice-Regular"), url("./assets/fonts/BundesSansCond-Web-Regular.woff2") format("woff2"); font-display: swap; } :root { /* ---------- Farben: Primär (CD 1.5) ---------- */ --thw-blau: #003399; /* HKS 42, Pantone 287, RAL 5002 */ --thw-weiss: #ffffff; --thw-schwarz: #000000; /* Fließtext */ /* ---------- Farben: Akzent (CD 1.5) – nur Dekoration, nie Textfarbe ---------- */ --thw-gelb: #ffeb00; /* HKS 2, kein flächiger Einsatz */ --thw-silber: #dadee1; /* HKS 99, einzige Farbe mit erlaubten Tonwerten */ --thw-silber-70: #e5e8ea; /* Rasterstufen laut CD: 70 %, 50 %, 30 % auf Weiß */ --thw-silber-50: #edeff0; --thw-silber-30: #f4f5f6; /* ---------- Farben: Sekundär (CD 1.5) – Diagramme, Infografiken ---------- */ --thw-wasser: #69b9ec; --thw-royal: #1662aa; --thw-marine: #1e2f66; --thw-graphit: #53616b; --thw-stahl: #98a4ae; /* Trennlinien in Tabellen */ /* ---------- Farben: Tertiär (CD 1.5) – nur wenn Sekundär nicht reicht ---------- */ --thw-gruen: #95bd68; --thw-himmel: #a6d3f4; --thw-jeans: #2b8bcd; --thw-mitternacht: #17234f; --thw-stein: #6c7982; --thw-chrom: #bdc6cd; /* ---------- Farben: Funktion (CD 1.5) – nur Handlungsempfehlungen, kleine Flächen ---------- */ --thw-do: #508d46; /* zulässig / in Ordnung */ --thw-dont: #b5161a; /* unzulässig / Fehler */ /* ---------- Semantische Rollen ---------- */ --farbe-text: var(--thw-schwarz); --farbe-text-sekundaer:var(--thw-graphit); /* 6,4:1 auf Weiß */ --farbe-ueberschrift: var(--thw-blau); --farbe-link: var(--thw-blau); --farbe-hintergrund: var(--thw-weiss); --farbe-flaeche: var(--thw-silber-50); /* Tabellenzeilen, Karten */ --farbe-rahmen: var(--thw-silber); --farbe-trennlinie: var(--thw-stahl); --farbe-akzent: var(--thw-gelb); --farbe-fokus: var(--thw-blau); --farbe-primaer: var(--thw-blau); /* Schaltflächen, aktive Zustände */ --farbe-primaer-text: var(--thw-weiss); /* 10,9:1 auf THW-Blau */ --farbe-ok: var(--thw-do); /* nur Icon, Rahmen, große Schrift (4,0:1) */ --farbe-fehler: var(--thw-dont); /* 6,8:1 auf Weiß, auch für Text */ --farbe-warnung: var(--thw-gelb); /* nur als Fläche/Rahmen, Text darauf Schwarz */ --farbe-deaktiviert: var(--thw-stahl); /* ---------- Typografie (CD 1.4, 1.10) ---------- */ --schrift-sans: "BundesSans", Calibri, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --schrift-serif: "BundesSerif", Cambria, Georgia, "Times New Roman", serif; --schrift-cond: "BundesSansCond", "BundesSans", Calibri, system-ui, sans-serif; --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* nur Rohdaten/Code, nicht CD */ --schrift-ui: var(--schrift-sans); /* Bedienelemente, Tabellen, Zahlen, Beschriftungen */ --schrift-lesetext: var(--schrift-serif); /* längere Fließtexte, Hilfe, Erläuterungen */ --schrift-ueberschrift:var(--schrift-sans); --gewicht-normal: 400; --gewicht-fett: 700; --laufweite: 0; /* CD: Zeichenabstand nicht verändern */ /* Schriftgröße geräteweit: Faktor auf die Wurzel-Schriftgröße, alle Größen sind rem. Der Kopf (kopf.js) setzt html[data-schriftgroesse] aus localStorage „toolbox.schriftgroesse“. */ --schrift-faktor: 1; /* Digital: Fließtext mindestens 16 px (CD 1.10). Skala aus CD-Tabelle 36/28/24/20/16/12 pt. */ --groesse-xs: 0.75rem; /* 12 px – nur Nebeninformation, Mindestgröße */ --groesse-s: 0.875rem; /* 14 px – Bildunterschrift, Tabellenkopf klein */ --groesse-m: 1rem; /* 16 px – Fließtext, Bedienelemente */ --groesse-l: 1.25rem; /* 20 px – Subline, H4 */ --groesse-xl: 1.5rem; /* 24 px – H3 */ --groesse-2xl: 1.75rem; /* 28 px – H2 */ --groesse-3xl: 2.25rem; /* 36 px – H1 */ --zeilenhoehe-eng: 1.2; /* Überschriften (CD: auto = 120 %) */ --zeilenhoehe-normal: 1.5; /* Fließtext (CD: 120–150 %) */ --zeilenhoehe-tabelle: 1.25; /* kompakte Daten (CD: 12/15 pt) */ /* ---------- Abstände (4-px-Raster, abgeleitet aus 12er-Gestaltungsraster) ---------- */ --abstand-1: 0.25rem; /* 4 px */ --abstand-2: 0.5rem; /* 8 px */ --abstand-3: 0.75rem; /* 12 px */ --abstand-4: 1rem; /* 16 px */ --abstand-5: 1.5rem; /* 24 px */ --abstand-6: 2rem; /* 32 px */ --abstand-7: 3rem; /* 48 px */ --abstand-8: 4rem; /* 64 px */ --seitenrand: var(--abstand-4); /* Mindest-Seitenrand mobil 16 px */ --inhalt-max-breite: 75rem; /* 1200 px, 12 Spalten */ --spalten: 12; --spaltenabstand: var(--abstand-5); /* ---------- Linien, Radien, Schatten ---------- */ --linie-fein: 1px; /* Tabellen-Trennlinien (CD: 0,5 pt in Stahl) */ --linie-kasten: 0.25em; /* Kasten: 1/4 der Schriftgröße (CD 1.7.1) */ --linie-balken: 0.5rem; /* Balken/Pfeile: einheitliche Breite je Anwendung (CD 1.7.3) */ --radius-0: 0; /* CD-Elemente sind eckig */ --radius-s: 2px; /* Bedienelemente (nicht CD, technische Anpassung) */ --radius-rund: 9999px; /* Schalter, Badges */ --schatten: none; /* CD: keine grafischen Effekte */ /* ---------- Bedienelemente ---------- */ --touch-min: 2.75rem; /* 44 px Mindest-Zielgröße */ --fokus-ring: 2px solid var(--farbe-fokus); --fokus-abstand: 2px; --dauer-kurz: 120ms; --dauer-normal: 200ms; /* ---------- Logo (CD 1.3.4) ---------- */ --logo-schutzraum: 1em; /* mindestens eine H-Höhe rundum */ --emblem-min-breite: 2rem; /* digitales Pendant zu 8 mm Mindestbreite */ } /* Grundzuweisung, von Modulen übernehmbar */ html { font-family: var(--schrift-ui); font-size: calc(100% * var(--schrift-faktor)); line-height: var(--zeilenhoehe-normal); color: var(--farbe-text); background: var(--farbe-hintergrund); letter-spacing: var(--laufweite); -webkit-text-size-adjust: 100%; } /* ====================================================================== * Ergänzung: Geräte und Layout * * Geräteklassen, mobil zuerst, Breiten in rem. Custom Properties gehen in * Media Queries nicht; die Schwellen stehen deshalb als feste Werte in jedem @media: * * Klasse Breite Spalten Seitenrand größte Überschrift Navigation * Handy unter 40rem 1 16 px 28 px Leiste unten, höchstens 5 Ziele * Tablet 40rem bis < 64rem 2 24 px 28 px schmale Leiste links (Rail) * PC ab 64rem 12 32 px 36 px Seitenleiste mit Text * * Layout folgt der Breite, Bedienung dem Zeigegerät (unabhängig von der Breite): * @media (pointer: coarse) Tippfläche mind. 48 px, sonst 40 px * @media (hover: hover) Überfahren-Zustände nur hier * Fließtext bleibt überall 16 px. iPhone-Ränder: viewport-fit=cover im Viewport-Meta * und die --sicher-*-Tokens. * ====================================================================== */ :root { /* Seitenränder je Gerät; --seitenrand folgt der Geräteklasse (siehe unten) */ --seitenrand-handy: 1rem; /* 16 px */ --seitenrand-tablet: 1.5rem; /* 24 px */ --seitenrand-pc: 2rem; /* 32 px */ --spaltenabstand-handy:var(--abstand-4); /* Überschriftengrößen je Geräteklasse (Handy und Tablet 28 px, PC 36 px) */ --groesse-h1: var(--groesse-2xl); /* 28 px */ --groesse-h2: var(--groesse-xl); /* 24 px */ --groesse-h3: var(--groesse-l); /* 20 px */ /* Zielgrößen: fein (Maus) 40 px, grob (Touch) 48 px; --ziel folgt dem Zeigegerät */ --ziel-fein: 2.5rem; /* 40 px */ --ziel-grob: 3rem; /* 48 px */ --ziel: var(--ziel-fein); --symbol-groesse: 1.5rem; /* 24 px, Raster der Icons */ /* Dialog */ --dialog-max-breite: 35rem; /* 560 px */ --dialog-max-hoehe: 90dvh; /* Navigation */ --nav-unten-hoehe: 4rem; /* Leiste unten (Handy) */ --nav-rail-breite: 5.5rem; /* schmale Leiste links (Tablet) */ --nav-seite-breite: 15rem; /* Seitenleiste (PC) */ --nav-indikator: 0.25rem; /* Balken am aktiven Ziel */ --gruppen-breite: 14rem; /* Fachgruppen-Navigation im Launcher (ab Tablet) */ /* Rechenmodul */ --ergebniszeile-hoehe: 3.5rem; --ergebnis-spalte: 20rem; /* Ergebnisspalte auf dem Tablet */ --eingabe-spalte: 20rem; /* Eingabespalte beim Rechenmodul „Ergebnis breit“ (PC) */ --zeichnung-hoehe: min(70dvh, 40rem); /* Zeichnungsrahmen: größte Höhe der Scrollfläche */ /* Überfahr- und Gedrückt-Farben (Hover nur mit Maus, Gedrückt auch bei Touch) */ --farbe-primaer-hover: var(--thw-marine); --farbe-primaer-aktiv: var(--thw-mitternacht); --farbe-flaeche-hover: var(--thw-silber-30); --farbe-flaeche-aktiv: var(--thw-silber-50); --farbe-abdeckung: var(--thw-mitternacht); /* Hintergrund hinter Dialogen, mit Deckkraft */ /* Safe-Area (iPhone-Ränder, Voraussetzung: viewport-fit=cover) */ --sicher-oben: env(safe-area-inset-top, 0px); --sicher-rechts: env(safe-area-inset-right, 0px); --sicher-unten: env(safe-area-inset-bottom, 0px); --sicher-links: env(safe-area-inset-left, 0px); --nav-unten-gesamt: calc(var(--nav-unten-hoehe) + var(--sicher-unten)); /* Handy ist die Grundeinstellung */ --seitenrand: var(--seitenrand-handy); --spaltenabstand: var(--spaltenabstand-handy); } @media (pointer: coarse) { :root { --ziel: var(--ziel-grob); } } @media (min-width: 40rem) { /* Tablet */ :root { --seitenrand: var(--seitenrand-tablet); --spaltenabstand: var(--abstand-5); } } @media (min-width: 64rem) { /* PC */ :root { --seitenrand: var(--seitenrand-pc); --groesse-h1: var(--groesse-3xl); /* 36 px */ --groesse-h2: var(--groesse-2xl); /* 28 px */ --groesse-h3: var(--groesse-xl); /* 24 px */ } } /* Schriftgröße: drei Stufen, gesetzt vom Kopf (kopf.js) auf dem html-Element */ html[data-schriftgroesse="gross"] { --schrift-faktor: 1.125; } html[data-schriftgroesse="sehr-gross"] { --schrift-faktor: 1.25; }