/* ========================================================================== KNS Beschichtung, Design-Tokens Werte stammen aus der Analyse von rost-racing.de (siehe 01_Analyse_Designbriefing.md, Kapitel 2.3 und 5.1). Farben, Schrift und Abstaende werden nur hier geaendert, nirgends sonst. ========================================================================== */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latin-italic.woff2') format('woff2'); } :root { /* Die Seite ist schon dunkel. Ohne diese Angabe (und die Meta-Zeile color-scheme im Kopf jeder Seite) dunkeln Android-Browser sie noch einmal ab: Chrome mit "Websites abdunkeln", Samsung Internet im Dunkelmodus. Dabei wurde am 11.10.2026 der Chrom-Verlauf im Richtpreis fast schwarz (Preis unsichtbar) und der weisse Knopf "Jetzt Termin sichern" dunkel. Nebenbei zeichnet der Browser Kaestchen und Scroll- leisten jetzt passend dunkel. */ color-scheme: dark; /* ---- Flaechen --------------------------------------------------------- #121212 ist der Grundton von Rost Racing. Weicher als reines Schwarz, dadurch wirken Bilder auf echtem Schwarz davor noch tiefer. */ --bg: #121212; --bg-deep: #0a0a0a; --surface: #1a1a1a; --surface-2: #1f1f1f; /* ---- Text ------------------------------------------------------------- Kevin (22.09.2026): "mehr weiss, dass man die Schrift besser sieht". Fliesstext und Nebentexte sind deshalb deutlich heller als bei Rost (dort 0,7 bzw. 0,5). Kontrast auf #121212: 13,5:1 und 9,4:1, also weit ueber der Vorgabe von 4,5:1. */ --text: #ffffff; --text-body: rgba(255, 255, 255, 0.88); --text-muted: rgba(255, 255, 255, 0.72); /* ---- Linien ----------------------------------------------------------- */ --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.87); --stripe: #ffffff; /* ---- Overlay ueber Bild-Bannern (Rost: 70 %) -------------------------- */ --overlay: rgba(0, 0, 0, 0.7); /* ---- Akzent ----------------------------------------------------------- Aktuell NICHT im Einsatz, die Seite ist bewusst monochrom wie Rost. Falls Kevin eine Markenfarbe will: Candy-Rot. Nie fuer kleinen Text, auf #121212 nur 2,6:1 Kontrast. Als Flaeche mit weisser Schrift ok. */ --accent: #b10604; --accent-hover: #d0140f; /* Gruen fuer den Richtpreis in der Vorlage (Leandro, 13.10.2026), die einzige Farbe auf der Seite. Auf #0a0a0a (Preis-Kasten) 11,4:1, auf #121212 10,8:1 Kontrast, also auch fuer kleine Schrift gut genug. */ --preis: #4ade80; /* Chrom-Verlauf, nur fuer Hochglanzverdichten-Momente. */ --chrome: linear-gradient(103deg, #e9eaec, #fff 24%, #dcdee1 48%, #fff 70%, #e4e6e8); /* ---- Schrift ---------------------------------------------------------- */ --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Rost arbeitet mit leicht positiver Laufweite. Das macht Montserrat breiter und "technischer". Negative Laufweite war der Demo-Look. */ --track: 0.04em; --track-wide: 0.13em; --track-logo: 0.32em; /* Eine Stufe groesser als zuvor (Kevin, 22.09.2026: "ein bisschen groesser"). Fliesstext bleibt bei 16 px, sonst werden Zeilen zu kurz und die Formulare zu hoch. */ --fs-eyebrow: 0.8125rem; --fs-small: 0.9375rem; --fs-body: 1rem; --fs-lead: clamp(1.125rem, 0.3vw + 1rem, 1.25rem); --fs-h3: 1.1875rem; --fs-h2: clamp(2.0625rem, 2.4vw + 1rem, 2.75rem); --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.75rem); --lh-body: 1.8; --lh-tight: 1.1; /* ---- Raster und Abstaende -------------------------------------------- */ --page: 1200px; --gutter: clamp(16px, 4vw, 40px); --gap: 16px; --section: clamp(4rem, 8vw, 7rem); /* ---- Formen ----------------------------------------------------------- */ --radius-card: 24px; --radius: 12px; --radius-btn: 4px; /* Das Erkennungszeichen von Rost: schraege Kanten wie beim Rennsport. */ --shape-slant: polygon(15% 0, 100% 0, 85% 100%, 0 100%); /* ---- Bewegung --------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.35s; --dur-slow: 0.7s; /* ---- Ebenen ----------------------------------------------------------- */ --z-header: 50; --z-mobilebar: 60; --z-drawer: 80; --z-banner: 90; --z-modal: 100; --header-h: 76px; --announce-h: 36px; --mobilebar-h: 72px; } @media (max-width: 720px) { :root { --header-h: 64px; } } /* Am Handy war die kleinste Stufe der Abschnitts-Ueberschriften 33 px. Auf 350 px nutzbarer Breite sind das gut 20 Zeichen pro Zeile, und damit brauchten Saetze wie "Woran du das richtige Verfahren erkennst" drei Zeilen. "Was wir aus deinem Teil machen" wurde sogar mitten im Wort getrennt ("dei-nem"), weil die Zeile sonst nicht aufging. 26 px ist dieselbe Groesse, die der Abschnitt "Hinter KNS steht Kevin" seit dem 27.09.2026 hat und die dort gut aussieht. Ab etwa 430 px waechst sie wieder mit, ab 601 px gilt unveraendert der Wert von oben. Fliesstext, H3 und H1 bleiben, wie sie sind. */ @media (max-width: 600px) { :root { --fs-h2: clamp(1.625rem, 2.4vw + 1rem, 2.75rem); } } /* Seitenraender inklusive Notch. Quer gehalten liegt beim iPhone links oder rechts die Kamera-Aussparung. viewport-fit=cover gibt der Seite die volle Breite, env() haelt Text und Knoepfe aus der Aussparung heraus. */ :root { --pad-l: max(var(--gutter), env(safe-area-inset-left)); --pad-r: max(var(--gutter), env(safe-area-inset-right)); } /* Handy quer: nur 320 bis 430 px Hoehe. Ankuendigung und Kontaktleiste fallen weg, der Header wird flacher (sections.css, "Handy quer"). */ @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) { :root { --header-h: 56px; --announce-h: 0px; --mobilebar-h: 0px; } }