/* Hallmark · redesign · genre: atmospheric · macrostructure: Marquee Hero · H1 marquee knobs: size=xxl, stacked=3-line
 * theme: custom · vibe: "aggressive automotive, crimson-on-carbon, motorsport" · paper: oklch(13% 0.012 25) · accent: oklch(55% 0.205 27)
 * display: Anton · body: Barlow · axes: dark / display-condensed-bold / warm
 * nav: N5 floating pill · footer: Ft5 statement · enrichment: Tier A CSS art (living-carbon bg + glass-crack + streaks)
 * multi-page: index · leistungen · toenung · klima · kontakt (+ impressum · datenschutz)
 * motion: brief-driven rich (client priority) — GPU-only (transform/opacity), reduced-motion safe
 * studied: no (brand-DNA from user assets) · context: inferred · v0.9.0
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ============================================================ Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--color-paper); }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: transparent;               /* .site-bg (fixed) shows through */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:target { scroll-margin-top: 6.5rem; }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100px;
  z-index: 200;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

/* ============================================================ Layout */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--space-lg); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

/* ============================================================ Type helpers */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-bright);
  display: inline-flex; align-items: center; gap: var(--space-sm);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--color-accent); display: inline-block;
}
.lede { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 58ch; }
.accent { color: var(--color-accent-bright); }
.muted { color: var(--color-muted); }

/* ============================================================ Buttons */
.btn {
  --_bg: var(--color-accent);
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--text-base);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-ink);
  background: var(--_bg);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.btn .chev { display: inline-flex; transition: transform var(--dur-mid) var(--ease-out); }
.btn:hover, .btn.is-hover { background: var(--color-accent-bright); transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--glow-strong); }
.btn:hover .chev, .btn.is-hover .chev { transform: translateX(4px); }
.btn:active, .btn.is-active { transform: translateY(0); background: var(--color-accent-deep); }
.btn:focus-visible { outline-offset: 4px; }

.btn--ghost {
  background: transparent; color: var(--color-ink);
  border-color: var(--color-accent-soft);
  clip-path: none; border-radius: var(--radius-md);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  background: var(--color-paper-3); border-color: var(--color-accent);
  color: var(--color-ink); transform: translateY(-2px); box-shadow: none;
}
.btn--ghost:active { background: var(--color-paper-2); }

.btn--lg { padding: 1.15rem 2.1rem; font-size: var(--text-lg); }

/* ============================================================ Nav — N5 floating pill */
.nav-outer {
  position: sticky; top: 0; z-index: 100;
  padding-top: var(--space-md); pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-lg);
  width: min(1180px, calc(100% - 2 * var(--space-lg)));
  margin-inline: auto;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  background: var(--color-nav-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}
.nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__brand img {
  height: 40px; width: auto;
  filter: drop-shadow(0 0 10px oklch(0% 0 0 / 0.55)) drop-shadow(0 0 18px var(--glow-soft));
}
.nav__brand span.sr-only { position: absolute; }
.nav__links { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.nav__link {
  padding: 0.5rem 0.85rem;
  font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.02em; color: var(--color-ink-2);
  border-radius: var(--radius-pill); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--color-ink); background: var(--color-paper-3); }
.nav__cta { margin-left: var(--space-2xs); }
.nav__cta .btn { padding: 0.6rem 1.1rem; font-size: var(--text-sm); }

.nav__toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--color-paper-3); border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
}
.nav__toggle .bars, .nav__toggle .bars::before, .nav__toggle .bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--color-ink);
  position: relative; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle .bars::before { position: absolute; top: -6px; }
.nav__toggle .bars::after  { position: absolute; top: 6px; }
.nav[data-open="true"] .nav__toggle .bars { background: transparent; }
.nav[data-open="true"] .nav__toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle .bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================ Hero — Marquee */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  margin-top: calc(-1 * (40px + 1.1rem + var(--space-md)));
  padding-top: calc(40px + 1.1rem + var(--space-md) + clamp(2.5rem, 6vw, 4.5rem));
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hex-red); background-attachment: fixed;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 72%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 18%, var(--glow-mid), transparent 60%),
    radial-gradient(70% 60% at 8% 92%, var(--glow-deep), transparent 62%);
}
.hero__streak {
  position: absolute; z-index: 0; top: -20%; right: -6%;
  width: 3px; height: 150%;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
  transform: rotate(24deg); opacity: 0.55;
  filter: drop-shadow(0 0 8px var(--glow-strong));
}
.hero__streak--2 { right: 2%; opacity: 0.28; height: 120%; }

/* Windshield-replacement motif — a side-view car drives in from the left with
   a cracked (red) windshield, brakes to a stop, has the pane dropped out and a
   fresh (green) one seated, then drives off to the right. The whole thing loops:
   the green→red reset happens off-frame between exit and the next entrance. */
.hero__car {
  position: absolute; z-index: 0; top: 50%; right: 5%;
  width: min(52vw, 620px); aspect-ratio: 480 / 260; transform: translateY(-50%);
  pointer-events: none; opacity: 0;
  animation: carFade var(--dur-slow) var(--ease-out) 0.25s forwards;
  --car-opacity: 0.85;
  /* local palette */
  --car-line:  oklch(58% 0.09 27);
  --car-fill:  oklch(19% 0.02 25 / 0.55);
  --car-glass: oklch(40% 0.05 27 / 0.35);
  --ws-red:      var(--color-accent-bright);
  --ws-red-fill: oklch(55% 0.20 27 / 0.34);
  --ws-green:      oklch(76% 0.17 152);
  --ws-green-fill: oklch(72% 0.17 152 / 0.30);
  --ws-cycle: 9s;   /* master loop — drive + wheels + swap all share it */
}
/* the <svg> is the moving car: it drives across on the shared cycle */
.hero__car svg {
  width: 100%; height: 100%; overflow: visible;
  animation: carDrive var(--ws-cycle) linear infinite;
}
@keyframes carFade { to { opacity: var(--car-opacity); } }

/* drive in from off-left (steady, then brake) → hold → launch off to the right.
   Sub-segments keep the crossing at near-constant speed so it reads as driving,
   with just a short decel into the stop and a short accel out of it. */
@keyframes carDrive {
  0%   { transform: translateX(-130vw); opacity: 0.45; animation-timing-function: linear; }
  11%  { transform: translateX(-14vw);  opacity: 1;    animation-timing-function: var(--ease-out); }
  16%  { transform: translateX(0);      opacity: 1; }
  76%  { transform: translateX(0);      opacity: 1;    animation-timing-function: var(--ease-in); }
  80%  { transform: translateX(5vw);    opacity: 1;    animation-timing-function: linear; }
  100% { transform: translateX(75vw);   opacity: 0.4; }
}

