/* DRIVECHECK – self-hosted, framework-free site styles */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

:root {
  color-scheme: light;
  --ink: #101114;
  --ink-2: #191b20;
  --gold: #d5a441;
  --gold-light: #f0cf82;
  --gold-text: #805e14;
  --silver: #d5d7dc;
  --paper: #f6f5f1;
  --white: #fff;
  --line: #e3e0d9;
  --body: #282a2f;
  --copy: #5d6068;
  --content: 1180px;
  --header-h: 82px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
  --motion-state: 420ms;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; padding-top: var(--header-h); background: var(--paper); color: var(--body); font-size: 17px; line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 15px; transform: translateY(-160%); border-radius: 5px; background: var(--gold); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }

/* Header – fixed so that compacting it never shifts the page */
.site-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,.09); background: #0c0d0f; color: var(--white); transition: border-color var(--motion-state) ease, background var(--motion-state) ease; }
.header-inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: min-height var(--motion-state) var(--ease); }
.brand { display: inline-flex; align-items: center; color: white; text-decoration: none; }
.header-wordmark { width: 220px; height: auto; transition: width var(--motion-state) var(--ease); }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.3vw, 29px); }
.site-nav a { color: #d9d9dc; text-decoration: none; font-size: 14px; font-weight: 650; transition: color var(--motion-fast) ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-light); }
.site-nav .nav-cta { padding: 10px 17px; border: 1px solid rgba(213,164,65,.65); border-radius: 4px; color: var(--gold-light); }
.menu-toggle { display: none; width: 46px; height: 44px; border: 1px solid #4a4b4e; border-radius: 4px; background: transparent; color: white; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: currentColor; }
@media (min-width: 741px) {
  .site-header.is-scrolled { border-bottom-color: rgba(213,164,65,.24); background: #08090a; }
  .site-header.is-scrolled .header-inner { min-height: 62px; }
  .site-header.is-scrolled .header-wordmark { width: 188px; }
}

/* Type and shared elements */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #6b6e75; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { width: 24px; height: 1px; background: var(--gold); content: ""; }
.hero .eyebrow, .section-dark .eyebrow, .page-hero .eyebrow, .closing .eyebrow { color: #bcbec4; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 11px; padding: 12px 20px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 750; transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button > span { transition: transform var(--motion-fast) ease; }
.button:hover > span { transform: translateX(2px); }
.button-gold { background: var(--gold); color: #17130a; }
.button-gold:hover { background: var(--gold-light); }
.button-outline { border-color: rgba(255,255,255,.35); color: white; }
.button-outline:hover { border-color: var(--gold); color: var(--gold-light); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #30323a; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--gold-text); text-decoration: none; font-size: 14px; font-weight: 800; }
.text-link::after { content: "→"; transition: transform var(--motion-fast) ease; }
.text-link:hover::after { transform: translateX(4px); }
.text-link-light { color: var(--gold-light); }
.pending-note { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-left: 3px solid var(--gold); background: #f6f0e1; color: #4f4938; font-size: 14px; }
.pending-note strong { color: #3c3421; }
.mt-26 { margin-top: 26px; }
.mt-32 { margin-top: 32px; }

.section { padding: 112px 0; }
.section-dark { background: var(--ink); color: white; }
.section-paper { background: var(--white); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head p { margin: 17px 0 0; color: var(--copy); }
.section-dark .section-head p { color: #b4b6bb; }
.section h2, .page-hero h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 4vw, 52px); line-height: 1.07; letter-spacing: -.04em; }
.section-dark h2 { color: white; }

/*
 * Artwork crops. The logo parts share a 1536 × 1024 canvas, the side-profile car a 1600 × 800 canvas
 * (.art-side). A .crop shows the window --x/--y/--w/--h; .art layers and overlay SVGs inside use the
 * same coordinates, so markers sit exactly on the artwork.
 */
.crop { position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.crop > svg, .crop > .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.art { position: absolute; max-width: none; width: calc(var(--cw, 1536) / var(--w) * 100%); height: auto; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }
.art-side { --cw: 1600; }
.art-sheen { aspect-ratio: 3 / 2; }
.tech { fill: none; stroke: rgba(213,215,220,.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tech-faint { stroke: rgba(213,215,220,.2); }
.tech-gold { stroke: var(--gold-light); }
.mark { transform-box: fill-box; transform-origin: center; }
.mark circle { fill: none; stroke: var(--gold-light); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.mark .mark-dot { fill: var(--gold); stroke: none; }
/* Stagger order and timing live here, not in style="" attributes: the CSP blocks inline styles. */
.seq-1 { --i: 0; } .seq-2 { --i: 1; } .seq-3 { --i: 2; } .seq-4 { --i: 3; } .seq-5 { --i: 4; } .seq-6 { --i: 5; } .seq-7 { --i: 6; }
/* Story scan runs front to rear; each point lights up as the line passes its x position. */
.story-points .seq-1 { --d: 186ms; } .story-points .seq-2 { --d: 216ms; } .story-points .seq-3 { --d: 321ms; } .story-points .seq-4 { --d: 537ms; }
.story-points .seq-5 { --d: 598ms; } .story-points .seq-6 { --d: 875ms; } .story-points .seq-7 { --d: 1014ms; }
.bracket { fill: none; stroke: var(--gold-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.zone-area { fill-opacity: .2; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease) 80ms; }
.sensor { fill: rgba(213,164,65,.12); stroke: var(--gold-light); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scan { position: absolute; display: none; pointer-events: none; }
.scan::before { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(transparent, var(--gold-light) 18%, var(--gold-light) 82%, transparent); content: ""; }
.scan::after { position: absolute; top: 0; right: 100%; bottom: 0; width: 10%; background: linear-gradient(90deg, transparent, rgba(240,207,130,.11)); content: ""; }
.scan-rtl::after { right: auto; left: 100%; background: linear-gradient(270deg, transparent, rgba(240,207,130,.11)); }
.hero-mark-sheen, .check-sheen { display: none; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0 37%, rgba(255,247,218,.82) 48%, transparent 59%) no-repeat; background-size: 34% 100%; background-position: -60% 0; -webkit-mask: url("/assets/img/haken.svg") center / contain no-repeat; mask: url("/assets/img/haken.svg") center / contain no-repeat; mix-blend-mode: screen; }
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .hero-mark-sheen, .check-sheen { display: block; }
}

/* Hero: the DRIVECHECK entrance – vehicle, Prüfkreis, Haken, wordmark, then a short sheen across the Haken */
.hero { position: relative; overflow: hidden; padding: 64px 0 44px; background: radial-gradient(ellipse at 74% 44%, #24262c 0, #131519 38%, #0a0b0d 72%); color: white; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; gap: 32px; }
.hero h1 { margin: 0; color: white; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.hero h1 em { display: block; color: var(--gold-light); font-style: normal; }
.hero-copy { max-width: 470px; margin: 24px 0 30px; color: #c6c7cb; font-size: 18px; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 400px; }
.hero-mark-stage { position: relative; width: min(100%, 640px); aspect-ratio: 3 / 2; filter: drop-shadow(0 20px 42px rgba(0,0,0,.6)); }
.hero-mark-layer, .hero-mark-sheen { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mark-layer { object-fit: contain; }
.hero-facts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding: 18px 0 0; list-style: none; }
.hero-facts::before, .hero-facts::after { position: absolute; top: 0; right: 0; left: 0; height: 1px; content: ""; }
.hero-facts::before { background: rgba(255,255,255,.14); }
.hero-facts::after { background: linear-gradient(90deg, rgba(213,164,65,.2), var(--gold) 70%, var(--gold-light)); transform-origin: left; }
.hero-facts li { position: relative; display: grid; gap: 3px; color: white; font-size: 16px; font-weight: 650; line-height: 1.35; }
.hero-facts li::after { position: absolute; top: -22px; left: 0; width: 1px; height: 9px; background: var(--gold); content: ""; }
.hero-facts span { color: var(--gold-light); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

.hero.motion-ready:not(.is-ready) .hero-mark-vehicle { opacity: 0; transform: translateY(12px); }
.hero.motion-ready:not(.is-ready) .hero-mark-circle { opacity: 0; transform: scale(.985); }
.hero.motion-ready:not(.is-ready) .hero-mark-check { opacity: 0; clip-path: inset(0 100% 0 0); }
.hero.motion-ready:not(.is-ready) .hero-mark-wordmark { opacity: 0; transform: translateY(8px); }
.hero.motion-ready:not(.is-ready) .hero-facts::after { transform: scaleX(0); }
.hero.motion-ready.is-ready .hero-mark-vehicle { animation: hero-vehicle 560ms var(--ease) both; }
.hero.motion-ready.is-ready .hero-mark-circle { animation: hero-circle 1000ms var(--ease) 250ms both; }
.hero.motion-ready.is-ready .hero-mark-check { animation: hero-check 560ms var(--ease) 875ms both; }
.hero.motion-ready.is-ready .hero-mark-wordmark { animation: hero-wordmark 500ms var(--ease) 1060ms both; }
.hero.motion-ready.is-ready .hero-mark-sheen { animation: sheen 625ms ease-out 1190ms both; }
.hero.motion-ready.is-ready .hero-facts::after { animation: rail 1700ms cubic-bezier(.45, 0, .2, 1) both; }
.motion-ready .layer-ring { -webkit-mask-image: conic-gradient(from 280deg at 60.16% 41.89%, #000 var(--sweep), transparent 0); mask-image: conic-gradient(from 280deg at 60.16% 41.89%, #000 var(--sweep), transparent 0); }
.motion-ready:not(.is-ready) .layer-ring { --sweep: 0deg; }
@keyframes hero-vehicle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-circle { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hero-check { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes hero-wordmark { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheen { 0% { opacity: 0; background-position: -60% 0; } 18% { opacity: .75; } 82% { opacity: .75; } 100% { opacity: 0; background-position: 160% 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes mark-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ring-sweep { from { --sweep: 0deg; } to { --sweep: 250deg; } }
@keyframes check-lock { 0% { clip-path: inset(0 46.8% 0 0); } 70% { clip-path: inset(0 17% 0 0); transform: scale(1.025); } 100% { clip-path: inset(0); transform: none; } }
@keyframes rail { from { transform: scaleX(0); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes develop { from { opacity: 0; } to { opacity: 1; } }
@keyframes outline-settle { 0%, 70% { opacity: 1; } 100% { opacity: .16; } }

/* Leistungen: the service list drives which part of the vehicle is highlighted */
.zones { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.zones-list { grid-column: 1; grid-row: 1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.zone-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 26px 0 26px 18px; border-bottom: 1px solid var(--line); }
.zone-item::before { position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform var(--motion-state) var(--ease); content: ""; }
.zone-item.is-active::before { transform: none; }
.zone-index { grid-row: 1 / span 4; padding-top: 6px; color: #9b741d; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.zone-item h3, .zone-item h2 { margin: 0; color: var(--ink); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; letter-spacing: -.02em; }
.zone-item h3 small, .zone-item h2 small { color: #8a6c2a; font-size: .58em; font-weight: 650; letter-spacing: 0; }
.zone-item p { margin: 4px 0 0; color: var(--copy); font-size: 15px; }
.zone-item .text-link { justify-self: start; margin-top: 10px; }
/* Each service gets enough scroll distance for its view to play before the next one takes over. */
/* The extra space after the last service keeps the visual in place until its view has played. */
.zones-list { padding-bottom: 24vh; }
@media (min-width: 921px) {
  .zone-item { align-content: center; min-height: min(36vh, 340px); }
  .zones-list { padding-bottom: 40vh; }
}
.zone-facts { display: grid; gap: 10px; margin: 16px 0 4px; }
.zone-facts div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.zone-facts dt { color: #8a6c2a; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 2.1; text-transform: uppercase; }
.zone-facts dd { margin: 0; color: var(--copy); font-size: 15px; }
.zones-visual { position: sticky; top: max(104px, calc(50vh - 190px)); grid-column: 2; grid-row: 1; }
.bay { padding: 26px 22px 16px; background: radial-gradient(ellipse at 50% 62%, #24272d, #111215 72%); }
/* One camera layer – car, ruler, damage area, inspection points and viewfinder – moves per service.
   Leaving a state is quick and simultaneous; entering is staggered. Everything is a transition, so a
   switch halfway through simply turns around instead of restarting. */
.bay-stage { --x: 20; --y: 150; --w: 1560; --h: 550; }
.bay-stage::after { position: absolute; inset: 0; background: linear-gradient(90deg, #15171b, rgba(21,23,27,0) 18%); opacity: 0; pointer-events: none; transition: opacity 600ms ease; content: ""; }
.bay-cam { transform-origin: 100% 0; transition: transform 850ms var(--ease); }
.bay-cam > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-active="schaden"] .bay-cam { transform: translateY(-4%) scale(1.22); }
[data-active="dokumentation"] .bay-cam { transform: translateY(-33%) scale(1.55); }
[data-active="schaden"] .bay-stage::after, [data-active="dokumentation"] .bay-stage::after { opacity: 1; }
.bay .zone-area { fill-opacity: 0; transition: stroke-dashoffset 300ms ease, fill-opacity 220ms ease; }
[data-active="schaden"] .bay .zone-area { fill-opacity: .22; stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms var(--ease) 200ms, fill-opacity 600ms ease 520ms; }
[data-active="dokumentation"] .bay .zone-area { fill-opacity: .08; stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms var(--ease) 200ms, fill-opacity 400ms ease; }
.bay .pt { opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 180ms ease; }
[data-active="bewertung"] .bay .pt { opacity: 1; transform: none; transition: opacity 240ms ease var(--d, 0ms), transform 460ms var(--ease) var(--d, 0ms); }
[data-active="schaden"] .bay .pt-near,
[data-active="dokumentation"] .bay .pt-near { opacity: 1; transform: none; transition: opacity 240ms ease var(--ds, 0ms), transform 460ms var(--ease) var(--ds, 0ms); }
/* Unfall- & Schadengutachten from the neutral view: the points appear while the damage outline is drawn. */
.bay .pt-wheel-front { --ds: 520ms; } .bay .pt-headlight { --ds: 640ms; } .bay .pt-front { --ds: 740ms; }
[data-dir="back"] .bay .pt { --d: 0ms; --ds: 0ms; }
/* Fahrzeugbewertung: a scan crosses the whole car; each point lights up as the line passes it. Without
   data-active (before the section is reached) the bay shows the plain car, so the first state plays in view. */
.bay .pt-rear { --d: 290ms; } .bay .pt-wheel-rear { --d: 430ms; } .bay .pt-sill { --d: 700ms; } .bay .pt-door { --d: 765ms; }
.bay .pt-wheel-front { --d: 980ms; } .bay .pt-headlight { --d: 1085ms; } .bay .pt-front { --d: 1115ms; }
.bay-scan { inset: 6% 0; }
[data-active="bewertung"][data-dir="fwd"] .bay-scan { display: block; animation: bay-scan 900ms linear 250ms both, fade-out 260ms ease 1150ms forwards; }
@keyframes bay-scan { from { transform: translateX(2%); } to { transform: translateX(98%); } }
/* Schadendokumentation: the viewfinder closes in on the damaged area, then a soft shutter flash. */
.bay .viewfinder .bracket { opacity: 0; transition: opacity 180ms ease, transform 180ms ease; }
.bay .viewfinder .b-tl { transform: translate(-44px, -44px); }
.bay .viewfinder .b-tr { transform: translate(44px, -44px); }
.bay .viewfinder .b-bl { transform: translate(-44px, 44px); }
.bay .viewfinder .b-br { transform: translate(44px, 44px); }
[data-active="dokumentation"] .bay .viewfinder .bracket { opacity: 1; transform: none; transition: opacity 300ms ease 250ms, transform 700ms var(--ease) 250ms; }
.bay-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 62% at 73% 51%, rgba(255,247,226,.9), rgba(255,247,226,0)); opacity: 0; pointer-events: none; }
[data-active="dokumentation"][data-dir="fwd"] .bay-flash { animation: shutter 480ms ease-out 820ms both; }
@keyframes shutter { 0% { opacity: 0; } 9% { opacity: .42; } 100% { opacity: 0; } }
.bay-caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: #9fa2a8; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bay-state { display: grid; justify-items: end; color: var(--gold-light); }
.bay-state > span { grid-area: 1 / 1; opacity: 0; transform: translateY(5px); transition: opacity 160ms ease, transform 160ms ease; }
[data-active="schaden"] .bay-state [data-for="schaden"],
[data-active="bewertung"] .bay-state [data-for="bewertung"],
[data-active="dokumentation"] .bay-state [data-for="dokumentation"] { opacity: 1; transform: none; transition: opacity 300ms ease 160ms, transform 420ms var(--ease) 160ms; }

/* Ablauf: sticky inspection frame on desktop; the step in the middle of the viewport sets its state */
.story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.story-visual { position: sticky; top: max(96px, calc(50vh - 260px)); }
.story-frame { --x: -100; --y: -268; --w: 1800; --h: 1350; background: radial-gradient(ellipse at 50% 55%, #1f2126, #0e0f12 75%); }
.story-frame > * { transition: opacity var(--motion-state) ease, transform 640ms var(--ease); }
.story-frame g { transition: opacity var(--motion-state) ease; }
.story-contact { opacity: 0; transform: translateY(3%); }
.story-contact .field-line { transition: stroke 300ms ease; transition-delay: calc(var(--i) * 140ms + 200ms); }
.story-outline { opacity: 0; }
.story-outline .draw { fill: none; stroke: var(--silver); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.story-car { opacity: 0; transform-origin: 50.14% 50.04%; }
.story-ruler, .story-points, .story-photo, .story-zone { opacity: 0; }
.story-photo .bracket { transition: transform 520ms var(--ease) 250ms; }
.story-photo .b-tl { transform: translate(-16px, -16px); }
.story-photo .b-tr { transform: translate(16px, -16px); }
.story-photo .b-bl { transform: translate(-16px, 16px); }
.story-photo .b-br { transform: translate(16px, 16px); }
.story-doc { opacity: 0; transform: translateY(6%); }
.story-frame .story-check { position: absolute; top: 79.5%; left: 61.9%; width: 7.22%; opacity: 0; transform: scale(1.8); }
.check-crop { --x: 817; --y: 355; --w: 430; --h: 298; display: block; }
.story-frame .scan { inset: 33.3% 0 33.2% 0; }
[data-step="1"] .story-contact { opacity: 1; transform: none; }
[data-step="1"] .story-contact .field-line { stroke: var(--gold-light); }
[data-step="2"] .story-outline { opacity: .16; }
[data-step="2"] .story-car, [data-step="3"] .story-car { opacity: 1; }
[data-step="2"] .story-ruler, [data-step="3"] .story-ruler { opacity: 1; }
[data-step="3"] .story-points, [data-step="3"] .story-photo, [data-step="3"] .story-zone { opacity: 1; }
[data-step="3"] .story-photo .bracket { transform: none; }
[data-step="3"] .story-zone .zone-area { stroke-dashoffset: 0; }
/* Scrolling down, a step plays its entry; scrolling back up it only fades to the previous state. */
[data-dir="fwd"][data-step="2"] .story-outline { animation: outline-settle 1600ms ease both; }
[data-dir="fwd"][data-step="2"] .story-outline .draw { animation: draw 1000ms var(--ease) both; }
[data-dir="fwd"][data-step="2"] .story-car { animation: develop 600ms ease 650ms both; }
[data-dir="fwd"][data-step="3"] .story-points .mark { animation: mark-in 300ms var(--ease) var(--d, 0ms) both; }
[data-dir="fwd"][data-step="3"] .story-zone, [data-dir="fwd"][data-step="3"] .story-zone .zone-area { transition-delay: 1100ms; }
[data-dir="fwd"][data-step="3"] .story-frame .scan { display: block; animation: story-scan 900ms linear 150ms both, fade-out 240ms ease 1050ms forwards; }
[data-step="4"] .story-doc { opacity: 1; transform: none; }
[data-step="4"] .story-car { opacity: 1; transform: translate(-.14%, -20.56%) scale(.44); }
[data-step="4"] .story-check { opacity: 1; transform: none; transition-delay: 380ms; }
@keyframes story-scan { from { transform: translateX(91.67%); } to { transform: translateX(8.61%); } }
.story-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.story-meter span { height: 2px; background: rgba(255,255,255,.14); transition: background var(--motion-state) ease; }
[data-step="1"] .story-meter span:nth-child(-n+1),
[data-step="2"] .story-meter span:nth-child(-n+2),
[data-step="3"] .story-meter span:nth-child(-n+3),
[data-step="4"] .story-meter span { background: var(--gold); }
.story-steps { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .story-steps { padding-bottom: 34vh; } }
.story-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 8px; align-content: center; min-height: 46vh; padding: 32px 0; }
.story-num { grid-row: 1 / span 2; color: var(--gold-light); font-family: var(--mono); font-size: 15px; font-weight: 600; line-height: 1.9; }
.story-step h3 { margin: 0; color: white; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.025em; }
.story-step p { max-width: 38ch; margin: 0; color: #b4b6bb; }
.story-step h3, .story-step p, .story-num { transition: color var(--motion-state) ease; }
.story.is-live .story-step:not(.is-active) h3 { color: #8d9096; }
.story.is-live .story-step:not(.is-active) p { color: #7f8288; }
.story.is-live .story-step:not(.is-active) .story-num { color: #8a7a55; }

/* Gutachtenvorschau: schematic report page; scrolling through the four parts highlights them on the page,
   which stays in view (desktop: beside the list; small screens: a window at the top that follows the part). */
.report-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.report-copy .section-head { margin-bottom: 28px; }
.parts { margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.part { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 10px; width: 100%; padding: 14px 0 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; transition: opacity var(--motion-state) ease; }
.report.is-live[data-active] .parts li:not(.is-active) .part { opacity: .45; }
.part::before { position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform var(--motion-state) var(--ease); content: ""; }
.part[aria-pressed="true"]::before { transform: none; }
.part-index { grid-row: 1 / span 2; padding-top: 3px; color: #9b741d; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.part-name { color: var(--ink); font-size: 17px; font-weight: 750; }
.part-desc { color: var(--copy); font-size: 14px; line-height: 1.5; }
.doc { position: relative; width: min(100%, 500px); margin-inline: auto; padding: 14px 18px 26px 6px; }
.doc-sheet { position: absolute; inset: 34px 0 6px 30px; background: #e5e1d6; transform: rotate(2.6deg); }
.doc-page { position: relative; display: grid; gap: 10px; padding: 26px 26px 28px; background: #fff; box-shadow: 0 0 0 1px #e2ded2, 0 30px 60px -32px rgba(29,26,17,.4); transform: rotate(-.8deg); transform-origin: var(--focus, 50% 50%); transition: transform 600ms var(--ease); }
.doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.doc-brand { color: var(--ink); font-size: 14px; font-weight: 850; letter-spacing: .1em; }
.doc-brand span { color: #b0832a; }
.doc-meta { color: #85888e; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.doc-part { padding: 10px 12px 12px; outline: 1px solid transparent; outline-offset: 0; transition: opacity var(--motion-state) ease, outline-color var(--motion-state) ease, background var(--motion-state) ease; }
.doc-label { display: block; margin-bottom: 8px; color: #85888e; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: color var(--motion-state) ease; }
.doc-rows { display: grid; grid-template-columns: 1fr 1.7fr; gap: 7px 14px; }
.doc-rows i, .doc-lines i { display: block; height: 6px; background: #e8e5dd; }
.doc-rows i:nth-child(odd) { width: 72%; background: #d9d6cd; }
.doc-photos { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.doc-photo { background: #17191e; }
.doc-photo-detail { --x: 1080; --y: 300; --w: 480; --h: 300; position: relative; }
.doc-photo-full { --x: 40; --y: 170; --w: 1530; --h: 480; }
.doc-photo-detail::after { position: absolute; top: 14%; left: 61%; width: 28%; aspect-ratio: 1; border: 1px solid var(--gold-light); border-radius: 50%; content: ""; }
.doc-lines i { margin-top: 7px; }
.doc-lines i:first-child { margin-top: 0; }
.doc-lines i:nth-child(2) { width: 88%; }
.doc-lines i:nth-child(3) { width: 94%; }
.doc-lines i:nth-child(4) { width: 61%; }
.doc-summary { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--gold); background: #fbf6e8; }
.doc-summary .doc-lines { flex: 1; }
.doc-summary .doc-lines i { background: #e6dcc2; }
.doc-check { --x: 817; --y: 355; --w: 430; --h: 298; flex: 0 0 52px; }
.report.is-live[data-active] .doc-part { opacity: .42; }
[data-active="fahrzeugdaten"] .doc-part[data-part="fahrzeugdaten"],
[data-active="schadenbilder"] .doc-part[data-part="schadenbilder"],
[data-active="bewertung"] .doc-part[data-part="bewertung"],
[data-active="zusammenfassung"] .doc-part[data-part="zusammenfassung"] { opacity: 1; outline-color: var(--gold); background: #fffdf7; }
[data-active="fahrzeugdaten"] .doc-part[data-part="fahrzeugdaten"] .doc-label,
[data-active="schadenbilder"] .doc-part[data-part="schadenbilder"] .doc-label,
[data-active="bewertung"] .doc-part[data-part="bewertung"] .doc-label,
[data-active="zusammenfassung"] .doc-part[data-part="zusammenfassung"] .doc-label { color: var(--gold-text); }
.report.is-live[data-active="fahrzeugdaten"] .doc-page { --focus: 50% 16%; transform: rotate(-.8deg) scale(1.035); }
.report.is-live[data-active="schadenbilder"] .doc-page { --focus: 50% 40%; transform: rotate(-.8deg) scale(1.035); }
.report.is-live[data-active="bewertung"] .doc-page { --focus: 50% 66%; transform: rotate(-.8deg) scale(1.035); }
.report.is-live[data-active="zusammenfassung"] .doc-page { --focus: 50% 90%; transform: rotate(-.8deg) scale(1.035); }
.report .parts { margin-bottom: 0; border-top: 0; }
.report .parts li { display: flex; align-items: center; min-height: 22vh; }
.report .part { border-bottom: 0; }
.report-copy { padding-bottom: 22vh; }
@media (min-width: 921px) {
  .report-grid { align-items: start; }
  .report .doc { position: sticky; top: max(96px, calc(50vh - 280px)); }
  .report .parts li { min-height: min(28vh, 250px); }
  .report-copy { padding-bottom: 48vh; }
}
.report-note { max-width: 46ch; margin: 18px 0 0; color: #7a7d84; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* Ansprechpartner: a person, not a component – space reserved for a real portrait */
.person { background: var(--paper); }
.person-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.person-photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #25282e, #0d0e11 74%); }
.person-photo::before { position: absolute; width: 58%; aspect-ratio: 1; border: 1px solid rgba(240,207,130,.32); border-radius: 50%; content: ""; }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-monogram { color: var(--gold-light); font-size: clamp(54px, 6.4vw, 92px); font-weight: 300; letter-spacing: .06em; line-height: 1; }
.person-copy h2 { margin-bottom: 30px; }
.person-name { margin: 0; color: var(--ink); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -.025em; }
.person-role { margin: 6px 0 0; color: #7a6233; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.person-quote { margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--gold); color: var(--ink); font-size: 19px; line-height: 1.55; }
.person-facts { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--body); font-size: 15px; }
.person-facts li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
.person-facts span { color: #8a6c2a; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 2.1; text-transform: uppercase; }
.person-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.person-contact span { color: var(--copy); font-size: 15px; }

/* Closing CTA: the inspection ends with the Prüfkreis and the Haken */
.closing { padding: 104px 0; background: var(--ink); color: white; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.closing h2 { margin: 0; color: white; font-size: clamp(38px, 4.8vw, 62px); line-height: 1.02; letter-spacing: -.045em; }
.closing-text { max-width: 460px; margin: 18px 0 30px; color: #b9bbc0; font-size: 18px; }
.closing-mark { --x: 600; --y: 160; --w: 680; --h: 520; width: min(100%, 440px); justify-self: end; }
.closing-mark .layer-car { opacity: .2; }
.closing-mark.motion-ready:not(.is-ready) .layer-car { opacity: 0; }
.closing-mark.motion-ready:not(.is-ready) .layer-check { clip-path: inset(0 100% 0 0); }
.closing-mark.motion-ready.is-ready .layer-car { animation: car-dim 700ms ease both; }
.closing-mark.motion-ready.is-ready .layer-ring { animation: ring-sweep 640ms var(--ease) 200ms both; }
.closing-mark.motion-ready.is-ready .layer-check { transform-origin: 67.2% 49.2%; animation: check-lock 380ms var(--ease) 700ms both; }
.closing-mark.motion-ready.is-ready .check-sheen { animation: sheen 625ms ease-out 1000ms both; }
@keyframes car-dim { from { opacity: 0; } to { opacity: .2; } }

/* Subpages */
.page-hero { padding: 83px 0 76px; background: var(--ink); color: white; }
.page-hero h1 { max-width: 800px; color: white; }
.page-hero p { max-width: 680px; margin: 20px 0 0; color: #c0c2c7; font-size: 18px; }
.page-content { padding: 76px 0 100px; }
.content-narrow { max-width: 840px; }
.content-narrow h2 { margin: 42px 0 13px; color: var(--ink); font-size: 29px; line-height: 1.2; }
.content-narrow h3 { margin: 26px 0 7px; color: var(--ink); font-size: 19px; }
.content-narrow p, .content-narrow li { color: #555860; overflow-wrap: break-word; hyphens: auto; }
.content-narrow ul { padding-left: 23px; }
.content-narrow a { color: #76570e; }
.form-intro { margin: 0 0 24px; color: #676a71; font-size: 14px; }

.contact-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.75fr); gap: 36px; align-items: start; }
.form-card, .contact-card { padding: 30px; border: 1px solid var(--line); background: white; }
.form-card h2, .contact-card h2 { margin: 0 0 7px; color: var(--ink); font-size: 27px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 20px; }
.field { display: grid; align-content: start; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #35373c; font-size: 13px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #c9c8c2; border-radius: 3px; background: white; color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.field small { color: #71747b; font-size: 12px; }
.form-consent { margin: 16px 0; color: #62656c; font-size: 12px; }
.form-alert { margin: 0 0 20px; padding: 15px 17px; border-left: 4px solid #a63f32; background: #fbefed; color: #58251e; }
.form-alert.success { border-color: #367650; background: #edf6ef; color: #244e32; }
.form-errors { margin: 0 0 18px; padding: 15px 18px; border: 1px solid #dba69f; background: #fbefed; color: #58251e; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.contact-card { background: var(--ink); color: white; }
.contact-card h2 { color: white; }
.contact-card p { color: #b9bbc0; font-size: 14px; }
.contact-line { padding: 17px 0; border-top: 1px solid rgba(255,255,255,.14); }
.contact-line strong { display: block; margin-bottom: 3px; color: var(--gold-light); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.contact-line span, .contact-line a { color: white; font-size: 15px; text-decoration: none; }
.contact-card .button { margin-top: 13px; width: 100%; }
.legal-placeholder { padding: 19px 20px; border: 1px dashed #c2bdaf; background: #faf8f0; color: #574d34; }

.site-footer { padding: 55px 0 24px; background: #090a0c; color: #d4d5d8; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; padding-bottom: 38px; }
.footer-wordmark { width: 200px; height: auto; }
.footer-brand p { max-width: 330px; margin: 14px 0 0; color: #989ba1; font-size: 14px; }
.footer-brand .footer-slogan { color: #d8d9dc; font-weight: 650; }
.footer-title { margin: 0 0 14px; color: white; font-size: 13px; font-weight: 650; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { width: fit-content; color: #bfc1c6; text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.11); color: #aeb0b6; font-size: 13px; }
.mobile-contact { display: none; }

@media (max-width: 1080px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .report-grid, .person-grid { gap: 48px; }
}
@media (max-width: 1023px) {
  .story { display: block; }
  .story-visual { display: none; }
  .story-steps { border-left: 1px solid rgba(255,255,255,.14); }
  .story-step { min-height: 0; padding: 0 0 36px 28px; }
  .story-step:last-child { padding-bottom: 0; }
  .story-step::before { position: absolute; top: 8px; left: -5px; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; background: var(--ink); content: ""; transition: background var(--motion-state) ease; }
  .story.is-live .story-step.is-active::before, .story.is-live .story-step.is-past::before { background: var(--gold); }
  .story-step h3 { font-size: 22px; }
}
@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 9px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.1); background: #0c0d0f; }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 15px; }
  .site-nav .nav-cta { margin-top: 9px; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-copy-block { max-width: 640px; }
  .hero-art { min-height: 0; margin-top: 8px; }
  .hero-mark-stage { width: min(100%, 560px); }
  .zones { grid-template-columns: 1fr; gap: 0; }
  .zones-list, .zones-visual { grid-column: auto; grid-row: auto; }
  .zones-visual { z-index: 2; top: calc(var(--header-h) - 1px); margin: 0 -24px 8px; }
  .bay { padding: 14px 18px 10px; }
  .bay-caption { margin-top: 6px; padding-top: 8px; font-size: 11px; }
  .report-grid { grid-template-columns: 1fr; }
  .doc { order: -1; }
  .report .doc { --win: min(36vh, 300px); position: sticky; z-index: 2; top: calc(var(--header-h) - 1px); width: auto; height: var(--win); margin: 0 -24px 18px; padding: 0 24px; overflow: hidden; background: #efede6; border-bottom: 1px solid var(--line); }
  .report .doc-sheet { display: none; }
  .report .doc-page { max-width: 520px; margin: 14px auto 0; }
  .report.is-live .doc-page, .report.is-live[data-active] .doc-page { transform: translateY(clamp(calc(var(--win) - 28px - 100%), calc(var(--win) / 2 - 14px - var(--c, 0%)), 0px)); }
  .report[data-active="fahrzeugdaten"] .doc-page { --c: 21%; }
  .report[data-active="schadenbilder"] .doc-page { --c: 43%; }
  .report[data-active="bewertung"] .doc-page { --c: 66%; }
  .report[data-active="zusammenfassung"] .doc-page { --c: 86%; }
  .person-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 36px; }
  .closing-grid { grid-template-columns: 1fr; gap: 28px; }
  .closing-mark { order: -1; width: min(70%, 320px); justify-self: start; }
}
@media (max-width: 740px) {
  :root { --header-h: 72px; }
  body { font-size: 16px; padding-bottom: 67px; }
  .container { width: min(var(--content), calc(100% - 36px)); }
  .header-wordmark { width: 184px; }
  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 56px); }
  .hero-copy { margin: 18px 0 24px; font-size: 16px; }
  .hero-mark-stage { width: min(100%, 450px); }
  .hero-facts { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .hero-facts li { grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: 15px; }
  .hero-facts li::after { display: none; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 30px; }
  .zones-visual { margin-inline: -18px; }
  .zone-item { padding: 20px 0 20px 14px; }
  .zone-facts div, .person-facts li { grid-template-columns: 1fr; gap: 0; }
  .report .doc { margin-inline: -18px; padding-inline: 18px; }
  .doc-page { padding: 18px 16px 20px; }
  .person-grid { grid-template-columns: 1fr; gap: 28px; }
  .person-photo { aspect-ratio: 16 / 11; }
  .person-quote { font-size: 17px; }
  .closing { padding: 64px 0; }
  .page-hero { padding: 58px 0 53px; }
  .page-hero h1 { font-size: clamp(34px, 9.5vw, 54px); }
  h1 { overflow-wrap: break-word; hyphens: auto; }
  .page-hero p { font-size: 16px; }
  .page-content { padding: 52px 0 72px; }
  .contact-layout { grid-template-columns: 1fr; gap: 20px; }
  .form-card, .contact-card { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .field.full { grid-column: auto; }
  .footer-wordmark { width: 184px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-bottom: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .mobile-contact { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.12); background: rgba(10,11,13,.97); }
  .mobile-contact .button { min-height: 48px; }
  .mobile-contact[hidden] { display: none; }
}
@media (max-width: 390px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .doc-photos { grid-template-columns: 1fr; }
  .doc-photo-detail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .scan, .bay-flash, .hero-mark-sheen, .check-sheen { display: none !important; }
}