/* ==========================================================================
   NOBLE RIDE — Designsystem v9
   --------------------------------------------------------------------------
   Grundlage sind gemessene Rechenwerte, nicht Geschmack.

   JB-Motors (Sportwagenhandel Stuhr, dieselbe Kundschaft):
     Grund #0E1414, Text #E7E7E7 · H1 77px/600, H2 60px/600, Laufweite -5px,
     GEMISCHTE Schreibweise · Fliesstext Poppins 16px/300, Zeilenhoehe 1.6
     Knoepfe eckig, Radius 0, Polsterung 10/30px · Abschnittspolster 100px
   Polestar: H1/H2 30px/400 · Vitra: 50px/400 · Arc'teryx: 32px/400
     — alle Markenseiten arbeiten leicht und gemischt, nicht fett und versal.

   Korrigiert gegenueber v8, alle vier vom Kunden benannten Punkte:
     1. Schrift  — keine Versalien mehr, Gewicht 600 statt 800, kleiner.
     2. Farbe    — Beige raus. Dunkler Grund wie in der Branche, dazu
                   reinweisse Baender dort, wo dichte Information steht.
     3. Aufbau   — Hero wieder ganzflaechig, Typografie darueber.
     4. Bilder   — randlos und gross statt gerahmter Kacheln.
   ========================================================================== */

:root{
  --ink:#121211;
  --ink-2:#1b1a19;
  --white:#ffffff;

  --shell:84rem;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --gap:clamp(2.75rem,5.6vw,5rem);
  --sec:clamp(3.25rem,7vw,6rem);
  --r:0px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  --f:Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --e:cubic-bezier(.22,1,.36,1);
  --hdr-h:84px;
  --danger:#e2564b;
}

/* --- Kontexte ------------------------------------------------------------ */
.on-ink,body,footer{
  --bg:var(--ink); --fg:#e7e7e7;
  --muted:rgba(231,231,231,.64); --faint:rgba(231,231,231,.44);
  --line:rgba(231,231,231,.14); --surface:var(--ink-2);
}
.on-paper,.on-accent{
  --bg:var(--white); --fg:var(--ink);
  --muted:#5a6161; --faint:#8a9090;
  --line:#e4e7e7; --surface:#fafbfb;
}
.on-ink,.on-paper,.on-accent,footer{ background:var(--bg); color:var(--fg) }

/* Ablauf sitzt zwischen zwei Papierbaendern. Startet hell — wie die
   Nachbarn — und geht erst in Tinte, wenn der Block im Blickfeld liegt. */
@property --morph{
  syntax:"<number>"; inherits:true; initial-value:0;
}
.theme-morph{
  --morph:0;
  background:var(--white); color:var(--ink);
  transition:background-color 1.15s var(--e), color 1.15s var(--e),
    border-color 1.15s var(--e), --morph 1.15s var(--e);
}
.theme-morph.is-ink{ --morph:1 }
@supports (color:color-mix(in oklab,white,black)){
  .theme-morph{
    --bg:color-mix(in oklab,var(--white) calc((1 - var(--morph))*100%),var(--ink) calc(var(--morph)*100%));
    --fg:color-mix(in oklab,var(--ink) calc((1 - var(--morph))*100%),#e7e7e7 calc(var(--morph)*100%));
    --muted:color-mix(in oklab,#5a6161 calc((1 - var(--morph))*100%),#9a9a99 calc(var(--morph)*100%));
    --faint:color-mix(in oklab,#8a9090 calc((1 - var(--morph))*100%),#6f6f6e calc(var(--morph)*100%));
    --line:color-mix(in oklab,#e4e7e7 calc((1 - var(--morph))*100%),#2f2f2e calc(var(--morph)*100%));
    --surface:color-mix(in oklab,#fafbfb calc((1 - var(--morph))*100%),var(--ink-2) calc(var(--morph)*100%));
    background:var(--bg); color:var(--fg);
  }
}
.theme-morph .label,.theme-morph .lead,.theme-morph .h-plain,
.theme-morph p,.theme-morph b,.theme-morph .rows,.theme-morph .rows > div,
.theme-morph .faq,.theme-morph .faq details,.theme-morph .faq summary,
.theme-morph .faq .ico,.theme-morph .tlink,.theme-morph .note,
.theme-morph .matrix,.theme-morph .matrix th,.theme-morph .matrix td,
.theme-morph .pkg,.theme-morph .pkg-k,.theme-morph .pkg-for,.theme-morph .pkg li,
.theme-morph .pkg-foot,.theme-morph .chip,.theme-morph .seg,.theme-morph .seg button,
.theme-morph .price,.theme-morph .btn{
  transition:color 1.15s var(--e), border-color 1.15s var(--e), background-color 1.15s var(--e);
}

/* Vom Kunden abgelehnt. */
.marq,.swatch,.idx,.stats{ display:none!important }

/* ==========================================================================
   Grundlagen
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none!important }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
  scroll-padding-top:calc(var(--hdr-h) + var(--safe-t) + 2rem); background:var(--ink) }
html:has(.jump){ scroll-padding-top:calc(var(--hdr-h) + var(--safe-t) + 3.75rem) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--bg); color:var(--fg); overflow-x:clip;
  font-family:var(--f); font-size:1rem; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
a,button,.opt,.consent,.veh-dots button,.vnav{ touch-action:manipulation }
::selection{ background:#e7e7e7; color:var(--ink) }
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px }

.skip{ position:fixed; left:-999px; top:12px; z-index:200; background:var(--white); color:var(--ink);
  padding:.85rem 1.5rem }
.skip:focus{ left:12px }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap }

/* ==========================================================================
   Typografie — gemischte Schreibweise, Gewicht 600, eng laufend
   ========================================================================== */
h1,h2,h3,h4,.h-plain{
  margin:0; font-family:var(--f); text-transform:none; color:var(--fg);
  text-wrap:balance; hyphens:manual; overflow-wrap:break-word;
}
h1{ font-size:clamp(2.25rem,4.6vw,4.25rem); font-weight:600; letter-spacing:-.045em; line-height:1.04 }
h2{ font-size:clamp(1.875rem,3.4vw,3.125rem); font-weight:600; letter-spacing:-.04em; line-height:1.1 }
h3{ font-size:clamp(1.125rem,1.5vw,1.375rem); font-weight:500; letter-spacing:-.022em; line-height:1.35 }
h4,.h-plain{ font-size:1.0625rem; font-weight:500; letter-spacing:-.015em; line-height:1.4 }

p{ margin:0 }
.lead{ font-size:clamp(1.0625rem,1.2vw,1.1875rem); font-weight:300; line-height:1.6;
  color:var(--muted); max-width:60ch }
.body-sm{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted) }
.dim{ color:var(--faint) }
.small{ font-size:.875rem; font-weight:300; color:var(--muted) }

/* Kleine Auszeichnungszeile — klein genug, dass Versalien hier nicht schreien */
.label{ display:block; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin:0 0 1.25rem; line-height:1.5 }
.label.dot{ display:flex; align-items:center; gap:.75rem }
.label.dot::before{ content:""; width:1.75rem; height:1px; background:currentColor; flex:none }
.mono{ font-variant-numeric:tabular-nums }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{ width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r)) }
/* Kein schmaler Einspalter mehr: die Frageliste laeuft ueber die volle
   Inhaltsbreite, die Antwort bleibt lesbar begrenzt. */
.wrap.narrow > *{ max-width:none }
.wrap.narrow .lead{ max-width:60ch }
.sec{ padding-block:var(--sec) }
.sec.pt0{ padding-top:0 } .sec.pb0{ padding-bottom:0 }

.sec-head{ margin-bottom:clamp(2rem,3vw,2.75rem); max-width:62ch }
.sec-head .lead{ margin-top:1rem }
.sec-head:not(.split){
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  column-gap:clamp(2rem,5vw,5rem); row-gap:0; max-width:none; align-items:start;
}
.sec-head:not(.split) > *{ min-width:0 }
.sec-head:not(.split) .label{ grid-column:1/-1;
  margin-bottom:clamp(1.75rem,3vw,2.5rem) }
.sec-head:not(.split) h2{ grid-column:1; grid-row:2 }
.sec-head:not(.split) .lead{ grid-column:2; grid-row:2; margin-top:.4rem; max-width:52ch }
.sec-head:not(.split) > p:not(.label):not(.lead){ grid-column:2; grid-row:2 }
.sec-head:not(.split):not(:has(.lead)){ grid-template-columns:1fr }
.sec-head:not(.split):not(:has(.lead)) h2{ grid-column:1/-1; max-width:26ch }
@media (max-width:900px){
  .sec-head:not(.split){ grid-template-columns:1fr; row-gap:1rem }
  .sec-head:not(.split) h2,.sec-head:not(.split) .lead{ grid-column:1; grid-row:auto }
}
.sec-head.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:1.5rem 4rem; align-items:end; max-width:none }
.sec-head.split > *{ min-width:0 }
.sec-head.split .label{ margin-bottom:1rem }
@media (max-width:860px){ .sec-head.split{ grid-template-columns:1fr; align-items:start } }

.grid > *{ min-width:0 }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem }
.mt-5{ margin-top:1.25rem } .mt-6{ margin-top:2rem } .mt-7{ margin-top:3rem }