.car__shadow { fill: oklch(4% 0.004 25 / 0.45); }
.car__body {
  fill: var(--car-fill); stroke: var(--car-line);
  stroke-width: 2.2; stroke-linejoin: round;
}
.car__glass { fill: var(--car-glass); stroke: var(--car-line); stroke-width: 1.4; }
.car__pillar { stroke: var(--car-line); stroke-width: 2; stroke-linecap: round; }
.car__wsframe {
  fill: oklch(9% 0.008 25 / 0.6); stroke: var(--car-line);
  stroke-width: 1.6; stroke-linejoin: round;
}

.wheel__tire { fill: oklch(12% 0.01 25); stroke: var(--car-line); stroke-width: 2.4; }
.wheel__rim  { fill: none; stroke: var(--car-line); stroke-width: 2; opacity: 0.8; }
.wheel__hub  { fill: var(--car-line); }
/* wheels roll while the car moves, hold still while it's parked */
.wheel { transform-box: fill-box; transform-origin: center; animation: wheelSpin var(--ws-cycle) linear infinite; }
@keyframes wheelSpin {
  0%   { transform: rotate(0deg);    animation-timing-function: linear; }
  16%  { transform: rotate(760deg); }
  76%  { transform: rotate(760deg);  animation-timing-function: linear; }
  100% { transform: rotate(1520deg); }
}

/* windshield panes share the front slot; both animate on the master cycle */
.ws { transform-box: fill-box; transform-origin: center; }
.ws__pane { stroke-width: 2.2; stroke-linejoin: round; }
.ws__pane--red   { fill: var(--ws-red-fill);   stroke: var(--ws-red); }
.ws__pane--green { fill: var(--ws-green-fill); stroke: var(--ws-green); }
.ws--red   { animation: wsBroken var(--ws-cycle) linear infinite; }
.ws--green { animation: wsFresh  var(--ws-cycle) linear infinite; }
.ws--red   { filter: drop-shadow(0 0 6px oklch(55% 0.20 27 / 0.45)); }
.ws--green { filter: drop-shadow(0 0 8px oklch(72% 0.17 152 / 0.5)); }

.ws__cracks path { stroke: var(--ws-red); stroke-width: 1.5; stroke-linecap: round; }
.ws__cracks circle { fill: var(--ws-red); }

/* broken pane: rides in installed → parked, held → pops → falls out of frame
   → stays gone → resets in-place while the car is off-frame (next loop's arrival) */
@keyframes wsBroken {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  22%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(-9px) rotate(-4deg); opacity: 1; animation-timing-function: var(--ease-in); }
  34%  { transform: translateY(250px) rotate(30deg); opacity: 0; }
  96%  { transform: translateY(250px) rotate(30deg); opacity: 0; }
  97%  { transform: translateY(0) rotate(0deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
/* fresh pane: waits above the frame → drops into the slot with a seat-bounce
   → held (payoff) → rides out installed → resets above-frame off-screen */
@keyframes wsFresh {
  0%   { transform: translateY(-260px); opacity: 0; }
  40%  { transform: translateY(-260px); opacity: 0; }
  43%  { transform: translateY(-250px); opacity: 1; animation-timing-function: var(--ease-in); }
  52%  { transform: translateY(11px);  opacity: 1; }
  55%  { transform: translateY(-4px);  opacity: 1; }
  58%  { transform: translateY(0);     opacity: 1; }
  90%  { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-260px); opacity: 0; }
}

.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-xl); }
.hero__head { display: grid; justify-items: start; gap: var(--space-lg); max-width: min(46rem, 100%); }

.hero__title { font-size: var(--text-display); margin-block: var(--space-xs); }
.hero__title .l1 { color: var(--color-ink); display: block; }
.hero__title .l2 { color: var(--color-accent); display: block; filter: drop-shadow(0 0 24px var(--glow-mid)); }
.hero__title .l3 { color: var(--color-ink); display: block; }
.hero__title .zero {
  color: var(--color-accent-bright);
  filter: drop-shadow(0 0 28px var(--glow-bright));
}
.hero__title .star { color: var(--color-accent-bright); font-size: 0.42em; vertical-align: super; }

.hero__pill {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 0.5rem 1rem;
  background: var(--color-paper-2); border: 1px solid var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--text-sm); color: var(--color-ink);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.hero__footnote { font-size: var(--text-xs); color: var(--color-muted); max-width: 52ch; }
.hero__footnote .star { color: var(--color-accent-bright); font-weight: 700; }

/* Trust points */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-md); }
.trust__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.trust__ico {
  width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill);
  color: var(--color-accent-bright);
}
.trust__ico svg { width: 20px; height: 20px; }
/* Card label, not a document heading — a <span> so it stays out of the heading
   outline (h1 -> h3 skip) and out of reach of the `.trust p` rule below. */
.trust__title { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink); }
.trust p { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: 2px; }

/* ============================================================ Section head */
.section-head { display: grid; gap: var(--space-md); max-width: 62ch; margin-bottom: var(--space-2xl); }
.section-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.06; font-size: var(--text-3xl); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.section-head h2 .accent { color: var(--color-accent); }
.section-head p { color: var(--color-ink-2); font-size: var(--text-lg); }

/* ============================================================ Services grid */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.svc {
  position: relative; display: grid; gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.svc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border-top: 3px solid var(--color-accent); opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.svc:hover, .svc.is-hover { transform: translateY(-4px); border-color: var(--color-accent-soft); box-shadow: 0 18px 44px -22px var(--glow-strong); }
.svc:hover::before, .svc.is-hover::before { opacity: 1; }
/* Deep-link landing (e.g. nav "Scheibenwechsel" -> #scheiben): the scroll alone
   can read as "didn't go anywhere" since the card sits right under the sticky
   nav, same as the page's own top. Pulse it so the jump is unmistakable. */
.svc:target { animation: svc-target-pulse 1600ms var(--ease-out); }
@keyframes svc-target-pulse {
  0% { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--glow-mid), 0 18px 44px -22px var(--glow-strong); }
  100% { border-color: var(--color-rule); box-shadow: none; }
}
.svc__num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); line-height: 1; }
.svc__ico { width: 46px; height: 46px; display: grid; place-items: center; color: var(--color-accent-bright); background: var(--color-paper-inset); border: 1px solid var(--color-accent-soft); border-radius: var(--radius-md); }
.svc__ico svg { width: 24px; height: 24px; }
.svc h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); line-height: 1.1; }
.svc p { font-size: var(--text-sm); color: var(--color-ink-2); }
.svc__link { margin-top: auto; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-bright); display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.svc__link .chev { transition: transform var(--dur-mid) var(--ease-out); }
.svc__link:hover .chev, .svc__link:focus-visible .chev { transform: translateX(4px); }

/* Warning card (StVO) */
.svc--warn { border-color: var(--color-warning-soft); }
.svc--warn .svc__ico { color: var(--color-warning); border-color: var(--color-warning-soft); }
.svc__warning {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-warning-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); color: var(--color-ink);
}
.svc__warning svg { width: 18px; height: 18px; color: var(--color-warning); flex-shrink: 0; }
.svc__warning strong { color: var(--color-warning); }

