/* ============================================================
   Reifenservice Zabibi — site.css  (Look: Dark/OLED + SaaS-Glow · Syne × Inter)
   Single source of truth: Tokens, Komponenten, Motion-Styles.
   ============================================================ */

:root{
  /* DARK (Default — Look #10 Dark/OLED) */
  --bg:#0D1014; --surface:#161B21; --card:#1C232B; --fg:#E7E9EE; --muted:#9AA3AF; --border:#2A323C;
  --accent:#FF8A1B; --accent-2:#FF4D2E; --accent-ink:#0D1014;
  --glow-1:rgba(255,138,27,.55); --glow-2:rgba(255,77,46,.40);
  --card-soft:rgba(255,255,255,.03); --hairline:rgba(255,255,255,.07);
  --shadow:0 18px 50px -20px rgba(0,0,0,.7); --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);

  --radius:14px; --radius-lg:22px; --radius-sm:9px;
  --wrap:1180px; --pad:clamp(1.15rem,4vw,2rem);

  --text-eyebrow:.78rem; --text-body:1.0625rem; --text-lead:clamp(1.12rem,1.4vw,1.32rem);
  --text-h4:clamp(1.1rem,1.6vw,1.3rem); --text-h3:clamp(1.25rem,2.2vw,1.62rem);
  --text-h2:clamp(1.65rem,3.6vw,2.5rem); --text-h1:clamp(2.1rem,5.2vw,3.5rem);
  --text-display:clamp(2.4rem,6.4vw,4.2rem);
  --lh-tight:1.06; --lh-snug:1.22; --lh-body:1.62;
  --tracking-tight:-.02em; --tracking-label:.16em;
  --dur:.45s; --ease:cubic-bezier(.16,1,.3,1); --focus:var(--accent);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#F1F3F6; --surface:#FFFFFF; --card:#FFFFFF; --fg:#14181E; --muted:#586070; --border:#E1E5EC;
  --glow-1:rgba(255,138,27,.30); --glow-2:rgba(255,77,46,.18);
  --card-soft:rgba(13,16,20,.025); --hairline:rgba(13,16,20,.08);
  --shadow:0 22px 50px -28px rgba(20,30,50,.35); --shadow-sm:0 8px 20px -14px rgba(20,30,50,.30);
  color-scheme:light;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body); font-weight:400;
  overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.font-head{ font-family:"Syne","Inter",sans-serif; font-weight:800; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* layout */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4rem,9vw,7.5rem); position:relative; }
.lead{ font-size:var(--text-lead); line-height:1.45; color:var(--muted); font-weight:500; max-width:62ch; }
.measure{ max-width:65ch; }
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:var(--text-eyebrow);
  font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--accent); }
.eyebrow::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--accent),transparent); }
.h2{ font-size:var(--text-h2); margin:.55rem 0 0; text-wrap:balance; }
.muted{ color:var(--muted); }
.amber{ color:var(--accent); }

/* background scene (fixed canvas + css glow fallback) */
.bg-scene{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--bg); }
.bg-scene canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.bg-grid{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(60% 55% at var(--gx,22%) var(--gy,18%), var(--glow-1), transparent 68%),
    radial-gradient(50% 50% at calc(100% - var(--gx,22%)) var(--gy2,82%), var(--glow-2), transparent 70%);
  mix-blend-mode:screen; transition:background-position .2s linear; }
[data-theme="light"] .bg-grid{ mix-blend-mode:multiply; opacity:.85; }

/* header — DEFAULT (transparent over dark hero) = IMMER helle Schrift; gescrollt = Theme-Schrift */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:90; transition:background .35s,box-shadow .35s,border-color .35s,color .35s; border-bottom:1px solid transparent; color:#fff; }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px; }
.site-header.scrolled{ background:color-mix(in oklab,var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--hairline); box-shadow:var(--shadow-sm); color:var(--fg); }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:"Syne"; font-weight:800; font-size:1.12rem; letter-spacing:-.01em; color:inherit; }
.brand .mark{ width:34px; height:34px; flex:none; }
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{ padding:.55rem .8rem; border-radius:var(--radius-sm); font-weight:500; font-size:.96rem; color:inherit; opacity:.85; transition:opacity .2s,background .2s,color .2s; }
.nav a:hover,.nav a.active{ opacity:1; background:var(--card-soft); color:var(--accent); }
.nav-cta{ margin-left:.3rem; }
.burger{ display:none; width:44px; height:44px; border:1px solid currentColor; border-radius:var(--radius-sm); background:transparent; color:inherit; align-items:center; justify-content:center; cursor:pointer; opacity:.9; }
.burger svg{ width:22px; height:22px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.35rem; border-radius:999px;
  font-weight:600; font-size:.98rem; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s,border-color .25s; will-change:transform; }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.btn-primary{ background:linear-gradient(180deg,#ffa340,var(--accent)); color:var(--accent-ink); box-shadow:0 10px 30px -10px var(--glow-1); font-weight:700; }
.btn-primary:hover{ box-shadow:0 16px 40px -10px var(--glow-1); transform:translateY(-2px); }
.btn-ghost{ background:var(--card-soft); border-color:var(--border); color:var(--fg); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-lg{ padding:1rem 1.6rem; font-size:1.05rem; }

/* cards */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.grid{ display:grid; gap:1.25rem; }
@media(min-width:720px){ .g-2{ grid-template-columns:repeat(2,1fr) } .g-3{ grid-template-columns:repeat(3,1fr) } .g-4{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1040px){ .g-4{ grid-template-columns:repeat(4,1fr) } }

/* service / feature card */
.svc{ overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease),border-color .4s; }
.svc:hover{ transform:translateY(-6px); border-color:color-mix(in oklab,var(--accent) 50%,var(--border)); }
.svc .ph{ aspect-ratio:16/11; overflow:hidden; position:relative; }
.svc .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc:hover .ph img{ transform:scale(1.07); }
.svc .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,10,13,.55)); }
.svc .body{ padding:1.3rem 1.35rem 1.45rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.svc h3{ font-size:var(--text-h4); }
.svc .more{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); font-weight:600; font-size:.95rem; padding-top:.6rem; }
.svc .more svg{ width:18px; height:18px; transition:transform .3s }
.svc:hover .more svg{ transform:translateX(4px) }

.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .85rem; border:1px solid var(--border); border-radius:999px; font-size:.86rem; font-weight:500; color:var(--muted); background:var(--card-soft); }
.tag-spec{ font-family:"Inter"; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.02em; }

/* stat */
.stat .num{ font-family:"Syne"; font-weight:800; font-size:clamp(2.1rem,4.5vw,3rem); color:var(--fg); line-height:1; font-variant-numeric:tabular-nums; }
.stat .num .u{ color:var(--accent); }
.stat .lbl{ color:var(--muted); margin-top:.4rem; font-size:.95rem; }

/* hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero .media{ position:absolute; inset:0; z-index:0; }
.hero .media img{ width:100%; height:100%; object-fit:cover; }
.hero .media::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(8,10,13,.55) 0%,rgba(8,10,13,.25) 30%,rgba(8,10,13,.82) 88%),
  radial-gradient(70% 60% at 78% 60%, rgba(255,138,27,.16), transparent 60%); }
.hero .inner{ position:relative; z-index:3; padding-block:clamp(6rem,12vh,9rem) clamp(3rem,7vh,5rem); width:100%; color:#fff; }
.hero h1{ font-size:var(--text-display); max-width:16ch; color:#fff; }
.hero .lead{ color:rgba(231,233,238,.88); }
.hero .lead strong{ color:#fff; }
.hero .chip{ color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.07); }
.hero .kicker{ margin-bottom:1rem; }
.hero-wheel{ position:absolute; z-index:2; right:clamp(-90px,2vw,40px); top:50%; transform:translateY(-50%); width:min(46vw,520px); aspect-ratio:1; pointer-events:none; opacity:.92; }
@media(max-width:860px){ .hero-wheel{ width:78vw; right:-22vw; top:30%; opacity:.5 } }

/* set-piece */
.setpiece{ position:relative; }
.sp-stage{ position:relative; height:100svh; display:grid; grid-template-columns:1fr; place-items:center; overflow:hidden; }
.sp-wheel{ width:min(74vw,560px); aspect-ratio:1; }
.sp-cap{ position:absolute; left:0; right:0; bottom:clamp(2rem,7vh,5rem); text-align:center; pointer-events:none; }
.sp-cap .step-no{ font-family:"Syne"; font-weight:800; color:var(--accent); letter-spacing:.2em; font-size:.85rem; }
.sp-cap h3{ font-size:clamp(1.4rem,3.4vw,2.1rem); margin:.3rem 0 .35rem; }
.sp-cap p{ color:var(--muted); max-width:46ch; margin:0 auto; }
.sp-readout{ position:absolute; top:clamp(5rem,11vh,6.5rem); left:50%; transform:translateX(-50%); font-family:"Inter"; font-variant-numeric:tabular-nums;
  border:1px solid var(--border); background:color-mix(in oklab,var(--surface) 70%,transparent); backdrop-filter:blur(8px); padding:.5rem 1rem; border-radius:999px; font-size:.9rem; color:var(--muted); }
.sp-readout b{ color:var(--accent); }

/* before/after */
.ba{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:16/10; --ba:50%; touch-action:none; background:var(--surface); }
.ba svg{ position:absolute; inset:0; width:100%; height:100%; }
.ba .ba-before{ clip-path:inset(0 var(--ba) 0 0); }
.ba .ba-handle{ position:absolute; top:0; bottom:0; left:calc(100% - var(--ba)); width:2px; background:var(--accent); box-shadow:0 0 18px var(--glow-1); z-index:4; }
.ba .ba-handle::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:999px; background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow); }
.ba .ba-handle .ar{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; font-size:.9rem; color:var(--accent-ink); font-weight:800; }
.ba-tag{ position:absolute; top:.8rem; z-index:5; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:.3rem .6rem; border-radius:999px; background:rgba(8,10,13,.6); color:#fff; pointer-events:none; }
.ba-tag-l{ left:.8rem } .ba-tag-r{ right:.8rem; background:var(--accent); color:var(--accent-ink); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:6; margin:0; }

/* process steps */
.steps{ counter-reset:s; display:grid; gap:1rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1.15rem 1.25rem; }
.step .no{ counter-increment:s; font-family:"Syne"; font-weight:800; color:var(--accent); font-size:1.4rem; width:2.6rem; height:2.6rem; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; }
.step .no::before{ content:"0" counter(s); }

/* faq */
.faq{ border-top:1px solid var(--border); }
.faq button{ width:100%; text-align:left; background:none; border:0; color:var(--fg); padding:1.15rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center; cursor:pointer; font-family:"Syne"; font-weight:700; font-size:var(--text-h4); }
.faq .ans{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); color:var(--muted); }
.faq .ans p{ padding:0 0 1.2rem; max-width:70ch; margin:0; }
.faq .ic{ flex:none; width:26px; height:26px; border:1px solid var(--border); border-radius:8px; display:grid; place-items:center; color:var(--accent); transition:transform .3s; }
.faq [aria-expanded="true"] .ic{ transform:rotate(45deg); }

