/* ============================================================ LAP FACTOR — Coming Soon Ein Screen. Video als Bühne. Formular als Overlay. Farbtragende Werte ausschließlich über Tokens. ============================================================ */ :root{ --ink:#050607; --ink-2:#0a0c0e; --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.06); --hairline:rgba(255,255,255,.09); --hairline-strong:rgba(255,255,255,.17); --text:#f4f6f8; --text-2:#aeb7c0; --muted:#727b85; /* Akzent — Lime aus der LF-Formula-Livery */ --accent:#d4f14b; --accent-ink:#e6fa8b; --accent-dim:rgba(212,241,75,.14); --accent-glow:rgba(212,241,75,.32); --danger:#ff6b72; /* Cookie-Banner — helle Flaeche gegen die dunkle Seite, damit er nicht als weiterer Inhaltsblock durchgeht. Der Grundton ist deutlich gedaempft (71,5 % gegen 96,4 % beim CTA-Knopf #f4f6f8): der Hinweis soll auffallen, aber weder die Handlungsaufforderung ueberstrahlen noch als weisser Kasten das dunkle Bild zerschneiden. Dunkler geht nicht: bei 63 % faellt der Fliesstext auf Kontrast 4,48 und damit unter WCAG AA. Text- und Linkton sind auf diesen Grund abgestimmt und nachgemessen — Text 6,45 · Fettung 9,47 · Link 5,48. Wer --consent-bg aendert, muss die drei erneut pruefen. */ --consent-bg:#aeb8c0; --consent-text:#2b3238; --consent-strong:#0c1014; --consent-link:#2f4200; --radius-xs:6px; --radius-sm:9px; --radius-md:12px; --radius-lg:16px; --radius:22px; --radius-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:36px; --sp-7:56px; --font-sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Inter Tight","Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --maxw:1280px; --pad:clamp(22px, 5vw, 76px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100svh; background:var(--ink); color:var(--text); font-family:var(--font-sans); font-size:16px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.locked{overflow:hidden} ::selection{background:var(--accent);color:#0a0d02} a{color:inherit} img,video{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* ============================================================ BÜHNE — Video, Weichzeichnung, Abdunkelung, Korn Die Quelle ist 1072×528. Weichheit ist hier Absicht: Blur + Korn + Vignette machen daraus einen Look statt eines Mangels. ============================================================ */ .stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)} .stage-video{ position:absolute; top:50%;left:50%; width:104%;height:104%; transform:translate(-50%,-50%) scale(1.06); object-fit:cover; opacity:0; filter:saturate(.78) contrast(1.05) brightness(.78) blur(1.3px); animation:stageIn 2.6s var(--ease-out) .25s forwards, stageDrift 46s ease-in-out 2s infinite alternate; will-change:transform,opacity; } @keyframes stageIn{ from{opacity:0} to{opacity:1} } /* sehr langsamer Ken-Burns — gibt dem Standbild-Charakter Bewegung */ @keyframes stageDrift{ from{transform:translate(-50%,-50%) scale(1.06)} to {transform:translate(-51.5%,-50.8%) scale(1.14)} } /* Ränder weichzeichnen: scharf in der Mitte, weich nach außen */ .stage-soft{ position:absolute;inset:0; backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); -webkit-mask-image:radial-gradient(130% 116% at 50% 46%, transparent 46%, #000 96%); mask-image:radial-gradient(130% 116% at 50% 46%, transparent 46%, #000 96%); pointer-events:none; } /* Abdunkelung + Vignette. Links dunkler, damit die Typo trägt. */ .stage-scrim{ position:absolute;inset:0;pointer-events:none; background: /* nur noch eine leise Leseflaeche links — die Typo trägt über Schatten */ radial-gradient(66% 78% at 18% 52%, rgba(5,6,7,.52) 0%, rgba(5,6,7,.26) 48%, transparent 80%), linear-gradient(90deg, rgba(5,6,7,.34) 0%, rgba(5,6,7,.16) 32%, rgba(5,6,7,.04) 64%, transparent 100%), linear-gradient(180deg, rgba(5,6,7,.58) 0%, rgba(5,6,7,.08) 22%, rgba(5,6,7,.24) 52%, rgba(5,6,7,.62) 78%, rgba(5,6,7,.94) 100%), radial-gradient(130% 110% at 46% 44%, transparent 44%, rgba(5,6,7,.56) 100%); } .stage-grain{ position:absolute;inset:-60%;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); opacity:.06;mix-blend-mode:overlay; animation:grainShift 7s steps(6) infinite; } @keyframes stageDriftM{ from{transform:translateX(-50%) scale(1)} to {transform:translateX(-51%) scale(1.12)} } @keyframes grainShift{ 0%{transform:translate(0,0)} 16%{transform:translate(-2%,1.5%)} 33%{transform:translate(1.5%,-2%)} 50%{transform:translate(-1.5%,-1.5%)} 66%{transform:translate(2%,1%)} 83%{transform:translate(-1%,2%)} 100%{transform:translate(0,0)} } @media (prefers-reduced-motion:reduce){ .stage-video{animation:stageIn .6s linear forwards;filter:saturate(.78) contrast(1.05) brightness(.78) blur(1.3px)} .stage-grain{animation:none} } /* ============================================================ DATENSCHICHT — „Make Performance Visible", woertlich Ein Zyklus von 21 s erzaehlt die Wertschoepfung: 0.0–11.0 s Lime-Kante wandert langsam durch, zieht ein Messraster 5.4– 8.5 s Messwerte fahren auf und bleiben stehen 7.2–12.2 s Datenpanel blendet ein, Speed-Trace zeichnet sich 12.6–18.0 s Fahrerkarte materialisiert und haelt 18.0–21.0 s Ruhe, dann naechster Fahrer Gesteuert von app.js (setzt nur Klassen), animiert wird hier. ============================================================ */ .scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2} .scan-sweep{ position:absolute;top:-2%;bottom:-2%;left:0; width:36vw; transform:translate3d(-40vw,0,0); opacity:0;will-change:transform; } .scan-sweep.run{animation:scanSweep 11s cubic-bezier(.36,0,.5,1) forwards} @keyframes scanSweep{ 0% {transform:translate3d(-40vw,0,0);opacity:0} 8% {opacity:1} 84% {opacity:1} 100% {transform:translate3d(78vw,0,0);opacity:0} } /* Messraster im Schleppbereich */ .scan-band{ position:absolute;inset:0;display:block; background-image: repeating-linear-gradient(90deg, rgba(212,241,75,.30) 0 1px, transparent 1px 30px), repeating-linear-gradient(0deg, rgba(212,241,75,.15) 0 1px, transparent 1px 30px); backdrop-filter:brightness(1.08) saturate(.55) contrast(1.05); -webkit-backdrop-filter:brightness(1.08) saturate(.55) contrast(1.05); -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.66) 76%, #000 88%, rgba(0,0,0,.45) 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.66) 76%, #000 88%, rgba(0,0,0,.45) 94%, transparent 100%); } .scan-edge{ position:absolute;left:88%;top:0;bottom:0;display:block;width:1.5px; background:linear-gradient(180deg, transparent 0%, var(--accent) 16%, var(--accent) 84%, transparent 100%); box-shadow:0 0 20px 2px var(--accent-glow); opacity:.8; } /* ── Messwerte ──────────────────────────────────────────── */ .scan-pts{position:absolute;inset:0} .scan-pt{ position:absolute;left:var(--x);top:var(--y); display:flex;align-items:center; opacity:0;transform:scale(.74); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } .scan-pt.on{opacity:1;transform:scale(1)} .scan-pt .ret{ position:relative;width:26px;height:26px;flex:none;border-radius:50%; border:1.5px solid rgba(212,241,75,.85); box-shadow:0 0 16px rgba(212,241,75,.28), inset 0 0 12px rgba(212,241,75,.14); } .scan-pt .ret::before{ content:"";position:absolute;inset:50% auto auto 50%; width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--accent); } .scan-pt .ret::after{ content:"";position:absolute;left:100%;top:50%; width:26px;height:1px;background:linear-gradient(90deg, rgba(212,241,75,.8), rgba(212,241,75,.25)); } .scan-pt em{ margin-left:36px;font-style:normal;font-family:var(--font-mono); font-size:11.5px;font-weight:500;letter-spacing:.05em;color:#fff;white-space:nowrap; padding:6px 11px;border-radius:var(--radius-xs); background:rgba(5,6,7,.66);border:1px solid rgba(212,241,75,.28); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.5); } .scan-pt em i{font-style:normal;color:var(--muted);margin-right:9px;font-size:10px;letter-spacing:.12em} .scan-pt em span{color:var(--accent);margin-left:4px;font-size:10px;letter-spacing:.1em} /* ── Datenpanel mit Speed-Trace ─────────────────────────── */ .hud{ position:absolute;z-index:3; left:54%;bottom:13%;width:min(30vw,430px);margin:0; padding:13px 15px 11px; background:rgba(5,6,7,.5); border:1px solid rgba(212,241,75,.2); border-radius:var(--radius-md); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.5); opacity:0;transform:translateY(10px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); pointer-events:none; } .hud.on{opacity:1;transform:none} .hud-head{display:flex;align-items:baseline;gap:12px;margin-bottom:9px} .hud-title{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .hud-lap{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.05em} .hud-plot{display:block;width:100%;height:clamp(64px,6.4vw,92px)} .hud-grid path{stroke:rgba(255,255,255,.09);stroke-width:1;fill:none} .hud-line{ fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 5px var(--accent-glow)); stroke-dasharray:740;stroke-dashoffset:740; } .hud.on .hud-line{animation:hudDraw 4s cubic-bezier(.33,0,.2,1) .35s forwards} @keyframes hudDraw{to{stroke-dashoffset:0}} .hud-foot{ display:flex;gap:16px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08); font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted); } .hud-foot b{color:var(--text-2);font-weight:500;margin-left:4px} /* ── Fahrerkarte ────────────────────────────────────────── */ /* Der Container liegt im Hero-Markup (nach dem CTA), wird hier aber aus dem Fluss genommen und ueber die volle Buehne gelegt — optisch identisch zur frueheren Platzierung innerhalb von .stage. Im Hochformat kippt er weiter unten zurueck in den Fluss. */ .dcards{position:fixed;inset:0;z-index:4;pointer-events:none} .dcard{ position:absolute;z-index:4; right:6.5%;top:15%;width:min(19vw,252px); border-radius:var(--radius-lg);overflow:hidden; background:linear-gradient(180deg, rgba(22,26,30,.92), rgba(8,10,12,.96)); border:1px solid rgba(255,255,255,.12); box-shadow:0 36px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;transform:translateY(18px) scale(.965); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out); pointer-events:none; } .dcard.on{opacity:1;transform:none} /* Lime-Kante wandert beim Erscheinen einmal über die Karte */ .dcard::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg, transparent 38%, rgba(212,241,75,.4) 50%, transparent 62%); opacity:0; } .dcard.on::after{animation:cardSheen 1.5s cubic-bezier(.3,0,.3,1) .25s} @keyframes cardSheen{0%{opacity:0;transform:translateX(-40%)}30%{opacity:1}100%{opacity:0;transform:translateX(40%)}} .dcard-photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)} .dcard-photo img{width:100%;height:100%;object-fit:cover;display:block} .dcard-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(5,6,7,.34) 0%, transparent 26%, transparent 46%, rgba(8,10,12,.96) 100%); } .dcard-verified{ position:absolute;z-index:2;left:10px;top:10px; display:inline-flex;align-items:center;gap:5px; font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase; color:#0d1204;background:var(--accent); padding:4px 8px;border-radius:var(--radius-pill); box-shadow:0 4px 14px rgba(212,241,75,.3); } .dcard-verified svg{width:9px;height:9px;stroke-width:4} .dcard-id{position:absolute;z-index:2;left:13px;right:13px;bottom:11px} .dcard-id .cls{ font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent-ink);display:block;margin-bottom:3px; } .dcard-id .nm{ font-family:var(--font-display);font-size:clamp(15px,1.32vw,19px);font-weight:600;letter-spacing:-.02em; color:#fff;line-height:1.1;display:block;text-shadow:0 2px 12px rgba(0,0,0,.7); } .dcard-stats{padding:12px 13px 4px;display:flex;flex-direction:column;gap:8px} .dstat{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center} .dstat b{ grid-column:1;font-family:var(--font-mono);font-size:8.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--muted); } .dstat span{grid-column:2;font-family:var(--font-mono);font-size:12px;color:var(--text);letter-spacing:.03em} .dstat i{ grid-column:1/-1;height:3px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden;display:block; } .dstat i::after{ content:"";display:block;height:100%;width:var(--v);border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); transform:scaleX(0);transform-origin:left; } .dcard.on .dstat i::after{animation:dbar 1.1s cubic-bezier(.16,1,.3,1) var(--d) forwards} @keyframes dbar{to{transform:scaleX(1)}} .dcard-foot{ display:flex;align-items:center;gap:8px; margin:10px 13px 12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09); font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--muted); } .dcard-foot b{color:var(--text-2);font-weight:500} .dcard-foot .lic{margin-left:auto;color:var(--accent);border:1px solid rgba(212,241,75,.35);border-radius:4px;padding:2px 6px;font-size:9px} @media (prefers-reduced-motion:reduce){ .scan,.hud,.dcard{display:none} } /* Ohne Bewegung laeuft keine Choreografie — im Hochformat steht die Karte dann still statt ganz zu fehlen. Sie traegt dort echten Inhalt. */ @media (prefers-reduced-motion:reduce) and (max-width:1180px){ .dcard[data-i="0"]{display:block;opacity:1;transform:none} } /* ── Schmale Fenster ──────────────────────────────────────────────────── Frueher fiel hier die komplette Datenschicht weg (.scan-pts, .hud, .dcard auf display:none) — im Mobile-First-Index blieben davon 45 Woerter uebrig. Jetzt faellt nur das HUD weg: der Speed-Trace braucht Breite, um zu wirken. Reticles und Fahrerkarte bekommen stattdessen eine eigene Anordnung. */ @media (max-width:1180px){ .hud{display:none} /* Reticles auf die Hochformat-Positionen aus Options::telemetryPoints(). Punkte ohne --xm (Steering, Throttle) fallen weg — sechs sind zu viel. */ .scan-pt{left:var(--xm);top:var(--ym)} .scan-pt--wide{display:none} .scan-pt .ret{width:20px;height:20px} .scan-pt .ret::after{width:18px} .scan-pt em{margin-left:26px;font-size:10.5px;padding:5px 9px} .scan-pt em i{margin-right:7px;font-size:9px} /* Karten zurueck in den Fluss, direkt unter den CTA. Alle liegen in derselben Grid-Zelle uebereinander und blenden ineinander: der Container ist so hoch wie die hoechste Karte, ohne geratene Hoehe — im Fluss wuerde jedes Ein- und Ausblenden sonst das Layout springen lassen (CLS). */ .dcards{ position:relative;inset:auto;z-index:auto;pointer-events:none; display:grid;width:min(72vw,240px);margin:var(--sp-7) auto 0; } .dcard{ grid-area:1/1;position:relative;inset:auto;right:auto;top:auto;width:100%; transform:translateY(10px) scale(.985); } .dcard.on{transform:none} } /* ============================================================ TOPBAR ============================================================ */ .topbar{ position:absolute;left:0;right:0;top:0;z-index:20; display:flex;align-items:center;gap:var(--sp-4); height:84px; /* gleiches Raster wie Hero-Inhalt und Fußzeile — alles fluchtet */ max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); } .brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none; opacity:0;animation:fadeUp .9s var(--ease-out) .35s forwards} .brand img{height:30px;width:auto;opacity:.98} .brand .wordmark{ font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em; padding-left:14px;border-left:1px solid var(--hairline-strong);color:var(--text); text-shadow:0 1px 12px rgba(0,0,0,.6); } .topbar .sp{flex:1} /* ── Kopfleiste im Hochformat: bleibt stehen ───────────────────────────── Seit die Seite im Hochformat scrollt, wanderte die Marke beim Scrollen aus dem Bild. Flaeche und Schatten kommen erst beim Scrollen dazu (Klasse .stuck aus app.js), damit der Hero oben randlos bleibt. Die sichere Zone oben wird mitgerechnet, sonst scrollt der Inhalt bei Geraeten mit Notch hinter der Leiste durch. Kein Layoutsprung — die Leiste stand ohnehin ausserhalb des Flusses. Dieser Block MUSS nach der Grundregel oben stehen: ein @media erhoeht die Spezifitaet nicht. Weiter oben platziert gewinnt .topbar{position:absolute} und die Leiste scrollt weiterhin weg (genau so passiert am 26.07.). ────────────────────────────────────────────────────────────────────── */ @media (max-width:1180px){ .topbar{ position:fixed; height:calc(84px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); border-bottom:1px solid transparent; transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .topbar.stuck{ background:rgba(5,6,7,.82); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--hairline); box-shadow:0 8px 26px rgba(0,0,0,.5); } /* Die Buehne ist position:fixed, ihre Messschicht bleibt beim Scrollen also im Viewport stehen, waehrend der Inhalt daran vorbeizieht — Sweep und Reticles landeten dann mitten auf der Fahrerkarte. Wer scrollt, ist beim Inhalt: die Messschicht blendet weg. */ .scan{transition:opacity .4s var(--ease)} body.scrolled .scan{opacity:0} } .langswitch{ display:flex;align-items:center;gap:2px;flex:none; padding:3px;border:1px solid var(--hairline);border-radius:var(--radius-pill); background:rgba(5,6,7,.42); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;animation:fadeUp .9s var(--ease-out) .45s forwards; } .langswitch button{ border:0;background:transparent;cursor:pointer; font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em; color:var(--muted);padding:5px 11px;border-radius:var(--radius-pill); transition:color .2s var(--ease), background .2s var(--ease); } .langswitch button:hover{color:var(--text-2)} .langswitch button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)} /* ============================================================ HERO — genau ein Screen ============================================================ */ .hero{ position:relative;z-index:10; min-height:100svh; display:flex;flex-direction:column;justify-content:center; padding:112px var(--pad) 92px; max-width:var(--maxw);margin:0 auto; } .hero-inner{width:100%;max-width:min(860px,100%)} @keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* Die Erklaerzeile steckt seit dem 26.07.2026 IN der H1 (SEO C5) und ist damit kein direktes Kind der .hero-inner mehr. Sie bekommt ihre Einblendung deshalb ueber einen Nachfahren-Selektor — sonst erschiene sie zusammen mit dem Claim statt gestaffelt danach. */ .hero-inner > *, .hero-inner .hero-line{opacity:0;animation:fadeUp 1s var(--ease-out) forwards} /* Nach dem Einblenden statisch — sonst wuerde jede spaetere Animation (z. B. das Ruetteln bei falscher E-Mail) die Einblendung ueberschreiben und das Element auf opacity:0 zuruecksetzen. */ .hero-inner.ready > *, .hero-inner.ready .hero-line{opacity:1;transform:none;animation:none} .hero-inner > .eyebrow{animation-delay:.5s} .hero-inner > .claim{animation-delay:.62s} .hero-inner .hero-line{animation-delay:1s} .hero-inner > .quickform{animation-delay:1.12s} .hero-inner > .hero-note{animation-delay:1.24s} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-size:11px;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--text-2); padding:7px 15px 7px 13px; border:1px solid var(--hairline);border-radius:var(--radius-pill); background:rgba(5,6,7,.55); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;position:relative} .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.6s var(--ease-out) infinite} @keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.8);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.pulse::after{animation:none}} h1.claim{ font-family:var(--font-display); font-size:clamp(44px, 7.4vw, 106px); line-height:.94;letter-spacing:-.043em;font-weight:600; margin:26px 0 0;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 6px 34px rgba(0,0,0,.9), 0 2px 90px rgba(0,0,0,.8); } h1.claim .dot{color:var(--accent)} h1.claim .l2{display:block;color:var(--text-2)} /* Steht als in der H1 (SEO C5). display:block macht daraus wieder die eigene Zeile; font-family und font-weight muessen explizit stehen, weil sonst die Display-Schrift und das Gewicht 600 der H1 durchschlagen und die Zeile wie ein zweiter Claim aussaehe. Werte identisch zum frueheren

. */ .hero-line{ display:block; margin:26px 0 0; font-family:var(--font-sans);font-weight:400; font-size:clamp(16.5px,1.42vw,20px);line-height:1.55; color:var(--text-2);max-width:44ch;letter-spacing:-.008em; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 26px rgba(0,0,0,.92); } /* ── Schnellweg: E-Mail direkt im Hero ───────────────────── */ .quickform{ position:relative; display:flex;align-items:center;gap:6px; margin:38px 0 0;padding:6px; width:min(560px,100%); background:rgba(9,11,13,.56); border:1px solid var(--hairline-strong); border-radius:var(--radius-pill); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); box-shadow:0 20px 60px rgba(0,0,0,.5); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .quickform:focus-within{border-color:var(--accent);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 4px var(--accent-dim)} .quickform.is-error{border-color:var(--danger);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 4px rgba(255,107,114,.16)} .quickmail{ flex:1;min-width:0;background:transparent;border:0;outline:none; padding:14px 8px 14px 20px;font-size:15.5px;letter-spacing:-.01em; } .quickmail::placeholder{color:var(--muted)} .quickbtn{ flex:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0; background:var(--text);color:#06080a; font-size:14.5px;font-weight:600;letter-spacing:-.01em; padding:13px 22px;border-radius:var(--radius-pill); transition:background .25s var(--ease), transform .25s var(--ease-out); } .quickbtn svg{width:16px;height:16px;transition:transform .35s var(--ease-out)} .quickbtn:hover{background:var(--accent);transform:translateX(1px)} .quickbtn:hover svg{transform:translateX(4px)} .quickform.shake{animation:shake .45s var(--ease)} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}} .hero-note{ display:flex;align-items:center;gap:9px;margin:20px 0 0;padding-left:4px; font-size:13.5px;color:var(--text-2); text-shadow:0 1px 3px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.9); } .hero-note svg{width:15px;height:15px;flex:none} .hero-note .ic-ok{color:var(--accent)} .hero-note .ic-err{display:none;color:var(--danger)} .hero-note.is-error{color:var(--danger)} .hero-note.is-error .ic-ok{display:none} .hero-note.is-error .ic-err{display:block} .linkbtn{ display:inline-flex;align-items:center;gap:7px; border:0;background:none;cursor:pointer;padding:2px 0; font-size:13.5px;font-weight:500;color:var(--text); border-bottom:1px solid var(--hairline-strong); transition:color .2s var(--ease), border-color .2s var(--ease); } .linkbtn svg{width:14px;height:14px;transition:transform .3s var(--ease-out)} .linkbtn:hover{color:var(--accent);border-color:var(--accent)} .linkbtn:hover svg{transform:translateX(3px)} /* ── Fußzeile, sitzt im selben Screen ────────────────────── */ .footbar{ position:absolute;left:0;right:0;bottom:26px; max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap; font-size:12.5px;color:var(--muted); opacity:0;animation:fadeUp 1s var(--ease-out) 1.5s forwards; } .footbar .sp{flex:1} .footbar nav{display:flex;gap:var(--sp-5);flex-wrap:wrap} .footbar a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)} .footbar a:hover{color:var(--text)} /* ── Kanaele der Marke ─────────────────────────────────── Gilt fuer beide Fusszeilen (Startseite .footbar, Rechtsseiten .legal-foot) — ein Baustein, zwei Orte. Engerer Abstand als bei den Textlinks, weil Symbole naeher zusammen als Gruppe lesbar sind. Die Trefferflaeche ist ueber Padding auf 34 px gebracht, ohne dass die Fusszeile hoeher wird: die Zeile ist auf der Startseite mobil knapp. */ nav.social{gap:2px !important} nav.social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-block:-9px} nav.social svg{width:16px;height:16px;display:block} nav.social a:hover{color:var(--text)} /* ============================================================ BUTTONS (im Overlay) ============================================================ */ .btn{ --btn-bg:var(--text);--btn-fg:#06080a; display:inline-flex;align-items:center;justify-content:center;gap:10px; border:0;cursor:pointer;text-decoration:none; background:var(--btn-bg);color:var(--btn-fg); font-size:15px;font-weight:600;letter-spacing:-.01em; padding:15px 26px;border-radius:var(--radius-pill); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease); } .btn svg{width:16px;height:16px;transition:transform .35s var(--ease-out)} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.5)} .btn:hover svg{transform:translateX(4px)} .btn--accent{--btn-bg:var(--accent);--btn-fg:#0d1204} .btn--accent:hover{box-shadow:0 12px 40px rgba(212,241,75,.22)} .btn--lg{padding:18px 30px;font-size:16px;width:100%} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important} /* ============================================================ OVERLAY ============================================================ */ .sheet{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:flex-start} .sheet[hidden]{display:none} .sheet-backdrop{ position:absolute;inset:0;cursor:pointer; background:rgba(3,4,5,.62); backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%); opacity:0;transition:opacity .45s var(--ease); } .sheet.on .sheet-backdrop{opacity:1} .sheet-panel{ position:relative; width:min(760px, calc(100vw - 2 * clamp(12px,3vw,40px))); max-height:calc(100svh - clamp(24px,6vh,72px)); margin:clamp(12px,3vh,36px) 0; background:linear-gradient(180deg, rgba(20,23,27,.94), rgba(10,12,14,.96)); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:0 50px 120px rgba(0,0,0,.7); opacity:0;transform:translateY(26px) scale(.985); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); display:flex;flex-direction:column;overflow:hidden; } .sheet.on .sheet-panel{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .sheet-backdrop,.sheet-panel{transition:none} } .sheet-close{ position:absolute;z-index:3;right:14px;top:14px; width:38px;height:38px;display:grid;place-items:center;cursor:pointer; border:1px solid var(--hairline);border-radius:50%; background:rgba(0,0,0,.35);color:var(--text-2); transition:all .2s var(--ease); } .sheet-close svg{width:17px;height:17px} .sheet-close:hover{background:var(--surface-2);color:var(--text);border-color:var(--hairline-strong)} .sheet-scroll{ overflow-y:auto;overscroll-behavior:contain; padding:clamp(26px,3.6vw,46px); scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent; } .sheet-scroll::-webkit-scrollbar{width:9px} .sheet-scroll::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:9px;border:3px solid transparent;background-clip:content-box} .sheet-head{margin-bottom:var(--sp-6);padding-right:34px} .kicker{ display:flex;align-items:center;gap:12px; font-family:var(--font-mono);font-size:10.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px; } .kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hairline),transparent)} .sheet-head h2{ font-family:var(--font-display); font-size:clamp(26px,3vw,36px);line-height:1.06;letter-spacing:-.035em;font-weight:600; margin:0 0 12px;color:#fff; } .sheet-head > p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6;max-width:52ch} /* ============================================================ FORMULAR ============================================================ */ .field{display:block;margin-bottom:var(--sp-4)} .field.nogap{margin-bottom:0} .field.topgap{margin-top:var(--sp-2)} .field > .lbl,p.lbl{ display:flex;align-items:center;gap:8px; font-size:12.5px;font-weight:600;color:var(--text-2);margin:0 0 9px; } p.lbl.lead{margin-bottom:11px;text-wrap:pretty} .field .opt{color:var(--muted);font-weight:400;font-size:11.5px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} .row2.topgap{margin-top:var(--sp-5)} .hint-txt{font-size:13px;color:var(--muted);margin:0 0 var(--sp-5);line-height:1.5;max-width:64ch} .hint-txt.tight{margin:-3px 0 11px} .hint-txt.nogap{margin:9px 0 0} .input,.select,.textarea{ width:100%; background:rgba(0,0,0,.34); border:1px solid var(--hairline); color:var(--text);border-radius:var(--radius-md); padding:14px 16px;font-size:15px; transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); -webkit-appearance:none;appearance:none; } .input::placeholder,.textarea::placeholder{color:var(--muted)} .input:hover,.select:hover,.textarea:hover{border-color:var(--hairline-strong)} .input:focus,.select:focus,.textarea:focus{ outline:none;border-color:var(--accent);background:rgba(0,0,0,.5); box-shadow:0 0 0 3px var(--accent-dim); } .textarea{resize:vertical;min-height:88px;line-height:1.55} .select{ padding-right:40px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727b85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:16px; } .select option{background:#12161a;color:var(--text)} input[type=number]{-moz-appearance:textfield} input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .input.is-error,.select.is-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,107,114,.13)} .err{display:none;color:var(--danger);font-size:12.5px;margin-top:7px} .err.on{display:block} .sep{display:flex;align-items:center;gap:14px;margin:var(--sp-6) 0 var(--sp-4)} .sep span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--hairline)} /* Pfad-Kacheln */ .paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .tile{ position:relative;display:flex;flex-direction:column;gap:8px; padding:16px 15px;cursor:pointer; background:rgba(0,0,0,.3); border:1px solid var(--hairline);border-radius:var(--radius-md); transition:border-color .2s var(--ease), background .2s var(--ease); } .tile:hover{border-color:var(--hairline-strong);background:rgba(0,0,0,.42)} .tile input{position:absolute;opacity:0;pointer-events:none} .tile .tick{ position:absolute;right:12px;top:12px;width:17px;height:17px;border-radius:50%; border:1.5px solid var(--hairline-strong);display:grid;place-items:center;transition:all .2s var(--ease); } .tile .tick svg{width:10px;height:10px;color:#0d1204;opacity:0;transform:scale(.5);transition:all .2s var(--ease-out)} .tile .ico{width:22px;height:22px;color:var(--text-2);transition:color .2s var(--ease)} .tile b{font-size:14px;font-weight:600;letter-spacing:-.01em;padding-right:22px;line-height:1.25;text-wrap:balance} .tile small{font-size:12px;color:var(--muted);line-height:1.4;margin-top:auto} .tile:has(input:checked){border-color:var(--accent);background:var(--accent-dim)} .tile:has(input:checked) .tick{background:var(--accent);border-color:var(--accent)} .tile:has(input:checked) .tick svg{opacity:1;transform:scale(1)} .tile:has(input:checked) .ico{color:var(--accent)} .tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px} /* Aufklapp-Blöcke */ .reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out), opacity .35s var(--ease), margin .5s var(--ease-out);opacity:0;margin-top:0} .reveal > div{overflow:hidden;min-height:0} .reveal.on{grid-template-rows:1fr;opacity:1;margin-top:var(--sp-5)} @media (prefers-reduced-motion:reduce){.reveal{transition:none}} .subcard{ border:1px solid var(--hairline);border-left:2px solid var(--accent); border-radius:var(--radius-md);background:rgba(0,0,0,.28); padding:clamp(18px,2.4vw,26px); } .subcard > h3{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.018em;margin:0 0 5px;color:#fff} /* Chips */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ position:relative;display:inline-flex;align-items:center;gap:8px; padding:9px 15px;cursor:pointer;user-select:none; background:rgba(0,0,0,.32);border:1px solid var(--hairline);border-radius:var(--radius-pill); font-size:13.5px;font-weight:500;color:var(--text-2);transition:all .18s var(--ease); } .chip input{position:absolute;opacity:0;pointer-events:none} .chip:hover{border-color:var(--hairline-strong);color:var(--text)} .chip .dotmark{width:6px;height:6px;border-radius:50%;background:var(--hairline-strong);transition:all .18s var(--ease);flex:none} .chip:has(input:checked){background:var(--accent-dim);border-color:var(--accent);color:var(--accent-ink)} .chip:has(input:checked) .dotmark{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)} .chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px} .chip--lead{padding:10px 17px;font-size:14px;font-weight:600;color:var(--text)} .chip--lead .flag{ font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);background:var(--accent-dim);padding:2px 6px;border-radius:4px; } /* Rating-Zeilen */ .ratings{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:8px} .rating-row{ display:grid;grid-template-columns:1.15fr .85fr .9fr;gap:8px;align-items:center; padding:9px 10px;border:1px solid var(--hairline);border-radius:var(--radius-sm); background:rgba(0,0,0,.24);animation:rowIn .35s var(--ease-out); } @keyframes rowIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .rating-row > .name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0} .rating-row > .name i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none} .rating-row .input,.rating-row .select{padding:9px 11px;font-size:13px;border-radius:var(--radius-xs)} .rating-row .select{padding-right:30px;background-position:right 9px center;background-size:14px} .ratings-head{ margin-top:var(--sp-4);display:grid;grid-template-columns:1.15fr .85fr .9fr;gap:8px;padding:0 10px; font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } /* Checkbox-Liste */ .checklist{display:flex;flex-direction:column;gap:12px} .check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;color:var(--text-2);line-height:1.5;position:relative} .check input{position:absolute;opacity:0;pointer-events:none} .check .box{ width:19px;height:19px;flex:none;margin-top:1px; border:1.5px solid var(--hairline-strong);border-radius:5px; display:grid;place-items:center;transition:all .18s var(--ease); } .check .box svg{width:11px;height:11px;color:#0d1204;opacity:0;transform:scale(.5);transition:all .18s var(--ease-out)} .check:hover .box{border-color:var(--text-2)} .check:has(input:checked) .box{background:var(--accent);border-color:var(--accent)} .check:has(input:checked) .box svg{opacity:1;transform:scale(1)} .check:has(input:checked){color:var(--text)} .check:has(input:focus-visible) .box{outline:2px solid var(--accent);outline-offset:3px} .check a{color:var(--accent-ink);text-underline-offset:3px} /* Radios */ .radios{display:flex;gap:8px;flex-wrap:wrap} .radio{ position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:9px 15px;border:1px solid var(--hairline);border-radius:var(--radius-pill); background:rgba(0,0,0,.32);font-size:13.5px;color:var(--text-2);transition:all .18s var(--ease); } .radio input{position:absolute;opacity:0;pointer-events:none} .radio .ring{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--hairline-strong);display:grid;place-items:center;transition:all .18s var(--ease)} .radio .ring::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:all .18s var(--ease-out)} .radio:hover{border-color:var(--hairline-strong);color:var(--text)} .radio:has(input:checked){border-color:var(--accent);background:var(--accent-dim);color:var(--accent-ink)} .radio:has(input:checked) .ring{border-color:var(--accent)} .radio:has(input:checked) .ring::after{opacity:1;transform:scale(1)} .radio:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px} /* Consent + Submit */ .consent{margin-top:var(--sp-6);padding:16px;border:1px solid var(--hairline);border-radius:var(--radius-md);background:rgba(0,0,0,.26)} .consent .check{font-size:13px} .submit-zone{margin-top:var(--sp-5)} .formnote{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:12px;color:var(--muted);text-align:center} .formnote svg{width:13px;height:13px;flex:none} .hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0} /* Erfolg */ .success{display:none;text-align:center;padding:clamp(10px,2vw,26px) 0} .success.on{display:block;animation:rowIn .5s var(--ease-out)} .success .mark{width:62px;height:62px;margin:0 auto var(--sp-5);border-radius:50%;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--accent)} .success .mark svg{width:26px;height:26px;color:var(--accent)} .success h2{font-family:var(--font-display);font-size:27px;letter-spacing:-.03em;margin:0 0 10px;color:#fff} .success > p{color:var(--text-2);margin:0 auto;max-width:44ch;font-size:15px;line-height:1.6} .refcode{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-5);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-2);padding:9px 15px;border:1px dashed var(--hairline-strong);border-radius:var(--radius-sm)} .refcode b{color:var(--accent)} .okclose{margin:var(--sp-5) 0 0} .form-shell.done > form{display:none} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:900px){ .paths{grid-template-columns:1fr} .row2{grid-template-columns:1fr} .ratings-head{display:none} .rating-row{grid-template-columns:1fr 1fr} .rating-row > .name{grid-column:1/-1} } @media (max-width:760px){ /* Der Hero darf im Hochformat ueber die Falz gehen (Nutzerentscheidung 26.07.) — der CTA muss aber oben bleiben. --consent-h kommt aus app.js und haelt den Platz frei, den der Cookie-Banner tatsaechlich belegt. */ /* Der Abstand nach oben ist bewusst KONSTANT und haengt nicht an --consent-h: liesse man die Typografie beim Einblenden des Banners hochrutschen, waere das ein Layout-Shift auf dem wichtigsten Element (gemessen 0,16 statt 0,00). Der Platz fuer den Banner wird stattdessen fest einkalkuliert — --hero-pad ist so bemessen, dass der CTA darueber endet. Nach unten darf --consent-h wirken: das verschiebt nichts, was schon sichtbar ist. */ .hero{ padding:calc(var(--hero-pad) + 14px) var(--pad) calc(96px + var(--consent-h, 0px)); justify-content:flex-start; } /* Chip-Text ist lang — enger setzen statt umbrechen lassen */ .eyebrow{font-size:9.5px;letter-spacing:.14em;padding:7px 13px 7px 11px;gap:8px} .brand img{height:26px} .brand .wordmark{font-size:17px;padding-left:12px} .hero-inner{max-width:100%} h1.claim{font-size:clamp(34px,9.6vw,54px);margin-top:20px} .hero-line{font-size:16px;max-width:100%;margin-top:20px} .quickform{margin-top:26px} .quickform{flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:var(--radius)} .quickmail{ padding:14px 16px;text-align:left; background:rgba(0,0,0,.34);border:1px solid var(--hairline);border-radius:var(--radius-md); } .quickmail:focus{border-color:var(--hairline-strong)} .quickbtn{justify-content:center;padding:15px 22px} .hero-note{margin-top:16px} /* Mobil bricht die Fusszeile mehrzeilig um (seit die Kanal-Symbole dazugekommen sind). Linksbuendig stuenden dann unterschiedlich breite Bloecke uebereinander mit einer ausgefransten rechten Kante — zentriert liest sich das als ein Block. Der Spacer entfaellt hier ohnehin, sonst wuerde er die Zentrierung aufheben. Dazu die Reihenfolge umgedreht (order statt Markup, damit der Desktop unberuehrt bleibt): oben die Links, die jemand tatsaechlich antippt, darunter Copyright und Kanaele als Abschluss. Am Seitenende ist die Zeile direkt ueber dem Bildschirmrand die am leichtesten erreichbare — die gehoert der Navigation, nicht der Rechteangabe. */ .footbar{bottom:16px;font-size:11.5px;gap:6px;justify-content:center;text-align:center} .footbar .sp{display:none} .footbar nav{gap:var(--sp-4);justify-content:center} .footbar nav:not(.social){order:-1} /* ── Videobuehne im Hochformat ──────────────────────────────────────── Die Quelle ist 2:1 quer. Je mehr Bildschirmhoehe das Video bekommt, desto weniger Bildbreite bleibt sichtbar (cover zoomt): 55svh → 46 % der Bildbreite — ganzes Auto inkl. Livery-Logo 70svh → 36 % — Auto gross, Marke angeschnitten 100svh → 25 % — Scheibe und Rad, Auto nicht als Ganzes Gewaehlt wurde am 26.07.2026 die 70-svh-Fassung: das Auto steht gross und klar im Bild, ohne dass der Ausschnitt es unkenntlich macht. Vier Fassungen standen zum Vergleich am echten Geraet zur Wahl (100/70/55 svh und ein Front-Ausschnitt); die Vorschau-Klassen sind damit entfallen. --hero-pad = wo die Typografie einsetzt. Bewusst kleiner als --hero-h, damit der Claim wie am Desktop im Bild steht statt darunter. Der Wert ist GEDECKELT, nicht fest: unter der Typografie stehen Claim, Zeile, Formular und Notiz (zusammen rund 370 px), darunter der Cookie- Banner (bis 198 px). Wo die Bildschirmhoehe dafuer nicht reicht, muss die Buehne weichen — sonst liegt der CTA hinter dem Banner. Genau das passierte zwischen 721 und 799 px Hoehe, weil hier vorher ein harter Breakpoint bei 720 px stand statt einer Rechnung; in dem Bereich landen iPhones in Safari mit eingeblendeter URL-Leiste. Die 580 px sind Bannerhoehe + Textblock + Reserve, gemessen statt geschaetzt. */ :root{ --hero-h:70svh;--hero-pos:56% 46%; --hero-pad:min(29svh, calc(100svh - 580px)); } .stage-video{ top:0;left:50%; width:100%;height:var(--hero-h);min-height:0; transform:translateX(-50%); object-fit:cover;object-position:var(--hero-pos); /* Im Hochformat nimmt das Video mehr Flaeche ein als am Desktop — bei gleicher Helligkeit draengt es sich vor die Typografie. Darum dunkler als der Desktop-Wert (.78), damit das Verhaeltnis wieder stimmt. */ filter:saturate(.74) contrast(1.06) brightness(.66) blur(.8px); animation:stageIn 2.2s var(--ease-out) .25s forwards, stageDriftM 46s ease-in-out 2s infinite alternate; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.6) 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.6) 84%,transparent 100%); } /* Der Sweep endet mit dem Video. Ueber die volle Hoehe gefuehrt lief er durch die Typografie und den leeren Bereich darunter weiter — das las sich als Stoerung statt als Messvorgang (Nutzer 26.07.). Er gehoert auf die Flaeche, die er vermisst. */ .scan{inset:0 0 auto 0;height:var(--hero-h)} .stage-soft{ inset:0 0 auto 0;height:var(--hero-h); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); -webkit-mask-image:radial-gradient(96% 130% at 50% 34%, transparent 36%, #000 96%); mask-image:radial-gradient(96% 130% at 50% 34%, transparent 36%, #000 96%); } .stage-scrim{background: linear-gradient(180deg, rgba(5,6,7,.70) 0%, rgba(5,6,7,.24) 16%, rgba(5,6,7,.46) 46%, rgba(5,6,7,.86) 72%, var(--ink) 96%), radial-gradient(120% 60% at 50% 20%, transparent 30%, rgba(5,6,7,.54) 100%);} .sheet-panel{width:100vw;max-width:100vw;max-height:100svh;margin:0;border-radius:0;border:0} .sheet{align-items:stretch} } @media (max-width:359px){ .brand .wordmark{display:none} } /* Je flacher das Geraet, desto schmaler das Band zwischen Topbar und Typografie — und desto weniger Messwerte passen hinein, ohne in den Claim zu ragen. Statt eines harten Alles-oder-nichts faellt von unten je einer weg. Die Grenzen sind ausgemessen (siehe --hero-pad oben), nicht geraten. */ @media (max-width:760px) and (max-height:809px){ .scan-pt:nth-of-type(3){display:none} } @media (max-width:760px) and (max-height:749px){ .scan-pt:nth-of-type(2){display:none} } @media (max-width:760px) and (max-height:704px){ .scan-pt{display:none} } @media (max-width:760px) and (max-height:720px){ .stage-soft{height:var(--hero-h)} .hero{padding-bottom:calc(78px + var(--consent-h, 0px))} .footbar{bottom:12px} } /* Sehr flache Fenster (Landscape-Handy, kleines Desktop-Fenster): Hero darf scrollen statt zu quetschen. Der Banner braucht auch hier seinen Platz — ohne das Mitrechnen von --consent-h bliebe der Seitenfuss dauerhaft darunter begraben. */ @media (max-height:620px){ .hero{min-height:auto;padding-block:60px calc(96px + var(--consent-h, 0px))} .footbar{position:static;margin-top:var(--sp-6);left:auto;right:auto;bottom:auto} } /* ============================================================ RECHTSSEITEN (Impressum / Datenschutz) ============================================================ */ body.legal{background:var(--ink)} body.legal .stage{position:fixed;inset:0} body.legal .stage-video{display:none} body.legal .stage-scrim{background: radial-gradient(90% 60% at 24% 0%, rgba(212,241,75,.05), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%);} .legal-wrap{ position:relative;z-index:10; max-width:var(--maxw);margin:0 auto; padding:132px var(--pad) 96px; } .legal-head{max-width:760px;margin-bottom:var(--sp-7)} .legal-head h1{ font-family:var(--font-display); font-size:clamp(32px,4.4vw,54px);line-height:1.02;letter-spacing:-.038em;font-weight:600; margin:14px 0 12px;color:#fff; } .legal-head p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.6} .legal-body{max-width:760px} .legal-body section{padding-top:var(--sp-6);margin-top:var(--sp-6);border-top:1px solid var(--hairline)} .legal-body section:first-child{border-top:0;margin-top:0;padding-top:0} .legal-body h2{ font-family:var(--font-display); font-size:19px;letter-spacing:-.02em;font-weight:600;margin:0 0 12px;color:#fff; display:flex;align-items:baseline;gap:12px; } .legal-body h2::before{ content:attr(data-n); font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--accent); letter-spacing:.1em;flex:none; } .legal-body h3{font-size:14px;font-weight:600;color:var(--text);margin:var(--sp-5) 0 6px} .legal-body p{margin:0 0 12px;color:var(--text-2);font-size:14.5px;line-height:1.68} .legal-body ul{margin:0 0 12px;padding-left:0;list-style:none} .legal-body li{ position:relative;padding-left:20px;margin-bottom:8px; color:var(--text-2);font-size:14.5px;line-height:1.6; } .legal-body li::before{content:"";position:absolute;left:4px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--hairline-strong)} .legal-body a{color:var(--accent-ink);text-underline-offset:3px} .legal-body strong{color:var(--text);font-weight:600} .legal-body dl{margin:0;display:grid;grid-template-columns:180px minmax(0,1fr);gap:9px 20px} .legal-body dt{color:var(--muted);font-size:13px} .legal-body dd{margin:0;color:var(--text-2);font-size:14.5px} @media (max-width:620px){ .legal-body dl{grid-template-columns:1fr;gap:2px 0} .legal-body dd{margin-bottom:10px} } /* Platzhalter, die Mike noch ausfüllen muss — im Livegang entfernen */ .todo{ display:inline-block; background:var(--accent-dim);color:var(--accent-ink); border:1px dashed var(--accent);border-radius:var(--radius-xs); padding:1px 7px;font-family:var(--font-mono);font-size:12px; } .todo-note{ display:flex;gap:11px;align-items:flex-start; margin-bottom:var(--sp-6);padding:14px 16px; border:1px dashed var(--accent);border-radius:var(--radius-md);background:var(--accent-dim); color:var(--accent-ink);font-size:13.5px;line-height:1.55; } .todo-note svg{width:17px;height:17px;flex:none;margin-top:2px} .backlink{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-size:13.5px;color:var(--text-2); transition:color .2s var(--ease); } .backlink svg{width:15px;height:15px;transition:transform .3s var(--ease-out)} .backlink:hover{color:var(--accent)} .backlink:hover svg{transform:translateX(-3px)} .legal-foot{ max-width:var(--maxw);margin:0 auto;position:relative;z-index:10; padding:var(--sp-5) var(--pad) var(--sp-6); border-top:1px solid var(--hairline); display:flex;gap:var(--sp-5);flex-wrap:wrap;align-items:center; font-size:12.5px;color:var(--muted); } /* Den Spacer braucht nur die Startseite (dort schiebt .sp mit flex:1). Hier uebernimmt margin-left:auto — der leere Span bleibt aber ein Flex-Item und holt sich den Container-gap, also 24 px Abstand aus dem Nichts. Mobil verschob das die zentrierte Zeile sichtbar nach links. */ .legal-foot .sp{display:none} .legal-foot nav{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-left:auto} /* Nur die ERSTE Gruppe wird nach rechts geschoben. Ohne das bekaemen beide navs eine auto-Marge, der freie Platz verteilte sich auf beide und die Kanal-Symbole staenden einsam zwischen Copyright und Rechtslinks. */ .legal-foot nav.social + nav{margin-left:0} .legal-foot a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)} .legal-foot a:hover{color:var(--text)} /* Dieselbe Zentrierung wie auf der Startseite, damit beide Fusszeilen mobil gleich aussehen. Muss NACH der margin-left:auto-Regel oben stehen — sonst zoege die auto-Marge die Gruppen weiterhin nach rechts und die Zentrierung liefe ins Leere. */ @media (max-width:760px){ .legal-foot{justify-content:center;text-align:center} .legal-foot nav{margin-left:0;justify-content:center} .legal-foot nav:not(.social){order:-1} } /* Sprachblöcke */ html[data-lang="de"] [data-lang-block="en"], html[data-lang="en"] [data-lang-block="de"]{display:none} /* ============================================================ PHP-FASSUNG — Ergaenzungen Sprachumschalter sind jetzt echte Links (SEO), dazu Cookie-Banner, Opt-out-Schalter und die serverseitig gerenderten Formularzeilen. ============================================================ */ /* Sprachumschalter: statt