/* ══════════════════════════════════════════════════════════════
   start.css · Lindner Technik & Design · Startseite (Okt 2026)
   Leitmotiv: Explosionszeichnung. Joanis' eigener Volvo 240 setzt
   sich beim Laden aus Einzelteilen zusammen und fliegt beim Scrollen
   wieder auseinander. Darunter Werkstatt-Sprache: Stückliste,
   Fehlerspeicher, Prüfstempel, Probefahrt, Preisschilder.

   Bewegungsregeln
   · Nur transform / opacity (+ die Einzel-Properties translate/rotate).
   · Scroll-gekoppelt per animation-timeline (Klasse .sda, im <head>
     gesetzt). Ohne Unterstützung: IntersectionObserver (.no-sda + .in).
   · Ohne JS oder mit prefers-reduced-motion: alles statisch und lesbar.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:       #0C0B09;
  --surface:  #161310;
  --surface2: #1D1916;
  --border:   #2A2521;
  --text:     #F0ECE6;
  --muted:    #A0958A;
  --ink:      #D9D0C4;   /* Strich der Zeichnung */
  --ink-soft: #6F655B;
  --accent:   #C9590A;
  --accent-l: #E8701F;
  --accent-deep: #A6450A;
  --grid:     rgba(240,236,230,.045);
  --nav-bg:   rgba(12,11,9,.9);
  --ok:       #8DBF73;
  --mono: 'Space Mono','Space Mono Fallback',monospace;
  --disp: 'Syne','Syne Fallback',sans-serif;
  --body: 'DM Sans','DM Sans Fallback',sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --spring: cubic-bezier(.3,1.45,.5,1);
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}
[data-theme="light"] {
  --bg:       #F2EFE9;
  --surface:  #FBF9F5;
  --surface2: #ECE7DE;
  --border:   #D8D1C5;
  --text:     #1A1714;
  --muted:    #5F564C;
  --ink:      #2B2520;
  --ink-soft: #9A8F82;
  --accent:   #A6450A;
  --accent-l: #A6450A;
  --grid:     rgba(26,23,20,.06);
  --nav-bg:   rgba(242,239,233,.92);
  --ok:       #3F7A2C;
}

