/* =====================================================================
   CleanXCar — Fahrzeugaufbereitung & Lackschutzfolierung
   Design System / Stylesheet
   ===================================================================== */

/* ---------- 0. Schriften (selbst gehostet, DSGVO-freundlich) --------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- 1. Tokens ------------------------------------------------ */
:root{
  --brand:        #009BFF;
  --brand-lite:   #4CC2FF;
  --brand-glow:   #00D4FF;
  --brand-deep:   #0057D8;
  --navy:         #022347;

  --ink:          #05080F;
  --ink-2:        #080D18;
  --ink-3:        #0C1424;
  --ink-4:        #111C30;

  --line:         rgba(255,255,255,.09);
  --line-strong:  rgba(255,255,255,.16);

  --fg:           #F2F6FB;
  --fg-dim:       #A7B6CC;
  --fg-dimmer:    #6F8299;

  --paper:        #F4F7FB;
  --paper-2:      #FFFFFF;
  --paper-ink:    #08111F;
  --paper-dim:    #4C5E75;
  --paper-line:   rgba(4,20,40,.10);

  --grad-brand:   linear-gradient(135deg,#00D4FF 0%,#009BFF 45%,#0057D8 100%);
  --grad-text:    linear-gradient(100deg,#FFFFFF 0%,#BFE6FF 40%,#009BFF 100%);

  --shadow-1:     0 2px 8px rgba(0,0,0,.35);
  --shadow-2:     0 18px 50px -18px rgba(0,0,0,.85);
  --shadow-glow:  0 12px 40px -10px rgba(0,155,255,.55);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --wrap: 1240px;
  --wrap-narrow: 900px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.8,.28,1);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 2. Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--ink); overflow-x:clip; color:var(--fg);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5,p,figure{margin:0}
:focus-visible{outline:2px solid var(--brand-glow); outline-offset:3px; border-radius:4px}
::selection{background:var(--brand); color:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.skip{
  position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-160%);
  padding:.7rem 1.1rem; border-radius:8px; background:var(--brand); color:#fff;
  font-weight:700; font-size:.85rem; transition:transform .25s var(--ease);
}
.skip:focus-visible{transform:none}

/* ---------- 3. Typography -------------------------------------------- */
.display,h1,h2,h3,.h1,.h2,.h3,.h4{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 108;
  font-weight:800; line-height:1.03; letter-spacing:-.025em;
  text-transform:uppercase;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
.h1,h1{font-size:clamp(1.95rem,5.4vw,4.4rem); hyphens:manual}
.h2,h2{font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.06; hyphens:manual}
.h3,h3{font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.14; letter-spacing:-.02em}
.h4{font-size:clamp(1rem,1.4vw,1.18rem); letter-spacing:-.01em}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem); color:var(--fg-dim); line-height:1.7; font-weight:350}
.tiny{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}

.grad-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.brand-text{color:var(--brand)}

/* Eyebrow with the CleanXCar parallelogram motif */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-body); font-size:.76rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand-lite);
}
.eyebrow::before{
  content:''; width:26px; height:11px; flex:none;
  background:
    linear-gradient(100deg,transparent 0 4px,var(--brand) 4px 12px,transparent 12px 16px,var(--brand) 16px 24px,transparent 24px);
  transform:skewX(-18deg);
}
.eyebrow--paper{color:var(--brand-deep)}

/* ---------- 4. Layout ------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,5vw,40px)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{position:relative; padding:clamp(64px,9vw,124px) 0; overflow:hidden; overflow:clip}
.section--tight{padding:clamp(48px,6vw,84px) 0}
.section--paper{background:var(--paper); color:var(--paper-ink)}
.section--paper .lead{color:var(--paper-dim)}
.section--ink2{background:var(--ink-2)}
.grid{display:grid; gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

.sec-head{max-width:760px; display:flex; flex-direction:column; gap:1.1rem; margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head--center{margin-inline:auto; text-align:center; align-items:center}
.sec-head--split{max-width:none; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.sec-head--split > div{max-width:700px; display:flex; flex-direction:column; gap:1.1rem}

/* Ambient glows */
.glow{position:absolute; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0}
.glow--a{width:min(620px,92vw); height:min(620px,92vw); background:radial-gradient(circle,rgba(0,155,255,.42),transparent 68%)}
.glow--b{width:min(520px,88vw); height:min(520px,88vw); background:radial-gradient(circle,rgba(0,88,216,.34),transparent 70%)}
.section > .wrap{position:relative; z-index:1}

/* Fine tech grid overlay */
.gridlines::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}

/* ---------- 5. Buttons ------------------------------------------------ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--f-body); font-weight:700; font-size:.9rem; letter-spacing:.055em;
  text-transform:uppercase; white-space:nowrap; cursor:pointer; overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn svg{width:18px; height:18px; flex:none}
.btn::after{ /* sheen */
  content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-22deg); transition:left .65s var(--ease);
}
.btn:hover::after{left:150%}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

.btn--primary{background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-glow)}
.btn--primary:hover{box-shadow:0 18px 55px -10px rgba(0,180,255,.75)}

.btn--ghost{background:rgba(255,255,255,.05); color:var(--fg); border-color:var(--line-strong); backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.34)}

.btn--dark{background:var(--paper-ink); color:#fff}
.btn--dark:hover{box-shadow:0 16px 40px -14px rgba(8,17,31,.7)}

.btn--outline-ink{border-color:var(--paper-line); color:var(--paper-ink); background:#fff}
.btn--outline-ink:hover{border-color:var(--brand); color:var(--brand-deep)}

.btn--lg{padding:1.15rem 2.1rem; font-size:.95rem}
.btn--sm{padding:.65rem 1.1rem; font-size:.78rem}
.btn--block{width:100%}

.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}

/* Text link with arrow */
.arrow-link{
  display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.88rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand-lite);
}
.arrow-link svg{width:16px; height:16px; transition:transform .35s var(--ease)}
.arrow-link:hover svg{transform:translateX(5px)}
.arrow-link--ink{color:var(--brand-deep)}

/* ---------- 6. Top bar + Header --------------------------------------- */
.topbar{
  position:relative; z-index:120; background:var(--grad-brand); color:#fff;
  font-size:.8rem; font-weight:600; letter-spacing:.03em;
}
.topbar__in{display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.55rem 0; text-align:center}
.topbar b{font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.22); padding:.15rem .5rem; border-radius:4px}
.topbar u{text-underline-offset:3px}
@media(max-width:560px){.topbar__in{font-size:.72rem; padding:.45rem 0}}

.site-head{
  position:sticky; top:0; z-index:110; width:100%;
  background:rgba(5,8,15,.55); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent; transition:background .35s,border-color .35s,box-shadow .35s;
}
.site-head.is-stuck{background:rgba(5,8,15,.94); border-bottom-color:var(--line); box-shadow:0 12px 40px -24px #000}
.head__in{display:flex; align-items:center; gap:1.6rem; height:var(--nav-h)}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:30px; width:auto}

.nav{display:flex; align-items:center; gap:.25rem; margin-left:auto}
.nav__link{
  background:none; border:0; font-family:inherit; cursor:pointer;
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
  padding:.6rem .85rem; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--fg-dim);
  transition:color .25s,background .25s;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:#fff; background:rgba(255,255,255,.06)}
.nav__link.is-active{color:#fff}
.nav__link.is-active::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:2px;
  background:var(--grad-brand); border-radius:2px;
}
.nav__link .chev{width:13px; height:13px; transition:transform .3s}
.nav__link[aria-expanded="true"] .chev{transform:rotate(180deg)}

.head__actions{display:flex; align-items:center; gap:.7rem; flex:none}
.head__tel{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.88rem; color:#fff;
  padding:.55rem .8rem; border-radius:8px; border:1px solid var(--line-strong);
  transition:border-color .25s,background .25s;
}
.head__tel:hover{border-color:var(--brand); background:rgba(0,155,255,.1)}
.head__tel svg{width:16px;height:16px;color:var(--brand-lite)}

