/* ========================================================= Autocenter IDEAL — Design Tokens (Single Source of Truth) ========================================================= Helles Theme als DEFAULT (Rebrand Sprint 0). Wird VOR allen anderen Stylesheets eingebunden (siehe base.njk). Token-Strategie. WICHTIG: Token-Namen hier mit Komma trennen, NICHT mit Slash — ein Stern unmittelbar vor einem Slash bildet die Kommentar-Schluss- Sequenz und schließt diesen Kommentar vorzeitig, wodurch der gesamte :root-Block verloren geht (Ursache der Times-New-Roman-Regression, render-check(c)). - NEUE Namen (--bg, --surface, --text, --accent-*, --font-*, --fs-*) sind ab jetzt KANONISCH. - Die ALTEN Namen (--red, --gy*, --lt, --w, --ff, --ft) bleiben als ALIAS erhalten, damit die noch nicht migrierten Komponenten- CSS (home.css, fahrzeuge.css, …) unverändert weiterlaufen. Die Migration der Komponenten auf die neuen Tokens erfolgt in den Folge-Sprints; bis dahin rendern jene Bereiche bewusst noch dunkel. ========================================================= */ :root { /* ---------- Farben (helles Theme) ---------- */ --bg: #f7f7f5; /* Seiten-Hintergrund (hell) */ --surface: #ffffff; /* Karten / Panels */ --surface-alt: #f4f4f2; /* abgesetzte Sektionen (= bisheriges Hell) */ --text: #14110f; /* Haupttext (nahezu schwarz) */ /* Sekundärtext. Von #5c5b58 auf #4a4946 abgedunkelt, seit das globale Hintergrundbild durch die Sektionen scheint: der Untergrund ist dadurch stellenweise dunkler als reines Off-White, und der alte Wert fiel im Fliesstext unter 4.5:1 (gemessen 3.66:1 auf .u-teaser-p). */ --text-muted: #4a4946; /* Sekundärtext */ --accent-red: #E82028; /* ACI-Rot (Akzent, CTAs, „IDEALE") */ --accent-dark: #0a0a0a; /* dunkle Akzentflächen (z. B. CTA-Bänder) */ --border: #e2e2dd; /* Linien / Ränder */ /* ---------- Reskin-Flächen (Sprint Reskin, kanonisch) ---------- Warme, ruhige Flächen statt reinweiß; dunkle „Anker"-Sektionen für Ankaufstation/Kennzahlen, Ankauf-Teaser, Trust-Bar. */ --surface-warm: #f5f3ef; /* warmes Off-White (helle Sektionen) */ /* Karten wieder deckend: sie tragen Fliesstext, Preise und Eckdaten. Ein durchscheinendes Foto macht diese Flaechen unruhig. Der Bild-Effekt lebt an den Sektionsgrenzen, nicht in den Inhaltsflaechen. */ --surface-card: #ffffff; /* Karten auf warmem Grund */ --surface-dark-anchor: #101216; /* dunkle Anker-Sektion (Kennzahlen/Ankauf/Trust) */ --surface-dark-card: #191c22; /* erhöhte Karte auf dunklem Anker */ --border-hairline: rgba(20, 17, 15, .09); /* Haarlinie auf hell */ --border-hairline-dark: rgba(255, 255, 255, .10); /* Haarlinie auf dunkel */ --text-on-dark: #f4f4f2; /* Text auf dunkler Anker-Sektion */ /* War #a7abb3 -- wie --gy aus der Zeit deckender dunkler Sektionen. Auf dem durchscheinenden Foto kam der Ton auch mit dem verstaerkten Scrim nur auf ~4.1:1. Gleiche Anhebung wie bei --gy/--gy-light, damit Sekundaertext ueberall traegt (z. B. .filter-count auf /fahrzeuge/, Footer-Subheads). */ --text-on-dark-muted: #ccced2; /* Sekundärtext auf dunkel */ /* Weicher: groesserer Blur-Radius bei gleicher/niedrigerer Deckkraft. Nahschatten (erste Zeile) etwas dezenter, Fernschatten (zweite Zeile) breiter verteilt -- diffuses Licht statt kompaktem Schlagschatten. */ --shadow-card: 0 1px 3px rgba(20, 17, 15, .04), 0 16px 40px rgba(20, 17, 15, .07); --shadow-card-hover: 0 8px 20px rgba(20, 17, 15, .07), 0 28px 60px rgba(20, 17, 15, .12); --shadow-card-dark: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .32); /* ---------- Spacing / Vertikaler Rhythmus ---------- VERBINDLICH: Sektions- und Komponentenabstände NUR über diese Tokens. Ad-hoc-Pixelwerte für vertikalen Rhythmus sind nicht zulässig. WICHTIG — Hierarchie statt Gleichmaß: vorher lagen ALLE Sektionen bei exakt 60px oben/unten. Dadurch bekamen Haupt- und Unterbereiche dieselbe Gewichtung und die Seite wirkte rhythmisch flach. Die Skala unterscheidet jetzt bewusst zwei Ebenen (--space-section-y vs. --space-subsection-y). Ebenen: section-y 96–120px große Hauptsektionen (Bestand, Ankauf, …) subsection-y 48–64px Unterbereiche (Trust-Bänder, Kennzahlen, Cred) xl 48px große Block-Trennung / Text → Content lg 32px Beschreibung → Karten/Buttons md 20px Karten-Innenabstand, Karten-Gap sm 12px enge Paarungen xs 8px Label → Headline 2xs 4px Icon-/Label-Feinabstand */ --space-gutter: 24px; /* horizontales Seiten-Padding */ --space-section-y: clamp(72px, 8vw, 112px); /* Hauptsektionen (war fix 60px) */ --space-subsection-y: clamp(40px, 4.5vw, 60px);/* Unterbereiche/Bänder */ --space-block: clamp(20px, 3vw, 32px); /* Blöcke innerhalb einer Sektion */ --space-stack: 16px; /* kleiner Stack-Abstand */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 48px; /* ---------- Section-Header-Rhythmus (Label → H2 → Text → Content) ---------- Ein System für ALLE Sektionen, damit jede „aus einem Guss" wirkt. Bisher standen die drei Abstände je nach Sektion unterschiedlich (mal 22px, mal 16px h2-margin, Text-Abstand teils gar nicht gesetzt). */ --space-label-h: 10px; /* Section-Label → H2 */ --space-h-text: 18px; /* H2 → Beschreibung */ --space-text-content: 40px; /* Beschreibung → Karten/Buttons */ /* ---------- Scrim-System (Sprint Full-Bleed-Background) ---------- Über dem globalen Hintergrundbild liegt pro Sektion GENAU EIN Scrim. Nur diese zwei Tokens verwenden — weitere Abstufungen erzeugen an den Sektionsgrenzen sichtbare Nähte. --scrim-light : helle Sektionen (warmes Off-White #f5f3ef) --scrim-dark : dunkle Anker-Sektionen (#101216) Die Übergangszone zwischen zwei Tonalitäten ist --scrim-fade hoch und wird als linear-gradient von einem Token zum anderen gefahren. Fuenfte Runde: der KOERPER der Sektion war praktisch deckend (.98/.97), das Foto blieb dadurch nur in den schmalen Kantenzonen sichtbar. Auf User-Wunsch transparenter gemacht (.86/.85), dann auf User-Wunsch die HELLEN Sektionen nochmal weiter abgesenkt auf .80 (sechste Runde) — --scrim-dark bleibt bei .85, nur bei Weiss war noch mehr Foto gewuenscht. Kontrast nachgerechnet (worst case: sehr dunkle Foto-Schattenstelle unter --scrim-light, sekundaerer Fliesstext --text-muted): .80 ergibt 5.30:1, komfortabler Puffer über der 4.5:1-AA-Pflichtgrenze. .75 waere mit 4.71:1 noch technisch bestanden, aber ohne Sicherheitsabstand — .80 ist die unterste vertretbare Stufe ohne Kontrast-Risiko. */ --scrim-light: rgba(245, 243, 239, .80); --scrim-dark: rgba(16, 18, 22, .85); /* Durchgehender Foto-Scrim der dunklen Seiten. War als rgba(13,14,17,.40) an 15 Stellen in 6 Dateien hartkodiert -- jetzt EIN Token, damit die Staerke an einer Stelle regelbar ist und nicht wieder auseinanderlaeuft. .58 statt .40 (User-Entscheidung: "ueberleg, ob es sinnvoller ist, einen dunkleren Layer ueber das Hintergrundbild zu legen" -- ist es): nachgerechnet gegen die hellste Fotostelle (Wabenleuchten im Showroom) traegt .40 nur Weiss und --text-on-dark ueber die AA-Grenze; jeder Sekundaerton faellt durch. Bei .58 kommen die hellen Sekundaertoene mit dazu, das Foto bleibt aber klar erkennbar (bei .70+ wird es zur Dekor-Textur). Die restliche Luecke schliessen die Textfarben, nicht noch mehr Deckung -- #888 als Fliesstext auf Foto passt bei KEINER Scrim-Staerke und wurde ersetzt. */ --scrim-photo: rgba(13, 14, 17, .58); --scrim-fade: 96px; /* Weiche Kante an Ober- und Unterkante jeder Sektion — DAS ist der Uebergangs-Effekt. Nur hier wird der Scrim duenner und das Foto blitzt dezent durch. --scrim-edge : wie weit die Zone reicht --scrim-edge-alpha: Rest-Deckung an der aeussersten Kante. Nicht bis `transparent` ausblenden — an den Kanten steht Inhalt, und ohne Scrim-Rest faellt der Textkontrast dort unter 4.5:1 (gemessen 1.90:1 bei vollem Ausblenden). */ /* Vierte Runde: 200px/.55 ergab auf der kompletten Startseite (viele Sektionen hintereinander) zu viele breite, blasse Verlaufsstreifen mit durchscheinendem Foto — summierte sich zu "leeren Flaechen" statt einzelner dezenter Naehte. Radikal gekuerzt auf 28px: die Kante wird zu einer feinen Linie statt einem Streifen. Rest-Deckung gleichzeitig angehoben (.72 statt .55) — bei der kuerzeren Zone reicht das laengst fuer sicheren Kontrast (>6.9:1 im Worst-Case nachgerechnet, vorher bei .55 schon 6.95:1 sicher). Das Foto-Durchschein-Konzept bleibt, faellt aber nicht mehr als eigenstaendige Flaeche auf. */ /* Fuenfte Runde -- User-Entscheidung: KEINE Uebergaenge mehr, weder als Streifen noch als feine Linie. Die dunkle Flaeche laeuft auf jeder Seite durchgehend bis zur Kante. Umgesetzt ueber die Tokens statt ueber Eingriffe in die ~15 Masken-Regeln: mit Breite 0 und voll deckendem Kanten-Alpha kollabiert JEDE Maske (.sec, .bs, die seam-flat-Modifier, .cred, .u-cta, .page-hero, .ftr, .leistungen-sec) zu einer soliden Flaeche -- ACHTUNG, hier lag ein Bug: die Aufzaehlung stand vorher als "seam-flat-Stern-Slash-cred" da -- diese Zeichenfolge BEENDET den Kommentar mitten im Satz. Der Resttext wurde als CSS geparst und hat die folgende --scrim-edge-Deklaration verschluckt, sodass die Variable LEER war. Folge: jedes calc() mit ihr wurde ungueltig und riss die komplette padding-Shorthand von .page-hero mit (CSS verwirft bei ungueltigem var() die GANZE Deklaration, nicht nur den einen Wert) -- der Hero-Text rutschte dadurch unter die Nav. Nie Glob-Muster mit Slash in CSS-Kommentare schreiben. -- so kann kein Rest-Fade irgendwo uebersehen werden. Die Regeln bleiben unveraendert bestehen; Zurueckdrehen ist ein Zwei-Zeilen-Edit hier. */ --scrim-edge: 0px; --scrim-edge-alpha: rgba(0, 0, 0, 1); /* Kante fuer den Hero-Ausklang (.hero::after, main.css). Nach direktem Vergleich mit einem Referenzbild: duenner und dezenter als sogar der Standard --scrim-edge (28px). NICHT hochziehen -- alle bisherigen Versuche in Richtung "breiter" (40px, 56px, 140px) wurden vom User ausdruecklich als falsch zurueckgewiesen. Jetzt 0: der Hero-Ausklang ist derselbe Uebergang an der Hero-Unterkante und faellt mit derselben Entscheidung weg. Das padding-bottom von .hero-in rechnet mit dieser Variable und schrumpft automatisch mit. */ --hero-fade: 0px; /* ---------- Typografie ---------- */ --font-heading: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-h1: clamp(2rem, 5vw, 3.25rem); --fs-h2: clamp(1.6rem, 3.5vw, 2.25rem); --fs-h3: clamp(1.25rem, 2.2vw, 1.5rem); --fs-body: 1rem; /* 16px */ --fs-small: 0.8125rem; /* 13px */ --lh-h1: 1.08; --lh-heading: 1.15; --lh-body: 1.6; --lh-small: 1.5; /* ---------- Layout / Elevation / Transitions (unverändert übernommen) ---------- */ --maxw: 1200px; --nav-h: 108px; /* Platz fuer das vergroesserte BVfK-Siegel (.nav-bvfk, main.css) */ --radius: 12px; --radius-lg: 20px; --shadow-sm: 0 4px 16px rgba(0, 0, 0, .2); --shadow-md: 0 16px 40px rgba(0, 0, 0, .3); --shadow-lg: 0 40px 80px rgba(0, 0, 0, .5); --t-fast: .2s; --t-mid: .3s; /* ---------- ALIAS-LAYER: alte Token-Namen → neue/erhaltene Werte ---------- Werte bewusst wie bisher, damit nicht-migrierte Komponenten 1:1 weiterlaufen. In Folge-Sprints schrittweise durch die kanonischen Tokens ersetzen. */ --red: var(--accent-red); --red-dark: #C41A1A; --red-text: #BF1F26; /* Brand-Rot fuer KLEINEN Text auf dunklem Grund. #E82028 erreicht dort nur 4.29:1 und verfehlt die 4.5:1 fuer Fliess-/Labeltext (die 3:1-Ausnahme gilt erst ab 18px bzw. 14px bold). Diese Aufhellung haelt 5.08:1 und bleibt eindeutig das Marken-Rot. Gegenstueck zu --red-text auf hell. */ --red-on-dark: #F04048; /* --gy war #888 und --gy-light #b0b0b0. Beide stammen aus der Zeit, als die dunklen Sektionen DECKEND waren -- dort trugen sie problemlos. Seit das Hintergrundfoto ueberall durchscheint, sind sie Sekundaertext auf einem wechselnden Untergrund: gegen die hellste Fotostelle kam #888 selbst bei einem kraeftigen .58-Scrim nur auf 2.65:1 (Pflicht: 4.5:1). Genau das waren die "grauen Texte, die schlecht lesbar sind". Aufgehellt statt an ~26 Einzelstellen ueberschrieben -- beide Tokens werden fast ausschliesslich fuer Text auf dunklem/Foto-Grund benutzt. Neue Werte gegen dieselbe Fotostelle: 5.72:1 bzw. 7.10:1. Der optische Abstand zu --text-on-dark (8.53:1) bleibt erhalten, Sekundaertext wirkt also weiterhin sekundaer, nur eben lesbar. */ --gy: #c8cacd; /* #e0e2e5 lag bei der Pixel-Messung am hellsten Bildpunkt hinter der Hero-Subline auf 4.49:1 -- rechnerisch genau auf der Grenze. Einen Tick heller, damit auch die hellste Fotostelle Puffer hat. */ --gy-light: #eceef0; --lt: var(--surface-alt); --w: #fff; --ff: var(--font-body); --ft: var(--font-heading); } /* ========================================================= ROT-AKZENT-GUIDELINE (#E82028) — verbindlich fürs Reskin ========================================================= Rot ist ein AKZENT, nie eine Fläche. Erlaubt ist Rot NUR für: - Haupt-CTA (genau ein roter Button pro Sektion/Screen) - aktive States (aktiver Tab, aktiver Filter, Fokus/Hover-Highlight) - Eyebrow-Strich (die kleine Linie vor/neben dem Kicker-Label) - +/%-Zeichen an Kennzahlen (nur das Zeichen, nicht die ganze Zahl) - Hover-Zustände (Border/Text/Icon wechselt auf Rot) - kleine Icon-Akzente (Check-Icons, Sterne, Pfeil-Links) NICHT erlaubt: rote Vollflächen, rote gefüllte Nummernkreise, rote Karten-Hintergründe, kursiv-rote Editorial-Phrasen. Im Zweifel: dunkel/ neutral rendern, Rot sparsam als Signal setzen. */