.js .rv{ opacity:0; transform:translateY(14px); animation:rv-failsafe .01s linear 2.5s forwards }
.js .rv.in{ opacity:1; transform:none;
  transition:opacity .8s var(--e) var(--d,0ms), transform .8s var(--e) var(--d,0ms) }
@keyframes rv-failsafe{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1!important; transform:none!important; transition:none!important; animation:none!important }
}

/* ==========================================================================
   Bedienelemente — eckig, wie in der Branche
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 2rem; border-radius:var(--r);
  font-size:.9375rem; font-weight:500; line-height:1; letter-spacing:-.005em;
  background:transparent; color:var(--fg); border:1px solid var(--line);
  cursor:pointer; transition:background-color .22s var(--e), color .22s var(--e), border-color .22s var(--e);
}
.btn:hover{ border-color:var(--fg) }
.btn-p{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.btn-p:hover{ background:transparent; color:var(--fg) }
.btn-lg{ padding:1.1rem 2.35rem; font-size:1rem }
.btn-sm{ padding:.7rem 1.3rem; font-size:.875rem }
.arw{ display:inline-block; transition:transform .25s var(--e) }
.btn:hover .arw{ transform:translateX(4px) }

.tlink{ display:inline-flex; align-items:center; gap:.55rem; font-size:.9375rem; font-weight:400;
  color:var(--fg); padding-bottom:.35rem; border-bottom:1px solid var(--line);
  transition:border-color .22s var(--e) }
.tlink:hover{ border-color:var(--fg) }
.tlink:hover .arw{ transform:translateX(4px) }

.chip{ display:inline-flex; align-items:center; padding:.4rem .8rem; border-radius:var(--r);
  border:1px solid var(--line); color:var(--muted); font-size:.6875rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap }
.chip-hl{ background:var(--fg); border-color:var(--fg); color:var(--bg) }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
/* Oben liegt der Balken durchsichtig ueber dem Bild — das Foto laeuft bis
   unter die Kante. Erst beim Scrollen wird er fest. site.js setzt dafuer
   die Klasse "stuck". So machen es Polestar, Arc'teryx und JB-Motors. */
#hdr{ position:sticky; top:0; z-index:90; background:transparent;
  padding-top:var(--safe-t); border-bottom:1px solid transparent;
  transition:background-color .3s var(--e), border-color .3s var(--e), backdrop-filter .3s }
#hdr.stuck{ background:color-mix(in oklab,var(--ink) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom-color:rgba(231,231,231,.12) }
#hdr .bar{ max-width:var(--shell); margin-inline:auto;
  padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r));
  height:var(--hdr-h); display:flex; align-items:center; gap:clamp(1.5rem,2.6vw,2.5rem);
  transition:height .3s var(--e) }
#hdr.stuck .bar{ height:calc(var(--hdr-h) - 12px) }

/* Wortmarke: Zeichen deutlich groesser, der Zusatz tritt hinter eine
   Haarlinie zurueck statt gleichrangig danebenzustehen. */
.logo{ display:flex; align-items:center; gap:.7rem; flex:none; color:#fff }
.logo svg{ width:1.75rem; height:auto; fill:currentColor }
.logo b{ font-size:1.125rem; font-weight:600; letter-spacing:-.045em; line-height:1 }
.logo span{ position:relative; padding-left:.7rem; margin-left:.05rem;
  font-size:.625rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.42); line-height:1 }
.logo span::before{ content:""; position:absolute; left:0; top:-.15rem; bottom:-.15rem;
  width:1px; background:rgba(255,255,255,.22) }

.nav{ display:flex; align-items:center; gap:clamp(1.25rem,2vw,2rem); margin-inline:auto }
.nav a{ font-size:.875rem; font-weight:400; letter-spacing:-.005em;
  color:rgba(255,255,255,.72); transition:color .2s }
.nav a:hover,.nav a[aria-current="page"]{ color:#fff }
.hdr-r{ display:flex; align-items:center; gap:1.25rem; flex:none }
.hdr-tel{ font-size:.875rem; font-weight:400; color:rgba(255,255,255,.72); white-space:nowrap }
.hdr-tel:hover{ color:#fff }
#hdr .btn{ padding:.62rem 1.2rem; font-size:.8125rem; font-weight:500;
  color:#fff; border-color:rgba(255,255,255,.28) }
#hdr .btn:hover{ border-color:#fff }
#hdr .btn-p{ background:#fff; color:var(--ink); border-color:#fff }
#hdr .btn-p:hover{ background:transparent; color:#fff }

.burger{ display:none; width:2.75rem; height:2.75rem; border:0; background:none; cursor:pointer; position:relative }
.burger i{ position:absolute; left:.625rem; width:1.5rem; height:1px; background:#e7e7e7;
  transition:transform .3s var(--e) }
.burger i:first-child{ top:1.2rem } .burger i:last-child{ top:1.55rem }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

.hdr-cta-short{ display:none }
html.mm-open,html.mm-open body{ overflow:hidden; overscroll-behavior:none }
.mmenu{ position:fixed; top:calc(var(--hdr-h) + var(--safe-t)); right:0; bottom:0; left:0;
  z-index:85; background:var(--ink); color:#e7e7e7;
  padding:1.5rem max(var(--gutter),var(--safe-l)) max(2.5rem,calc(1.75rem + var(--safe-b))) max(var(--gutter),var(--safe-r));
  flex-direction:column; overflow-y:auto; overscroll-behavior:contain; display:none }
.mmenu.on{ display:flex; animation:mm-in .22s var(--e) both }
@keyframes mm-in{ from{ opacity:0 } to{ opacity:1 } }
.mmenu > a{ font-size:clamp(1.75rem,7vw,2.25rem); font-weight:500; letter-spacing:-.04em;
  line-height:1.15; color:#fff; padding:1.15rem 0; border-bottom:1px solid rgba(231,231,231,.12);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.mmenu > a::after{ content:attr(data-n); font-size:.75rem; font-weight:400; letter-spacing:.1em;
  color:rgba(231,231,231,.4) }
.mm-c{ margin-top:auto; padding-top:2.5rem; display:grid; gap:1rem; justify-items:start }

@media (max-width:1080px){
  .nav,.hdr-tel{ display:none } .burger{ display:block } .hdr-r{ margin-left:auto }
  .mm-c{ width:100% } .mm-c .btn{ width:100%; min-height:3rem }
  .mmenu > a{ min-height:3.15rem }
}

/* ==========================================================================
   Hero — ganzflaechiges Foto, Typografie darueber
   ========================================================================== */
/* Der Hero beginnt am oberen Bildschirmrand, weil der Balken darueber
   durchsichtig liegt. Deshalb zieht er die Kopfhoehe von seiner Hoehe ab. */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
  min-height:min(94vh,54rem); margin-top:calc((var(--hdr-h) + var(--safe-t)) * -1);
  display:flex; flex-direction:column; justify-content:flex-end }
.hero-photo{ position:absolute; inset:0; z-index:0 }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:62% 52% }
/* Der Fliesstext liegt links ueber der hellen Motorhaube. Ohne kraeftigen
   Schleier von links waere er dort nicht lesbar. */
.hero-photo::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(95deg,rgba(18,18,17,.94) 0%,rgba(18,18,17,.88) 22%,rgba(18,18,17,.62) 42%,rgba(18,18,17,.18) 64%,rgba(18,18,17,0) 82%),
  linear-gradient(to top,rgba(18,18,17,.88) 0%,rgba(18,18,17,.4) 26%,rgba(18,18,17,.06) 58%,rgba(18,18,17,.5) 100%) }
.hero-grid{ position:relative; z-index:1;
  padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(5rem,16vh,10rem)); padding-bottom:clamp(2.25rem,3vw,3rem) }
.hero .label{ color:rgba(255,255,255,.66) }
.hero h1{ color:#fff; max-width:17ch; margin-bottom:1.5rem }
.hero-lead{ font-size:clamp(1.0625rem,1.2vw,1.1875rem); font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.78); max-width:50ch }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2.25rem }
.hero-cta .btn{ color:#fff; border-color:rgba(255,255,255,.3) }
.hero-cta .btn:hover{ border-color:#fff }
.hero-cta .btn-p{ background:#fff; color:var(--ink); border-color:#fff }
.hero-cta .btn-p:hover{ background:transparent; color:#fff }
.trust{ list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:.55rem }
.trust li{ position:relative; padding-left:1.5rem; font-size:.9375rem; font-weight:300;
  color:rgba(255,255,255,.72) }
.trust li::before{ content:""; position:absolute; left:0; top:.44em; width:.5rem; height:.28rem;
  border-left:1.5px solid rgba(255,255,255,.9); border-bottom:1.5px solid rgba(255,255,255,.9);
  transform:rotate(-45deg) }
@media (min-width:1100px){ .trust{ grid-template-columns:1fr 1fr; gap:.55rem 2rem; max-width:44rem } }

/* Kennzahlen als Leiste am Fuss des Bildes */
.hero-rail{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.16) }
.hero-rail-in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem 2rem; padding-block:1.75rem }
.hero-rail > .wrap > div{ min-width:0 }
.hero-rail b{ display:block; font-size:clamp(1.125rem,1.6vw,1.375rem); font-weight:500;
  letter-spacing:-.03em; line-height:1.15; color:#fff }
.hero-rail span{ display:block; margin-top:.35rem; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); line-height:1.5 }
@media (max-width:820px){
  .hero{ min-height:0 }
  .hero-rail-in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; padding-block:1.25rem }
  .hero-photo img{ object-position:72% 46% }
  .hero-photo::after{ background:
    linear-gradient(to top,rgba(18,18,17,.95) 0%,rgba(18,18,17,.78) 26%,rgba(18,18,17,.28) 56%,rgba(18,18,17,.58) 100%) }
  .hero-grid{ padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(3.1rem,9vh,5rem));
    padding-bottom:1.4rem }
  .hero h1{ margin-bottom:1.1rem }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:.7rem; margin-top:1.55rem }
  .hero-cta .btn{ width:100%; min-height:3rem }
  .trust{ margin-top:1.2rem }
}

/* ==========================================================================
   Vertrauenszeile
   ========================================================================== */
.clients{ display:flex; align-items:center; gap:1rem 2.5rem; flex-wrap:wrap;
  padding-block:1.75rem }
.clients .k{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.clients b{ font-size:.9375rem; font-weight:400; color:var(--muted) }
.clients .tlink{ margin-left:auto }
@media (max-width:760px){
  .clients .k{ flex-basis:100% }
  .clients .tlink{ margin-left:0; flex-basis:100% }
}

/* ==========================================================================
   Textspalten
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem 2rem }
.cards.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.cards > article{ padding-top:1.5rem; border-top:1px solid var(--line) }
.cards.norule > article{ border-top:none; padding-top:0 }
.cards .n{ display:block; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  color:var(--faint); margin-bottom:1rem }
.cards h4,.cards .h-plain{ margin-bottom:.5rem }
.cards p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted) }
@media (max-width:1000px){ .cards,.cards.three{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .cards,.cards.three{ grid-template-columns:1fr; gap:2rem } }

/* ==========================================================================
   Leistungen
   ========================================================================== */
.svc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.75rem }
.svc > a{ display:flex; flex-direction:column; background:none; border:0;
  border-top:1px solid var(--line); padding-top:1.5rem }