/* Mega menu */
.mega{
  position:absolute; left:50%; transform:translate(-50%,10px); top:calc(100% + 8px);
  width:min(920px,calc(100vw - 40px));
  background:linear-gradient(180deg,#0B1524,#070C16);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px #000; padding:1.1rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  opacity:0; visibility:hidden; pointer-events:none; transition:.3s var(--ease);
}
.mega.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0)}
.mega::before{content:''; position:absolute; left:0; right:0; top:-18px; height:18px}
.mega__item{display:flex; gap:.85rem; padding:.85rem; border-radius:var(--r); transition:background .25s}
.mega__item:hover{background:rgba(0,155,255,.1)}
.mega__ic{
  width:42px; height:42px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:rgba(0,155,255,.14); border:1px solid rgba(0,155,255,.25); color:var(--brand-lite);
}
.mega__ic svg{width:20px;height:20px}
.mega__txt{display:block; min-width:0}
.mega__t{display:block; font-weight:700; font-size:.94rem; color:#fff; margin-bottom:.15rem}
.mega__d{display:block; font-size:.8rem; color:var(--fg-dimmer); line-height:1.45}
.mega__cta{
  grid-column:1/-1; margin-top:.4rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding:1rem 1.1rem; border-radius:var(--r);
  background:linear-gradient(120deg,rgba(0,155,255,.16),rgba(0,88,216,.08)); border:1px solid rgba(0,155,255,.22);
}
.mega__cta p{font-size:.88rem; color:var(--fg-dim)}
.mega__cta strong{display:block; color:#fff; font-weight:700; font-size:.98rem}
@media(max-width:1080px){.nav,.head__tel{display:none}}

/* Burger + mobile drawer */
.burger{
  display:none; position:relative; width:44px; height:44px; border-radius:10px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.05); cursor:pointer;
}
.burger span{
  position:absolute; left:50%; margin-left:-9.5px; width:19px; height:2px;
  background:#fff; border-radius:2px; transition:.3s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){top:21px; transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0; transform:scaleX(.2)}
.burger.is-open span:nth-child(3){top:21px; transform:rotate(-45deg)}
@media(max-width:1080px){.burger{display:block}}

.drawer{
  position:fixed; inset:0; z-index:105; background:rgba(4,7,13,.985); backdrop-filter:blur(20px);
  padding:150px 0 48px; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.35s var(--ease);
}
.drawer.is-open{opacity:1; visibility:visible; transform:none}
.drawer__group{border-top:1px solid var(--line); padding:1.1rem 0}
.drawer__label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dimmer); margin-bottom:.9rem; font-weight:700}
.drawer a.drawer__link{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; padding:.65rem 0;
  font-family:var(--f-display); font-variation-settings:'wdth' 105; text-transform:uppercase;
  font-weight:700; font-size:1.35rem; letter-spacing:-.01em; color:#fff;
}
.drawer a.drawer__link span{display:block; max-width:34ch; font-size:.78rem; line-height:1.4; font-family:var(--f-body); text-transform:none; letter-spacing:0; color:var(--fg-dimmer); font-weight:400}
.drawer a.drawer__link:hover{color:var(--brand-lite)}
.drawer__foot{display:grid; gap:.7rem; margin-top:1.6rem}

/* ---------- 7. Hero --------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 520px at 50% 8%,rgba(0,155,255,.20),transparent 62%),
    radial-gradient(700px 480px at 88% 72%,rgba(0,88,216,.20),transparent 66%),
    linear-gradient(180deg,#05080F 0%,#060B16 45%,#040710 100%);
  padding-top:clamp(36px,4.6vw,62px);
}
.hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 30%,#000 10%,transparent 76%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 30%,#000 10%,transparent 76%);
}
.hero__in{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.5rem}
.hero h1{max-width:22ch}
@media(min-width:620px){.hero h1 .grad-text{white-space:nowrap}}
.hero .lead{max-width:60ch}
.hero__rating{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap;
  text-align:center; max-width:100%; gap:.5rem .7rem; padding:.5rem .95rem .5rem .6rem;
  border-radius:999px; background:rgba(255,255,255,.055); border:1px solid var(--line-strong);
  font-size:.82rem; color:var(--fg-dim); backdrop-filter:blur(8px);
}
.stars{display:inline-flex; gap:2px}
.stars svg{width:15px; height:15px; color:#FFC53D}
.hero__rating b{color:#fff; font-weight:700}

/* ---------- Hero: Rennstrecke ----------------------------------------
   Ablauf: Strecke zeichnet sich ein -> Sektoren -> Startampeln -> Lichter aus
   -> Leuchtpunkt fährt Runden. Die JS-Logik steuert .is-on / .is-go.        */
.circuit{position:relative; z-index:2; margin-top:clamp(18px,2.4vw,32px); padding-bottom:clamp(44px,6vw,84px)}

