/* Front-Page Styles — ausgelagert aus front-page.php (Inline-CSS -> cachebar). */
/* ============================================================
Wir kaufen jedes Fahrzeug — Premium Automotive Platform 2026
Dark · Aurora · Glassmorphism · Fluid Type · 8px Grid
============================================================ */
:root{
/* Surfaces */
--bg:#0B0B0C; --surface:#111214; --surface-2:#18191B; --surface-3:#1F2024;
--line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); --line-glow:rgba(255,255,255,.20);
/* Glass-Flächen über dem Hintergrund-Slider (Foto-Wand) */
--glass-bg:rgba(11,11,12,.62); --glass-surface:rgba(17,18,20,.70);
--bg-scrim:linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.66) 100%);
/* Primary signal */
--primary:#FF5A36; --primary-hover:#FF6B4A; --primary-soft:rgba(255,90,54,.14); --primary-glow:rgba(255,90,54,.45);
/* CTA — abgedunkeltes Orange NUR für solide Buttons mit weißem Text (WCAG AA) */
--cta:#C8321A; --cta-hover:#B82C10;
/* WhatsApp/Success-CTA — abgedunkeltes Grün für Buttons mit weißem Text (WCAG AA, weiss 5.4:1) */
--wa:#0B7A43; --wa-hover:#0A6E3A;
/* Text */
--text:#F5F7FA; --muted:#9BA3AF; --subtle:#6B7280;
/* Accents */
--success:#22C55E; --success-soft:rgba(34,197,94,.14);
--amber:#FBBF24; --amber-soft:rgba(251,191,36,.14);
--red:#EF4444; --red-soft:rgba(239,68,68,.14);
--cyan:#06B6D4; --cyan-soft:rgba(6,182,212,.14);
--violet:#8B5CF6; --violet-soft:rgba(139,92,246,.14);
--blue:#3B82F6; --blue-soft:rgba(59,130,246,.14);
--yellow:#EAB308; --yellow-soft:rgba(234,179,8,.14);
--green:#10B981; --green-soft:rgba(16,185,129,.14);
--orange:#F97316; --orange-soft:rgba(249,115,22,.14);
/* Radii */
--r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px;
/* Shadows */
--shadow-card:0 10px 40px rgba(0,0,0,.45);
--shadow-pop:0 25px 80px rgba(0,0,0,.55);
--shadow-glow:0 0 0 1px rgba(255,90,54,.25), 0 25px 60px rgba(255,90,54,.30);
}
/* === LIGHT MODE — flip Tokens für .figma-page === */
html[data-theme="light"]{
--bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F4F1ED; --surface-3:#F0EDE7;
--line:rgba(10,10,10,.10); --line-strong:rgba(10,10,10,.16); --line-glow:rgba(10,10,10,.22);
--glass-bg:rgba(250,250,248,.72); --glass-surface:rgba(255,255,255,.78);
--bg-scrim:linear-gradient(180deg, rgba(250,250,248,.60) 0%, rgba(250,250,248,.74) 100%);
--primary-soft:rgba(255,90,54,.10); --primary-glow:rgba(255,90,54,.35);
--cta:#C8321A; --cta-hover:#B82C10;
--wa:#0B7A43; --wa-hover:#0A6E3A;
--text:#0A0A0A; --muted:#4B5563; --subtle:#6B7280;
--success-soft:rgba(34,197,94,.10);
--amber-soft:rgba(251,191,36,.10);
--red-soft:rgba(239,68,68,.10);
--cyan-soft:rgba(6,182,212,.10);
--violet-soft:rgba(139,92,246,.10);
--blue-soft:rgba(59,130,246,.10);
--yellow-soft:rgba(234,179,8,.10);
--green-soft:rgba(16,185,129,.10);
--orange-soft:rgba(249,115,22,.10);
--shadow-card:0 10px 30px rgba(10,10,10,.10);
--shadow-pop:0 25px 60px rgba(10,10,10,.12);
--shadow-glow:0 0 0 1px rgba(255,90,54,.20), 0 20px 50px rgba(255,90,54,.25);
}
/* Scope everything to .figma-page so the WP admin bar / site styles don't bleed */
.figma-page,.figma-page *,.figma-page *::before,.figma-page *::after{box-sizing:border-box}
.figma-page{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:transparent; color:var(--text);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
font-feature-settings:'cv11','ss01','ss03';
line-height:1.55; overflow-x:hidden;
}
.figma-page a{color:inherit; text-decoration:none}
.figma-page img{max-width:100%; display:block}
.figma-page button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
.figma-page p{margin:0}
.figma-page ul{margin:0; padding:0; list-style:none}
.figma-page h1,.figma-page h2,.figma-page h3,.figma-page h4{margin:0; color:var(--text); font-family:'Inter Tight','Inter',sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.figma-page h1{font-size:clamp(40px, 6.4vw, 88px)}
.figma-page h2{font-size:clamp(30px, 4.2vw, 56px); line-height:1.1}
.figma-page h3{font-size:clamp(20px, 1.8vw, 26px); font-weight:700; line-height:1.25; letter-spacing:-.01em}
.figma-page h4{font-size:18px; font-weight:600; line-height:1.3}
.fp-skip-link{position:absolute; left:-9999px; top:0; z-index:1000; padding:12px 20px; background:#fff; color:#0B0B0C; font-weight:600; border-radius:0 0 8px 0; text-decoration:none}
.fp-skip-link:focus{left:0}
.fp-container{max-width:1400px; margin:0 auto; padding:0 20px}
@media (min-width:640px){ .fp-container{padding:0 32px} }
@media (min-width:1024px){ .fp-container{padding:0 40px} }
.fp-muted{color:var(--muted)}
.fp-subtle{color:var(--subtle)}
.fp-section{padding:clamp(64px, 9vw, 128px) 0; position:relative; content-visibility:auto; contain-intrinsic-size:auto 900px}
/* ============================================================
Buttons — magnetic-ready
============================================================ */
.fp-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-weight:600; line-height:1; white-space:nowrap; padding:14px 22px; border-radius:12px;
transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s, box-shadow .22s, color .22s;
will-change:transform; font-size:15px; letter-spacing:-.01em; user-select:none}
.fp-btn:active{transform:scale(.97)}
.fp-btn-lg{padding:18px 30px; font-size:17px; border-radius:14px}
.fp-btn-primary{background:var(--cta); color:#fff;
box-shadow:var(--shadow-glow)}
.fp-btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,90,54,.35), 0 35px 80px rgba(255,90,54,.45)}
.fp-btn-primary:active{transform:scale(.97) translateY(0); box-shadow:0 0 0 1px rgba(255,90,54,.30), 0 14px 30px rgba(255,90,54,.35)}
.fp-btn-success{background:var(--wa); color:#fff; box-shadow:0 20px 50px rgba(11,122,67,.32)}
.fp-btn-success:hover{background:var(--wa-hover)}
.fp-btn-success:hover{transform:translateY(-2px)}
.fp-btn-success:active{transform:scale(.97)}
.fp-btn-ghost{background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line-strong); backdrop-filter:blur(12px)}
.fp-btn-ghost:hover{background:rgba(255,255,255,.08); border-color:var(--line-glow)}
.fp-btn-ghost:active{transform:scale(.97)}
/* ============================================================
Header — sticky, glass on scroll
============================================================ */
.fp-header{position:sticky; top:0; z-index:80; background:rgba(11,11,12,.72); border-bottom:1px solid var(--line); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%)}
.fp-header-inner{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px}
.fp-logo{display:flex; align-items:center; gap:12px}
.fp-logo-mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg, var(--primary), var(--primary-hover));
display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px;
box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 8px 30px rgba(255,90,54,.35)}
.fp-logo-name{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em}
.fp-nav{display:none; align-items:center; gap:30px}
.fp-nav a{font-size:15px; font-weight:500; color:var(--muted); transition:color .2s}
.fp-nav a:hover{color:var(--text)}
.fp-header-actions{display:none; align-items:center; gap:12px}
.fp-phone-link{display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:600; padding:8px 12px; border-radius:10px; transition:background .2s}
.fp-phone-link:hover{background:rgba(255,255,255,.05)}
.fp-burger{display:inline-flex; padding:10px; border-radius:10px; color:var(--text); transition:background .2s}
.fp-burger:hover{background:rgba(255,255,255,.06)}
/* Theme-Toggle button */
.fp-theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; padding:0; border-radius:10px;
background:rgba(255,255,255,.04);
border:1px solid var(--line-strong);
color:var(--text); cursor:pointer;
transition:background .2s, border-color .2s, transform .2s;
}
.fp-theme-toggle:hover{background:rgba(255,255,255,.08); border-color:var(--line-glow)}
.fp-theme-toggle:active{transform:scale(.95)}
/* Im Dark-Mode zeigt der Toggle die Sonne (Hinweis: "klick um Light zu aktivieren") */
.fp-theme-toggle__sun{display:inline-block}
.fp-theme-toggle__moon{display:none}
html[data-theme="light"] .fp-theme-toggle__sun{display:none}
html[data-theme="light"] .fp-theme-toggle__moon{display:inline-block}
@media (min-width:1024px){ .fp-nav,.fp-header-actions{display:flex} .fp-burger{display:none} }
.fp-mobile-menu{display:none; border-top:1px solid var(--line); padding:18px 0 22px}
.fp-mobile-menu.is-open{display:block}
.fp-mobile-menu nav{display:flex; flex-direction:column; gap:14px}
.fp-mobile-menu nav a{color:var(--muted); font-weight:500}
.fp-mobile-actions{display:flex; flex-direction:column; gap:10px; padding-top:14px; margin-top:8px; border-top:1px solid var(--line)}
/* ============================================================
Hero — Aurora background, glass funnel
============================================================ */
.fp-hero{position:relative; isolation:isolate; overflow:hidden; padding:clamp(64px, 8vw, 128px) 0 clamp(56px, 7vw, 112px)}
.fp-hero-bg{position:absolute; inset:0; z-index:-3}
.fp-hero-bg img,.fp-hero-bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.20; mix-blend-mode:screen}
.fp-hero-bg::after{content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.58) 55%, rgba(11,11,12,.52) 100%)}
/* Aurora blobs */
.fp-aurora{position:absolute; inset:-20%; z-index:-2; pointer-events:none; filter:blur(60px); opacity:.85}
.fp-aurora::before, .fp-aurora::after, .fp-aurora-3{
content:""; position:absolute; border-radius:50%;
}
.fp-aurora::before{
width:60vw; height:60vw; right:-10%; top:-15%;
background:radial-gradient(circle, rgba(255,90,54,.55) 0%, transparent 60%);
animation:fp-float 60s ease-in-out infinite alternate;
}
.fp-aurora::after{
width:50vw; height:50vw; left:-10%; top:30%;
background:radial-gradient(circle, rgba(139,92,246,.40) 0%, transparent 60%);
animation:fp-float 72s ease-in-out infinite alternate-reverse;
}
.fp-aurora-3{width:46vw; height:46vw; left:30%; bottom:-20%;
background:radial-gradient(circle, rgba(6,182,212,.30) 0%, transparent 60%);
animation:fp-float 84s ease-in-out infinite alternate;
}
@keyframes fp-float{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(6%, -5%, 0) scale(1.10)}
}
/* Noise texture — animated grain */
.fp-noise{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay; animation:fp-noise 8s steps(6) infinite}
@keyframes fp-noise{
0% {background-position:0 0}
20% {background-position:-50px 30px}
40% {background-position:80px -40px}
60% {background-position:-30px -60px}
80% {background-position:60px 50px}
100%{background-position:0 0}
}
.fp-hero-grid{position:relative; display:grid; grid-template-columns:1fr; gap:48px; align-items:center}
@media (min-width:1024px){ .fp-hero-grid{grid-template-columns:1.05fr 1fr; gap:72px} }
.fp-hero-pill{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:9999px;
background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.30); color:#A7F3D0;
font-size:13px; font-weight:600; margin-bottom:24px}
.fp-hero-pill .fp-dot{width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.25); animation:fp-pulse 2s infinite}
@keyframes fp-pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.4); opacity:.6}}
.fp-hero h1{margin-bottom:20px}
.fp-hero h1 .fp-gradient{background:linear-gradient(135deg, #fff 0%, #fff 40%, var(--primary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.fp-hero-sub{font-size:clamp(17px, 1.4vw, 21px); color:var(--muted); max-width:560px; margin-bottom:36px}
.fp-hero-bullets{display:flex; flex-wrap:wrap; gap:14px 22px; margin-bottom:36px}
.fp-hero-bullet{display:inline-flex; align-items:center; gap:8px; color:#86EFAC; font-weight:500; font-size:15px}
.fp-hero-actions{display:flex; flex-wrap:wrap; gap:14px}
/* ============================================================
Glass Funnel Card
============================================================ */
.fp-funnel{position:relative; padding:clamp(24px, 3vw, 40px);
background:
linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
radial-gradient(120% 80% at 50% 0%, rgba(255,90,54,.06), transparent 60%),
rgba(17,18,20,.60);
border:1px solid var(--line-strong);
border-radius:var(--r-2xl);
backdrop-filter:blur(28px) saturate(160%);
-webkit-backdrop-filter:blur(28px) saturate(160%);
box-shadow:
0 30px 80px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(255,255,255,.04)}
.fp-funnel::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
background:linear-gradient(135deg, rgba(255,90,54,.45) 0%, transparent 30%, transparent 70%, rgba(139,92,246,.30) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.fp-funnel-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px}
.fp-funnel-head h3{font-size:clamp(22px, 2vw, 28px); color:#fff}
.fp-funnel-badge{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:9999px;
background:rgba(255,90,54,.12); border:1px solid rgba(255,90,54,.35); color:#FCA17B; font-size:12px; font-weight:600}
.fp-funnel-meta{color:var(--muted); font-size:14px; margin-top:4px}
.fp-progress{height:6px; background:rgba(255,255,255,.05); border-radius:9999px; overflow:hidden; margin:22px 0 28px; border:1px solid var(--line)}
.fp-progress-bar{height:100%; width:25%; border-radius:inherit;
background:linear-gradient(90deg, var(--primary), var(--primary-hover));
box-shadow:0 0 20px var(--primary-glow); transition:width .4s cubic-bezier(.2,.8,.2,1)}
.fp-step{display:none; animation:fp-fadein .35s ease}
.fp-step.is-active{display:block}
@keyframes fp-fadein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.fp-label{display:block; font-size:15px; font-weight:600; color:#fff; margin-bottom:12px}
.fp-input,.fp-select{width:100%; padding:16px 18px; font-size:16px; font-family:inherit; color:#fff;
background:rgba(255,255,255,.04); border:1.5px solid var(--line-strong); border-radius:14px;
transition:border-color .2s, background .2s; outline:none}
.fp-input::placeholder{color:var(--subtle)}
.fp-input:focus,.fp-select:focus{border-color:var(--primary); background:rgba(255,255,255,.06); box-shadow:0 0 0 4px rgba(255,90,54,.15)}
.fp-select{appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 18px center; padding-right:46px}
/* Native Dropdown-Optionen lesbar machen (sonst schwarze Schrift auf dunklem Grund) */
.fp-select option,.fp-select optgroup{background-color:#16181B; color:#fff}
.fp-input-hint{font-size:13px; color:var(--muted); margin-top:8px}
.fp-step-row{display:flex; flex-direction:column; gap:16px}
.fp-opt{font-weight:500; color:var(--subtle); font-size:13px}
/* Two-column field rows (Jahr/Monat, Farbe, Kontakt) */
.fp-field-row{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:480px){ .fp-field-row{grid-template-columns:1fr 1fr} }
/* Segmented control (Türen, Getriebe) */
.fp-seg{display:flex; flex-wrap:wrap; gap:10px}
.fp-seg-btn{flex:1 1 auto; min-width:96px; padding:14px 16px; border-radius:12px; text-align:center;
background:rgba(255,255,255,.04); border:1.5px solid var(--line-strong); color:var(--text);
font-weight:600; font-size:14px; cursor:pointer;
transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s, box-shadow .2s}
.fp-seg-btn:hover{background:rgba(255,90,54,.08); border-color:var(--primary); transform:translateY(-1px)}
.fp-seg-btn.is-active{background:var(--primary-soft); border-color:var(--primary); color:#fff; box-shadow:0 0 0 3px rgba(255,90,54,.15)}
/* Equipment toggle chips (multi-select) */
.fp-eq-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:480px){ .fp-eq-grid{grid-template-columns:1fr 1fr} }
.fp-toggle-chip{position:relative; display:flex; align-items:center; gap:10px; padding:12px 14px 12px 40px; border-radius:12px; text-align:left;
background:rgba(255,255,255,.04); border:1.5px solid var(--line-strong); color:var(--text);
font-weight:500; font-size:13.5px; cursor:pointer;
transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s, box-shadow .2s}
.fp-toggle-chip::before{content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
width:18px; height:18px; border-radius:6px; border:2px solid var(--line-strong); transition:all .2s}
.fp-toggle-chip:hover{border-color:var(--primary); background:rgba(255,90,54,.06); transform:translateY(-1px)}
.fp-toggle-chip.is-active{background:var(--primary-soft); border-color:var(--primary); color:#fff}
.fp-toggle-chip.is-active::before{background:var(--primary); border-color:var(--primary);
box-shadow:inset 0 0 0 2px rgba(17,18,20,.85)}
.fp-toggle-chip.is-active::after{content:""; position:absolute; left:19px; top:50%; width:5px; height:9px;
border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-65%) rotate(45deg)}
/* Brand chips Step 1 */
.fp-brand-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.fp-chip{padding:8px 14px; border-radius:9999px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s}
.fp-chip:hover{background:rgba(255,90,54,.10); border-color:var(--primary); color:#fff}
.fp-chip.is-active{background:var(--primary-soft); border-color:var(--primary); color:#fff}
/* Category cards (Step 3: Fahrzeugtyp/Zustand) */
.fp-cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:8px}
@media (min-width:480px){ .fp-cat-grid{grid-template-columns:repeat(4,1fr)} }
.fp-cat{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
padding:14px 14px; border-radius:14px; text-align:left;
background:rgba(255,255,255,.04); border:1.5px solid var(--line-strong); color:var(--text);
font-weight:600; font-size:13px; cursor:pointer;
transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s, border-color .22s, box-shadow .22s}
.fp-cat:hover{background:rgba(255,90,54,.08); border-color:var(--primary); transform:translateY(-1px)}
.fp-cat.is-active{background:var(--primary-soft); border-color:var(--primary); box-shadow:0 0 0 4px rgba(255,90,54,.15)}
.fp-cat-ico{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--muted); transition:all .22s}
.fp-cat:hover .fp-cat-ico, .fp-cat.is-active .fp-cat-ico{background:var(--primary-soft); color:var(--primary)}
.fp-cat-ico svg{width:16px; height:16px}
/* Radio cards (Step 4: conditional question) */
.fp-branch{animation:fp-fadein .35s ease}
.fp-branch[hidden]{display:none !important}
.fp-branch-q{display:block; font-size:15px; font-weight:600; color:#fff; margin-bottom:14px}
.fp-radio-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:480px){ .fp-radio-grid{grid-template-columns:1fr 1fr} }
.fp-radio-card{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px;
background:rgba(255,255,255,.04); border:1.5px solid var(--line-strong); color:var(--text);
font-weight:500; font-size:14px; cursor:pointer;
transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s, border-color .22s, box-shadow .22s}
.fp-radio-card:hover{border-color:var(--line-glow); background:rgba(255,255,255,.06); transform:translateY(-1px)}
.fp-radio-card input{appearance:none; -webkit-appearance:none; width:18px; height:18px; border:2px solid var(--line-strong); border-radius:50%; margin:0; flex-shrink:0; position:relative; cursor:pointer; transition:border-color .22s; background:transparent}
.fp-radio-card input:checked{border-color:var(--primary)}
.fp-radio-card input:checked::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary-glow)}
.fp-radio-card:has(input:checked){background:var(--primary-soft); border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,90,54,.12)}
/* DSGVO / UWG Einwilligung */
.fp-consent{display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px 16px; border-radius:12px;
background:rgba(255,255,255,.03); border:1px solid var(--line-strong); cursor:pointer}
.fp-consent input{appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; margin:1px 0 0;
border:2px solid var(--line-strong); border-radius:6px; background:transparent; position:relative; cursor:pointer; transition:border-color .2s, background .2s}
.fp-consent input:checked{background:var(--primary); border-color:var(--primary)}
.fp-consent input:checked::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.fp-consent input.fp-invalid{border-color:#FF5A36; box-shadow:0 0 0 3px rgba(255,90,54,.18)}
.fp-consent span{font-size:12.5px; line-height:1.55; color:var(--muted)}
.fp-consent a{color:var(--primary); text-decoration:underline}
.fp-funnel-nav{display:flex; gap:12px; margin-top:24px}
.fp-back{flex:1; padding:16px 22px; border:1.5px solid var(--line-strong); border-radius:14px; color:var(--muted); font-weight:600; background:rgba(255,255,255,.02); transition:all .2s}
.fp-back:hover{background:rgba(255,255,255,.06); color:#fff; border-color:var(--line-glow)}
.fp-next{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 22px; border-radius:14px; color:#fff; font-weight:600;
background:var(--cta);
box-shadow:0 0 0 1px rgba(255,90,54,.30), 0 20px 50px rgba(255,90,54,.35);
transition:transform .2s, box-shadow .25s}
.fp-next:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,90,54,.40), 0 30px 70px rgba(255,90,54,.45)}
.fp-next:disabled{opacity:.45; cursor:not-allowed}
.fp-funnel-foot{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; color:var(--subtle); font-size:12px}
.fp-funnel-foot svg{flex-shrink:0; color:var(--success)}
/* Floating trust pills around the funnel */
.fp-float-pill{position:absolute; z-index:4; padding:10px 14px; border-radius:14px; background:rgba(17,18,20,.85); border:1px solid var(--line-strong); display:flex; align-items:center; gap:10px; font-size:13px; backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.40); animation:fp-float-y 6s ease-in-out infinite alternate}
.fp-float-pill .fp-mini{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0}
.fp-float-pill-1{top:-18px; left:-14px; animation-delay:-1s}
.fp-float-pill-2{bottom:-18px; right:-14px; animation-delay:-3s}
@keyframes fp-float-y{0%{transform:translateY(0)} 100%{transform:translateY(-10px)}}
@media (max-width:1023px){ .fp-float-pill{display:none} }
/* ============================================================
LIVE Ticker — Heute angekauft
============================================================ */
.fp-ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; padding:14px 0; position:relative}
.fp-ticker::before,.fp-ticker::after{content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none}
.fp-ticker::before{left:0; background:linear-gradient(90deg, var(--surface), transparent)}
.fp-ticker::after{right:0; background:linear-gradient(-90deg, var(--surface), transparent)}
.fp-ticker-label{position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:3;
display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:9999px;
background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.30); color:#86EFAC; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.fp-ticker-label .fp-dot{width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.25); animation:fp-pulse 2s infinite}
.fp-ticker-track{display:flex; gap:36px; padding-left:200px; animation:fp-ticker 60s linear infinite; white-space:nowrap; align-items:center}
.fp-ticker:hover .fp-ticker-track{animation-play-state:paused}
@keyframes fp-ticker{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
.fp-ticker-item{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; flex-shrink:0}
.fp-ticker-item strong{color:#fff; font-weight:600}
.fp-ticker-sep{width:6px; height:6px; border-radius:50%; background:var(--line-glow)}
/* ============================================================
Trust badges
============================================================ */
.fp-trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:48px 0}
@media (min-width:1024px){ .fp-trust-grid{grid-template-columns:repeat(4,1fr); gap:20px; padding:56px 0} }
.fp-trust-item{display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:18px;
background:var(--surface); border:1px solid var(--line); transition:transform .25s, border-color .25s}
.fp-trust-item:hover{transform:translateY(-2px); border-color:var(--line-strong)}
.fp-trust-icon{width:48px; height:48px; border-radius:14px; background:var(--success-soft); color:var(--success); display:grid; place-items:center; flex-shrink:0}
.fp-trust-title{font-weight:600; color:#fff; font-size:15px}
.fp-trust-sub{color:var(--muted); font-size:13px; margin-top:2px}
/* ============================================================
Section headers
============================================================ */
.fp-section-head{text-align:center; margin-bottom:64px; max-width:780px; margin-left:auto; margin-right:auto}
.fp-section-head .fp-eyebrow{display:inline-flex; padding:6px 12px; border-radius:9999px;
background:var(--primary-soft); border:1px solid rgba(255,90,54,.30); color:#FCA17B;
font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px}
.fp-section-head h2{margin-bottom:14px}
.fp-section-head p{font-size:clamp(16px, 1.3vw, 19px); color:var(--muted)}
/* ============================================================
Vehicle Types
============================================================ */
.fp-vt-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:640px){ .fp-vt-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .fp-vt-grid{grid-template-columns:repeat(4,1fr); gap:20px} }
.fp-vt-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; cursor:pointer; transition:all .3s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; will-change:transform}
.fp-vt-card:hover{border-color:var(--line-glow); box-shadow:var(--shadow-card); transform:translateY(-3px)}
.fp-vt-icon{width:60px; height:60px; border-radius:16px; display:grid; place-items:center; margin-bottom:22px; transition:transform .3s}
.fp-vt-card:hover .fp-vt-icon{transform:scale(1.08)}
.fp-tone-orange{background:var(--orange-soft); color:var(--orange)}
.fp-tone-amber {background:var(--amber-soft); color:var(--amber)}
.fp-tone-red {background:var(--red-soft); color:var(--red)}
.fp-tone-cyan {background:var(--cyan-soft); color:var(--cyan)}
.fp-tone-violet{background:var(--violet-soft); color:var(--violet)}
.fp-tone-green {background:var(--green-soft); color:var(--green)}
.fp-tone-yellow{background:var(--yellow-soft); color:var(--yellow)}
.fp-tone-blue {background:var(--blue-soft); color:var(--blue)}
.fp-vt-card h3{margin-bottom:6px}
.fp-vt-card p{color:var(--muted); font-size:14px}
/* ============================================================
Vehicle Showcase
============================================================ */
.fp-showcase-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:768px){ .fp-showcase-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .fp-showcase-grid{grid-template-columns:repeat(4,1fr); gap:24px} }
.fp-showcase-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; cursor:pointer; transition:all .3s; transform-style:preserve-3d; will-change:transform}
.fp-showcase-card:hover{border-color:var(--line-glow); box-shadow:var(--shadow-card); transform:translateY(-3px)}
.fp-showcase-img{position:relative; aspect-ratio:4/3; overflow:hidden}
.fp-showcase-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fp-showcase-card:hover .fp-showcase-img img{transform:scale(1.08)}
.fp-showcase-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(11,11,12,.50) 100%); pointer-events:none}
.fp-showcase-badge{position:absolute; top:14px; right:14px; z-index:2; padding:6px 12px; border-radius:9999px; background:rgba(11,11,12,.70); color:#fff; font-size:12px; font-weight:600; backdrop-filter:blur(8px); border:1px solid var(--line-strong)}
.fp-showcase-body{padding:22px}
.fp-showcase-body h3{margin-bottom:6px; color:#fff; font-size:19px}
.fp-showcase-body p{color:var(--muted); margin-bottom:14px; font-size:14px}
.fp-showcase-cta{display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; font-size:14px; transition:gap .25s}
.fp-showcase-card:hover .fp-showcase-cta{gap:10px}
/* ============================================================
Gallery — cinematic scenes
============================================================ */
.fp-gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (min-width:1024px){ .fp-gallery-grid{grid-template-columns:repeat(4,1fr); gap:20px} }
.fp-gallery-item{position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden}
.fp-gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fp-gallery-item:hover img{transform:scale(1.06)}
.fp-gallery-item::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,11,12,.85) 100%)}
.fp-gallery-label{position:absolute; left:18px; bottom:18px; z-index:1; color:#fff; font-weight:600; font-size:16px}
/* ============================================================
Process steps
============================================================ */
.fp-process-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:1024px){ .fp-process-grid{grid-template-columns:repeat(3,1fr); gap:28px} }
.fp-process-card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px; transition:all .3s; overflow:hidden}
.fp-process-card::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 40% at 80% 0%, var(--primary-soft) 0%, transparent 70%); pointer-events:none; opacity:.6}
.fp-process-card:hover{border-color:rgba(255,90,54,.35); transform:translateY(-3px); box-shadow:var(--shadow-card)}
.fp-process-head{display:flex; align-items:flex-start; gap:18px; margin-bottom:20px; position:relative}
.fp-process-num{font-family:'Inter Tight',sans-serif; font-size:64px; font-weight:800; line-height:1;
background:linear-gradient(135deg, var(--primary) 0%, rgba(255,90,54,.30) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.04em}
.fp-process-icon{width:52px; height:52px; border-radius:14px; background:linear-gradient(180deg, var(--primary), var(--primary-hover)); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(255,90,54,.30); flex-shrink:0; margin-top:8px}
.fp-process-card h3{color:#fff; margin-bottom:10px}
.fp-process-card > p{color:var(--muted); font-size:15px; margin-bottom:18px}
.fp-process-details{display:flex; flex-direction:column; gap:10px; font-size:14px}
.fp-process-details li{display:flex; align-items:center; gap:10px; color:var(--muted)}
.fp-bullet{width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 2px rgba(34,197,94,.20)}
.fp-process-cta-row{text-align:center; margin-top:48px}
/* ============================================================
Why WKJF — reasons + animated stats
============================================================ */
.fp-why-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:768px){ .fp-why-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .fp-why-grid{grid-template-columns:repeat(3,1fr); gap:24px} }
.fp-why-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px; transition:all .3s}
.fp-why-card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-card)}
.fp-why-icon{width:52px; height:52px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; margin-bottom:20px}
.fp-why-card h3{color:#fff; margin-bottom:10px; font-size:18px}
.fp-why-card p{color:var(--muted); line-height:1.6; font-size:14px}
/* Stats */
.fp-stats-wrap{margin-top:64px; position:relative; padding:48px 32px; border-radius:32px;
background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border:1px solid var(--line-strong); overflow:hidden}
.fp-stats-wrap::before{content:""; position:absolute; inset:0;
background:radial-gradient(60% 100% at 50% 0%, rgba(255,90,54,.15) 0%, transparent 60%); pointer-events:none}
.fp-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; position:relative}
@media (min-width:1024px){ .fp-stats{grid-template-columns:repeat(4,1fr)} }
.fp-stat{text-align:center}
.fp-stat-num{font-family:'Inter Tight',sans-serif; font-size:clamp(38px, 4.8vw, 60px); font-weight:800; line-height:1; letter-spacing:-.03em;
background:linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.fp-stat-suffix{font-family:'Inter Tight',sans-serif; font-size:clamp(38px, 4.8vw, 60px); font-weight:800; color:var(--primary); margin-left:2px}
.fp-stat-label{color:var(--muted); font-size:14px; margin-top:8px}
/* ============================================================
Testimonials
============================================================ */
.fp-testi-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9999px;
background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.30); color:#86EFAC; font-weight:600; font-size:14px; margin-bottom:18px}
.fp-testi-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:768px){ .fp-testi-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .fp-testi-grid{grid-template-columns:repeat(3,1fr); gap:24px} }
.fp-testi-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; transition:all .3s}
.fp-testi-card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-card)}
.fp-testi-head{display:flex; justify-content:space-between; margin-bottom:16px}
.fp-testi-stars{display:inline-flex; gap:2px; color:#FACC15}
.fp-quote-icon{color:rgba(255,90,54,.25)}
.fp-testi-text{color:#E5E7EB; line-height:1.6; margin-bottom:18px; font-size:15px}
.fp-testi-meta{padding-top:16px; border-top:1px solid var(--line)}
.fp-testi-name{color:#fff; font-weight:600; font-size:15px}
.fp-testi-loc{color:var(--muted); font-size:13px}
.fp-testi-car{color:var(--subtle); font-size:12px; margin-top:8px}
.fp-testi-date{color:var(--subtle); font-size:12px; margin-top:2px}
.fp-testi-cta-row{text-align:center; margin-top:48px}
.fp-testi-cta-row p{color:var(--muted); margin-bottom:16px}
/* ============================================================
FAQ
============================================================ */
.fp-faq-wrap{max-width:920px; margin:0 auto}
.fp-faq-item{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px; transition:border-color .25s}
.fp-faq-item:hover{border-color:var(--line-strong)}
.fp-faq-item.is-open{border-color:rgba(255,90,54,.35); background:linear-gradient(180deg, rgba(255,90,54,.04), transparent)}
.fp-faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; text-align:left; transition:background .2s}
.fp-faq-q:hover{background:rgba(255,255,255,.02)}
.fp-faq-q span{color:#fff; font-weight:600; font-size:16px}
.fp-faq-q svg{color:var(--primary); flex-shrink:0; transition:transform .3s}
.fp-faq-item.is-open .fp-faq-q svg{transform:rotate(180deg)}
.fp-faq-a{max-height:0; overflow:hidden; padding:0 26px; color:var(--muted); line-height:1.65; transition:max-height .35s ease, padding .35s ease}
.fp-faq-item.is-open .fp-faq-a{max-height:600px; padding-bottom:24px}
.fp-faq-cta{margin-top:48px; padding:36px; background:var(--surface); border:1px solid var(--line); border-radius:24px; text-align:center; position:relative; overflow:hidden}
.fp-faq-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(50% 100% at 50% 0%, rgba(255,90,54,.15), transparent 60%); pointer-events:none}
.fp-faq-cta h3{color:#fff; font-size:24px; margin-bottom:8px; position:relative}
.fp-faq-cta p{color:var(--muted); margin-bottom:24px; position:relative}
.fp-faq-cta-row{display:flex; flex-direction:column; gap:12px; justify-content:center; position:relative}
@media (min-width:640px){ .fp-faq-cta-row{flex-direction:row} }
/* ============================================================
Footer
============================================================ */
.fp-footer{background:var(--glass-surface); backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); border-top:1px solid var(--line); margin-top:60px}
.fp-footer-main{padding:80px 0 48px}
.fp-footer-grid{display:grid; grid-template-columns:1fr; gap:48px; margin-bottom:56px}
@media (min-width:768px){ .fp-footer-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .fp-footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr; gap:64px} }
.fp-footer h4{color:#fff; font-size:15px; font-weight:700; margin-bottom:22px; letter-spacing:.02em}
.fp-footer p,.fp-footer li,.fp-footer a{color:var(--muted); font-size:14px}
.fp-footer a:hover{color:var(--primary)}
.fp-footer-logo{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.fp-footer-blurb{margin-bottom:20px; line-height:1.6}
.fp-footer-socials{display:flex; gap:10px}
.fp-footer-social{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .2s}
.fp-footer-social:hover{background:var(--primary-soft); border-color:var(--primary); color:#fff}
.fp-footer-list{display:flex; flex-direction:column; gap:10px}
.fp-footer-contact{display:flex; flex-direction:column; gap:14px}
.fp-footer-contact-row{display:flex; align-items:flex-start; gap:12px; color:var(--muted)}
.fp-footer-contact-row svg{flex-shrink:0; margin-top:2px; color:var(--primary); opacity:.7}
.fp-footer-tags{border-top:1px solid var(--line); padding-top:36px; margin-bottom:36px}
.fp-footer-tags h4{margin-bottom:18px}
.fp-footer-tag-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:13px}
@media (min-width:640px){ .fp-footer-tag-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1024px){ .fp-footer-tag-grid{grid-template-columns:repeat(8,1fr); gap:10px} }
.fp-footer-bottom{border-top:1px solid var(--line); padding:22px 0}
.fp-footer-bottom-inner{display:flex; flex-direction:column; gap:14px; align-items:center; font-size:13px; color:var(--subtle)}
@media (min-width:768px){ .fp-footer-bottom-inner{flex-direction:row; justify-content:space-between} }
.fp-footer-legal{display:flex; flex-wrap:wrap; gap:20px}
/* ============================================================
Sticky Mobile CTA — app-style floating bar
============================================================ */
.fp-mobile-cta{display:none}
@media (max-width:1023px){
.fp-mobile-cta{display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:6px; position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
padding:8px; background:rgba(17,18,20,.85); border:1px solid var(--line-strong); border-radius:20px;
backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
box-shadow:0 18px 50px rgba(0,0,0,.50)}
.figma-page{padding-bottom:90px}
}
.fp-mobile-cta > *{display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 8px; border-radius:14px; font-size:13px; font-weight:600; color:#fff; transition:background .2s}
.fp-mobile-cta > a:hover{background:rgba(255,255,255,.06)}
.fp-mobile-cta .fp-mcta-primary{background:linear-gradient(180deg, var(--primary), var(--primary-hover)); box-shadow:0 10px 30px rgba(255,90,54,.40)}
/* ============================================================
Reveal animations
============================================================ */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
[data-reveal]{opacity:1; transform:none; transition:none}
.fp-aurora::before,.fp-aurora::after,.fp-aurora-3{animation:none}
.fp-ticker-track{animation:none}
}
/* Selection color */
.figma-page ::selection{background:rgba(255,90,54,.40); color:#fff}
/* Tilt cursor hint */
[data-tilt]{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* Welcome-back toast */
.fp-toast{position:fixed; left:20px; bottom:20px; z-index:90; max-width:340px;
padding:14px 18px; border-radius:16px;
background:rgba(17,18,20,.92); border:1px solid var(--line-strong);
backdrop-filter:blur(20px); box-shadow:0 20px 50px rgba(0,0,0,.55);
display:flex; align-items:center; gap:12px; transform:translateY(40px); opacity:0;
transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s}
.fp-toast.is-in{transform:none; opacity:1}
.fp-toast-icon{width:34px; height:34px; border-radius:10px; flex-shrink:0;
background:var(--success-soft); color:var(--success); display:grid; place-items:center}
.fp-toast-text{flex:1; min-width:0; font-size:14px; color:var(--text)}
.fp-toast-text small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.fp-toast-close{background:none; color:var(--muted); padding:6px; border-radius:8px}
.fp-toast-close:hover{background:rgba(255,255,255,.06); color:var(--text)}
@media (max-width:1023px){ .fp-toast{left:12px; right:12px; bottom:84px; max-width:none} }
/* ============================================================
LIGHT MODE — alle hardcoded #fff in .figma-page invertieren.
Brand-Gradient-Buttons (Orange/Green Surface) behalten White.
============================================================ */
html[data-theme="light"] .figma-page,
html[data-theme="light"] body.figma-page{background:var(--bg); color:var(--text)}
html[data-theme="light"] .fp-header{background:rgba(255,255,255,.85)}
html[data-theme="light"] .fp-header-actions .fp-phone-link{color:var(--text)}
html[data-theme="light"] .fp-header-actions .fp-phone-link:hover{background:rgba(10,10,10,.05)}
html[data-theme="light"] .fp-nav a{color:var(--muted)}
html[data-theme="light"] .fp-nav a:hover{color:var(--text)}
/* Headings + Card-Titel auf Light-Surface dunkel */
html[data-theme="light"] .fp-hero h1,
html[data-theme="light"] .fp-funnel-head h3,
html[data-theme="light"] .fp-label,
html[data-theme="light"] .fp-branch-q,
html[data-theme="light"] .fp-trust-title,
html[data-theme="light"] .fp-vt-card h3,
html[data-theme="light"] .fp-showcase-body h3,
html[data-theme="light"] .fp-process-card h3,
html[data-theme="light"] .fp-why-card h3,
html[data-theme="light"] .fp-testi-name,
html[data-theme="light"] .fp-faq-q span,
html[data-theme="light"] .fp-faq-cta h3,
html[data-theme="light"] .fp-section-head h2,
html[data-theme="light"] .fp-ticker-item strong,
html[data-theme="light"] .fp-footer h4{color:var(--text)}
/* Hero h1 Gradient-Accent flippt von weiß→orange auf text→orange */
html[data-theme="light"] .fp-hero h1 .fp-gradient{
background:linear-gradient(135deg, var(--text) 0%, var(--text) 40%, var(--primary) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Inputs auf Light-Surface */
html[data-theme="light"] .fp-input,
html[data-theme="light"] .fp-select{
background:#FFFFFF; color:var(--text); border-color:var(--line-strong);
}
html[data-theme="light"] .fp-input::placeholder{color:var(--subtle)}
html[data-theme="light"] .fp-select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 18px center;
}
html[data-theme="light"] .fp-select option,
html[data-theme="light"] .fp-select optgroup{background-color:#FFFFFF; color:var(--text)}
/* Funnel Card Glass auf Weiß */
html[data-theme="light"] .fp-funnel{
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)),
radial-gradient(120% 80% at 50% 0%, rgba(255,90,54,.05), transparent 60%);
box-shadow:0 30px 80px rgba(10,10,10,.10), inset 0 1px 0 rgba(255,255,255,.80), inset 0 -1px 0 rgba(0,0,0,.04);
}
html[data-theme="light"] .fp-progress{background:rgba(10,10,10,.05)}
html[data-theme="light"] .fp-back{background:rgba(10,10,10,.03); color:var(--muted)}
html[data-theme="light"] .fp-back:hover{background:rgba(10,10,10,.06); color:var(--text)}
/* Brand-Chips bleiben farbig korrekt */
html[data-theme="light"] .fp-chip{background:#FFFFFF; color:var(--muted); border-color:var(--line)}
html[data-theme="light"] .fp-chip:hover,
html[data-theme="light"] .fp-chip.is-active{background:var(--primary-soft); border-color:var(--primary); color:var(--primary)}
/* Cards (Trust/Vehicle/Why/FAQ/Testi) auf weiß */
html[data-theme="light"] .fp-trust-item,
html[data-theme="light"] .fp-vt-card,
html[data-theme="light"] .fp-showcase-card,
html[data-theme="light"] .fp-why-card,
html[data-theme="light"] .fp-process-card,
html[data-theme="light"] .fp-testi-card,
html[data-theme="light"] .fp-faq-item,
html[data-theme="light"] .fp-faq-cta,
html[data-theme="light"] .fp-stats-wrap{
background:#FFFFFF; border-color:var(--line);
}
html[data-theme="light"] .fp-trust-item:hover{background:var(--surface-2)}
/* Stats — gradient flippt zu text→orange */
html[data-theme="light"] .fp-stat-num{
background:linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Process-Num gradient bleibt orange (eigene Brand-Farbe) */
/* Funnel Submit + Next + Process-Icon behalten weißen Text (orange Background) */
html[data-theme="light"] .fp-btn-primary,
html[data-theme="light"] .fp-btn-success,
html[data-theme="light"] .fp-next,
html[data-theme="light"] .fp-process-icon,
html[data-theme="light"] .fp-logo-mark{color:#fff}
/* Ticker Light Surface */
html[data-theme="light"] .fp-ticker{background:#FFFFFF}
html[data-theme="light"] .fp-ticker::before{background:linear-gradient(90deg, #FFFFFF, transparent)}
html[data-theme="light"] .fp-ticker::after{background:linear-gradient(-90deg, #FFFFFF, transparent)}
/* Floating Pills */
html[data-theme="light"] .fp-float-pill{background:rgba(255,255,255,.92); color:var(--text)}
html[data-theme="light"] .fp-float-pill strong{color:var(--text)}
/* FAQ open-state Hintergrund */
html[data-theme="light"] .fp-faq-item.is-open{background:linear-gradient(180deg, rgba(255,90,54,.04), transparent)}
/* Footer auf Off-White */
html[data-theme="light"] .fp-footer{background:var(--surface-2); color:var(--muted)}
html[data-theme="light"] .fp-footer p,
html[data-theme="light"] .fp-footer li,
html[data-theme="light"] .fp-footer a{color:var(--muted)}
html[data-theme="light"] .fp-footer a:hover{color:var(--primary)}
html[data-theme="light"] .fp-footer-social{background:#FFFFFF; border-color:var(--line); color:var(--muted)}
html[data-theme="light"] .fp-footer-bottom{border-top-color:var(--line); color:var(--subtle)}
/* Mobile CTA Bar Light */
html[data-theme="light"] .fp-mobile-cta{background:rgba(255,255,255,.92)}
html[data-theme="light"] .fp-mobile-cta > *{color:var(--text)}
html[data-theme="light"] .fp-mobile-cta .fp-mcta-primary{color:#fff}
/* Toast Light */
html[data-theme="light"] .fp-toast{background:rgba(255,255,255,.96); color:var(--text)}
html[data-theme="light"] .fp-toast-close:hover{background:rgba(10,10,10,.06); color:var(--text)}
/* Theme-Toggle Light-Mode */
html[data-theme="light"] .fp-theme-toggle{background:#FFFFFF; border-color:var(--line-strong); color:var(--text)}
html[data-theme="light"] .fp-theme-toggle:hover{background:var(--surface-2)}
/* Burger im Light */
html[data-theme="light"] .fp-burger:hover{background:rgba(10,10,10,.05)}
/* Selection im Light */
html[data-theme="light"] .figma-page ::selection{background:rgba(255,90,54,.30); color:var(--text)}
/* Mobile Menu Light-Border */
html[data-theme="light"] .fp-mobile-menu{border-top-color:var(--line)}
html[data-theme="light"] .fp-mobile-actions{border-top-color:var(--line)}
/* ===== Hintergrund-Foto-Slider (Abschlepp) — automatischer Wechsel ===== */
.fp-bgslider{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg)}
.fp-bgslider-layer{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.6s ease-in-out; will-change:opacity}
.fp-bgslider-layer.is-active{opacity:1}
.fp-bgslider-scrim{position:absolute; inset:0; background:var(--bg-scrim)}
.fp-bgslider--instant .fp-bgslider-layer{transition:none}
@media (prefers-reduced-motion: reduce){ .fp-bgslider-layer{transition:none} }
.fp-glass{backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%)}
/* WICHTIG: premium.css setzt body.home/html background:var(--wkjf-bg) (opak) und würde den
fixen Slider (z-index:-1) überdecken. Auf der Startseite Body transparent erzwingen. */
body.figma-page{background:transparent !important}