/* page hero (subpages) */
.phero{ position:relative; min-height:62svh; display:flex; align-items:flex-end; overflow:hidden; }
.phero .media{ position:absolute; inset:0; z-index:0 }
.phero .media img{ width:100%; height:100%; object-fit:cover }
.phero .media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,13,.45),rgba(8,10,13,.85)),radial-gradient(60% 60% at 80% 50%,rgba(255,138,27,.14),transparent 60%) }
.phero .inner{ position:relative; z-index:2; padding-block:clamp(6rem,12vh,8rem) clamp(2rem,5vh,3.4rem); color:#fff; }
.phero h1{ font-size:var(--text-h1); max-width:18ch; color:#fff }
.phero .lead{ color:rgba(231,233,238,.88) }

.phero-wheel{ position:absolute; z-index:1; right:clamp(-60px,2vw,30px); top:18%; width:min(34vw,300px); aspect-ratio:1; opacity:.5; pointer-events:none; }
@media(max-width:760px){ .phero-wheel{ opacity:.3; width:60vw; right:-18vw } }

/* icon feature */
.feat{ display:flex; gap:.9rem; align-items:flex-start; }
.feat .ico{ flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in oklab,var(--accent) 14%,var(--card)); border:1px solid var(--border); color:var(--accent); }
.feat .ico svg{ width:24px; height:24px }
.feat h3{ font-size:var(--text-h4); margin:.1rem 0 .3rem }

/* spec list */
.spec{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.spec td{ padding:.85rem .2rem; border-bottom:1px solid var(--border); }
.spec td:last-child{ text-align:right; color:var(--accent); font-weight:600; }

/* form */
.field{ display:grid; gap:.4rem; margin-bottom:1rem }
.field label{ font-size:.9rem; font-weight:600; color:var(--muted) }
.field input,.field select,.field textarea{ width:100%; padding:.8rem 1rem; border:1px solid var(--border); background:var(--surface); color:var(--fg); border-radius:var(--radius-sm); font:inherit; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--accent); }

/* rounded key image */
.figure{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); position:relative; }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure.arc{ border-radius:140px 22px 22px 22px; }

/* footer */
.site-footer{ border-top:1px solid var(--border); background:var(--surface); margin-top:2rem; position:relative; z-index:1; }
.site-footer .cols{ display:grid; gap:2rem; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
@media(min-width:780px){ .site-footer .cols{ grid-template-columns:1.4fr 1fr 1fr 1.2fr } }
.site-footer a{ color:var(--muted); transition:color .2s } .site-footer a:hover{ color:var(--accent) }
.site-footer .foot-bottom{ border-top:1px solid var(--border); padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }

/* loading + page transition */
#loader{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:grid; place-items:center; transition:opacity .6s ease,visibility .6s; }
#loader.done{ opacity:0; visibility:hidden; }
#loader .lwheel{ width:84px; height:84px; }
.pt-wipe{ position:fixed; inset:0; z-index:9998; background:linear-gradient(120deg,var(--accent),var(--accent-2)); transform:translateY(100%); pointer-events:none; }

/* theme toggle */
.theme-tog{ width:44px; height:44px; border:1px solid currentColor; background:transparent; border-radius:var(--radius-sm); color:inherit; opacity:.9; display:grid; place-items:center; cursor:pointer; }
.theme-tog svg{ width:20px; height:20px } .theme-tog .sun{ display:none } [data-theme="light"] .theme-tog .sun{ display:block } [data-theme="light"] .theme-tog .moon{ display:none }

/* mobile nav */
@media(max-width:920px){
  .nav:not(.is-open){ display:none; }
  .burger{ display:inline-flex; }
  .nav{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); border-bottom:1px solid var(--border); padding:1rem var(--pad) 1.4rem; box-shadow:var(--shadow); color:var(--fg); }
  .nav a{ padding:.9rem .6rem; font-size:1.05rem; color:var(--fg); }
  .nav-cta{ margin:.6rem 0 0; justify-content:center; }
}

/* fail-safe: if engine blocked, show everything */
.no-anim [data-reveal]>*, .no-anim [data-split], .no-anim [data-depth], .no-anim [data-reveal]{ opacity:1 !important; transform:none !important; }

/* reduced motion: DÄMPFEN, not kill */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  [data-depth],[data-parallax]{ transform:none !important; }
  .bg-loop,[data-ambient]{ animation-duration:90s !important; }
  .hero-wheel,.lwheel{ animation-duration:8s !important; }
}