/* HUD über der Strecke */
.circuit__hud{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:980px; margin:0 auto; padding:0 .25rem;
}
.hud__cell{display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1 1 0; text-align:left}
.hud__cell--right{align-items:flex-end; text-align:right}
.hud__k{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:.64rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dimmer);
}
.hud__k span{color:#fff}
.hud__dot{width:7px; height:7px; border-radius:50%; background:#FF3B3B; animation:hudLive 1.6s ease-out infinite}
@keyframes hudLive{0%{box-shadow:0 0 0 0 rgba(255,59,59,.65)}100%{box-shadow:0 0 0 8px rgba(255,59,59,0)}}
.hud__cell b{
  font-family:var(--f-display); font-variation-settings:'wdth' 112; font-weight:800;
  font-size:clamp(.9rem,1.35vw,1.12rem); letter-spacing:-.01em; text-transform:uppercase; color:#fff; white-space:nowrap;
}
.hud__cell b.hud__time{font-family:var(--f-body); font-variation-settings:normal; font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* Startampel */
.lights{
  display:flex; gap:clamp(6px,.9vw,10px); padding:.5rem .75rem; border-radius:999px; flex:none;
  background:rgba(8,13,24,.72); border:1px solid var(--line);
}
.lights i{
  display:block; width:clamp(10px,1.15vw,14px); aspect-ratio:1; border-radius:50%;
  background:#2B0E13; box-shadow:inset 0 0 0 1px rgba(255,90,90,.2);
}
.circuit.is-on .lights i{animation:lightOn .1s linear forwards; animation-delay:calc(2.4s + var(--k) * .34s)}
.circuit.is-go .lights i{animation:none}
@keyframes lightOn{to{background:#FF2D2D; box-shadow:0 0 14px 2px rgba(255,45,45,.75), inset 0 0 0 1px rgba(255,170,170,.55)}}

/* Bühne: SVG und Karten teilen sich dasselbe 2:1-Koordinatensystem */
.circuit__stage{position:relative; width:100%; aspect-ratio:2 / 1}
.circuit__svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.trk-geo{fill:none; stroke:none}
.trk-kerb{fill:none; stroke:rgba(130,190,255,.15); stroke-width:36; stroke-linejoin:round}
.trk-asphalt{fill:none; stroke:#0B1526; stroke-width:28; stroke-linejoin:round}
.trk-sector{
  fill:none; stroke:var(--brand); stroke-width:3.5; stroke-linecap:butt; stroke-dasharray:246 754; opacity:.5;
  transition:opacity .35s, stroke .35s, stroke-width .35s;
}
.trk-sector.is-done{opacity:.95}
.trk-sector.is-live,.trk-sector.is-hover{stroke:#7ADCFF; stroke-width:5; opacity:1}
.trk-glow{fill:none; stroke:var(--brand-glow); stroke-width:24; stroke-linecap:butt; opacity:0; transition:opacity .45s}
.trk-glow.is-live,.trk-glow.is-hover{opacity:.15}
.trk-label{font:700 11px var(--f-body); letter-spacing:.32em; fill:var(--fg-dimmer)}

.trk-node__in{transform-box:fill-box; transform-origin:center}
.trk-node .ring{fill:#060B15; stroke:var(--brand); stroke-width:2.2; transition:fill .3s, stroke .3s}
.trk-node text{font:800 11px var(--f-body); fill:#fff; text-anchor:middle; dominant-baseline:central}
.trk-node .pulse{fill:none; stroke:var(--brand-glow); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center}
.trk-node.is-live .ring,.trk-node.is-hover .ring{fill:var(--brand); stroke:#fff}
.trk-node.is-live .pulse{animation:nodePulse 1.4s var(--ease) infinite}
@keyframes nodePulse{0%{opacity:.85; transform:scale(1)}100%{opacity:0; transform:scale(2.6)}}

.trk-leader{fill:none; stroke:rgba(120,190,255,.34); stroke-width:1.3; transition:stroke .35s}
.trk-leader-dot{fill:rgba(120,190,255,.6); transition:fill .35s}
.trk-leader.is-live,.trk-leader.is-hover{stroke:rgba(122,220,255,.95)}
.trk-leader-dot.is-live,.trk-leader-dot.is-hover{fill:#7ADCFF}

.trk-trail{fill:none; stroke-linecap:round; transition:opacity .5s}
.trk-trail--long{stroke:var(--brand-glow); stroke-width:6; opacity:.3}
.trk-trail--short{stroke:#fff; stroke-width:3.4; opacity:.9}
.trk-car{fill:#fff; transition:opacity .5s}
.trk-car-glow{transition:opacity .5s}

/* Sektorkarten (Desktop: an ihren Ankerpunkten rund um die Strecke) */
.circuit__cards{position:absolute; inset:0; pointer-events:none}
.sector{
  position:absolute; top:var(--y); width:clamp(198px,21.5%,262px); transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.35rem; padding:.95rem 1.05rem 1rem; pointer-events:auto;
  border-radius:16px; background:rgba(8,13,24,.8); border:1px solid var(--line-strong);
  backdrop-filter:blur(10px); text-align:left; color:var(--fg);
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.sector--r{left:var(--x)}
.sector--l{right:calc(100% - var(--x))}
.sector__top{display:flex; align-items:center; gap:.5rem}
.sector__no{
  font-size:.7rem; font-weight:800; line-height:1; letter-spacing:.06em; padding:.3rem .45rem; border-radius:6px;
  background:rgba(0,155,255,.14); color:var(--brand-lite); border:1px solid rgba(0,155,255,.3); transition:.3s;
}
.sector__label{font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dimmer)}
.sector__ic{
  margin-left:auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.05); color:var(--brand-lite);
}
.sector__ic svg{width:16px; height:16px}
.sector__name{
  font-family:var(--f-display); font-variation-settings:'wdth' 106; font-weight:800; text-transform:uppercase;
  font-size:clamp(.86rem,1.05vw,1rem); line-height:1.12; letter-spacing:-.015em; color:#fff; hyphens:manual;
}
.sector__desc{font-size:.8rem; line-height:1.45; color:var(--fg-dim)}
.sector__bar{position:relative; height:3px; margin-top:.3rem; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.sector__bar::after{
  content:''; position:absolute; inset:0; background:var(--grad-brand);
  transform-origin:left center; transform:scaleX(var(--p,0));
}
.sector__go{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.1rem;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-lite);
}
.sector__go svg{width:13px; height:13px; transition:transform .3s var(--ease)}
.sector:hover .sector__go svg{transform:translateX(4px)}
.sector.is-live,.sector:hover,.sector:focus-visible{
  border-color:rgba(0,180,255,.65); background:rgba(0,52,110,.42);
  box-shadow:0 0 0 1px rgba(0,180,255,.22), 0 18px 50px -18px rgba(0,180,255,.7);
}
.sector.is-live .sector__no{background:var(--brand); color:#fff; border-color:transparent}
.sector__flag{
  position:absolute; top:0; right:14px; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .6rem; border-radius:999px;
  background:var(--grad-brand); color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; box-shadow:var(--shadow-glow); white-space:nowrap;
}
.sector__flag svg{width:11px; height:11px}

/* --- Einzeichnen (nur mit JS und ohne reduzierte Bewegung) ------------- */
html.js .circuit:not(.is-static) .circuit__hud{opacity:0}
html.js .circuit:not(.is-static) .trk-kerb,
html.js .circuit:not(.is-static) .trk-asphalt{stroke-dasharray:1000; stroke-dashoffset:1000}
html.js .circuit:not(.is-static) .trk-sector{stroke-dasharray:0 1000}
html.js .circuit:not(.is-static) .trk-start,
html.js .circuit:not(.is-static) .trk-label{opacity:0}
html.js .circuit:not(.is-static) .trk-node__in{opacity:0; transform:scale(.2)}
html.js .circuit:not(.is-static) .trk-leader{stroke-dasharray:100; stroke-dashoffset:100}
html.js .circuit:not(.is-static) .trk-leader-dot{opacity:0}
html.js .circuit:not(.is-static) .sector{opacity:0}
html.js .circuit:not(.is-go) .trk-trail,
html.js .circuit:not(.is-go) .trk-car,
html.js .circuit:not(.is-go) .trk-car-glow{opacity:0}

.circuit.is-on .circuit__hud{animation:circFade .8s var(--ease) 1.3s forwards}
.circuit.is-on .trk-kerb,
.circuit.is-on .trk-asphalt{animation:trkDraw 2.2s cubic-bezier(.65,0,.35,1) .25s forwards}
.circuit.is-on .trk-start,
.circuit.is-on .trk-label{animation:circFade .6s ease 1.9s forwards}
.circuit.is-on .trk-sector{animation:trkSector .5s var(--ease) forwards; animation-delay:calc(2.2s + var(--i) * .28s)}
.circuit.is-on .trk-node__in{animation:nodeIn .55s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(2.35s + var(--i) * .28s)}
.circuit.is-on .trk-leader{animation:trkDraw .45s var(--ease) forwards; animation-delay:calc(2.6s + var(--i) * .28s)}
.circuit.is-on .trk-leader-dot{animation:circFade .3s ease forwards; animation-delay:calc(3s + var(--i) * .28s)}
.circuit.is-on .sector{animation:sectorIn .6s var(--ease) forwards; animation-delay:calc(2.75s + var(--i) * .28s)}

@keyframes trkDraw{to{stroke-dashoffset:0}}
@keyframes trkSector{to{stroke-dasharray:246 754}}
@keyframes circFade{to{opacity:1}}
@keyframes nodeIn{to{opacity:1; transform:scale(1)}}
@keyframes sectorIn{from{opacity:0; translate:0 14px}to{opacity:1; translate:0 0}}

/* --- Tablet & Handy: Strecke oben, Sektoren als 2x2-Raster darunter ---- */
@media(max-width:980px){
  .circuit__stage{aspect-ratio:auto; display:flex; flex-direction:column; gap:clamp(12px,3vw,20px)}
  .circuit__svg{position:relative; inset:auto; height:auto; aspect-ratio:684 / 570}
  .trk-leaders{display:none}
  .circuit__cards{position:static; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .sector{position:relative; top:auto; left:auto; right:auto; width:auto; transform:none}
  .sector__name{font-size:.9rem}
}
@media(max-width:560px){
  .circuit{margin-top:18px; padding-bottom:36px}
  .circuit__hud{gap:.5rem}
  /* Spalten nach Inhalt statt gleich breit: Sonst ist die linke Spalte schmaler als
     „CleanXCar Circuit“ und die Startampel liegt über dem Schriftzug (bis 430 px). */
  .hud__cell{flex:0 1 auto}
  .hud__k{font-size:.56rem; letter-spacing:.16em}
  .hud__cell b{font-size:.78rem}
  .lights{padding:.4rem .5rem; gap:5px}
  .lights i{width:9px}
  .sector{padding:.8rem .8rem .85rem; gap:.3rem; border-radius:14px}
  .sector__label,.sector__desc{display:none}
  .sector__ic{width:26px; height:26px}
  .sector__name{font-size:.8rem}
  .sector__flag{right:10px; font-size:.52rem; padding:.2rem .45rem}
}
/* Sehr schmale Handys: Der Schriftzug darf in zwei Zeilen umbrechen, statt unter die Ampel zu laufen. */
@media(max-width:359px){
  .hud__cell b{white-space:normal}
}

/* scroll hint */
.scroll-hint{display:inline-flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--fg-dimmer); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase}
.scroll-hint i{display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--brand),transparent); animation:hintPulse 2.1s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.25; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ---------- 8. Stats -------------------------------------------------- */
.stats{
  position:relative; z-index:3; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,18,32,.7),rgba(5,8,15,.7));
}
.stats__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:clamp(24px,3.4vw,44px) clamp(12px,2vw,26px); text-align:center; position:relative}
.stat+.stat{border-left:1px solid var(--line)}
.stat__n{
  font-family:var(--f-display); font-variation-settings:'wdth' 112; font-weight:800;
  font-size:clamp(2rem,4.4vw,3.3rem); line-height:1; letter-spacing:-.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__n{white-space:normal; text-wrap:balance}
.stat__l{margin-top:.5rem; font-size:.8rem; color:var(--fg-dimmer); letter-spacing:.09em; text-transform:uppercase; font-weight:600}
@media(max-width:760px){
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(odd)+.stat{border-left:1px solid var(--line)}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stat:nth-child(3){border-left:none}
}

/* ---------- 9. Partner ------------------------------------------------ */
/* Grundzustand (ohne JavaScript, bei "Bewegung reduzieren"): alle Kacheln
   stehen umbrechend nebeneinander. Erst mit JavaScript wird daraus eine
   Zeile, die von rechts nach links laeuft. */
/* clip statt hidden: Bekommt ein Partner-Link den Fokus, darf der Browser
   das Band nicht selbst seitlich scrollen, sonst verrutscht die Schleife. */
.pband{overflow:hidden; overflow:clip; padding:14px 0 22px; --pgap:clamp(30px,4vw,56px)}
.pband__track{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--pgap); list-style:none; margin:0; padding:0;
}
.ptile{
  position:relative; flex:none;
  width:clamp(158px,15vw,200px); height:clamp(78px,7.5vw,94px);
  padding:.85rem 1.15rem; border-radius:14px; background:#fff;
  border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.ptile:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,155,255,.55)}
/* Die Kachel hebt sich beim Hovern um 4 px. Stand die Maus am unteren Rand,
   lag sie danach unter der Kachel, die Kachel sank zurueck, hob sich wieder
   und sprang so im Takt. Waehrend des Hoverns reicht die Trefferflaeche
   deshalb 6 px unter die Kachel. */
.ptile:hover::before{content:''; position:absolute; left:0; right:0; top:100%; height:6px}
.ptile img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  filter:grayscale(1) contrast(.9); opacity:.78;
  transition:filter .35s,opacity .35s;
}
.ptile:hover img{filter:none; opacity:1}
.section--paper .ptile{border-color:var(--paper-line); box-shadow:0 8px 24px -18px rgba(4,20,40,.6)}

/* Sonaire und Doerr Group: breiter, in Farbe, mit Ring und Schein */
.ptile--star{
  width:clamp(224px,21vw,286px);
  border-color:rgba(138,212,255,.55);
  box-shadow:0 0 0 4px rgba(0,155,255,.13), 0 18px 40px -22px rgba(0,155,255,.75);
}
/* Beim Hovern bleibt der Ring, nur der Schein wird kraeftiger. */
.ptile--star:hover{box-shadow:0 0 0 4px rgba(0,155,255,.13), 0 18px 40px -18px rgba(0,155,255,.55)}
.ptile--star img{filter:none; opacity:1}
/* Sonaire und Doerr Group sind verlinkt. Der Link deckt die ganze Kachel ab
   und uebernimmt ihren Innenabstand, damit Logo und Faehnchen bleiben, wo
   sie waren. */
.ptile__link{position:absolute; inset:0; padding:inherit; border-radius:13px}
.ptile__flag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:.22rem .7rem; border-radius:999px; white-space:nowrap; z-index:2;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff;
  font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.section--paper .ptile--star{border-color:rgba(0,155,255,.4); box-shadow:0 0 0 4px rgba(0,155,255,.1), 0 14px 32px -20px rgba(4,20,40,.7)}

/* Der Schimmer. Ein weisser Glanz waere auf weissem Grund unsichtbar,
   deshalb zieht ein zarter Streifen in Markenblau ueber die Kachel.
   Bewegt wird nicht das Element, sondern nur der Verlauf in seinem Inneren
   (background-position). Ein verschobenes Element wuerde seine Beschneidung
   mitnehmen und ueber den Kachelrand hinauslaufen. */
.ptile--star::after{
  content:''; position:absolute; inset:0; border-radius:13px;
  pointer-events:none;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 44%,
    rgba(0,155,255,.05) 48%,
    rgba(130,220,255,.22) 50%,
    rgba(0,155,255,.05) 52%,
    rgba(255,255,255,0) 56%);
  background-repeat:no-repeat;
  background-size:300% 100%;
  background-position:100% 0;
  animation:pshimmer 7s ease-in-out infinite;
  animation-play-state:paused;
}
/* Die zweite Kachel zieht um die halbe Runde versetzt, damit nie beide
   gleichzeitig schimmern. */
.ptile--star-2::after{animation-delay:-3.5s}
@keyframes pshimmer{
  0%,7%{background-position:100% 0}
  42%,100%{background-position:0 0}
}

/* Mit JavaScript: eine Zeile, die von rechts nach links laeuft. main.js
   verdoppelt den Inhalt, deshalb ist -50% genau eine Runde. Dafuer braucht
   die Leiste hinten noch einen Abstand: Zwischen 30 Kacheln liegen nur 29
   Abstaende, ohne den Rest sprang das Band je Runde um einen halben. */
html.js .pband{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
html.js .pband__track{
  flex-wrap:nowrap; justify-content:flex-start; width:max-content;
  padding-right:var(--pgap);
  animation:pslide 88s linear infinite; animation-play-state:paused;
}
/* Erst loslaufen, wenn der Bereich im Bild ist - main.js setzt is-running.
   So steht beim Hinscrollen das Premium-Paar bereit statt mitten im Lauf. */
html.js .pband.is-running .pband__track,
html.js .pband.is-running .ptile--star::after{animation-play-state:running}
html.js .pband:hover .pband__track{animation-play-state:paused}
/* Steht der Tastaturfokus auf einem Partner-Link, haelt das Band ebenfalls. */
html.js .pband:has(:focus-visible) .pband__track{animation-play-state:paused}
@keyframes pslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* "Bewegung reduzieren": nichts laeuft, nichts schimmert - zurueck in den
   umbrechenden Grundzustand, damit alle Partner sichtbar bleiben. */
@media(prefers-reduced-motion:reduce){
  html.js .pband{-webkit-mask-image:none; mask-image:none}
  html.js .pband__track{flex-wrap:wrap; justify-content:center; width:auto; padding-right:0; animation:none}
  .ptile--star::after{animation:none; opacity:0}
}

/* ---------- 10. Service cards ----------------------------------------- */
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:linear-gradient(180deg,#0C1524,#080D18);
  border:1px solid var(--line); transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;
}
.card:hover{transform:translateY(-8px); border-color:rgba(0,155,255,.42); box-shadow:0 30px 70px -30px rgba(0,155,255,.55)}
.card__media{position:relative; aspect-ratio:16/11; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,8,15,0) 30%,rgba(5,8,15,.92) 100%)}
.card__tag{
  position:absolute; z-index:2; top:14px; left:14px; padding:.35rem .7rem; border-radius:6px;
  background:rgba(5,8,15,.72); border:1px solid var(--line-strong); backdrop-filter:blur(8px);
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-lite);
}
.card__body h3{font-size:clamp(1rem,1.22vw,1.14rem); letter-spacing:-.028em; hyphens:auto}
.card__body{padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:.8rem; flex:1}
.card__body p{color:var(--fg-dim); font-size:.94rem; line-height:1.6}
.card__list{display:grid; gap:.42rem; margin-top:.1rem}
.card__list li{display:flex; gap:.55rem; font-size:.87rem; color:var(--fg-dim); align-items:flex-start}
.card__list svg{width:15px; height:15px; color:var(--brand); flex:none; margin-top:.3rem}
.card__foot{margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; border-top:1px solid var(--line)}
.card__price{font-size:.82rem; color:var(--fg-dimmer)}
.card__price b{display:block; white-space:nowrap; color:#fff; font-size:1rem; font-weight:700; font-family:var(--f-display); font-variation-settings:'wdth' 105}
/* Leistungs-Grid: die Bestseller-Karte ist breiter und tritt hervor */
.grid--services{display:grid; gap:clamp(18px,2.4vw,30px); grid-template-columns:1fr 1fr 1.24fr 1fr; align-items:stretch}
@media(max-width:980px){.grid--services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid--services{grid-template-columns:minmax(0,1fr)}}

.card--featured{
  border-color:rgba(0,155,255,.5);
  background:linear-gradient(180deg,rgba(0,155,255,.12),#080E1A 58%);
  box-shadow:0 28px 70px -32px rgba(0,155,255,.6);
}
@media(min-width:981px){
  .card--featured{margin-block:-18px; z-index:2}
  .card--featured .card__media{aspect-ratio:16/10}
}
.card--featured:hover{border-color:rgba(0,180,255,.8); box-shadow:0 36px 90px -30px rgba(0,180,255,.7)}
.card--featured .card__body{padding-top:clamp(20px,2.4vw,30px)}
.card--featured .card__price b{color:var(--brand-lite)}
.card__flag{
  position:absolute; z-index:4; top:14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.4rem .9rem; border-radius:999px; background:var(--grad-brand); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:var(--shadow-glow);
}
.card__flag svg{width:13px; height:13px}
.card--wide{grid-column:span 2}
@media(max-width:640px){.card--wide{grid-column:auto}}

/* number-badge card (steps) */
.step{
  position:relative; padding:clamp(22px,2.6vw,32px); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line); overflow:hidden; transition:border-color .35s,transform .4s var(--ease);
}
.step:hover{border-color:rgba(0,155,255,.4); transform:translateY(-5px)}
.step__n{
  font-family:var(--f-display); font-variation-settings:'wdth' 118; font-weight:800; font-size:3.4rem;
  line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.4px rgba(0,155,255,.55);
  margin-bottom:.9rem; display:block;
}
.step h3{margin-bottom:.55rem; font-size:1.12rem}
.step p{color:var(--fg-dim); font-size:.92rem}
.step::after{
  content:''; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,155,255,.18),transparent 70%); opacity:0; transition:opacity .4s;
}
.step:hover::after{opacity:1}

/* feature tiles */
.tile{
  padding:clamp(20px,2.4vw,30px); border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex; flex-direction:column; gap:.75rem; transition:border-color .35s,transform .4s var(--ease),background .35s;
}
.tile:hover{border-color:rgba(0,155,255,.38); transform:translateY(-5px); background:linear-gradient(180deg,rgba(0,155,255,.07),rgba(255,255,255,.01))}
.tile__ic{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:rgba(0,155,255,.13); border:1px solid rgba(0,155,255,.26); color:var(--brand-lite);
}
.tile__ic svg{width:23px; height:23px}
.tile p{color:var(--fg-dim); font-size:.92rem}
.tile ul{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem}
.tile ul li{font-size:.72rem; font-weight:600; padding:.28rem .6rem; border-radius:999px; background:rgba(0,155,255,.12); color:var(--brand-lite); border:1px solid rgba(0,155,255,.2)}
.section--paper .tile{background:#fff; border-color:var(--paper-line); box-shadow:0 10px 30px -22px rgba(4,20,40,.5)}
.section--paper .tile:hover{border-color:rgba(0,155,255,.5); background:#fff}
.section--paper .tile p{color:var(--paper-dim)}
.section--paper .tile__ic{background:rgba(0,155,255,.1); color:var(--brand-deep)}

/* ---------- 11. Split feature band ------------------------------------ */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4.5vw,64px); align-items:stretch}
.split--rev .split__media{order:2}
.split--top{align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}.split--rev .split__media{order:0}}
.split__media{position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line)}
.split__media img{width:100%; height:100%; min-height:340px; object-fit:cover; aspect-ratio:4/3}
.split__copy{display:flex; flex-direction:column; justify-content:center; gap:1.2rem; align-items:flex-start}
.split__copy p{color:var(--fg-dim)}
.section--paper .split__copy p{color:var(--paper-dim)}
.section--paper .split__media{border-color:var(--paper-line)}
.badge-float{
  position:absolute; left:20px; bottom:20px; z-index:2; padding:.85rem 1.1rem; border-radius:14px;
  background:rgba(5,8,15,.82); border:1px solid var(--line-strong); backdrop-filter:blur(12px);
  display:flex; align-items:center; gap:.8rem;
}
.badge-float b{font-family:var(--f-display); font-variation-settings:'wdth' 110; font-size:1.5rem; color:#fff; line-height:1}
.badge-float span{font-size:.74rem; color:var(--fg-dim); letter-spacing:.06em; text-transform:uppercase; display:block}

/* checklist */
.checks{display:grid; gap:.65rem}
.checks li{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--fg-dim)}
.checks svg{width:20px; height:20px; flex:none; color:var(--brand); margin-top:.15rem}
.section--paper .checks li{color:var(--paper-dim)}

/* ---------- 12. Gallery ----------------------------------------------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px)}
.gal figure{position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); margin:0}
.gal img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .9s var(--ease)}
.gal figure:hover img{transform:scale(1.08)}
.gal figure::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,155,255,.28)); opacity:0; transition:opacity .4s}
.gal figure:hover::after{opacity:1}
.gal .tall{grid-row:span 2}
.gal .tall img{aspect-ratio:4/6.2}
.gal .wide{grid-column:span 2}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}.gal .tall{grid-row:auto}.gal .tall img{aspect-ratio:4/3}}

/* ---------- 13. Price / extras ---------------------------------------- */
.price{
  display:flex; flex-direction:column; gap:.55rem; padding:clamp(20px,2.3vw,28px);
  border-radius:var(--r-lg); border:1px solid var(--paper-line); background:#fff;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s;
}
.price:hover{transform:translateY(-6px); box-shadow:0 26px 60px -34px rgba(4,20,40,.6); border-color:rgba(0,155,255,.5)}
.price__top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.price h3{font-size:1.05rem; letter-spacing:-.01em}
.price__amt{
  font-family:var(--f-display); font-variation-settings:'wdth' 105; font-weight:800; font-size:1rem;
  white-space:nowrap; padding:.35rem .65rem; border-radius:6px; background:rgba(0,155,255,.1);
  color:var(--brand-deep); border:1px solid rgba(0,155,255,.22); letter-spacing:0;
}
.price p{font-size:.9rem; color:var(--paper-dim); line-height:1.55}
.price__ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(0,155,255,.1);color:var(--brand-deep);flex:none}
.price__ic svg{width:19px;height:19px}

