/* ============================================================ SANFTMOBIL — LANDINGPAGES (landing.css) ------------------------------------------------------------ Ergaenzt stil.css (wird NACH stil.css geladen). Gilt nur fuer Seiten mit . Enthaelt: 1. Kino-Hero (dunkel) mit CSS-3D-Fahrzeug (Explosionsansicht) 2. Frage → Antwort-Sektionen ("Problemzonen") 3. Kostentraeger-, Ablauf-, Fahrzeug- und Beweis-Bloecke 4. Anfrage-Drawer (faehrt von links ein) + Formular 5. Responsive + prefers-reduced-motion Alle Animationen laufen ueber transform/opacity (GPU) — keine Layout-Eigenschaften werden animiert (CLS-sicher). ============================================================ */ .lp { --lp-ink: #0F1520; --lp-ink-2: #141C2A; --lp-petrol: #1F5E66; --lp-petrol-2: #2E7C86; --lp-red: #D6342C; --lp-red-2: #B72620; --lp-sand: #F6F4EF; --lp-line: rgba(17,24,39,0.10); --lp-ease: cubic-bezier(.16,1,.3,1); /* expo-out */ --lp-radius: 22px; --van-body: #F4F2ED; --van-body-2: #E4E0D6; --van-stripe: #D6342C; --van-glass: #16323A; --van-glass-2: #2C5A66; --van-tire: #15171C; --van-rim: #C7CBD3; --van-metal: #9BA3AE; } .lp .btn:focus-visible, .lp button:focus-visible, .lp a:focus-visible, .lp input:focus-visible, .lp select:focus-visible, .lp textarea:focus-visible { outline: 3px solid #111; outline-offset: 3px; } .lp button { font-family: inherit; } .lp button.burger { background: none; border: 0; } .lp .wrap { position: relative; } /* ── 1. KINO-HERO ──────────────────────────────────────────── */ .lp-hero { position: relative; color: var(--ink); background: var(--lp-sand); /* Desktop: 215vh hoch, innerer Block bleibt 100vh "gepinnt", waehrend das Fahrzeug beim Scrollen auseinanderfaehrt (laengerer Weg = ruhigere Steuerung). */ height: 215vh; min-height: 1240px; } .lp-hero-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center; padding-top: 78px; /* Hoehe der sticky Navigation */ } .lp-hero-bg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #FFFFFF 0%, #F8F6F1 55%, #F1EDE5 100%); } /* Feines Filmkorn (SVG-Rauschen als data-URI, CSP img-src data: erlaubt) */ .lp-hero-bg::before { content: ""; position: absolute; inset: 0; opacity: 0.09; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* Vignette */ .lp-hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(17,24,39,0.10) 100%); } /* Lichtkegel von oben rechts */ .lp-spot { z-index: 2; position: absolute; top: -20%; right: 4%; width: 60%; height: 130%; pointer-events: none; background: conic-gradient(from 195deg at 60% 0%, transparent 0deg, rgba(31,94,102,0.10) 14deg, rgba(31,94,102,0.03) 26deg, transparent 40deg); filter: blur(8px); opacity: 0.9; } /* Schwebende Lichtpunkte */ .lp-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .lp-dust i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(31,94,102,0.35); box-shadow: 0 0 12px 3px rgba(31,94,102,0.14); opacity: 0; animation: lpDust 14s linear infinite; animation-delay: var(--d, 0s); left: var(--l, 50%); top: var(--t, 60%); transform: scale(var(--s, 1)); } @keyframes lpDust { 0% { opacity: 0; transform: translate3d(0,0,0) scale(var(--s,1)); } 10% { opacity: .9; } 90% { opacity: .4; } 100% { opacity: 0; transform: translate3d(40px,-140px,0) scale(var(--s,1)); } } .lp-hero .wrap { position: relative; z-index: 3; width: 100%; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 32px; } .lp-hero-copy { max-width: 620px; align-self: start; padding-top: 6vh; } .lp-hero .eyebrow { color: var(--lp-red); } .lp-hero .eyebrow::before { background: var(--lp-red); } .lp-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.85rem); line-height: 1.06; letter-spacing: -0.026em; color: var(--ink); margin-bottom: 18px; text-wrap: balance; hyphens: manual; /* Schatten waechst mit dem Scrollweg (--x) -> Ueberschrift bleibt vor dem Fahrzeug praesent */ text-shadow: 0 1px 2px rgba(17,24,39, calc(.10 + var(--x, 0) * .28)), 0 6px 18px rgba(17,24,39, calc(.06 + var(--x, 0) * .34)), 0 14px 40px rgba(17,24,39, calc(var(--x, 0) * .30)); } /* Nach dem Intro Zeilenkaesten oeffnen, damit der Schatten nicht beschnitten wird */ .lp-hero.is-in h1 .w { overflow: visible; } .lp-hero h1 .accent { color: var(--lp-red-2); background: linear-gradient(90deg, rgba(214,52,44,0.20), rgba(214,52,44,0.06)); background-repeat: no-repeat; background-size: 100% 42%; background-position: 0 88%; padding: 0 .06em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .lp-hero .lead { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--ink-soft); max-width: 540px; margin-bottom: 26px; } .lp-hero .eyebrow { margin-bottom: 14px; } .lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .lp-hero-ctas .btn { min-height: 52px; padding: 14px 22px; font-size: 0.97rem; } .lp-hero-ctas .btn-red { box-shadow: 0 14px 34px rgba(214,52,44,0.42); } .lp-hero-ctas .btn-glass { background: #fff; color: var(--ink); border: 1.5px solid rgba(17,24,39,0.16); box-shadow: 0 8px 20px rgba(17,24,39,0.06); } .lp-hero-ctas .btn-glass:hover { border-color: #111; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17,24,39,0.10); } .lp-hero-phones { margin-top: 14px; font-size: 0.92rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .lp-hero-phones a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(17,24,39,0.25); text-underline-offset: 3px; } .lp-hero-phones a:hover { color: var(--lp-red); } .lpf-phones { margin-top: 12px; font-size: 0.85rem; color: var(--ink-soft); text-align: center; line-height: 1.6; } .lpf-phones a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(17,24,39,0.25); text-underline-offset: 3px; } .lp-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(17,24,39,0.12); font-size: 0.92rem; color: var(--ink-soft); } .lp-hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .lp-hero-trust svg { flex-shrink: 0; } /* Hero-Choreografie – gesteuert ueber --tp (0..1, setzt landing.js): ohne JS / reduced motion ist --tp = 1 -> alles sichtbar. Das Intro laeuft beim Laden von allein durch (2,4 s); wer sofort scrollt, treibt es mit dem Scrollweg (erste Haelfte des gepinnten Heros) schneller. Reihenfolge: Eyebrow -> Ueberschrift Wort fuer Wort (Blur -> scharf) -> Fliesstext fliegt von links ein -> Buttons boomen mit Ueberschwinger -> Mobilzeile -> Vertrauens-Punkte. */ .lp-hero { --tp: 1; --th: clamp(0, calc(var(--tp) / .52), 1); /* Ueberschrift */ --tl: clamp(0, calc((var(--tp) - .40) / .28), 1); /* Fliesstext */ --tph: clamp(0, calc((var(--tp) - .56) / .26), 1); /* Mobilzeile */ --tt: clamp(0, calc((var(--tp) - .68) / .32), 1); /* Vertrauen */ } .lp-hero .eyebrow { --e: clamp(0, calc(var(--tp) / .2), 1); opacity: var(--e); filter: blur(calc((1 - var(--e)) * 8px)); transform: translate3d(calc((1 - var(--e)) * -28px), 0, 0); } .lp-hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .03em .12em; margin: 0 -.03em -.12em; } .lp-hero h1 .wi { display: inline-block; --w: clamp(0, calc((var(--th) * (var(--wn, 12) + 3) - var(--wi, 0)) / 3), 1); opacity: var(--w); filter: blur(calc((1 - var(--w)) * 14px)); transform: translate3d(0, calc((1 - var(--w)) * 75%), 0) scale(calc(.92 + var(--w) * .08)); transform-origin: left bottom; } .lp-hero .lead { opacity: var(--tl); filter: blur(calc((1 - var(--tl)) * 6px)); transform: translate3d(calc((1 - var(--tl)) * -80px), 0, 0); } .lp-hero-phones { opacity: var(--tph); transform: translate3d(calc((1 - var(--tph)) * -60px), 0, 0); } /* Buttons: "Boom" – von klein auf gross mit Ueberschwinger (sin), gestaffelt ueber --bi */ .lp-boom { display: inline-flex; --b: clamp(0, calc((var(--tp) - .58 - var(--bi, 0) * .08) / .24), 1); opacity: clamp(0, calc(var(--b) * 2.5), 1); transform: scale(calc(.45 + .55 * var(--b))); transform: scale(calc(.45 + .55 * var(--b) + .16 * sin(calc(var(--b) * 180deg)))); transform-origin: 30% 60%; will-change: transform; } .lp-hero-trust { opacity: clamp(0, calc(var(--tt) * 3), 1); border-top-color: rgba(17,24,39, calc(var(--tt) * .12)); } .lp-hero-trust span { --t: clamp(0, calc((var(--tt) * 6 - var(--ti, 0)) / 3), 1); opacity: var(--t); filter: blur(calc((1 - var(--t)) * 5px)); transform: translate3d(calc((1 - var(--t)) * -40px), 0, 0); } /* Beim Scrollen im gepinnten Hero (ab 62 %): Nebentexte treten zurueck, Ueberschrift bleibt voll da (Schatten waechst) */ .lp-hero-copy { --back: clamp(0, calc((var(--x, 0) - .62) / .38), 1); transform: translate3d(0, calc(var(--back) * -36px), 0); transform-origin: left top; } .lp-hero .lead { opacity: calc(var(--tl) * (1 - var(--back, 0) * .55)); } .lp-hero-phones { opacity: calc(var(--tph) * (1 - var(--back, 0) * .55)); } .lp-hero-trust { opacity: calc(clamp(0, calc(var(--tt) * 3), 1) * (1 - var(--back, 0) * .55)); } .lp-hero-ctas { opacity: calc(1 - var(--back, 0) * .25); } /* Aufmerksamkeit nach dem Intro (.is-in): Puls-Ring am Haupt-Button, Hoerer "klingelt", Formular-Reiter stupst an */ .lp-hero.is-in .lp-hero-ctas .btn-red { position: relative; } .lp-hero.is-in .lp-hero-ctas .btn-red::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(214,52,44,.55); opacity: 0; pointer-events: none; animation: lpPulse 3s ease-out 1s infinite; } @keyframes lpPulse { 0% { transform: scale(.94); opacity: .9; } 60%, 100% { transform: scale(1.16); opacity: 0; } } .lp-hero.is-in .lp-hero-ctas .btn-glass svg { animation: lpRing 7s ease-in-out 2.5s infinite; transform-origin: 50% 50%; } @keyframes lpRing { 0%, 9%, 100% { transform: rotate(0); } 1.5% { transform: rotate(-16deg); } 3% { transform: rotate(13deg); } 4.5% { transform: rotate(-10deg); } 6% { transform: rotate(7deg); } 7.5% { transform: rotate(-3deg); } } .lp-hero.is-in ~ * .lp-tab, .lp.is-in .lp-tab { animation: lpNudge 8s ease-in-out 5s infinite; } @keyframes lpNudge { 0%, 90%, 100% { translate: 0 0; } 92.5% { translate: 6px 0; } 95% { translate: 0 0; } 97.5% { translate: 4px 0; } } .lp-scrollhint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,24,39,0.55); pointer-events: none; transition: opacity .4s; } .lp-scrollhint i { width: 1px; height: 38px; background: linear-gradient(180deg, rgba(17,24,39,0.7), transparent); animation: lpHint 1.8s ease-in-out infinite; transform-origin: top; } @keyframes lpHint { 0%,100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } .lp-hero.is-scrolled .lp-scrollhint { opacity: 0; } /* ── 3D-BUEHNE ─────────────────────────────────────────────── */ .lp-stage { position: relative; z-index: 4; pointer-events: none; /* rein dekorativ – darf keine Klicks abfangen */ height: clamp(320px, 52vh, 560px); perspective: 1500px; perspective-origin: 50% 38%; --x: 0; /* Explosionsgrad 0..1 (setzt landing.js) */ --lbl: 0; /* Sichtbarkeit der Bauteil-Beschriftungen */ --mx: 0; /* Maus-Parallax (-1..1) */ --my: 0; --s: 1; /* Skalierung des Fahrzeugs */ } /* Video-Fahrzeug (Standard): laeuft als Hintergrund des Heros – gross rechts, weich in die Flaeche ausgeblendet (Maske statt Kasten). Laeuft von allein (Vor-/Rueck-Schleife) und folgt beim Scrollen der Scrollposition (landing.js). */ .lp-vidwrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .lp-vidbox { position: absolute; right: -4%; top: 50%; height: 86%; aspect-ratio: 4 / 3; transform: translate3d(0, -50%, 0) scale(calc(1 + var(--x, 0) * .08)); transform-origin: 58% 50%; } .lp-video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; -webkit-mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 52%, rgba(0,0,0,0.55) 76%, transparent 98%); mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 52%, rgba(0,0,0,0.55) 76%, transparent 98%); animation: lpFocus2 1.6s var(--lp-ease) both .15s; } @keyframes lpFocus2 { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: blur(0); } } /* Weicher Deckel ueber der Ecke mit dem eingebrannten KI-Wasserzeichen (skaliert mit der Box mit) */ .lp-vidbox::after { content: ""; position: absolute; right: 0; bottom: 0; width: 58%; height: 32%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 100% 100%, rgba(244,241,235,1) 0%, rgba(244,241,235,0.97) 52%, rgba(244,241,235,0) 80%); } /* Lesbarkeit: links weiche weisse Flaeche hinter dem Text */ .lp-vidfade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.72) 36%, rgba(255,255,255,0.25) 52%, rgba(255,255,255,0) 64%); } /* Schockwelle hinter dem Fahrzeug (rechte Spalte), sobald die Explosion "aufgeht" */ .lp-shock { position: absolute; left: 50%; top: 54%; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%; border-radius: 50%; border: 2px solid rgba(214,52,44,0.5); box-shadow: 0 0 60px 10px rgba(214,52,44,0.16), inset 0 0 60px rgba(214,52,44,0.10); opacity: 0; transform: scale(.4); pointer-events: none; } .lp-hero.lp-scrub.has-video.is-exploded .lp-shock { animation: lpShock 1.2s var(--lp-ease) forwards; } .van-root { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(0,0,0) scale(var(--s)); } .van-tilt { position: absolute; transform-style: preserve-3d; transform: rotateX(calc(-15deg + var(--my) * 4deg)) rotateY(calc(-34deg + var(--mx) * 9deg)); transition: transform .9s cubic-bezier(.22,.61,.36,1); } .van-idle { position: absolute; transform-style: preserve-3d; animation: vanIdle 16s ease-in-out infinite alternate; } @keyframes vanIdle { from { transform: rotateY(-5deg); } to { transform: rotateY(6deg); } } .van { position: absolute; transform-style: preserve-3d; transform: translate3d(0,0,0); } .van .p { /* Bauteil */ position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; } .van .f { /* Flaeche */ position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; outline: 1px solid transparent; /* glaettet Kanten bei 3D-Transformationen */ } .van .f.two { backface-visibility: visible; -webkit-backface-visibility: visible; } .lp-stage * { pointer-events: none; } /* Karosserie-Flaechen mit Licht von oben/vorn */ .f-body { background: linear-gradient(180deg, #FBFAF7 0%, var(--van-body) 45%, var(--van-body-2) 100%); } .f-body.top { background: linear-gradient(90deg, #FFFFFF 0%, #F7F5F0 50%, #EEEBE4 100%); } .f-body.side { background: linear-gradient(180deg, #FDFCFA 0%, var(--van-body) 46%, var(--van-body-2) 100%); } .f-body.front { background: linear-gradient(180deg, #F3F1EC 0%, #E6E2DA 100%); } .f-body.rear { background: linear-gradient(180deg, #DDD9D0 0%, #CFCAC0 100%); } .f-body.far { background: linear-gradient(180deg, #E4E1DA 0%, #D3CFC6 100%); } .f-body.bottom{ background: #2B2F36; } /* roter Streifen + dunkler Stossfaenger auf den Seiten */ .f-side-lower { background: linear-gradient(180deg, transparent 0 46%, var(--van-stripe) 46% 66%, transparent 66% 84%, #2C3038 84% 100%), linear-gradient(180deg, #FDFCFA 0%, var(--van-body) 46%, var(--van-body-2) 100%); } .f-side-lower.far { background: linear-gradient(180deg, transparent 0 46%, #B4291F 46% 66%, transparent 66% 84%, #24272D 84% 100%), linear-gradient(180deg, #E4E1DA 0%, #D3CFC6 100%); } .f-side-lower.rear { background: linear-gradient(180deg, transparent 0 46%, #B4291F 46% 66%, transparent 66% 84%, #24272D 84% 100%), linear-gradient(180deg, #DDD9D0 0%, #CFCAC0 100%); } /* Front der Motorhaube: Kuehlergrill-Schlitz + dunkler Stossfaenger */ .f-hoodfront { background: linear-gradient(180deg, #F6F4EF 0 22%, #E8E4DC 22% 58%, #1D2127 58% 63%, #E2DED5 63% 84%, #2C3038 84% 100%); } /* Radkaesten: dunkle Halbkreise am unteren Rand der Seitenflaechen */ .f-side-lower.arch-rear { background: radial-gradient(circle at 26.4% 100%, #0D1218 0 41px, transparent 42px), linear-gradient(90deg, transparent 0 30.5%, #10151D 30.5% 69.5%, transparent 69.5%), linear-gradient(180deg, transparent 0 46%, var(--van-stripe) 46% 66%, transparent 66% 84%, #2C3038 84% 100%), linear-gradient(180deg, #FDFCFA 0%, var(--van-body) 46%, var(--van-body-2) 100%); } .f-side-lower.arch-rear.far { background: radial-gradient(circle at 73.6% 100%, #0D1218 0 41px, transparent 42px), linear-gradient(180deg, transparent 0 46%, #B4291F 46% 66%, transparent 66% 84%, #24272D 84% 100%), linear-gradient(180deg, #E4E1DA 0%, #D3CFC6 100%); } .f-side-lower.arch-front { background: radial-gradient(circle at 15% 100%, #0D1218 0 41px, transparent 42px), linear-gradient(180deg, transparent 0 46%, var(--van-stripe) 46% 66%, transparent 66% 84%, #2C3038 84% 100%), linear-gradient(180deg, #FDFCFA 0%, var(--van-body) 46%, var(--van-body-2) 100%); } .f-side-lower.arch-front.far { background: radial-gradient(circle at 85% 100%, #0D1218 0 41px, transparent 42px), linear-gradient(180deg, transparent 0 46%, #B4291F 46% 66%, transparent 66% 84%, #24272D 84% 100%), linear-gradient(180deg, #E4E1DA 0%, #D3CFC6 100%); } /* Tueroeffnung (dunkel) auf der Beifahrerseite hinter der Schiebetuer */ .f-side-lower.door-cut { background: linear-gradient(90deg, transparent 0 30.5%, #10151D 30.5% 69.5%, transparent 69.5%), linear-gradient(180deg, transparent 0 46%, var(--van-stripe) 46% 66%, transparent 66% 84%, #2C3038 84% 100%), linear-gradient(180deg, #FDFCFA 0%, var(--van-body) 46%, var(--van-body-2) 100%); } .f-glass { background: linear-gradient(115deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 28%, transparent 40%, rgba(255,255,255,0.12) 70%, transparent 80%), linear-gradient(180deg, var(--van-glass-2) 0%, var(--van-glass) 100%); border-top: 2px solid rgba(255,255,255,0.35); } .f-glass.pillar { background: linear-gradient(90deg, var(--van-glass) 0 8%, transparent 8% 46%, var(--van-glass) 46% 54%, transparent 54% 92%, var(--van-glass) 92%), linear-gradient(115deg, rgba(255,255,255,0.25), rgba(255,255,255,0.04) 30%, transparent 45%, rgba(255,255,255,0.1) 72%, transparent 82%), linear-gradient(180deg, var(--van-glass-2), var(--van-glass)); } .f-glass.door-cut { background: linear-gradient(90deg, var(--van-glass) 0 8%, transparent 8% 30.5%, #10151D 30.5% 69.5%, transparent 69.5% 92%, var(--van-glass) 92%), linear-gradient(115deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 28%, transparent 40%), linear-gradient(180deg, var(--van-glass-2), var(--van-glass)); } .f-roof { background: linear-gradient(90deg, #FFFFFF 0%, #F6F4EF 55%, #ECE9E2 100%); border-radius: 8px; } .f-tire { background: radial-gradient(circle at 50% 50%, var(--van-rim) 0 30%, #7C838D 30% 34%, var(--van-tire) 34% 100%); border-radius: 50%; } .f-tire::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: radial-gradient(circle, var(--van-stripe) 0 40%, #E9EBEF 41% 100%); } .f-tread { background: linear-gradient(90deg, #0F1115, #1E2126 50%, #0F1115); } .f-metal { background: linear-gradient(180deg, #C4C9D1, #8E96A2); } .f-lift { background: repeating-linear-gradient(135deg, #F5B800 0 8px, #15171C 8px 16px) 0 0 / 100% 7px no-repeat, linear-gradient(180deg, #B4BAC4 0%, #7E8792 100%); border-radius: 3px; } .f-lift.top { background: repeating-linear-gradient(135deg, #F5B800 0 8px, #15171C 8px 16px) 0 100% / 100% 7px no-repeat, linear-gradient(90deg, #D6DAE0, #A5ADB8); } .f-light { border-radius: 4px; background: radial-gradient(circle, #FFF6DC 0 40%, #FFD27A 70%, rgba(255,210,122,0.2)); box-shadow: 0 0 18px 6px rgba(255,220,150,0.55); } .f-light.rear { background: radial-gradient(circle, #FFB4AE 0 35%, #E23A31 70%, rgba(226,58,49,0.25)); box-shadow: 0 0 16px 5px rgba(226,58,49,0.5); } .f-chair { display: flex; align-items: center; justify-content: center; background: transparent; } .f-chair svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); } .f-seat { background: linear-gradient(180deg, #2A3D6E, #1B2A4E); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08); } .f-seat.red { background: linear-gradient(180deg, #E24A42, #B72620); } /* Boden: Schatten + Raster */ .van-shadow { position: absolute; width: 560px; height: 260px; left: -280px; top: -130px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 40%, transparent 70%); transform: translate3d(0, 6px, 0) rotateX(90deg) scale(calc(1 + var(--x) * .18)); opacity: calc(.95 - var(--x) * .35); filter: blur(6px); } .van-floor { position: absolute; width: 1500px; height: 1500px; left: -750px; top: -750px; transform: translate3d(0, 4px, 0) rotateX(90deg); background: repeating-linear-gradient(0deg, rgba(120,190,200,0.16) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, rgba(120,190,200,0.16) 0 1px, transparent 1px 60px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.5) 32%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.5) 32%, transparent 62%); } /* Bauteil-Chips: kleine Reihe unten rechts im Hero (unter dem Fahrzeug), nebeneinander. Erscheinen gestaffelt, sobald die Explosion durch ist – und nur bei laufendem, scrollgebundenem Video. */ .lp-lbl-row { position: absolute; left: 50%; right: 28px; bottom: 22px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px; pointer-events: none; } .lp-lbl { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(15,21,32,0.8); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(6px); color: #fff; line-height: 1.2; letter-spacing: 0.005em; white-space: nowrap; box-shadow: 0 6px 16px rgba(17,24,39,0.16); opacity: 0; transform: translate3d(0, 14px, 0) scale(.92); filter: blur(5px); transition: opacity .22s var(--lp-ease), transform .22s var(--lp-ease), filter .22s var(--lp-ease); } .lp-lbl .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--lp-red); box-shadow: 0 0 0 3px rgba(214,52,44,0.28); } .lp-lbl b { display: block; font-size: 0.7rem; font-weight: 700; } .lp-lbl small { display: block; font-weight: 400; color: rgba(255,255,255,0.72); font-size: 0.6rem; } .lp-hero.lp-scrub.has-video.is-exploded .lp-lbl { opacity: 1; transform: none; filter: blur(0); transition-duration: .55s; transition-delay: calc(var(--i, 0) * 80ms); } /* ── 2. USP-BAND ───────────────────────────────────────────── */ .lp-usp { background: #fff; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); } .lp-usp .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 26px; padding-bottom: 26px; } .lp-usp-item { display: flex; align-items: center; gap: 14px; } .lp-usp-item .ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: #fff; border: 1px solid var(--lp-line); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(17,24,39,0.06); } .lp-usp-item strong { display: block; font-family: 'Bricolage Grotesque'; font-size: 1.02rem; line-height: 1.2; } .lp-usp-item span { font-size: 0.86rem; color: var(--ink-soft); } /* ── 3. FRAGE → ANTWORT (Problemzonen) ─────────────────────── */ .lp-qa { background: #fff; } .lp-qa .sec-head p { margin-top: 6px; } .lp-qa-list { display: grid; gap: 22px; max-width: 980px; } .qa { display: grid; grid-template-columns: 1fr; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: #fff; box-shadow: 0 10px 30px rgba(17,24,39,0.05); overflow: hidden; } .qa-q { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 26px 28px 20px; background: linear-gradient(180deg, #FBFAF7, #F6F4EF); border-bottom: 1px solid var(--lp-line); } .qa-q .mark { width: 52px; height: 52px; border-radius: 16px; background: var(--lp-ink); color: #fff; font-family: 'Bricolage Grotesque'; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(17,24,39,0.22); } .qa-q h3 { font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.22; letter-spacing: -0.015em; padding-top: 8px; } .qa-q .who { display: block; font-family: 'Inter'; font-size: 0.78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-red); margin-bottom: 6px; } .qa-a { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 28px 26px; } .qa-a .mark { width: 52px; height: 52px; border-radius: 16px; background: #E9F7EF; display: flex; align-items: center; justify-content: center; } .qa-a .who { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #1f8b4c; margin-bottom: 6px; } .qa-a p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; } .qa-a p + p { margin-top: 10px; } .qa-a ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .qa-a li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 0.98rem; } .qa-a li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; flex-shrink: 0; border-radius: 50%; background: var(--lp-petrol); } .qa-a .qa-cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--lp-red); font-weight: 700; font-size: 0.95rem; } .qa-a .qa-cta:hover { text-decoration: underline; } .qa-a a:not(.qa-cta) { color: var(--lp-petrol); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } /* Kurz-gesagt-Kapsel (Antwort auf einen Blick, KI-/Snippet-freundlich) – gleiche helle Glas-Optik wie .kurz-box */ .lp-kurz { position: relative; overflow: hidden; max-width: 980px; margin: -14px 0 26px; padding: 26px 30px 22px; border-radius: var(--lp-radius); background: linear-gradient(135deg, #FFFFFF 0%, #F8F6F1 100%); color: var(--ink); border: 1px solid rgba(17,24,39,0.08); box-shadow: 0 24px 60px rgba(17,24,39,0.10), 0 2px 6px rgba(17,24,39,0.04); } .lp-kurz::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--lp-red) 0%, #F08C4B 45%, var(--lp-petrol) 100%); } .lp-kurz h3 { font-size: 0.84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-red); font-family: 'Inter'; font-weight: 700; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } .lp-kurz h3::before { content: ""; width: 22px; height: 2px; background: var(--lp-red); } .lp-kurz > p { font-size: 1.18rem; line-height: 1.65; color: var(--ink); } .lp-fakten { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; } .lp-fakten li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.06rem; line-height: 1.55; color: var(--ink); } .lp-fakten li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #E9F7EF url("data:image/svg+xml;utf8,") center/13px no-repeat; } .lp-kurz > p.lp-stand { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); } @media (max-width: 760px) { .lp-kurz { padding: 20px 18px 18px; margin-top: -6px; } .lp-kurz > p { font-size: 1.08rem; } .lp-fakten li { font-size: 1.02rem; } } /* ── 4. BILD + TEXT (Fahrzeug / Sicherheit) ───────────────── */ .lp-split { background: var(--lp-sand); } .lp-split .imgrow { align-items: center; } .lp-split .imgslot { border-radius: var(--lp-radius); overflow: hidden; } .lp-spec { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 22px 0; } .lp-spec > div { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; } .lp-spec > div > div { flex: 1; min-width: 0; } .lp-spec svg { flex-shrink: 0; margin-top: 2px; } .lp-spec strong { display: block; font-size: 0.95rem; } .lp-spec span { font-size: 0.85rem; color: var(--ink-soft); } /* ── 5. KOSTENTRAEGER ──────────────────────────────────────── */ .lp-kt { background: #fff; } .lp-kt-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .kt { border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 26px 24px; background: linear-gradient(180deg, #fff, #FBFAF7); display: flex; flex-direction: column; gap: 10px; transition: transform .25s var(--lp-ease), box-shadow .25s; } .kt:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,24,39,0.09); } .kt .kt-tag { display: inline-flex; align-self: flex-start; font-size: 0.74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-petrol); background: #E7F1F2; padding: 6px 10px; border-radius: 999px; } .kt h3 { font-size: 1.22rem; } .kt p { color: var(--ink-soft); font-size: 0.97rem; } .kt ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; } .kt li { font-size: 0.93rem; display: flex; gap: 9px; } .kt li::before { content: "✓"; color: #1f8b4c; font-weight: 800; } .kt.hl { border-color: rgba(214,52,44,0.35); box-shadow: 0 14px 34px rgba(214,52,44,0.10); } .lp-kt-note { margin-top: 18px; font-size: 0.88rem; color: var(--ink-soft); max-width: 820px; } /* ── 6. BEWEISE / ZAHLEN ───────────────────────────────────── */ .lp-proof { background: var(--lp-ink); color: #fff; position: relative; overflow: hidden; } .lp-proof::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 15% 20%, rgba(46,124,134,0.35), transparent 60%), radial-gradient(700px 400px at 90% 90%, rgba(214,52,44,0.25), transparent 60%); } .lp-proof .wrap { position: relative; } .lp-proof .sec-head h2, .lp-proof .sec-head p { color: #fff; } .lp-proof .sec-head p { color: rgba(255,255,255,0.8); } .lp-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .pf { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 24px 22px; backdrop-filter: blur(6px); } .pf .big { font-family: 'Bricolage Grotesque'; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; } .pf p { color: rgba(255,255,255,0.8); font-size: 0.93rem; } .lp-proof .btn-white { background: #fff; color: var(--ink); } /* Ablauf-Schritte: bestehende .steps/.stepc aus stil.css nutzen */ .lp-steps { background: var(--lp-sand); } /* Bezirke-Leiste */ .lp-bez { padding: 22px 0 0; } .lp-bez-list { display: flex; flex-wrap: wrap; gap: 8px; } .lp-bez-list a { font-size: 0.85rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--lp-line); background: #fff; color: var(--ink-soft); transition: border-color .2s, color .2s; } .lp-bez-list a:hover { border-color: var(--lp-petrol); color: var(--lp-petrol); } /* Related */ .lp-related .rgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } /* ── 7. STICKY SEITEN-TAB (Desktop) ────────────────────────── */ .lp-tab { position: fixed; left: 0; top: 50%; z-index: 95; transform: translate(0,-50%) rotate(180deg); writing-mode: vertical-rl; background: var(--lp-red); color: #fff; border: none; border-radius: 0 12px 12px 0; padding: 18px 12px 18px 14px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; cursor: pointer; box-shadow: 4px 0 18px rgba(214,52,44,0.35); transition: transform .3s var(--lp-ease), background .2s, opacity .3s; display: inline-flex; align-items: center; gap: 10px; } .lp-tab:hover { background: var(--lp-red-2); transform: translate(3px,-50%) rotate(180deg); } .lp-tab svg { transform: rotate(90deg); } .lp.drawer-open .lp-tab { opacity: 0; pointer-events: none; } /* ── 8. ANFRAGE-DRAWER (von links) ─────────────────────────── */ .lp-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(10,14,22,0.55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; } .lp.drawer-open .lp-scrim { opacity: 1; pointer-events: auto; } .lp-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 310; width: min(540px, 100%); background: #fff; color: var(--ink); box-shadow: 30px 0 80px rgba(0,0,0,0.35); transform: translate3d(-104%, 0, 0); visibility: hidden; /* geschlossen: nicht per Tab erreichbar */ transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear .34s; display: flex; flex-direction: column; overflow: hidden; border-right: 4px solid var(--lp-red); } .lp.drawer-open .lp-drawer { transform: none; visibility: visible; transition-delay: 0s; } /* Lichtblitz ueber das Panel beim Oeffnen */ .lp-drawer::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.95) 45%, rgba(255,214,210,0.9) 50%, transparent 75%); transform: translateX(-120%); opacity: 0; } .lp.drawer-open .lp-drawer::before { animation: lpFlash .7s var(--lp-ease) .04s both; } .lp.drawer-open .lpd-head { animation: lpBlurUp .5s var(--lp-ease) both .05s; } .lp.drawer-open .lpd-head h2 { animation: lpBoom .6s var(--lp-ease) both .08s; } .lp.drawer-open .lpd-body > * { animation: lpBlurUp .55s var(--lp-ease) both; } .lp.drawer-open .lpd-body > :nth-child(1) { animation-delay: .10s; } .lp.drawer-open .lpd-body > :nth-child(2) { animation-delay: .16s; } .lp.drawer-open .lpd-body > :nth-child(3) { animation-delay: .22s; } .lp.drawer-open .lpf fieldset { animation: lpBlurUp .55s var(--lp-ease) both; } .lp.drawer-open .lpf fieldset:nth-of-type(1) { animation-delay: .18s; } .lp.drawer-open .lpf fieldset:nth-of-type(2) { animation-delay: .26s; } .lp.drawer-open .lpf fieldset:nth-of-type(3) { animation-delay: .34s; } .lpd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 18px; background: linear-gradient(180deg, #0F1520, #172033); color: #fff; flex-shrink: 0; } .lpd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFB4AE; margin-bottom: 8px; } .lpd-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #37D67A; box-shadow: 0 0 0 4px rgba(55,214,122,0.25); } .lpd-head h2 { font-size: 1.5rem; color: #fff; letter-spacing: -0.02em; } .lpd-head p { font-size: 0.9rem; color: rgba(255,255,255,0.75); margin-top: 6px; } .lpd-close { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; } .lpd-close:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); } .lpd-body { overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 40px; flex: 1; -webkit-overflow-scrolling: touch; } .lpd-steps { display: flex; gap: 6px; margin-bottom: 18px; } .lpd-steps span { flex: 1; height: 5px; border-radius: 999px; background: #E9E6DF; transition: background .3s; } .lpd-steps span.on { background: var(--lp-red); } .lpf fieldset { border: none; padding: 0; margin: 0 0 22px; min-width: 0; } .lpf legend { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 1.08rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .lpf legend .n { width: 26px; height: 26px; border-radius: 8px; background: var(--lp-ink); color: #fff; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter'; } .lpf label.lbl, .lpf .lbl { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 7px; } .lpf .lbl .opt { color: var(--ink-soft); font-weight: 400; font-size: 0.82rem; } .lpf input[type="text"], .lpf input[type="tel"], .lpf input[type="email"], .lpf input[type="date"], .lpf input[type="time"], .lpf input[type="number"], .lpf select, .lpf textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid #C9C4B9; border-radius: 12px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .lpf select { background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center; padding-right: 40px; } .lpf textarea { min-height: 96px; resize: vertical; } .lpf input:focus, .lpf select:focus, .lpf textarea:focus { outline: none; border-color: #111; box-shadow: 0 0 0 4px rgba(17,24,39,0.10); } .lpf .is-invalid { border-color: var(--lp-red) !important; box-shadow: 0 0 0 4px rgba(214,52,44,0.14) !important; } .lpf .fg { margin-bottom: 14px; } .lpf .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lpf .hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 6px; } .lpc-row { display: flex; flex-wrap: wrap; gap: 8px; } .lpc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1.5px solid #CFCAC0; border-radius: 999px; background: #fff; font: inherit; font-size: 0.93rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .18s, background .18s, transform .18s, box-shadow .18s; touch-action: manipulation; } .lpc::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #E2DED5; box-shadow: inset 0 0 0 2px #C9C4B9; flex-shrink: 0; transition: background .18s, box-shadow .18s; } .lpc:hover { border-color: #111; transform: translateY(-1px); } .lpc[aria-pressed="true"], .lpc.sel { border-color: var(--lp-red); background: #FFF3F2; color: var(--lp-red-2); box-shadow: 0 6px 16px rgba(214,52,44,0.16); } .lpc[aria-pressed="true"]::before, .lpc.sel::before { background: var(--lp-red); box-shadow: inset 0 0 0 3px rgba(214,52,44,0.25); } .lpc-days .lpc { min-width: 48px; justify-content: center; padding: 10px 12px; } .lpc-days .lpc::before { display: none; } .lp-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid #CFCAC0; border-radius: 14px; padding: 8px 8px 8px 14px; background: #fff; } .lp-stepper .nm { font-weight: 600; font-size: 0.93rem; } .lp-stepper .ctl { display: inline-flex; align-items: center; gap: 6px; } .lp-stepper button { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--lp-ink); color: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; } .lp-stepper button:hover { background: #000; } .lp-stepper output { min-width: 26px; text-align: center; font-weight: 800; } .lp-steppers { display: grid; gap: 10px; } .lpf .check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); margin: 4px 0 18px; } .lpf .check input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--lp-red); } .lpf .check a { color: var(--lp-petrol); font-weight: 600; text-decoration: underline; } .lpf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .lpf-error { display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #FFF1F0; border: 1.5px solid rgba(214,52,44,0.45); color: #8E1B14; font-weight: 600; font-size: 0.93rem; } .lpf-error.show { display: block; } .lpf-submit { width: 100%; min-height: 58px; font-size: 1.05rem; font-weight: 800; } .lpf-submit[disabled] { opacity: .6; cursor: progress; } .lpf-note { margin-top: 12px; font-size: 0.83rem; color: var(--ink-soft); text-align: center; line-height: 1.5; } .lpf-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lp-line); display: flex; gap: 10px; flex-wrap: wrap; } .lpf-alt .btn { flex: 1; min-height: 48px; font-size: 0.92rem; } .lpd-success { display: none; padding: 40px 28px; text-align: center; } .lpd-success.show { display: block; } .lpd-success .ok { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: #E9F7EF; display: flex; align-items: center; justify-content: center; animation: lpPop .6s var(--lp-ease); } @keyframes lpPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .lpd-success h3 { font-size: 1.5rem; margin-bottom: 10px; } .lpd-success p { color: var(--ink-soft); } .lpd-success .btn { margin-top: 20px; } /* Mobile-Leiste mit drittem Knopf (Anfragen) */ .lp .mobile-bar .lp-mbar-form { background: var(--lp-ink); color: #fff; } /* Kein Body-Scroll bei offenem Drawer */ .lp.drawer-open { overflow: hidden; } /* ── 9. RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 1100px) { .lp-proof-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .lp-related .rgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 1000px) { .lp-hero { height: auto; min-height: 0; } .lp-hero-pin { position: relative; height: auto; min-height: 0; padding: 54px 0 34px; display: block; } .lp-hero .wrap { grid-template-columns: 1fr; gap: 10px; } .lp-hero-copy { max-width: 100%; padding-top: 0; --back: 0; } .lp-hero-pin { padding-bottom: 0; } .lp-stage { height: clamp(250px, 66vw, 430px); margin-top: 6px; perspective: 1200px; } .lp-vidbox { right: auto; left: 50%; top: auto; bottom: -3%; height: auto; width: 112%; transform: translate3d(-50%, 0, 0) scale(calc(1 + var(--x, 0) * .05)); transform-origin: 50% 70%; } .lp-video { -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 54%, #000 50%, rgba(0,0,0,0.5) 76%, transparent 97%); mask-image: radial-gradient(ellipse 52% 54% at 50% 54%, #000 50%, rgba(0,0,0,0.5) 76%, transparent 97%); } .lp-vidfade { background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 46%, rgba(255,255,255,0.25) 62%, rgba(255,255,255,0) 72%, rgba(241,237,229,0) 90%, #F1EDE5 100%); } .lp-spot { display: none; } .lp-stage .van-root { top: 64%; } .lp-tab { display: none; } .lp-usp .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); } .lp-kt-grid { grid-template-columns: 1fr; } .lp-scrollhint { display: none; } } @media (max-width: 760px) { .lp-hero-pin { padding: 40px 0 26px; } .lp-hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); } .lp-hero-ctas .btn, .lp-boom { width: 100%; } .lp-hero-trust { gap: 8px 16px; font-size: 0.86rem; } .lp-usp .wrap { grid-template-columns: 1fr; gap: 12px; } .qa-q, .qa-a { grid-template-columns: 40px 1fr; gap: 12px; padding-left: 18px; padding-right: 18px; } .qa-q .mark, .qa-a .mark { width: 40px; height: 40px; border-radius: 12px; font-size: 1.25rem; } .qa-q h3 { padding-top: 4px; } .lp-spec { grid-template-columns: 1fr; } .lp-proof-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pf { padding: 18px 16px; } .lp-related .rgrid { grid-template-columns: 1fr; } .lpd-head { padding: 18px 20px 14px; } .lpd-kicker { font-size: 0.68rem; letter-spacing: .1em; } .lpd-head h2 { font-size: 1.3rem; } .lpd-body { padding: 18px 20px 120px; } .lpf .row2 { grid-template-columns: 1fr; } .lp-lbl-row { display: none; } } @media (max-width: 480px) { .lp-proof-grid { grid-template-columns: 1fr; } } /* Sehr flache Desktop-Fenster: nicht pinnen (sonst zu wenig Platz) */ @media (min-width: 1001px) and (max-height: 620px) { .lp-hero { height: auto; min-height: 0; } .lp-hero-pin { position: relative; height: auto; min-height: 0; padding: 60px 0 40px; } } /* ── 10. REDUCED MOTION ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lp:not(.force-motion) .lp-hero { height: auto; min-height: 0; } .lp:not(.force-motion) .lp-hero-pin { position: relative; height: auto; min-height: 0; padding: 70px 0 50px; } .lp:not(.force-motion) .van-idle { animation: none; } .lp:not(.force-motion) .lp-video { animation: none; } .lp:not(.force-motion) .lp-dust, .lp:not(.force-motion) .lp-scrollhint { display: none; } .lp:not(.force-motion) .lp-stage, .lp:not(.force-motion) .lp-hero { --x: 0 !important; --lbl: 0 !important; --mx: 0 !important; --my: 0 !important; --tp: 1 !important; } .lp:not(.force-motion) .lp-lbl-row, .lp:not(.force-motion) .lp-shock { display: none; } .lp:not(.force-motion) .lp-shock { display: none; } .lp:not(.force-motion) .lp-hero-copy, .lp:not(.force-motion) .lp-boom, .lp:not(.force-motion) .lp-hero .eyebrow, .lp:not(.force-motion) .lp-hero .lead, .lp:not(.force-motion) .lp-hero-phones, .lp:not(.force-motion) .lp-hero-trust span { opacity: 1; transform: none; filter: none; } .lp:not(.force-motion) .lp-drawer, .lp:not(.force-motion) .lp-scrim, .lp:not(.force-motion) .van-tilt { transition: none; } } /* Drucken: Drawer/Buehne ausblenden */ @media print { .lp-drawer, .lp-scrim, .lp-tab, .lp-dust, .lp-spot, .lp-vidwrap { display: none !important; } .lp-hero { height: auto; color: #000; background: #fff; } } /* ── 11. MOTION: KEYFRAMES ─────────────────────────────────── */ @keyframes lpBlurUp { from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes lpCard { from { opacity: 0; transform: translate3d(0, 44px, 0) scale(.965); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes lpBoom { 0% { opacity: 0; transform: scale(1.16) translate3d(0, 14px, 0); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); transform: scale(.992) translate3d(0, 0, 0); } 100% { opacity: 1; transform: none; filter: blur(0); } } @keyframes lpShock { 0% { opacity: .9; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.55); } } @keyframes lpFlash { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } } @keyframes lpPar { from { transform: translate3d(0, -7%, 0) scale(1.14); } to { transform: translate3d(0, 7%, 0) scale(1.14); } } @keyframes lpLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes lpBandSweep { from { transform: translateX(-60%) skewX(-12deg); } to { transform: translateX(160%) skewX(-12deg); } } /* Fortschrittsbalken oben (transform statt width) */ .lp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 305; background: linear-gradient(90deg, var(--lp-red), #F08C4B); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; } /* ── 12. SCROLLGEBUNDENE REVEALS ─────────────────────────────── Browser mit CSS-Scroll-Timelines (Chrome/Edge/Safari): body.sd – die Animation ist an die Position im Viewport gebunden (rueckwaerts scrollen = zurueckspulen). Ohne Unterstuetzung: IntersectionObserver (.js-anim .reveal.in) spielt dieselben Keyframes einmalig ab. */ @supports (animation-timeline: view()) { .lp.sd .reveal { opacity: 1; transform: none; /* Basiszustand sichtbar (ueberschreibt stil.css) */ animation: lpBlurUp 1s var(--lp-ease) both; animation-timeline: view(); animation-range: entry 0% entry 42%; } .lp.sd .qa.reveal, .lp.sd .kt.reveal, .lp.sd .pf.reveal, .lp.sd .fcard.reveal, .lp.sd .rcard.reveal, .lp.sd .stepc.reveal, .lp.sd .lp-usp-item.reveal { animation-name: lpCard; } /* Staffelung ueber verschobene Bereiche (Geschwister) */ .lp.sd .lp-usp .lp-usp-item:nth-child(2), .lp.sd .lp-kt-grid .kt:nth-child(2), .lp.sd .lp-proof-grid .pf:nth-child(2), .lp.sd .steps .stepc:nth-child(2), .lp.sd .rgrid .rcard:nth-child(2) { animation-range: entry 8% entry 50%; } .lp.sd .lp-usp .lp-usp-item:nth-child(3), .lp.sd .lp-kt-grid .kt:nth-child(3), .lp.sd .lp-proof-grid .pf:nth-child(3), .lp.sd .steps .stepc:nth-child(3), .lp.sd .rgrid .rcard:nth-child(3) { animation-range: entry 16% entry 58%; } .lp.sd .lp-usp .lp-usp-item:nth-child(4), .lp.sd .lp-proof-grid .pf:nth-child(4), .lp.sd .rgrid .rcard:nth-child(4) { animation-range: entry 24% entry 66%; } /* Ueberschriften: Boom */ .lp.sd .sec-head h2, .lp.sd .qa-q h3, .lp.sd .kt h3, .lp.sd .stepc h3, .lp.sd .pf .big, .lp.sd .ctaband h2, .lp.sd .imgrow-txt h2 { animation: lpBoom .9s var(--lp-ease) both; animation-timeline: view(); animation-range: entry 0% entry 34%; } .lp.sd .sec-head .eyebrow, .lp.sd .imgrow-txt .eyebrow { animation: lpBlurUp .8s var(--lp-ease) both; animation-timeline: view(); animation-range: entry 0% entry 30%; } .lp.sd .sec-head p, .lp.sd .qa-a, .lp.sd .kt p, .lp.sd .kt ul, .lp.sd .stepc p, .lp.sd .pf p, .lp.sd .imgrow-txt p, .lp.sd .lp-spec, .lp.sd .faq-item, .lp.sd .lp-kt-note, .lp.sd .lp-bez-list, .lp.sd .ctaband p, .lp.sd .ctaband .cb-actions { animation: lpBlurUp .9s var(--lp-ease) both; animation-timeline: view(); animation-range: entry 6% entry 48%; } .lp.sd .faq-item:nth-child(even) { animation-range: entry 14% entry 56%; } /* Bild-Parallax in der Fahrzeug-Sektion */ .lp.sd .lp-split .imgslot img { animation: lpPar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .lp.sd .lp-split .imgslot { overflow: hidden; } /* Fortschrittsbalken haengt an der Seitenscroll-Achse */ .lp.sd .lp-progress { animation: lpLine linear both; animation-timeline: scroll(root); } } /* Fallback ohne Scroll-Timelines: dieselben Keyframes einmalig per IntersectionObserver */ .lp.js-anim:not(.sd) .reveal { opacity: 0; transform: none; transition: none; } .lp.js-anim:not(.sd) .reveal.in { opacity: 1; animation: lpBlurUp .9s var(--lp-ease) both; } .lp.js-anim:not(.sd) .qa.reveal.in, .lp.js-anim:not(.sd) .kt.reveal.in, .lp.js-anim:not(.sd) .pf.reveal.in, .lp.js-anim:not(.sd) .stepc.reveal.in, .lp.js-anim:not(.sd) .rcard.reveal.in, .lp.js-anim:not(.sd) .lp-usp-item.reveal.in { animation-name: lpCard; } .lp.js-anim:not(.sd) .reveal.in h2, .lp.js-anim:not(.sd) .reveal.in h3, .lp.js-anim:not(.sd) .reveal.in .big { animation: lpBoom .8s var(--lp-ease) both .05s; } .lp.js-anim:not(.sd) .reveal.in p, .lp.js-anim:not(.sd) .reveal.in ul { animation: lpBlurUp .8s var(--lp-ease) both .12s; } .lp.js-anim:not(.sd) .reveal { animation-delay: var(--rd, 0ms); } /* CTA-Band: Lichtstreifen laeuft einmal durch, sobald sichtbar */ .lp .ctaband::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-60%) skewX(-12deg); pointer-events: none; } .lp .ctaband.in::after, .lp.sd .ctaband::after { animation: lpBandSweep 1.6s var(--lp-ease) .2s both; } .lp.sd .ctaband::after { animation-timeline: view(); animation-range: entry 20% cover 60%; animation-duration: auto; } /* Nav-Schatten sobald gescrollt (Klasse setzt landing.js) */ .lp .nav.scrolled { box-shadow: 0 10px 30px rgba(17,24,39,0.10); } /* Reduced motion fuer die Motion-Schicht: keine Bewegung, alles sichtbar */ @media (prefers-reduced-motion: reduce) { .lp:not(.force-motion) .reveal, .lp:not(.force-motion) .lp-hero h1 .wi { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } .lp:not(.force-motion) .lp-video { animation: none; opacity: 1; filter: none; } .lp:not(.force-motion) .lp-progress { display: none; } } /* Kostentraeger-Tabelle (Stil in stil.css); Abstand in der LP */ .lp .kt-tabelle-wrap { margin-top: 22px; }