/* ============================================================ Price — tinting table */
.price-band { background: var(--color-paper-inset); }
.tint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.tint {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: var(--space-md); row-gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tint:hover { border-color: var(--color-accent-soft); background: var(--color-paper-3); }
.tint__num {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--color-accent-ink); background: var(--color-accent);
  border-radius: var(--radius-sm);
}
.tint__body h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--color-ink); line-height: 1.15; }
.tint__body p { font-size: var(--text-xs); color: var(--color-muted); }
.tint__price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); white-space: nowrap; }
.tint__price .ab { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); color: var(--color-accent-bright); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.25em; vertical-align: 0.15em; }
/* Fahrzeug-Silhouette: eigene Zeile ueber die volle Kartenbreite. Sie im
   Textfluss danebenzustellen laesst bei zwei Spalten (~480px Inhalt) fuer
   den Untertitel nur ~160px — er bricht dann auf drei Zeilen. */
.tint__car {
  grid-column: 1 / -1; justify-self: center;
  width: min(230px, 68%); height: auto;
  /* Kein Hintergrund, kein filter:, kein transform: — die Reifen stecken als
     deckende Pixel im Freisteller. filter/transform erzeugen im preserve-3d
     der .tilt-Karte eine eigene Ebene, die beim Hover hinter dem Kartengrund
     landen und den Wagen verschwinden lassen kann. */
}

.price-note { margin-top: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.price-note svg { width: 16px; height: 16px; color: var(--color-accent-bright); }

/* ============================================================ Klima cards */
.klima-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: 940px; }
.klima {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
}
.klima__glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 120% at 100% 50%, var(--glow-soft), transparent 60%); pointer-events: none; }
.klima > *:not(.klima__glow) { position: relative; z-index: 1; }
.klima__ico { width: 48px; height: 48px; display: grid; place-items: center; color: var(--color-accent-bright); border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); }
.klima__ico svg { width: 24px; height: 24px; }
.klima__name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: 0.01em; min-width: 0; }
.klima__price { text-align: right; min-width: 0; }
.klima__price b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-accent-bright); line-height: 0.9; }
.klima__price span { display: block; font-size: var(--text-xs); color: var(--color-ink-2); max-width: 12ch; margin-left: auto; }

.callout { padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.callout strong { color: var(--color-ink); }

/* ============================================================ Klimagas-Füllmengen table */
.gas-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.gas-table-block__title {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink);
  margin-bottom: var(--space-md);
}
.gas-table-wrap { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.gas-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: var(--text-sm); }
.gas-table th, .gas-table td { padding: var(--space-sm) var(--space-md); text-align: left; white-space: nowrap; }
.gas-table thead th { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-2); background: var(--color-paper-3); border-bottom: 1px solid var(--color-rule); position: sticky; top: 0; }
.gas-table tbody td { color: var(--color-ink); border-bottom: 1px solid var(--color-rule-2); }
.gas-table tbody tr:last-child td { border-bottom: none; }
.gas-table tbody tr:hover td { background: var(--color-paper-3); }
.gas-table tbody td:last-child { color: var(--color-accent-bright); font-weight: 700; white-space: normal; }

/* ============================================================ Hours + Contact */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.info-col { display: grid; gap: var(--space-lg); align-content: start; }
.hours { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; }
.hours__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.hours__row:last-child { border-bottom: 0; }
.hours__row.is-closed .hours__time { color: var(--color-muted); }
.hours__row.is-today { background: var(--tint-accent); border-left: 3px solid var(--color-accent); }
.hours__day { font-weight: 600; color: var(--color-ink); }
.hours__day .badge { margin-left: var(--space-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-bright); }
.hours__time { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); letter-spacing: 0.02em; }

.contact { display: grid; gap: var(--space-lg); align-content: start; }
.contact__lead { color: var(--color-ink-2); }
.contact__list { display: grid; gap: var(--space-2xs); }
.contact__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); }
.contact__item svg { width: 20px; height: 20px; color: var(--color-accent-bright); }
.contact__item .k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.contact__item .v { font-weight: 600; color: var(--color-ink); }
a.contact__item { transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); padding-left: var(--space-sm); margin-left: calc(-1 * var(--space-sm)); }
a.contact__item:hover, a.contact__item:focus-visible { background: var(--color-paper-2); }
a.contact__item:hover .v, a.contact__item:focus-visible .v { color: var(--color-accent-bright); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ============================================================ CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--color-paper-inset); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-band__bg::before { content: ""; position: absolute; inset: 0; background-image: var(--hex-red); opacity: 0.6; -webkit-mask-image: radial-gradient(80% 140% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(80% 140% at 50% 0%, #000, transparent 70%); }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 120%, var(--glow-mid), transparent 60%); }
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-lg); justify-items: center; text-align: center; }
.cta-band h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-4xl); line-height: 1.06; color: var(--color-ink); }
.cta-band h2 .accent { color: var(--color-accent); }
.cta-band p { color: var(--color-ink-2); max-width: 46ch; }

/* ============================================================ Footer — Ft5 statement */
.footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer__statement { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-3xl); line-height: 1.06; color: var(--color-ink); max-width: 16ch; }
.footer__statement .accent { color: var(--color-accent); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-xl); margin-top: var(--space-2xl); }
.footer__brand img { height: 34px; width: auto; margin-bottom: var(--space-md); }
.footer__brand p { font-size: var(--text-sm); color: var(--color-muted); max-width: 32ch; }
.footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.footer__social a:hover, .footer__social a:focus-visible { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.footer__social svg { width: 20px; height: 20px; }
/* Column label, not a document heading — a <span> so it stays out of the heading
   outline (h2 -> h4 skip) and is not overridden by `.footer__col p` below. */
.footer__col-title { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: var(--space-md); }
.footer__col a, .footer__col p { display: block; font-size: var(--text-sm); color: var(--color-ink-2); padding: 0.2rem 0; }
.footer__col a { width: max-content; }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--color-accent-bright); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); justify-content: space-between; align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.footer__bottom a:hover { color: var(--color-ink-2); }
.footer__x { color: var(--color-accent); font-family: var(--font-display); }

/* ============================================================ Reveal motion
 * Hiding is gated behind .js so content stays visible without JavaScript (SEO / no-JS). */