.svc-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface);
  margin-bottom:1.5rem }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e) }
.svc > a:hover .svc-media img{ transform:scale(1.04) }
.svc-tag{ position:absolute; left:1rem; top:1rem; z-index:2; padding:.35rem .75rem;
  background:rgba(18,18,17,.82); color:#fff; font-size:.6875rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase }
.svc-body{ padding:0; display:flex; flex-direction:column; flex:1 }
.svc-body h3{ margin-bottom:.6rem }
.svc-body > p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted); margin-bottom:1.5rem }
.svc-list{ list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:.6rem }
.svc-list li{ position:relative; padding-left:1.15rem; font-size:.9375rem; font-weight:300;
  line-height:1.55; color:var(--muted) }
.svc-list li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px;
  background:var(--faint) }
.svc-foot{ margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.svc-price{ font-size:.75rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint) }
.svc-go{ font-size:.9375rem; font-weight:400; display:inline-flex; gap:.4rem; align-items:center }
@media (max-width:980px){ .svc{ grid-template-columns:1fr } }

/* ==========================================================================
   Bild-Feature — randlos, gross
   ========================================================================== */
.feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:center }
.feature.rev > :first-child{ order:2 }
.feature-media{ overflow:hidden; background:var(--surface); aspect-ratio:4/5 }
.feature-media img{ width:100%; height:100%; object-fit:cover; object-position:center 55% }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; gap:2.5rem }
  .feature.rev > :first-child{ order:0 } }

.steplist{ list-style:none; margin:2.5rem 0 0; padding:0 }
.steplist li{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:1.25rem;
  padding:1.25rem 0; border-top:1px solid var(--line) }
.steplist .n{ font-size:.75rem; font-weight:400; letter-spacing:.1em; color:var(--faint); padding-top:.3rem }
.steplist b{ display:block; font-size:1rem; font-weight:500; letter-spacing:-.015em }
.steplist p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted); margin-top:.3rem }

/* ==========================================================================
   Zeilenliste
   ========================================================================== */
.rows{ border-top:1px solid var(--line) }
.rows > div{ display:grid; grid-template-columns:minmax(11rem,.85fr) minmax(0,1.4fr) minmax(0,1.1fr);
  gap:1rem 3rem; padding:2rem 0; border-bottom:1px solid var(--line) }
.rows p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted) }
.rows b{ color:var(--fg); font-weight:500 }
@media (max-width:900px){ .rows > div{ grid-template-columns:1fr; gap:.75rem } }

/* ==========================================================================
   Referenzen — gleich grosse Kacheln, randlos
   ========================================================================== */
.vehs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.75rem }
.vehs.one{ grid-template-columns:1fr }
.vehs.zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,3vw,3rem) clamp(1.25rem,2vw,1.75rem) }
/* Alle Fahrzeugaufnahmen liegen im Hochformat vor (900x1200, Verhaeltnis 0,75).
   In einer 3:2-Kachel wurden davon 50 Prozent weggeschnitten — das Fahrzeug war
   halbiert. Bei 4:5 bleiben 94 Prozent des Bildes stehen. */
.veh-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface); cursor:grab }
.vehs.one .veh-media{ aspect-ratio:4/5 }
.veh-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--e) }
.veh-media img.on{ opacity:1 }
.veh-cat{ position:absolute; left:1rem; top:1rem; z-index:3; padding:.35rem .75rem;
  background:rgba(18,18,17,.82); color:#fff; font-size:.6875rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase }
.veh-dots{ position:absolute; left:0; right:0; bottom:.75rem; z-index:3; display:flex;
  gap:.1rem; justify-content:center }
.veh-dots button{ width:1.45rem; height:1.45rem; border:0; padding:0; cursor:pointer;
  background:transparent; position:relative }
.veh-dots button::after{ content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:.4rem; height:.4rem;
  background:rgba(255,255,255,.5); transition:background-color .25s, width .25s }
.veh-dots button[aria-selected="true"]::after{ background:#fff; width:1.25rem }
.vnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:2.75rem; height:2.75rem;
  border:0; background:rgba(18,18,17,.8); color:#fff; cursor:pointer;
  display:grid; place-items:center; opacity:.9; transition:opacity .2s }
.vnav svg{ width:1rem; height:1rem }
.vnav.prev{ left:0 } .vnav.next{ right:0 }
@media (hover:hover) and (pointer:fine){
  .vnav{ opacity:0 }
  .veh-media:hover .vnav,.vnav:focus-visible{ opacity:1 }
}
@media (max-width:900px){ .vnav{ opacity:.9 } }
.veh-body{ padding:1.25rem 0 0; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem }
.veh-paket{ display:block; margin-top:.3rem; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.veh-link{ font-size:.875rem; font-weight:400; white-space:nowrap; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:.25rem }
.veh-link:hover{ color:var(--fg); border-color:currentColor }

/* Naechste Referenz: weich unscharf, ohne Modellname. */
.veh-soon .veh-media{ cursor:default }
.veh-soon .veh-media img.on{ opacity:1; transform:scale(1.18); filter:blur(16px) saturate(.42) }
.veh-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(18,18,17,.28),rgba(18,18,17,.04) 52%,rgba(18,18,17,.12)) }
@media (max-width:900px){ .vehs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .vehs,.vehs.zwei{ grid-template-columns:1fr } }

/* ==========================================================================
   Instagram
   ========================================================================== */
.feed{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px }
.fd{ position:relative; display:block; overflow:hidden; background:var(--surface); aspect-ratio:4/5 }
.fd img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e) }
.fd:hover img{ transform:scale(1.05) }
.fd::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .25s;
  background:linear-gradient(to top,rgba(18,18,17,.85),transparent 60%) }
.fd:hover::after{ opacity:1 }
.fd-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.85rem;
  font-size:.75rem; font-weight:300; line-height:1.45; color:#fff; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  opacity:0; transition:opacity .25s }
.fd:hover .fd-cap{ opacity:1 }
.fd-play{ position:absolute; right:.65rem; top:.65rem; z-index:2; width:1.75rem; height:1.75rem;
  background:rgba(18,18,17,.8); color:#fff; display:grid; place-items:center }
.fd-play svg{ width:.7rem; height:.7rem }
@media (max-width:1000px){ .feed{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:620px){ .feed{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; padding:1.5rem 0;
  font-size:1.0625rem; font-weight:500; letter-spacing:-.018em; transition:color .2s }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--muted) }
.faq .ico{ position:relative; width:.9rem; height:.9rem; flex:none; color:var(--faint) }
.faq .ico::before,.faq .ico::after{ content:""; position:absolute; background:currentColor;
  transition:transform .28s var(--e) }
.faq .ico::before{ left:0; top:calc(50% - .5px); width:.9rem; height:1px }
.faq .ico::after{ left:calc(50% - .5px); top:0; width:1px; height:.9rem }
.faq details[open] .ico::after{ transform:scaleY(0) }
.faq details p{ padding:0 3.5rem 1.75rem 0; font-size:.9375rem; font-weight:300; line-height:1.7;
  color:var(--muted); max-width:80ch }
@media (min-width:1100px){
  .faq details p{ margin-left:38%; max-width:52ch; padding-right:0 }
  .faq summary{ padding-block:1.6rem }
}

/* ==========================================================================
   Abschlussband
   ========================================================================== */
.close-band{ padding-block:var(--sec) }
.close-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center }
.close-grid > *{ min-width:0 }
.close-band h2{ max-width:20ch }
.close-band p{ margin-top:1.25rem; font-size:clamp(1.0625rem,1.2vw,1.1875rem);
  font-weight:300; line-height:1.6; color:var(--muted); max-width:52ch }