/* pricing plan cards (dark) */
.plan{
  position:relative; display:flex; flex-direction:column; gap:1rem; padding:clamp(24px,2.8vw,34px);
  border-radius:var(--r-xl); border:1px solid var(--line); background:linear-gradient(180deg,#0C1524,#070C16);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;
}
.plan:hover{transform:translateY(-8px); border-color:rgba(0,155,255,.45); box-shadow:0 34px 80px -34px rgba(0,155,255,.5)}
.plan--hot{border-color:rgba(0,155,255,.55); background:linear-gradient(180deg,rgba(0,155,255,.13),#080E1A 55%)}
.plan__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:.35rem .85rem; border-radius:999px;
  background:var(--grad-brand); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:var(--shadow-glow); white-space:nowrap;
}
.plan__price{font-family:var(--f-display); font-variation-settings:'wdth' 110; font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.03em}
.plan__price small{display:block; font-family:var(--f-body); font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dimmer); margin-bottom:.4rem}

/* ---------- 14. Testimonials ------------------------------------------ */
.quote{
  display:flex; flex-direction:column; gap:1rem; padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .35s,transform .4s var(--ease);
}
.quote:hover{border-color:rgba(0,155,255,.35); transform:translateY(-5px)}
.quote p{color:var(--fg-dim); font-size:.95rem; line-height:1.7}
.quote__who{display:flex; align-items:center; gap:.75rem; margin-top:auto; padding-top:.3rem}
.avatar{
  color:#fff; line-height:1;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--grad-brand); color:#fff; font-weight:800; font-size:.9rem;
}
.quote__who__txt{display:block; min-width:0}
.quote__who__txt b{display:block; font-size:.92rem; color:#fff; font-weight:700}
.quote__who__txt span{font-size:.78rem; color:var(--fg-dimmer)}

/* google rating block */
.gscore{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; padding:1.1rem 1.4rem;
  border-radius:var(--r-lg); border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.gscore__n{font-family:var(--f-display); font-variation-settings:'wdth' 112; font-weight:800; font-size:2.6rem; line-height:1}

/* ---------- 15. Accordion / FAQ --------------------------------------- */
.acc{border-top:1px solid var(--line)}
.section--paper .acc{border-color:var(--paper-line)}
.acc__item{border-bottom:1px solid var(--line)}
.section--paper .acc__item{border-color:var(--paper-line)}
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.25rem 0; background:none; border:0; cursor:pointer; text-align:left;
  font-weight:600; font-size:1.02rem; color:inherit; transition:color .25s;
}
.acc__btn:hover{color:var(--brand)}
.acc__ic{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-strong); transition:.35s var(--ease); position:relative;
}
.section--paper .acc__ic{border-color:var(--paper-line)}
.acc__ic::before,.acc__ic::after{content:''; position:absolute; background:currentColor; border-radius:2px; transition:.35s var(--ease)}
.acc__ic::before{width:12px; height:2px}
.acc__ic::after{width:2px; height:12px}
.acc__item.is-open .acc__ic{background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(180deg)}
.acc__item.is-open .acc__ic::after{opacity:0}
.acc__panel{overflow:hidden; height:0; transition:height .4s var(--ease)}
.acc__panel > div{padding:0 0 1.4rem; max-width:78ch; color:var(--fg-dim); font-size:.96rem; line-height:1.72}
.section--paper .acc__panel > div{color:var(--paper-dim)}

/* ---------- 16. CTA band ---------------------------------------------- */
.cta{position:relative; overflow:hidden; isolation:isolate}
.cta__bg{position:absolute; inset:0; z-index:-2}
.cta__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3)}
.cta__bg::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg,rgba(4,7,13,.96) 30%,rgba(4,7,13,.72) 65%,rgba(0,60,140,.55))}
.cta__in{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:center}
@media(max-width:900px){.cta__in{grid-template-columns:1fr}}
.cta__card{
  padding:clamp(24px,3vw,36px); border-radius:var(--r-xl); border:1px solid var(--line-strong);
  background:rgba(8,13,24,.72); backdrop-filter:blur(14px); display:grid; gap:1rem;
}
.cta__in--form{grid-template-columns:.86fr 1.14fr; align-items:start; row-gap:clamp(20px,2.4vw,30px)}
.cta__copy{display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; grid-column:1; grid-row:1}
.cta__copy .h2{font-size:clamp(1.7rem,2.9vw,2.5rem)}
.cta__copy .lead{max-width:52ch}
.cta__card--info{grid-column:1; grid-row:2; width:100%; background:rgba(8,13,24,.6); padding:clamp(18px,2.2vw,26px)}
.cta__card--form{grid-column:2; grid-row:1 / span 2}
@media(max-width:980px){
  .cta__in--form{grid-template-columns:1fr; display:flex; flex-direction:column}
  .cta__copy,.cta__card--info,.cta__card--form{grid-column:auto; grid-row:auto}
  .cta__card--form{order:2}
  .cta__card--info{order:3}
}
.cta__card--form{background:linear-gradient(180deg,rgba(12,21,36,.94),rgba(8,13,24,.94)); gap:.4rem; align-content:start}
#anfrage{scroll-margin-top:calc(var(--nav-h) + 24px)}
.contact-row{display:flex; align-items:center; gap:.9rem; padding:.85rem 0}
.contact-row+.contact-row{border-top:1px solid var(--line)}
.contact-row__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(0,155,255,.14);border:1px solid rgba(0,155,255,.25);color:var(--brand-lite)}
.contact-row__ic svg{width:19px;height:19px}
.contact-row__txt{display:block; min-width:0}
.contact-row__txt span{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dimmer); font-weight:600}
.contact-row__txt b{font-size:1.02rem; font-weight:700; color:#fff; text-transform:none; letter-spacing:0}

/* strip CTA (thin, gradient) */
.strip{
  position:relative; overflow:hidden; background:var(--grad-brand); color:#fff;
}
.strip__in{display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; padding-block:clamp(28px,4vw,52px)}
.strip h2{font-size:clamp(1.5rem,3vw,2.4rem)}
.strip p{opacity:.9; font-size:.98rem; max-width:52ch}
.strip .btn--ghost{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4)}
.strip .btn--ghost:hover{background:rgba(255,255,255,.28)}
.strip::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px); opacity:.7;
}
.strip .wrap{position:relative; z-index:1}

/* ---------- 17. Forms ------------------------------------------------- */
.form{display:grid; gap:1rem}
.field{display:grid; gap:.4rem}
.field > label{font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dimmer)}
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border-radius:10px; background:rgba(255,255,255,.045);
  border:1px solid var(--line-strong); color:#fff; font-size:.95rem; transition:border-color .25s,background .25s;
}
.field textarea{min-height:130px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-dimmer)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brand); background:rgba(0,155,255,.07)}
.field select option{background:#0C1524; color:#fff}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:640px){.form__row{grid-template-columns:1fr}}
.field__label{font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dimmer)}
.field__label em{font-style:normal; letter-spacing:.04em; text-transform:none; font-weight:500; opacity:.8}
.choices{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.15rem}
.choice{display:inline-flex; position:relative; text-transform:none; letter-spacing:normal}
.choice input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.choice__box{
  display:inline-flex; align-items:center; gap:.5rem; pointer-events:none;
  padding:.6rem .9rem; border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.045); color:var(--fg-dim);
  font-size:.84rem; font-weight:600; line-height:1.2;
  transition:border-color .25s var(--ease),background .25s,color .25s,box-shadow .3s,transform .25s var(--ease);
}
.choice__box svg{width:16px; height:16px; flex:none; color:var(--fg-dimmer); transition:color .25s}
.choice:hover .choice__box{
  border-color:var(--brand); color:#fff; background:rgba(0,155,255,.14);
  box-shadow:0 0 0 3px rgba(0,155,255,.14), 0 10px 26px -12px rgba(0,155,255,.85);
  transform:translateY(-2px);
}
.choice:hover .choice__box svg{color:var(--brand-glow)}
.choice input:checked + .choice__box{
  border-color:transparent; color:#fff; background:var(--grad-brand);
  box-shadow:0 10px 30px -12px rgba(0,180,255,.9);
}
.choice input:checked + .choice__box svg{color:#fff}
.choice input:focus-visible + .choice__box{outline:2px solid var(--brand-glow); outline-offset:3px}
.form__note{font-size:.78rem; color:var(--fg-dimmer); line-height:1.55}
.check-inline{display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--fg-dim)}
.check-inline input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--brand); flex:none}

/* ---------- 18. Footer ------------------------------------------------ */
.site-foot{background:#03060C; border-top:1px solid var(--line); padding-top:clamp(48px,6vw,80px)}
.foot__top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(24px,3vw,44px); padding-bottom:clamp(34px,4vw,56px)}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .foot__top{grid-template-columns:1fr 1fr; gap:26px 20px; padding-bottom:26px}
  .foot__top > :first-child{grid-column:1 / -1}
  .foot h3{margin-bottom:.7rem}
  .foot ul{gap:.45rem}
  .foot a{font-size:.85rem}
  .foot__bar{flex-direction:column; align-items:flex-start; gap:.7rem; font-size:.78rem}
}
.foot__brand img{height:38px; width:auto; margin-bottom:1.2rem}
.foot__brand p{color:var(--fg-dimmer); font-size:.9rem; max-width:38ch}
.foot h3{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:1rem; font-family:var(--f-body); font-weight:700;
  font-variation-settings:inherit; line-height:inherit; hyphens:inherit; -webkit-hyphens:inherit; overflow-wrap:inherit}
.foot ul{display:grid; gap:.6rem}
.foot a{font-size:.9rem; color:var(--fg-dimmer); transition:color .25s}
.foot a:hover{color:var(--brand-lite)}
.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.3rem 0; border-top:1px solid var(--line); font-size:.82rem; color:var(--fg-dimmer);
}
.foot__meta{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center}
.foot__by{display:inline-flex; align-items:center; gap:.32rem; color:var(--fg-dimmer); transition:color .25s}
.foot__by strong{font-weight:700; color:var(--fg-dim); transition:color .25s}
.foot__by:hover,.foot__by:hover strong{color:var(--brand-lite)}
.socials{display:flex; gap:.5rem}
.socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--fg-dim);transition:.25s}
.socials a:hover{border-color:var(--brand); color:var(--brand-lite); background:rgba(0,155,255,.1)}
.socials svg{width:17px;height:17px}