.reveal { transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal { opacity: 0; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }
.reveal[data-delay="3"] { transition-delay: 180ms; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================ Legal pages */
.legal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: min(1180px, calc(100% - 2 * var(--space-lg))); margin: var(--space-md) auto 0; padding: 0.55rem 1rem 0.55rem 1.1rem; background: var(--color-nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: var(--shadow-1); }
.legal-nav img { height: 28px; width: auto; display: block; }
.legal-nav .back { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); }
.legal-nav .back:hover, .legal-nav .back:focus-visible { color: var(--color-ink); background: var(--color-paper-3); }
.legal { max-width: 760px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--space-3xl); }
.legal h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-4xl); line-height: 1.06; margin: var(--space-md) 0 var(--space-xl); overflow-wrap: anywhere; }
.legal h2 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-lg); color: var(--color-ink); margin: var(--space-2xl) 0 var(--space-sm); }
.legal h3 { font-weight: 700; font-size: var(--text-base); color: var(--color-ink); margin: var(--space-lg) 0 var(--space-2xs); }
.legal p, .legal address { color: var(--color-ink-2); margin-bottom: var(--space-md); font-style: normal; max-width: 68ch; }
.legal address { line-height: 1.8; }
.legal a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover, .legal a:focus-visible { color: var(--color-ink); }
.legal strong { color: var(--color-ink); }
.legal ul { color: var(--color-ink-2); margin: 0 0 var(--space-md) 1.1rem; display: grid; gap: var(--space-2xs); }
.legal .note { padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.legal hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-2xl) 0; }

/* ============================================================ Site background — living carbon (v0.9)
 * Fixed full-viewport atmosphere so desktop no longer reads flat/empty:
 * hex texture + slow-drifting crimson aurora + travelling light-streaks + cursor spotlight. */
.site-bg {
  --px: 50%; --py: 8%;          /* cursor spotlight, updated by app.js */
  --par-x: 0px; --par-y: 0px;   /* pointer parallax offset */
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(30% 32% at var(--px) var(--py), var(--bg-spot), transparent 60%),
    radial-gradient(130% 80% at 50% -12%, var(--bg-glow-cool), transparent 62%),
    radial-gradient(100% 120% at 50% 120%, var(--bg-vignette), transparent 55%);
  transition: background-position var(--dur-mid) var(--ease-out);
}
.site-bg::before {   /* hex carbon weave */
  content: ""; position: absolute; inset: -10%;
  background-image: var(--hex-red);
  -webkit-mask-image: radial-gradient(125% 105% at 50% 28%, #000 24%, transparent 86%);
  mask-image: radial-gradient(125% 105% at 50% 28%, #000 24%, transparent 86%);
  transform: translate3d(var(--par-x), var(--par-y), 0);
}
.site-bg::after {    /* drifting aurora */
  content: ""; position: absolute; inset: -35%;
  background:
    radial-gradient(38% 46% at 18% 22%, var(--bg-glow-1), transparent 60%),
    radial-gradient(34% 42% at 84% 30%, var(--bg-glow-2), transparent 62%),
    radial-gradient(48% 52% at 62% 96%, var(--glow-deep), transparent 60%);
  animation: bgDrift var(--dur-drift) var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.site-bg__streak {
  position: absolute; top: -30%; left: 13%;
  width: 2px; height: 160%;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
  transform: rotate(21deg); opacity: 0.13;
  filter: drop-shadow(0 0 10px var(--glow-strong));
  animation: streakDrift var(--dur-streak) var(--ease-in-out) infinite alternate;
}
.site-bg__streak--2 { left: auto; right: 11%; height: 150%; opacity: 0.09; animation-duration: 21s; animation-delay: -7s; }
.site-bg__streak--3 { left: 46%; height: 120%; opacity: 0.06; animation-duration: 26s; animation-delay: -3s; }
@keyframes bgDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.03); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.1); }
}
@keyframes streakDrift {
  from { transform: translateY(-5%) rotate(21deg); }
  to   { transform: translateY(5%) rotate(21deg); }
}

/* ============================================================ Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent-bright));
  box-shadow: 0 0 12px var(--glow-strong);
  will-change: transform;
}

/* ============================================================ Nav — scrolled + active states */
.nav { transition: padding var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out); }
.nav__brand img { transition: transform var(--dur-mid) var(--ease-out); }
.nav__brand:hover img { transform: scale(1.06) rotate(-1deg); }
.nav.is-scrolled {
  padding-top: 0.4rem; padding-bottom: 0.4rem;
  background: var(--color-nav-panel);
  border-color: var(--color-accent-soft);
  box-shadow: var(--shadow-2);
}
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.28rem; height: 2px;
  background: var(--color-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(0.5); }
.nav__link[aria-current="page"] { color: var(--color-ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================ Reveal — directional + stagger */
.reveal[data-reveal="left"]  { transform: translateX(-26px); }
.reveal[data-reveal="right"] { transform: translateX(26px); }
.reveal[data-reveal="scale"] { transform: scale(0.94); }
.reveal[data-reveal="left"].is-visible,
.reveal[data-reveal="right"].is-visible,
.reveal[data-reveal="scale"].is-visible { transform: none; }
/* index-based stagger (set --i on children of a [data-stagger] container) */
[data-stagger] > .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* ============================================================ Interior page hero */
.page-hero {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * (40px + 1.1rem + var(--space-md)));
  padding-top: calc(40px + 1.1rem + var(--space-md) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--color-rule);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 82% -10%, var(--glow-mid), transparent 60%),
              radial-gradient(60% 100% at 6% 120%, var(--glow-deep), transparent 62%);
}
.page-hero .hero__streak { z-index: 0; }
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-md); max-width: 52rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); }
.breadcrumb a { color: var(--color-ink-2); transition: color var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--color-accent-bright); }
.breadcrumb .sep { color: var(--color-accent); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--text-4xl); line-height: 1.06; letter-spacing: 0.01em;
  color: var(--color-ink); overflow-wrap: anywhere; min-width: 0;
}
.page-hero h1 .accent { color: var(--color-accent); filter: drop-shadow(0 0 24px var(--glow-mid)); }
.page-hero__lead { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 56ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }

/* ============================================================ Marquee ticker */
.marquee {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-inset);
  padding-block: var(--space-md);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: var(--space-xl); animation: marquee var(--dur-marquee) linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--space-md);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--text-xl); letter-spacing: 0.02em; color: var(--color-ink-2); white-space: nowrap;
}
.marquee__item::after { content: "✕"; color: var(--color-accent); font-size: 0.7em; }
.marquee__item:hover { color: var(--color-ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================ Stats / quick-facts strip */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); }
.stat {
  position: relative; padding: var(--space-lg) var(--space-md);
  border-left: 3px solid var(--color-accent-soft);
  transition: border-color var(--dur-mid) var(--ease-out);
}
.stat:hover { border-color: var(--color-accent); }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--text-4xl); line-height: 0.9; color: var(--color-accent-bright); font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 20px var(--glow-mid)); }
.stat__num .unit { color: var(--color-ink); font-size: 0.5em; margin-left: 0.1em; }
.stat__num .ab { font-family: var(--font-body); font-weight: 700; font-size: 0.28em; color: var(--color-ink-2); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.22em; filter: none; }
.stat__label { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ============================================================ Card tilt + spotlight (svc / tint / klima) */
@media (hover: hover) and (pointer: fine) {
  .tilt { transform-style: preserve-3d; transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
  .tilt.is-tilting { transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
  .tilt::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; opacity: 0;
    background: radial-gradient(30% 30% at var(--mx, 50%) var(--my, 50%), var(--glow-soft), transparent 60%);
    transition: opacity var(--dur-mid) var(--ease-out); pointer-events: none;
  }
  .tilt.is-tilting::after { opacity: 1; }
}

/* ============================================================ Teaser cards (home) */
.teaser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.teaser {
  position: relative; display: grid; gap: var(--space-sm); align-content: start;
  padding: var(--space-lg); background: var(--color-paper-2);
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.teaser:hover { transform: translateY(-4px); border-color: var(--color-accent-soft); box-shadow: 0 18px 44px -22px var(--glow-strong); }
.teaser__ico { width: 46px; height: 46px; display: grid; place-items: center; color: var(--color-accent-bright); background: var(--color-paper-inset); border: 1px solid var(--color-accent-soft); border-radius: var(--radius-md); }
.teaser__ico svg { width: 24px; height: 24px; }
.teaser h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); line-height: 1.1; }
.teaser p { font-size: var(--text-sm); color: var(--color-ink-2); }
.teaser__link { margin-top: var(--space-2xs); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-bright); display: inline-flex; align-items: center; gap: var(--space-xs); }
.teaser__link .chev { transition: transform var(--dur-mid) var(--ease-out); }
.teaser:hover .teaser__link .chev { transform: translateX(4px); }

/* Price teaser (home) */
.price-teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ptease {
  position: relative; overflow: hidden;
  display: grid; gap: var(--space-sm); align-content: start;
  padding: var(--space-xl); border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg); background: var(--color-paper-2);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.ptease:hover { transform: translateY(-4px); border-color: var(--color-accent-soft); box-shadow: 0 18px 44px -22px var(--glow-strong); }
.ptease__glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 120% at 100% 0%, var(--glow-soft), transparent 60%); pointer-events: none; }
.ptease > *:not(.ptease__glow) { position: relative; z-index: 1; }
.ptease h3 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: 0.01em; }
.ptease p { font-size: var(--text-sm); color: var(--color-ink-2); }
.ptease__price { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-accent-bright); line-height: 0.9; filter: drop-shadow(0 0 20px var(--glow-mid)); }
.ptease__price .ab { font-family: var(--font-body); font-weight: 700; font-size: 0.4em; color: var(--color-ink-2); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 0.4em; margin-right: 0.2em; }

/* ============================================================ FAQ accordion */
.faq { display: grid; gap: var(--space-sm); max-width: 780px; }
.faq__item { border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); }
.faq__item[data-open="true"] { border-color: var(--color-accent-soft); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); background: transparent;
}
.faq__q:hover { color: var(--color-accent-bright); }
.faq__ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; inset: 50% 2px auto; height: 2px; background: var(--color-accent); border-radius: 2px; transition: transform var(--dur-mid) var(--ease-out); }
.faq__ico::after { transform: rotate(90deg); }
.faq__item[data-open="true"] .faq__ico::after { transform: rotate(0); }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur-mid) var(--ease-in-out); }
.faq__a-inner { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }

/* ============================================================ Map (Leaflet + OSM/CARTO dark) */
.map-panel { display: grid; gap: var(--space-md); }
.map-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.map-panel__head h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); }
.map {
  position: relative; height: clamp(260px, 42vw, 420px);
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-paper-inset);
  box-shadow: inset 0 0 0 1px oklch(4% 0.004 25 / 0.4);
}
.map:focus-within { border-color: var(--color-accent-soft); }
.leaflet-container { background: var(--color-paper-inset) !important; font-family: var(--font-body) !important; }
.leaflet-tile { filter: saturate(0.85) brightness(0.95); }
.map .leaflet-control-zoom a {
  background: var(--color-nav-panel) !important; color: var(--color-ink) !important;
  border-color: var(--color-rule) !important;
}
.map .leaflet-control-zoom a:hover { background: var(--color-paper-3) !important; color: var(--color-accent-bright) !important; }
.map .leaflet-control-attribution {
  background: oklch(10% 0.01 25 / 0.8) !important; color: var(--color-muted) !important;
  font-size: 10px !important; padding: 2px 6px !important;
}
.map .leaflet-control-attribution a { color: var(--color-ink-2) !important; }
.map-marker { position: relative; width: 30px; height: 30px; }
.map-marker__pin {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent); border: 3px solid var(--color-accent-ink);
  box-shadow: 0 0 0 2px var(--color-accent), 0 6px 14px -4px oklch(4% 0 0 / 0.8);
}
.map-marker__pulse {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--glow-strong); animation: pinPulse 2.2s var(--ease-out) infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { opacity: 0; }
}
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip {
  background: var(--color-nav-panel) !important; color: var(--color-ink) !important;
  border: 1px solid var(--color-accent-soft) !important; box-shadow: var(--shadow-2) !important;
}
.map .leaflet-popup-content { font-family: var(--font-body) !important; margin: 0.75rem 0.9rem !important; }
.map-popup strong { display: block; font-weight: 700; color: var(--color-ink); }
.map-popup span { color: var(--color-ink-2); font-size: var(--text-sm); }
.map-popup a { display: inline-flex; margin-top: 0.4rem; color: var(--color-accent-bright); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.map .leaflet-popup-close-button { color: var(--color-muted) !important; }

/* Live open/closed badge */
.open-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--color-rule); color: var(--color-ink-2);
}
.open-badge__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-muted); }
.open-badge.is-open { color: oklch(82% 0.16 150); border-color: oklch(40% 0.09 150); }
.open-badge.is-open .open-badge__dot { background: oklch(72% 0.19 150); box-shadow: 0 0 0 0 oklch(72% 0.19 150 / 0.6); animation: dotPulse 2s var(--ease-out) infinite; }
.open-badge.is-closed { color: var(--color-accent-bright); border-color: var(--color-accent-soft); }
.open-badge.is-closed .open-badge__dot { background: var(--color-accent); }
@keyframes dotPulse { to { box-shadow: 0 0 0 7px oklch(72% 0.19 150 / 0); } }
.hours__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.hours__head h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); }

/* ============================================================ Back-to-top */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--color-nav-panel); border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-pill); color: var(--color-ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-spring), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--color-accent-bright); border-color: var(--color-accent); }
.to-top svg { width: 22px; height: 22px; }

/* ============================================================ Magnetic buttons */
.btn.is-magnetic { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid) var(--ease-out); }

/* ============================================================ Page transitions
 * Cross-document View Transitions were removed: on navigation the browser
 * snapshotted the incoming page while its .reveal content was still JS-hidden,
 * so the cross-fade flashed a half-rendered frame. Native paint-holding gives a
 * clean, instant swap instead. The dark first paint is guaranteed by the inline
 * <style>html{background:#0a0a0b}</style> critical hint in every page's <head>. */