.close-do{ display:flex; flex-direction:column; align-items:flex-end }
.close-do .row{ margin-top:0; flex-wrap:wrap; gap:.75rem; justify-content:flex-end }
.close-do .btn{ white-space:nowrap; padding:.85rem 1.15rem; font-size:.875rem }
.close-direct{ margin:.9rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem 1.5rem;
  justify-content:flex-end }
.close-direct a{ font-size:.9375rem; font-weight:400; border-bottom:1px solid var(--line) }
.close-direct a:hover{ border-color:var(--fg) }
@media (max-width:900px){
  .close-grid{ grid-template-columns:1fr; gap:2.5rem }
  .close-do{ align-items:stretch; width:100% }
  .close-do .row,.close-direct{ justify-content:stretch; width:100% }
  .close-do .row{ flex-direction:column }
  .close-do .btn{ width:100%; white-space:normal; min-height:3rem }
}

/* ==========================================================================
   Seitenkopf — randloses Bildband
   ========================================================================== */
/* Unterseiten-Hero: genau eine Bildschirmhoehe, Intro sitzt im unteren Drittel. */
.page-head,.page-intro{ --intro-slot:clamp(10.5rem,28vh,14.5rem) }
.page-head{ position:relative; background:var(--ink); color:#fff;
  height:100vh; height:100svh; min-height:100vh; min-height:100svh;
  max-height:100vh; max-height:100svh;
  margin-top:calc((var(--hdr-h) + var(--safe-t)) * -1);
  display:flex; align-items:flex-end; overflow:hidden }
.page-head-bg{ position:absolute; inset:0; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 38%,transparent 100%) }
.page-head-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 45% }
.page-head-bg::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(105deg,rgba(18,18,17,.82) 0%,rgba(18,18,17,.52) 40%,rgba(18,18,17,.12) 72%,rgba(18,18,17,0) 92%),
  linear-gradient(to top,rgba(18,18,17,.08) 0%,rgba(18,18,17,.06) 46%,rgba(18,18,17,.36) 100%) }
.page-head-in{ position:relative; z-index:1;
  padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(1.25rem,4vh,3rem));
  padding-bottom:var(--intro-slot) }
.page-head h1{ color:#fff; max-width:20ch }
.crumb{ display:flex; align-items:center; gap:.6rem; margin:0 0 1.75rem;
  font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.crumb a:hover{ color:var(--fg) }
.crumb b{ color:var(--muted); font-weight:400 }
.wiz-wrap > .crumb{ grid-column:1/-1 }

.page-intro{
  position:relative; z-index:2;
  margin-top:calc(var(--intro-slot) * -1);
  background:linear-gradient(to bottom,
    rgba(18,18,17,0) 0%,
    rgba(18,18,17,.22) 24%,
    rgba(18,18,17,.62) 52%,
    rgba(18,18,17,.92) 78%,
    var(--ink) 100%);
}
.page-intro .wrap{ padding-top:clamp(1rem,2.5vh,1.75rem); padding-bottom:clamp(1.25rem,3.5vh,2.25rem) }
.page-intro .lead{ max-width:62ch }
@media (max-height:700px){
  .page-head h1{ font-size:clamp(1.75rem,5.6vh,2.75rem) }
  .page-intro .wrap{ padding-top:1rem; padding-bottom:1.15rem }
  .page-intro .datastrip{ margin-top:1.15rem; padding-top:1rem }
}

.datastrip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem 2rem;
  border-top:1px solid var(--line); margin-top:2rem; padding-top:1.5rem }
.datastrip > div{ min-width:0 }
.datastrip i{ display:block; font-style:normal; font-size:.75rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:.4rem }
.datastrip b{ font-size:1rem; font-weight:500; letter-spacing:-.015em }
@media (max-width:820px){
  .page-head,.page-intro{ --intro-slot:clamp(11rem,30vh,14.5rem) }
  .page-head{ height:auto; min-height:min(64svh,34rem); max-height:none }
  .page-head-in{ padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(2.25rem,7vh,3.75rem)) }
  .page-head-bg img{ object-position:64% 42% }
  .datastrip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem;
    margin-top:1.5rem; padding-top:1.2rem }
}

.jump{ position:sticky; top:calc(var(--hdr-h) + var(--safe-t)); z-index:60;
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line) }
.jump-in{ display:flex; gap:2rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-block:1rem; scrollbar-width:none }
.jump-in::-webkit-scrollbar{ display:none }
.jump a{ flex:none; font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; padding:.45rem 0 .35rem;
  min-height:2.5rem; display:inline-flex; align-items:center;
  border-bottom:1px solid transparent; transition:color .2s }
.jump a:hover{ color:var(--muted) }
.jump a[aria-current="true"]{ color:var(--fg); border-bottom-color:var(--fg) }

/* ==========================================================================
   Beleg, Spezifikation, Tabelle
   ========================================================================== */
.proof{ margin:0 0 clamp(2rem,3vw,2.75rem) }
.proof img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--surface) }
.proof .ba{ aspect-ratio:16/9 }
.proof figcaption,.proof-meta p{ margin-top:.85rem; font-size:.8125rem; font-weight:300; line-height:1.65;
  color:var(--faint); max-width:70ch }
.proof-meta{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.85rem 2rem; flex-wrap:wrap; margin-top:.85rem }
.proof-meta p{ margin-top:0 }
@media (max-width:700px){ .proof img,.proof .ba,.ba{ aspect-ratio:1/1 } }

.spec{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line) }
.spec li{ display:grid; grid-template-columns:minmax(9rem,.3fr) minmax(0,1fr); gap:1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line) }
.spec dt,.spec .k{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); padding-top:.25rem }
.spec dd,.spec .v{ margin:0; font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted);
  min-width:0; overflow-wrap:anywhere }
.spec .v a{ color:var(--fg); border-bottom:1px solid var(--line) }
.spec .v a:hover{ border-color:var(--fg) }
@media (max-width:600px){ .spec li{ grid-template-columns:1fr; gap:.4rem } }