*,*::before,*::after { box-sizing: border-box; }
/* clip statt hidden: erzeugt keinen Scroll-Container, sticky und scroll() bleiben intakt */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 72px; }
body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65;
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
}
body::before { /* Korn */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::before { opacity: .035; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anchor { position: absolute; top: 0; }
:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px; }
h2, h3 { text-wrap: balance; }

/* ── Navigation ──────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.logo { font-family: var(--disp); font-weight: 800; font-size: 1.25rem; letter-spacing: -1px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: .7rem .75rem; display: inline-block; transition: color .25s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .45rem; height: 1px; background: var(--accent-l); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-right { display: flex; align-items: center; gap: .5rem; }

/* Drehzahlmesser = Lesefortschritt (nur mit scroll-timeline sichtbar) */
.rev { display: none; width: 44px; height: 26px; position: relative; overflow: hidden; }
.rev::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 36px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--ink-soft); }
.rev::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); transform: rotate(45deg); }
.rev i { position: absolute; left: calc(50% - 1px); bottom: 2px; width: 2px; height: 18px; background: var(--accent-l); border-radius: 2px; transform-origin: 50% 100%; transform: rotate(-80deg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem 1.35rem; border-radius: 3px;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; position: relative;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .25s;
}
/* Knopf mit Hub: steht leicht auf, drückt sich beim Klicken ein */
.btn-pri { background: var(--accent-deep); color: #fff; box-shadow: 0 4px 0 #5E2705; transform: translateY(-2px); }
.btn-pri:hover { background: #B34C0B; transform: translateY(-4px); box-shadow: 0 6px 0 #5E2705; }
.btn-pri:active { transform: translateY(2px); box-shadow: 0 0 0 #5E2705; transition-duration: .06s; }
.btn-sm { min-height: 44px; padding: .5rem .95rem; font-size: .75rem; box-shadow: 0 3px 0 #5E2705; }
.theme { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; transition: transform .5s var(--spring); }
.theme:hover { color: var(--text); transform: rotate(180deg); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: 3px; font-size: 1rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: 52px; min-width: 230px; background: var(--surface); border: 1px solid var(--border); padding: .4rem; box-shadow: 0 20px 40px rgba(0,0,0,.35); transform-origin: top right; }
.menu[open] .menu-panel { animation: drop .35s var(--spring); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.menu-panel a { display: block; padding: .85rem 1rem; text-decoration: none; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.menu-panel a:hover { background: var(--surface2); color: var(--accent-l); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 6vw, 80px);
  /* Zeichenpapier: Raster wie auf dem Konstruktionsblatt */
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.hero::after { /* Werkstattlampe von oben rechts */
  content: ""; position: absolute; right: -15%; top: -30%; width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(closest-side, rgba(201,89,10,.15), transparent 70%); pointer-events: none; z-index: -1;
}
.hero-top { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(20px, 3vw, 36px); }
.hero-side { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.hero-side .lead { margin: 0; max-width: 36em; }
.h1 { font-family: var(--disp); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(2.4rem, 5.6vw, 4.9rem); margin: 0; max-width: 13.5em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--muted); margin: 0 0 1.6rem; }
.lead strong { color: var(--text); font-weight: 500; }
.cta { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.tel { display: inline-flex; flex-direction: column; text-decoration: none; font-family: var(--disp); font-weight: 700; font-size: 1.3rem; line-height: 1.15; min-height: 48px; justify-content: center; }
.tel small { font-family: var(--mono); font-weight: 400; font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.tel:hover { color: var(--accent-l); }

/* Die Zeichnung: jedes Bauteil ist eine eigene Ebene (eigene GPU-Schicht) */
.car { margin: clamp(16px, 3vw, 36px) 0 0; position: relative; }
.car-in { position: relative; aspect-ratio: 1000 / 370; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; color: var(--ink); }
.base { color: var(--ink-soft); }
.base .dash { stroke-dasharray: 6 8; stroke-width: 1.4; }
.base .thin, .lead-l { stroke-width: 1.2; }
.lead-l { color: var(--ink-soft); }
.trim { stroke-width: 7; stroke: var(--ink-soft); }
.glass use, .glass path { fill: rgba(201,89,10,.07); }
.lamp { color: var(--accent-l); }
.eng { color: var(--accent-l); opacity: 0; transition: opacity .4s; }
.ex, .pt { position: absolute; inset: 0; transform-origin: var(--o, 50% 50%); }
.hood { transform-origin: 33% 47.6%; transition: rotate .6s var(--spring), translate .5s var(--spring); }
.pt { transition: translate .5s var(--spring), color .2s; }
.dim { position: absolute; left: 47.8%; top: 87.3%; transform: translate(-50%, -100%); font-family: var(--mono); font-size: .75rem; color: var(--muted); background: var(--bg); padding: 0 .4rem; white-space: nowrap; }
.bub {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 1;
  display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--text);
}
.bub::before { /* sichtbarer Kreis, Trefferfläche bleibt 44 px */
  content: ""; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; z-index: -1;
  background: var(--bg); border: 1.5px solid var(--ink-soft); transition: transform .35s var(--spring), background-color .2s, border-color .2s;
}
.bub::after { /* Kurzinfo am Bauteil */
  content: attr(data-t); position: absolute; top: 46px; left: 50%; transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  white-space: nowrap; font-family: var(--body); font-weight: 500; font-size: .9rem; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border); padding: .4rem .7rem; border-radius: 4px; transition: opacity .2s, transform .3s var(--spring);
}
.bub[data-p="4"]::after { left: 0; transform: translate(0, 6px); }
.bub[data-p="1"]::after, .bub[data-p="5"]::after { left: auto; right: 0; transform: translate(0, 6px); }
.bub[data-p="3"]::after, .bub[data-p="5"]::after { top: auto; bottom: 46px; }
.titleblock { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0; margin-top: .9rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.titleblock span { border: 1px solid var(--border); padding: .35rem .7rem; margin-left: -1px; }

/* Aktives Bauteil: hebt sich aus der Zeichnung, Haube klappt auf */
.car[data-on="1"] .ex[data-p="1"] .pt,
.car[data-on="2"] .ex[data-p="2"] .pt,
.car[data-on="3"] .ex[data-p="3"] .pt,
.car[data-on="4"] .ex[data-p="4"] .pt,
.car[data-on="5"] .ex[data-p="5"] .pt { translate: 0 -3%; color: var(--accent-l); }
.car[data-on="6"] .hood { rotate: 12deg; color: var(--accent-l); }
.car[data-on="6"] .eng { opacity: 1; }
.car[data-on="1"] .bub[data-p="1"], .car[data-on="2"] .bub[data-p="2"], .car[data-on="3"] .bub[data-p="3"],
.car[data-on="4"] .bub[data-p="4"], .car[data-on="5"] .bub[data-p="5"], .car[data-on="6"] .bub[data-p="6"] { color: #fff; z-index: 2; }
.car[data-on="1"] .bub[data-p="1"]::before, .car[data-on="2"] .bub[data-p="2"]::before, .car[data-on="3"] .bub[data-p="3"]::before,
.car[data-on="4"] .bub[data-p="4"]::before, .car[data-on="5"] .bub[data-p="5"]::before, .car[data-on="6"] .bub[data-p="6"]::before {
  background: var(--accent-deep); border-color: var(--accent-deep); transform: scale(1.25);
}
@media (hover: hover) and (min-width: 641px) {
  .car[data-on="1"] .bub[data-p="1"]::after, .car[data-on="2"] .bub[data-p="2"]::after, .car[data-on="3"] .bub[data-p="3"]::after,
  .car[data-on="4"] .bub[data-p="4"]::after, .car[data-on="5"] .bub[data-p="5"]::after, .car[data-on="6"] .bub[data-p="6"]::after { opacity: 1; transform: translate(-50%, 0); }
  .car[data-on="4"] .bub[data-p="4"]::after, .car[data-on="1"] .bub[data-p="1"]::after, .car[data-on="5"] .bub[data-p="5"]::after { transform: none; }
}

/* Stückliste */
.parts { margin-top: clamp(28px, 4vw, 44px); }
.parts-h { margin: 0 0 .9rem; font-family: var(--disp); font-weight: 700; font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.parts-h span { font-family: var(--body); font-weight: 400; font-size: .95rem; color: var(--muted); }
.sl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.sl li { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sl button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; min-height: 64px;
  display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: .8rem; row-gap: .1rem; padding: .9rem 1rem;
  background: var(--surface); transition: background-color .2s;
}
.sl button:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.sl b { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink-soft); display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; transition: transform .35s var(--spring); }
.sl span { font-family: var(--disp); font-weight: 700; font-size: 1rem; }
.sl em { font-style: normal; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.sl button:hover, .sl button[aria-pressed="true"] { background: var(--surface2); }
.sl button:hover b, .sl button[aria-pressed="true"] b { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; transform: scale(1.12); }

/* Prüfstempel */
.stamp {
  position: absolute; right: clamp(16px, 6vw, 90px); top: clamp(14px, 3vw, 40px); margin: 0; z-index: 2;
  font-family: var(--mono); font-weight: 700; font-size: .78rem; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--accent-l); border: 2px solid var(--accent-l); border-radius: 4px; padding: .55rem .8rem; transform: rotate(-7deg);
  background: var(--bg);
}

/* ── Sektionen ────────────────────────────────────────────── */
section { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid var(--border); position: relative; }
h2 { font-family: var(--disp); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin: 0; }
.intro { color: var(--muted); font-size: 1.08rem; margin: 0; max-width: 36em; }
.intro a { color: var(--text); }
.work-head { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(20px, 5vw, 80px); margin-bottom: clamp(40px, 6vw, 72px); align-items: end; }

/* Prüfstand / Messwerte */
.bench { padding: clamp(48px, 6vw, 72px) 0; background: var(--surface); }
.gauges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); }
.gauge { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.gauge > b { font-family: var(--disp); font-weight: 800; font-size: clamp(1.9rem, 2.9vw, 2.5rem); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.gauge > span:last-child { color: var(--muted); font-size: .95rem; }
.dial { width: 64px; height: 36px; position: relative; overflow: hidden; }
.dial::before { content: ""; position: absolute; inset: 0 0 -28px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--ink-soft); border-left-color: var(--ink-soft); }
.dial::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); }
.dial i { position: absolute; left: calc(50% - 1px); bottom: 0; width: 2px; height: 30px; background: var(--accent-l); transform-origin: 50% 100%; transform: rotate(calc(-80deg + var(--v) * 160deg)); }

/* Kilometerzähler-Ziffern */
.odo { display: inline-flex; line-height: 1.3; margin: -.15em 0; }
.dg { display: inline-block; position: relative; height: 1.3em; overflow: hidden; }
.dg > i { font-style: normal; visibility: hidden; }
.dg > span { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, calc(var(--n) * -10%)); }
.dg > span > span { height: 1.3em; display: block; text-align: center; }

/* Fehlerspeicher */
.prob { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.45fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.prob-head { position: sticky; top: 110px; }
.prob-head .intro { margin-top: 1.4rem; }
.tester { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; overflow: clip; }
.tester-bar { margin: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: .75rem; color: var(--muted); background: var(--surface2); }
.tester-bar span:last-child { color: var(--accent-l); }
.dtc { list-style: none; margin: 0; padding: 0; }
.dtc li { display: grid; grid-template-columns: 7.2rem minmax(0,1fr) auto; gap: 1rem 1.2rem; padding: 1.5rem 1.2rem; border-bottom: 1px dashed var(--border); align-items: baseline; position: relative; }
.dtc li:last-child { border-bottom: 0; }
.dtc li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform .4s var(--ease); }
.dtc li:hover::before { transform: scaleY(1); }
.dtc code { font-family: var(--mono); font-size: .8rem; color: var(--accent-l); font-weight: 700; }
.dtc h3 { font-family: var(--disp); font-weight: 700; font-size: 1.25rem; margin: 0 0 .35rem; line-height: 1.2; }
.dtc p { margin: 0; color: var(--muted); font-size: .98rem; }
.st { font-family: var(--mono); font-size: .75rem; color: var(--muted); border: 1px solid var(--border); padding: .2rem .5rem; border-radius: 20px; white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-l); margin-right: .4rem; vertical-align: 1px; }

/* Leistung + FAQ: Titel klebt links */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: clamp(32px, 6vw, 96px); }
.split h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.split-sticky { position: sticky; top: 110px; align-self: start; }
.split-sticky .intro { margin-top: 1.4rem; }
.split-sticky .go { margin-top: 1.2rem; }
.feats { margin: 0; padding: 0; list-style: none; }
.feats li { padding: 1.7rem 4.6rem 1.7rem 0; border-top: 1px solid var(--border); position: relative; }
.feats li:last-child { border-bottom: 1px solid var(--border); }
.tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-l); }
.feats h3 { font-family: var(--disp); font-size: 1.3rem; font-weight: 700; margin: .3rem 0 .4rem; }
.feats p { margin: 0; color: var(--muted); }
.ok {
  position: absolute; right: 0; top: 1.6rem; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--ok); color: var(--ok); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .85rem; transform: rotate(-12deg);
}

/* Arbeiten */
.feature { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); border: 1px solid var(--border); background: var(--surface); margin-bottom: clamp(20px, 3vw, 32px); }
.shot { position: relative; overflow: hidden; background: var(--surface2); }
.shot img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.tilt.live { transition: transform .1s linear; }
.tilt::after { /* Lichtreflex folgt dem Zeiger */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 45%);
}
.tilt.live::after { opacity: 1; }
.feature-body { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 1rem; }
.badge { align-self: flex-start; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .6rem; border: 1px solid currentColor; }
.badge.real { color: var(--ok); }
.feature h3, .card h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; margin: 0; line-height: 1.05; }
.feature p { margin: 0; color: var(--muted); }
.facts { margin: .4rem 0 0; }
.facts div { display: flex; gap: .8rem; padding: .55rem 0; border-top: 1px dashed var(--border); font-size: .95rem; }
.facts dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 6.5rem; padding-top: .18rem; }
.facts dd { margin: 0; }
.go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--accent-l); }
.go::after { content: "→"; transition: transform .35s var(--spring); }
.go:hover::after { transform: translateX(6px); }
.pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: clamp(20px, 3vw, 32px); }
.card { border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.card-body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.card h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.card p { margin: 0; color: var(--muted); font-size: .98rem; }
.typo { aspect-ratio: 16/10; background: #052b5c; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 3vw, 30px); position: relative; overflow: hidden; container-type: inline-size; }
.typo::before { content: ""; position: absolute; inset: auto -10% -45% auto; width: 80%; aspect-ratio: 1; border: 2px solid #e2b500; transform: rotate(45deg); opacity: .5; transition: transform 1.2s var(--ease); }
.card:hover .typo::before { transform: rotate(135deg); }
.typo small { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #e2b500; }
.typo strong { font-family: var(--disp); font-size: clamp(1.25rem, 10.5cqi, 2.4rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; position: relative; hyphens: manual; }

/* Konzeptstudien: Schiene. Standard = waagerecht wischen; mit scroll-timeline am Desktop scroll-gekoppelt */
.rail { margin-top: clamp(64px, 9vw, 112px); }
.rail-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); gap: 1rem clamp(20px, 5vw, 80px); align-items: baseline; margin-bottom: 1.8rem; }
.rail-head h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; letter-spacing: -.02em; }
.rail-head p { margin: 0; color: var(--muted); }
.rail-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 1rem; }
.rail-track { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; gap: clamp(16px, 2.4vw, 32px); width: max-content; }
.study { width: min(78vw, 620px); scroll-snap-align: center; }
.study .shot { border: 1px solid var(--border); border-radius: 6px; }
.study .shot img { aspect-ratio: 16/10; }
.study-cap { margin: 1rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.study-cap b { font-family: var(--disp); font-weight: 700; font-size: 1.15rem; }
.study-cap span { color: var(--muted); font-size: .95rem; }
.study-cap b::after { content: "Konzeptstudie · nicht beauftragt"; display: block; font-family: var(--mono); font-weight: 400; font-size: .75rem; letter-spacing: .06em; color: var(--muted); margin-top: .2rem; }

/* Breite der Schiene rein per CSS berechnet (4 Karten à 620 px) — kein JS-Messen beim Laden */
.rail { --gap: clamp(16px, 2.4vw, 32px); --pl: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); --tw: calc(var(--pl) + 4 * 620px + 3 * var(--gap) + var(--gut)); --shift: min(0px, calc(100vw - var(--tw))); }

/* Ablauf: Probefahrt */
.road { position: relative; height: 60px; margin-bottom: 1.4rem; border-bottom: 2px dashed var(--border); overflow: hidden; }
.drv { position: absolute; inset: 0; transform: translateX(calc(-100% + 110px)); }
.mini { position: absolute; right: 0; bottom: 2px; width: 110px; height: auto; aspect-ratio: 1000/430; fill: none; stroke: var(--accent-l); stroke-width: 16; stroke-linejoin: round; overflow: visible; }
.mini .wh { transform-box: fill-box; transform-origin: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px, 2.5vw, 32px); }
.steps li { border-top: 3px solid var(--border); padding-top: 1.2rem; }
.steps li.key { border-top-color: var(--accent); }
.steps h3 { font-family: var(--disp); font-weight: 700; font-size: 1.25rem; margin: 0 0 .55rem; }
.steps p { margin: 0; color: var(--muted); font-size: .98rem; }
.when { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-l); margin-top: .8rem; }
.promise { margin: clamp(40px, 6vw, 64px) 0 0; padding: clamp(22px, 3vw, 34px); border-left: 3px solid var(--accent); background: var(--surface); font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.02em; line-height: 1.2; }
.promise span { display: block; margin-top: .7rem; font-family: var(--body); font-weight: 400; font-size: 1.02rem; color: var(--muted); letter-spacing: 0; }

