/* ════════════════════════════════════════════════════════════════════════ PATINA FAHRZEUGHISTORIE — Landingpage Design-Tokens + Theme-System 1:1 aus dem App-Repo (app/globals.css): Hell ist Standard, Dunkel greift über die Systemeinstellung — außer der Nutzer hat in der App manuell gewählt (data-theme="hell" | "dunkel" auf , gesetzt vor dem ersten Paint durch das Inline-Skript im ). Akzent = Verdigris #4a8c7b. Keine neuen Farben, keine neuen Schriften. ═══════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ SCHRIFTEN — SELBST GEHOSTET (fonts/, SIL OFL — Lizenzen liegen daneben) Keine Google-Server: kein fonts.googleapis.com/fonts.gstatic.com mehr (IP-Übertragung an Google, LG München 2022). Variable Fonts, latin-Subset (deckt Umlaute, ß, „…", € ab — unicode-range dokumentiert das). Je Familie EINE Datei für beide Gewichte (400/500), deklariert wie zuvor von Google. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* — Farben hell (App: :root) — */ --paper: #faf9f6; --ink: #1a1a1a; --muted: #8b867b; --line: #e7e4dc; --accent: #4a8c7b; /* oxidiertes Kupfergrün / Verdigris */ --danger: #9c3a30; --glass: rgba(250, 249, 246, 0.6); --glass-line: rgba(26, 26, 26, 0.1); /* — Ghost-Button (zentrales System, s. CTA-BUTTON) — */ --btn-farbe: var(--ink); /* Rahmen + Text: hell = Tinten-Ton */ /* Leicht abgedunkeltes Verdigris NUR für die Hover-/Fokus-Füllung: Creme #faf9f6 auf #4a8c7b läge bei ~3,7:1 (unter WCAG AA 4,5:1), auf #3d7565 bei ~5,1:1. Die Markenfarbe --accent bleibt überall sonst unverändert. Themeunabhängig, daher nur hier definiert. */ --patina-gruen-tief: #3d7565; /* — Brevo-Meldungspanels (Erfolg/Fehler), theme-konform — */ --success: var(--patina-gruen-tief); /* Text/Rahmen Erfolg (AA auf --paper) */ --success-bg: rgba(74, 140, 123, 0.08); /* Grund Erfolg: Verdigris-Hauch */ --danger-bg: rgba(156, 58, 48, 0.06); /* Grund Fehler: Hauch aus --danger */ /* — Scheinwerfer-Glimmen (Hero-Coupé): Ton aus --accent aufgehellt, im Dunkeln eine Spur deutlicher. Dunkle Werte an BEIDEN Stellen pflegen. — */ --glimmen-farbe: #7ab5a4; --glimmen-staerke: 0.5; /* — Lebende Zeichnung (Hero-Coupé): Basisstrich + Glanz-Überlagerungen. Dunkle Werte an BEIDEN Stellen pflegen. — */ --zeichnung-strich: #4a8c7b; --zeichnung-glanz: #3d7565; /* — Schriften (App: Geist + Fraunces) — */ --font-sans: "Geist", system-ui, sans-serif; --font-serif: "Fraunces", Georgia, serif; /* — Maße — */ --maxw: 64rem; --gutter: clamp(1.5rem, 5vw, 4rem); --section-y: clamp(5rem, 12vw, 9rem); --track-wide: 0.1em; /* App: tracking-widest */ --track-sper: 0.42em; /* gesperrt für die Wortmarke */ } /* Dunkle Werte — identisch an beiden Stellen pflegen (wie in der App). */ :root[data-theme="dunkel"] { color-scheme: dark; --paper: #181716; --ink: #ece9e4; --muted: #9a958a; --line: #2e2c28; --accent: #4a8c7b; --danger: #e08c82; --glass: rgba(24, 23, 22, 0.6); --glass-line: rgba(255, 255, 255, 0.12); --btn-farbe: var(--accent); /* Ghost-Button: dunkel = Verdigris */ --success: #7ab5a4; /* aufgehelltes Verdigris (AA), wie --danger dunkel aufhellt */ --success-bg: rgba(74, 140, 123, 0.12); --danger-bg: rgba(224, 140, 130, 0.08); --glimmen-farbe: #8fd0bc; --glimmen-staerke: 0.75; --zeichnung-strich: #85c3af; --zeichnung-glanz: #cdf2df; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { color-scheme: dark; --paper: #181716; --ink: #ece9e4; --muted: #9a958a; --line: #2e2c28; --accent: #4a8c7b; --danger: #e08c82; --glass: rgba(24, 23, 22, 0.6); --glass-line: rgba(255, 255, 255, 0.12); --btn-farbe: var(--accent); --success: #7ab5a4; --success-bg: rgba(74, 140, 123, 0.12); --danger-bg: rgba(224, 140, 130, 0.08); --glimmen-farbe: #8fd0bc; --glimmen-staerke: 0.75; --zeichnung-strich: #85c3af; --zeichnung-glanz: #cdf2df; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ── Raute / Diamant — wiederkehrendes Motiv ─────────────────────────────── */ .raute { display: inline-block; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; } /* ════════════════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════════════════ */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 3.5rem); padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 6vw, 4rem); text-align: center; position: relative; } /* — Wortmarke — */ .wortmarke { display: inline-flex; flex-direction: column; align-items: center; gap: 0.85rem; color: var(--ink); text-decoration: none; } .wortmarke__patina { width: clamp(11rem, 28vw, 16rem); height: auto; display: block; } .wortmarke__sub { font-family: var(--font-sans); font-size: clamp(0.62rem, 1.6vw, 0.72rem); text-transform: uppercase; letter-spacing: var(--track-sper); color: var(--muted); padding-left: var(--track-sper); /* optischer Ausgleich der Sperrung */ } /* — Showcase / Coupé — */ .showcase { width: 100%; max-width: 46rem; } .coupe { width: 100%; height: auto; overflow: visible; } /* Uhlenhaut-Coupé — filigrane Linienzeichnung. Strichstärken sitzen als stroke-width-Attribute im SVG (bewusst OHNE vector-effect: non-scaling-stroke — das bräche die dasharray-Animation in Chromium; s. STOLPERFALLE in CLAUDE.md), hier nur die Farben aus den Tokens: Basisstriche --zeichnung-strich, Schimmer-Überlagerungen (.glanz) --zeichnung-glanz, das Glimmen --glimmen-farbe. Es gibt KEINE CSS-Keyframes fürs Coupé mehr: OHNE JavaScript und bei reduzierter Bewegung steht hier die vollständige, ruhende Zeichnung (nur .glanz/#glimmen sind per opacity-Attribut unsichtbar) — die „lebende Zeichnung" dirigiert js/main.js über die Web Animations API und verdeckt die Striche erst selbst. */ .coupe path, .coupe circle { stroke: var(--zeichnung-strich); } .coupe .glanz { stroke: var(--zeichnung-glanz); } #glimmen circle { fill: var(--glimmen-farbe); stroke: none; } /* Wird nur noch vom Scroll-Hinweis genutzt. */ @keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* — Hero-Copy + Formular — */ .hero__copy { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 34rem; } .lede { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.45; color: var(--ink); } /* Dezente Subline unter dem Slogan — gleiche ruhige Setzung wie .waitlist__text. Die negative Marge rückt sie näher an den Slogan heran, als es der Flex-gap (2rem) von .hero__copy täte. */ .lede-sub { margin: -1.1rem 0 0; max-width: 30rem; font-size: 0.95rem; line-height: 1.6; color: var(--muted); } .scroll-hinweis { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); opacity: 0.6; animation: schweben 3.5s ease-in-out infinite; } /* ════════════════════════════════════════════════════════════════════════ CTA-BUTTON — zentrales Ghost-System (Hero-CTA + Brevo-ANMELDEN) Ruhe: transparente Füllung, Rahmen + Text aus --btn-farbe (hell: Tinten-Ton --ink, dunkel: Verdigris --accent). Hover/Fokus: Füllung --patina-gruen-tief (AA-Kontrast zu Creme, s. Token-Kommentar oben), Text im hellen Cremeton (#faf9f6 = --paper hell, fest in BEIDEN Themes — var(--paper) wäre im Dunkel-Theme dunkel). Funktioniert als