.matrix-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }
.matrix{ width:100%; border-collapse:collapse; font-size:.9375rem; min-width:44rem }
.matrix th,.matrix td{ padding:1rem; text-align:left; border-bottom:1px solid var(--line) }
.matrix thead th{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); border-bottom-color:var(--fg) }
.matrix thead th:not(:first-child),.matrix td{ text-align:center }
.matrix tbody th{ font-weight:300; color:var(--muted); width:34%; text-align:left }
.matrix .yes{ color:var(--fg) }
/* Die Striche fuer "nicht enthalten" standen in der Haarlinienfarbe und
   lagen damit bei rund 1,6:1 Kontrast — praktisch unsichtbar. Jetzt in der
   Fliesstextfarbe; der Unterschied zum Haken bleibt ueber dessen dunkleren
   Ton erhalten. */
.matrix .no{ color:var(--muted) }

/* ==========================================================================
   Lackkorrektur
   ========================================================================== */
.lab{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2.5rem,4vw,4rem); align-items:start }
@media (max-width:980px){ .lab{ grid-template-columns:1fr } }
.ba{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#000;
  cursor:ew-resize; touch-action:pan-y; --pos:50% }
.lyr{ position:absolute; inset:0 }
.lyr canvas{ position:absolute; inset:0; width:100%; height:100% }
.lyr.bef{ clip-path:inset(0 calc(100% - var(--pos)) 0 0) }
.ba-lbl{ position:absolute; bottom:1rem; z-index:4; padding:.35rem .75rem;
  background:rgba(18,18,17,.82); color:#fff; font-size:.6875rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase }
.ba-lbl.l{ left:1rem } .ba-lbl.r{ right:1rem }
.ba-h{ position:absolute; top:0; bottom:0; left:0; width:1px; background:#fff; z-index:5; pointer-events:none }
.ba-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.75rem; height:2.75rem; background:#fff; color:var(--ink); display:grid; place-items:center }
.ba-grip svg{ width:1.15rem; height:1.15rem; fill:currentColor }
.ba-hint{ margin-top:1rem; font-size:.75rem; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint) }

.stages{ display:grid; border-top:1px solid var(--line) }
.stage{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:1.25rem; align-items:start;
  text-align:left; padding:1.25rem 0; border:0; border-bottom:1px solid var(--line);
  background:none; cursor:pointer; transition:opacity .2s }
.stage:hover{ opacity:.7 }
.stage .n{ font-size:.75rem; font-weight:400; letter-spacing:.1em; color:var(--faint); padding-top:.3rem }
.stage .t{ display:block; font-size:1.0625rem; font-weight:500; letter-spacing:-.018em; color:var(--muted) }
.stage .d{ display:block; font-size:.875rem; font-weight:300; line-height:1.6;
  color:var(--faint); margin-top:.3rem }
.stage[aria-selected="true"] .t,.stage[aria-selected="true"] .n{ color:var(--fg) }
.stage[aria-selected="true"] .d{ color:var(--muted) }

.meter{ margin-top:2.5rem; display:grid; gap:1.25rem }
.meter-row{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; align-items:center }
.meter-row .k{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.meter-row .v{ font-size:1.125rem; font-weight:500; letter-spacing:-.03em; text-align:right }
.meter-row .bar{ grid-column:1/-1; height:2px; background:var(--line) }
.meter-row .bar i{ display:block; height:100%; width:0; background:var(--fg); transition:width .8s var(--e) }

/* ==========================================================================
   Preise
   ========================================================================== */
.seg{ display:inline-grid; grid-auto-flow:column; gap:0; border:1px solid var(--line) }
.seg button{ border:0; background:none; cursor:pointer; padding:.75rem 1.5rem;
  font-size:.875rem; font-weight:400; color:var(--muted); white-space:nowrap;
  transition:background-color .22s var(--e), color .22s var(--e) }
.seg button + button{ border-left:1px solid var(--line) }
.seg button:hover{ color:var(--fg) }
.seg button[aria-selected="true"]{ background:var(--fg); color:var(--bg) }
@media (max-width:640px){
  .seg{ display:grid; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); width:100% }
  .seg button{ padding:.7rem .35rem; font-size:.75rem; white-space:normal; min-height:2.75rem }
  .seg button + button{ border-left:1px solid var(--line) }
}

.pkgs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem }
.pkg{ display:flex; flex-direction:column; padding:2rem; background:var(--surface);
  border:1px solid var(--line) }
.pkg.wide{ grid-column:1/-1 }
.pkg.hl{
  border-color:var(--fg);
  background:
    linear-gradient(160deg,
      color-mix(in oklab,var(--fg) 8%,var(--surface)) 0%,
      color-mix(in oklab,var(--fg) 3.5%,var(--surface)) 52%,
      var(--surface) 100%);
}
.pkg-k{ display:block; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:1.25rem }
.pkg-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; margin-bottom:.75rem }
.pkg-for{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted);
  margin-bottom:1.75rem; max-width:46ch }
.pkg ul{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.6rem }
.pkg ul.two{ grid-template-columns:1fr 1fr; gap:.6rem 2rem }
.pkg li{ position:relative; padding-left:1.15rem; font-size:.9375rem; font-weight:300;
  line-height:1.55; color:var(--muted) }
.pkg li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px;
  background:var(--faint) }
.pkg li b{ color:var(--fg); font-weight:500 }
.pkg-foot{ margin-top:auto; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
@media (max-width:900px){ .pkgs{ grid-template-columns:1fr } .pkg ul.two{ grid-template-columns:1fr } }
@media (max-width:520px){ .pkg{ padding:1.5rem } }

.price{ display:flex; align-items:baseline; gap:.35rem }
.price .ab{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.price .v{ font-size:clamp(1.75rem,2.6vw,2.25rem); font-weight:500; letter-spacing:-.045em; line-height:1 }
.price .cur{ font-size:1.25rem; font-weight:500; letter-spacing:-.03em }
.price.req .v{ font-size:.9375rem; font-weight:300; color:var(--muted); letter-spacing:0; line-height:1.5 }

.stg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; margin-bottom:2.5rem }
.stg > div{ padding-top:1.25rem; border-top:1px solid var(--line) }
.stg .n{ display:block; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  color:var(--faint); margin-bottom:.75rem }
.stg .t{ display:block; font-size:1rem; font-weight:500; letter-spacing:-.018em; margin-bottom:.35rem }
.stg .d{ display:block; font-size:.875rem; font-weight:300; line-height:1.65; color:var(--muted) }
@media (max-width:760px){ .stg{ grid-template-columns:1fr; gap:1.5rem } }

.note{ margin-top:2rem; font-size:.8125rem; font-weight:300; line-height:1.7;
  color:var(--faint); max-width:80ch }
.usp{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem 2rem }
.usp li{ position:relative; padding-left:1.15rem; font-size:.9375rem; font-weight:300; color:var(--muted) }
.usp li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px;
  background:var(--faint) }

/* ==========================================================================
   Anfrageformular
   ========================================================================== */