/* Preise: Preisschilder am Faden */
.tiers { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap: clamp(14px, 2vw, 24px); align-items: start; padding-top: 26px; }
.tier { padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; position: relative; transform-origin: 50% -22px; }
.tier::before { /* Loch */ content: ""; position: absolute; left: 50%; top: 12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); }
.tier::after { /* Faden */ content: ""; position: absolute; left: 50%; top: -26px; width: 1px; height: 44px; background: var(--ink-soft); }
.tier.hl { background: var(--surface2); border-color: var(--accent-deep); }
.tier:hover { animation: swing 1.4s var(--ease); }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(3.5deg); } 35% { transform: rotate(-2.6deg); } 55% { transform: rotate(1.6deg); } 75% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
.for { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.tier.hl .for { color: var(--accent-l); }
.tier h3 { font-family: var(--disp); font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.price { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.price small { display: block; font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.tier ul { margin: 0; padding: 0; list-style: none; }
.tier li { padding: .5rem 0 .5rem 1.3rem; border-top: 1px dashed var(--border); position: relative; font-size: .96rem; }
.tier li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 7px; height: 1px; background: var(--accent); }
.monthly { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid var(--border); margin-top: clamp(14px, 2vw, 24px); border-radius: 6px; }
.monthly div { padding: 1.3rem clamp(24px, 3vw, 36px); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.monthly div + div { border-left: 1px solid var(--border); }
.monthly b { font-family: var(--disp); font-size: 1.15rem; }
.monthly span { color: var(--muted); font-size: .94rem; }
.monthly strong { font-family: var(--disp); font-size: 1.3rem; white-space: nowrap; }
.tax { margin: 1.1rem 0 0; color: var(--muted); font-size: .9rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* FAQ */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; padding: 1rem 0; font-family: var(--disp); font-weight: 700; font-size: 1.15rem; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--mono); font-weight: 400; transition: transform .4s var(--spring); }
.faq summary:hover { color: var(--accent-l); }
.faq details[open] summary::after { transform: rotate(135deg); }
.ans p { margin: 0 0 1.3rem; color: var(--muted); max-width: 40em; }
.faq details[open] .ans { animation: ans .45s var(--ease); }
@keyframes ans { from { opacity: 0; transform: translateY(-8px); } }

/* Über */
.about { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about blockquote { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.14; letter-spacing: -.025em; text-wrap: balance; }
.cad { margin: clamp(28px, 4vw, 44px) 0 0; }
.cad .shot { border: 1px solid var(--border); border-radius: 6px; }
.cad .shot img { aspect-ratio: 960/500; object-fit: cover; }
.cad figcaption { margin-top: .8rem; color: var(--muted); font-size: .95rem; }
.cad figcaption a { color: var(--accent-l); display: inline-flex; align-items: center; min-height: 44px; }
.about-txt p { margin: 0 0 1.1rem; color: var(--muted); }
.about-txt p strong { color: var(--text); font-weight: 500; }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.3fr); gap: clamp(32px, 6vw, 80px); }
.contact h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.contact .intro { margin-top: 1.4rem; }
.direct { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.direct li { border-top: 1px solid var(--border); }
.direct li:last-child { border-bottom: 1px solid var(--border); }
.direct a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; text-decoration: none; min-height: 56px; font-size: 1.05rem; transition: color .25s; }
.direct a span { transition: transform .4s var(--spring); }
.direct a:hover { color: var(--accent-l); }
.direct a:hover span { transform: translateX(8px); }
.direct small { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
label { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.opt { text-transform: none; letter-spacing: 0; }
input, textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: .85rem .95rem; min-height: 48px; width: 100%; transition: border-color .25s, box-shadow .25s; }
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,89,10,.18); }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-foot p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 30em; }
.hp { position: absolute; left: -9999px; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: clamp(48px, 7vw, 80px) 0 110px; }
.ft { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr) minmax(0,.8fr); gap: clamp(28px, 5vw, 64px); }
.ft-brand .logo { font-size: 2rem; }
.ft-brand p { color: var(--muted); max-width: 26em; margin: 1rem 0 0; }
.ft .ft-h { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .25s; }
.ft li a:hover { color: var(--accent-l); }
.ft-ck { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; transition: color .25s; }
.ft-ck:hover { color: var(--accent-l); }
.ft-base { margin-top: clamp(40px, 6vw, 64px); padding-top: 1.4rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-family: var(--mono); font-size: .75rem; }

