/* ============================================================ AB Industrie — Design System Core tokens, typography and global stylesheet Quelle der Wahrheit sind die kanonischen Tokens des AB-Designsystems (ds/tokens/*.css, unten importiert). Diese Seite stylt ausschließlich gegen deren CSS-Variablen — der :root-Block weiter unten bildet nur die in dieser Landingpage genutzten lokalen Token-Namen 1:1 auf die DS-Variablen ab. ============================================================ */ /* ---------- AB-Designsystem: kanonische Tokens (Quelle der Wahrheit) ---------- Die DS-Token-Dateien werden im der Seite als eigene -Tags VOR dieser Datei geladen (paralleles, render-blockierendes Laden — kein serielles @import). Reihenfolge im HTML: ds/tokens/colors|typography|spacing|effects.css → styles.css. Diese Datei stylt nur noch gegen die so bereitgestellten Variablen. ---------- */ @import "components.css"; /* ---------- Fonts: Montserrat (self-hosted, WOFF2) ---------- WOFF2 spart ggü. OTF/TTF ~65 % (2,5 MB → 0,87 MB) → schnellerer Seitenaufbau. WOFF2 wird von allen aktuellen Browsern unterstützt. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Montserrat-Regular.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Montserrat-Medium.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Montserrat-MediumItalic.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Montserrat-Bold.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Montserrat-BoldItalic.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Montserrat-ExtraBold.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Montserrat-ExtraBoldItalic.woff2") format("woff2"); } /* ---------- Token-Bridge: lokale Namen → kanonische DS-Variablen ---------- Werte stammen ausschließlich aus ds/tokens/*.css. Hier wird nur abgebildet, damit der bestehende Seiten-CSS (components.css / landing.css) unverändert gegen die DS-Tokens auflöst. --steel-*, --space-*, --radius-*, --shadow-*, --font-sans, --fw-* und --fs-* kommen direkt aus dem Designsystem. ---------- */ :root { /* Marke → DS */ --ab-red: var(--brand); /* #A8192B Markenrot */ --ab-red-dark: var(--brand-press); /* #8C1424 Press/Hover */ --ab-red-tint: var(--red-100); /* #F6D5D9 Fokus-Wash */ --ab-black: var(--anthrazit); /* #11100B Anthrazit */ --ab-white: var(--white); --ab-ink: #000; /* Typo-Skala: lokale Namen → DS --fs-* */ --text-xs: var(--fs-xs); --text-sm: var(--fs-sm); --text-base: var(--fs-base); --text-lg: var(--fs-md); --text-xl: var(--fs-lg); --text-2xl: var(--fs-xl); --text-3xl: var(--fs-2xl); --text-4xl: var(--fs-3xl); --text-5xl: var(--fs-4xl); /* Zeilenhöhen → DS --lh-* */ --leading-tight: var(--lh-heading); --leading-snug: var(--lh-snug); --leading-base: var(--lh-normal); /* Gewicht-Alias (DS kennt --fw-extrabold statt --fw-black) */ --fw-black: var(--fw-extrabold); /* Semantische Rollen → DS */ --color-bg: var(--surface-page); --color-surface: var(--surface-sunken); --color-text: var(--anthrazit); --color-text-soft: var(--text-muted); --color-primary: var(--brand); --color-border: var(--border-subtle); } /* ---------- Base element defaults ---------- */ body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }