/* ============================================================================
   TAKE MY TRUCK — "MIDNIGHT FORGE"
   Premium dark redesign. Loads AFTER style.css + brutalist.css and replaces the
   brutalist treatment: dark surfaces, hairline borders, soft shadows, rounded
   corners, amber (#F5B301) as accent/glow. Content & structure unchanged.
   ============================================================================ */

:root {
  --bg:         #0B0D10;
  --bg-2:       #0E1116;
  --surface:    #14171C;
  --surface-2:  #1B1F26;
  --surface-3:  #232833;
  --line:       rgba(255,255,255,0.09);
  --line-2:     rgba(255,255,255,0.16);
  --tx:         #ECEEF1;
  --tx-dim:     #A6ABB4;
  --tx-mute:    #6E7480;
  --amber:      #F5B301;
  --amber-2:    #FFC534;
  --amber-ink:  #0B0D10;
  --amber-soft: rgba(245,179,1,0.13);
  --rad:        16px;
  --rad-sm:     11px;
  --rad-lg:     24px;
  --rad-pill:   999px;
  --sh-1: 0 6px 20px -10px rgba(0,0,0,0.6);
  --sh-2: 0 16px 44px -18px rgba(0,0,0,0.7);
  --sh-glow: 0 24px 60px -24px rgba(0,0,0,0.85);
  --amber-glow: 0 10px 34px -10px rgba(245,179,1,0.40);

  /* Soften inherited brutalist tokens in one sweep */
  --hard-1: var(--sh-1);
  --hard-2: var(--sh-1);
  --hard-3: var(--sh-2);
  --hard-4: var(--sh-2);
  --hard-blue: var(--sh-glow);
  --rule-w: 1px;
  --rule-w-thick: 1px;
  --rule-w-fat: 1px;
  --klein-tint: var(--amber-soft);
  --paper-soft: var(--surface-2);
  --mute: var(--tx-dim);
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body,
body.atelier, body.state-page {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  letter-spacing: 0;
}
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
img { border-radius: var(--rad-sm); }
main, section { background: transparent; }

/* ── Tape ticker ───────────────────────────────────────────────────────── */
.tape { background: var(--bg-2); color: var(--tx-mute); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 34px; font-size: 10.5px; letter-spacing: 0.22em; }
.tape-mark { background: var(--amber); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.tape-mark::after { background: var(--bg-2); }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav { background: rgba(11,13,16,0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); box-shadow: none; padding: 12px 24px; }
.nav.is-floating { background: rgba(11,13,16,0.85); }
.nav-links a { color: var(--tx-dim); font-weight: 600; text-transform: none; letter-spacing: 0.01em; font-size: 14.5px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tx); }
.nav-links a::after { background: var(--amber); height: 2px; }
.nav-links .nav-divider { background: var(--line-2); opacity: 1; }
.nav-dropdown-trigger { color: var(--tx-dim); text-transform: none; letter-spacing: 0.01em; font-size: 14.5px; font-weight: 600; }
.nav-dropdown-trigger:hover { color: var(--tx); }
.nav-dropdown-menu { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad-sm); box-shadow: var(--sh-2); padding: 8px; }
.nav-dropdown-menu a { color: var(--tx-dim); text-transform: none; letter-spacing: 0.01em; border-radius: 9px; font-weight: 600; }
.nav-dropdown-menu a:hover { background: var(--amber-soft); color: var(--tx); padding-left: 14px; }
.nav-cta { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill); box-shadow: var(--amber-glow); font-family: var(--font-body); font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; padding: 11px 20px; }
.nav-cta:hover { transform: translateY(-1px); background: var(--amber-2); box-shadow: var(--amber-glow); }
.nav-cta-num { font-family: var(--font-body); }
.nav-burger { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.nav-burger span { background: var(--tx); }
.nav-drawer { background: var(--surface); border-left: 1px solid var(--line); }
.nav-drawer-close { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--tx); }
.nav-drawer-close:hover { background: var(--surface-3); color: var(--tx); }
.nav-drawer-links a, .nav-drawer-links summary { color: var(--tx); border-color: var(--line); text-transform: none; letter-spacing: 0; }
.drawer-states a { color: var(--tx-dim); border-color: var(--line); }
.drawer-call { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad); box-shadow: var(--amber-glow); }
.drawer-call-icon { border-color: rgba(0,0,0,0.35); }
.drawer-call-icon svg { color: var(--amber-ink); }

/* ── Buttons (unified premium) ─────────────────────────────────────────── */
.hero-cta-primary, .fz-foot-cta, .exp-cta, button.wiz-cta, .wiz-cta {
  background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill);
  box-shadow: var(--amber-glow); font-family: var(--font-body); font-weight: 800;
  letter-spacing: 0; text-transform: none;
}
.hero-cta-primary { padding: 17px 30px; font-size: clamp(16px,1.4vw,19px); }
.hero-cta-primary:hover, .fz-foot-cta:hover, .exp-cta:hover, .wiz-cta:hover {
  transform: translateY(-2px); background: var(--amber-2); box-shadow: var(--amber-glow);
}
.wiz-cta::after, .hero-cta-primary .hero-cta-arrow { color: var(--amber-ink); }
.wiz-cta.wiz-final { background: var(--surface-3); color: var(--tx); box-shadow: var(--sh-1); }
.wiz-cta.wiz-final:hover { background: var(--surface-2); }
.wiz-back { background: var(--surface-2); color: var(--tx-dim); border: 1px solid var(--line); border-radius: var(--rad-sm); text-transform: none; letter-spacing: 0.02em; }
.wiz-back:hover { background: var(--surface-3); color: var(--tx); }
.hero-cta-secondary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); color: var(--tx); }
.hero-cta-secondary:hover { background: var(--surface-2); color: var(--tx); }
.hero-cta-eye { color: var(--tx-mute); }

/* ── Hero (statement) ──────────────────────────────────────────────────── */
.atelier-statement { background: radial-gradient(120% 80% at 80% 0%, rgba(245,179,1,0.06), transparent 60%), var(--bg); border-bottom: 1px solid var(--line); padding: clamp(44px,6vw,92px) 24px clamp(40px,5vw,72px); }
.atelier-statement::before { display: none; }
.hero-grid { align-items: center; gap: clamp(32px,4vw,60px); }
.atelier-eyebrow { background: var(--amber-soft); color: var(--amber); border-radius: var(--rad-pill); padding: 7px 16px 7px 8px; letter-spacing: 0.14em; }
.atelier-eyebrow::before { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill); padding: 5px 11px; margin-right: 4px; }
.atelier-h1 { color: var(--tx); letter-spacing: -0.02em; }
.atelier-h1 em { color: var(--amber); }
.atelier-h1 em::after { display: none; }
.hero-typewriter-prefix { background: var(--surface-2); color: var(--tx-dim); border-radius: 7px; }
.hero-typewriter { color: var(--amber); }
.hero-cursor { background: var(--amber); }
.atelier-h1-subline { color: var(--tx-dim); }
.atelier-h1-subline strong { color: var(--tx); }
.atelier-spec { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surface); }
.atelier-spec > div:first-child { border-right: 1px solid var(--line); }
.atelier-spec dt { color: var(--tx-mute); }
.atelier-spec dd { color: var(--tx); }

/* ── Hero photo panel ──────────────────────────────────────────────────── */
.hero-photo-col { border-radius: var(--rad-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-glow); }
.hero-photo { border-radius: var(--rad-lg); filter: grayscale(0.2) contrast(1.05); }
.hero-photo-overlay { background: linear-gradient(180deg, rgba(11,13,16,0.05) 0%, rgba(11,13,16,0.55) 100%); }
.hero-photo-col::after { display: none; }
.hero-photo-chip { background: rgba(15,17,22,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--rad-sm); color: var(--tx); box-shadow: var(--sh-1); }
.hero-photo-chip .chip-eye { color: var(--tx-dim); }
.hero-photo-chip .chip-val { color: var(--tx); }
.hero-photo-chip-top { background: var(--amber); color: var(--amber-ink); border-color: transparent; }
.hero-photo-chip-top .chip-eye, .hero-photo-chip-top .chip-val { color: var(--amber-ink); }
.hero-photo-stamp { color: var(--tx); opacity: 0.9; }

/* ── Trust stats ───────────────────────────────────────────────────────── */
.trust-stats { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-stat { border-color: var(--line); }
.trust-stat-hi { background: var(--amber-soft); }
.trust-stat-eye { color: var(--amber); text-transform: uppercase; letter-spacing: 0.16em; }
.trust-stat-num { color: var(--tx); }
.trust-stat-foot { color: var(--tx-dim); }
.trust-stat-hi .trust-stat-foot { color: var(--tx-dim); }

/* ── Quick actions ─────────────────────────────────────────────────────── */
.quick-actions { background: var(--bg); gap: 16px; }
.qact { background: var(--surface); color: var(--tx); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); }
.qact:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sh-2); }
.qact-call, .qact-wa, .qact-form { background: var(--surface); color: var(--tx); }
.qact-num { color: var(--tx-mute); }
.qact-eye { color: var(--amber); }
.qact-head { color: var(--tx); }
.qact-sub { color: var(--tx-dim); }
.qact-arrow { color: var(--amber); }
.qact-wa .qact-eye { color: #34d17a; }

/* ── Sections (kap) ────────────────────────────────────────────────────── */
.kap { background: var(--bg); border-bottom: 1px solid var(--line); padding: clamp(60px,7vw,100px) 24px; }
.kap.kap-dark { background: var(--surface); }
.kap-dark .kap-h2, .kap-head-dark { color: var(--tx); }
.label-tag { background: var(--amber-soft); color: var(--amber); border-radius: var(--rad-pill); padding: 7px 15px; letter-spacing: 0.14em; }
.label-tag.tag-inv { background: var(--amber); color: var(--amber-ink); }
.kap-h2 { color: var(--tx); letter-spacing: -0.01em; }
.kap-h2 em { color: var(--amber); }
.kap-dark .kap-h2 em { color: var(--amber); }
.kap-sub { color: var(--tx-dim); opacity: 1; }

/* ── Vehicles grid ─────────────────────────────────────────────────────── */
.veh-grid { gap: 16px; }
.veh-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); padding: 26px 24px; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.veh-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-2); }
.veh-icon { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--line); border-radius: 12px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.veh-icon svg { width: 24px; height: 24px; }
.veh-card-title { color: var(--tx); }
.veh-card-body { color: var(--tx-dim); }
.veh-foot-note { color: var(--tx-mute); }

/* ── How it works (ablauf) ─────────────────────────────────────────────── */
.ablauf { border: 0; background: transparent; gap: 16px; }
.ablauf-step, .ablauf-step:nth-child(4) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); }
.ablauf-num, .ablauf-step:nth-child(2) .ablauf-num, .ablauf-step:nth-child(4) .ablauf-num { color: var(--amber); -webkit-text-stroke: 0; }
.ablauf-title, .ablauf-step:nth-child(4) .ablauf-title { color: var(--tx); }
.ablauf-body, .ablauf-step:nth-child(4) .ablauf-body { color: var(--tx-dim); }
.ablauf-time, .ablauf-time-value, .ablauf-step:nth-child(4) .ablauf-time-value { color: var(--amber); }
.ablauf-time-label, .ablauf-step:nth-child(4) .ablauf-time-label { color: var(--tx-mute); }
/* current partial uses .abl-* classes (brutalist.css left them on dark --ink → invisible on dark bg) */
.abl-num { color: var(--amber); }
.abl-line { background: var(--line-2); }
.abl-title { color: var(--tx); }
.abl-body { color: var(--tx-dim); }
.abl-time { color: var(--amber); background: var(--amber-soft); border-color: var(--line-2); }
.abl-note { color: var(--tx-mute); }
.abl-note-mark { background: var(--amber); color: var(--amber-ink); }

/* ── Brands marquee (wordmarks) ────────────────────────────────────────── */
.brands-strip { background: var(--bg-2); color: var(--tx); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  /* fade must live on the static overflow container, not the moving rail — else chips hard-clip at the edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.brands-strip-headline { color: var(--tx-mute); }
.brands-strip-headline strong { color: var(--amber); }
/* Seamless loop: two identical tracks, rail gap 0, each track carries its own trailing gap
   via padding-right so the -50% wrap lands exactly on a matching gap. */
.brands-strip-rail { gap: 0; }
.brands-strip-track { gap: 18px; padding-right: 18px; }
/* White logo-chip wall: real artwork, grayscale at rest → full colour on hover */
.brands-strip-track li {
  flex: 0 0 auto; height: 68px; min-width: 156px; padding: 0 26px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--rad-sm);
  box-shadow: var(--sh-1);
}
.brand-logo {
  height: 32px; max-width: 118px; width: auto; object-fit: contain; border-radius: 0;
  filter: grayscale(100%); opacity: 0.85;
  transition: filter 200ms ease, opacity 200ms ease;
}
.brands-strip-track li:hover .brand-logo { filter: none; opacity: 1; }
.brand-word { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #14171C; white-space: nowrap; }
.brands-strip-rail:hover { animation-play-state: paused; }
@media (max-width: 720px) { .brands-strip-track li { height: 56px; min-width: 124px; padding: 0 18px; } .brand-logo { height: 24px; max-width: 92px; } .brand-word { font-size: 17px; } }

/* ── Why-us compare (home teaser + full) ───────────────────────────────── */
.vsg-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); padding: 22px 24px; }
.vsg-label { color: var(--tx); }
.vsg-side-label { color: var(--tx-mute); }
.vsg-pain .vsg-text { color: var(--tx-dim); }
.vsg-gain .vsg-text { color: var(--tx); }
.vsg-icon-x { color: var(--tx-mute); }
.vsg-icon-check { color: var(--amber); }
.vsg-arrow { color: var(--tx-mute); }
.compare-trust { color: var(--tx-mute); }
.compare-foot-link { color: var(--tx-dim); border-bottom-color: var(--line-2); }
.compare-foot-link:hover { color: var(--amber); }

/* ── Coverage map ──────────────────────────────────────────────────────── */
.coverage { border: 1px solid var(--line); border-radius: var(--rad-lg); background: var(--surface); overflow: hidden; }
.at-bundes .bl { fill: rgba(255,255,255,0.06); stroke: var(--line-2); }
.at-bundes a .bl { fill: var(--surface-3); }
.at-bundes a:hover .bl { fill: var(--amber); }

/* ── Export ────────────────────────────────────────────────────────────── */
.exp-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); background-image: none; }
.exp-land { fill: var(--surface-3); stroke: var(--line-2); }
.exp-land:hover { fill: var(--amber); fill-opacity: 1; }
.exp-hq { fill: var(--amber); }
.exp-legend { border-top: 1px solid var(--line); }
.exp-key { color: var(--tx-dim); }
.exp-swatch { border-color: var(--line-2); }
.exp-key-mkt .exp-swatch { background: var(--surface-3); }
.exp-stat { color: var(--tx); border-left: 3px solid var(--amber); }
.exp-checks li { color: var(--tx-dim); }
.exp-tick { color: var(--amber); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { border: 1px solid var(--line); border-radius: var(--rad); background: var(--surface); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { color: var(--tx); }
.faq summary::after { color: var(--amber); }
.faq details[open] summary { background: var(--amber-soft); }
.faq p { color: var(--tx-dim); }
.faq p a { color: var(--amber); }

/* ── Final CTA ─────────────────────────────────────────────────────────── */
.finalcta { background: radial-gradient(100% 120% at 50% 0%, rgba(245,179,1,0.10), transparent 55%), var(--surface); border-bottom: 1px solid var(--line); }
.finalcta::before { display: none; }
.finalcta .label-tag { background: var(--amber-soft); color: var(--amber); }
.finalcta .kap-h2, .finalcta .kap-sub { color: var(--tx); }
.finalcta .kap-h2 em { color: var(--amber); }
.finalcta .kap-sub { opacity: 0.9; }
.finalcta .btn-block-yellow { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill); box-shadow: var(--amber-glow); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 800; }
.finalcta .btn-block-white { background: var(--surface); color: var(--tx); border: 1px solid var(--line); border-radius: var(--rad-pill); box-shadow: var(--sh-1); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 700; }
.finalcta .btn-block-yellow:hover, .finalcta .btn-block-white:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--bg-2); color: var(--tx-dim); border-top: 1px solid var(--line); }
.foot a { color: var(--tx-dim); }
.foot a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.footer-states { border-bottom: 1px solid var(--line); }
.footer-states-label { color: var(--amber); }
.footer-states-list li { border-right: 1px solid var(--line); }
.footer-states-list a { color: var(--tx); }
.foot-grid h4 { color: var(--amber); }
.foot-grid p { color: var(--tx-dim); }
.brand-foot-logo { background: transparent; border: 0; padding: 0; }
.foot-social a { background: var(--surface-2); color: var(--tx); border: 1px solid var(--line); }
.foot-social a:hover { background: var(--amber); color: var(--amber-ink); }
.foot-bottom, .foot-mute { color: var(--tx-mute); border-color: var(--line); }

/* ── Sticky mobile CTA ─────────────────────────────────────────────────── */
.sticky-btn { border-radius: var(--rad-pill); box-shadow: var(--sh-2); border: 1px solid var(--line); }
.sticky-call { background: var(--surface-2); color: var(--tx); }
.sticky-wa   { background: #1FA855; color: #fff; border-color: transparent; }
.sticky-form { background: var(--amber); color: var(--amber-ink); border-color: transparent; }

/* ── Cookie banner ─────────────────────────────────────────────────────── */
.cookie { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-glow); }
.cookie-text { color: var(--tx-dim); }
.cookie-text strong { color: var(--tx); }
.cookie-text a { color: var(--amber); }
.cookie-decline { background: transparent; color: var(--tx-dim); border: 1px solid var(--line); border-radius: var(--rad-pill); }
.cookie-decline:hover { background: var(--surface-3); color: var(--tx); }
.cookie-accept { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill); }

/* ── Wizard (bewertung + state) ────────────────────────────────────────── */
.wizard { background: rgba(20,23,28,0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--sh-glow); }
.wizard::before { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad-pill); letter-spacing: 0.12em; }
.wiz-header { border-bottom: 1px solid var(--line); }
.wiz-step { color: var(--tx-dim); }
.wiz-dots span { background: var(--surface-3); border: 0; border-radius: var(--rad-pill); }
.wiz-dots span.on { background: var(--amber); }
.wiz-q { color: var(--tx); }
.wiz-help { color: var(--tx-dim); }
.instrument { background: var(--amber-soft); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.instrument-icon { color: var(--amber); }
.instrument-eyebrow { color: var(--tx-dim); }
.instrument-headline { color: var(--tx); }
.instrument-pip { background: var(--amber); border: 0; }
.field span { color: var(--tx-dim); letter-spacing: 0.12em; }
.wiz-form input, .wiz-form select, .wiz-form textarea { background: var(--surface-2); color: var(--tx); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.wiz-form input::placeholder, .wiz-form textarea::placeholder { color: var(--tx-mute); }
.wiz-form select { background-image: linear-gradient(45deg, transparent 50%, var(--tx-dim) 50%), linear-gradient(135deg, var(--tx-dim) 50%, transparent 50%); }
.wiz-form input:focus, .wiz-form select:focus, .wiz-form textarea:focus { background: var(--surface-3); outline: 2px solid var(--amber); outline-offset: -1px; }
.cond span { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad-sm); color: var(--tx-dim); }
.cond span b { color: var(--tx); }
.cond span i { color: var(--tx-mute); }
.cond:hover span { box-shadow: var(--sh-1); border-color: var(--line-2); }
.cond input:checked + span { background: var(--amber-soft); border-color: var(--amber); color: var(--tx); }
.cond input:checked + span b { color: var(--tx); }
.cond input:checked + span i { color: var(--tx-dim); }
.wiz-fine { color: var(--tx-mute); }
.wiz-fine a { color: var(--amber); }
.wiz-call { background: var(--surface-2); color: var(--tx-dim); border: 1px dashed var(--line-2); border-radius: var(--rad-sm); }
.wiz-call:hover { background: var(--surface-3); color: var(--tx); }
.wiz-success .success-icon { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: var(--rad); box-shadow: var(--amber-glow); }
.wiz-phone-card { border-top: 1px dashed var(--line-2); }
.wiz-phone-label { color: var(--tx-mute); }
.wiz-phone-link { background: var(--surface-2); color: var(--tx); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.wiz-phone-link:hover { background: var(--surface-3); }
.wiz-phone-icon { color: var(--amber); }
.wiz-phone-num { color: var(--tx); }
.wiz-phone-hint { color: var(--tx-mute); }

/* ── Home + state hero (hero-statement) ────────────────────────────────── */
.hero-statement { background: radial-gradient(120% 80% at 82% 0%, rgba(245,179,1,0.06), transparent 60%), var(--bg); border-bottom: 1px solid var(--line); }
.hero-statement-h1 { color: var(--tx); letter-spacing: -0.02em; }
.hero-statement-h1 em { color: var(--amber); }
.hero-statement-h1 em::before { display: none; }
.hero-statement-lead { font-family: var(--font-body); font-weight: 600; color: var(--tx); font-size: clamp(18px, 2.2vw, 26px); line-height: 1.2; margin: 0 0 22px; }
.hero-statement-typeline { color: var(--tx-dim); }
.hero-statement-sub { color: var(--tx-dim); }
.hero-statement-sub strong { color: var(--tx); }
.hero-spec-row { border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--surface); max-width: 560px; }
.hero-spec-row > div { border-right: 1px solid var(--line); }
.hero-spec-row dt { color: var(--tx-mute); }
.hero-spec-row dd { color: var(--tx); }

/* Trust-stat numbers: keep long words (GRATIS) inside their cell */
.trust-stat-num { font-size: clamp(26px, 3vw, 40px); white-space: nowrap; }

/* ── Hero: smaller headline, bigger suffix line, no typewriter layout-shift ── */
.hero-statement-h1 { font-size: clamp(40px, 5vw, 80px); line-height: 0.92; margin: 18px 0 12px; }
.hero-statement-typeline { font-size: clamp(18px, 2.3vw, 30px); min-height: 1.7em; align-items: center; margin-bottom: 26px; }
.hero-typewriter-prefix { font-size: 0.62em; }
.hero-typewriter { display: inline-block; min-width: 12ch; white-space: nowrap; text-align: left; font-weight: 700; }
.hero-cursor { height: 1em; }

/* ── Hero photo slideshow (parked vehicles, crossfade) ─────────────────── */
.hero-photo { background-image: none !important; }
.hero-slideshow .hs-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; opacity: 0;
  animation: hsFade 18s infinite;
}
.hero-slideshow .hs-slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .hs-slide:nth-child(2) { animation-delay: 6s; }
.hero-slideshow .hs-slide:nth-child(3) { animation-delay: 12s; }
@keyframes hsFade {
  0%   { opacity: 0; }
  1.5% { opacity: 1; }
  30%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .hs-slide { animation: none; opacity: 0; }
  .hero-slideshow .hs-slide:nth-child(2) { opacity: 1; }
}