.mob-bar { display: none; }

/* Cookie-Banner (Markup + IDs wie consent.js) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--surface); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .45s var(--spring); }
.cookie-banner.show { transform: none; }
.ck-inner { max-width: var(--wrap); margin: 0 auto; padding: 1rem var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ck-txt { font-size: .94rem; color: var(--muted); max-width: 44em; }
.ck-btns { display: flex; gap: .6rem; }
.ck-btn { min-height: 44px; padding: .6rem 1.1rem; font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--text); }
.ck-btn-ok { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.ck-cfg-btn { position: fixed; left: 14px; bottom: 14px; z-index: 80; display: none; min-height: 40px; padding: .45rem .8rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.ck-cfg-btn.show { display: block; }

/* ══════════════════════════════════════════════════════════════
   BEWEGUNG — nur wenn der Besucher sie nicht abgeschaltet hat
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* 1 · Signatur: das Auto baut sich zusammen */
  .pt { animation: asm 1.15s var(--spring) var(--d, 0s) backwards; }
  @keyframes asm { from { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } 40% { opacity: 1; } }
  .car-in { animation: settle .55s var(--ease) 1.95s backwards; }
  @keyframes settle { 0% { transform: none; } 40% { transform: translateY(.9%); } 100% { transform: none; } }
  .ov, .base, .dim { animation: fade .6s var(--ease) 2.1s backwards; }
  @keyframes fade { from { opacity: 0; } }
  .bub { animation: pop .5s var(--spring) backwards; }
  .bub[data-p="6"] { animation-delay: 2.15s; } .bub[data-p="2"] { animation-delay: 2.22s; } .bub[data-p="1"] { animation-delay: 2.29s; }
  .bub[data-p="5"] { animation-delay: 2.36s; } .bub[data-p="3"] { animation-delay: 2.43s; } .bub[data-p="4"] { animation-delay: 2.5s; }
  @keyframes pop { from { transform: scale(0); } }
  .stamp { animation: stamp .45s cubic-bezier(.5,0,.75,0) 2.4s backwards; }
  @keyframes stamp { from { transform: rotate(-16deg) scale(2.2); opacity: 0; } 70% { opacity: 1; } }
  .hero-side, .titleblock, .parts { animation: up .8s var(--ease) backwards; }
  .hero-side { animation-delay: .15s; } .titleblock { animation-delay: 2.2s; } .parts { animation-delay: .5s; }
  .h1 { animation: up .7s var(--ease); }
  @keyframes up { from { opacity: 0; transform: translateY(18px); } }

  /* Kilometerzähler + Zeiger: einmalig beim Hereinscrollen (JS setzt .in) */
  .js .io .dg > span { transform: translate(-50%, 0); }
  .js .io.in .dg > span { transform: translate(-50%, calc(var(--n) * -10%)); transition: transform 1.6s var(--ease) var(--dd, 0s); }
  .js .io .dial i { transform: rotate(-80deg); }
  .js .io.in .dial i { transform: rotate(calc(-80deg + var(--v) * 160deg)); transition: transform 1.8s var(--spring) .1s; }
  .js .feats .ok { opacity: 0; transform: rotate(-30deg) scale(1.9); }
  .js .feats .in .ok { opacity: 1; transform: rotate(-12deg) scale(1); transition: opacity .2s .25s, transform .4s cubic-bezier(.5,0,.75,0) .25s; }
  .js .tier.io { opacity: 0; transform: translateY(30px); }
  .js .tier.io.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--spring); }
  .js .tier.io.in:nth-child(2) { transition-delay: .12s; } .js .tier.io.in:nth-child(3) { transition-delay: .24s; }

  /* Ohne scroll-timeline: Einblenden per IntersectionObserver */
  .no-sda .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
  .no-sda .rv.in { opacity: 1; transform: none; }
  .no-sda .dtc li.rv { transform: translateX(-24px); }
  .no-sda .dtc li.rv.in { transform: none; }
  .no-sda .road.in .drv { transform: none; transition: transform 2.6s var(--ease) .2s; }
  .no-sda .road.in .wh { transform: rotate(900deg); transition: transform 2.6s var(--ease) .2s; }

  /* Mit scroll-timeline: an die Scrollbewegung gekoppelt */
  .sda .rev { display: block; }
  .sda .rev i { animation: revs linear both; animation-timeline: scroll(root); }
  @keyframes revs { from { transform: rotate(-80deg); } to { transform: rotate(80deg); } }

  .sda .car { view-timeline: --car block; }
  .sda .ex { animation: explode linear both; animation-timeline: --car; animation-range: cover 45% cover 92%; }
  @keyframes explode { from { transform: none; } to { transform: translate(calc(var(--x) * .6), calc(var(--y) * .75 - 4%)) rotate(calc(var(--r) * .1)); } }
  .sda .ov { animation: fade .6s var(--ease) 2.1s backwards, out linear both; animation-timeline: auto, --car; animation-range: normal, cover 45% cover 58%; }
  @keyframes out { to { opacity: 0; } }

  .sda .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 5% entry 80%; }
  @keyframes rv { from { opacity: 0; transform: translateY(34px); } }
  .sda .dtc li.rv { animation-name: rvx; animation-range: entry 10% cover 40%; }
  @keyframes rvx { from { opacity: 0; transform: translateX(-40px); } }

  .sda .road { view-timeline: --road block; }
  .sda .drv { animation: drive linear both; animation-timeline: --road; animation-range: cover 25% cover 75%; }
  @keyframes drive { to { transform: none; } }
  .sda .mini .wh { animation: roll linear both; animation-timeline: --road; animation-range: cover 25% cover 75%; }
  @keyframes roll { to { transform: rotate(900deg); } }

}
@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
  .sda .rail { height: calc(100vh - var(--shift)); view-timeline: --rail block; }
  .sda .rail-stick { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; overflow: clip; }
  .sda .rail-view { overflow: visible; padding: 0; }
  .sda .rail-track { padding-left: var(--pl); padding-right: var(--gut); gap: var(--gap); animation: slide linear both; animation-timeline: --rail; animation-range: contain 0% contain 100%; }
  @keyframes slide { to { transform: translateX(var(--shift, 0px)); } }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIV
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .nav-links a { padding: .7rem .5rem; }
  .nav-links a::after { left: .5rem; right: .5rem; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .hero-side, .work-head, .split, .prob, .feature, .pair, .about, .contact, .ft, .rail-head { grid-template-columns: minmax(0,1fr); }
  .split-sticky, .prob-head { position: static; }
  .cta { justify-content: flex-start; }
  .gauges { grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: 2.2rem; }
  .sl { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .tiers { grid-template-columns: minmax(0,1fr); max-width: 560px; }
  .monthly { grid-template-columns: minmax(0,1fr); }
  .monthly div + div { border-left: 0; border-top: 1px solid var(--border); }
  .steps { grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: 2.2rem; }
  .stamp { top: auto; bottom: clamp(16px, 4vw, 32px); }
}
@media (max-width: 900px) {
  /* Mono-Untergrenze laut mobile.css: 11,5 px */
  .nav-links a, .tel small, .titleblock, .dim, .tester-bar, .st, .tag, .badge, .facts dt, .go, .when, .for, .price small,
  .direct small, label, .ft .ft-h, .ft-base, .ck-btn, .ck-cfg-btn, .study-cap b::after { font-size: .75rem; letter-spacing: .06em; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav .btn-pri { display: none; }
  .hero { padding-top: 32px; }
  .stamp { position: static; display: inline-block; margin: 1.6rem 0 0 .2rem; }
  .cta .btn { flex: 1 1 100%; }
  .bub { font-size: .75rem; }
  .bub::before { left: 10px; top: 10px; width: 24px; height: 24px; }
  .dim { display: none; }
  .titleblock { justify-content: flex-start; }
  .titleblock span { border: 0; padding: 0; margin: 0; }
  .titleblock span + span::before { content: " · "; }
  .ck-txt a { display: inline-block; padding: .65rem 0; }
  .sl { grid-template-columns: minmax(0,1fr); }
  .gauges { grid-template-columns: minmax(0,1fr); }
  .dtc li { grid-template-columns: minmax(0,1fr) auto; padding: 1.3rem 1rem; }
  .dtc li > div { grid-column: 1 / -1; grid-row: 2; }
  .feats li { padding-right: 0; padding-top: 4.6rem; }
  .ok { top: 1.2rem; right: auto; left: 0; width: 50px; height: 50px; }
  .steps, form { grid-template-columns: minmax(0,1fr); }
  .road { display: none; }
  .tier:hover { animation: none; }
  .mob-bar {
    display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  }
  .mob-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
  .mob-bar a:active { transform: translateY(2px); }
  .mob-bar a + a { border-left: 1px solid var(--border); }
  .mob-bar a:last-child { background: var(--accent-deep); color: #fff; border-left: 0; }
  .ck-cfg-btn, .ck-cfg-btn.show { display: none; } /* Handy: verdeckt sonst Inhalt, Widerruf steht im Footer */
  .cookie-banner { bottom: 0; z-index: 95; }
}
@media (hover: none) {
  .tilt { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}