/* ---------- 19. Mobile sticky action bar ------------------------------ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line);
  border-top:1px solid var(--line); backdrop-filter:blur(14px);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.22rem;
  padding:.65rem 0 .6rem; background:rgba(6,10,18,.96); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim);
}
.dock a svg{width:19px;height:19px}
.dock a.is-primary{background:var(--grad-brand); color:#fff}
@media(max-width:760px){.dock{display:grid} body{padding-bottom:64px} html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}}

/* floating whatsapp */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:96; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px}
@media(max-width:760px){.wa{bottom:78px; width:48px; height:48px} .wa svg{width:24px;height:24px}}

/* ---------- 20. Page hero (inner pages) ------------------------------- */
.phero{
  position:relative; overflow:hidden; padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,86px);
  background:linear-gradient(180deg,#060B15,#05080F);
}
.phero__bg{position:absolute; inset:0; z-index:0}
.phero__bg img{width:100%; height:100%; object-fit:cover; opacity:.35}
.phero__bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,8,15,.72),rgba(5,8,15,.97) 82%),radial-gradient(700px 380px at 20% 10%,rgba(0,155,255,.22),transparent 65%)}
.phero--slim{padding:clamp(34px,4.5vw,56px) 0 clamp(30px,3.5vw,44px)}
.phero--slim .h1{font-size:clamp(1.85rem,4.2vw,3.2rem)}
.phero--slim .lead{max-width:60ch}
.phero__in{position:relative; z-index:1; max-width:840px; display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start}
.crumbs{display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:var(--fg-dimmer)}
.crumbs a:hover{color:var(--brand-lite)}
.crumbs svg{width:13px;height:13px;opacity:.6}

/* ---------- 21. Misc -------------------------------------------------- */
.divider-slash{
  height:5px; width:100%; background:repeating-linear-gradient(100deg,var(--brand) 0 22px,transparent 22px 34px);
  opacity:.55; transform:skewX(0deg);
}
.hr{height:1px; background:var(--line); border:0; margin:clamp(30px,4vw,52px) 0}
.section--paper .hr{background:var(--paper-line)}
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem}
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.76rem; font-weight:600; padding:.42rem .85rem; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--fg-dim);
}
.pill svg{width:14px; height:14px; flex:none; color:var(--brand)}
.section--paper .pill{border-color:var(--paper-line); color:var(--paper-dim)}
.note{
  padding:1rem 1.2rem; border-radius:var(--r); border:1px solid rgba(0,155,255,.28);
  background:rgba(0,155,255,.08); font-size:.88rem; color:var(--fg-dim);
}
.section--paper .note{color:var(--paper-dim)}
.legal h2{font-size:1.35rem; margin:2.2rem 0 .8rem}
.legal h3{font-size:1.05rem; margin:1.6rem 0 .5rem}
.legal p,.legal li{color:var(--fg-dim); font-size:.95rem; line-height:1.75}
.legal ul{list-style:disc; padding-left:1.2rem; display:grid; gap:.4rem}
.legal a{color:var(--brand-lite); text-decoration:underline; text-underline-offset:3px}
/* Anfahrt: eigener Lageplan (OpenStreetMap-Daten, inline-SVG, keine Verbindung zu Dritten).
   Desktop neben den Fakten, etwa halbe Bildschirmhöhe; Handy eigener, quadratischer Plan. */