/* ============================================================ Reduced motion — new components */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; transition: opacity 150ms linear; }
  .hero__bg::before { background-attachment: scroll; }
  .site-bg::after, .site-bg__streak, .marquee__track { animation: none !important; }
  .site-bg { transition: none; }
  .map-marker__pulse, .open-badge__dot { animation: none !important; }
  /* park the car in place with the freshly installed (green) windshield */
  .hero__car svg { animation: none !important; transform: none !important; opacity: 1 !important; }
  .wheel { animation: none !important; transform: none !important; }
  .ws--red { opacity: 0 !important; }
  .ws--green { opacity: 1 !important; transform: none !important; }
  .ba__shine { animation: none !important; }
  .modal__dialog { animation: none !important; }
  /* Gutachten-Karte: die Ticks/der Ring stehen dank der *-Regel oben schon am
     Endzustand; Scanlinie und Marker-Ping haben kein forwards und wuerden auf
     ihren Startzustand zurueckfallen — also ganz ausblenden. */
  .gcard { animation: none !important; }
  .gcard__scan, .gcard__mark::after, .gcard__live i { display: none; }
}

/* ============================================================ SEO landing components
 * Used by the generated Marken-/Städte-Seiten (tools/seo/generate.mjs) and the
 * Klima-Ratgeber / Vergleichsseiten. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); max-width: 900px; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover, .chip:focus-visible { color: var(--color-ink); border-color: var(--color-accent-soft); background: var(--color-paper-3); }
.chip--more { color: var(--color-accent-bright); border-color: var(--color-accent-soft); }
.chip--more:hover, .chip--more:focus-visible { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.chips-head {
  margin: var(--space-xl) 0 var(--space-md);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--color-muted);
}
.chips-head:first-child { margin-top: 0; }

.prose { max-width: 68ch; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.prose h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); margin-top: var(--space-md); }
.prose a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover, .prose a:focus-visible { color: var(--color-ink); }
.prose strong { color: var(--color-ink); }
.prose ul { margin-left: 1.1rem; display: grid; gap: var(--space-2xs); }
.prose .note { padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }

.footer__areas {
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule-2);
  font-size: var(--text-xs); color: var(--color-muted);
}
.footer__areas nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-xs); }
.footer__areas a { color: var(--color-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer__areas a:hover, .footer__areas a:focus-visible { color: var(--color-ink-2); }

/* ============================================================ Map consent gate
 * Shown inside .map until the visitor allows the third-party tiles to load. */
.map-consent {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); padding: var(--space-lg) var(--space-md);
  text-align: center; background: var(--color-paper-inset);
  background-image: radial-gradient(120% 90% at 50% 0%, oklch(22% 0.02 25 / 0.55), transparent 70%);
}
.map-consent__icon { width: 32px; height: 32px; color: var(--color-accent); opacity: 0.9; }
.map-consent__title {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink);
}
.map-consent__text {
  max-width: 46ch; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2);
}
.map-consent__text a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.map-consent__btn { margin-top: var(--space-2xs); }
.map-consent__remember {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--text-xs); color: var(--color-muted); cursor: pointer;
}
.map-consent__remember input { accent-color: var(--color-accent); cursor: pointer; }
.map-consent__alt { font-size: var(--text-xs); color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.map-consent__alt:hover, .map-consent__alt:focus-visible { color: var(--color-ink-2); }

.map-revoke {
  justify-self: start; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.map-revoke:hover, .map-revoke:focus-visible { color: var(--color-ink-2); }

/* ============================================================ Clickable cards
 * The whole card is a hit target: the card is position:relative and its primary
 * link/button carries .card-cta, whose ::after stretches over the card. Works
 * for both <a> (navigate) and <button> (open modal). Inner focus stays real. */
.svc[data-clickable], .teaser[data-clickable] { cursor: pointer; }
.card-cta { position: static; }
.card-cta::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.card-cta:focus-visible { outline: none; }
.svc[data-clickable]:focus-within, .teaser[data-clickable]:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--glow-mid), 0 18px 44px -22px var(--glow-strong); }
/* reset native button chrome when a button plays the role of a card link */
button.svc__link, button.teaser__link { background: none; border: 0; padding: 0; text-align: left; }
/* animate the chevron when the whole card (link or modal-trigger) is hovered */
.svc:hover .svc__link .chev, .svc:hover .card-cta .chev { transform: translateX(4px); }
.callout a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.callout a:hover, .callout a:focus-visible { color: var(--color-ink); }

/* ============================================================ Header WhatsApp link */
.nav__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  flex-shrink: 0;
  width: 38px; height: 38px; padding: 0;
  color: var(--color-ink-2);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__wa svg { width: 20px; height: 20px; }
.nav__wa .nav__wa-txt { display: none; }
.nav__wa:hover, .nav__wa:focus-visible { color: oklch(72% 0.17 155); border-color: oklch(50% 0.13 155); background: var(--color-paper-3); }

/* ============================================================ Modal / detail dialog */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: block; }
html.modal-open { overflow: hidden; }
.modal__backdrop { position: fixed; inset: 0; background: oklch(4% 0.004 25 / 0.74); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal__dialog {
  position: relative; z-index: 1;
  width: min(660px, calc(100% - 2 * var(--space-lg)));
  max-height: min(86vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  margin: max(6vh, var(--space-xl)) auto var(--space-2xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  animation: modal-in var(--dur-mid) var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--color-ink-2); background: var(--color-paper-inset);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.modal__close:hover, .modal__close:focus-visible { color: var(--color-ink); border-color: var(--color-accent); }
.modal__close svg { width: 20px; height: 20px; }
.modal__eyebrow { margin-bottom: var(--space-xs); }
.modal__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-ink); letter-spacing: 0.01em; padding-right: 2.5rem; }
.modal__lead { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-base); }
.modal__body { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.modal__body h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-ink); }
.modal__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* feature list inside a modal (icon · title · text) */
.mfeat { display: grid; gap: var(--space-sm); }
.mfeat__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); }
.mfeat__item:last-child { border-bottom: 0; }
.mfeat__ico { width: 34px; height: 34px; display: grid; place-items: center; color: var(--color-accent-bright); background: var(--color-paper-inset); border: 1px solid var(--color-accent-soft); border-radius: var(--radius-sm); }
.mfeat__ico svg { width: 18px; height: 18px; }
.mfeat__t { font-weight: 700; color: var(--color-ink); }
.mfeat__t span { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2); }

/* price rows inside a modal */
.mprice { display: grid; gap: 0; }
.mprice__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); }
.mprice__row:last-child { border-bottom: 0; }
.mprice__name { font-weight: 600; color: var(--color-ink); }
.mprice__name small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.mprice__val { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-bright); white-space: nowrap; }
.mprice__val .ab { font-family: var(--font-body); font-weight: 700; font-size: 0.5em; color: var(--color-ink-2); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 0.35em; margin-right: 0.2em; }