/* ── Bewertung page + state wizard sections ────────────────────────────── */
.bwt-form-section, .state-wizard-section { background: var(--bg); border-bottom: 1px solid var(--line); }
.bwt-headline { color: var(--tx); }
.bwt-headline em { color: var(--amber); }
.bwt-sub { color: var(--tx-dim); }
.bwt-hero-eyebrow { background: var(--amber-soft); color: var(--amber); border-radius: var(--rad-pill); }
.bwt-stat-strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.bwt-stat-strip li { border-right: 1px solid var(--line); }
.bwt-stat-num { color: var(--tx); }
.bwt-stat-lab { color: var(--tx-dim); }
.bwt-trust-card { background: var(--surface); color: var(--tx); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); }
.bwt-trust-eyebrow { color: var(--amber); }
.bwt-phone-num { color: var(--tx); }
.bwt-phone-hint { color: var(--tx-dim); }
.bwt-promise { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-1); }
.bwt-promise-h { color: var(--tx); }
.bwt-promise-list li { border-top: 1px solid var(--line); color: var(--tx-dim); }
.bwt-promise-num { color: var(--amber); }
.bwt-fineprint { background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--tx-mute); border-radius: var(--rad-sm); }
.bwt-fineprint strong { color: var(--tx); }

/* ── Section supporting photo (Ablauf, Warum wir) ───────────────────────── */
.kap-photo {
  max-width: 640px;
  margin: 0 auto 40px;
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.kap-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ── Coverage map — Austria in flag red, not the site's gunmetal accent ──
   Scoped to .cov-state only: --klein is the global dark accent used all over
   the design system (nav, buttons, borders), so redefining it here would
   turn the whole site red. This overrides just the map fill. */
.cov-state { fill: #ED2939; }
.cov-state-link:hover .cov-state,
.cov-state-link:focus-visible .cov-state { fill: #B31E2E; }
.cov-state-link:focus-visible { outline-color: #ED2939; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .veh-card, .qact, .hero-cta-primary, .nav-cta, .wiz-cta, .finalcta .btn-block-yellow, .finalcta .btn-block-white { transition: none; }
}