/* ================================================================
DRIVIST DESIGN TOKENS
Interner Styleguide · Version 1.0 · März 2026
================================================================
VERWENDUNG:
Dieses File wird als erstes CSS in jeden HubSpot-Modul eingebunden.
Es definiert alle Design-Tokens als CSS Custom Properties.
Module die dieses File nutzen:
- live_cars_module.css (Lagerliste)
- live_fpa_module.css (Fahrzeugdetail / FPA)
- live_finanzierung_module.css (Finanzierungsrechner)
- live_bestellung_module.css (Bestellprozess)
STRUKTUR:
1. Farben – Basis-Palette
2. Farben – Semantische Tokens
3. Farben – Fahrzeugkategorie-Labels
4. Gradienten
5. Typografie
6. Schriftgrößen
7. Abstände (4pt Grid)
8. Radii
9. Schatten
10. Layout-Tokens (Breiten, Padding, Rhythmus)
11. Transitions / Animationen
12. Komponenten – Dark Section Header
13. Komponenten – Step-Badge
14. Komponenten – Buttons
15. Komponenten – Cards
16. Komponenten – Navigation (Sticky)
17. Breakpoints (Dokumentation)
18. Migration Map (alte → neue Token-Namen)
19. Zentrierung & Page-Wrapper (.drv-page-wrap)
20. Section-Rhythmus & Abstands-Regeln
21. Nutzerführung (Step-Flow, Seitenstruktur)
22. Desktop: Fullscreen-Listing
================================================================ */
/* ================================================================
1. FARBEN – BASIS-PALETTE
Rohe Farbwerte. Nicht direkt in Komponenten verwenden —
stattdessen die semantischen Tokens aus Sektion 2 nutzen.
================================================================ */
:root {
/* Mint / Primary Action ---------------------------------------- */
--palette-mint-100: #e6fbf3;
--palette-mint-200: #a8f0d0;
--palette-mint-400: #2fd68b; /* ← Primäre Akzentfarbe Drivist */
--palette-mint-500: #26b070; /* Hover / Active */
--palette-mint-600: #1a8a5a; /* Pressed */
/* Petrol / Brand-Dunkel --------------------------------------- */
--palette-petrol-900: #0d1820;
--palette-petrol-800: #1a252f;
--palette-petrol-700: #1c2b3a; /* Dark Header Basis */
--palette-petrol-600: #2c3e50; /* Hauptüberschriften */
--palette-petrol-500: #304661; /* Gradient Mitte */
--palette-petrol-400: #3b4c5e;
--palette-petrol-300: #4a5f75;
/* Ocean Blue / Akzent ---------------------------------------- */
--palette-blue-700: #1e3a8a;
--palette-blue-600: #2a5298; /* Gradient Ende (Dark Header) */
--palette-blue-500: #2980b9;
--palette-blue-400: #3b82f6;
/* Neutral / Text + Oberflächen ------------------------------- */
--palette-neutral-950: #0a0a0a;
--palette-neutral-900: #1a1a1a;
--palette-neutral-800: #1d1d1f;
--palette-neutral-700: #1f2933;
--palette-neutral-600: #3a3a3a;
--palette-neutral-500: #4a5568;
--palette-neutral-400: #6b6b6b;
--palette-neutral-300: #94a3b8;
--palette-neutral-200: #cbd5e1;
--palette-neutral-150: #e2e8f0;
--palette-neutral-100: #f1f5f9;
--palette-neutral-50: #f8fafc;
--palette-neutral-0: #ffffff;
/* Status-Farben ---------------------------------------------- */
--palette-red-500: #e53e3e;
--palette-red-100: rgba(229, 62, 62, 0.10);
--palette-orange-400: #f97316;
--palette-yellow-400: #f6ad55;
--palette-green-500: #38a169;
--palette-green-100: rgba(56, 161, 105, 0.10);
/* ================================================================
2. FARBEN – SEMANTISCHE TOKENS
Diese Tokens beschreiben die FUNKTION einer Farbe, nicht den Wert.
Komponenten nutzen ausschließlich diese Tokens — nie die Palette.
================================================================ */
/* Primär-Akzent (Mint) --------------------------------------- */
--c-accent: var(--palette-mint-400); /* #2fd68b */
--c-accent-hover: var(--palette-mint-500); /* #26b070 */
--c-accent-pressed: var(--palette-mint-600); /* #1a8a5a */
--c-accent-soft: var(--palette-mint-100); /* #e6fbf3 */
/* Brand-Blau / Dark (Petrol) --------------------------------- */
--c-brand: var(--palette-petrol-600); /* #2c3e50 */
--c-brand-dark: var(--palette-petrol-700); /* #1c2b3a */
--c-brand-soft: var(--palette-petrol-400); /* #3b4c5e */
--c-brand-deep: var(--palette-petrol-800); /* #1a252f */
/* Texthierarchie --------------------------------------------- */
--c-text-primary: var(--palette-neutral-700); /* #1f2933 – Haupttext */
--c-text-secondary: var(--palette-neutral-500); /* #4a5568 – Nebentext */
--c-text-muted: var(--palette-neutral-300); /* #94a3b8 – Labels, Meta */
--c-text-disabled: var(--palette-neutral-200); /* #cbd5e1 */
--c-text-on-dark: var(--palette-neutral-0); /* #ffffff – Haupttext auf dunklem BG */
--c-text-on-dark-soft: rgba(255, 255, 255, 0.70); /* Subtext auf dunklem BG */
--c-text-on-dark-muted: rgba(255, 255, 255, 0.45); /* Muted/Meta auf dunklem BG */
--c-icon-on-dark: var(--palette-neutral-0); /* #ffffff – Phosphor Icons auf dunklem BG */
--c-icon-on-dark-soft: rgba(255, 255, 255, 0.60); /* Phosphor Icons soft auf dunklem BG */
/* Text/Icons auf hellem Hintergrund (on-light) --------------- */
--c-text-on-light: var(--palette-neutral-700); /* #1f2933 – Alias: wie c-text-primary */
--c-text-on-light-soft: var(--palette-neutral-500); /* #4a5568 – Alias: wie c-text-secondary */
--c-text-on-light-muted: var(--palette-neutral-300); /* #94a3b8 – Alias: wie c-text-muted */
--c-icon-on-light: var(--palette-neutral-700); /* #1f2933 – Phosphor Icons auf hellem BG */
--c-icon-on-light-soft: var(--palette-neutral-400); /* Phosphor Icons soft auf hellem BG */
--c-white: var(--palette-neutral-0); /* #ffffff – Alias Legacy-Support */
/* Oberflächen / Hintergründe --------------------------------- */
--c-bg-page: var(--palette-neutral-50); /* #f8fafc – Seitenhintergrund */
--c-bg-card: var(--palette-neutral-0); /* #ffffff – Karten */
--c-bg-soft: var(--palette-neutral-100); /* #f1f5f9 – Sanfte Flächen */
--c-bg-alt: #edf2f7; /* Alternierende Zeilen */
--c-bg-overlay: rgba(255, 255, 255, 0.92); /* Backdrop */
--c-bg-overlay-dark: rgba(28, 43, 58, 0.88); /* Dunkles Overlay */
/* Borders ---------------------------------------------------- */
--c-border: var(--palette-neutral-150); /* #e2e8f0 – Standard */
--c-border-strong: var(--palette-neutral-200); /* #cbd5e1 – Betont */
--c-border-accent: var(--palette-mint-400); /* Mint-Border für Focus */
/* Status ---------------------------------------------------- */
--c-danger: var(--palette-red-500);
--c-danger-soft: var(--palette-red-100);
--c-warning: var(--palette-yellow-400);
--c-warning-soft: var(--palette-yellow-50, #fffbeb);
--c-success: var(--palette-green-500);
--c-success-soft: var(--palette-green-100);
/* ================================================================
3. FARBEN – FAHRZEUGKATEGORIE-LABELS
Für Condition-Badges auf Fahrzeugkarten.
================================================================ */
--c-label-new: #2980b9; /* Neu */
--c-label-new-soft: rgba(41,128,185,0.10);
--c-label-used: var(--palette-petrol-600); /* Gebraucht */
--c-label-used-soft: rgba(44,62,80,0.10);
--c-label-demo: var(--palette-orange-400); /* Vorführwagen */
--c-label-demo-soft: rgba(249,115,22,0.10);
--c-label-electric: var(--palette-mint-400); /* Elektro */
--c-label-electric-soft: var(--palette-mint-100);
/* ================================================================
4. GRADIENTEN
================================================================ */
/* Haupt-Header-Gradient (Dark Cinematic) -------------------- */
--grad-header: linear-gradient(135deg, #1c2b3a 0%, #304661 60%, #2a5298 100%);
--grad-header-glow: radial-gradient(ellipse at 80% 50%, rgba(47, 214, 139, 0.18) 0%, transparent 65%);
/* Akzent-Gradient (Mint → Blue) ----------------------------- */
--grad-accent: linear-gradient(135deg, #2fd68b 0%, #2980b9 100%);
--grad-accent-soft: linear-gradient(135deg, rgba(47,214,139,0.08) 0%, rgba(41,128,185,0.08) 100%);
/* Subtile Verläufe ------------------------------------------ */
--grad-page-top: linear-gradient(180deg, rgba(47,214,139,0.06) 0%, rgba(255,255,255,0) 100%);
--grad-card-hover: linear-gradient(135deg, rgba(47,214,139,0.04) 0%, rgba(41,128,185,0.04) 100%);
/* Button-Gradienten ----------------------------------------- */
--grad-btn-primary: linear-gradient(135deg, #304661 0%, #2a5298 100%);
--grad-btn-primary-hover: linear-gradient(135deg, #2c3e50 0%, #2471a3 100%);
--grad-btn-cta: linear-gradient(135deg, #2fd68b 0%, #26b070 100%);
/* ================================================================
5. TYPOGRAFIE
================================================================ */
/* Schriftfamilien ------------------------------------------- */
--font-heading: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Roboto Mono", "Fira Code", "Cascadia Code", monospace;
--font-tech: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Font-Weights --------------------------------------------- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Letter-Spacing ------------------------------------------- */
--ls-tight: -0.04em; /* Headlines > 32px */
--ls-normal: -0.01em; /* Headlines 20-32px */
--ls-wide: 0.05em; /* Labels, Badges */
--ls-wider: 0.12em; /* Step-Badges, Caps */
/* Line-Heights --------------------------------------------- */
--lh-tight: 1.02; /* Hero Headlines */
--lh-heading: 1.2; /* Subheadings */
--lh-body: 1.6; /* Fließtext */
--lh-relaxed: 1.75; /* Long-form */
/* ================================================================
6. SCHRIFTGROSSEN (Fluid / clamp)
Konvention: --text-{size} für feste Werte,
--text-fluid-{size} für responsive clamp()-Werte
================================================================ */
--text-xs: 11px;
--text-sm: 13px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
--text-4xl: 40px;
/* Fluid – skaliert zwischen Breakpoints */
--text-fluid-hero: clamp(32px, 5vw, 64px); /* Haupt-Hero */
--text-fluid-h1: clamp(28px, 4vw, 48px); /* Page-Titel */
--text-fluid-h2: clamp(22px, 3vw, 36px); /* Section-Titel */
--text-fluid-h3: clamp(18px, 2.5vw, 28px); /* Card-Titel */
/* ================================================================
7. ABSTÄNDE – 4pt GRID
Alle Abstände sind Vielfache von 4px.
--space-{n} = n × 4px
================================================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ================================================================
8. RADII
================================================================ */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-2xl: 24px;
--radius-3xl: 28px;
--radius-pill: 999px; /* Vollrund (Buttons, Badges) */
/* ================================================================
9. SCHATTEN
================================================================ */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
--shadow-xl: 0 20px 40px -20px rgba(15, 23, 42, 0.24);
--shadow-2xl: 0 32px 64px -24px rgba(15, 23, 42, 0.30);
/* Spezial-Schatten ------------------------------------------ */
--shadow-glow-mint: 0 0 22px rgba(47, 214, 139, 0.35);
--shadow-glow-blue: 0 0 22px rgba(41, 128, 185, 0.30);
--shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
--shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.10);
/* Inset (Input-Focus) --------------------------------------- */
--shadow-focus: 0 0 0 3px rgba(47, 214, 139, 0.30);
--shadow-focus-error: 0 0 0 3px rgba(229, 62, 62, 0.25);
/* ================================================================
10. LAYOUT-TOKENS (Breiten, Padding, vertikaler Rhythmus)
================================================================ */
/* ── Breiten-System ────────────────────────────────────────── */
--layout-page-max: 1440px; /* Outer wrapper (HubSpot-Seite) */
--layout-content-max: 1120px; /* Standard-Inhalt-Spalte (zentriert) */
--layout-narrow-max: 760px; /* Single-col: Formulare, Checkout, FPA-Detail */
--layout-wide-max: 1280px; /* Breites Grid: Listing mit Sidebar */
--layout-form-max: 560px; /* Engster Container: Lead-Formulare, Summary */
/* ── Seitliche Abstände (Padding-X) ────────────────────────── */
--layout-padding-x-mobile: 16px; /* < 640px */
--layout-padding-x-tablet: 24px; /* 640px – 900px */
--layout-padding-x-desktop: 48px; /* > 900px */
/* ── Vertikale Rhythmus-Abstände ────────────────────────────── */
--layout-section-gap: var(--space-20); /* 80px – Abstand zwischen Page-Sections */
--layout-section-gap-sm: var(--space-12); /* 48px – kompaktere Sections (Mobile) */
--layout-block-gap: var(--space-10); /* 40px – Abstand innerhalb einer Section */
--layout-card-gap: var(--space-4); /* 16px – Grid-Gutter zwischen Cards */
--layout-card-gap-lg: var(--space-6); /* 24px – Grid-Gutter Desktop */
--layout-card-padding: var(--space-5); /* 20px – Innen-Abstand Card (Standard) */
--layout-card-padding-lg: var(--space-8); /* 32px – Innen-Abstand Card (groß) */
/* ── Fullscreen-Modus (Listing-Modul) ───────────────────────── */
--layout-fullscreen-top-offset: 60px; /* Höhe Sticky-Nav */
--layout-footer-height: 64px; /* Höhe Bottom-Bar (Mobile) */
/* ── Step-Flow (Nutzerführung) ──────────────────────────────── */
--layout-step-progress-h: 4px; /* Höhe der Progress-Bar */
--layout-step-connector-w: 20px; /* Breite Verbindungslinie zwischen Steps */
/* ================================================================
11. TRANSITIONS / ANIMATIONEN
================================================================ */
--transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce */
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
--easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
}
/* ================================================================
12. KOMPONENTE – DARK SECTION HEADER
Wird auf allen 4 Modulen als Page-Header eingesetzt.
Klasse: .drv-section-header
================================================================ */
.drv-section-header {
position: relative;
overflow: hidden;
background: var(--grad-header);
border-radius: var(--radius-3xl);
padding: var(--space-12) var(--space-12); /* 48px */
}
@media (max-width: 640px) {
.drv-section-header {
padding: var(--space-8) var(--space-5); /* 32px / 20px */
border-radius: var(--radius-2xl);
}
}
/* Mint-Glow Radial im Header */
.drv-section-header::before {
content: "";
position: absolute;
inset: 0;
background: var(--grad-header-glow);
pointer-events: none;
}
/* Inhalt immer über dem Glow */
.drv-section-header__inner {
position: relative;
z-index: 1;
}
/* Section-Titel */
.drv-section-header__title {
margin: 0 0 var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-fluid-h1);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--c-text-on-dark);
}
/* Section-Untertitel */
.drv-section-header__sub {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-lg);
color: var(--c-text-on-dark-soft);
line-height: var(--lh-body);
}
/* ================================================================
13. KOMPONENTE – STEP-BADGE
Kleine Pill über dem Section-Header, zeigt Journey-Position.
Klasse: .drv-step-badge
Verwendung: SCHRITT 1 · FAHRZEUGE
================================================================ */
.drv-step-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 6px var(--space-3);
margin-bottom: var(--space-3);
border-radius: var(--radius-pill);
background: rgba(47, 214, 139, 0.20);
border: 1px solid rgba(47, 214, 139, 0.40);
color: #39cd89;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--fw-extrabold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: 1;
user-select: none;
}
/* ================================================================
14. KOMPONENTE – BUTTONS
Konvention: .drv-btn als Basis, Modifier für Varianten
PFLICHT-REGEL: KONTRAST BEI BUTTONS
---------------------------------------------------------------
Button-Hintergrund und Schriftfarbe MÜSSEN sich klar unterscheiden.
Es ist verboten, dass background-color und color denselben oder
einen ähnlichen Ton haben (helles Grau auf Weiss, Weiss auf Weiss,
Dunkel auf Dunkel etc.).
Das gilt AUCH für den :hover-Zustand:
- Wenn der :hover-Hintergrund dunkler wird, muss color auf einen
hellen Ton wechseln (z.B. var(--c-text-on-dark) oder #fff).
- Wenn der :hover-Hintergrund hell bleibt, muss color dunkel sein
(z.B. var(--c-brand-dark) oder var(--c-text-primary)).
Konkret verboten:
- background: #fff; color: #fff; (oder ähnliche Hellton-Kombinationen)
- background: var(--c-brand-dark); color: var(--c-brand-dark);
- background transparent/weiss bei hellem Seitenhintergrund OHNE
sichtbaren Border — der Button muss immer erkennbar sein.
- background dunkel (petrol, navy, brand): color dunkel — IMMER var(--c-text-on-dark) / #fff
- background hell (mint, weiss, grau): color dunkel — var(--c-text-primary) oder var(--c-ink)
- NIEMALS schwarze/dunkle Schrift auf dunkelblauem oder tiefgrünem Hintergrund.
Schrift- und Icon-Kontrast-Regel (PFLICHT):
DUNKLER Hintergrund (petrol, navy, brand, brand-dark, brand-deep, dark-sections, header):
-> Haupttext: var(--c-text-on-dark) /* #ffffff */
-> Subtext: var(--c-text-on-dark-soft) /* rgba(255,255,255,0.70) */
-> Muted/Meta: var(--c-text-on-dark-muted) /* rgba(255,255,255,0.45) */
-> Icons: var(--c-icon-on-dark) /* #ffffff */
-> Icons soft: var(--c-icon-on-dark-soft) /* rgba(255,255,255,0.60) */
HELLER Hintergrund (weiss, grau, bg-page, bg-soft, bg-card, bg-alt):
-> Haupttext: var(--c-text-on-light) /* = c-text-primary #1f2933 */
-> Subtext: var(--c-text-on-light-soft) /* = c-text-secondary #4a5568 */
-> Muted/Meta: var(--c-text-on-light-muted) /* = c-text-muted #94a3b8 */
-> Icons: var(--c-icon-on-light) /* #1f2933 */
-> Icons soft: var(--c-icon-on-light-soft) /* palette-neutral-400 */
REGEL: var(--c-bg-card) NIEMALS als Textfarbe verwenden — das ist ein Hintergrund-Token.
Stattdessen: var(--c-text-on-dark) fuer weissen Text auf dunklem BG.
- Im Zweifel: WCAG AA = mind. 4.5:1 Kontrast (Tool: https://webaim.org/resources/contrastchecker/)
Empfohlene Paarungen:
- Primär-Button: background var(--grad-btn-primary) dunkel + color var(--c-text-on-dark)
- CTA-Button: background var(--c-accent) mint + color var(--c-text-on-dark) (#fff)
- Ghost-Button: background transparent + border sichtbar + color var(--c-brand-dark)
- Ghost :hover: background var(--c-brand-dark) + color var(--c-text-on-dark)
- Header-Elemente: background dark/petrol + color var(--c-text-on-dark)
- Flow-Footer CTA: background var(--c-accent) oder dunkel + color var(--c-text-on-dark)
================================================================ */
.drv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 13px var(--space-6);
border: none;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: var(--fw-bold);
line-height: 1;
cursor: pointer;
text-decoration: none;
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-fast);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.drv-btn:active {
transform: scale(0.98);
}
/* Primary (Petrol Gradient) – Hauptaktion auf hellen Seiten */
.drv-btn--primary {
background: var(--grad-btn-primary);
color: var(--c-text-on-dark);
box-shadow: 0 4px 14px rgba(48, 70, 97, 0.25);
}
.drv-btn--primary:hover {
background: var(--grad-btn-primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(48, 70, 97, 0.32);
}
/* CTA (Mint) – Wichtigste Conversion-Aktion */
.drv-btn--cta {
background: var(--c-accent);
color: #fff;
box-shadow: var(--shadow-glow-mint);
}
.drv-btn--cta:hover {
background: var(--c-accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(47, 214, 139, 0.45);
}
/* Ghost – Sekundäraktion auf dunklem BG */
.drv-btn--ghost-dark {
background: rgba(255, 255, 255, 0.12);
color: var(--c-text-on-dark);
border: 1px solid rgba(255, 255, 255, 0.20);
}
.drv-btn--ghost-dark:hover {
background: rgba(255, 255, 255, 0.20);
}
/* Ghost – Sekundäraktion auf hellem BG */
.drv-btn--ghost {
background: transparent;
color: var(--c-brand);
border: 1.5px solid var(--c-border-strong);
}
.drv-btn--ghost:hover {
background: var(--c-bg-soft);
border-color: var(--c-brand-soft);
}
/* Danger */
.drv-btn--danger {
background: var(--c-danger);
color: #fff;
}
/* Size Variants */
.drv-btn--sm {
padding: 9px var(--space-4);
font-size: var(--text-sm);
}
.drv-btn--lg {
padding: 16px var(--space-8);
font-size: var(--text-lg);
}
.drv-btn--full {
width: 100%;
}
/* Disabled */
.drv-btn:disabled,
.drv-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ================================================================
15. KOMPONENTE – CARDS
================================================================ */
.drv-card {
background: var(--c-bg-card);
border-radius: var(--radius-xl);
border: 1px solid var(--c-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.drv-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.drv-card--flat {
box-shadow: none;
border: 1px solid var(--c-border);
}
.drv-card--elevated {
box-shadow: var(--shadow-lg);
border: none;
}
.drv-card--accent {
border: 1.5px solid var(--c-border-accent);
box-shadow: var(--shadow-glow-mint);
}
/* ================================================================
16. KOMPONENTE – STICKY NAVIGATION
Backdrop-blur Top-Bar für alle Module.
================================================================ */
.drv-sticky-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--c-bg-overlay);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--c-border);
box-shadow: var(--shadow-sm);
}
.drv-sticky-nav__inner {
max-width: var(--layout-content-max);
margin: 0 auto;
padding: 0 var(--layout-padding-x-tablet);
height: 56px;
display: flex;
align-items: center;
gap: var(--space-4);
}
@media (max-width: 640px) {
.drv-sticky-nav__inner {
padding: 0 var(--layout-padding-x-mobile);
height: 52px;
}
}
/* ================================================================
19. ZENTRIERUNG & PAGE-WRAPPER
Alle Module zentrieren Inhalte nach diesem System.
Kein max-width auf einzelnen Komponenten — immer über Wrapper.
================================================================ */
/**
* .drv-page-wrap
* Standard-Zentrierung für alle Seiteninhalte.
* max-width = --layout-content-max (1120px), horizontal zentriert.
* Responsive Padding-X via Token.
*
* Verwendung:
* ... Inhalt ...
*/
.drv-page-wrap {
width: 100%;
max-width: var(--layout-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--layout-padding-x-desktop);
padding-right: var(--layout-padding-x-desktop);
}
@media (max-width: 900px) {
.drv-page-wrap {
padding-left: var(--layout-padding-x-tablet);
padding-right: var(--layout-padding-x-tablet);
}
}
@media (max-width: 640px) {
.drv-page-wrap {
padding-left: var(--layout-padding-x-mobile);
padding-right: var(--layout-padding-x-mobile);
}
}
/**
* .drv-page-wrap--narrow
* Single-Column: Formulare, Checkout-Steps, FPA-Detail.
* max-width = --layout-narrow-max (760px).
*/
.drv-page-wrap--narrow {
max-width: var(--layout-narrow-max);
}
/**
* .drv-page-wrap--form
* Engster Wrapper für Lead-Formulare, Summary-Boxen.
* max-width = --layout-form-max (560px).
*/
.drv-page-wrap--form {
max-width: var(--layout-form-max);
}
/**
* .drv-page-wrap--wide
* Breites Layout für Listing + Sidebar.
* max-width = --layout-wide-max (1280px).
*/
.drv-page-wrap--wide {
max-width: var(--layout-wide-max);
}
/**
* .drv-fullscreen
* Fullscreen-Modus für Desktop-Listing.
* Füllt die gesamte Viewport-Höhe unterhalb der Sticky-Nav.
* Kein Außen-Padding — Scrolling und Grid intern geregelt.
*/
.drv-fullscreen {
width: 100%;
min-height: calc(100dvh - var(--layout-fullscreen-top-offset));
display: flex;
flex-direction: column;
}
/* ================================================================
20. SECTION-RHYTHMUS & ABSTANDS-REGELN
Regel: Abstände kommen IMMER von oben (margin-top).
Nicht margin-bottom auf Eltern-Elementen — das vermeidet
Doppelabstände und ist leichter zu debuggen.
================================================================ */
/**
* .drv-section
* Standard-Abstand zwischen Page-Sections (80px).
* Erste .drv-section auf einer Seite bekommt margin-top: 0.
*/
.drv-section {
margin-top: var(--layout-section-gap);
}
.drv-section:first-child {
margin-top: 0;
}
/**
* .drv-section--sm
* Kompakterer Abstand (48px) für eng zusammengehörige Blöcke
* oder auf Mobile.
*/
.drv-section--sm {
margin-top: var(--layout-section-gap-sm);
}
/**
* .drv-block-gap
* Abstand zwischen Blöcken innerhalb einer Section (40px).
* Z.B. zwischen Überschrift und Card-Grid.
*/
.drv-block-gap {
margin-top: var(--layout-block-gap);
}
/**
* Abstands-Regeln — Übersicht (nicht als Klassen, als Prinzip):
*
* Page-Header → erste Section: 0px (kein Abstand)
* Section → Section: 80px (--layout-section-gap)
* Heading → Content darunter: 24px (--space-6)
* Card-Grid Gutter: 16px (--layout-card-gap)
* Card-Gutter Desktop: 24px (--layout-card-gap-lg)
* Card Innen (Standard): 20px (--layout-card-padding)
* Card Innen (groß): 32px (--layout-card-padding-lg)
* Form-Felder Abstand: 12px (--space-3)
* Inline-Elemente (Icon + Text): 8px (--space-2)
*/
/* ================================================================
21. NUTZERFÜHRUNG (Step-Flow)
Das Drivist-UI führt Nutzer in einem klar strukturierten
4-Step-Prozess. Jede Seite gehört zu genau einem Step.
Die Step-Navigation ist immer sticky oben sichtbar.
STEPS:
1. Fahrzeugsuche (live_cars) → /fahrzeuge
2. Fahrzeugdetail + Quickcheck (FPA) → /fahrzeug/{id}
3. Finanzierungsrechner → /finanzierung
4. Bestellung → /bestellung
SEITEN-HIERARCHIE pro Step:
┌─────────────────────────────────────────────────┐
│ [Sticky Step-Nav] Step 1 › Step 2 › Step 3 › Step 4 │
├─────────────────────────────────────────────────┤
│ [Page-Header / Dark Section] │
│ Seiten-Titel, Fahrzeug-Name, Kontext │
├─────────────────────────────────────────────────┤
│ [Haupt-Inhalt] (drv-page-wrap) │
│ Primäre Aktion des Steps │
│ Sekundäre Inhalte │
├─────────────────────────────────────────────────┤
│ [Bottom-Bar] (Sticky, nur Mobile) │
│ Primärer CTA + Preis-Zusammenfassung │
└─────────────────────────────────────────────────┘
REGELN:
- Primärer CTA steht IMMER unten rechts (oder in der Bottom-Bar).
- Jeder Step hat genau EINE primäre Aktion (ein CTA-Button).
- Sekundäre Aktionen (Zurück, Teilen) sind visuell schwächer.
- Preis / Monatrate ist auf JEDER Step-Seite sichtbar (Sticky).
- Die Step-Nav zeigt immer: erledigt (✓), aktiv (●), gesperrt.
- Kein Step kann übersprungen werden (gesperrte Steps = grau, kein Klick).
================================================================ */
/**
* .drv-step-flow
* Wrapper für eine Seite innerhalb des Step-Flows.
* Enthält Step-Nav, Header, Content, Bottom-Bar.
*/
.drv-step-flow {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
/**
* .drv-step-content
* Haupt-Inhaltsbereich eines Steps.
* Wächst, um den verfügbaren Platz zu füllen.
* Padding-Bottom reserviert Platz für die Bottom-Bar (Mobile).
*/
.drv-step-content {
flex: 1;
padding-bottom: calc(var(--layout-footer-height) + var(--space-6));
}
@media (min-width: 641px) {
.drv-step-content {
padding-bottom: var(--layout-section-gap);
}
}
/* ================================================================
22. DESKTOP: FULLSCREEN-LISTING
Auf Desktop (min-width: 900px) füllt das Listing die gesamte
Viewport-Höhe. Kein äußeres Scrolling — der Grid ist der
Scroll-Container.
STRUKTUR:
┌─────────────────────────────────────────────────┐
│ [Sticky Nav — 60px] │
├───────────────┬─────────────────────────────────┤
│ [Sidebar] │ [Fahrzeug-Grid] │
│ Filter │ scroll-y: auto │
│ height: 100% │ height: calc(100dvh - 60px) │
└───────────────┴─────────────────────────────────┘
MOBIL: Standard-Seiten-Scroll, kein Fullscreen.
TikTok-Snap-Scroll auf Mobile (cards füllen 100dvh).
================================================================ */
/**
* .drv-listing-shell
* Äußerer Container für Listing-Seite auf Desktop.
*/
@media (min-width: 901px) {
.drv-listing-shell {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
height: calc(100dvh - var(--layout-fullscreen-top-offset));
overflow: hidden;
}
}
/**
* .drv-listing-sidebar
* Filter-Sidebar — bleibt stehen, Grid scrollt.
*/
@media (min-width: 901px) {
.drv-listing-sidebar {
height: 100%;
overflow-y: auto;
padding: var(--layout-card-padding-lg);
border-right: 1px solid var(--c-border);
background: var(--c-bg-card);
}
}
/**
* .drv-listing-grid
* Fahrzeug-Grid — eigener Scroll-Container.
*/
@media (min-width: 901px) {
.drv-listing-grid {
height: 100%;
overflow-y: auto;
padding: var(--layout-card-gap-lg);
background: var(--c-bg-page);
}
}
/* ================================================================
17. BREAKPOINTS (Dokumentation — für Media Queries in Modulen)
Mobile S: max-width: 480px → Kompaktes 1-Col-Layout
Mobile: max-width: 640px → Standard Mobile
Tablet: max-width: 900px → 2-Col-Layouts
Laptop: max-width: 1100px → 3-Col-Layouts
Desktop: min-width: 1280px → 4-Col, voller Abstand
USAGE:
@media (max-width: 640px) { ... }
================================================================ */
/* ================================================================
18. MIGRATION MAP – ALTE TOKEN-NAMEN → DRIVIST TOKENS
Für Rückwärts-Kompatibilität während der Migration.
Diese Aliase können nach vollständiger Migration entfernt werden.
================================================================ */
:root {
/* live_cars: --dc-* → neue Tokens */
--dc-bg: var(--c-bg-page);
--dc-surface: var(--c-bg-card);
--dc-border: var(--c-border);
--dc-text: var(--c-text-primary);
--dc-text-2: var(--c-text-secondary);
--dc-text-3: var(--c-text-muted);
--dc-accent: var(--c-accent); /* ⚠️ war #34c759, jetzt --c-mint */
--dc-navy: var(--c-brand-dark);
--dc-radius-card: var(--radius-xl);
--dc-radius-sm: var(--radius-md);
--dc-shadow: var(--shadow-card);
--dc-shadow-hover: var(--shadow-card-hover);
--dc-font: var(--font-body);
/* live_bestellung: --drv-* → neue Tokens */
--drv-accent: var(--c-accent);
--drv-accent-dark: var(--c-accent-hover);
--drv-ink: var(--c-text-primary);
--drv-ink-2: var(--palette-neutral-600);
--drv-ink-3: var(--palette-neutral-400);
--drv-ink-4: var(--palette-neutral-300);
--drv-line: var(--c-border);
--drv-surface: var(--c-bg-card);
--drv-bg: var(--c-bg-page);
--drv-radius: var(--radius-lg);
--drv-radius-lg: var(--radius-2xl);
--drv-shadow: var(--shadow-sm);
--drv-shadow-md: var(--shadow-md);
--drv-font: var(--font-body);
--drv-max: var(--layout-content-max);
--drv-transition: var(--transition-base);
/* live_fpa: --dfm-* → neue Tokens */
--dfm-bg: var(--c-bg-page);
--dfm-blue: var(--palette-petrol-500);
--dfm-border: var(--c-border);
--dfm-card: var(--c-bg-card);
--dfm-green: var(--c-accent);
--dfm-shadow: var(--shadow-lg);
--dfm-shadow-strong: var(--shadow-xl);
--dfm-soft: var(--c-bg-soft);
--dfm-text: var(--c-text-primary);
--dfm-text-muted: var(--c-text-muted);
--dfm-text-soft: var(--c-text-secondary);
/* live_finanzierung: --fin-* → neue Tokens */
--fin-bg: var(--c-bg-card);
--fin-border: var(--c-border);
--fin-grad-mint: var(--grad-accent);
--fin-grad-petrol: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-deep) 100%);
--fin-mint: var(--c-accent);
--fin-petrol: var(--c-brand);
--fin-pill: var(--radius-pill);
--fin-radius: var(--radius-2xl);
--fin-shadow-glow: var(--shadow-glow-mint);
--fin-shadow-md: var(--shadow-lg);
--fin-shadow-sm: var(--shadow-xs);
/* Deprecated Spacing-Aliases (--space-xs etc.) */
--space-xs: var(--space-1);
--space-sm: var(--space-2);
--space-md: var(--space-3);
--space-lg: var(--space-5);
--space-xl: var(--space-7);
}
/* ================================================================
GOOGLE FONTS IMPORT
Manrope (Display/Headings) + Inter (Body) + Roboto Condensed (Tech)
In HubSpot als @import in den einbinden:
================================================================ */
/* ================================================================
V2 TOKEN BRIDGE
drivist-design-tokens-v2.css Aliase → drivist-tokens.css Master.
Ermöglicht Module, die v2-Token-Namen nutzen, ohne Migration.
QUELLE: drivist-tokens.css (Master), nie direkt v2 einbinden.
================================================================ */
:root {
/* Colors */
--surface: var(--c-bg-page);
--surface-low: var(--c-bg-soft);
--surface-card: var(--c-bg-card);
--surface-high: var(--c-bg-alt);
--surface-bright: var(--palette-neutral-0);
--primary: var(--c-brand-dark);
--primary-dark: var(--palette-neutral-950, #0a0a0a);
--primary-fixed: #d6e3ff;
--secondary: var(--c-accent-pressed);
--secondary-hover: var(--c-accent-hover);
--secondary-active: var(--c-accent-pressed);
--secondary-fixed: var(--palette-mint-400);
--text-primary: var(--c-text-primary);
--text-secondary: var(--c-text-secondary);
--text-muted: var(--c-text-muted);
--text-inverse: var(--c-text-on-dark);
--text-on-dark: var(--c-text-on-dark);
--outline-subtle: rgba(197, 198, 205, 0.15);
--outline-soft: rgba(197, 198, 205, 0.24);
--focus-ring: var(--palette-mint-400);
--overlay-dark: var(--c-bg-overlay-dark);
--overlay-soft: var(--overlay-soft, rgba(25, 28, 30, 0.08));
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.24);
--glass-blur: 24px;
--gradient-hero: var(--grad-header);
--gradient-primary-button: linear-gradient(180deg, #008a45 0%, #006d37 100%);
--gradient-surface-dark: linear-gradient(160deg, var(--c-brand-dark) 0%, #091221 100%);
--gradient-accent-soft: var(--grad-accent-soft);
--color-bg-page: var(--c-bg-page);
--color-bg-section: var(--c-bg-soft);
--color-bg-card: var(--c-bg-card);
--color-bg-card-hover: var(--c-bg-alt);
--color-bg-dark: var(--c-brand-dark);
--color-text-default: var(--c-text-primary);
--color-text-soft: var(--c-text-secondary);
--color-text-muted: var(--c-text-muted);
--color-text-on-dark: var(--c-text-on-dark);
--color-action-primary: var(--c-accent);
--color-action-primary-hover: var(--c-accent-hover);
--color-action-primary-active: var(--c-accent-pressed);
--color-border-subtle: rgba(197, 198, 205, 0.15);
--color-focus: var(--palette-mint-400);
/* Typography */
--font-display: var(--font-heading);
--weight-regular: var(--fw-regular);
--weight-medium: var(--fw-medium);
--weight-semibold: var(--fw-semibold);
--weight-bold: var(--fw-bold);
--weight-extrabold: var(--fw-extrabold);
--tracking-tight: var(--ls-tight);
--tracking-normal: var(--ls-normal);
--tracking-label: var(--ls-wide);
--line-tight: var(--lh-tight);
--line-heading: var(--lh-heading);
--line-normal: var(--lh-body);
--line-relaxed: var(--lh-relaxed);
--text-display-lg: clamp(2.5rem, 5vw, 3.5rem);
--text-display-md: clamp(2rem, 4vw, 2.75rem);
--text-display-sm: clamp(1.75rem, 3vw, 2.25rem);
--text-headline-lg: 2rem;
--text-headline-md: 1.5rem;
--text-headline-sm: 1.25rem;
--text-title-lg: 1.25rem;
--text-title-md: 1.125rem;
--text-title-sm: 1rem;
--text-body-lg: 1.125rem;
--text-body-md: 1rem;
--text-body-sm: 0.9375rem;
--text-label-lg: 0.875rem;
--text-label-md: 0.8125rem;
--text-label-sm: 0.75rem;
/* Spacing */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--section-space-sm: var(--space-12);
--section-space-md: var(--space-16);
--section-space-lg: var(--space-24);
--card-padding-sm: var(--space-2);
--card-padding-md: var(--space-4);
--card-padding-lg: var(--space-6);
/* Radius */
--radius-none: 0;
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1.25rem;
--radius-xl: 1.75rem;
--radius-pill: var(--radius-pill);
/* Elevation */
--shadow-none: none;
--shadow-modal: 0 24px 48px -12px rgba(25, 28, 30, 0.06);
--shadow-soft: 0 8px 24px -12px rgba(25, 28, 30, 0.04);
/* Motion */
--duration-fast: var(--transition-fast);
--duration-base: var(--transition-base);
--duration-slow: var(--transition-slow);
--ease-standard: ease;
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--transition-fast: all 150ms ease;
--transition-base: all 250ms ease;
--transition-emphasized: all 250ms cubic-bezier(0.2, 0, 0, 1);
/* Layout */
--container-xs: 560px;
--container-sm: 720px;
--container-md: 960px;
--container-lg: 1200px;
--container-xl: 1320px;
--grid-gap-sm: 0.75rem;
--grid-gap-md: 1.25rem;
--grid-gap-lg: 2rem;
--content-max-width: 720px;
--content-wide-max-width: 880px;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1440px;
/* Buttons (v2) */
--button-height-sm: 2.5rem;
--button-height-md: 3rem;
--button-height-lg: 3.5rem;
--button-padding-x-sm: 0.875rem;
--button-padding-x-md: 1rem;
--button-padding-x-lg: 1.25rem;
--button-primary-bg: var(--c-accent);
--button-primary-bg-hover: var(--c-accent-hover);
--button-primary-bg-active: var(--c-accent-pressed);
--button-primary-text: var(--c-text-on-dark);
--button-secondary-bg: var(--c-brand-dark);
--button-secondary-bg-hover: var(--c-brand);
--button-secondary-bg-active: var(--c-brand-deep);
--button-secondary-text: #d6e3ff;
--button-ghost-bg: transparent;
--button-ghost-bg-hover: var(--c-bg-soft);
--button-ghost-text: var(--c-brand-dark);
--button-disabled-bg: var(--c-bg-soft);
--button-disabled-text: var(--c-text-muted);
/* Inputs (v2) */
--input-height-md: 3rem;
--input-padding-x: 1rem;
--input-bg: var(--c-bg-alt);
--input-bg-focus: var(--c-bg-card);
--input-text: var(--c-text-primary);
--input-placeholder: var(--c-text-muted);
--input-focus-border: var(--c-accent);
--input-focus-ring: var(--palette-mint-400);
/* Cards (v2) */
--card-bg: var(--c-bg-card);
--card-bg-hover: var(--palette-neutral-50);
--card-padding: var(--card-padding-md);
--card-radius: var(--radius-lg);
--card-accent-width-hover: 4px;
/* Z-Index */
--z-base: 1;
--z-sticky: 100;
--z-dropdown: 500;
--z-overlay: 1000;
--z-modal: 1100;
--z-toast: 1200;
}