/** * @file css/redesign/tokens.css - Redesign Welle R2a/W4 (Token-Layer) * * Setzt das verbindliche Token-Set aus "tokens-vorschlag.md", Abschnitt 4, * inklusive Bootstrap-5.3-Mapping (4.1) und Legacy-Alias-Block. * * ------------------------------------------------------------------ * W4-1 - Auftraggeber-Entscheidung "MB nah, fast eins zu eins" * ------------------------------------------------------------------ * 1. Die Neutralleiter bleibt MONOCHROM (kuehl-neutral wie W1). Der * zwischenzeitlich diskutierte Blau-Anthrazit-Stich entfaellt: die * Leiter fuehrt keinen sichtbaren Farbstich, --feb-ink ist ein * Fast-Schwarz (#0B0D0E, Farbort neutral-kuehl, S=12 % bei L=5 %). * 2. Die Kopfzeile ist SCHWARZ (--feb-black #000000) wie bei der * Referenz. --feb-black ist damit nicht mehr nur Scrim-Farbe, * sondern die Grundflaeche der gesamten Kopfzone. Panels, die auf * dem Schwarz liegen (Megamenue, Suchpanel, Offcanvas), sind mit * --feb-ink minimal aufgehellt und tragen eine sichtbare Hairline. * 3. BLAU gibt es ausschliesslich im Buttonsystem. Der Akzent * #006ABC traegt Primaerbuttons samt Hover/Active - nie Flaeche, * nie Fliesstext, nie Fokusring, nie Sektionshintergrund. Deshalb * zeigen die Legacy-Aliase --primary und --accent weiterhin auf * --feb-ink (siehe Alias-Block am Dateiende). * * ------------------------------------------------------------------ * W4-11 - Kundenvorgabe "Buttonfarbe = Mercedes-Blau #006ABC" * ------------------------------------------------------------------ * Der Akzent wechselt von #0565F5 (hsl 216 96% 49%) auf das * Mercedes-Blau #006ABC (hsl 206 100% 37%). Damit ruecken Farbton * und Saettigung auf die Referenz; die Farbe wird gleichzeitig * deutlich dunkler (Relativluminanz 0,1594 -> 0,1394). * * Die SYSTEMATIK der Zustandsstufen bleibt unveraendert: Farbton und * Saettigung sind ueber alle drei Stufen konstant, nur die Lichtheit * sinkt, und sie sinkt exakt so weit, wie es die zwei bindenden * Bedingungen aus W4-1 erlauben: * (a) --feb-on-accent (Weiss) auf der Flaeche >= 4,5:1 (1.4.3) und * (b) die Flaeche selbst gegen --feb-ink >= 3:1 (1.4.11), * weil Primaerbuttons auch im Footer, in dunklen Sektionen und * in der schwarzen Kopfzone stehen. * (b) ist die scharfe Grenze; sie liegt bei Y >= 0,1117. Die alte * Active-Stufe #0457D2 lag bei 3,06:1 - die neue #0061AC liegt bei * 3,07:1, also auf demselben Anschlag. Die Lichtheitsschritte sind * dabei zwangslaeufig kleiner als vorher (-1,8 / -1,4 Prozentpunkte * statt -4 / -3): der neue Startwert ist bereits 12 Punkte dunkler, * das nutzbare Fenster ist entsprechend schmaler. Die alten * Schrittweiten haetten die Active-Stufe auf 2,97:1 gedrueckt und * damit 1.4.11 gerissen. * * --feb-on-accent bleibt Weiss (Ink auf dem Akzent laege bei 3,51:1). * --feb-accent-soft wandert farbtongleich mit auf hsl(206 100% 95%). * * ------------------------------------------------------------------ * Kontrastnachweis (WCAG 2.1, (L1+0,05)/(L2+0,05), sRGB-Relativluminanz) * Alle Werte neu gerechnet, nicht uebernommen. * ------------------------------------------------------------------ * Auf Weiss #FFFFFF * --feb-ink #0B0D0E 19,48:1 Fliesstext AA/AAA * --feb-grey-600 #4C5257 7,92:1 Sekundaertext AA/AAA * --feb-grey-500 #666C72 5,31:1 Meta-/Feintext AA * --feb-grey-400 #8A9096 3,23:1 nur UI-Kante (1.4.11), kein Text * --feb-grey-300 #B0B5BA 2,07:1 nur dekorative Linie * --feb-grey-200 #D3D6D9 1,46:1 nur dekorative Hairline * --feb-accent #006ABC 5,54:1 AA (Akzent als Text zulaessig, * wird aber bewusst nicht genutzt) * Auf Grey-50 #F4F5F6 (Ruhe-Sektion) * ink 17,84:1 | grey-600 7,25:1 | grey-500 4,87:1 (AA) * grey-400 2,96:1 -> auf dieser Flaeche KEINE UI-Kante, dafuer grey-500 * accent 5,08:1 (AA) * Auf Grey-100 #E8EAEC * ink 16,15:1 | grey-600 6,57:1 | grey-500 4,40:1 (knapp unter AA - * grey-500 daher auf grey-100 nur fuer >=18,66 px / bold) * Auf Ink #0B0D0E (dunkle Sektion, Footer, Panels) * white 19,48:1 | grey-200 13,35:1 | grey-300 9,43:1 | grey-400 6,04:1 * grey-500 3,67:1 UI-Kante/Icon, kein Fliesstext * grey-700 1,64:1 nur dekorative Trennlinie * accent 3,51:1 · hover 3,26:1 · active 3,07:1 -> Buttonflaeche auf * Dunkel bleibt in allen drei Zustaenden ueber 3:1 (WCAG 1.4.11). * Die Active-Stufe ist der Anschlag: eine weitere Lichtheitsstufe * nach unten ergaebe 2,97:1 und waere unzulaessig. * Auf Schwarz #000000 (Kopfzeile) * white 21,00:1 | grey-200 14,39:1 | grey-300 10,16:1 (Navigation ruhend) * grey-400 6,51:1 Utility-Leiste, Chevrons AA * grey-500 3,95:1 UI-Kante/Bedienelement-Rand 1.4.11 erfuellt * grey-700 1,77:1 nur dekorative Trennlinie * accent 3,79:1 · hover 3,51:1 · active 3,31:1 1.4.11 erfuellt * Auf Grey-900 #131619 (erhoehte Flaeche im Panel) * white 18,16:1 | grey-200 12,44:1 | grey-300 8,79:1 | grey-400 5,63:1 * Buttonbeschriftung auf dem Akzent * --feb-white auf --feb-accent #006ABC 5,54:1 AA * --feb-white auf --feb-accent-hover #0065B3 5,98:1 AA * --feb-white auf --feb-accent-active #0061AC 6,35:1 AA * (--feb-ink auf dem Akzent laege bei 3,51:1 und damit unter AA - * deshalb ist --feb-on-accent Weiss, nicht mehr Ink wie in W1.) * Status auf Weiss * success #1B7A45 5,36:1 | danger #B0261C 6,69:1 | warning #8A5A00 5,93:1 * Hinweisflaeche * ink auf --feb-accent-soft #E6F4FF 17,39:1 * * Ergebnis: jeder Fliesstext-Paarung >= 4,5:1, jede tragende UI-Kante * >= 3:1. Die drei mit "FAIL" gerechneten Paarungen (grey-200/300 auf * Weiss, grey-700 auf Dunkel) tragen ausschliesslich dekorative * Hairlines und keine Bedienelement-Begrenzung. * * Warum eine eigene, handgeschriebene CSS-Datei und kein SCSS-Partial: * css/style.min.css wird laut css/style.scss lokal mit der VS-Code- * Erweiterung "Live Sass" kompiliert. Auf dem Server steht keine * Sass-Toolchain zur Verfuegung. Diese Datei laedt in * feb2026_bootstrap.libraries.yml nach style.min.css und welle-0.css und * ueberschreibt daher gezielt einzelne Deklarationen. Rein additiv - es * wird nichts aus dem Kompilat entfernt. * * Ladereihenfolge der Redesign-Ebene: * tokens.css -> base.css -> buttons.css -> header-footer.css * * WICHTIG zur Akzentfarbe: * --feb-accent (#006ABC) ist ausschliesslich Flaeche der Primaeraktion * (Button). Nie Fliesstextfarbe, nie Sektionshintergrund, nie Overlay, nie * Fokusring. Deshalb zeigen die Legacy-Aliase --primary und --accent * bewusst NICHT auf die Akzentfarbe, sondern auf --feb-ink: sie steuern im * Bestand Header, Links, Icons, .bg-accent-Sektionen, Fokus und Pagination * - das alles bleibt monochrom. Die Akzentflaeche vergibt ausschliesslich * css/redesign/buttons.css. */ /* ============================================================ febana Design Tokens - v1.0 Prefix: --feb- Basis: Inter (self-hosted), Radius 0 ============================================================ */ :root { /* ---------- 1. NEUTRALLEITER (kuehl-neutral, 10 Stufen) ---------- */ --feb-white: #FFFFFF; /* Standard-Sektionsflaeche */ --feb-grey-50: #F4F5F6; /* "Ruhe"-Sektion, Tabellenzebra */ --feb-grey-100: #E8EAEC; /* Flaechen, inaktive Chips */ --feb-grey-200: #D3D6D9; /* Hairline auf Hell (dekorativ) */ --feb-grey-300: #B0B5BA; /* Trennlinie kraeftig, Disabled-Rand */ --feb-grey-400: #8A9096; /* Bedienelement-Rand auf Hell (3,23:1) */ --feb-grey-500: #666C72; /* Meta-/Feintext auf Weiss (5,31:1) */ --feb-grey-600: #4C5257; /* Sekundaertext auf Hell (7,92:1) */ --feb-grey-700: #33383C; /* Erhoehte Flaeche auf Dunkel */ --feb-grey-800: #1F2326; /* Dunkle Sektion, Variante "aufgehellt" */ --feb-grey-900: #131619; /* Dunkle Karte / Surface elevated */ --feb-ink: #0B0D0E; /* Haupttext auf Hell + dunkle Grundflaeche*/ --feb-black: #000000; /* Kopfzeile (MB-Schwarz) + Video-Scrims */ /* ---------- 2. AKZENT (ausschliesslich Primaeraktion) ---------- W4-11, Kundenvorgabe: Mercedes-Blau #006ABC, Farbton 206 Grad bei voller Saettigung. Ersetzt das hellere #0565F5 aus W4-1. Die drei Zustaende teilen Farbton und Saettigung und unterscheiden sich nur in der Lichtheit (36,9 / 35,1 / 33,7 %) - dieselbe Systematik wie zuvor, nur mit kleineren Schritten, weil der neue Startwert schon deutlich dunkler ist. Sie liegen alle im Luminanzfenster 0,112 - 0,183: nur dort gilt gleichzeitig - Weiss als Beschriftung >= 4,5:1 (Fliesstext-Schwelle) UND - Flaeche gegen --feb-ink >= 3:1 (WCAG 1.4.11, Buttonkante auf dunkler Sektion / im schwarzen Header). Die Active-Stufe sitzt mit 3,07:1 auf dem unteren Anschlag; eine dunklere Stufe wuerde die zweite Bedingung reissen. */ --feb-accent: #006ABC; /* hsl(206 100% 37%) Weiss 5,54:1 */ --feb-accent-hover: #0065B3; /* hsl(206 100% 35%) Weiss 5,98:1 */ --feb-accent-active: #0061AC; /* hsl(206 100% 34%) Weiss 6,35:1 */ --feb-accent-soft: #E6F4FF; /* nur Hinweisflaechen, kein CTA */ --feb-on-accent: var(--feb-white); /* Schrift auf Akzent */ /* ---------- 2b. KOPFZONE (MB-Schwarz) ---------- Eigene Namen, damit der nachfolgende Nav-Umbau die Kopfzone umbauen kann, ohne die Neutralleiter anzufassen. */ --feb-header-bg: var(--feb-black); /* Kopfzeile, Utility */ --feb-header-panel: var(--feb-ink); /* Megamenue, Suchpanel */ --feb-header-elevated: var(--feb-grey-800); /* Hover im Panel */ --feb-header-hairline: var(--feb-grey-700); /* dekorative Trennung */ --feb-header-edge: var(--feb-grey-500); /* Panelkante, 3,95:1 */ /* ---------- 3. SEMANTISCHE FARBROLLEN ---------- */ /* Flaechen */ --feb-surface: var(--feb-white); --feb-surface-muted: var(--feb-grey-50); --feb-surface-sunken: var(--feb-grey-100); --feb-surface-inverse: var(--feb-ink); --feb-surface-inverse-2: var(--feb-grey-900); /* Karte auf Dunkel */ /* Text auf hellem Grund */ --feb-text: var(--feb-ink); /* 19,48:1 */ --feb-text-secondary: var(--feb-grey-600); /* 7,92:1 */ --feb-text-muted: var(--feb-grey-500); /* 5,31:1 */ --feb-text-disabled: var(--feb-grey-400); /* 3,23:1 - kein Text */ /* Text auf dunklem Grund */ --feb-text-inverse: var(--feb-white); /* 19,48:1 */ --feb-text-inverse-secondary: var(--feb-grey-300); /* 9,43:1 */ --feb-text-inverse-muted: var(--feb-grey-400); /* 6,04:1 */ --feb-text-inverse-disabled: var(--feb-grey-500); /* 3,67:1 */ /* Linien */ --feb-border: var(--feb-grey-200); /* dekorative Hairline */ --feb-border-strong: var(--feb-grey-400); /* Bedienelement-Rand */ --feb-border-ink: var(--feb-ink); /* Outline-Button */ --feb-border-inverse: var(--feb-grey-700); --feb-border-inverse-strong: var(--feb-grey-500); --feb-hairline-width: 1px; /* Fokus bewusst monochrom. Der neue Akzent kaeme mit 5,02:1 gegen Weiss zwar durch, bleibt aber der Primaeraktion vorbehalten - und ein monochromer Ring funktioniert auf Weiss, Grau, Ink UND Schwarz, ohne dass eine zweite Fokusfarbe gepflegt werden muss. */ --feb-focus: var(--feb-ink); --feb-focus-inverse: var(--feb-white); --feb-focus-width: 2px; --feb-focus-offset: 2px; /* ---------- 4. STATUS (zurueckhaltend, nie als CTA) ---------- */ --feb-success: #1B7A45; --feb-success-bg: #E9F3ED; --feb-danger: #B0261C; --feb-danger-bg: #FBEBE9; --feb-warning: #8A5A00; --feb-warning-bg: #FDF3E0; --feb-info: var(--feb-grey-700); --feb-info-bg: var(--feb-grey-50); /* ---------- 5. TYPOGRAFIE ---------- */ --feb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --feb-font-mono: "Fira Mono", ui-monospace, "Consolas", monospace; /* Groessen (fluid, 360 px -> 1440 px Viewport) */ --feb-fs-display: clamp(2.75rem, 1.60rem + 4.60vw, 5.00rem); /* 44 -> 80 px */ --feb-fs-h1: clamp(2.25rem, 1.55rem + 2.80vw, 3.50rem); /* 36 -> 56 px */ --feb-fs-h2: clamp(1.75rem, 1.35rem + 1.60vw, 2.50rem); /* 28 -> 40 px */ --feb-fs-h3: clamp(1.375rem, 1.15rem + 0.90vw, 1.875rem);/* 22 -> 30 px */ --feb-fs-h4: 1.25rem; /* 20 px */ --feb-fs-h5: 1.0625rem; /* 17 px */ --feb-fs-h6: 0.9375rem; /* 15 px */ --feb-fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); /* 17 -> 20 px */ --feb-fs-body: 1rem; /* 16 px */ --feb-fs-sm: 0.875rem; /* 14 px */ --feb-fs-xs: 0.8125rem; /* 13 px */ --feb-fs-eyebrow: 0.75rem; /* 12 px */ --feb-fs-btn: 0.9375rem; /* 15 px */ /* Gewichte */ --feb-fw-regular: 400; --feb-fw-medium: 500; --feb-fw-semibold: 600; /* Zeilenhoehen */ --feb-lh-display: 1.02; --feb-lh-heading: 1.14; --feb-lh-snug: 1.35; --feb-lh-body: 1.65; --feb-lh-tight: 1.45; /* Laufweiten - negatives Tracking ersetzt den Serif-Bruch */ --feb-ls-display: -0.035em; --feb-ls-h1: -0.030em; --feb-ls-h2: -0.025em; --feb-ls-h3: -0.018em; --feb-ls-h4: -0.012em; --feb-ls-body: 0em; --feb-ls-sm: 0.005em; --feb-ls-eyebrow: 0.14em; --feb-ls-btn: 0.010em; /* Textmass */ --feb-measure: 68ch; /* Fliesstext */ --feb-measure-lead: 46ch; /* Lead / Hero-Subline */ --feb-measure-head: 20ch; /* Display/H1 */ /* ---------- 6. ABSTAENDE (4-px-Raster) ---------- */ --feb-space-0: 0; --feb-space-1: 0.25rem; /* 4 px */ --feb-space-2: 0.5rem; /* 8 px */ --feb-space-3: 0.75rem; /* 12 px */ --feb-space-4: 1rem; /* 16 px */ --feb-space-5: 1.5rem; /* 24 px */ --feb-space-6: 2rem; /* 32 px */ --feb-space-7: 2.5rem; /* 40 px */ --feb-space-8: 3rem; /* 48 px */ --feb-space-9: 4rem; /* 64 px */ --feb-space-10: 5rem; /* 80 px */ --feb-space-11: 7.5rem; /* 120 px */ --feb-space-12: 10rem; /* 160 px */ /* Sektionsrhythmus (fluid) */ --feb-section-y: clamp(4rem, 2.4rem + 6.4vw, 7.5rem); /* 64 -> 120 px */ --feb-section-y-tight: clamp(2.5rem, 1.7rem + 3.2vw, 4rem); /* 40 -> 64 px */ --feb-section-y-loose: clamp(5rem, 2.6rem + 9.6vw, 10rem); /* 80 -> 160 px */ /* ---------- 7. RASTER & CONTAINER ---------- */ --feb-container-max: 1440px; --feb-content-max: 1200px; --feb-gutter: clamp(1rem, 0.5rem + 2vw, 3rem); /* 16 -> 48 px */ --feb-grid-columns: 12; --feb-grid-gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); /* 16 -> 24 px */ /* ---------- 8. FORM / RADIUS / HOEHEN ---------- */ --feb-radius: 0; /* systemweit, ausnahmslos */ --feb-radius-full: 0; /* auch Badges & Avatare bleiben rechteckig */ --feb-control-h-sm: 2.5rem; /* 40 px */ --feb-control-h: 3rem; /* 48 px */ --feb-control-h-lg: 3.5rem; /* 56 px */ /* W4-11, Kundenwunsch "den Buttons insgesamt etwas mehr Space geben": Innenabstand der drei Groessen von 20/28/36 auf 24/32/40 px angehoben. Die Hoehen (40/48/56) bleiben unangetastet, damit die Buttons nicht plumper werden - sie werden nur breiter. Der Kompakt-CTA in der Kopfzeile behaelt bewusst 20 px, siehe css/redesign/buttons.css Abschnitt 2. Der Zuwachs ist mitwachsend statt fest, und zwar aus einem gemessenen Grund. Der breiteste Button der Seite ist "Mehrkomponenten-Spritzguss 2K/3K" (Rang 1, Standardgroesse). Sein Textkoerper misst in Inter 15 px / 600 / 0,01 em Laufweite 277,1 px; die Schaltflaeche ist also 333 px breit (alt) bzw. 341 px (neu) - Buttons tragen white-space: nowrap, der Text kann nicht umbrechen. Auf einem 360-px-Geraet steht dafuer schon heute zu wenig Platz zur Verfuegung; ein fester Aufschlag haette diesen Bestandsfall um weitere 8 px verschaerft. clamp() loest das ohne Sonderregel: unterhalb von rund 375 px Viewportbreite liefert es exakt die ALTEN Werte (20/28/36) - dort aendert sich also nichts und es kommt kein Ueberlauf hinzu -, ab rund 785 px die neuen (24/32/40). Alle drei Groessen benutzen dieselbe Steigung von 1,02vw, damit ihr Abstand zueinander auf jeder Breite genau 8 px bleibt und die Groessenstaffel nicht kippt. */ --feb-btn-px-sm: clamp(1.25rem, 1rem + 1.02vw, 1.5rem); /* 20 -> 24 px */ --feb-btn-px: clamp(1.75rem, 1.5rem + 1.02vw, 2rem); /* 28 -> 32 px */ --feb-btn-px-lg: clamp(2.25rem, 2rem + 1.02vw, 2.5rem); /* 36 -> 40 px */ /* Kopfzeilen-CTA: unveraenderte 20 px. Die Kopfzone ist breitenkritisch (W4-1 hat dort einen Ueberlauf behoben); der Zugewinn an Luft gehoert in die Inhaltsflaeche, nicht in die Navigationsleiste. */ --feb-btn-px-header: 1.25rem; /* 20 px */ --feb-header-h: 4.5rem; /* 72 px Desktop */ --feb-header-h-sm: 3.5rem; /* 56 px Mobil */ /* ---------- 9. BEWEGUNG ---------- */ --feb-dur-fast: 120ms; --feb-dur-base: 180ms; --feb-dur-slow: 420ms; --feb-dur-media: 700ms; /* Bild-Zoom in Karten */ --feb-ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- 10. OVERLAYS / SCRIMS ---------- */ --feb-scrim-bottom: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 26%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.00) 100%); --feb-scrim-left: linear-gradient( to right, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.68) 32%, rgba(0, 0, 0, 0.30) 62%, rgba(0, 0, 0, 0.00) 88%); --feb-scrim-flat: rgba(0, 0, 0, 0.62); /* Vollflaechen-Scrim, Minimum */ --feb-scrim-min: 0.60; /* Mindestdeckung im Textfeld */ /* ---------- 11. SCHATTEN - bewusst nur zwei ---------- */ --feb-shadow-none: none; /* Default fuer Karten & Buttons */ --feb-shadow-overlay: 0 24px 64px rgba(11, 13, 14, 0.28);/* nur Dropdown/Modal/Offcanvas */ /* ---------- 12. Z-INDEX ---------- */ --feb-z-sticky: 1020; --feb-z-header: 1030; --feb-z-offcanvas: 1045; --feb-z-modal: 1055; } /* ============================================================ Bootstrap-5.3-Mapping (Spezifikation 4.1) Die Tokens werden nicht neben Bootstrap gefuehrt, sondern speisen dessen Variablen. Damit greift die neue Sprache automatisch in allen Barrio-/ Bootstrap-Komponenten. Hinweis zu den *-rgb-Varianten: das Kompilat setzt z. B. `a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)) }`. Ohne die rgb-Tripel bliebe die Linkfarbe auf dem alten Blau stehen. ============================================================ */ :root { --bs-body-bg: var(--feb-white); --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: var(--feb-ink); --bs-body-color-rgb: 11, 13, 14; --bs-body-font-family: var(--feb-font-sans); --bs-body-font-size: var(--feb-fs-body); --bs-body-font-weight: var(--feb-fw-regular); --bs-body-line-height: var(--feb-lh-body); --bs-emphasis-color: var(--feb-ink); --bs-emphasis-color-rgb: 11, 13, 14; --bs-heading-color: var(--feb-ink); --bs-secondary-color: var(--feb-grey-600); --bs-secondary-bg: var(--feb-grey-100); --bs-tertiary-color: var(--feb-grey-500); --bs-tertiary-bg: var(--feb-grey-50); --bs-border-color: var(--feb-border); --bs-border-color-translucent: rgba(11, 13, 14, 0.14); --bs-border-width: var(--feb-hairline-width); --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0; /* Links monochrom - Unterstreichung traegt die Auszeichnung, nicht Farbe */ --bs-link-color: var(--feb-ink); --bs-link-color-rgb: 11, 13, 14; --bs-link-hover-color: var(--feb-ink); --bs-link-hover-color-rgb: 11, 13, 14; --bs-link-decoration: underline; /* Fokus monochrom - siehe Begruendung im Token-Block oben. */ --bs-focus-ring-color: var(--feb-ink); --bs-focus-ring-width: var(--feb-focus-width); --bs-focus-ring-opacity: 1; /* --bs-primary traegt ausschliesslich die Primaeraktion (Button, R2b). Als Flaechen- oder Textutility (.bg-primary/.text-primary) ist der Akzent laut Spezifikation 8.2 verboten - er wird im Frontend nicht verwendet. */ --bs-primary: var(--feb-accent); --bs-primary-rgb: 5, 101, 245; --bs-secondary: var(--feb-ink); --bs-secondary-rgb: 11, 13, 14; --bs-light: var(--feb-grey-50); --bs-light-rgb: 244, 245, 246; --bs-dark: var(--feb-ink); --bs-dark-rgb: 11, 13, 14; --bs-success: var(--feb-success); --bs-success-rgb: 27, 122, 69; --bs-danger: var(--feb-danger); --bs-danger-rgb: 176, 38, 28; --bs-warning: var(--feb-warning); --bs-warning-rgb: 138, 90, 0; --bs-info: var(--feb-info); --bs-info-rgb: 51, 56, 60; /* Kalte Bootstrap-Restgraustufen auf die neue Leiter ziehen (Konzept-Review M9: zwei konkurrierende Grau-Familien). */ --bs-white: var(--feb-white); --bs-black: var(--feb-ink); --bs-gray: var(--feb-grey-500); --bs-gray-dark: var(--feb-grey-800); --bs-gray-100: var(--feb-grey-50); --bs-gray-200: var(--feb-grey-100); --bs-gray-300: var(--feb-grey-200); --bs-gray-400: var(--feb-grey-300); --bs-gray-500: var(--feb-grey-400); --bs-gray-600: var(--feb-grey-500); --bs-gray-700: var(--feb-grey-600); --bs-gray-800: var(--feb-grey-800); --bs-gray-900: var(--feb-grey-900); /* Die .bg-gradient-Utility stilllegen: Verlaeufe sind in der neuen Sprache nur als Scrim zulaessig (Konzept-Review M11). */ --bs-gradient: none; } /* ============================================================ Legacy-Aliase - erlauben die schrittweise Migration Alle 29 theme-eigenen Custom Properties aus dem :root von style.min.css werden hier neu belegt. Zusaetzlich werden die drei nachweislich UNDEFINIERTEN Tokens --dark, --gray-300 und --gray-700 erstmals definiert (Bestandsinventur R9): sie wirkten bisher nur ueber ihre Inline-Fallbacks (#1a1a17, #cccccc, #4a4a4a) und damit am Token vorbei. .paragraph-comparison__cell { color: var(--gray-700) } stand sogar ohne Fallback da - diese Deklaration war ungueltig und wird jetzt gueltig. ============================================================ */ :root { --background: var(--feb-white); --foreground: var(--feb-ink); --card: var(--feb-grey-50); --card-foreground: var(--feb-ink); /* --primary/--accent bewusst auf Ink, NICHT auf die Akzentfarbe: sie steuern im Bestand Header-Hintergrund, Links, Mega-Icons, .bg-accent-Sektionen, Suchbutton, Pagination und Fokus. Der Akzent bleibt der Primaeraktion vorbehalten (css/redesign/buttons.css, R2b). */ --primary: var(--feb-ink); --primary-foreground: var(--feb-white); --accent: var(--feb-ink); --accent-foreground: var(--feb-white); --secondary: var(--feb-grey-50); --secondary-foreground: var(--feb-ink); --muted: var(--feb-grey-100); --muted-foreground: var(--feb-grey-500); --destructive: var(--feb-danger); --destructive-foreground: var(--feb-white); --border: var(--feb-border); --input: var(--feb-border-strong); --off-white: var(--feb-grey-50); /* Dunkle Sektionsflaeche der gesamten Website: bisher ein Fallback fuer ein Token, das es nicht gab (.paragraph-section.bg-dark). */ --dark: var(--feb-ink); --light: var(--feb-grey-50); --white: var(--feb-white); --black: var(--feb-black); /* Grauleiter. Abweichung von der wortwoertlichen Zuordnung in Spezifikation 4.1: --gray-400 und --gray-600 tragen im Bestand ausschliesslich TEXT (Stats-Label, Mega-Heading, Card-Small bzw. Section-Lead, Card-Text, Captions). Auf --feb-grey-400 (3,23:1) abgebildet blieben sie unter der AA-Schwelle - genau der Befund H8 des Konzept-Reviews. Sie werden deshalb je eine Stufe dunkler gelegt: --gray-400 -> grey-500 (5,31:1), --gray-600 -> grey-600 (7,92:1). Die Zweistufigkeit der Hierarchie bleibt erhalten, beide bestehen den Kontrasttest. */ --gray-50: var(--feb-grey-50); --gray-100: var(--feb-grey-100); --gray-200: var(--feb-grey-200); --gray-300: var(--feb-grey-300); --gray-400: var(--feb-grey-500); --gray-500: var(--feb-grey-500); --gray-600: var(--feb-grey-600); --gray-700: var(--feb-grey-700); --gray-800: var(--feb-grey-800); --gray-900: var(--feb-grey-900); /* --feb-gray-* (mit "a") wird von Content-Inline-Styles referenziert (Paragraph 118 und 1885) und lief bisher ins Leere: Flaechen blieben transparent. Bewusst korrekt auf die neue Leiter gesetzt statt unbelegt gelassen (Bestandsinventur R9). Nicht zu verwechseln mit dem kanonischen Namensraum --feb-grey-* (mit "e"). */ --feb-gray-50: var(--feb-grey-50); --feb-gray-100: var(--feb-grey-100); --feb-gray-200: var(--feb-grey-200); --feb-gray-300: var(--feb-grey-300); --feb-gray-400: var(--feb-grey-500); --feb-gray-500: var(--feb-grey-500); --feb-gray-600: var(--feb-grey-600); --feb-gray-700: var(--feb-grey-700); --feb-gray-800: var(--feb-grey-800); --feb-gray-900: var(--feb-grey-900); --radius: 0; /* Header 56 px mobil / 72 px ab 768 px (Spezifikation 9.2, bisher 52 px). body { padding-top: calc(var(--nav-h) + 2rem) } zieht automatisch mit. */ --nav-h: var(--feb-header-h-sm); --navbar-height: var(--nav-h); /* Laufweite auf 0 - Hierarchie entsteht ueber Groesse und Weissraum. */ --tracking-normal: 0; --font-sans: var(--feb-font-sans); --font-mono: var(--feb-font-mono); } @media (min-width: 768px) { :root { --nav-h: var(--feb-header-h); } } /* ============================================================ Dunkler Kontext - ein Klassen-Scope statt zweiter Palette (Spezifikation 4, Ende) Die Bestandsklassen .paragraph-section.bg-dark / .bg-accent, der Footer, die Offcanvas-Schublade und - seit W4-1 - die gesamte Kopfzone werden mit aufgenommen, damit alles Token-basierte darin automatisch invertiert. ============================================================ */ .feb-on-dark, .feb-section--ink, .feb-section--dark, .paragraph-section.bg-dark, .paragraph-section.bg-accent, .brm-header, .brm-footer, .brm-offcanvas { --feb-surface: var(--feb-ink); --feb-surface-muted: var(--feb-grey-900); --feb-text: var(--feb-text-inverse); --feb-text-secondary: var(--feb-text-inverse-secondary); --feb-text-muted: var(--feb-text-inverse-muted); --feb-text-disabled: var(--feb-text-inverse-disabled); --feb-border: var(--feb-border-inverse); --feb-border-strong: var(--feb-border-inverse-strong); --feb-border-ink: var(--feb-white); --feb-focus: var(--feb-focus-inverse); } /* Die Kopfzone ist nicht Anthrazit, sondern Schwarz. Ihre Panels (Megamenue, Suchpanel) heben sich mit --feb-header-panel eine Stufe ab und tragen eine Kante aus --feb-header-edge (3,95:1 gegen Schwarz); die Flaeche selbst wuerde mit 1,08:1 keine Grenze bilden. */ .brm-header { --feb-surface: var(--feb-header-bg); --feb-surface-muted: var(--feb-header-panel); --feb-border: var(--feb-header-hairline); --feb-border-strong: var(--feb-header-edge); } /* Nur die reinen Redesign-Klassen tragen zusaetzlich Flaeche und Textfarbe. Die Bestandsklassen bringen ihren Hintergrund selbst mit und werden hier nicht angefasst. */ .feb-on-dark, .feb-section--ink, .feb-section--dark { color: var(--feb-text); background-color: var(--feb-surface); }