/* ===================================================================== BSM DESIGN SYSTEM — Web-Paket BSM Brandschutz Sicherheit Management GmbH Erzeugt am 22.07.2026 von tools/build-dist.ps1 — NICHT von Hand aendern. Quelle der Wahrheit: tokens/*.css im Design-System-Projekt. Einbinden: Danach stehen alle Marken-Tokens als CSS-Variablen bereit, z. B. var(--accent), var(--text-heading), var(--bsm-eckband). ===================================================================== */ /* ---------- Schriften (lokal gehostet) ---------- */ /* Lokale Schriften – DSGVO-konform selbst gehostet (kein Google-CDN). Montserrat als Variable Font (deckt 300–800 ab), IBM Plex Mono als statische Schnitte. Quelle: SIL Open Font License (kostenlos selbst hostbar). */ /* ---------- Montserrat (Variable Font, Gewicht 100–900) ---------- */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./fonts/montserrat-var.ttf') format('truetype-variations'); } /* ---------- IBM Plex Mono ---------- */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/ibm-plex-mono-400.ttf') format('truetype');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/ibm-plex-mono-500.ttf') format('truetype');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/ibm-plex-mono-600.ttf') format('truetype');} /* ---------- Farben ---------- */ :root{ /* Primärfarben */ --bsm-navy:#0B1D36; --bsm-red:#E10613; --bsm-anthrazit:#333333; --bsm-white:#FFFFFF; /* Neutralfarben — eine durchgaengige Skala, keine Nebenskalen. Alle Grauwerte im System stammen aus dieser Liste. */ --bsm-gray-900:#1A1A1A; --bsm-gray-700:#4D4D4D; --bsm-gray-500:#7A7A7A; --bsm-gray-300:#B3B3B3; --bsm-gray-250:#CCCCCC; /* Haarlinien; schliesst die Luecke 229 -> 179 */ --bsm-gray-200:#E5E5E5; --bsm-gray-100:#F2F2F2; /* Metallic-Verläufe */ --bsm-metallic-navy:linear-gradient(118deg,#0B1D36 0%,#22476f 20%,#0B1D36 40%,#081627 58%,#2c5480 80%,#0B1D36 100%); --bsm-metallic-red:linear-gradient(118deg,#a4040d 0%,#E10613 22%,#ff585f 44%,#E10613 60%,#b1050d 82%,#E10613 100%); --bsm-metallic-anthrazit:linear-gradient(118deg,#242424 0%,#4d4d4d 22%,#6d6d6d 44%,#3a3a3a 62%,#1e1e1e 84%,#4d4d4d 100%); /* --- ECKBAND --------------------------------------------------------- Das grafische Leitmotiv: Metallic-Anthrazit-Kante → Rot → Navy-Ecke. EINE Definition, EINE Stellschraube: --bsm-eckband-breite steuert die Bandbreite, die Binnenverhaeltnisse der drei Zonen leiten sich davon ab (Faktoren 0.922 / 0.889 / 0.856 / 0.444 — abgeleitet aus der bisherigen Standardgeometrie 82 %, damit sie unveraendert reproduziert wird). ACHTUNG: Prozente beziehen sich in Farbverlaeufen auf die VERLAUFSLINIE (die Diagonale), nicht auf die Elementbreite. 18 % entspricht exakt dem frueheren Knick bei 82 %. Standard = clamp(22px, 18%, 40mm): - unter ~90 px greift die Mindestbreite, sonst wird die Metallic-Kante schmaler als ein Pixel und die Ecke zu einem roten Kruemel; - ueber ~150 mm der Deckel, damit das Band nicht ausufert. Fuer bewusst wuchtige Flaechen (Deckblaetter) die Breite am Element ueberschreiben: style="--bsm-eckband-breite:42%" */ --bsm-eckband-breite:clamp(22px, 18%, 40mm); } /* Die beiden Verlaufs-Definitionen stehen bewusst auf `*` und NICHT auf :root. Grund: der berechnete Wert einer Custom Property ist der bereits ersetzte Wert. Stuende --bsm-eckband nur auf :root, waere die dortige Bandbreite fest eingebacken und ein --bsm-eckband-breite am Element wirkungslos — der Verlauf saehe gueltig aus, ignorierte die Breite aber stillschweigend. Mit `*` berechnet jedes Element den Verlauf mit SEINER geerbten Breite. In Shadow Roots (doc-page, deck-stage) greift `*` nicht; dort wird der am Host berechnete Wert geerbt — also die Standardbreite. Das ist gewollt: eine Ueberschreibung INNERHALB eines Shadow Root wirkt nicht. */ *, ::before, ::after{ --bsm-eckband:linear-gradient(135deg, transparent 0 calc(100% - var(--bsm-eckband-breite)), #3a3a3a calc(100% - var(--bsm-eckband-breite)) calc(100% - var(--bsm-eckband-breite) * 0.922), #55585c calc(100% - var(--bsm-eckband-breite) * 0.889), #3a3a3a calc(100% - var(--bsm-eckband-breite) * 0.856), #E10613 calc(100% - var(--bsm-eckband-breite) * 0.856) calc(100% - var(--bsm-eckband-breite) * 0.444), #0B1D36 calc(100% - var(--bsm-eckband-breite) * 0.444) 100%); /* Auf dunklem Grund: aufgehellte Metallic-Kante, damit sie sich vom Navy absetzt. */ --bsm-eckband-dunkel:linear-gradient(135deg, transparent 0 calc(100% - var(--bsm-eckband-breite)), #4a4d52 calc(100% - var(--bsm-eckband-breite)) calc(100% - var(--bsm-eckband-breite) * 0.922), #6b6e73 calc(100% - var(--bsm-eckband-breite) * 0.889), #4a4d52 calc(100% - var(--bsm-eckband-breite) * 0.856), #E10613 calc(100% - var(--bsm-eckband-breite) * 0.856) calc(100% - var(--bsm-eckband-breite) * 0.444), #0B1D36 calc(100% - var(--bsm-eckband-breite) * 0.444) 100%); } :root{ /* Erweiterte Marken-Farbwerte */ --bsm-red-dark:#B3060F; /* Link-Hover / gedrückter Zustand */ --bsm-navy-800:#102B4C; /* erhöhte Fläche auf Navy */ --bsm-navy-700:#1C3A5E; /* Trenner / Karte auf Navy */ --bsm-blue-gray-100:#EEF1F4; /* kühle Seitenfläche (bläulicher als gray-100) */ --bsm-blue-gray-300:#C9D2DE; /* Text/Linie auf Navy */ --bsm-blue-gray-500:#8595AB; /* gedämpfter Text auf Navy */ /* --- KONSOLIDIERT (21.07.2026) -------------------------------------- Fuenf ad hoc erfundene Grauwerte sind auf die Neutralskala zurueckgefuehrt. Die frueheren Werte hatten einen Blaustich von B-R = 8..12 — das ist nicht wahrnehmbar und war keine Gestaltung, sondern Zufall. Die Namen bleiben als semantische Aliase bestehen, damit die Vorlagen unveraendert weiterlaufen. #555555 -> gray-700 (#4D4D4D) Sekundaertext #D8DCE1 -> gray-250 (#CCCCCC) Trenner Briefkopf #C2C5CA -> gray-250 (#CCCCCC) Regeln Deckblatt #9AA0A6 -> gray-300 (#B3B3B3) Falt-/Lochmarken #3A4048 -> anthrazit (#333333) Seitenhintergrund Styleguide Bewusst NICHT zusammengelegt: --bsm-blue-gray-* (B-R = 21..38). Deren Blaustich ist sichtbar und auf Navy-Grund gewollt. */ --text-secondary:var(--bsm-gray-700); --divider-cool:var(--bsm-gray-250); --surface-cool-300:var(--bsm-gray-250); /* Seitenhintergrund des Styleguide-Dokuments. Bleibt bewusst NEUTRAL — ein Navy-Ton wuerde die ganze Betrachtungsflaeche einfaerben und die Beurteilung der Farben darauf verfaelschen. */ --surface-backdrop:var(--bsm-anthrazit); --surface-navy-flat:var(--surface-backdrop); /* alter Name, bleibt gueltig */ /* Eigener Name, weil funktional (DIN 5008) und nicht dekorativ — der Wert kommt aber aus der Skala. */ --print-faltmarke:var(--bsm-gray-300); /* Eine Haarlinie fuer dekorative Trenner und Regeln. */ --hairline:var(--bsm-gray-250); /* Semantische Aliase — hell */ --text-heading:var(--bsm-navy); --text-body:var(--bsm-anthrazit); --text-muted:var(--bsm-gray-500); --accent:var(--bsm-red); --accent-hover:var(--bsm-red-dark); --surface-page:var(--bsm-white); --surface-alt:var(--bsm-gray-100); --surface-tint:var(--bsm-blue-gray-100); --surface-inverse:var(--bsm-navy); --border:var(--bsm-gray-200); /* Semantische Aliase — auf dunklem Grund (Navy). Diese Ebene entstand in den Vorlagen und ist hier erstmals verbindlich festgelegt. */ --text-on-navy:var(--bsm-blue-gray-300); --text-on-navy-muted:var(--bsm-blue-gray-500); --text-on-navy-strong:var(--bsm-white); --surface-navy-raised:var(--bsm-navy-800); --border-on-navy:var(--bsm-navy-700); } /* ---------- Typografie ---------- */ :root{ --font-sans:'Montserrat',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; /* Rollen */ --text-display:800 clamp(40px,6vw,72px)/1.02 var(--font-sans); --text-h1:700 34px/1.05 var(--font-sans); --text-h2:600 24px/1.1 var(--font-sans); --text-h3:500 18px/1.2 var(--font-sans); --text-copy:400 15px/1.7 var(--font-sans); --text-mono:500 12px/1.5 var(--font-mono); --tracking-caps:.08em; --tracking-mono:.12em; } /* ---------- Abstaende, Radien, Schatten ---------- */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --shadow-card:0 1px 4px rgba(11,29,54,.14); --shadow-raised:0 6px 24px rgba(11,29,54,.16); /* Print-Raster (DIN) */ --din-margin-left:20mm; --din-address-top:62.7mm; --din-date-top:97.44mm; }