/* ============================================================ Before/After slider (Aufbereitung) */
.ba-showcase { display: grid; gap: var(--space-lg); align-items: center; grid-template-columns: 1.1fr 0.9fr; }
.ba {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-paper-inset);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  --pos: 50%;
}
.ba__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__layer svg { width: 100%; height: 100%; display: block; }
/* the "before" (dirty) layer sits on top, clipped to the handle position */
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--color-accent); box-shadow: 0 0 14px var(--glow-strong); transform: translateX(-1px); pointer-events: none; z-index: 4; }
.ba__handle {
  position: absolute; top: 50%; left: var(--pos); z-index: 5;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  display: grid; place-items: center; pointer-events: none;
  color: var(--color-accent-ink); background: var(--color-accent);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-2), 0 0 0 4px oklch(55% 0.205 27 / 0.25);
}
.ba__handle svg { width: 22px; height: 22px; }
.ba__tag {
  position: absolute; bottom: var(--space-sm); z-index: 4;
  padding: 0.3rem 0.7rem; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--radius-pill); background: var(--color-nav-panel);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--color-rule); color: var(--color-ink-2);
}
.ba__tag--before { left: var(--space-sm); }
.ba__tag--after { right: var(--space-sm); }
.ba__range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible { outline: none; }
.ba:focus-within .ba__handle { box-shadow: var(--shadow-2), 0 0 0 6px oklch(55% 0.205 27 / 0.35); }
/* subtle sparkle sweep on the clean side */
.ba__shine { animation: ba-shine 4.5s var(--ease-in-out) infinite; transform-origin: center; }
@keyframes ba-shine { 0%, 62%, 100% { opacity: 0.15; } 78% { opacity: 0.95; } }
.ba-showcase__copy { display: grid; gap: var(--space-md); }
.ba-showcase__copy .btn { justify-self: start; }

/* ============================================================ Lenkräder gallery */
.rimshots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
/* the four photos were shot in four different rooms; they are cut out and
   re-composited onto one backdrop, so the tile must not add a second one */
.rimshot {
  margin: 0; display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-paper-2);
}
.rimshot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* the label sits UNDER the photo, never over it — the wheel stays whole */
.rimshot__tag {
  display: flex; align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule); background: var(--color-paper-3);
  font-size: var(--text-xs); font-weight: 700; color: var(--color-ink);
  letter-spacing: 0.03em;
}
/* empty placeholder tile — kept for future rows without photos */
.rimshot--empty { border-style: dashed; border-color: var(--color-rule); display: grid; place-items: center; text-align: center; }
.rimshot--empty .rimshot__ph { display: grid; gap: var(--space-xs); place-items: center; padding: var(--space-md); color: var(--color-muted); }
.rimshot--empty svg { width: 40px; height: 40px; color: var(--color-accent-soft); }
.rimshot__cap { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================ Kennfeld-Figur (Softwareoptimierung)
 * The plot is a dark-ground redraw of the customer's screenshot; its background
 * is already --color-paper-inset, so it sits flush in its frame. Its own badge
 * and top rule were painted out — .kfeld__badge and ::before below draw them
 * live. Do not tint or filter the image; the surface colours are the data. */
.kfeld { margin: 0; display: grid; gap: var(--space-md); max-width: 816px; }
.kfeld__plot {
  position: relative; border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-paper-inset); box-shadow: var(--shadow-2);
}
.kfeld__plot::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.kfeld__plot img { display: block; width: 100%; height: auto; }
.kfeld__badge {
  position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--color-nav-panel); border: 1px solid var(--color-accent-soft);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-bright);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.kfeld__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.kfeld__legend span { display: grid; gap: 2px; padding-top: var(--space-xs); border-top: 1px solid var(--color-rule-2); font-size: var(--text-xs); color: var(--color-muted); }
.kfeld__legend b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--color-ink); letter-spacing: 0.01em; }
.kfeld__src { font-size: var(--text-xs); color: var(--color-muted); }

/* ============================================================ Gutachten-Karte
 * Animiertes Beispieldokument neben der Gutachtenliste. Alles CSS; die globale
 * prefers-reduced-motion-Regel weiter oben friert es ein. */
.gut-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: start; }

.gcard {
  --step: 0.4s;
  width: 100%; max-width: 440px; margin-inline: auto;
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg);
  background: var(--color-paper-2); box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: gcard-bob 7s var(--ease-in-out) infinite;
  /* own compositing layer: the bob otherwise re-rasters the blend overlay every frame */
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
}
@keyframes gcard-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.gcard__bar { display: flex; align-items: center; gap: var(--space-sm); padding: 0.6rem 0.85rem; background: var(--color-paper-3); border-bottom: 1px solid var(--color-rule); }
.gcard__dots { display: inline-flex; gap: 5px; }
.gcard__dots i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-rule); }
.gcard__dots i:first-child { background: var(--color-accent); }
.gcard__file { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }
.gcard__az {
  margin-left: auto; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent-soft); background: var(--tint-accent);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-accent-bright);
}

.gcard__shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-inset); isolation: isolate; }
/* daylight photo inside a near-black card: pulled down and slightly desaturated
   so the crimson scan line and the markers stay the brightest thing in frame */
.gcard__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(0.8) contrast(1.06); }
.gcard__shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, oklch(8% 0.01 25 / 0.5), oklch(8% 0.01 25 / 0.04) 45%, oklch(8% 0.01 25 / 0.55));
}

.gcard__live {
  position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.18rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--color-nav-panel); border: 1px solid var(--color-rule);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 0.6rem; font-weight: 700; color: var(--color-ink);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.gcard__live i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-accent-bright); box-shadow: 0 0 8px var(--glow-bright); animation: gcard-pulse 1.6s var(--ease-in-out) infinite; }