.wiz-wrap{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  gap:clamp(2.5rem,4vw,4rem); align-items:start }
@media (max-width:1100px){ .wiz-wrap{ grid-template-columns:1fr } }
.form-card{ container-type:inline-size; background:var(--surface); border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.5rem) }

.wiz-bar{ list-style:none; margin:0 0 2.5rem; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:.75rem }
.wiz-bar button{ width:100%; background:none; border:0; border-top:2px solid var(--line);
  cursor:pointer; text-align:left; padding:.85rem 0 0; display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); transition:color .22s, border-color .22s }
.wiz-bar button.on{ color:var(--fg); border-top-color:var(--fg) }
.wiz-bar button.done{ color:var(--muted); border-top-color:var(--muted) }
@media (max-width:620px){ .wiz-bar .t{ display:none } .wiz-bar button{ justify-content:center } }

.wiz-h{ font-size:1.25rem; font-weight:500; letter-spacing:-.028em; margin-bottom:.5rem }
.wiz-p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted); margin-bottom:2rem }
.grp{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); margin:2rem 0 .85rem }
.grp:first-of-type{ margin-top:0 }

.opts{ display:grid; gap:.6rem }
.opts.two{ grid-template-columns:1fr 1fr }
.opts.three{ grid-template-columns:repeat(3,1fr) }
@container (max-width:600px){ .opts.two,.opts.three{ grid-template-columns:1fr } }
@media (max-width:720px){ .opts.two,.opts.three{ grid-template-columns:1fr } }
.opt{ position:relative; display:block; cursor:pointer }
.opt input{ position:absolute; opacity:0; width:0; height:0 }
.opt-b{ display:block; padding:1.1rem 1.1rem 1.1rem 2.75rem; position:relative;
  border:1px solid var(--line); background:var(--bg); transition:border-color .22s var(--e) }
.opt-b::before{ content:""; position:absolute; left:1.1rem; top:1.35rem; width:.85rem; height:.85rem;
  border:1px solid var(--faint); border-radius:50%; transition:all .22s }
.opt:hover .opt-b{ border-color:var(--muted) }
.opt input:checked + .opt-b{ border-color:var(--fg) }
.opt input:checked + .opt-b::before{ background:var(--fg); border-color:var(--fg);
  box-shadow:inset 0 0 0 2.5px var(--bg) }
.opt-b b{ display:block; font-size:.9375rem; font-weight:500; letter-spacing:-.015em }
.opt-b i{ display:block; font-style:normal; font-size:.875rem; font-weight:300; line-height:1.5;
  color:var(--muted); margin-top:.25rem }
.opt-b .pr{ display:block; font-style:normal; margin-top:.65rem; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg) }

.f{ display:grid; gap:.5rem; margin-top:1.5rem }
.f label{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.f input,.f textarea{ width:100%; padding:.9rem 1rem; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:0; font-size:1rem; font-weight:300;
  transition:border-color .22s }
.f input::placeholder,.f textarea::placeholder{ color:var(--faint) }
.f input:focus,.f textarea:focus{ outline:none; border-color:var(--fg) }
.f textarea{ min-height:7rem; resize:vertical; line-height:1.65 }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
@media (max-width:600px){ .f-row{ grid-template-columns:1fr; gap:0 } }
.msg{ display:none; font-size:.8125rem; color:var(--danger) }
.f.err .msg,.msg.on{ display:block }
.f.err input,.f.err textarea{ border-color:var(--danger) }

.consent{ display:flex; gap:.85rem; align-items:flex-start; margin-top:2rem; cursor:pointer;
  font-size:.875rem; font-weight:300; line-height:1.65; color:var(--muted) }
.consent input{ position:absolute; opacity:0; width:0; height:0 }
.consent .box{ width:1.1rem; height:1.1rem; border:1px solid var(--faint); flex:none;
  margin-top:.2rem; position:relative; transition:all .22s }
.consent input:checked + .box{ background:var(--fg); border-color:var(--fg) }
.consent input:checked + .box::after{ content:""; position:absolute; left:.32rem; top:.12rem;
  width:.28rem; height:.55rem; border:solid var(--bg); border-width:0 1.5px 1.5px 0; transform:rotate(45deg) }
.consent a{ color:var(--fg); border-bottom:1px solid var(--line) }
.consent.err .box{ border-color:var(--danger) }

.wiz-foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap }
.wiz-sum{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; min-width:0 }
.wiz-sum .k{ font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint) }
.wiz-sum .price .v{ font-size:1.625rem }
#sHint{ font-size:.8125rem; font-weight:300; color:var(--faint); flex-basis:100% }
.wiz-nav{ display:flex; align-items:center; gap:1rem }
.wiz-alt{ margin-top:1.5rem; font-size:.875rem; font-weight:300; line-height:1.65; color:var(--muted) }
.wiz-alt a{ color:var(--fg); border-bottom:1px solid var(--line) }
.sent{ display:none }
.sent.on{ display:block; animation:sent-in .5s var(--e) }
.sent-h{ font-size:clamp(1.875rem,3.4vw,2.75rem); font-weight:600; letter-spacing:-.045em;
  line-height:1.05; margin-bottom:.65rem }
.sent-lead{ font-size:1.0625rem; font-weight:300; line-height:1.55; color:var(--muted) }
.sent-again{ display:inline; margin-top:1.5rem; padding:0 0 .2rem; background:none;
  border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--fg);
  font-size:.875rem; font-weight:400; cursor:pointer }
@keyframes sent-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .sent.on{ animation:none } }

.aside{ display:grid; gap:1.75rem; min-width:0; position:sticky; top:calc(var(--hdr-h) + var(--safe-t) + 1.5rem) }
@media (max-width:1100px){ .aside{ position:static } }
.aside-card{ background:var(--surface); border:1px solid var(--line); padding:1.75rem; min-width:0 }
.aside-card.dark{ background:var(--ink); border-color:var(--ink); color:#e7e7e7;
  --fg:#e7e7e7; --muted:rgba(231,231,231,.64); --faint:rgba(231,231,231,.44);
  --line:rgba(231,231,231,.14) }
.aside-h{ display:block; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:1.25rem }
.sum-row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; font-size:.9375rem;
  font-weight:300; border-bottom:1px solid var(--line) }
.sum-row:last-child{ border-bottom:0 }
.sum-row .k{ color:var(--muted); min-width:0 }
.sum-row .v{ text-align:right; font-weight:500; min-width:0; overflow-wrap:anywhere }
.aside-list{ display:grid; gap:1rem }
.aside-list a,.aside-list > div{ display:flex; align-items:center; gap:.85rem; min-width:0 }
.aside-list a:hover b{ text-decoration:underline; text-underline-offset:3px }
.aside-ic{ width:2rem; height:2rem; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); color:var(--faint) }
.aside-ic svg{ width:.95rem; height:.95rem; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }
.aside-list i{ display:block; font-style:normal; font-size:.6875rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint) }
.aside-list b{ display:block; font-size:.9375rem; font-weight:500; letter-spacing:-.015em;
  min-width:0; overflow-wrap:anywhere }