.anfahrt{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:stretch}
.anfahrt__fakten{grid-template-columns:1fr; gap:14px; align-content:stretch}
.anfahrt__fakten .tile{display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:18px; row-gap:.3rem; align-content:center; padding:18px 22px}
.anfahrt__fakten .tile__ic{grid-row:1 / span 2}
.lageplan-box{display:flex; flex-direction:column; gap:.6rem; margin:0}
.lageplan-box__link{
  position:relative; display:block; flex:1; min-height:clamp(340px,50vh,520px);
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--ink-3);
  transition:border-color .3s var(--ease);
  --lp-grund:var(--ink-3); --lp-schrift:var(--f-body);
}
.lageplan-box__link:hover,.lageplan-box__link:focus-visible{border-color:rgba(0,155,255,.5)}
.lageplan{position:absolute; inset:0; width:100%; height:100%; display:block}
.lageplan--mob{display:none}
.lp-schild rect{fill:rgba(8,13,24,.92); stroke:rgba(0,155,255,.55); stroke-width:1.5}
.lp-schild text{font-family:var(--f-body)}
.lp-schild__name{font-family:var(--f-display); font-weight:700; fill:#fff; letter-spacing:.01em}
.lp-schild__adr{fill:var(--fg-dim)}
.lageplan-box__link .lp-marke-ring{transform-box:fill-box; transform-origin:center}
.lageplan-box.is-in .lp-marke-ring{animation:lp-ankommen 1.4s var(--ease) .5s 1 both}
@keyframes lp-ankommen{0%{transform:scale(3.2); opacity:0} 60%{opacity:.9} 100%{transform:scale(1); opacity:.45}}
.lageplan-box__hint{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.03em;
  color:#fff; background:rgba(8,13,24,.88); border:1px solid var(--line-strong);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lageplan-box__hint svg{width:15px; height:15px}
.lageplan-box__link:hover .lageplan-box__hint{background:var(--brand); border-color:var(--brand)}
.lageplan-box figcaption{font-size:.78rem; color:var(--fg-dimmer)}
.lageplan-box figcaption a{color:var(--fg-dim); text-decoration:underline; text-underline-offset:3px}
@media(max-width:980px){
  .anfahrt{grid-template-columns:1fr}
  .anfahrt__fakten{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .anfahrt__fakten{grid-template-columns:1fr}
  .lageplan-box__link{flex:none; min-height:0; aspect-ratio:1/1}
  .lageplan--desk{display:none}
  .lageplan--mob{display:block}
  .lageplan--mob .lp-name{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .lageplan-box.is-in .lp-marke-ring{animation:none}
}

/* ---------- 22. Reveal animations ------------------------------------- */
html.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].is-in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  html.js [data-reveal]{opacity:1; transform:none}
}


/* ---------- 23. Feinschliff für kleine Screens ------------------------ */
@media(max-width:620px){
  .btn{font-size:.82rem; padding:.9rem 1.15rem; letter-spacing:.04em; white-space:normal; text-align:center}
  .btn--lg{padding:1.05rem 1.3rem; font-size:.85rem}
  .btn-row{width:100%; flex-direction:column; align-items:stretch}
  .btn-row > .btn{width:100%}
  .sec-head--split{flex-direction:column; align-items:flex-start}
  .sec-head--split > div{max-width:none}
  .hero__in{gap:1.2rem}
  .stat{padding:22px 10px}
  .gscore{flex-direction:column; align-items:flex-start}
  .gscore .btn{margin-left:0 !important; width:100%}
  .strip__in{align-items:flex-start}
  .cta__card{padding:20px}
  .split__media img{min-height:220px}
  .plan__flag{white-space:nowrap; font-size:.62rem}
}
@media(max-width:400px){
  body{font-size:15.8px}
  .wrap{padding-inline:16px}
}

/* --- 24. Mobil: Kopfzeile enger, unterer Bereich entschlackt --------- */
@media(max-width:760px){
  /* Burger sitzt näher am Rand, Logo näher an der linken Kante */
  .site-head .wrap{padding-inline:12px}
  .head__in{gap:.6rem}
  .head__actions{gap:.45rem; margin-left:auto}
  .brand img{height:26px}

  /* WhatsApp-Kreis entfällt – die feste Leiste unten hat ihn bereits */
  .wa{display:none}

  /* Kontaktabschnitt kompakter */
  .cta__card--info .contact-row{padding:.65rem 0; gap:.7rem}
  .cta__card--info .contact-row__ic{width:36px; height:36px; border-radius:10px}
  .cta__card--info .contact-row__ic svg{width:17px; height:17px}
  .cta__card--info .contact-row__txt b{font-size:.94rem}
  .choice__box{font-size:.8rem; padding:.55rem .8rem}
  .choice__box svg{width:15px; height:15px}

  /* Abstände im unteren Drittel zusammenziehen */
  .section{padding:clamp(48px,7vw,68px) 0}
  .strip__in{padding-block:30px; gap:1rem}
  .site-foot{padding-top:44px}
  .foot__brand p{font-size:.85rem; max-width:none}
  .socials a{width:36px; height:36px}
  .foot__bar{flex-direction:column; align-items:flex-start; gap:.7rem; font-size:.78rem}
  .foot__meta{gap:.4rem 1rem}
}
@media(max-width:430px){
  .site-head .btn--sm{padding:.6rem .8rem; font-size:.72rem; letter-spacing:.04em}
}


/* ---------- Intro „Logo" (nur Startseite, assets/js/intro.js) --------------
   Das Original-Logo setzt sich zusammen: Die drei schrägen Kacheln fliegen
   aus drei Richtungen herein und rasten ein, der Schriftzug schiebt sich
   hinter ihnen heraus, ein Glanz läuft darüber, dann zieht das Logo an seinen
   Platz in der Kopfzeile und die Startseite erscheint. Kacheln und Schriftzug
   sind Ausschnitte (clip-path) derselben Datei logo-white.webp, nichts ist
   nachgezeichnet. Das Kopfskript in index.html setzt .intro-laeuft nur beim
   ersten Aufruf je Sitzung; die Ebene trägt hidden, damit sie mit einem alten
   Stylesheet aus dem Cache unsichtbar bleibt. */
.intro{display:none}
html.intro-laeuft .intro[hidden]{display:block !important}
.intro{position:fixed; inset:0; z-index:400; overflow:hidden; cursor:pointer}
.intro__buehne{position:absolute; inset:0}
.intro__grund{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 42%,rgba(0,155,255,.16),transparent 62%),
    linear-gradient(180deg,#05080F 0%,#060B16 55%,#040710 100%);
}
.intro__logo{
  position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:min(56vw,640px); aspect-ratio:1308 / 402;
}
@media(max-width:700px){ .intro__logo{width:80vw} }
.intro__logo img{max-width:none}             /* sonst staucht img{max-width:100%} den Schriftzug */
.intro__teil{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0}
/* Ausschnitte aus dem Original (gemessen an logo-white.png, 1308 × 402) */
.intro__teil--oben{clip-path:inset(0 70.9% 67.4% 14.5%)}
.intro__teil--mitte{clip-path:inset(32.3% 86% 34.8% 0)}
.intro__teil--unten{clip-path:inset(65.9% 77% 0 7.2%)}
/* Schriftzug: schiebt sich hinter den Kacheln heraus */
.intro__schrift{position:absolute; top:0; bottom:0; left:14.14%; right:0; overflow:hidden}
.intro__schrift img{
  position:absolute; top:0; left:-16.47%; width:116.47%; height:100%;
  clip-path:inset(34.8% 0 34.8% 14.14%); transform:translateX(-100%);
}
/* Glanz nur auf den Pixeln des Logos */
.intro__glanz{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  -webkit-mask:url(../img/logo-white.webp) center / 100% 100% no-repeat;
  mask:url(../img/logo-white.webp) center / 100% 100% no-repeat;
  background:linear-gradient(110deg,transparent 40%,rgba(120,205,255,.95) 50%,transparent 60%) 120% 0 / 300% 100% no-repeat;
}

/* Mit Intro steht der Hero fertig da, wenn es aufgeht. */
html.js.intro-laeuft .hero [data-reveal]{opacity:1; transform:none; transition:none}
/* Nach dem Intro fährt der Punkt gleich los; die Startampel der Strecke
   bleibt dann aus (main.js: intro:start). */
html.js .circuit.is-intro .circuit__hud{animation:none; opacity:1}
html.js .circuit.is-intro .lights i{animation:none}

/* Im Intro zeichnet sich die Strecke schneller ein, damit sie steht, wenn
   die Seite erscheint (main.js: ZEICHNEN_MS). */
.circuit.is-intro .trk-kerb,
.circuit.is-intro .trk-asphalt{animation-duration:1.2s; animation-delay:.1s}
.circuit.is-intro .trk-start,
.circuit.is-intro .trk-label{animation-delay:1s}
.circuit.is-intro .trk-sector{animation-delay:calc(1.1s + var(--i) * .16s)}
.circuit.is-intro .trk-node__in{animation-delay:calc(1.2s + var(--i) * .16s)}
.circuit.is-intro .trk-leader{animation-delay:calc(1.35s + var(--i) * .16s)}
.circuit.is-intro .trk-leader-dot{animation-delay:calc(1.6s + var(--i) * .16s)}
.circuit.is-intro .sector{animation-delay:calc(1.5s + var(--i) * .16s)}

@media(prefers-reduced-motion:reduce){
  html.intro-laeuft .intro[hidden]{display:none !important}
}