/* ================================================================
DRIVIST FPA MODULE — CSS
Tokens werden über das Template (drivist-tokens.min.css) geladen.
Dieser Block definiert nur Modul-spezifische Fallbacks.
================================================================ */
:root {
/* ---- LEGACY ALIASES (Modul-intern) ---- */
--c-mint: var(--c-accent);
--c-mint-soft: var(--c-accent-soft);
--c-mint-strong: var(--palette-mint-500, #26b070);
--c-accent-strong: var(--palette-mint-500, #26b070);
--c-petrol: var(--c-brand-dark);
--c-primary: var(--c-brand-dark);
--c-surface: var(--c-bg-card);
--c-bg-body: var(--c-bg-page);
--c-bg-subtle: var(--c-bg-soft);
--c-border-subtle: var(--c-border);
--c-error: var(--c-danger);
--c-ink: var(--c-text-primary);
--c-text-main: var(--c-text-primary);
--c-text-soft: var(--c-text-secondary);
--c-text-tertiary: var(--c-text-muted);
--c-text-inverse: var(--c-text-on-dark);
--c-badge-green-bg: var(--c-accent-soft);
--c-badge-green-text: var(--c-accent-hover);
--c-badge-blue-bg: rgba(41, 128, 185, 0.10);
--c-badge-blue-text: var(--palette-blue-500, #2980b9);
--page-max-width: 1440px;
--content-max-width: 1120px;
--shadow-card-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-card-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
--shadow-card-md: 0 4px 12px rgba(15, 23, 42, 0.10);
--shadow-card-lg: 0 10px 30px rgba(15, 23, 42, 0.14);
--grad-energy: linear-gradient(135deg, var(--c-accent, #2fd68b) 0%, var(--c-brand-dark, #1c2b3a) 100%);
--grad-btn-cta-hover: linear-gradient(135deg, var(--palette-mint-500, #26b070) 0%, var(--palette-mint-400, #2fd68b) 100%);
--palette-yellow-50: #fffbeb;
--radius-card: var(--radius-lg, 14px);
--text-base: var(--text-md, 15px);
--finance-border-color: var(--c-border, #e2e8f0);
}
/* ================================================================
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-Kontrast-Regel (PFLICHT):
- Hintergrund ist DUNKEL (petrol, navy, brand, brand-dark, brand-deep, header, dark-*)
-> Schrift IMMER: var(--c-text-on-dark) oder #ffffff
- Hintergrund ist MITTEL (mint/gruen heller als #2fd68b, accent)
-> Schrift IMMER: var(--c-text-on-dark) oder #ffffff (Mint wirkt hell, ist aber saettigt genug)
- Hintergrund ist HELL (weiss, grau, bg-subtle, bg-soft, card)
-> Schrift IMMER: var(--c-text-primary) oder var(--c-ink)
- 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
Lexend (Headings) + Inter (Body) + Roboto Condensed (Tech)
In HubSpot als @import in den einbinden:
================================================================ */
: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 – auf dunklem BG */
--c-white: var(--palette-neutral-0); /* #ffffff – Alias fuer Weiss (Legacy-Support) */
--c-text-on-dark-soft: rgba(255, 255, 255, 0.70); /* Subtext auf dunklem BG */
/* 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: "Lexend", 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
/* 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);
}
/* ===================================
2. GLOBAL RESET & BASE STYLES
=================================== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
min-height: 100dvh;
background-color: var(--c-bg-body);
color: var(--c-text-soft);
font-family: var(--font-body);
font-size: var(--text-md);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas {
display: block;
max-width: 100%;
}
svg {
display: inline-block;
}
button, input, select, textarea {
font: inherit;
}
button {
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul, ol {
margin: 0;
padding: 0;
}
p {
margin: 0 0 var(--space-3);
}
strong {
font-weight: 600;
}
/* ===================================
3. ANIMATIONS & TRANSITIONS
=================================== */
@keyframes pulse-green {
0% {
transform: scale(0.96);
box-shadow: 0 0 0 0 rgba(47, 214, 139, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(47, 214, 139, 0);
}
100% {
transform: scale(0.96);
box-shadow: 0 0 0 0 rgba(47, 214, 139, 0);
}
}
@keyframes car-fade-in {
from {
opacity: 0;
transform: translateY(18px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes subtle-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shimmer {
0% {
background-position: -450px 0;
}
100% {
background-position: 450px 0;
}
}
/* Transition helper */
.is-animated,
button,
.tag,
.badge,
.cinematic-card,
.finance-calc-offer-row,
.spec-card,
.btn-primary,
.btn-secondary {
transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ===================================
4. LAYOUT WRAPPER & GRID SYSTEM
=================================== */
.cinematic-wrapper {
width: 100%;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 var(--space-4) var(--space-16);
}
.cinematic-inner {
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
}
.cinematic-grid {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.95fr);
column-gap: var(--space-6);
align-items: flex-start;
margin-top: var(--space-6);
}
.cinematic-main-column {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.cinematic-sidebar {
position: relative;
}
.mySticky {
position: sticky;
top: 96px;
z-index: 10;
}
/* Generic card */
.cinematic-card {
background-color: var(--c-bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card-sm);
border: 1px solid rgba(148, 163, 184, 0.28);
}
/* ===================================
5. BREADCRUMBS & PAGE HEADER
=================================== */
.cinematic-breadcrumbs {
padding: var(--space-4) 0 var(--space-2);
font-size: var(--text-xs);
color: var(--c-text-muted);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cinematic-breadcrumbs a {
color: var(--c-text-muted);
}
.cinematic-breadcrumbs a:hover {
color: var(--c-mint);
}
.cinematic-breadcrumbs .sep {
margin: 0 var(--space-1);
opacity: 0.45;
}
.cinematic-breadcrumbs .current {
color: var(--c-petrol);
font-weight: 700;
}
/* Page label above title */
.page-kicker {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-text-muted);
}
.page-kicker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--c-mint);
}
/* ===================================
6. HERO / VEHICLE HEADER
=================================== */
.cinematic-hero-card {
position: relative;
padding: var(--space-6);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card-md);
background-color: var(--c-bg-card);
overflow: hidden;
}
.cinematic-hero-card::before {
/* Soft gradient overlay top-right */
content: "";
position: absolute;
right: -120px;
top: -130px;
width: 260px;
height: 260px;
background: radial-gradient(circle at center, rgba(47, 214, 139, 0.16), transparent 70%);
opacity: 0.8;
pointer-events: none;
}
.cinematic-hero-card-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr);
row-gap: var(--space-6);
z-index: 1;
}
.cinematic-header {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.brand-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 14px;
border-radius: var(--radius-pill);
border: none;
background: var(--grad-energy);
color: var(--c-text-inverse);
font-family: var(--font-tech);
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: 0 8px 16px -10px rgba(41, 128, 185, 0.7);
}
.brand-badge span {
opacity: 0.9;
}
.cinematic-title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-4xl);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--c-petrol);
}
.cinematic-sub {
max-width: 720px;
font-size: var(--text-lg);
font-weight: 400;
color: var(--c-text-soft);
}
.cinematic-meta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-3);
font-size: var(--text-sm);
}
.cinematic-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 10px;
border-radius: var(--radius-pill);
background-color: rgba(148, 163, 184, 0.12);
color: var(--c-text-soft);
}
.cinematic-meta-item strong {
color: var(--c-petrol);
}
/* ===================================
7. HERO – STAGE / IMAGE AREA
=================================== */
.cinematic-stage {
position: relative;
margin-top: var(--space-6);
width: 100%;
border-radius: var(--radius-xl);
background: radial-gradient(circle at center, var(--c-white) 0%, var(--c-bg-soft) 78%);
box-shadow: var(--shadow-card-sm);
overflow: hidden;
padding: var(--space-5);
display: flex;
justify-content: center;
align-items: center;
}
.cinematic-stage::after {
/* subtle center floor shadow */
content: "";
position: absolute;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
width: 60%;
height: 18%;
background: radial-gradient(circle at center, rgba(15, 23, 42, 0.22), transparent 70%);
opacity: 0.12;
filter: blur(6px);
pointer-events: none;
}
.vehicle-swiper {
position: relative;
width: 100%;
max-width: 920px;
min-height: 260px;
}
.vehicle-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.vehicle-swiper img,
.placeholder-img {
width: auto !important;
max-width: 100% !important;
max-height: 420px !important;
object-fit: scale-down !important;
padding: 0 !important;
margin: 0 auto !important;
filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.28));
animation: car-fade-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.vehicle-swiper-thumbs {
margin-top: var(--space-3);
display: flex;
gap: var(--space-2);
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
}
.vehicle-thumb {
flex: 0 0 72px;
height: 52px;
border-radius: var(--radius-md);
border: 1px solid rgba(148, 163, 184, 0.6);
background-color: var(--c-white);
overflow: hidden;
position: relative;
}
.vehicle-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vehicle-thumb:is(:hover, .is-active) {
border-color: var(--c-mint-strong);
box-shadow: 0 0 0 1px rgba(47, 214, 139, 0.35);
}
.vehicle-thumb.is-active::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 2px rgba(47, 214, 139, 0.7);
}
/* Swiper navigation overrides */
.swiper-button-next,
.swiper-button-prev {
width: 38px;
height: 38px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--c-petrol);
box-shadow: var(--shadow-card-sm);
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 16px;
font-weight: 700;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: var(--c-white);
transform: translateY(-1px);
}
.swiper-pagination-bullet-active {
background-color: var(--c-mint);
}
/* ===================================
8. TAGS, BADGES & STATUS INDICATORS
=================================== */
.cinematic-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.tag,
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
background-color: var(--c-bg-card);
border: 1px solid var(--finance-border-color);
color: var(--c-text-soft);
}
.tag:hover,
.badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-card-xs);
}
.tag-delivery {
position: relative;
padding-left: 24px;
background-color: rgba(47, 214, 139, 0.08);
border-color: rgba(47, 214, 139, 0.42);
color: var(--c-accent-strong);
}
.tag-delivery::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 8px;
height: 8px;
border-radius: 999px;
background-color: var(--c-mint);
transform: translateY(-50%);
box-shadow: 0 0 0 0 rgba(47, 214, 139, 0.8);
animation: pulse-green 1.8s ease-out infinite;
}
.tag-promo {
background: var(--grad-energy);
color: var(--c-text-inverse);
border: none;
box-shadow: 0 8px 16px -10px rgba(47, 214, 139, 0.6);
}
.tag-outline {
background-color: transparent;
border-style: dashed;
}
.tag-muted {
background-color: rgba(15, 23, 42, 0.02);
border-color: rgba(148, 163, 184, 0.6);
}
/* ===================================
9. SECTION TITLES & WRAPPER
=================================== */
.cinematic-section {
padding: var(--space-5);
border-radius: var(--radius-lg);
background-color: var(--c-bg-card);
box-shadow: var(--shadow-card-xs);
border: 1px solid rgba(148, 163, 184, 0.26);
}
.cinematic-section + .cinematic-section {
margin-top: var(--space-4);
}
.section-header {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-4);
}
.section-title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--c-petrol);
}
.section-kicker {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--c-text-muted);
}
.section-description {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--c-text-soft);
}
/* ===================================
10. SPEC GRID – VEHICLE DATA
=================================== */
.spec-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
}
.spec-card {
position: relative;
background-color: var(--c-bg-card);
border-radius: var(--radius-md);
padding: var(--space-4);
border: 1px solid var(--finance-border-color);
box-shadow: var(--shadow-card-xs);
display: flex;
flex-direction: column;
gap: var(--space-1);
min-height: 96px;
}
.spec-card::after {
content: "";
position: absolute;
inset-inline: 18px;
bottom: 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, rgba(47, 214, 139, 0.2), transparent);
opacity: 0;
transform: translateY(4px);
}
.spec-card .label {
font-family: var(--font-heading);
font-size: var(--text-xs);
color: var(--c-text-muted);
text-transform: uppercase;
letter-spacing: 0.16em;
}
.spec-card .value {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--c-petrol);
}
.spec-card .meta {
font-size: var(--text-xs);
color: var(--c-text-soft);
}
.spec-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-md);
border-color: rgba(47, 214, 139, 0.35);
}
.spec-card:hover::after {
opacity: 1;
transform: translateY(0);
}
/* ===================================
11. FEATURE CHIPS & DETAILED LIST
=================================== */
.feature-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--finance-border-color);
background-color: var(--c-white);
font-size: var(--text-sm);
color: var(--c-text-soft);
}
.chip::before {
content: "•";
font-size: 14px;
line-height: 1;
margin-right: 2px;
color: var(--c-mint);
}
.chip-strong {
background-color: var(--c-mint-soft);
border-color: rgba(47, 214, 139, 0.5);
color: var(--c-accent-strong);
}
.feature-details {
margin-top: var(--space-3);
}
.feature-details summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--c-petrol);
}
.feature-details summary::marker,
.feature-details summary::-webkit-details-marker {
display: none;
}
.feature-details summary svg {
transition: transform 0.2s ease;
}
.feature-details[open] summary svg {
transform: rotate(180deg);
}
.feature-full-list {
margin-top: var(--space-2);
padding: var(--space-4) var(--space-4) var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid var(--finance-border-color);
background-color: var(--c-white);
box-shadow: var(--shadow-card-xs);
}
.clean-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-4);
row-gap: var(--space-3);
}
.clean-list li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--c-text-soft);
}
.icon-wrap {
flex-shrink: 0;
width: 18px;
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-mint);
}
.sub-text {
display: block;
margin-top: 2px;
font-size: var(--text-xs);
color: var(--c-text-muted);
}
/* =========================================================
DRIVIST PREMIUM FINANCE CSS – FINAL BUILD (v6)
FINANCE CARDS + BRANDING + MOBILE + ANIMATION + BADGE
========================================================= */
/****************************************
* 0) ROOT VARIABLES
****************************************/
:root {
--fin-mint: var(--c-accent); /* Leasing */
--fin-petrol: var(--c-brand-dark); /* Finanzierung */
--fin-gray: var(--c-text-secondary); /* Rechnungskauf */
--fin-bg: var(--c-white);
--fin-border: var(--c-border);
--fin-grad-mint: linear-gradient(135deg, var(--c-accent) 0%, var(--c-petrol) 100%);
--fin-grad-petrol: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand-deep) 100%);
--fin-grad-gray: linear-gradient(135deg, var(--c-text-secondary) 0%, var(--c-text-primary) 100%);
--fin-radius: 20px;
--fin-pill: 999px;
--fin-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--fin-shadow-md: 0 10px 28px rgba(0,0,0,0.12);
--fin-shadow-glow: 0 0 22px rgba(47,214,139,0.35);
--space-xs: 6px;
--space-sm: 10px;
--space-md: 14px;
--space-lg: 20px;
--space-xl: 28px;
}
/****************************************
* 1) LAYOUT WRAPPER
****************************************/
.finance-calculator {
background: var(--fin-bg);
border-radius: var(--fin-radius);
padding: var(--space-xl);
border: 1px solid var(--fin-border);
box-shadow: var(--fin-shadow-sm);
animation: fin-fade-in 0.6s ease-out;
}
/****************************************
* 2) TERM SELECTOR
****************************************/
.term-button-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: var(--c-bg-soft);
padding: 6px;
border-radius: var(--fin-pill);
margin-bottom: var(--space-lg);
}
.term-button {
padding: 7px 18px;
border-radius: var(--fin-pill);
background: var(--c-white);
font-size: 13px;
color: var(--c-text-secondary);
border: 1px solid transparent;
transition: .2s ease;
}
.term-button:hover {
border-color: var(--fin-mint);
color: var(--c-text-primary);
}
.term-button.active {
background: var(--c-white);
border-color: var(--fin-mint);
color: var(--c-text-primary);
font-weight: 700;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/****************************************
* 3) SORT BUTTONS
****************************************/
.finance-calc-sort-buttons {
display: flex;
gap: 10px;
margin: 8px 0 24px;
}
.finance-calc-sort-button {
padding: 6px 14px;
font-size: 12px;
border-radius: var(--fin-pill);
background: var(--c-white);
border: 1px solid var(--fin-border);
color: var(--c-text-secondary);
text-transform: uppercase;
font-weight: 600;
}
.finance-calc-sort-button:hover {
border-color: var(--fin-mint);
color: var(--c-text-primary);
}
.finance-calc-sort-button.active {
background: var(--fin-mint);
color: var(--c-white);
border-color: var(--fin-mint);
box-shadow: 0 4px 12px rgba(47,214,139,0.3);
}
/****************************************
* 4) GRID (Desktop → 3, Tablet → 2, Mobile → 1)
****************************************/
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 28px;
}
@media (max-width: 1024px) {
.finance-calc-offer-table { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
.finance-calc-offer-table { grid-template-columns: 1fr; }
}
/****************************************
* 5) FINANCE CARD BASE
****************************************/
.finance-calc-offer-row {
background: var(--c-white);
border-radius: var(--fin-radius);
border: 1px solid var(--fin-border);
padding: var(--space-xl);
box-shadow: var(--fin-shadow-sm);
display: flex;
flex-direction: column;
position: relative;
transition: .25s ease;
animation: fin-fade-in 0.6s ease;
height: 100%;
}
.finance-calc-offer-row:hover {
transform: translateY(-3px);
box-shadow: var(--fin-shadow-md);
border-color: var(--fin-mint);
}
.finance-calc-offer-row.selected {
border-color: var(--fin-mint);
box-shadow: var(--fin-shadow-glow);
}
/****************************************
* 6) BRANDING VARIANTS
****************************************/
.finance-card--leasing .offer-rate { color: var(--fin-mint); }
.finance-card--leasing .offer-select-button { background: var(--fin-grad-mint); }
.finance-card--finanzierung .offer-rate { color: var(--fin-petrol); }
.finance-card--finanzierung .offer-select-button { background: var(--fin-grad-petrol); }
.finance-card--rechnungskauf .offer-rate { color: var(--fin-gray); }
.finance-card--rechnungskauf .offer-select-button { background: var(--fin-grad-gray); }
/****************************************
* 7) RATE
****************************************/
.offer-rate {
font-family: var(--font-heading);
font-size: 2.4rem;
font-weight: 900;
margin-bottom: 4px;
}
.offer-subinfo {
font-size: 12px;
text-transform: uppercase;
color: var(--c-text-muted);
margin-bottom: 22px;
}
/****************************************
* 8) DETAILS GRID
****************************************/
.offer-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
flex-grow: 1;
}
.offer-details .label {
font-size: 11px;
text-transform: uppercase;
color: var(--c-text-muted);
}
.offer-details span {
font-size: 14px;
font-weight: 700;
color: var(--c-petrol);
}
/****************************************
* 9) STEUERVORTEILE
****************************************/
.offer-objective-details {
background: var(--c-accent-soft);
border-left: 3px solid var(--fin-mint);
border-radius: 10px;
padding: 16px;
margin-bottom: 20px;
}
.offer-objective-summary {
font-weight: 700;
color: var(--c-petrol);
position: relative;
padding-right: 20px;
cursor: pointer;
}
.offer-objective-summary::after {
content: \"▼\";
position: absolute;
right: 0;
top: 2px;
font-size: 12px;
transition: .2s ease;
}
.offer-objective-details[open] .offer-objective-summary::after {
transform: rotate(180deg);
}
.offer-objective-content {
font-size: 14px;
color: var(--c-text-soft);
margin-top: 10px;
}
/****************************************
* 10) BOTTOM BAR
****************************************/
.offer-bottombar {
padding-top: 18px;
border-top: 1px solid var(--fin-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.offer-bottom-info {
font-size: 14px;
font-weight: 600;
color: var(--c-text-soft);
}
/****************************************
* 11) CTA-BUTTON
****************************************/
.offer-select-button {
padding: 10px 20px;
border-radius: var(--fin-pill);
font-size: 12px;
font-weight: 800;
color: var(--c-white) !important;
text-transform: uppercase;
letter-spacing: .06em;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transition: .22s cubic-bezier(.34,1.56,.64,1);
}
.offer-select-button:hover {
transform: translateY(-2px) scale(1.03);
}
/****************************************
* 12) BEST OFFER BADGE
****************************************/
.finance-best-offer-badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--fin-grad-mint);
color: var(--c-white);
padding: 4px 14px;
font-size: 10px;
font-weight: 800;
border-radius: var(--fin-pill);
letter-spacing: .08em;
text-transform: uppercase;
box-shadow:0 4px 14px rgba(47,214,139,.35);
}
/****************************************
* 13) MOBILE OPTIMIZATION
****************************************/
@media(max-width:640px){
.finance-calc-offer-row {
padding: var(--space-lg);
}
/* Mobile Sticky CTA */
.mobile-finance-footer {
position: fixed;
bottom: 0;
left: 0; right: 0;
background: rgba(255,255,255,0.93);
padding: 14px 20px;
box-shadow: 0 -12px 24px rgba(0,0,0,0.15);
z-index: 50;
}
.mobile-finance-footer .cta {
width: 100%;
padding: 14px;
background: var(--fin-grad-mint);
color: var(--c-white);
text-align: center;
border-radius: var(--fin-pill);
font-weight: 800;
font-size: 16px;
}
}
/****************************************
* 14) ANIMATION KEYFRAMES
****************************************/
@keyframes fin-fade-in {
from { opacity: 0; transform: translateY(10px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/****************************************************
* 9. REMOVE UNUSED
****************************************************/
.finance-offer-header { display: none !important; }
/* ===================================
15. SIDEBAR – PRICING CARD
=================================== */
.pricing-card {
background-color: var(--c-bg-card);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: var(--shadow-card-lg);
border: 1px solid rgba(148, 163, 184, 0.46);
}
.pricing-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: 600;
color: var(--c-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pricing-header span:last-child {
text-align: right;
}
.pricing-main {
text-align: center;
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--finance-border-color);
padding-bottom: var(--space-4);
}
.price-row {
display: flex;
align-items: flex-end;
justify-content: center;
line-height: 1;
}
.price-row .currency {
font-size: 22px;
font-weight: 600;
margin-right: 6px;
margin-bottom: 6px;
color: var(--c-text-muted);
}
.price-row .amount {
font-family: var(--font-heading);
font-size: 3.4rem;
font-weight: 800;
letter-spacing: -0.06em;
color: var(--c-petrol);
}
.price-row .suffix {
margin-left: 6px;
margin-bottom: 10px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--c-text-soft);
}
.vat-info {
display: block;
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--c-text-muted);
font-weight: 500;
}
.pricing-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Primary CTA */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: 14px 18px;
border-radius: var(--radius-lg);
border: none;
background-image: var(--grad-energy);
background-size: 220% 220%;
color: var(--c-white);
font-family: var(--font-heading);
font-weight: 800;
font-size: var(--text-md);
text-transform: uppercase;
letter-spacing: 0.16em;
box-shadow: 0 14px 26px -12px rgba(47, 214, 139, 0.8);
}
.btn-primary:hover {
transform: translateY(-2px);
background-position: 100% 0;
box-shadow: 0 18px 36px -16px rgba(41, 128, 185, 0.8);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 10px 24px -14px rgba(41, 128, 185, 0.9);
}
.btn-primary:focus-visible {
outline: 2px solid var(--c-white);
outline-offset: 2px;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: 11px 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--finance-border-color);
background-color: var(--c-white);
color: var(--c-text-soft);
font-weight: 600;
font-size: var(--text-sm);
}
.btn-secondary:hover {
border-color: var(--c-petrol);
color: var(--c-petrol);
}
.btn-secondary:active {
transform: translateY(1px);
}
.pricing-meta {
margin-top: var(--space-4);
}
.meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px dashed var(--finance-border-color);
}
.meta-row:last-of-type {
border-bottom: none;
}
.meta-row span:first-child {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--c-text-muted);
}
.meta-row span:last-child {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-sm);
color: var(--c-petrol);
}
.meta-note {
margin-top: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-sm);
border-left: 3px solid var(--c-border);
background-color: var(--c-bg-soft);
font-size: var(--text-xs);
color: var(--c-text-muted);
line-height: 1.6;
}
/* ============================================================
REMOVE OUTER FINANCE WINDOW / CARD-CONTAINER
Makes the Finance Calculator flush with the page layout
============================================================ */
/* Entfernt Hintergrund, Schatten, Rahmen, Padding */
/* =========================================================
DRIVIST FINANCE CARDS – FINAL CLEAN VERSION
Mobile friendly, hochwertig, sauber priorisiert
========================================================= */
.finance-calculator {
margin: 0;
padding: 0;
background: transparent;
border: none;
}
/* Header oberhalb der Karten */
.finance-calc-input-section {
margin-bottom: 20px;
}
.finance-calc-vehicle-info h2 {
margin: 0 0 6px;
font-family: var(--font-heading);
font-size: clamp(22px, 3vw, 30px);
line-height: 1.1;
font-weight: 800;
color: var(--c-petrol);
letter-spacing: -0.03em;
}
.finance-calc-vehicle-info p {
margin: 0 0 18px;
font-size: 15px;
color: var(--c-text-soft);
}
/* Laufzeit */
.finance-calc-term-selector {
margin-top: 0;
margin-bottom: 18px;
}
.finance-calc-label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-text-muted);
}
.finance-calc-term-value {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--c-petrol);
letter-spacing: 0;
text-transform: none;
}
.term-button-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 6px;
background: var(--c-bg-soft);
border-radius: 999px;
width: fit-content;
max-width: 100%;
}
.term-button {
appearance: none;
border: 1px solid transparent;
background: var(--c-white);
color: var(--c-text-soft);
padding: 9px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
line-height: 1;
transition: all 0.18s ease;
}
.term-button:hover {
border-color: rgba(47, 214, 139, 0.45);
color: var(--c-petrol);
transform: translateY(-1px);
}
.term-button.active {
border-color: var(--c-mint);
color: var(--c-petrol);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
/* Ergebnisbereich */
.finance-calc-results-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.finance-calc-results-header h3 {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(18px, 2.5vw, 24px);
font-weight: 700;
color: var(--c-petrol);
letter-spacing: -0.02em;
}
.finance-calc-sort-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0;
}
.finance-calc-sort-button {
appearance: none;
border: 1px solid var(--c-border-subtle);
background: var(--c-white);
color: var(--c-text-soft);
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.18s ease;
}
.finance-calc-sort-button:hover {
border-color: rgba(47, 214, 139, 0.45);
color: var(--c-petrol);
}
.finance-calc-sort-button.active {
background: var(--grad-energy);
border-color: transparent;
color: var(--c-white);
box-shadow: 0 8px 18px rgba(47, 214, 139, 0.25);
}
/* Karten-Grid */
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-top: 0;
}
@media (max-width: 1100px) {
.finance-calc-offer-table {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.finance-calc-offer-table {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Karte */
.finance-calc-offer-row {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: 24px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(47, 214, 139, 0.035) 0%, rgba(255,255,255,1) 22%),
var(--c-white);
border: 1px solid var(--c-border);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 10px 24px rgba(15, 23, 42, 0.06);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.finance-calc-offer-row:hover {
transform: translateY(-3px);
border-color: rgba(47, 214, 139, 0.5);
box-shadow:
0 4px 12px rgba(15, 23, 42, 0.06),
0 16px 34px rgba(15, 23, 42, 0.10);
}
.finance-calc-offer-row.selected {
border-color: var(--c-mint);
box-shadow:
0 0 0 3px rgba(47, 214, 139, 0.16),
0 16px 34px rgba(15, 23, 42, 0.12);
}
.finance-calc-offer-row.selected::before {
content: "Ausgewählt";
position: absolute;
top: 14px;
right: 14px;
padding: 6px 10px;
border-radius: 999px;
background: var(--grad-energy);
color: var(--c-white);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 8px 18px rgba(47, 214, 139, 0.25);
}
/* Rate */
.offer-rate {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 40px);
line-height: 1;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--c-petrol);
}
.offer-subinfo {
margin-bottom: 18px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--c-text-muted);
}
/* Detail-Kacheln */
.offer-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.offer-details > div {
padding: 12px 12px 10px;
border-radius: 14px;
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
}
.offer-details .label {
display: block;
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-text-muted);
}
.offer-details span:not(.label) {
font-size: 15px;
font-weight: 700;
color: var(--c-petrol);
line-height: 1.25;
}
/* Vorteil / Steuertext */
.offer-objective-details {
margin: 2px 0 16px;
padding: 14px 16px;
border-radius: 16px;
background: linear-gradient(180deg, var(--c-accent-soft) 0%, var(--c-accent-soft) 100%);
border: 1px solid rgba(47, 214, 139, 0.18);
border-left: 4px solid var(--c-mint);
}
.offer-objective-summary {
list-style: none;
cursor: pointer;
position: relative;
padding-right: 20px;
font-size: 14px;
font-weight: 700;
color: var(--c-petrol);
}
.offer-objective-summary::-webkit-details-marker {
display: none;
}
.offer-objective-summary::after {
content: "⌄";
position: absolute;
right: 0;
top: -1px;
font-size: 16px;
transition: transform 0.2s ease;
}
.offer-objective-details[open] .offer-objective-summary::after {
transform: rotate(180deg);
}
.offer-objective-content {
margin-top: 10px;
font-size: 14px;
line-height: 1.6;
color: var(--c-text-soft);
}
.offer-objective-content p:last-child {
margin-bottom: 0;
}
/* Bottom Bar */
.offer-bottombar {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--c-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.offer-bottom-info {
min-width: 0;
font-size: 13px;
font-weight: 700;
color: var(--c-text-soft);
line-height: 1.4;
}
/* CTA */
.offer-select-button {
flex-shrink: 0;
appearance: none;
border: none;
border-radius: 999px;
padding: 11px 16px;
background: var(--grad-energy);
color: var(--c-white) !important;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: 0 10px 20px rgba(47, 214, 139, 0.22);
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.offer-select-button:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(47, 214, 139, 0.28);
}
.offer-select-button.selected {
background: var(--c-petrol);
box-shadow: 0 10px 20px rgba(44, 62, 80, 0.22);
color: var(--c-white) !important;
}
/* Keine alten Mini-Header */
.finance-offer-header {
display: none !important;
}
/* Empty State */
.finance-calc-no-results {
padding: 22px;
border-radius: 18px;
background: var(--c-white);
border: 1px solid var(--c-border);
color: var(--c-text-soft);
}
.finance-calc-footer-hint {
margin-top: 18px;
padding: 14px 16px;
border-radius: 14px;
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
}
.finance-calc-footer-hint h3 {
margin: 0;
font-size: 14px;
color: var(--c-text-soft);
font-weight: 600;
}
/* Mobile Feinschliff */
@media (max-width: 640px) {
.finance-calc-input-section {
margin-bottom: 16px;
}
.finance-calc-vehicle-info h2 {
font-size: 24px;
}
.finance-calc-vehicle-info p {
font-size: 14px;
margin-bottom: 14px;
}
.term-button-group {
width: 100%;
border-radius: 18px;
padding: 6px;
}
.term-button {
flex: 1 1 calc(50% - 8px);
min-height: 42px;
text-align: center;
}
.finance-calc-results-header {
margin-bottom: 14px;
}
.finance-calc-sort-buttons {
width: 100%;
}
.finance-calc-sort-button {
flex: 1 1 auto;
text-align: center;
}
.finance-calc-offer-row {
padding: 18px;
border-radius: 18px;
}
.finance-calc-offer-row.selected::before {
top: 12px;
right: 12px;
font-size: 9px;
padding: 5px 8px;
}
.offer-rate {
font-size: 32px;
}
.offer-subinfo {
margin-bottom: 14px;
}
.offer-details {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.offer-details > div {
padding: 10px;
border-radius: 12px;
}
.offer-details span:not(.label) {
font-size: 14px;
}
.offer-objective-details {
padding: 12px 14px;
border-radius: 14px;
}
.offer-bottombar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.offer-bottom-info {
font-size: 13px;
}
.offer-select-button {
width: 100%;
min-height: 44px;
text-align: center;
}
}
@media (max-width: 420px) {
.offer-details {
grid-template-columns: 1fr;
}
.term-button {
flex: 1 1 100%;
}
}
/* ===================================
16. STORY / WHY THIS VEHICLE
=================================== */
.story-card {
background-color: var(--c-white);
border-radius: var(--radius-lg);
padding: var(--space-5);
border: 1px solid var(--finance-border-color);
box-shadow: var(--shadow-card-xs);
border-left: 4px solid var(--c-mint);
}
.story-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.story-card-title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
color: var(--c-petrol);
}
.story-card-body {
font-size: var(--text-sm);
color: var(--c-text-soft);
}
.story-benefits {
margin-top: var(--space-4);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.benefit {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 600;
font-size: var(--text-sm);
color: var(--c-petrol);
}
.benefit .icon {
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--c-bg-soft);
color: var(--c-mint);
}
.energyefficiency img {
max-height: 180px;
margin-top: var(--space-2);
}
/* ===================================
17. MOBILE BOTTOM BAR
=================================== */
.cinematic-mobile-footer {
display: none;
}
@media (max-width: 1024px) {
.cinematic-sidebar {
display: none;
}
.cinematic-mobile-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: block;
padding: 12px 18px;
background-color: var(--c-white, #ffffff);
border-top: 1px solid var(--finance-border-color, var(--c-border));
box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.16);
z-index: 40;
}
.mob-footer-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.mob-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.mob-model {
font-size: var(--text-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-text-muted);
}
.mob-price-row {
display: flex;
align-items: baseline;
gap: 3px;
}
.mob-price {
font-family: var(--font-heading);
font-size: 20px !important;
font-weight: 800;
color: var(--c-mint) !important;
}
.mob-price-suffix {
font-size: var(--text-xs);
color: var(--c-text-soft);
}
.mob-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px !important;
border-radius: 999px !important;
border: none;
background: var(--grad-energy) !important;
color: var(--c-white) !important;
font-weight: 700 !important;
font-size: var(--text-sm) !important;
text-transform: uppercase;
letter-spacing: 0.12em;
white-space: nowrap;
box-shadow: 0 8px 20px -8px rgba(47, 214, 139, 0.7);
}
}
/* ===================================
18. FORMS & INPUTS
=================================== */
input,
select,
textarea {
background-color: var(--c-white);
border-radius: var(--radius-md);
border: 1px solid var(--finance-border-color);
padding: 10px 12px;
font-size: var(--text-sm);
color: var(--c-text-main);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--c-mint);
box-shadow: 0 0 0 1px rgba(47, 214, 139, 0.5);
}
input[disabled],
select[disabled],
textarea[disabled] {
background-color: rgba(148, 163, 184, 0.1);
color: var(--c-text-muted);
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.form-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--c-text-muted);
}
.form-helper {
font-size: var(--text-xs);
color: var(--c-text-muted);
}
.form-error {
margin-top: 2px;
font-size: var(--text-xs);
color: var(--c-danger);
}
/* ===================================
19. UTILITIES – SPACING, FLEX, GRID
=================================== */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-pt-4 { padding-top: var(--space-4) !important; }
.u-pb-4 { padding-bottom: var(--space-4) !important; }
.u-pl-4 { padding-left: var(--space-4) !important; }
.u-pr-4 { padding-right: var(--space-4) !important; }
.u-flex { display: flex !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-between { justify-content: space-between !important; }
.u-flex-center { justify-content: center !important; align-items: center !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.u-grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.u-grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-hide { display: none !important; }
/* ===================================
20. SKELETON STATES
=================================== */
.skeleton {
position: relative;
overflow: hidden;
background-color: var(--c-bg-soft);
}
.skeleton::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-size: 450px 100%;
animation: shimmer 1.4s linear infinite;
}
.skeleton-text {
height: 0.9em;
border-radius: 6px;
}
/* ===================================
21. RESPONSIVE BREAKPOINTS
=================================== */
@media (max-width: 1200px) {
.cinematic-grid {
grid-template-columns: minmax(0, 2fr) minmax(320px, 1.1fr);
}
.spec-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.cinematic-wrapper {
padding-inline: var(--space-4);
padding-bottom: 104px; /* Platz für Mobile Footer */
}
.cinematic-grid {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-5);
}
.cinematic-hero-card-inner {
grid-template-columns: minmax(0, 1fr);
}
.spec-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.story-benefits {
grid-template-columns: minmax(0, 1fr);
}
.clean-list {
grid-template-columns: minmax(0, 1fr);
}
.finance-calc-offer-row {
flex-direction: column;
align-items: flex-start !important;
padding: var(--space-4) var(--space-4) !important;
}
.finance-calc-offer-content {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.finance-calc-details {
width: 100%;
justify-content: flex-start;
gap: var(--space-3);
}
.finance-calc-detail-item {
align-items: flex-start;
}
.finance-calc-action {
position: absolute;
right: var(--space-4);
top: var(--space-4);
margin: 0;
}
}
@media (max-width: 768px) {
.cinematic-wrapper {
padding-inline: var(--space-3);
}
.cinematic-hero-card {
padding: var(--space-5) var(--space-4);
}
.cinematic-title {
font-size: var(--text-3xl);
}
.cinematic-stage {
padding: var(--space-4);
}
.vehicle-swiper img {
max-height: 320px !important;
}
.section-title {
font-size: var(--text-xl);
}
.spec-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.form-row {
grid-template-columns: minmax(0, 1fr);
}
.pricing-card {
border-radius: var(--radius-lg);
}
.price-row .amount {
font-size: 2.6rem;
}
.finance-calc-tab-list {
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: var(--space-2);
}
.finance-calculator .finance-calc-tab {
white-space: nowrap;
}
}
@media (max-width: 480px) {
.cinematic-wrapper {
padding-inline: var(--space-2);
}
.cinematic-hero-card {
padding: var(--space-4) var(--space-3);
}
.cinematic-stage {
margin-top: var(--space-4);
}
.finance-calculator {
padding: var(--space-4);
}
.pricing-card {
padding: var(--space-4);
}
.btn-primary {
font-size: var(--text-sm);
}
}
/* ===================================
22. PRINT STYLES
=================================== */
@media print {
body {
background-color: var(--c-white);
}
.cinematic-wrapper {
max-width: 100%;
padding: 0 12mm;
}
.cinematic-sidebar,
.cinematic-mobile-footer,
.btn-primary,
.btn-secondary,
.modal,
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
.cinematic-grid {
display: block;
}
.pricing-card,
.cinematic-section,
.story-card {
box-shadow: none;
border-radius: 0;
}
}
/* =========================================
FINANCE FORM OVERLAY (FIXED)
========================================= */
.finance-form-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
overflow-y: auto;
}
.finance-form-modal {
width: 100%;
max-width: var(--layout-narrow-max);
background: var(--c-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
animation: fadeInUp 0.25s ease-out;
}
.finance-form-modal-header {
padding: 24px 28px;
border-bottom: 1px solid var(--c-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.finance-form-modal-title {
margin: 0;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--c-petrol);
}
.finance-form-modal-close {
background: none;
border: none;
font-size: 24px;
padding: 6px;
cursor: pointer;
}
.finance-form-modal-body {
padding: 32px;
}
.finance-form-modal-body .hs-form,
.finance-form-modal-body form {
width: 100% !important;
max-width: 100% !important;
}
/* Responsiv */
@media (max-width: 640px) {
.finance-form-modal {
max-width: 100%;
margin: 0;
}
.finance-form-modal-body {
padding: 20px;
}
.finance-form-modal-header {
padding: 20px;
}
}
/* =========================================================
NEW FINANCE VERTICAL CARD DESIGN
========================================================= */
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.finance-calc-offer-row {
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
border: 1px solid var(--c-border-subtle);
background: var(--c-white);
padding: var(--space-5);
box-shadow: var(--shadow-card-xs);
transition: all .2s ease;
cursor: pointer;
}
.finance-calc-offer-row:hover {
border-color: var(--c-mint);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transform: translateY(-3px);
}
.finance-calc-offer-row.selected {
border-color: var(--c-mint);
box-shadow: 0 0 0 3px rgba(47,214,139,0.2);
}
.finance-offer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-sm);
color: var(--c-text-muted);
}
.offer-lender {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--c-petrol);
margin-bottom: 6px;
}
.offer-product-name {
font-size: var(--text-sm);
color: var(--c-text-soft);
margin-bottom: var(--space-3);
}
.offer-rate {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--c-mint);
font-weight: 800;
margin-bottom: var(--space-3);
}
.offer-subinfo {
font-size: var(--text-xs);
color: var(--c-text-muted);
}
.offer-details {
margin-top: var(--space-3);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
font-size: var(--text-sm);
}
.offer-details div span.label {
display: block;
font-size: var(--text-xs);
color: var(--c-text-muted);
letter-spacing: 0.05em;
}
.finance-objective {
margin-top: var(--space-4);
padding: var(--space-3);
background: var(--c-accent-soft);
border-left: 4px solid var(--c-mint);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--c-petrol);
}
.offer-select-button {
margin-top: var(--space-4);
align-self: flex-end;
background: var(--c-mint);
color: var(--c-white);
padding: 10px 18px;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
border: none;
color: var(--c-white) !important;
}
.offer-select-button.selected {
background: var(--c-petrol);
color: var(--c-white) !important;
}
.offer-objective-details {
margin-top: var(--space-4);
padding: var(--space-3);
background: var(--c-accent-soft);
border-radius: var(--radius-md);
border-left: 4px solid var(--c-mint);
}
.offer-objective-summary {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
color: var(--c-petrol);
}
.offer-objective-content {
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--c-text-soft);
line-height: 1.6;
}
/* =========================================================
FINANCE – 3 COLUMN CARD LAYOUT
========================================================= */
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
/* Tablet */
@media (max-width: 1024px) {
.finance-calc-offer-table {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width: 640px) {
.finance-calc-offer-table {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.finance-calc-offer-row {
display: flex;
flex-direction: column;
padding: var(--space-5);
background: var(--c-white);
border-radius: var(--radius-lg);
border: 1px solid var(--c-border-subtle);
box-shadow: var(--shadow-card-xs);
transition: all .2s ease;
cursor: pointer;
position: relative;
}
.finance-calc-offer-row:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-md);
}
.finance-calc-offer-row.selected {
border-color: var(--c-mint);
box-shadow: 0 0 0 3px rgba(47,214,139,0.25);
}
/* Header: Term + Category */
.finance-offer-header {
font-size: var(--text-xs);
color: var(--c-text-muted);
margin-bottom: var(--space-2);
display: flex;
justify-content: space-between;
}
/* Lender name */
.offer-lender {
font-size: var(--text-lg);
font-family: var(--font-heading);
font-weight: 700;
color: var(--c-petrol);
margin-bottom: 4px;
}
/* Product name */
.offer-product-name {
font-size: var(--text-sm);
color: var(--c-text-soft);
margin-bottom: var(--space-3);
}
/* Price Highlight */
.offer-rate {
font-size: 2rem;
font-family: var(--font-heading);
color: var(--c-mint);
font-weight: 800;
margin-bottom: var(--space-2);
}
.offer-subinfo {
font-size: var(--text-xs);
color: var(--c-text-muted);
margin-bottom: var(--space-3);
}
/* Details grid */
.offer-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.offer-details .label {
font-size: var(--text-xs);
color: var(--c-text-muted);
display: block;
}
/* Steuervorteile (collapsible) */
.offer-objective-details {
margin-top: var(--space-2);
border-radius: var(--radius-md);
background: var(--c-accent-soft);
border-left: 4px solid var(--c-mint);
padding: var(--space-3);
}
.offer-objective-summary {
cursor: pointer;
font-weight: 600;
color: var(--c-petrol);
font-size: var(--text-sm);
}
.offer-objective-content {
margin-top: var(--space-2);
font-size: var(--text-sm);
line-height: 1.6;
}
/* Select Button */
.offer-select-button {
margin-top: auto;
align-self: flex-end;
padding: 10px 18px;
background: var(--c-mint);
color: var(--c-white);
border: none;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 600;
transition: all .2s ease;
color: var(--c-white) !important;
}
.offer-select-button.selected {
background: var(--c-petrol);
color: var(--c-white) !important;
}
/* Clean bottom bar */
.offer-bottombar {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--c-border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
}
.offer-bottom-info {
font-size: var(--text-sm);
color: var(--c-text-soft);
font-weight: 600;
}
/* Button neu */
.offer-select-button {
padding: 10px 18px;
background: var(--grad-energy);
border: none;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-white);
transition: all .2s ease;
box-shadow: 0 4px 12px rgba(47,214,139,0.3);
}
.offer-select-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(47,214,139,0.45);
color: var(--c-white) !important;
}
.offer-select-button.selected {
background: var(--c-petrol);
box-shadow: var(--shadow-card-md);
color: var(--c-white) !important;
}
/* Entferne das alte Mini-Header */
.finance-offer-header {
display: none !important;
}
/* =========================================================
DRIVIST PREMIUM FINANCE CSS – v2
Optimiert für saubere Card-Höhen & perfekt ausgerichtete UI
========================================================= */
/* GRID – immer gleichmäßig */
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 28px;
margin-top: 24px;
}
@media (max-width: 1024px) {
.finance-calc-offer-table {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 640px) {
.finance-calc-offer-table {
grid-template-columns: 1fr;
}
}
/* CARD */
.finance-calc-offer-row {
display: flex;
flex-direction: column;
height: 100%;
padding: 28px;
background: var(--c-white);
border-radius: 20px;
border: 1px solid var(--c-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: all .2s ease;
position: relative;
}
.finance-calc-offer-row:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.finance-calc-offer-row.selected {
border-color: var(--c-accent) !important;
box-shadow: 0 0 0 3px rgba(37,204,138,0.35), 0 8px 26px rgba(0,0,0,0.08);
}
/* RATE / HEADLINE */
.offer-rate {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--c-mint);
margin-bottom: 4px;
text-align: left;
}
.offer-subinfo {
font-size: .85rem;
text-transform: uppercase;
color: var(--c-text-muted);
margin-bottom: 20px;
}
/* DETAILS GRID */
.offer-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
flex-grow: 1; /* sorgt dafür, dass BottomBar immer unten bleibt */
}
.offer-details .label {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text-muted);
display: block;
}
.offer-details span {
font-size: .95rem;
font-weight: 600;
color: var(--c-petrol);
}
/* STEUERVORTEILE (Details) */
.offer-objective-details {
margin-top: 4px;
margin-bottom: 18px;
padding: 14px 18px;
background: var(--c-accent-soft);
border-left: 3px solid var(--c-mint);
border-radius: 10px;
}
.offer-objective-summary {
cursor: pointer;
font-size: .9rem;
font-weight: 700;
color: var(--c-petrol);
list-style: none;
position: relative;
padding-right: 20px;
}
.offer-objective-summary::after {
content: "▼";
position: absolute;
right: 0;
top: 2px;
font-size: .75em;
transition: transform .2s ease;
}
.offer-objective-details[open] .offer-objective-summary::after {
transform: rotate(180deg);
}
.offer-objective-content {
margin-top: 10px;
font-size: .85rem;
color: var(--c-text-soft);
line-height: 1.55;
}
/* BOTTOM BAR */
.offer-bottombar {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--c-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.offer-bottom-info {
font-size: .85rem;
color: var(--c-text-soft);
font-weight: 600;
}
/* ACTION BUTTON */
.offer-select-button {
padding: 8px 16px;
background: var(--grad-energy);
color: var(--c-white);
border-radius: 40px;
font-size: .75rem;
font-weight: 800;
border: none;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(37,204,138,.35);
transition: all .2s ease;
color: var(--c-white) !important;
}
.offer-select-button:hover {
transform: translateY(-2px);
}
.offer-select-button.selected {
background: var(--c-petrol);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
color: var(--c-white) !important;
}
/* Entfernt alten Mini-Header */
.finance-offer-header {
display: none !important;
}
/* ===================================================================
DRIVIST PREMIUM FINANCE CARDS — Variant B (Gradient Edition)
Unified, cleaned & production-ready
=================================================================== */
/* ===============================
FINANCE GRID
=============================== */
.finance-calc-offer-table {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 28px;
margin-top: 24px;
}
@media (max-width: 1024px) {
.finance-calc-offer-table { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.finance-calc-offer-table { grid-template-columns: 1fr; }
}
/* ===============================
PREMIUM CARD
=============================== */
.finance-calc-offer-row {
position: relative;
display: flex;
flex-direction: column;
padding: 28px;
background: var(--c-white);
border-radius: 20px;
border: 1px solid var(--c-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all .25s cubic-bezier(.34,1.56,.64,1);
cursor: pointer;
height: 100%;
}
.finance-calc-offer-row:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(0,0,0,0.08);
border-color: var(--c-mint);
}
.finance-calc-offer-row.selected {
border-color: var(--c-mint);
box-shadow: 0 0 0 3px rgba(47,214,139,0.22), 0 8px 28px rgba(0,0,0,0.12);
}
/* BEST OFFER BADGE (optional) */
.finance-best-offer-badge {
position: absolute;
top: 16px;
right: 16px;
padding: 6px 12px;
background: var(--grad-energy);
color: var(--c-white);
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(47,214,139,.35);
}
/* ===============================
PRICE / RATE SECTION
=============================== */
.offer-rate {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--c-mint);
margin-bottom: 4px;
}
.offer-subinfo {
font-size: .85rem;
text-transform: uppercase;
color: var(--c-text-muted);
margin-bottom: 20px;
}
/* ===============================
DETAILS
=============================== */
.offer-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
flex-grow: 1; /* Bottom bar always sticks to bottom */
}
.offer-details .label {
font-size: .72rem;
text-transform: uppercase;
color: var(--c-text-muted);
letter-spacing: .04em;
display: block;
margin-bottom: 1px;
}
.offer-details span {
font-size: .95rem;
font-weight: 600;
color: var(--c-petrol);
}
/* ===============================
STEUERVORTEILE (inside Card)
=============================== */
.offer-objective-details {
margin-top: 6px;
margin-bottom: 16px;
padding: 14px 18px;
background: var(--c-accent-soft);
border-left: 3px solid var(--c-mint);
border-radius: 12px;
font-size: .9rem;
line-height: 1.55;
color: var(--c-text-soft);
}
.offer-objective-summary {
cursor: pointer;
font-weight: 700;
color: var(--c-petrol);
list-style: none;
position: relative;
padding-right: 20px;
}
.offer-objective-summary::after {
content: "▼";
position: absolute;
right: 0;
top: 2px;
font-size: .75em;
transition: transform .2s ease;
}
.offer-objective-details[open] .offer-objective-summary::after {
transform: rotate(180deg);
}
.offer-objective-content {
margin-top: 10px;
font-size: .85rem;
color: var(--c-text-soft);
}
/* ===============================
BOTTOM BAR (PRODUCT + LENDER)
=============================== */
.offer-bottombar {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--c-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.offer-bottom-info {
font-size: .85rem;
font-weight: 600;
color: var(--c-text-soft);
}
/* ===============================
SELECT BUTTON (Gradient)
=============================== */
.offer-select-button {
padding: 8px 16px;
background: var(--grad-energy);
color: var(--c-white);
border-radius: 40px;
font-size: .75rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
border: none;
box-shadow: 0 4px 12px rgba(37,204,138,.35);
transition: all .2s ease;
color: var(--c-white) !important;
}
.offer-select-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(37,204,138,.45);
}
.offer-select-button.selected {
background: var(--c-petrol);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
color: var(--c-white) !important;
}
/* REMOVE MINI HEADER (Term + Category) */
.finance-offer-header {
display: none !important;
}
/****************************************************
* DRIVIST – Ausstattung Kategorien (Clean Layout)
****************************************************/
/* Wrapper flach & modern halten */
.feature-details .feature-full-list {
background: var(--c-white);
border-radius: 18px;
padding: 28px 32px;
border: 1px solid var(--c-border);
box-shadow: none !important;
margin-top: 16px;
}
/* Kategorie-Titel */
.spec-category,
.feature-full-list h4 {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--c-petrol);
margin: 28px 0 12px;
line-height: 1.2;
}
/* Erster Kategorie-Titel oben enger */
.feature-full-list h4:first-of-type {
margin-top: 0px;
}
/* Einträge besser lesbar */
.clean-list li {
display: grid;
grid-template-columns: 18px auto;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: var(--c-text-primary);
padding: 2px 0;
line-height: 1.45;
}
/* Zweispaltige Darstellung harmonisieren */
.clean-list {
column-gap: 60px !important;
}
/* Checkbox/Icon-Styling */
.icon-wrap {
color: var(--c-mint);
margin-top: 3px;
}
/* Summary (Accordion Titel) */
.feature-details summary span {
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
color: var(--c-petrol);
}
/* Abstand zwischen den Abschnitten */
.feature-full-list {
display: block;
}
/* Mobile Optimierung */
@media (max-width: 640px) {
.clean-list {
grid-template-columns: 1fr !important;
}
.feature-full-list {
padding: 22px 20px;
}
.spec-category,
.feature-full-list h4 {
font-size: 18px;
margin: 24px 0 10px;
}
}
/* Abstand zwischen Überschrift und Chips optimieren */
.cinematic-section .feature-chips {
margin-top: 14px !important;
margin-bottom: 26px !important;
}
.cinematic-section .section-title {
margin-bottom: 6px !important;
}
/* Accordion Header einladender gestalten */
.feature-details summary {
padding: 14px 4px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.feature-details summary span {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--c-petrol);
}
/* Hover-Effekt – lädt zum Klicken ein */
.feature-details summary:hover span {
color: var(--c-mint);
}
/* Chevron-Animation */
.feature-details summary svg {
margin-left: 6px;
transition: transform 0.25s ease;
}
.feature-details[open] summary svg {
transform: rotate(180deg);
}
/* Wrapper optisch leichter wirken lassen */
.feature-full-list {
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 22px 26px;
margin-top: 14px;
background: var(--c-white);
}
/* =========================================================
DRIVIST FINANCE MODAL MODULE V4
Freigegebene UX-Struktur
========================================================= */
:root {
--dfm-bg: var(--c-bg-soft);
--dfm-card: var(--c-white);
--dfm-border: var(--c-border);
--dfm-text: var(--c-petrol);
--dfm-text-soft: var(--c-text-secondary);
--dfm-text-muted: var(--c-text-tertiary);
--dfm-green: var(--c-accent);
--dfm-blue: var(--c-petrol);
--dfm-soft: var(--c-bg-soft);
--dfm-shadow: 0 12px 30px rgba(32, 53, 79, 0.10);
--dfm-shadow-strong: 0 18px 42px rgba(32, 53, 79, 0.16);
}
.cinematic-sidebar,
.pricing-card,
.mySticky { display: none !important; }
@media (min-width: 1025px) {
.cinematic-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.drivist-finance-module { position: relative; z-index: 20; }
.drivist-finance-module.is-modal-open .drivist-finance-bar { opacity: 0; pointer-events: none; }
.drivist-finance-bar {
position: fixed; left: 20px; right: 20px; bottom: 18px; z-index: 9990;
transition: opacity .18s ease;
}
.drivist-finance-bar__content {
display: grid; grid-template-columns: minmax(220px,1fr) minmax(240px,1fr) auto;
gap: 18px; align-items: center; padding: 16px 18px;
border-radius: 20px; background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
border: 1px solid rgba(219,227,236,.9);
box-shadow: 0 -6px 20px rgba(32,53,79,.08), 0 12px 30px rgba(32,53,79,.14);
}
.drivist-finance-bar__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dfm-text-muted); }
.drivist-finance-bar__rate { font-family: var(--font-heading); font-size: clamp(24px,3vw,34px); line-height: 1; font-weight: 800; color: var(--dfm-blue); }
.drivist-finance-bar__note,
.drivist-finance-bar__chosen-text { font-size: 14px; color: var(--dfm-text-soft); font-weight: 600; }
.drivist-finance-bar__chosen.is-hidden { display: none; }
.drivist-finance-bar__actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.dfm-btn {
appearance: none; border: none; border-radius: 999px; min-height: 44px; padding: 11px 20px;
font-size: 13px; font-weight: 700; letter-spacing: .03em; transition: all .18s ease; cursor: pointer;
}
.dfm-btn--primary {
background: var(--c-brand-dark); color: var(--c-white);
box-shadow: 0 4px 14px rgba(28,43,58,.25);
}
.dfm-btn--primary:hover:not(:disabled):not(.is-disabled) {
background: var(--c-petrol); transform: translateY(-1px);
}
/* "Weiter zur Finanzierung" — grüner Akzent */
.dfm-btn--cta {
background: var(--c-accent); color: var(--c-white);
box-shadow: 0 4px 14px rgba(52,199,89,.3);
}
.dfm-btn--cta:hover:not(:disabled):not(.is-disabled) {
background: var(--c-accent-hover); transform: translateY(-1px);
}
.dfm-btn--secondary { background: var(--c-bg-soft); color: var(--c-text-primary); border: 1px solid var(--c-border); }
.dfm-btn--secondary:hover { background: var(--c-border); }
.dfm-btn.is-disabled,
.dfm-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.drivist-finance-modal { position: fixed; inset: 0; z-index: 9995; display: none; }
.drivist-finance-modal.is-open { display: block; }
.drivist-finance-modal__backdrop { position: absolute; inset: 0; background: rgba(20,34,52,.56); backdrop-filter: blur(8px); }
.drivist-finance-modal__dialog {
position: relative; display: flex; flex-direction: column;
width: min(1460px, calc(100vw - 32px)); height: calc(100vh - 32px); margin: 16px auto;
border-radius: 28px; background: var(--dfm-bg); box-shadow: var(--dfm-shadow-strong); overflow: hidden;
}
.drivist-finance-modal__header,
.drivist-finance-modal__footer {
background: var(--c-white); border-bottom: 1px solid var(--dfm-border);
}
.drivist-finance-modal__header {
display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 28px 30px 20px;
}
.drivist-finance-modal__kicker { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dfm-text-muted); }
.drivist-finance-modal__title { margin: 0; font-family: var(--font-heading); font-size: clamp(28px,3vw,42px); line-height: 1.02; font-weight: 800; color: var(--dfm-blue); letter-spacing: -.04em; }
.drivist-finance-modal__subtitle { margin: 8px 0 0; font-size: 16px; color: var(--dfm-text-soft); }
.drivist-finance-modal__close { width: 44px; height: 44px; border: none; border-radius: 14px; background: var(--dfm-soft); color: var(--dfm-blue); font-size: 28px; }
.drivist-finance-modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.dfm-topflow {
display: grid; grid-template-columns: 1.05fr 1.4fr; gap: 18px; padding: 22px 24px 0;
}
.dfm-step-card,
.dfm-results,
.dfm-info-box,
.dfm-product-card,
.dfm-offer,
.dfm-empty { background: var(--c-white); border: 1px solid var(--dfm-border); box-shadow: var(--dfm-shadow); }
.dfm-step-card { border-radius: 22px; padding: 20px; }
.dfm-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.dfm-step-head--inline { margin-bottom: 0; }
.dfm-step-number {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
border-radius: 999px; background: var(--dfm-blue); color: var(--c-white); font-size: 13px; font-weight: 800;
}
.dfm-step-head h3 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--dfm-blue); }
.dfm-step-head p { margin: 0; font-size: 14px; color: var(--dfm-text-soft); }
.dfm-product-picker { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.dfm-product-card {
border-radius: 18px; padding: 16px; cursor: pointer; transition: all .18s ease;
}
.dfm-product-card.is-active { border-color: var(--dfm-green); box-shadow: 0 0 0 3px rgba(57,205,137,.14), var(--dfm-shadow); }
.dfm-product-card__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--dfm-blue); }
.dfm-product-card__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dfm-text-soft); }
.dfm-parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dfm-field { display: flex; flex-direction: column; gap: 10px; }
.dfm-field--full { grid-column: 1 / -1; }
.dfm-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dfm-text-muted); }
.dfm-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dfm-row-head strong { font-family: var(--font-heading); font-size: 16px; color: var(--dfm-blue); }
.dfm-fixed-value {
min-height: 52px; display: flex; align-items: center; padding: 12px 14px; border-radius: 14px;
border: 1px solid var(--dfm-border); background: var(--dfm-soft); color: var(--dfm-blue); font-size: 18px; font-weight: 800;
}
.dfm-help { margin: 0; font-size: 12px; color: var(--dfm-text-muted); }
.dfm-field input[type="range"] { width: 100%; accent-color: var(--dfm-green); }
.dfm-terms { display: flex; flex-wrap: wrap; gap: 10px; }
.dfm-term {
border: 1px solid var(--dfm-border); background: var(--c-white); color: var(--dfm-text-soft); border-radius: 999px;
padding: 10px 14px; font-size: 13px; font-weight: 800;
}
.dfm-term.is-active { background: var(--dfm-blue); border-color: var(--dfm-blue); color: var(--c-white); }
.dfm-results { margin: 18px 24px 24px; border-radius: 22px; padding: 20px; }
.dfm-results__intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-bottom: 18px; }
.dfm-info-box { border-radius: 18px; padding: 16px; }
.dfm-info-box__title { margin-bottom: 4px; font-size: 14px; font-weight: 800; color: var(--dfm-blue); }
.dfm-info-box__text { font-size: 13px; line-height: 1.5; color: var(--dfm-text-soft); }
.dfm-results__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dfm-results__header h3 { margin: 0; font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--dfm-blue); }
.dfm-results__header p { margin: 6px 0 0; color: var(--dfm-text-soft); font-size: 15px; }
.dfm-results__sort { display: flex; gap: 8px; flex-wrap: wrap; }
.dfm-chip {
border: 1px solid var(--dfm-border); background: var(--c-white); color: var(--dfm-text-soft);
padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.dfm-chip.is-active { background: var(--dfm-blue); border-color: var(--dfm-blue); color: var(--c-white); }
.dfm-offers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.dfm-offer { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 22px; }
.dfm-offer.is-selected { border-color: var(--dfm-green); box-shadow: 0 0 0 3px rgba(57,205,137,.16), var(--dfm-shadow-strong); }
.dfm-offer__badge {
align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--dfm-green) 0%, var(--c-accent-soft) 100%);
color: var(--c-white); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dfm-offer__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dfm-offer__bank strong { display: block; font-size: 20px; color: var(--dfm-blue); }
.dfm-offer__bank span { font-size: 14px; color: var(--dfm-text-soft); }
.dfm-offer__rate { font-family: var(--font-heading); font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.05em; color: var(--dfm-blue); }
.dfm-offer__rate-note { font-size: 12px; font-weight: 800; color: var(--dfm-text-muted); letter-spacing: .12em; text-transform: uppercase; }
.dfm-offer__stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.dfm-stat { padding: 12px 14px; border-radius: 14px; background: var(--dfm-soft); border: 1px solid var(--dfm-border); }
.dfm-stat__label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dfm-text-muted); }
.dfm-stat__value { font-size: 17px; font-weight: 800; color: var(--dfm-blue); }
.dfm-offer__footer { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--dfm-border); }
.dfm-offer__meta { font-size: 14px; font-weight: 700; color: var(--dfm-text-soft); }
.dfm-offer__select {
border: none; border-radius: 14px; min-height: 46px; padding: 12px 16px; background: linear-gradient(135deg, var(--dfm-green) 0%, var(--c-petrol) 100%);
color: var(--c-white); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.dfm-offer__select.is-selected { background: var(--dfm-blue); }
.dfm-empty { padding: 24px; border-radius: 18px; color: var(--dfm-text-soft); }
.dfm-empty.is-hidden { display: none; }
.drivist-finance-modal__footer {
display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 24px;
border-top: 1px solid var(--dfm-border);
}
.dfm-footer-summary { display: flex; flex-direction: column; gap: 4px; }
.dfm-footer-summary__label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dfm-text-muted); }
.dfm-footer-summary strong { font-size: 16px; color: var(--dfm-blue); }
.is-hidden { display: none !important; }
@media (max-width: 1180px) {
.dfm-topflow,
.dfm-results__intro,
.dfm-offers { grid-template-columns: 1fr; }
.dfm-product-picker { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
.drivist-finance-bar { left: 12px; right: 12px; bottom: 12px; }
.drivist-finance-bar__content { grid-template-columns: 1fr; }
.drivist-finance-bar__actions { justify-content: stretch; }
.drivist-finance-bar__actions .dfm-btn { flex: 1 1 auto; }
.drivist-finance-modal__dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); margin: 6px auto; border-radius: 18px; }
}
@media (max-width: 640px) {
.drivist-finance-modal { z-index: 200; }
.drivist-finance-modal__dialog { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
.drivist-finance-modal__header { padding: 18px 16px 14px; }
.drivist-finance-modal__title { font-size: 28px; }
.dfm-topflow { padding: 16px 16px 0; }
.dfm-step-card,
.dfm-results { padding: 16px; margin: 0 16px 16px; }
.dfm-parameter-grid,
.dfm-offer__stats { grid-template-columns: 1fr; }
.dfm-results__sort { width: 100%; }
.dfm-chip { flex: 1 1 calc(50% - 8px); text-align: center; }
.dfm-offer__top,
.dfm-offer__footer,
.drivist-finance-modal__footer { flex-direction: column; align-items: stretch; }
.dfm-offer__select,
#dfm-apply-offer { width: 100%; }
}
@media (max-width: 420px) {
.drivist-finance-bar__actions { flex-direction: column; }
.drivist-finance-bar__actions .dfm-btn,
.dfm-chip { width: 100%; }
}
/* ================================================
DFM MODAL — LAYOUT FIX & DESKTOP OPTIMIERUNG
================================================ */
/* Site sticky header überlagert modal → z-index fix */
.drivist-finance-modal {
z-index: 99999 !important;
}
.drivist-finance-modal__backdrop {
z-index: 99999 !important;
}
.drivist-finance-modal__dialog {
z-index: 100000 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1200px;
width: calc(100vw - 48px);
max-height: calc(100vh - 48px);
height: auto;
display: flex;
flex-direction: column;
}
/* Desktop: 2-Spalten-Layout: Links Konfiguration, Rechts Angebote */
@media (min-width: 1025px) {
.drivist-finance-modal__body {
display: grid;
grid-template-columns: 420px 1fr;
grid-template-rows: 1fr;
min-height: 0;
overflow: hidden;
align-items: start;
}
.dfm-topflow {
grid-column: 1;
grid-row: 1;
overflow-y: auto;
height: 100%;
max-height: calc(100vh - 260px);
padding: 20px 20px 24px 24px;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid var(--dfm-border);
background: var(--dfm-bg);
}
.dfm-results {
grid-column: 2;
grid-row: 1;
overflow-y: auto;
height: 100%;
max-height: calc(100vh - 260px);
margin: 0;
border-radius: 0;
border: none;
border-left: 1px solid var(--dfm-border);
background: var(--dfm-bg);
padding: 20px 24px 24px 20px;
box-shadow: none;
}
.dfm-product-picker {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.dfm-topflow .dfm-step-card {
border-radius: 18px;
}
.dfm-results__intro {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 14px;
}
.dfm-results__header {
margin-bottom: 14px;
}
.dfm-offers {
grid-template-columns: 1fr;
}
}
/* Tablet: Alles in einer Spalte, scrollbar */
@media (min-width: 641px) and (max-width: 1024px) {
.drivist-finance-modal__dialog {
width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
}
.drivist-finance-modal__body {
overflow-y: auto;
display: flex;
flex-direction: column;
}
.dfm-topflow {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px 20px 0;
}
.dfm-results {
margin: 0 20px 20px;
}
.dfm-product-picker {
grid-template-columns: repeat(3, minmax(0,1fr));
}
.dfm-results__intro {
grid-template-columns: 1fr;
}
.dfm-offers {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
/* Mobile */
@media (max-width: 640px) {
.drivist-finance-modal__dialog {
transform: none;
top: 0; left: 0;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.dfm-topflow {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 0;
}
.dfm-results {
margin: 0 14px 14px;
padding: 14px;
}
.dfm-product-picker {
grid-template-columns: 1fr 1fr;
}
.dfm-product-card__text {
display: none;
}
.dfm-offers {
grid-template-columns: 1fr;
}
}
/* ================================================
ENERGIE-LABEL BADGE — EnVKV
================================================ */
.energy-label-block {
display: flex;
align-items: center;
gap: 20px;
margin-top: 20px;
padding: 16px 20px;
background: var(--c-surface, var(--c-bg-soft));
border: 1px solid var(--c-border, var(--c-border));
border-radius: 16px;
flex-wrap: wrap;
}
.energy-label-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 14px;
border-radius: 10px;
font-weight: 800;
color: var(--c-white);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
padding-right: 28px;
}
.energy-label-badge--a { background: #1ab245; }
.energy-label-badge--b { background: #5bc43b; }
.energy-label-badge--c { background: #c4db2f; color: var(--c-text-primary); }
.energy-label-badge--d { background: #fce21c; color: var(--c-text-primary); }
.energy-label-badge--e { background: #f6a321; color: var(--c-text-primary); }
.energy-label-badge--f { background: #f05522; }
.energy-label-badge--g { background: var(--c-error); }
.energy-label-badge__letter {
font-size: 28px;
line-height: 1;
font-family: var(--font-heading, sans-serif);
}
.energy-label-badge__text {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .9;
}
.energy-label-img {
max-height: 120px;
width: auto;
object-fit: contain;
}
@media (max-width: 640px) {
.energy-label-block {
gap: 14px;
padding: 14px;
}
.energy-label-img {
max-height: 90px;
}
}
/* ================================================
DRIVIST VALUE PROPOSITION SECTION
================================================ */
.drivist-value-section {
background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-bg-soft) 100%);
border: 1px solid var(--c-border);
}
.dv-header {
text-align: center;
margin-bottom: 32px;
}
.dv-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-primary, var(--c-accent));
margin-bottom: 10px;
background: rgba(57,205,137,.1);
padding: 6px 14px;
border-radius: 999px;
}
.dv-subtitle {
font-size: 16px;
color: var(--c-text-secondary);
max-width: 600px;
margin: 10px auto 0;
line-height: 1.6;
}
.dv-steps {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 32px;
overflow-x: auto;
padding-bottom: 4px;
}
.dv-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
flex: 1 1 0;
min-width: 140px;
}
.dv-step--connector {
flex: 0 0 32px;
min-width: 32px;
height: 2px;
background: linear-gradient(90deg, var(--c-accent), var(--c-petrol));
align-self: flex-start;
margin-top: 28px;
border-radius: 2px;
}
.dv-step__icon {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--c-white);
border: 2px solid var(--c-border);
border-radius: 18px;
font-size: 24px;
box-shadow: 0 4px 14px rgba(48,70,97,.08);
}
.dv-step__content strong {
display: block;
font-size: 14px;
font-weight: 800;
color: var(--c-petrol);
margin-bottom: 4px;
}
.dv-step__content span {
font-size: 12px;
color: var(--c-text-tertiary);
line-height: 1.4;
}
.dv-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.dv-feature {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 14px 16px;
font-size: 14px;
color: var(--c-petrol);
font-weight: 600;
line-height: 1.4;
}
.dv-feature__check {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-petrol) 100%);
color: var(--c-white);
font-size: 12px;
font-weight: 900;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
@media (max-width: 900px) {
.dv-features {
grid-template-columns: repeat(2, 1fr);
}
.dv-steps {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.dv-step--connector { display: none; }
}
@media (max-width: 640px) {
.dv-features {
grid-template-columns: 1fr;
}
}
/* ================================================
DRIVIST STORY / TESTIMONIAL SECTION
================================================ */
.drivist-story-section {
background: var(--c-petrol);
color: var(--c-white);
border: none;
}
.drivist-story-section .section-title,
.ds-title {
color: var(--c-white) !important;
}
.ds-badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent);
background: rgba(57,205,137,.12);
border: 1px solid rgba(57,205,137,.3);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 12px;
}
.ds-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 28px;
}
.ds-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.ds-event {
display: grid;
grid-template-columns: 20px 1fr;
gap: 16px;
padding-bottom: 24px;
position: relative;
}
.ds-event:not(:last-child)::after {
content: '';
position: absolute;
left: 9px;
top: 20px;
bottom: 0;
width: 2px;
background: rgba(255,255,255,.12);
}
.ds-event__dot {
width: 20px; height: 20px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
border: 3px solid;
position: relative;
z-index: 1;
}
.ds-event__dot--red { background: var(--c-error); border-color: rgba(226,0,26,.3); }
.ds-event__dot--green { background: var(--c-accent); border-color: rgba(57,205,137,.3); }
.ds-event__time {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
margin-bottom: 6px;
}
.ds-event__body p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,.75);
}
.ds-event__body strong { color: var(--c-white); }
.ds-event--solution .ds-event__body p {
color: rgba(255,255,255,.92);
}
.ds-quote-wrap {
display: flex;
flex-direction: column;
gap: 24px;
}
.ds-quote {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 22px;
padding: 28px;
position: relative;
flex: 1;
}
.ds-quote__marks {
font-family: Georgia, serif;
font-size: 80px;
line-height: .7;
color: var(--c-accent);
opacity: .6;
margin-bottom: 8px;
}
.ds-quote__text {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,.9);
margin: 0 0 20px;
font-style: italic;
}
.ds-quote__author {
display: flex;
align-items: center;
gap: 12px;
}
.ds-quote__avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent), var(--c-petrol));
color: var(--c-white);
font-size: 18px;
font-weight: 900;
display: flex; align-items: center; justify-content: center;
}
.ds-quote__author strong { display: block; font-size: 15px; color: var(--c-white); }
.ds-quote__author span { font-size: 13px; color: rgba(255,255,255,.5); }
.ds-stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.ds-stat {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
padding: 16px 12px;
text-align: center;
}
.ds-stat strong {
display: block;
font-family: var(--font-heading, sans-serif);
font-size: 22px;
font-weight: 900;
color: var(--c-accent);
letter-spacing: -.02em;
}
.ds-stat span {
font-size: 12px;
color: rgba(255,255,255,.5);
line-height: 1.3;
}
@media (max-width: 900px) {
.ds-story {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 640px) {
.ds-stat-row {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.ds-stat strong { font-size: 18px; }
.drivist-story-section { border-radius: 0; margin-left: -16px; margin-right: -16px; }
}
/* ============================================================
HUBSPOT KI-WIDGET – unter Finance-Bar verstecken
============================================================ */
#hubspot-messages-iframe-container,
#hs-messages-widget-container,
.hs-messages-widget,
#hubspot-messages-widget-container,
div[id*="hubspot"][class*="widget"],
div[id*="hs-messages"] {
z-index: 60 !important; /* unter Finance-Bar (70) */
}
/* Wenn Finance-Modal offen: Widget komplett ausblenden */
body.finance-modal-open #hubspot-messages-iframe-container,
body.finance-modal-open #hs-messages-widget-container {
display: none !important;
}
/* ==========================================================
DRIVIST — INLINE FINANCE SECTION (kein Modal mehr)
Neue Klassen für die eingebettete Finanzierungs-Section
========================================================== */
/* ---- Finance Section Header (Gradient Divider) ---- */
.drv-finance-section {
margin-top: 64px;
padding-bottom: 80px;
}
.drv-finance-section__header {
background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-petrol) 60%, var(--c-petrol) 100%);
border-radius: 28px;
padding: 52px 48px;
margin-bottom: 48px;
position: relative;
overflow: hidden;
}
.drv-finance-section__header::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 50%, rgba(57,205,137,.18) 0%, transparent 65%);
pointer-events: none;
}
.drv-finance-section__header-inner {
position: relative;
z-index: 1;
}
.drv-finance-section__step-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(57,205,137,.2);
border: 1px solid rgba(57,205,137,.4);
color: var(--c-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.drv-finance-section__title {
margin: 0 0 10px;
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 56px);
font-weight: 800;
color: var(--c-white);
letter-spacing: -.04em;
line-height: 1.02;
}
.drv-finance-section__sub {
margin: 0;
font-size: 17px;
color: rgba(255,255,255,.7);
line-height: 1.5;
}
/* ---- Finance Section Body Layout ---- */
.drv-finance-section__body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: flex-start;
}
/* ---- Vehicle Summary Sidebar ---- */
.drv-fin-vehicle-summary {
position: sticky;
top: 80px;
background: var(--c-white);
border: 1px solid var(--dfm-border);
border-radius: 20px;
padding: 20px;
box-shadow: var(--dfm-shadow);
display: flex;
flex-direction: column;
gap: 14px;
}
.drv-fin-vehicle-summary__img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 12px;
}
.drv-fin-vehicle-summary__info {
display: flex;
flex-direction: column;
gap: 4px;
}
.drv-fin-vehicle-summary__info strong {
font-size: 15px;
font-weight: 800;
color: var(--dfm-blue);
line-height: 1.2;
}
.drv-fin-vehicle-summary__info span {
font-size: 13px;
color: var(--dfm-text-soft);
}
.drv-fin-vehicle-summary__price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--dfm-border);
}
.drv-fin-vehicle-summary__price-row span {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--dfm-text-muted);
}
.drv-fin-vehicle-summary__price-row strong {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: var(--dfm-blue);
}
/* ---- Inline Finance Module ---- */
.dfm-inline {
display: flex;
flex-direction: column;
gap: 0;
}
/* ---- Steps (inline, nicht im Modal) ---- */
.dfp-step {
background: var(--c-white);
border: 1px solid var(--dfm-border);
border-radius: 24px;
padding: 28px 28px 24px;
margin-bottom: 20px;
box-shadow: var(--dfm-shadow);
}
.dfp-step__head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 22px;
}
.dfp-step__num {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--c-petrol) 0%, var(--c-petrol) 100%);
color: var(--c-white);
font-size: 14px;
font-weight: 800;
box-shadow: 0 3px 10px rgba(48,70,97,.25);
}
.dfp-step__title {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
color: var(--dfm-blue);
letter-spacing: -.03em;
}
.dfp-step__sub {
margin: 0;
font-size: 14px;
color: var(--dfm-text-soft);
line-height: 1.5;
}
/* Step 1 — Finanzierungsart: 3-spaltig */
#dfp-step-1 .dfm-product-picker {
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
/* Step 2 — Parameter */
.dfm-field.is-hidden { display: none !important; }
/* Step 3 — Angebote Header */
.dfm-results-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.dfm-results-header h4 {
margin: 0;
font-family: var(--font-heading);
font-size: 26px;
font-weight: 800;
color: var(--dfm-blue);
}
/* ---- Angebots-Karten (neue Struktur) ---- */
.dfm-offer-card {
background: var(--c-white);
border: 1px solid var(--dfm-border);
border-radius: 20px;
padding: 22px;
position: relative;
transition: all .18s ease;
box-shadow: var(--dfm-shadow);
}
.dfm-offer-card.is-selected {
border-color: var(--dfm-green);
box-shadow: 0 0 0 3px rgba(57,205,137,.16), var(--dfm-shadow-strong);
}
.dfm-offer-card__badge {
position: absolute;
top: -10px;
left: 20px;
padding: 5px 12px;
border-radius: 999px;
background: linear-gradient(135deg, var(--dfm-green) 0%, var(--c-accent-soft) 100%);
color: var(--c-white);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.dfm-offer-card__header {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--dfm-border);
}
.dfm-offer-card__lender {
font-size: 18px;
font-weight: 800;
color: var(--dfm-blue);
margin-bottom: 2px;
}
.dfm-offer-card__product-name {
font-size: 13px;
color: var(--dfm-text-soft);
margin-bottom: 10px;
}
.dfm-offer-card__rate {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 800;
color: var(--dfm-blue);
letter-spacing: -.05em;
line-height: 1;
}
.dfm-offer-card__rate-unit {
font-size: 13px;
font-weight: 700;
color: var(--dfm-text-muted);
letter-spacing: .1em;
text-transform: uppercase;
display: block;
margin-top: 4px;
}
.dfm-offer-card__details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.dfm-offer-card__detail-item {
display: flex;
flex-direction: column;
gap: 3px;
background: var(--dfm-soft);
border: 1px solid var(--dfm-border);
border-radius: 12px;
padding: 10px 12px;
}
.dfm-offer-card__detail-item span {
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dfm-text-muted);
}
.dfm-offer-card__detail-item strong {
font-size: 16px;
font-weight: 800;
color: var(--dfm-blue);
}
.dfm-offer-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.dfm-offer-card__label {
font-size: 13px;
color: var(--dfm-text-soft);
}
.dfm-offer__select {
appearance: none;
border: 1px solid var(--dfm-border);
border-radius: 999px;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
background: var(--c-white);
color: var(--dfm-blue);
cursor: pointer;
transition: all .16s ease;
}
.dfm-offer__select:hover {
background: var(--dfm-soft);
}
.dfm-offer__select--active {
background: var(--dfm-blue);
color: var(--c-white);
border-color: var(--dfm-blue);
}
/* ---- Direkt-Angebote (Vorkasse, Rechnungskauf) ---- */
.dfm-direct-offer {
background: var(--c-white);
border: 1px solid var(--dfm-border);
border-radius: 20px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--dfm-shadow);
}
.dfm-direct-offer__title {
font-size: 22px;
font-weight: 800;
color: var(--dfm-blue);
}
.dfm-direct-offer__desc {
font-size: 14px;
color: var(--dfm-text-soft);
line-height: 1.6;
}
.dfm-direct-offer__price {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 16px;
background: var(--dfm-soft);
border-radius: 12px;
}
.dfm-direct-offer__price span {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--dfm-text-muted);
}
.dfm-direct-offer__price strong {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--dfm-blue);
}
/* ---- CTA Bar (sticky unten im Finance Module) ---- */
.dfm-cta-bar {
position: sticky;
bottom: 16px;
z-index: 100;
background: rgba(255,255,255,.96);
backdrop-filter: blur(16px);
border: 1px solid rgba(219,227,236,.9);
border-radius: 20px;
padding: 16px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
box-shadow: 0 -4px 16px rgba(32,53,79,.08), 0 8px 24px rgba(32,53,79,.12);
flex-wrap: wrap;
margin-top: 8px;
}
.dfm-cta-bar__summary {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dfm-cta-bar__summary-label {
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dfm-text-muted);
}
.dfm-cta-bar__summary-text {
font-size: 14px;
font-weight: 700;
color: var(--dfm-blue);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- Sidebar CTAs ---- */
.drv-cta-btn {
display: block;
width: 100%;
text-align: center;
border: none;
border-radius: 999px;
padding: 14px 20px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all .18s ease;
margin-bottom: 8px;
}
.drv-cta-btn--primary {
background: var(--grad-btn-primary, linear-gradient(135deg, var(--c-petrol) 0%, var(--c-petrol) 100%));
color: var(--c-text-on-dark, var(--c-white));
box-shadow: var(--shadow-glow-blue, 0 4px 14px rgba(48,70,97,.25));
}
.drv-cta-btn--primary:hover {
background: var(--grad-btn-primary-hover, linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-petrol) 100%));
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(48,70,97,.3);
}
.drv-cta-btn--secondary {
background: var(--dfm-soft);
color: var(--dfm-blue);
border: 1px solid var(--dfm-border);
}
.drv-cta-btn--secondary:hover {
background: var(--c-border);
color: var(--c-text-primary);
}
/* ---- Action Buttons (Merken/Teilen) ---- */
.sidebar-card--actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid var(--dfm-border);
border-radius: 12px;
background: var(--c-white);
color: var(--dfm-text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .16s ease;
width: 100%;
}
.action-btn:hover {
background: var(--dfm-soft);
border-color: var(--c-border);
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.drv-finance-section__body {
grid-template-columns: 1fr;
}
.drv-fin-vehicle-summary {
position: static;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.drv-fin-vehicle-summary__img {
width: 100px;
height: 70px;
flex-shrink: 0;
}
#dfp-step-1 .dfm-product-picker {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.dfm-finance-section__header {
padding: 36px 28px;
}
}
@media (max-width: 768px) {
.drv-finance-section__header {
padding: 30px 20px;
border-radius: 20px;
}
#dfp-step-1 .dfm-product-picker {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.dfm-cta-bar {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.dfm-offer-card__rate {
font-size: 32px;
}
}
/* ============================================================
DRIVIST FPA — ERGÄNZTE FEHLENDE STYLES
============================================================ */
/* --- Step Navigation (identisch mit Finanzierung/Bestellung) --- */
/* ================================================================
DRV STEP NAV — Unified across all flow pages
================================================================ */
/* done: gleicher Style wie future, aber klickbar */
/* active: deutlich stärker — schwarze Pill */
/* future: grau, dezent */
/* ================================================================
DRV VEHICLE HERO — Dark gradient hero (Step 2 FPA)
Consistent with Finanzierung Step 3
================================================================ */
.drv-page-wrapper {
background: var(--c-bg-soft);
}
.drv-page-content {
max-width: 100%;
margin: 0 auto;
padding: 48px 5vw 80px;
}
.drv-vehicle-hero {
position: relative;
background: linear-gradient(135deg, #0a121e 0%, #1c2b3a 40%, #2a3f5f 75%, #1e4d3b 100%);
overflow: hidden;
padding: 0;
}
.drv-vehicle-hero__bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 75% 50%, rgba(47,214,139,.12) 0%, transparent 60%);
pointer-events: none;
}
.drv-vehicle-hero__inner {
position: relative;
z-index: 1;
max-width: 100%;
margin: 0 auto;
padding: 52px 5vw;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
/* --- Text side --- */
.drv-vehicle-hero__brand {
display: none;
}
.drv-vehicle-hero__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 800;
color: var(--c-white);
letter-spacing: -.03em;
line-height: 1.05;
margin: 0 0 10px;
}
.drv-vehicle-hero__desc {
font-size: 16px;
color: rgba(255,255,255,.65);
margin: 0 0 20px;
line-height: 1.5;
}
.drv-vehicle-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 28px;
}
.drv-hero-tag {
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.8);
border: 1px solid rgba(255,255,255,.15);
}
.drv-hero-tag--delivery {
background: rgba(47,214,139,.15);
color: var(--c-accent, var(--c-accent));
border-color: rgba(47,214,139,.3);
}
/* Price row */
.drv-vehicle-hero__price-row {
display: flex;
align-items: baseline;
gap: 24px;
margin-bottom: 28px;
}
.drv-vehicle-hero__price-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.drv-vehicle-hero__price-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
white-space: nowrap;
}
.drv-vehicle-hero__price-amount {
display: flex;
align-items: baseline;
gap: 3px;
white-space: nowrap;
}
.drv-vehicle-hero__price-value {
font-size: 34px;
font-weight: 800;
color: var(--c-white);
letter-spacing: -.03em;
line-height: 1;
}
.drv-vehicle-hero__price-cur {
font-size: 16px;
font-weight: 600;
color: rgba(255,255,255,.55);
}
.drv-vehicle-hero__rate-block {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 24px;
border-left: 1px solid rgba(255,255,255,.15);
}
.drv-vehicle-hero__rate-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.drv-vehicle-hero__rate-amount {
display: flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.drv-vehicle-hero__rate-value {
font-size: 26px;
font-weight: 800;
color: var(--c-accent, var(--c-accent));
line-height: 1;
}
.drv-vehicle-hero__rate-unit {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.45);
}
/* CTAs */
.drv-vehicle-hero__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.drv-hero-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: none;
transition: all .18s ease;
background: var(--c-accent, var(--c-accent));
color: var(--c-brand-deep, var(--c-brand-deep));
}
.drv-hero-cta:hover {
background: var(--c-accent-hover, var(--c-accent-hover));
transform: translateY(-1px);
}
.drv-hero-cta--ghost {
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.2);
}
.drv-hero-cta--ghost:hover {
background: rgba(255,255,255,.18);
}
/* --- Visual side: Image Swiper --- */
.drv-vehicle-hero__visual {
position: relative;
border-radius: 20px;
overflow: hidden;
/* CLS-Fix: feste Höhe reservieren damit kein Reflow */
aspect-ratio: 16/10;
min-height: 260px;
box-shadow: 0 24px 60px rgba(0,0,0,.4);
background: var(--c-border); /* Placeholder-Farbe während Bild lädt */
}
.drv-hero-swiper {
width: 100%;
height: 100%;
border-radius: 20px;
}
/* Swiper braucht explizite Höhe vom parent */
.drv-vehicle-hero__visual .swiper,
.drv-vehicle-hero__visual .swiper-wrapper,
.drv-vehicle-hero__visual .swiper-slide {
height: 100%;
}
.drv-hero-swiper .swiper-slide {
background: var(--c-bg-soft); /* Heller neutraler BG für Freisteller */
}
.drv-hero-swiper .swiper-slide img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center;
padding: 16px !important;
filter: none !important;
animation: none !important;
}
/* Swiper controls besser sichtbar auf dunklem Hintergrund */
.drv-vehicle-hero__visual .swiper-button-next,
.drv-vehicle-hero__visual .swiper-button-prev {
color: var(--c-white);
background: rgba(0,0,0,.35);
border-radius: 50%;
width: 36px;
height: 36px;
backdrop-filter: blur(4px);
}
.drv-vehicle-hero__visual .swiper-button-next::after,
.drv-vehicle-hero__visual .swiper-button-prev::after {
font-size: 14px;
font-weight: 800;
}
.drv-vehicle-hero__visual .swiper-pagination-bullet {
background: rgba(255,255,255,.5);
opacity: 1;
}
.drv-vehicle-hero__visual .swiper-pagination-bullet-active {
background: var(--c-accent, var(--c-accent));
}
.drv-hero-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
/* Mobile-only Elemente auf Desktop verstecken */
.drv-hero-mobile-back,
.drv-hero-mobile-titlerow .drv-hero-mobile-price,
.drv-hero-mobile-subline,
.drv-hero-mobile-steps { display: none; }
/* ==============================================================
MOBILE HERO (max-width: 540px)
Kein Bild, kompaktes Layout:
Zeile 1: zuruck-link | (leer)
Zeile 2: Fahrzeugname | Netto-Preis
Zeile 3: Specs (kW PS Gang Kraftstoff)
Zeile 4: Step-Nav integriert
============================================================== */
@media (max-width: 768px) {
.drv-vehicle-hero__inner {
grid-template-columns: 1fr;
padding: 24px 16px 28px;
gap: 16px;
}
.drv-vehicle-hero__visual {
border-radius: 16px;
aspect-ratio: 4/3;
min-height: 220px;
max-height: 320px;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
margin: 0;
}
.drv-vehicle-hero__title { font-size: 26px; }
.drv-vehicle-hero__price-value { font-size: 28px; }
.drv-page-content { padding: 32px 16px 60px; }
}
@media (max-width: 540px) {
/* Hero wird zur kompakten Info-Bar ohne Bild */
.drv-vehicle-hero {
overflow: visible;
padding: 0;
}
.drv-vehicle-hero__inner {
display: block;
padding: 12px 16px 14px;
gap: 0;
}
/* Galerie aus Hero-Grid rausnehmen, als full-width Block unter Hero */
.drv-vehicle-hero__inner {
display: flex;
flex-direction: column;
}
.drv-vehicle-hero__visual {
display: block !important;
position: relative;
order: 99;
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
margin-top: 14px;
border-radius: 0;
aspect-ratio: 4/3;
min-height: unset;
max-height: unset;
box-shadow: none;
}
/* DRIVIST Branding-Logo Overlay oben links im Bild */
.drv-mobile-gallery-logo {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
background: rgba(255,255,255,0.90);
border-radius: 6px;
padding: 4px 8px;
pointer-events: none;
}
.drv-mobile-gallery-logo img {
height: 16px;
width: auto;
display: block;
filter: invert(1);
}
/* Thumb-Strip auf Mobil ausblenden, nur Hauptswiper */
.drv-thumb-strip { display: none; }
/* Aktionen ausblenden (sind weiter unten auf der Seite noch erreichbar) */
.drv-vehicle-hero__actions { display: none; }
/* Desc (modeldescription) auf Mobil ausblenden -- Specs-Zeile reicht */
.drv-vehicle-hero__desc { display: none; }
/* Tags ausblenden (zu viel Platz) */
.drv-vehicle-hero__tags { display: none; }
/* Preis-Row komplett ausblenden (Preis kommt als drv-hero-mobile-price) */
.drv-vehicle-hero__price-row { display: none; }
/* ZEILE 1: Zurueck-Link */
.drv-hero-mobile-back {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.55);
text-decoration: none;
margin-bottom: 8px;
line-height: 1;
}
.drv-hero-mobile-back::before {
content: "\2190"; /* Pfeil links */
font-size: 14px;
}
.drv-hero-mobile-back:hover { color: rgba(255,255,255,.85); }
/* ZEILE 2: Titel + Preis nebeneinander */
.drv-hero-mobile-titlerow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 5px;
}
.drv-vehicle-hero__title {
font-size: 22px;
font-weight: 800;
line-height: 1.1;
margin: 0 0 4px;
flex: 1 1 auto;
min-width: 0;
}
.drv-hero-mobile-price {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.drv-hero-mobile-price__label {
font-size: 10px;
font-weight: 500;
color: rgba(255,255,255,.45);
text-align: right;
line-height: 1.2;
margin-bottom: 2px;
}
.drv-hero-mobile-price__amount {
font-size: 24px;
font-weight: 800;
color: var(--c-accent);
letter-spacing: -.02em;
line-height: 1;
white-space: nowrap;
}
/* ZEILE 3: Subline = Modellbeschreibung */
.drv-hero-mobile-subline {
display: block;
font-size: 13px;
color: rgba(255,255,255,.5);
font-weight: 400;
margin: 0 0 12px;
line-height: 1.4;
}
/* ZEILE 2 (neu): Step-Nav oberhalb des Titels */
.drv-hero-mobile-steps {
display: flex;
align-items: center;
gap: 0;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.drv-hero-mobile-steps__item {
display: flex;
align-items: center;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.35);
white-space: nowrap;
}
.drv-hero-mobile-steps__item--done {
color: var(--c-accent);
font-weight: 600;
}
.drv-hero-mobile-steps__item--done::before {
content: "\2713 "; /* Checkmark */
margin-right: 2px;
}
.drv-hero-mobile-steps__item--active {
color: var(--c-white);
font-weight: 700;
}
.drv-hero-mobile-steps__sep {
flex: 1;
height: 1px;
background: rgba(255,255,255,.15);
margin: 0 6px;
min-width: 16px;
}
/* Sticky Step-Nav oben auf Mobil AUSBLENDEN -- ist jetzt im Hero */
.drv-step-nav { display: none !important; }
}
/* --- Preis-Block in der Sidebar --- */
.sidebar-card--price {
background: var(--c-ink, var(--c-text-primary));
color: var(--c-white);
border-radius: 16px;
padding: 24px;
}
.price-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-mint, var(--c-accent));
margin-bottom: 6px;
}
.price-main {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
}
.price-value {
font-size: 32px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--c-white);
}
.price-unit {
font-size: 14px;
color: rgba(255,255,255,.6);
}
.price-note {
font-size: 11px;
color: rgba(255,255,255,.45);
line-height: 1.4;
}
/* --- Currency Number (formatiert via JS) --- */
.currencynumber {
font-variant-numeric: tabular-nums;
}
/* --- Collapsed Section (Detail-Toggle) --- */
.collapsed-section {
overflow: hidden;
}
/* Browser-Pfeil bei entfernen — wir nutzen eigenes SVG */
.collapsed-section details > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-weight: 600;
font-size: 15px;
color: var(--drv-ink, var(--c-text-primary));
user-select: none;
}
.collapsed-section details > summary::marker,
.collapsed-section details > summary::-webkit-details-marker {
display: none;
content: "";
}
.collapsed-section details > summary svg {
flex-shrink: 0;
transition: transform .25s ease;
color: var(--drv-ink-3, var(--c-text-secondary));
}
.collapsed-section details[open] > summary svg {
transform: rotate(180deg);
}
.details-content {
padding: 0 0 12px;
}
/* cinematic-main (Layout-Wrapper, linke Spalte im Grid) */
.cinematic-main {
min-width: 0;
flex: 1 1 0%;
}
/* sidebar-card Base + Modifier */
.sidebar-card {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
}
.sidebar-card--specs {
background: var(--c-bg-soft);
}
/* ============================================================
BOTTOM PRICE BAR — Fixed CTA Bar
============================================================ */
.drv-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--c-white);
border-top: 1px solid rgba(0, 0, 0, 0.10);
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.10);
padding: 12px 24px;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.drv-bottom-bar.is-visible {
transform: translateY(0);
}
.drv-bottom-bar__inner {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 24px;
}
/* Left: Vehicle identity */
.drv-bottom-bar__vehicle {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.drv-bottom-bar__name {
font-family: var(--font-heading, "Lexend", sans-serif);
font-size: 15px;
font-weight: 700;
color: var(--c-brand-deep);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.drv-bottom-bar__desc {
font-size: 12px;
color: var(--c-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Center: Pricing */
.drv-bottom-bar__pricing {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.drv-bottom-bar__rate-wrap {
display: flex;
align-items: baseline;
gap: 4px;
}
.drv-bottom-bar__rate-label {
font-size: 12px;
color: var(--c-text-secondary);
}
.drv-bottom-bar__rate-value {
font-family: var(--font-heading, "Lexend", sans-serif);
font-size: 22px;
font-weight: 800;
color: var(--c-accent, var(--c-accent));
line-height: 1;
}
.drv-bottom-bar__rate-unit {
font-size: 12px;
color: var(--c-text-secondary);
}
.drv-bottom-bar__price-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.drv-bottom-bar__price-label {
font-size: 11px;
color: var(--c-text-tertiary);
}
.drv-bottom-bar__price-value {
font-size: 13px;
font-weight: 600;
color: var(--c-text-secondary);
}
.drv-bottom-bar__price-cur {
font-size: 13px;
color: var(--c-text-secondary);
}
/* Right: CTA */
.drv-bottom-bar__cta {
flex-shrink: 0;
}
.drv-bottom-bar__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
background: var(--grad-btn-cta, linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-hover) 100%));
color: var(--c-white);
font-family: var(--font-heading, "Lexend", sans-serif);
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 16px rgba(47, 214, 139, 0.35);
transition: all 0.2s ease;
white-space: nowrap;
}
.drv-bottom-bar__btn:hover {
background: var(--grad-btn-cta-hover, linear-gradient(135deg, var(--c-accent-hover) 0%, var(--c-accent-strong) 100%));
box-shadow: 0 6px 20px rgba(47, 214, 139, 0.50);
transform: translateY(-1px);
}
.drv-bottom-bar__btn:active {
transform: translateY(0);
}
/* On desktop: hide bar when sidebar button is in viewport */
@media (min-width: 1024px) {
.drv-bottom-bar {
/* On desktop: show only when user scrolled past sidebar CTA */
padding: 10px 32px;
}
}
/* Mobile: compact layout */
@media (max-width: 640px) {
.drv-bottom-bar__vehicle {
display: none;
}
.drv-bottom-bar__inner {
gap: 12px;
padding: 0;
}
.drv-bottom-bar__pricing {
align-items: flex-start;
}
.drv-bottom-bar__rate-value {
font-size: 20px;
}
.drv-bottom-bar__btn {
padding: 12px 20px;
font-size: 14px;
}
}
/* Add bottom padding to body so content isn't hidden behind bar */
body {
padding-bottom: 80px !important;
}
/* Feature Details: jetzt open div statt */
.feature-details__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 1rem;
font-weight: 700;
color: var(--dc-text, var(--c-text-primary));
margin: 0 0 16px 0;
padding-top: 8px;
}
.feature-details summary {
display: none; /* kein toggle mehr */
}
/* ================================================================
SUMMARY STRIP
================================================================ */
.drv-summary-strip {
background: var(--c-white);
border-bottom: 1px solid rgba(0,0,0,0.07);
padding: 16px 0;
}
.drv-summary-strip__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.drv-summary-item {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 90px;
}
.drv-summary-item__label {
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-text-tertiary);
}
.drv-summary-item__value {
font-size: 18px;
font-weight: 800;
color: var(--c-text-primary);
line-height: 1.1;
}
.drv-summary-item--price .drv-summary-item__value {
color: var(--c-text-primary);
}
.drv-summary-item__unit {
font-size: 11px;
color: var(--c-text-secondary);
font-weight: 500;
}
.drv-summary-ctas {
display: flex;
gap: 10px;
align-items: center;
margin-left: auto;
flex-wrap: wrap;
}
.drv-summary-cta-primary {
white-space: nowrap;
}
.drv-summary-cta-secondary {
white-space: nowrap;
}
@media (max-width: 768px) {
.drv-summary-strip__inner {
gap: 14px;
padding: 0 16px;
}
.drv-summary-item--nr {
display: none;
}
.drv-summary-ctas {
width: 100%;
margin-left: 0;
margin-top: 4px;
}
.drv-summary-cta-primary,
.drv-summary-cta-secondary {
flex: 1;
text-align: center;
}
}
/* ================================================================
USP SECTION
================================================================ */
.drv-usp-section {
padding: 72px 0;
background: var(--c-bg-soft, var(--c-bg-soft));
border-top: 1px solid var(--c-border, var(--c-border));
}
.drv-usp-section__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.drv-usp-section__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0 0 8px;
}
.drv-usp-section__sub {
font-size: 15px;
color: var(--c-text-secondary, var(--c-text-secondary));
margin: 0 0 40px;
max-width: 560px;
}
.drv-usp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.drv-usp-card {
background: var(--c-bg-card, var(--c-white));
border: 1px solid var(--c-border, var(--c-border));
border-radius: var(--radius-lg, 16px);
padding: 28px 24px;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.drv-usp-card:hover {
box-shadow: var(--shadow-md, 0 4px 24px rgba(0,0,0,0.08));
transform: translateY(-2px);
}
.drv-usp-card__icon {
font-size: 28px;
margin-bottom: 12px;
}
.drv-usp-card__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 14px;
font-weight: var(--fw-bold, 700);
color: var(--c-text-primary, var(--c-text-primary));
margin-bottom: 8px;
line-height: 1.3;
}
.drv-usp-card__text {
font-size: 13px;
color: var(--c-text-secondary, var(--c-text-secondary));
line-height: 1.6;
}
@media (max-width: 1024px) {
.drv-usp-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.drv-usp-section {
padding: 40px 0;
}
.drv-usp-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* ================================================================
PROZESS SECTION
================================================================ */
.drv-process-section {
padding: 72px 0;
background: var(--c-bg-card, var(--c-white));
border-top: 1px solid var(--c-border, var(--c-border));
}
.drv-process-section__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.drv-process-section__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0 0 8px;
}
.drv-process-section__sub {
font-size: 15px;
color: var(--c-text-secondary, var(--c-text-secondary));
margin: 0 0 40px;
}
.drv-process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.drv-process-steps::before {
content: "";
position: absolute;
top: 22px;
left: calc(12.5% + 12px);
right: calc(12.5% + 12px);
height: 1px;
background: linear-gradient(90deg, var(--c-border, var(--c-border)) 0%, var(--c-accent, var(--c-accent)) 50%, var(--c-border, var(--c-border)) 100%);
z-index: 0;
}
.drv-process-step {
position: relative;
z-index: 1;
}
.drv-process-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-text-primary);
color: var(--c-white);
font-size: 13px;
font-weight: 800;
letter-spacing: -.01em;
margin-bottom: 16px;
}
.drv-process-step__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 15px;
font-weight: var(--fw-bold, 700);
color: var(--c-text-primary, var(--c-text-primary));
margin-bottom: 6px;
}
.drv-process-step__text {
font-size: 13px;
color: var(--c-text-secondary, var(--c-text-secondary));
line-height: 1.6;
}
@media (max-width: 1024px) {
.drv-process-steps {
grid-template-columns: repeat(2, 1fr);
}
.drv-process-steps::before {
display: none;
}
}
@media (max-width: 640px) {
.drv-process-section {
padding: 40px 0;
}
.drv-process-steps {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ================================================================
BEFORE / AFTER VERGLEICH
================================================================ */
.drv-compare-section {
padding: 80px 0;
background: var(--grad-header, linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-petrol) 60%, var(--c-petrol) 100%));
position: relative;
overflow: hidden;
}
.drv-compare-section::before {
content: "";
position: absolute;
inset: 0;
background: var(--grad-header-glow, radial-gradient(ellipse at 80% 50%, rgba(47,214,139,0.12) 0%, transparent 65%));
pointer-events: none;
}
.drv-compare-section__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 32px;
position: relative;
}
.drv-compare-section__title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-on-dark, var(--c-white));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0 0 12px;
text-align: center;
}
.drv-compare-section__sub {
font-size: 15px;
color: rgba(255,255,255,.5);
margin: 0 0 40px;
text-align: center;
}
.drv-compare-grid {
display: grid;
grid-template-columns: 1fr 40px 1fr;
gap: 0;
align-items: stretch;
max-width: 760px;
margin: 0 auto;
}
.drv-compare-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 4px;
}
.drv-compare-divider__line {
flex: 1;
width: 1px;
background: rgba(255,255,255,0.10);
}
.drv-compare-divider__vs {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.25);
padding: 8px 10px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
}
.drv-compare-col {
border-radius: 20px;
padding: 36px 40px 40px;
}
.drv-compare-col--before {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
}
.drv-compare-col--after {
background: rgba(47,214,139,0.10);
border: 1.5px solid rgba(47,214,139,0.35);
backdrop-filter: blur(8px);
box-shadow: 0 0 40px rgba(47,214,139,0.08);
}
.drv-compare-col__header {
margin-bottom: 24px;
}
.drv-compare-col__badge {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 999px;
display: inline-block;
}
.drv-compare-col__badge--before {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.5);
}
.drv-compare-col__badge--after {
background: rgba(47,214,139,.2);
color: var(--c-accent, #2fd68b);
}
.drv-compare-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.drv-compare-list li {
font-size: 15px;
color: rgba(255,255,255,.72);
padding-left: 26px;
line-height: 1.6;
position: relative;
}
.drv-compare-col--after .drv-compare-list li {
color: rgba(255,255,255,.92);
font-weight: 500;
}
.drv-compare-col--before .drv-compare-list li::before {
content: "✕";
position: absolute;
left: 0;
font-size: 11px;
font-weight: 700;
color: rgba(255,100,100,.55);
top: 3px;
}
.drv-compare-col--after .drv-compare-list li::before {
content: "→";
position: absolute;
left: 0;
font-size: 13px;
font-weight: 700;
color: var(--c-accent, #2fd68b);
top: 1px;
}
@media (max-width: 640px) {
.drv-compare-section {
padding: 40px 0;
}
.drv-compare-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.drv-compare-divider {
flex-direction: row;
padding: 4px 0;
height: 32px;
}
.drv-compare-divider__line {
flex: 1;
width: auto;
height: 1px;
}
}
/* ================================================================
ENVKV / EFFIZIENZ
================================================================ */
.drv-envkv-section {
background: var(--c-bg-soft);
border-radius: 12px;
padding: 20px;
}
.drv-eff-img {
max-width: 200px;
height: auto;
}
/* ================================================================
B6: THUMBNAIL STRIP
================================================================ */
.drv-thumb-strip {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 8px 0 4px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.drv-thumb-strip::-webkit-scrollbar { display: none; }
.drv-thumb {
flex: 0 0 auto;
width: 64px;
height: 46px;
border-radius: 6px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
background: var(--c-bg-soft);
transition: border-color .2s;
}
.drv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drv-thumb.is-active { border-color: var(--drv-primary, var(--c-accent)); }
@media (max-width: 640px) {
.drv-thumb { width: 54px; height: 38px; }
}
/* ================================================================
B7: KONTAKT-KARTEN ICON
================================================================ */
.drv-contact-card {
transition: transform .15s, box-shadow .15s;
}
.drv-contact-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,.1) !important;
}
.drv-contact-card__icon {
display: flex;
justify-content: center;
margin-bottom: 10px;
color: var(--c-text-primary);
}
/* ================================================================
B8: WATCHLIST PANEL
================================================================ */
.drv-watchlist-overlay {
position: fixed;
top: 0;
right: 0;
width: 380px;
max-width: 95vw;
height: 100vh;
background: var(--c-white);
z-index: 9000;
box-shadow: -4px 0 32px rgba(0,0,0,.15);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drv-watchlist-overlay__inner {
display: flex;
flex-direction: column;
height: 100%;
}
.drv-watchlist-overlay__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--c-bg-soft);
}
.drv-watchlist-overlay__header h4 {
margin: 0;
font-size: 17px;
font-weight: 700;
}
.drv-watchlist-overlay__count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--drv-primary, var(--c-accent));
color: var(--c-white);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
margin-left: 6px;
}
.drv-watchlist-overlay__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--c-text-secondary);
border-radius: 4px;
}
.drv-watchlist-overlay__close:hover { background: var(--c-bg-soft); color: var(--c-text-primary); }
.drv-watchlist-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--c-bg-soft);
padding: 0 20px;
}
.drv-watchlist-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 14px;
font-size: 14px;
cursor: pointer;
color: var(--c-text-secondary);
transition: color .15s, border-color .15s;
}
.drv-watchlist-tab.is-active { color: var(--drv-primary, var(--c-accent)); border-bottom-color: var(--drv-primary, var(--c-accent)); }
.drv-watchlist-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.drv-watchlist-tab-content { display: none; }
.drv-watchlist-tab-content.is-active { display: block; }
.drv-watchlist-item {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 10px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--c-border);
}
.drv-watchlist-item__img {
width: 70px;
height: 50px;
object-fit: cover;
border-radius: 6px;
}
.drv-watchlist-item__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.drv-watchlist-item__title { font-size: 13px; font-weight: 600; color: var(--c-text-primary); }
.drv-watchlist-item__offernr { font-size: 10px; color: var(--c-text-tertiary); letter-spacing: 0.02em; }
.drv-watchlist-item__desc { font-size: 11px; color: var(--c-text-tertiary); }
.drv-watchlist-item__price { font-size: 12px; color: var(--drv-primary, var(--c-accent)); font-weight: 600; }
.drv-watchlist-item__actions {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.drv-watchlist-item__link {
font-size: 12px;
color: var(--drv-primary, var(--c-accent));
text-decoration: none;
white-space: nowrap;
}
.drv-watchlist-item__remove {
background: none;
border: none;
font-size: 16px;
color: var(--c-border);
cursor: pointer;
padding: 0 2px;
line-height: 1;
}
.drv-watchlist-item__remove:hover { color: var(--c-error); }
.drv-watchlist-empty { text-align: center; color: var(--c-text-tertiary); font-size: 14px; padding: 40px 0; }
.drv-watchlist-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
}
.drv-watchlist-btn-compare {
width: 100%;
background: var(--drv-primary, var(--c-accent));
color: var(--c-white);
border: none;
border-radius: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity .15s;
}
.drv-watchlist-btn-compare:hover { opacity: .9; }
.drv-watchlist-btn-clear {
width: 100%;
background: none;
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 10px;
font-size: 13px;
color: var(--c-text-tertiary);
cursor: pointer;
}
.drv-watchlist-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.3);
z-index: 8999;
}
/* Vergleichs-Grid (Watchlist) */
.drv-watchlist-compare-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.drv-watchlist-compare-col {
border: 1px solid var(--c-bg-soft);
border-radius: 8px;
padding: 12px;
font-size: 13px;
}
.drv-watchlist-compare-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid var(--c-bg-soft);
font-size: 12px;
gap: 8px;
}
.drv-watchlist-compare-row span { color: var(--c-text-tertiary); }
.drv-watchlist-compare-row strong { text-align: right; }
.drv-watchlist-compare-link {
display: block;
margin-top: 10px;
font-size: 12px;
color: var(--drv-primary, var(--c-accent));
text-decoration: none;
font-weight: 600;
}
/* ================================================================
D14: PROGRESS BAR (Bestellung)
================================================================ */
.drv-form-progress-bar {
margin-bottom: 16px;
}
.drv-form-progress-bar__track {
height: 4px;
background: var(--c-bg-soft);
border-radius: 99px;
overflow: hidden;
}
.drv-form-progress-bar__fill {
height: 100%;
background: var(--drv-primary, var(--c-accent));
border-radius: 99px;
transition: width .4s ease;
}
.drv-form-progress-bar__label {
font-size: 12px;
color: var(--c-text-tertiary);
margin-top: 4px;
text-align: right;
}
/* ================================================================
D15: INLINE VALIDIERUNG
================================================================ */
.drv-input.is-valid,
.drv-select.is-valid,
.drv-textarea.is-valid {
border-color: var(--drv-primary, var(--c-accent)) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a876' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 36px;
}
.drv-input.is-invalid,
.drv-select.is-invalid,
.drv-textarea.is-invalid {
border-color: var(--c-error) !important;
}
.drv-input.is-invalid::after,
.drv-select.is-invalid::after {
content: 'Pflichtfeld';
color: var(--c-error);
font-size: 11px;
}
/* ================================================================
C13: LAUFZEIT-BUTTON-GRUPPE (Finance)
================================================================ */
.dfin-term-btns {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.dfin-term-btn {
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
color: var(--c-text-secondary);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.dfin-term-btn:hover { background: var(--c-accent-soft); border-color: var(--c-border); }
.dfin-term-btn.is-active {
background: var(--drv-primary, var(--c-accent));
border-color: var(--drv-primary, var(--c-accent));
color: var(--c-white);
font-weight: 600;
}
/* ============================================================
LIGHTBOX
============================================================ */
.drv-hero-swiper .swiper-slide img {
cursor: zoom-in;
}
.drv-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drv-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(6px);
}
.drv-lightbox__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-white);
cursor: pointer;
transition: background 0.15s;
}
.drv-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.drv-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-white);
cursor: pointer;
transition: background 0.15s;
}
.drv-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.drv-lightbox__nav--prev { left: 20px; }
.drv-lightbox__nav--next { right: 20px; }
.drv-lightbox__stage {
position: relative;
z-index: 1;
max-width: calc(100vw - 140px);
max-height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
}
.drv-lightbox__img {
max-width: 100%;
max-height: calc(100vh - 160px);
object-fit: contain;
border-radius: 8px;
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
transition: opacity 0.2s;
}
.drv-lightbox__counter {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: rgba(255,255,255,0.7);
font-size: 13px;
font-family: var(--font-body, sans-serif);
letter-spacing: 0.05em;
}
.drv-lightbox__thumbs {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
gap: 8px;
max-width: calc(100vw - 40px);
overflow-x: auto;
padding: 4px;
scrollbar-width: none;
}
.drv-lightbox__thumbs::-webkit-scrollbar { display: none; }
.drv-lightbox__thumb-btn {
flex-shrink: 0;
width: 56px;
height: 40px;
border-radius: 4px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s, border-color 0.15s;
background: none;
padding: 0;
}
.drv-lightbox__thumb-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}
.drv-lightbox__thumb-btn.is-active,
.drv-lightbox__thumb-btn:hover {
opacity: 1;
border-color: var(--c-white);
}
@media (max-width: 768px) {
.drv-lightbox__nav { width: 40px; height: 40px; }
.drv-lightbox__nav--prev { left: 8px; }
.drv-lightbox__nav--next { right: 8px; }
.drv-lightbox__stage { max-width: calc(100vw - 100px); }
}
/* ============================================================
FLOW PROGRESS NAV — shared across all 4 modules
============================================================ */
.drv-step-nav {
position: sticky;
top: 0;
z-index: 200;
background: rgba(255,255,255,0.96);
-webkit-
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.drv-step-nav__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
height: 52px;
}
.drv-step-nav__list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
}
.drv-step-nav__item {
display: flex;
align-items: center;
}
.drv-step-nav__item:not(:last-child)::after {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background: var(--c-border);
margin: 0 4px;
}
.drv-step-nav__link {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--c-text-tertiary);
text-decoration: none;
transition: all 0.15s ease;
white-space: nowrap;
background: transparent;
}
.drv-step-nav__item.is-done .drv-step-nav__link {
color: var(--c-text-secondary);
cursor: pointer;
}
.drv-step-nav__item.is-done .drv-step-nav__link:hover {
color: var(--c-text-primary);
}
.drv-step-nav__item.is-active .drv-step-nav__link {
background: var(--c-text-primary);
color: var(--c-white);
font-weight: 700;
cursor: default;
}
.drv-step-nav__item:not(.is-done):not(.is-active) .drv-step-nav__link {
color: var(--c-text-tertiary);
cursor: default;
}
@media (max-width: 600px) {
.drv-step-nav__inner { padding: 0 12px; gap: 0; }
.drv-step-nav__logo { display: none; }
.drv-step-nav__list { flex: 1; justify-content: flex-start; gap: 0; }
.drv-step-nav__link { padding: 4px 8px; font-size: 12px; }
.drv-step-nav__item:not(:last-child)::after { width: 12px; margin: 0 1px; }
/* Inaktive Steps: nur Nummer oder Icon, kein langer Text */
.drv-step-nav__item:not(.is-done):not(.is-active) .drv-step-nav__link {
font-size: 0;
width: 26px;
height: 26px;
padding: 0;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--c-border);
position: relative;
}
.drv-step-nav__item:not(.is-done):not(.is-active) .drv-step-nav__link::before {
font-size: 11px;
color: var(--c-text-tertiary);
content: attr(data-step-short);
}
/* Done Steps: Checkmark statt Text */
.drv-step-nav__item.is-done .drv-step-nav__link {
font-size: 0;
width: 26px;
height: 26px;
padding: 0;
justify-content: center;
border-radius: 50%;
border: 1.5px solid var(--c-success, #22c55e);
position: relative;
}
.drv-step-nav__item.is-done .drv-step-nav__link::before {
content: '✓';
font-size: 13px;
color: var(--c-success, #22c55e);
}
/* Aktiver Step: Badge mit kurzem Text, kein Art.-Nr. */
.drv-step-nav__item.is-active .drv-step-nav__link {
font-size: 12px;
padding: 4px 10px;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Exit: nur X */
.drv-step-nav__exit {
font-size: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--c-border);
flex-shrink: 0;
}
.drv-step-nav__exit::before {
content: '✕';
font-size: 14px;
color: var(--c-text-secondary);
}
}
/* ================================================================
CONVERSION UPGRADE — neue Elemente
================================================================ */
/* HERO: Rate dominant */
.drv-price-row--new {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 20px;
}
.drv-hero-rate-primary {
display: flex;
flex-direction: column;
gap: 2px;
}
.drv-hero-rate-pre {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.drv-hero-rate-main {
display: flex;
align-items: baseline;
gap: 6px;
}
.drv-hero-rate-val {
font-size: 42px;
font-weight: 800;
color: var(--c-accent, var(--c-accent));
letter-spacing: -1px;
line-height: 1;
}
.drv-hero-rate-unit {
font-size: 16px;
font-weight: 500;
color: rgba(255,255,255,0.7);
}
.drv-hero-rate-context {
font-size: 11px;
color: rgba(255,255,255,0.45);
font-style: italic;
}
.drv-hero-price-secondary {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-top: 4px;
}
.drv-hero-price-secondary strong {
color: rgba(255,255,255,0.75);
font-weight: 600;
}
.drv-hero-microcopy {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: 2px;
}
/* HERO ACTIONS: primär solid */
.drv-actions--new {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.drv-hero-cta--primary-solid {
background: var(--grad-btn-cta, linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-hover) 100%));
color: var(--c-brand-deep, var(--c-brand-deep)) !important;
border: none;
border-radius: var(--radius-pill, 999px);
padding: var(--space-3) var(--space-7, 28px);
font-size: var(--text-md, 15px);
font-weight: var(--fw-bold, 700);
cursor: pointer;
transition: background 0.15s, transform 0.1s;
letter-spacing: 0.01em;
min-width: 220px;
}
.drv-hero-cta--primary-solid:hover {
background: var(--c-accent-hover, var(--c-accent-hover));
transform: translateY(-1px);
}
.drv-hero-trust-mini {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: 2px;
}
/* USE-CASE SECTION */
.drv-usecase-section {
background: var(--c-bg-soft, var(--c-bg-soft));
border-bottom: 1px solid var(--c-border, var(--c-border));
}
.drv-usecase-section__inner {
max-width: 1200px;
margin: 0 auto;
padding: 20px 32px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.drv-usecase-title {
font-size: 14px;
font-weight: 600;
color: var(--c-brand-deep);
flex: 1;
min-width: 200px;
}
.drv-usecase-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.drv-usecase-chip {
background: var(--c-accent-soft, #e6fbf3);
color: var(--c-accent-strong, #0d7a50);
border: 1px solid rgba(47,214,139,0.35);
border-radius: 20px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
}
/* SIDEBAR TRUST LINE */
.sidebar-trust-line {
font-size: 11px;
color: var(--c-text-tertiary);
text-align: center;
margin-bottom: 8px;
}
/* SECOND CTA SECTION */
.drv-mid-cta-section {
background: var(--c-bg-soft, var(--c-bg-soft));
border-top: 1px solid var(--c-border, var(--c-border));
border-bottom: 1px solid var(--c-border, var(--c-border));
}
.drv-mid-cta-section__inner {
max-width: 600px;
margin: 0 auto;
padding: 40px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.drv-mid-cta-lead {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 18px;
font-weight: var(--fw-bold, 700);
color: var(--c-text-primary, var(--c-text-primary));
margin: 0;
}
.drv-mid-cta-trust {
font-size: 11px;
color: var(--c-text-tertiary);
margin-top: 4px;
}
.drv-cta-btn--large {
padding: 14px 32px !important;
font-size: 15px !important;
min-width: 240px;
}
/* FINAL CTA SECTION */
.drv-final-cta-section {
background: var(--grad-header, linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-petrol) 60%, var(--c-petrol) 100%));
position: relative;
overflow: hidden;
}
.drv-final-cta-section::before {
content: "";
position: absolute;
inset: 0;
background: var(--grad-header-glow, radial-gradient(ellipse at 20% 50%, rgba(47,214,139,0.12) 0%, transparent 65%));
pointer-events: none;
}
.drv-final-cta-section__inner {
max-width: 640px;
margin: 0 auto;
padding: 80px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
position: relative;
}
.drv-final-cta-title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(22px, 2.5vw, 30px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-on-dark, var(--c-white));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0;
}
.drv-final-cta-sub {
font-size: 15px;
color: var(--c-text-on-dark-soft, rgba(255,255,255,0.70));
margin: 0 0 8px;
line-height: 1.6;
}
/* Final CTA buttons auf dunklem Hintergrund */
.drv-final-cta-section .drv-cta-btn--primary {
background: var(--c-accent, var(--c-accent));
color: var(--c-text-primary);
border: none;
font-weight: var(--fw-bold, 700);
}
.drv-final-cta-section .drv-cta-btn--primary:hover {
background: var(--c-accent-hover, var(--c-accent-hover));
}
.drv-final-cta-section .drv-cta-btn--secondary {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.7);
}
.drv-final-cta-section .drv-cta-btn--secondary:hover {
border-color: rgba(255,255,255,0.5);
color: var(--c-white);
}
/* MOBILE */
@media (max-width: 768px) {
.drv-hero-rate-val { font-size: 34px; }
.drv-hero-cta--primary-solid { min-width: 100%; }
.drv-actions--new { align-items: stretch; width: 100%; }
.drv-usecase-section__inner { padding: 16px 20px; }
.drv-mid-cta-section__inner { padding: 32px 20px; }
.drv-final-cta-section__inner { padding: 44px 20px; }
.drv-final-cta-title { font-size: 22px; }
.drv-cta-btn--large { min-width: 100%; }
}
/* ============================================================
QUICKCHECK WIZARD
Mobile-first Overlay mit 5 Screens
============================================================ */
/* Overlay */
.qc-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 36, 0.72);
backdrop-filter: blur(6px);
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.qc-overlay.is-open {
opacity: 1;
pointer-events: all;
}
/* Panel */
.qc-panel {
background: var(--c-bg-card, var(--c-white));
width: 100%;
max-width: 560px;
max-height: 92dvh;
border-radius: 20px 20px 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(40px);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
.qc-overlay.is-open .qc-panel {
transform: translateY(0);
}
@media (min-width: 600px) {
.qc-overlay {
align-items: center;
}
.qc-panel {
border-radius: 20px;
max-height: 88dvh;
}
}
/* Header */
.qc-header {
padding: 16px 20px 12px;
border-bottom: 1px solid var(--c-border, var(--c-border));
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.qc-close {
align-self: flex-end;
background: none;
border: none;
font-size: 18px;
color: var(--c-text-muted, var(--c-text-tertiary));
cursor: pointer;
padding: 4px 6px;
line-height: 1;
transition: color 0.15s;
}
.qc-close:hover { color: var(--c-text-primary, var(--c-text-primary)); }
.qc-progress {
height: 4px;
background: var(--c-bg-soft, var(--c-bg-soft));
border-radius: 2px;
overflow: hidden;
}
.qc-progress__bar {
height: 100%;
background: var(--c-accent, var(--c-accent));
border-radius: 2px;
transition: width 0.35s ease;
width: 20%;
}
.qc-progress__label {
font-size: 12px;
color: var(--c-text-muted, var(--c-text-tertiary));
text-align: right;
}
/* Screens */
.qc-screen {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.qc-screen.is-hidden { display: none; }
.qc-screen__inner {
padding: 24px 20px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Typography */
.qc-entry-badge {
display: inline-block;
background: var(--c-accent-soft, var(--c-accent-soft));
color: var(--c-accent-hover, var(--c-accent-hover));
border-radius: 999px;
padding: 4px 14px;
font-size: 12px;
font-weight: var(--fw-bold, 700);
letter-spacing: 0.06em;
text-transform: uppercase;
width: fit-content;
}
.qc-title {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(18px, 4vw, 22px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0;
line-height: 1.25;
}
.qc-sub {
font-size: 14px;
color: var(--c-text-secondary, var(--c-text-secondary));
line-height: 1.6;
margin: 0;
}
/* Benefits List */
.qc-benefits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.qc-benefits li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--c-text-secondary, var(--c-text-secondary));
font-weight: var(--fw-medium, 500);
}
.qc-benefit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-accent-soft, var(--c-accent-soft));
color: var(--c-accent-hover, var(--c-accent-hover));
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
/* Vehicle Card in Screen 2 */
.qc-vehicle-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--c-bg-soft, var(--c-bg-soft));
border: 1px solid var(--c-border, var(--c-border));
border-radius: 12px;
padding: 14px;
}
.qc-vehicle-img {
width: 80px;
height: 56px;
object-fit: cover;
border-radius: 8px;
background: var(--c-bg-card, var(--c-white));
flex-shrink: 0;
}
.qc-vehicle-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.qc-vehicle-info strong {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 14px;
font-weight: var(--fw-bold, 700);
color: var(--c-text-primary, var(--c-text-primary));
}
.qc-vehicle-info span {
font-size: 12px;
color: var(--c-text-secondary, var(--c-text-secondary));
}
.qc-vehicle-price {
font-size: 12px;
color: var(--c-text-muted, var(--c-text-tertiary));
}
.qc-vehicle-price strong {
font-size: 13px;
color: var(--c-text-primary, var(--c-text-primary));
font-weight: var(--fw-bold, 700);
}
/* Choice Groups */
.qc-field-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.qc-field-label {
font-size: 13px;
font-weight: var(--fw-semibold, 600);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: 0.01em;
}
.qc-optional-badge {
font-size: 11px;
font-weight: var(--fw-medium, 500);
color: var(--c-text-muted, var(--c-text-tertiary));
margin-left: 4px;
}
.qc-field-group--optional .qc-field-label { color: var(--c-text-muted, var(--c-text-tertiary)); }
.qc-choice-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.qc-choice-group--wrap {
flex-direction: row;
flex-wrap: wrap;
}
.qc-choice {
background: var(--c-bg-card, var(--c-white));
border: 1.5px solid var(--c-border, var(--c-border));
border-radius: 10px;
padding: 12px 16px;
font-size: 14px;
font-weight: var(--fw-medium, 500);
color: var(--c-text-primary, var(--c-text-primary));
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
width: 100%;
}
.qc-choice:hover {
border-color: var(--c-accent, var(--c-accent));
background: var(--c-accent-soft, var(--c-accent-soft));
}
.qc-choice.is-active {
border-color: var(--c-accent, var(--c-accent));
background: var(--c-accent-soft, var(--c-accent-soft));
color: var(--c-brand, var(--c-brand-dark));
font-weight: var(--fw-bold, 700);
}
.qc-choice--sm {
padding: 8px 14px;
font-size: 13px;
width: auto;
flex: 0 0 auto;
}
/* Segmented Control (Laufzeit) */
.qc-seg-control {
display: flex;
gap: 6px;
background: var(--c-bg-soft, var(--c-bg-soft));
border-radius: 10px;
padding: 4px;
}
.qc-seg {
flex: 1;
background: transparent;
border: none;
border-radius: 8px;
padding: 9px 4px;
font-size: 13px;
font-weight: var(--fw-medium, 500);
color: var(--c-text-secondary, var(--c-text-secondary));
cursor: pointer;
transition: background 0.15s, color 0.15s, font-weight 0.1s;
}
.qc-seg.is-active {
background: var(--c-bg-card, var(--c-white));
color: var(--c-text-primary, var(--c-text-primary));
font-weight: var(--fw-bold, 700);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.qc-seg:hover:not(.is-active) { color: var(--c-text-primary, var(--c-text-primary)); }
/* Buttons */
.qc-btn {
border-radius: 10px;
padding: 13px 20px;
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: 14px;
font-weight: var(--fw-bold, 700);
cursor: pointer;
border: none;
transition: background 0.15s, transform 0.12s, opacity 0.15s;
text-align: center;
width: 100%;
}
.qc-btn--primary {
background: var(--c-accent, var(--c-accent));
color: var(--c-text-primary);
}
.qc-btn--primary:hover { background: var(--c-accent-hover, var(--c-accent-hover)); transform: translateY(-1px); }
.qc-btn--secondary {
background: transparent;
border: 1.5px solid var(--c-border, var(--c-border));
color: var(--c-text-secondary, var(--c-text-secondary));
}
.qc-btn--secondary:hover {
background: var(--c-bg-soft);
border-color: var(--c-brand-dark);
color: var(--c-text-primary);
}
.qc-btn--ghost {
background: transparent;
color: var(--c-text-muted, var(--c-text-tertiary));
font-size: 13px;
padding: 10px;
}
.qc-btn--ghost:hover { color: var(--c-text-secondary, var(--c-text-secondary)); }
/* Zertifikat-Button */
.qc-btn--cert {
background: rgba(0,230,118,0.1);
color: #00e676;
border: 1px solid rgba(0,230,118,0.3);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
}
.qc-btn--cert:hover {
background: rgba(0,230,118,0.18);
border-color: rgba(0,230,118,0.5);
transform: translateY(-1px);
}
/* Zertifikat-Formular */
.qc-cert-form {
margin-top: 16px;
background: rgba(0,230,118,0.04);
border: 1px solid rgba(0,230,118,0.15);
border-radius: 14px;
padding: 18px;
}
.qc-cert-form__title {
font-size: 15px;
font-weight: 700;
color: var(--c-text-primary);
margin-bottom: 4px;
}
.qc-cert-form__sub {
font-size: 12px;
color: var(--c-text-muted);
margin-bottom: 14px;
line-height: 1.5;
}
.qc-cert-form__input {
width: 100%;
background: var(--c-surface-2, rgba(255,255,255,0.06));
border: 1px solid var(--c-border, rgba(255,255,255,0.1));
border-radius: 10px;
color: var(--c-text-primary);
font-size: 14px;
padding: 12px 14px;
margin-bottom: 10px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.qc-cert-form__input::placeholder { color: var(--c-text-muted); }
.qc-cert-form__input:focus { border-color: rgba(0,230,118,0.4); }
.qc-cert-form__actions {
display: flex;
gap: 10px;
align-items: center;
margin-top: 4px;
}
.qc-cert-form__actions .qc-btn--primary { flex: 1; }
.qc-cert-form__feedback {
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
min-height: 20px;
}
.qc-cert-form__feedback--success { color: #00e676; }
.qc-cert-form__feedback--error { color: #ff5252; }
.qc-btn--back {
background: transparent;
color: var(--c-text-muted, var(--c-text-tertiary));
width: auto;
flex: 0 0 auto;
padding: 13px 16px;
}
.qc-btn--back:hover { color: var(--c-text-primary, var(--c-text-primary)); }
/* Nav row */
.qc-nav {
margin-top: 4px;
}
.qc-nav--split {
display: flex;
gap: 10px;
align-items: center;
}
.qc-nav--split .qc-btn--primary { flex: 1; }
/* Loading */
.qc-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px 0;
color: var(--c-text-secondary, var(--c-text-secondary));
font-size: 14px;
}
.qc-loading.is-hidden { display: none; }
.qc-loading__spinner {
width: 36px;
height: 36px;
border: 3px solid var(--c-bg-soft, var(--c-bg-soft));
border-top-color: var(--c-accent, var(--c-accent));
border-radius: 50%;
animation: qc-spin 0.7s linear infinite;
}
@keyframes qc-spin { to { transform: rotate(360deg); } }
/* Result */
.qc-result { display: flex; flex-direction: column; gap: 16px; }
.qc-status-box {
border-radius: 14px;
padding: 24px 20px;
text-align: center;
border: 2px solid transparent;
}
.qc-status-box.is-green {
background: rgba(47, 214, 139, 0.07);
border-color: rgba(47, 214, 139, 0.30);
}
.qc-status-box.is-yellow {
background: rgba(246, 173, 85, 0.08);
border-color: rgba(246, 173, 85, 0.35);
}
.qc-status-box.is-red {
background: rgba(229, 62, 62, 0.06);
border-color: rgba(229, 62, 62, 0.25);
}
.qc-status-box__icon {
font-size: 28px;
margin-bottom: 8px;
line-height: 1;
}
.is-green .qc-status-box__icon { color: var(--c-accent, var(--c-accent)); }
.is-yellow .qc-status-box__icon { color: var(--palette-yellow-400, var(--c-warning)); }
.is-red .qc-status-box__icon { color: var(--palette-red-500, var(--c-error)); }
.qc-status-box__headline {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(16px, 3.5vw, 20px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: var(--ls-tight, -0.04em);
margin: 0 0 8px;
}
.qc-status-box__text {
font-size: 13px;
color: var(--c-text-secondary, var(--c-text-secondary));
line-height: 1.55;
margin: 0;
}
/* Rate Box */
.qc-rate-box {
background: var(--c-bg-soft, var(--c-bg-soft));
border-radius: 12px;
padding: 16px 20px;
text-align: center;
}
.qc-rate-box__label {
font-size: 12px;
color: var(--c-text-muted, var(--c-text-tertiary));
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.qc-rate-box__value {
font-family: var(--font-heading, 'Lexend', sans-serif);
font-size: clamp(22px, 5vw, 28px);
font-weight: var(--fw-extrabold, 800);
color: var(--c-text-primary, var(--c-text-primary));
letter-spacing: var(--ls-tight, -0.04em);
}
/* Recommendation Box */
.qc-rec-box {
background: var(--c-bg-card, var(--c-white));
border: 1px solid var(--c-border, var(--c-border));
border-radius: 12px;
overflow: hidden;
}
.qc-rec-box__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
font-size: 13px;
}
.qc-rec-box__row:not(:last-child) { border-bottom: 1px solid var(--c-border, var(--c-border)); }
.qc-rec-box__row span { color: var(--c-text-muted, var(--c-text-tertiary)); }
.qc-rec-box__row strong {
color: var(--c-text-primary, var(--c-text-primary));
font-weight: var(--fw-semibold, 600);
}
/* Disclaimer */
.qc-disclaimer {
font-size: 11px;
color: var(--c-text-muted, var(--c-text-tertiary));
text-align: center;
line-height: 1.5;
padding: 0 8px;
}
/* CTA Group */
.qc-result-ctas { display: flex; flex-direction: column; gap: 10px; }
/* ============================================================
QUICKCHECK ALT OPTIONS (Rot-Status: EasyLeasy / Vorkasse)
============================================================ */
.qc-alt-options {
border-radius: var(--radius-card, 12px);
overflow: hidden;
border: 1.5px solid rgba(255,59,48,0.18);
margin: 12px 0 8px;
background: rgba(255,59,48,0.04);
}
.qc-alt-options__title {
font-size: var(--text-xs, 11px);
font-weight: var(--fw-semibold, 600);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--c-text-muted, var(--c-text-tertiary));
padding: 12px 16px 8px;
border-bottom: 1px solid var(--c-border, rgba(0,0,0,0.06));
}
.qc-alt-option {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
}
.qc-alt-option + .qc-alt-option {
border-top: 1px solid var(--c-border, rgba(0,0,0,0.06));
}
.qc-alt-option__badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--text-xs, 12px);
font-weight: var(--fw-bold, 700);
padding: 3px 10px;
border-radius: var(--radius-pill, 999px);
width: fit-content;
}
.qc-alt-option__badge--easyleasy {
background: var(--c-badge-green-bg, #e8f5e9);
color: var(--c-badge-green-text, #2e7d32);
}
.qc-alt-option__badge--vorkasse {
background: var(--c-badge-blue-bg, #e3f2fd);
color: var(--c-badge-blue-text, #1565c0);
}
.qc-alt-option__text {
font-size: var(--text-sm, 13px);
color: var(--c-text-secondary, var(--c-text-secondary));
line-height: 1.45;
}
/* ===================================================
MAREIKE — Chat Button & Divider
=================================================== */
/* Haupt-Button im Modal */
.drv-mareike-chat-btn {
display: flex;
align-items: center;
gap: var(--space-3, 12px);
width: 100%;
padding: var(--space-4, 16px) var(--space-4, 16px);
background: var(--c-brand, #2c3e50);
color: var(--c-text-inverse, #fff);
border: none;
border-radius: var(--radius-xl, 18px);
cursor: pointer;
text-align: left;
transition: background 0.2s ease, transform 0.15s ease;
box-shadow: var(--shadow-md);
}
.drv-mareike-chat-btn:hover {
background: var(--c-brand-soft, #3b4c5e);
transform: translateY(-1px);
color: var(--c-white, #fff);
}
.drv-mareike-chat-btn:active {
transform: translateY(0);
}
/* Avatar */
.drv-mareike-chat-btn__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--c-accent, #2fd68b);
display: flex;
align-items: center;
justify-content: center;
}
.drv-mareike-chat-btn__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.drv-mareike-chat-btn__avatar-fallback {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c-accent, #2fd68b);
color: var(--c-brand, #2c3e50);
font-weight: 700;
font-size: 1.25rem;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Text */
.drv-mareike-chat-btn__text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.drv-mareike-chat-btn__name {
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
}
.drv-mareike-chat-btn__sub {
font-size: 0.78rem;
opacity: 0.75;
line-height: 1.3;
}
/* Pfeil */
.drv-mareike-chat-btn__arrow {
opacity: 0.6;
flex-shrink: 0;
}
/* "Oder" Divider */
.drv-or-divider {
display: flex;
align-items: center;
gap: var(--space-3, 12px);
margin-bottom: var(--space-4, 16px);
color: var(--c-text-muted, #6b7280);
font-size: 0.8rem;
}
.drv-or-divider::before,
.drv-or-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--c-border, #e5e7eb);
}
/* Aktiver Zustand auf Buttons mit openMareikeChat */
.drv-hero-cta--ghost.drv-mareike-btn,
.drv-cta-btn--secondary.drv-mareike-btn {
position: relative;
}
/* Puls-Dot (online indicator) neben Beratungs-Buttons */
.drv-hero-cta--ghost[onclick*="openMareikeChat"]::before,
.drv-cta-btn--secondary[onclick*="openMareikeChat"]::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent, #2fd68b);
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 0 0 rgba(47, 214, 139, 0.5);
animation: drv-pulse-dot 2s ease-in-out infinite;
}
@keyframes drv-pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(47, 214, 139, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(47, 214, 139, 0); }
100% { box-shadow: 0 0 0 0 rgba(47, 214, 139, 0); }
}
/* ============================================================
SUMMARY CTA SECTION
============================================================ */
.drv-summary-cta-section {
padding: var(--space-10, 40px) var(--space-5, 20px);
background: var(--c-bg-subtle, #f8fafc);
border-top: 1px solid var(--c-border);
}
.drv-summary-cta-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6, 24px);
flex-wrap: wrap;
}
.drv-summary-cta-text p {
font-size: var(--text-sm, 13px);
color: var(--c-text-secondary);
margin-bottom: var(--space-1, 4px);
}
.drv-summary-cta-text strong {
font-size: var(--text-base, 15px);
font-weight: 700;
color: var(--c-text-primary);
font-family: var(--font-heading, "Lexend", sans-serif);
}
@media (max-width: 640px) {
.drv-summary-cta-inner {
flex-direction: column;
align-items: flex-start;
}
.drv-summary-cta-inner .drv-cta-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
WATCHLIST BADGE
============================================================ */
.drv-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--c-accent);
color: var(--c-brand-dark, #0f2c3f);
font-size: 11px;
font-weight: 800;
border-radius: 999px;
margin-left: var(--space-1, 4px);
line-height: 1;
}
/* ============================================================
HERO CTA -- ICON VARIANT (btnShowWatchlist)
============================================================ */
.drv-hero-cta--icon {
display: inline-flex;
align-items: center;
gap: var(--space-2, 8px);
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.8);
padding: 10px 18px;
border-radius: 999px;
font-size: var(--text-sm, 13px);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.drv-hero-cta--icon:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.4);
color: white;
}
/* ================================================================
FPA ENTWURF-PATCHES (2026-03-29)
Lieferzeit-Badge, Key-Facts Bar, QC-Banner, Bottom-Bar
================================================================ */
/* LIEFERZEIT-BADGE — absolut oben rechts im Hero */
.drv-vehicle-hero {
position: relative;
}
.drv-hero-delivery-badge {
position: absolute;
top: 18px;
right: 16px;
background: rgba(10, 18, 30, 0.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
padding: 8px 14px;
text-align: center;
z-index: 10;
border: 1px solid rgba(255,255,255,0.10);
pointer-events: none;
}
.drv-hero-delivery-badge__label {
font-size: 10px;
color: rgba(255,255,255,0.55);
font-family: var(--font-body, 'Lexend', sans-serif);
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.drv-hero-delivery-badge__val {
font-size: 15px;
font-weight: 800;
color: var(--c-accent, #2fd68b);
font-family: var(--font-heading, 'Lexend', sans-serif);
line-height: 1.15;
letter-spacing: -0.01em;
}
@media (max-width: 640px) {
.drv-hero-delivery-badge {
top: 14px;
right: 14px;
padding: 6px 12px;
}
.drv-hero-delivery-badge__val {
font-size: 14px;
}
}
/* KEY-FACTS BAR */
.drv-keyfacts-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
background: var(--c-bg-card, #ffffff);
border-bottom: 1px solid var(--c-border, #e2e8f0);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.drv-keyfact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 24px;
border-right: 1px solid var(--c-border, #e2e8f0);
text-align: center;
transition: background 0.15s;
}
.drv-keyfact:last-child {
border-right: none;
}
.drv-keyfact__icon {
font-size: 20px;
line-height: 1;
margin-bottom: 6px;
color: var(--c-text-muted, #94a3b8);
}
.drv-keyfact__icon i {
font-size: 17px;
}
.drv-keyfact__val {
font-size: 14px;
font-weight: 800;
color: var(--c-text, #1f2933);
font-family: var(--font-heading, 'Lexend', sans-serif);
letter-spacing: -0.01em;
line-height: 1.2;
}
.drv-keyfact__label {
font-size: 11px;
color: var(--c-text-muted, #94a3b8);
margin-top: 4px;
font-family: var(--font-body, 'Lexend', sans-serif);
letter-spacing: 0.01em;
line-height: 1.5;
max-width: 240px;
text-align: center;
}
.drv-keyfact--accent .drv-keyfact__val {
color: var(--c-accent, #2fd68b);
}
@media (max-width: 480px) {
.drv-keyfacts-bar {
grid-template-columns: repeat(2, 1fr);
}
.drv-keyfact:nth-child(2) {
border-right: none;
}
.drv-keyfact {
padding: 16px 12px;
}
.drv-keyfact__label {
font-size: 10px;
max-width: 160px;
}
}
/* QUICKCHECK BANNER */
.drv-qc-banner {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--c-brand-dark, #1c2b3a) 0%, #2a3f5f 100%);
padding: 18px 20px;
}
.drv-qc-banner__icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: rgba(255,255,255,0.65);
flex-shrink: 0;
}
.drv-qc-banner__text {
flex: 1;
min-width: 0;
}
.drv-qc-banner__title {
font-size: 14px;
font-weight: 700;
color: #fff;
font-family: var(--font-heading, 'Lexend', sans-serif);
line-height: 1.3;
margin-bottom: 2px;
}
.drv-qc-banner__sub {
font-size: 11px;
color: rgba(255,255,255,0.50);
font-family: var(--font-body, 'Lexend', sans-serif);
}
.drv-qc-banner__btn {
background: var(--c-accent, #2fd68b);
color: #fff;
border: none;
border-radius: 10px;
padding: 11px 18px;
font-size: 13px;
font-weight: 700;
font-family: var(--font-heading, 'Lexend', sans-serif);
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
transition: background 0.15s, transform 0.1s;
}
.drv-qc-banner__btn:hover {
background: var(--c-accent-dark, #26b070);
transform: translateY(-1px);
}
.drv-qc-banner__btn:active {
transform: translateY(0);
}
@media (max-width: 480px) {
.drv-qc-banner {
padding: 16px;
gap: 10px;
}
.drv-qc-banner__icon {
display: none;
}
}
/* BOTTOM-BAR — AUSGEWÄHLT-Label + grüner CTA */
.drv-bottom-bar__selected-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.40);
margin-bottom: 2px;
font-family: var(--font-body, 'Lexend', sans-serif);
}
.drv-bottom-bar__btn--primary {
background: var(--c-accent, #2fd68b) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 13px 22px !important;
font-size: 14px !important;
font-weight: 800 !important;
font-family: var(--font-heading, 'Lexend', sans-serif) !important;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
transition: background 0.15s, transform 0.1s;
box-shadow: 0 4px 14px rgba(47,214,139,0.30);
}
.drv-bottom-bar__btn--primary:hover {
background: var(--c-accent-dark, #26b070) !important;
transform: translateY(-1px);
}
.drv-bottom-bar__btn--primary:active {
transform: translateY(0);
}
/* ================================================================
FAHRZEUGDATEN TABLE + AUSSTATTUNG ACCORDION (2026-03-29)
================================================================ */
/* Specs Table */
.drv-specs-table {
display: flex;
flex-direction: column;
border: 1px solid var(--c-border, #e2e8f0);
border-radius: 14px;
overflow: hidden;
background: var(--c-bg-card, #fff);
}
.drv-specs-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 18px;
border-bottom: 1px solid var(--c-border, #e2e8f0);
gap: 12px;
}
.drv-specs-row:last-child {
border-bottom: none;
}
.drv-specs-label {
font-size: 13px;
color: var(--c-text-muted, #64748b);
font-family: var(--font-body, 'Lexend', sans-serif);
flex-shrink: 0;
}
.drv-specs-value {
font-size: 13px;
font-weight: 700;
color: var(--c-text, #1f2933);
font-family: var(--font-heading, 'Lexend', sans-serif);
text-align: right;
}
/* Ausstattung Accordion */
.drv-equip-details {
margin-top: 16px;
border: 1px solid var(--c-border, #e2e8f0);
border-radius: 12px;
overflow: hidden;
background: var(--c-bg-card, #fff);
}
.drv-equip-details[open] .drv-equip-details__summary i {
transform: rotate(180deg);
}
.drv-equip-details__summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
font-size: 14px;
font-weight: 700;
color: var(--c-text, #1f2933);
font-family: var(--font-heading, 'Lexend', sans-serif);
cursor: pointer;
list-style: none;
user-select: none;
background: var(--c-bg-subtle, #f8fafc);
border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.drv-equip-details__summary::-webkit-details-marker { display: none; }
.drv-equip-details__summary i {
font-size: 12px;
color: var(--c-text-muted, #94a3b8);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.drv-equip-list {
padding: 16px 18px;
}
.drv-equip-list .spec-category {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-muted, #94a3b8);
margin: 16px 0 8px;
font-family: var(--font-body, 'Lexend', sans-serif);
}
.drv-equip-list .spec-category:first-child {
margin-top: 0;
}
.drv-equip-list .clean-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 16px;
padding: 0;
margin: 0;
list-style: none;
}
.drv-equip-list .clean-list li {
font-size: 13px;
color: var(--c-text, #1f2933);
font-family: var(--font-body, 'Lexend', sans-serif);
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
.drv-equip-list .clean-list li::before {
display: none;
}
.drv-equip-list .icon-wrap {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--c-accent, #2fd68b);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
}
.drv-equip-list .icon-wrap svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
}
@media (max-width: 560px) {
.drv-equip-list .clean-list {
grid-template-columns: 1fr;
}
.drv-specs-row {
padding: 11px 14px;
}
}
/* ---- Watchlist Panel: Dieses Fahrzeug merken ---- */
.drv-watchlist-current-vehicle {
padding: 12px 16px;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.drv-wl-save-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
border-radius: 8px;
border: 2px solid var(--color-primary, #1a1a2e);
background: transparent;
color: var(--color-primary, #1a1a2e);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.drv-wl-save-btn:hover {
background: var(--color-primary, #1a1a2e);
color: #fff;
}
.drv-wl-save-btn.is-saved {
background: #e8f5e9;
border-color: #2e7d32;
color: #2e7d32;
}
.drv-wl-save-btn.is-saved svg {
fill: #2e7d32;
stroke: #2e7d32;
}
/* Sidebar Merken-Button: is-saved state */
.action-btn.is-saved {
color: var(--color-success, #2e7d32);
}
.action-btn.is-saved svg {
fill: var(--color-success, #2e7d32);
stroke: var(--color-success, #2e7d32);
}