.aside-note{ font-size:.875rem; font-weight:300; line-height:1.65; color:var(--muted); margin-top:1.25rem }

/* ==========================================================================
   Fusszeile
   ========================================================================== */
footer{ --f-inset:clamp(3.25rem,5.5vw,4.5rem);
  padding-block:var(--f-inset) 1rem }
.f-top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,.9fr)) minmax(0,.8fr);
  gap:clamp(1.5rem,2.5vw,2.5rem); padding-bottom:var(--f-inset) }
.f-col h5{ margin:0 0 1rem; font-size:.75rem; font-weight:400; letter-spacing:.11em;
  text-transform:uppercase; color:#fff }
.f-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.f-col ul a{ font-size:.875rem; font-weight:300; color:var(--muted); transition:color .2s }
.f-col ul a:hover{ color:var(--fg) }
.f-act .btn{ width:fit-content }
.f-social{ display:flex; gap:.6rem; margin-top:1.25rem }
.f-social a{ width:2rem; height:2rem; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted); transition:color .2s, border-color .2s }
.f-social a:hover{ color:var(--fg); border-color:var(--fg) }
.f-social svg{ width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }
.f-bot{ padding-top:0; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem 2rem; flex-wrap:wrap;
  font-size:.6875rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint) }
.f-bot nav{ display:flex; gap:1.5rem }
.f-bot a:hover{ color:var(--fg) }
@media (max-width:1000px){ .f-top{ grid-template-columns:1fr 1fr } .f-brand{ grid-column:1/-1 } }
@media (max-width:560px){
  .f-top{ grid-template-columns:1fr; gap:1.75rem }
  .f-social a{ width:2.75rem; height:2.75rem }
  .f-col ul{ gap:0 }
  .f-col ul a{ display:flex; align-items:center; min-height:2.55rem }
  .f-bot{ gap:.5rem 1.25rem }
  .f-bot nav{ gap:1.1rem }
  .f-bot a{ min-height:2.5rem; display:inline-flex; align-items:center }
  footer{ padding-bottom:max(1.15rem,calc(.65rem + var(--safe-b))) }
}

/* ==========================================================================
   Rechtstexte — Impressum, Datenschutz
   ========================================================================== */
.f-claim{ margin:.9rem 0 0; font-size:.875rem; font-weight:300; line-height:1.65;
  color:var(--muted); max-width:36ch }
.legal-head{ padding:calc(var(--hdr-h) + var(--safe-t) + clamp(1.75rem,4vh,3rem)) 0 clamp(2rem,4vh,2.75rem) }
.legal-head h1{ color:#fff; max-width:16ch }
.legal{ max-width:62ch }
.legal-empty{ min-height:36vh }
.legal-id{ margin-bottom:2.5rem }
.legal-id p{ color:var(--fg); margin:0 }
.legal-id p + p{ margin-top:.2rem }
.legal-id strong{ font-weight:500 }
.legal h2{ font-size:clamp(1.0625rem,1.4vw,1.25rem); font-weight:500;
  letter-spacing:-.015em; margin:2.25rem 0 .7rem }
.legal p{ color:var(--muted); font-weight:300 }
.legal p + p{ margin-top:.75rem }
.legal a{ text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px }
.legal a:hover{ color:var(--fg) }

figure{ margin:0 }

/* ==========================================================================
   Handy — durchgaengig, nicht nur umgebrochen
   ========================================================================== */
@media (max-width:640px){
  :root{ --hdr-h:64px; --sec:clamp(2.4rem,9vw,3.35rem); --gutter:clamp(1.15rem,5.2vw,1.5rem) }
  #hdr.stuck .bar{ height:var(--hdr-h) }
  #hdr .bar{ gap:.45rem }
  #hdr .logo b{ font-size:1.05rem }
  #hdr .hdr-cta{ padding:.55rem .85rem; font-size:.75rem }
  .hdr-cta-full{ display:none }
  .hdr-cta-short{ display:inline }
  .hdr-r{ gap:.5rem }
  .logo span{ display:none }
  .mmenu > a{ font-size:1.5rem; padding:.85rem 0 }
  h1{ font-size:clamp(1.85rem,9vw,2.35rem); letter-spacing:-.04em }
  h2{ font-size:clamp(1.55rem,7vw,1.9rem) }
  .sec-head{ margin-bottom:1.65rem }
  .clients{ padding-block:1.25rem; gap:.55rem 1.15rem }
  .faq summary{ gap:1rem; padding:1.15rem 0; font-size:1rem }
  .faq details p{ padding:0 0 1.3rem }
  .jump-in{ gap:1.1rem; padding-block:.7rem }
  .pkg{ padding:1.3rem }
  .pkg-foot .btn{ min-height:2.75rem }
  .form-card{ padding:1.2rem 1.1rem 1.15rem }
  .wiz-bar{ margin-bottom:1.6rem; gap:.4rem }
  .wiz-bar button{ min-height:2.4rem }
  .wiz-foot{
    position:sticky; bottom:0; z-index:5;
    margin:1.75rem -1.1rem 0; padding:1rem 1.1rem calc(1rem + var(--safe-b));
    background:var(--surface); flex-direction:column; align-items:stretch; gap:1rem;
  }
  .wiz-nav{ width:100% }
  .wiz-nav .btn{ flex:1; min-height:3rem }
  .opt-b{ padding:1rem 1rem 1rem 2.55rem }
  .opt-b::before{ left:1rem; top:1.25rem }
  .aside-card{ padding:1.3rem }
  .btn{ min-height:2.75rem }
  .btn-lg{ min-height:3rem }
  .crumb{ margin-bottom:1.15rem }
  .ba-lbl{ bottom:.7rem; padding:.3rem .55rem }
  .ba-lbl.l{ left:.7rem } .ba-lbl.r{ right:.7rem }
  .matrix{ min-width:36rem }
  .matrix thead th:first-child,.matrix tbody th{
    position:sticky; left:0; z-index:1; background:var(--bg);
    box-shadow:1px 0 0 var(--line);
  }
  .matrix-wrap{ margin-right:calc(var(--gutter) * -1);
    padding-right:var(--gutter);
    mask-image:linear-gradient(to right,#000 86%,transparent) }
  .matrix-wrap::after{ content:"Zum Vergleich seitlich wischen";
    display:block; margin-top:.7rem; font-size:.6875rem; font-weight:400;
    letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
  .feature .row,.pkg-foot .row{ width:100% }
  .feature .row .btn{ flex:1 1 100%; min-height:2.75rem; justify-content:center }
}
@media (max-width:360px){
  #hdr .hdr-cta{ display:none }
  .hero-rail b{ font-size:1.02rem }
  #hdr .logo b{ font-size:.98rem }
}