@keyframes gcard-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.gcard__scan {
  position: absolute; inset-inline: 0; top: 0; height: 14%; z-index: 2;
  background: linear-gradient(to bottom, oklch(64% 0.225 27 / 0), oklch(64% 0.225 27 / 0.25) 60%, oklch(72% 0.22 27 / 0.8));
  border-bottom: 1.5px solid oklch(78% 0.19 27 / 0.9);
  mix-blend-mode: screen;
  animation: gcard-scan 4.2s var(--ease-in-out) infinite;
}
@keyframes gcard-scan {
  0%   { transform: translateY(-10%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(620%); opacity: 0; }
}

.gcard__mark { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: var(--radius-pill); background: var(--color-accent-bright); box-shadow: 0 0 0 2px oklch(96% 0.006 40 / 0.75); }
.gcard__mark::after { content: ""; position: absolute; inset: -3px; border-radius: var(--radius-pill); border: 2px solid var(--color-accent-bright); animation: gcard-ping 2.2s var(--ease-out) infinite; animation-delay: var(--t); }
@keyframes gcard-ping { 0% { transform: scale(0.7); opacity: 0.85; } 70%, 100% { transform: scale(2); opacity: 0; } }

.gcard__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-md); padding: var(--space-md) var(--space-md) var(--space-xs); }
.gcard__cap { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-muted); margin-bottom: var(--space-xs); }
.gcard__checks { display: grid; gap: 7px; list-style: none; }
.gcard__checks li { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-muted); opacity: 0.5; animation: gcard-show 0.5s var(--ease-out) forwards; animation-delay: calc(0.8s + var(--i) * var(--step)); }
.gcard__box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--color-rule); display: grid; place-items: center; color: var(--color-accent-ink); animation: gcard-fill 0.4s var(--ease-out) forwards; animation-delay: calc(0.9s + var(--i) * var(--step)); }
.gcard__box svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.5); animation: gcard-tick 0.35s var(--ease-spring) forwards; animation-delay: calc(0.98s + var(--i) * var(--step)); }
@keyframes gcard-show { to { opacity: 1; color: var(--color-ink); } }
@keyframes gcard-fill { to { background: var(--color-accent); border-color: var(--color-accent); } }
@keyframes gcard-tick { to { opacity: 1; transform: none; } }

.gcard__ring-wrap { position: relative; width: 58px; height: 58px; }
.gcard__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.gcard__ring circle { fill: none; stroke-width: 5; }
.gcard__ring-bg { stroke: var(--color-rule-2); }
.gcard__ring-fg { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 170; animation: gcard-ring 1.4s var(--ease-out) forwards; animation-delay: 1s; }
@keyframes gcard-ring { to { stroke-dashoffset: 10; } }
.gcard__ring-ico { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; color: var(--color-accent-bright); opacity: 0; animation: gcard-tick 0.4s var(--ease-out) forwards; animation-delay: 1.9s; }
.gcard__score { margin-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.4; color: var(--color-ink-2); }

.gcard__pos { padding: var(--space-xs) var(--space-md) 0; }
.gcard__pos ul { display: grid; gap: 6px; list-style: none; }
.gcard__pos li { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-ink-2); opacity: 0; transform: translateX(-6px); animation: gcard-in 0.5s var(--ease-out) forwards; animation-delay: calc(1.6s + var(--i) * 0.3s); }
@keyframes gcard-in { to { opacity: 1; transform: none; } }
.gcard__dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-accent); }
.gcard__tag { margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent-soft); background: var(--tint-accent); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-bright); }

.gcard__total { margin-top: var(--space-sm); padding: var(--space-md); border-top: 1px solid var(--color-rule); background: linear-gradient(to bottom, transparent, var(--tint-accent)); }
.gcard__sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); }
.gcard__sum b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--color-accent-bright); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.gcard__note { font-size: 0.7rem; color: var(--color-muted); }

/* ============================================================ Responsive
 * Keep this section LAST: the overrides share specificity with the component
 * base rules above, so they only win through source order.
 * max-width queries run widest → narrowest, so a new one belongs at the top. */

/* Nav with seven items ("Aufbereitung" joined Start … Kontakt).
 * Measured on index.html: the Termin button ended at x=1131 in a 1024px
 * viewport and was clipped. Two-step fix, because tightening alone was not
 * enough — at 900px the row still needed 993px:
 *   1041–1150px  tighter gaps, full row still fits
 *   ≤1040px      burger takes over (was 720px)
 * The burger panel is the existing, already styled one; only the width at
 * which it engages moved. Everything ≤720px is unchanged. */
@media (max-width: 1150px) and (min-width: 1041px) {
  .nav__links { gap: 0; }
  .nav__link { padding: 0.5rem 0.55rem; }
  .nav__cta .btn { padding: 0.6rem 0.9rem; }
}

@media (max-width: 1040px) {
  .nav { position: relative; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav[data-open="true"] .nav__links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + var(--space-xs)); left: 0; right: 0;
    margin: 0; padding: var(--space-sm);
    background: var(--color-nav-panel);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--color-rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
  }
  .nav[data-open="true"] .nav__link { padding: var(--space-md); border-radius: var(--radius-md); }
  .nav[data-open="true"] .nav__cta { display: block; margin: var(--space-2xs) 0 0; }
  .nav[data-open="true"] .nav__cta .btn { width: 100%; justify-content: center; padding: var(--space-md); }
  /* WhatsApp: full-width labelled row inside the open menu (not a lone icon) */
  .nav__wa { width: auto; height: auto; justify-content: flex-start; gap: var(--space-sm); border: 0; background: none; color: var(--color-ink-2); }
  .nav__wa .nav__wa-txt { display: inline; }
}

@media (max-width: 900px) {
  .gas-tables { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gut-split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__brand { grid-column: 1 / -1; }
  /* windshield-swap car → lift it up so the wheels sit on the "AB 0 €*" line.
     calc() tracks the fluid headline for 561–900px; phones use a flat value
     (set in the ≤560 block below). */
  .hero__car {
    --car-opacity: 0.5;
    width: min(76vw, 440px);
    top: calc(38.5vw - 56px); bottom: auto; right: -10%; left: auto;
    transform: none;
  }
}
@media (max-width: 820px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .ba-showcase { grid-template-columns: 1fr; }
  .rimshots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* long CTA labels (nowrap) exceed narrow viewports (iPhone ≈390px) and
     widen centered grid tracks — cap and let them wrap instead */
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  /* nav/burger rules moved up to the ≤1040px block — see the note there */
  .trust { grid-template-columns: 1fr; gap: var(--space-md); }
  .tint-grid { grid-template-columns: 1fr; }
  .klima-grid { grid-template-columns: 1fr; }
  .price-teaser { grid-template-columns: 1fr; }
  .marquee__item { font-size: var(--text-lg); }
}
@media (max-width: 560px) {
  .wrap { padding-inline: var(--space-md); }
  .services { grid-template-columns: 1fr; }
  .teaser-grid { grid-template-columns: 1fr; }
  .rimshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two tiles per row leaves ~160px — tighten the caption bar to match */
  .rimshot__tag { padding: var(--space-xs) var(--space-sm); font-size: 0.78rem; }
  .stats { grid-template-columns: 1fr; gap: var(--space-sm); }
  .stat { padding: var(--space-md); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .klima { padding: var(--space-lg); grid-template-columns: auto 1fr; }
  .klima__price { grid-column: 1 / -1; text-align: left; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-2); }
  .tint { padding: var(--space-md); gap: var(--space-sm); }
  .kfeld__legend { grid-template-columns: 1fr; gap: var(--space-sm); }
  .gcard__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .btn--lg { font-size: var(--text-base); padding-inline: 1.5rem; }
  /* phones: car width is uncapped (76vw), so a flat top keeps the wheels on
     the "AB 0 €*" line across widths (headline and car scale together) */
  .hero__car { top: 176px; }
}