/* ==========================================================================
   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 .size-stick,
.theme-morph .seg,.theme-morph .seg button,
.theme-morph .price,.theme-morph .btn,
.theme-morph .offer,.theme-morph .offer-k,.theme-morph .offer-tag,
.theme-morph .offer-sum,.theme-morph .offer-go,.theme-morph .offer h3,
.theme-morph .veh-paket,.theme-morph .veh-ig,
.theme-morph .close-say,.theme-morph .close-do{
  transition:color 1.15s var(--e), border-color 1.15s var(--e), background-color 1.15s var(--e);
}
.theme-morph .offer,.theme-morph .offer-k,.theme-morph .offer-tag,
.theme-morph .offer-sum,.theme-morph .offer-go,.theme-morph .offer h3,
.theme-morph .offer .price,.theme-morph .offer .price .ab,
.theme-morph .offer .price .v,.theme-morph .offer .price .cur{
  transition:color .4s var(--e), border-color .4s var(--e), background-color .4s 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:hidden; overflow-x:clip; max-width:100%;
  scroll-padding-top:calc(var(--hdr-h) + var(--safe-t) + 2rem); background:var(--ink) }
html:has(.jump),html:has(.size-stick){ 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:hidden; overflow-x:clip; max-width:100%; width:100%; position:relative;
  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:12px; top:12px; z-index:200; background:var(--white); color:var(--ink);
  padding:.85rem 1.5rem; transform:translateY(-160%); transition:transform .2s }
.skip:focus,.skip:focus-visible{ transform:none }
.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:min(var(--shell),100%); margin-inline:auto; min-width:0;
  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 }
/* Feature-Bild ist der Abschnittsbeginn — kein Streifen darueber. */
.sec:has(> .wrap > .feature:first-child){ padding-top: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 }
@media (max-width:820px){ .hide-m{ display:none } }
@media (min-width:821px){ .hide-d{ display:none } }

.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,.js .pop,.js .snap,
  .js .lack-preview .steplist li.pop::after,
  .js .tick,.js .cards.rv > *,.js .faq.rv > *,.js .rows.rv > *,
  .js .svc.rv > .svc-tile,.js .pkg.rv li,.js .pkg.rv .stg > div{
    opacity:1!important; transform:none!important; transition:none!important; animation:none!important }
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){
  .js .snap .offer-media{
    opacity:1!important; transform:none!important; transition:none!important; animation:none!important }
}

/* Handy: einmalige Auftritte beim ersten Runterscrollen.
   Keyframes statt Transition — iOS überspringt sonst oft den Startzustand. */
@media (max-width:820px){
  .js .pop{
    opacity:0; transform:translateY(36px);
    -webkit-backface-visibility:hidden; backface-visibility:hidden }
  .js .pop.in{
    animation:nr-pop .58s cubic-bezier(.16,1,.3,1) var(--d,0ms) both }
  .js .steplist li.pop{
    border-top-color:transparent; position:relative }
  .js .steplist li.pop::after{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:var(--line); transform:scaleX(0); transform-origin:left }
  .js .steplist li.pop.in::after{
    animation:nr-line .48s var(--e) var(--d,0ms) both }
  .js .offer.snap{
    opacity:0; transform:translateY(40px) scale(.92);
    -webkit-backface-visibility:hidden; backface-visibility:hidden }
  .js .offer.snap.in{
    animation:nr-snap .64s cubic-bezier(.18,1.36,.32,1) var(--d,0ms) both }
  .js .offer.snap .offer-media{ transform:scale(.7) }
  .js .offer.snap.in .offer-media{
    animation:nr-media .72s cubic-bezier(.16,1.46,.32,1) var(--d,0ms) both }
  .js .svc-tile.pop .svc-media,
  .js .veh.pop .veh-media{
    transform:scale(.94);
    -webkit-backface-visibility:hidden; backface-visibility:hidden }
  .js .svc-tile.pop.in .svc-media,
  .js .veh.pop.in .veh-media{
    animation:nr-media .72s cubic-bezier(.16,1.46,.32,1) var(--d,0ms) both }
}
@keyframes nr-pop{
  from{ opacity:0; transform:translateY(36px) }
  to{ opacity:1; transform:none }
}
@keyframes nr-line{
  from{ transform:scaleX(0) }
  to{ transform:scaleX(1) }
}
@keyframes nr-snap{
  from{ opacity:0; transform:translateY(40px) scale(.92) }
  to{ opacity:1; transform:none }
}
@keyframes nr-media{
  from{ transform:scale(.7) }
  to{ transform:none }
}

/* Desktop: einmalig und leise, wenn der Block zum ersten Mal ins Bild kommt.
   Kein Zurücksetzen beim Hochscrollen — .in bleibt. */
@media (min-width:821px){
  .js .rv{ transform:translateY(18px) }
  .js .rv.in{
    transition:opacity .72s var(--e) var(--d,0ms), transform .72s var(--e) var(--d,0ms) }
  .js .cards.rv,.js .faq.rv,.js .rows.rv,.js .svc.rv,.js .feed.rv,.js .matrix-wrap.rv{
    transform:none }
  .js .pop{
    opacity:0; transform:translateY(16px) }
  .js .pop.in{
    animation:nr-rise .68s cubic-bezier(.16,1,.3,1) var(--d,0ms) both }
  .js .offer.snap{
    opacity:0; transform:translateY(18px) }
  .js .offer.snap.in{
    animation:nr-rise .72s cubic-bezier(.16,1,.3,1) var(--d,0ms) both }
  /* Die Kachel darf aufbauen — das Foto bleibt unsichtbar, bis Hover.
     Ohne diesen Reset zieht die Opacity-Animation das Bild mit. */
  .js .offer.snap.in .offer-media{
    opacity:0; transform:none; animation:none }
  .js .cards.rv.in > *,
  .js .faq.rv.in > *,
  .js .rows.rv.in > *,
  .js .svc.rv.in > .svc-tile{
    animation:nr-rise .68s cubic-bezier(.16,1,.3,1) both }
  .js .cards.rv.in > *:nth-child(1),
  .js .faq.rv.in > *:nth-child(1),
  .js .rows.rv.in > *:nth-child(1),
  .js .svc.rv.in > .svc-tile:nth-of-type(1){ animation-delay:.04s }
  .js .cards.rv.in > *:nth-child(2),
  .js .faq.rv.in > *:nth-child(2),
  .js .rows.rv.in > *:nth-child(2),
  .js .svc.rv.in > .svc-tile:nth-of-type(2){ animation-delay:.11s }
  .js .cards.rv.in > *:nth-child(3),
  .js .faq.rv.in > *:nth-child(3),
  .js .rows.rv.in > *:nth-child(3),
  .js .svc.rv.in > .svc-tile:nth-of-type(3){ animation-delay:.18s }
  .js .cards.rv.in > *:nth-child(4),
  .js .faq.rv.in > *:nth-child(4),
  .js .svc.rv.in > .svc-tile:nth-of-type(4){ animation-delay:.25s }
  .js .cards.rv.in > *:nth-child(5),
  .js .faq.rv.in > *:nth-child(5){ animation-delay:.32s }
  .js .pkg.rv.in li,
  .js .pkg.rv.in .stg > div{
    animation:nr-rise .5s cubic-bezier(.16,1,.3,1) both }
  .js .pkg.rv.in li:nth-child(1),
  .js .pkg.rv.in .stg > div:nth-child(1){ animation-delay:.08s }
  .js .pkg.rv.in li:nth-child(2),
  .js .pkg.rv.in .stg > div:nth-child(2){ animation-delay:.13s }
  .js .pkg.rv.in li:nth-child(3),
  .js .pkg.rv.in .stg > div:nth-child(3){ animation-delay:.18s }
  .js .pkg.rv.in li:nth-child(4){ animation-delay:.23s }
  .js .pkg.rv.in li:nth-child(5){ animation-delay:.28s }
  .js .pkg.rv.in li:nth-child(6){ animation-delay:.33s }
  .js .pkg.rv.in li:nth-child(7){ animation-delay:.38s }
}
@media (min-width:861px){
  .matrix .tick{ display:inline-block }
  .js .matrix-wrap.rv.in .tick{
    animation:nr-tick .42s cubic-bezier(.16,1,.3,1) var(--tick-d,0ms) both }
  .js .matrix-wrap.rv.in tbody tr:nth-child(1) .tick{ --tick-d:.08s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(2) .tick{ --tick-d:.16s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(3) .tick{ --tick-d:.24s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(4) .tick{ --tick-d:.32s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(5) .tick{ --tick-d:.4s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(6) .tick{ --tick-d:.48s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(7) .tick{ --tick-d:.56s }
  .js .matrix-wrap.rv.in tbody tr:nth-child(8) .tick{ --tick-d:.64s }
  .js .matrix-wrap.rv.in tbody td:nth-child(3) .tick{ animation-delay:calc(var(--tick-d,0s) + .05s) }
  .js .matrix-wrap.rv.in tbody td:nth-child(4) .tick{ animation-delay:calc(var(--tick-d,0s) + .1s) }
  .js .matrix-wrap.rv.in tbody td:nth-child(5) .tick{ animation-delay:calc(var(--tick-d,0s) + .15s) }
}
@keyframes nr-rise{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}
@keyframes nr-tick{
  from{ opacity:0; transform:scale(.42) }
  to{ opacity:1; transform:none }
}

/* ==========================================================================
   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) }
#wizSend:disabled{
  opacity:1; cursor:not-allowed;
  background:transparent; color:var(--muted); border-color:var(--line)
}
#wizSend:disabled:hover{ color:var(--muted); border-color:var(--line) }
.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
   ========================================================================== */
/* Fest oben, nicht im Dokumentfluss. Beim Runterscrollen faehrt er weg,
   beim Hochscrollen kommt er wieder — site.js setzt "is-away" und "stuck". */
#hdr{ position:fixed; top:0; left:0; right:0; z-index:90; background:transparent;
  padding-top:var(--safe-t); border-bottom:0;
  transition:background-color .3s var(--e),
    backdrop-filter .3s, transform .28s var(--e) }
#hdr.stuck{ background:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none }
#hdr.is-away{ transform:translate3d(0,calc(-100% - var(--safe-t)),0); pointer-events:none }
#hdr .bar{ max-width:min(var(--shell),100%); margin-inline:auto; min-width:0;
  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; min-width:0; color:#fff }
.logo img{ height:1.7rem; width:auto; display:block; flex:none }
.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; min-width:0 }
.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 }
html.mm-open #hdr,html.mm-open #hdr.stuck,html.mm-open #hdr.is-away{
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transform:none; pointer-events:auto }
html.mm-open #hdr .hdr-cta,html.mm-open #hdr .logo{ display:none }
.mmenu{ position:fixed; inset:0; z-index:85; background:var(--ink); color:#e7e7e7;
  padding:calc(var(--hdr-h) + var(--safe-t) + 1.15rem) max(var(--gutter),var(--safe-r)) max(2.5rem,calc(1.75rem + var(--safe-b))) max(var(--gutter),var(--safe-l));
  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,#hdr .hdr-cta{ 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. Der Balken liegt fest darueber
   und ist durchsichtig, bis gescrollt wird. */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end }
.hero-photo{ position:absolute; inset:0; z-index:0 }
.hero-photo .hs{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.35s var(--e); pointer-events:none }
.hero-photo .hs.on{ opacity:1 }
.hero-photo picture{ display:block; width:100%; height:100% }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:58% 50% }
.hero-vid{ display:none }
/* 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; z-index:2; pointer-events:none; 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:2;
  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 }
.hero-cta-short{ display:none }
.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:2 }
.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 }
/* Handy und schmale Vorschau: Verlauf in der Textschicht, nicht unter dem Video. */
@media (max-width:1080px){
  .hero-photo::after{ display:none }
  .hero-grid{ isolation:isolate; transform:translateZ(0) }
  .hero-grid::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(18,18,17,0) 0%,
      rgba(18,18,17,0) 22%,
      rgba(18,18,17,.32) 48%,
      rgba(18,18,17,.58) 72%,
      rgba(18,18,17,.72) 100%) }
  .hero-grid > *{ position:relative; z-index:2 }
}
@media (max-width:820px){
  /* Erster Screen: Foto + Text + beide Buttons. Haken und Preise darunter. */
  .hero{ min-height:0; justify-content:flex-start }
  .hero-photo{ inset:auto; top:0; left:0; right:0; height:100vh; height:100svh }
  .hero-photo img{ object-position:50% 38% }
  .hs-mvid img,.hs-mvid .hero-vid{ object-position:50% 50% }
  .hero-vid{
    display:block; position:absolute; inset:0; z-index:1; width:100%; height:100%;
    object-fit:cover; pointer-events:none; opacity:0;
    transform:translateZ(0); -webkit-transform:translateZ(0);
    transition:opacity .28s linear }
  .hs-mvid.is-live .hero-vid{ opacity:1 }
  .hero-grid{
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end;
    box-sizing:border-box;
    padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(2.4rem,7vh,4rem));
    padding-bottom:1.5rem }
  .hero-trust{ padding-top:.85rem; padding-bottom:.15rem }
  .hero-rail{ border-top:0; background:var(--ink) }
  .hero-rail-in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; padding-block:1.25rem }
  .hero-rail-in > :nth-child(n+3){ display:none }
  .hero h1{ margin-bottom:1.1rem }
  .hero-cta{ flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:.55rem; margin-top:1.55rem }
  .hero-cta .btn{ flex:1 1 0; width:auto; min-width:0; min-height:2.75rem;
    padding:.55rem .7rem; font-size:.8125rem; justify-content:center }
  .hero-cta-full{ display:none }
  .hero-cta-short{ display:inline }
  .trust{ margin-top:0 }
}

/* ==========================================================================
   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(4,minmax(0,1fr)); gap:2.5rem 1.5rem }
.svc-tile{ min-width:0; display:flex; flex-direction:column; position:relative }
.svc > a,.svc-tile > a{ display:flex; flex-direction:column; background:none; border:0;
  border-top:1px solid var(--line); padding-top:1.5rem; flex:1 }
.svc-info,.svc-pop{ display:none }
.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,.svc-tile: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 }
.svc-arr{ display:none }
@media (max-width:1100px){ .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem } }

/* ==========================================================================
   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-visual{ margin:0 }
.feature-media{ overflow:hidden; background:var(--surface); aspect-ratio:4/5 }
.feature-media picture{ display:block; width:100%; height:100% }
.feature-media img{ width:100%; height:100%; object-fit:cover; object-position:center 55% }
.feature-media:has(.ba){ aspect-ratio:16/9; background:#000 }
.feature-media .ba{ width:100%; height:100%; aspect-ratio:auto }
.feature-cap{ margin:.85rem 0 0; font-size:.8125rem; font-weight:300; line-height:1.65; color:var(--faint) }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; gap:1.75rem }
  .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 }

/* Startseite: Lack-Vergleich als eine mittige Kachel — Text, Flaeche, Stufen */
.lack-preview{ display:flex; flex-direction:column; align-items:center }
.lack-preview-head{ width:100%; max-width:64rem; margin-inline:auto; text-align:center }
.lack-preview-head .lead{ margin-top:1.25rem; max-width:52rem; margin-inline:auto }
.lack-preview .feature-visual{ width:100%; max-width:none; margin:2.75rem auto 0 }
.lack-preview .feature-media:has(.ba){ aspect-ratio:16/9 }
.lack-preview .feature-cap{ text-align:center }
.lack-preview .steplist{ width:100%; margin-top:2.75rem }
.lack-preview .btn{ margin-top:2rem; align-self:center }
@media (min-width:820px){
  .lack-preview .steplist{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0; border-top:1px solid var(--line);
  }
  .lack-preview .steplist li{
    display:block; padding:1.5rem 1.75rem 1.6rem 0; border-top:0;
    border-bottom:1px solid var(--line);
  }
  .lack-preview .steplist li + li{ padding-left:1.75rem; border-left:1px solid var(--line) }
  .lack-preview .steplist .n{ display:block; padding-top:0; margin-bottom:.7rem }
}

/* ==========================================================================
   Zeilenliste
   ========================================================================== */
.rows{ border-top:1px solid var(--line) }
.rows > div{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  column-gap:clamp(2rem,5vw,5rem); align-items:baseline;
  padding:1.65rem 0; border-bottom:1px solid var(--line)
}
.rows p{ font-size:.9375rem; font-weight:300; line-height:1.65; color:var(--muted) }
.rows .h-plain{ color:var(--fg) }
.rows b{ color:var(--fg); font-weight:500 }
@media (max-width:900px){ .rows > div{ grid-template-columns:1fr; row-gap:.45rem } }

/* ==========================================================================
   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-media.is-swipe{ cursor:grab; touch-action:pan-x }
.veh-media .veh-track{
  position:absolute; inset:0; z-index:1;
  display:flex; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scrollbar-width:none }
.veh-media .veh-track::-webkit-scrollbar{ display:none }
.veh-media .veh-track img,
.veh-media .veh-track img.on{
  position:relative; inset:auto; flex:0 0 100%;
  width:100%; height:100%; object-fit:cover;
  opacity:1; transition:none;
  scroll-snap-align:center; scroll-snap-stop:always;
  pointer-events:none; -webkit-user-drag:none; user-select:none }
.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:1; background:transparent; width:3.1rem; height:3.1rem;
    color:#fff }
  .vnav svg{
    width:1.4rem; height:1.4rem;
    mix-blend-mode:difference; -webkit-mix-blend-mode:difference }
  .vnav svg path{ stroke-width:2.05 }
}
.veh-body{ padding:1.25rem 0 0; min-width:0 }
.veh-paket{ display:block; margin-top:.3rem; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.veh-ig{
  display:inline-block; margin-left:.4em; font-size:.72em; font-weight:400;
  letter-spacing:0; line-height:1; color:var(--faint); vertical-align:.12em;
  transition:color .22s var(--e), transform .22s var(--e) }
.veh-ig:hover{ color:var(--fg); transform:translate(2px,-2px) }

/* Eine Referenz, eine echte Bewertung — Bild links, Text daneben. */
.feat-ref{
  display:grid; grid-template-columns:minmax(0,24rem) minmax(0,1fr);
  gap:clamp(1.75rem,3.5vw,4rem); align-items:start; max-width:none }
.feat-ref .veh-body{ display:none }
.feat-ref .veh-media{ aspect-ratio:4/5 }
.feat-copy{ min-width:0; max-width:36rem; padding-top:.15rem }
.feat-meta h3{
  margin:0; font-size:clamp(1.75rem,3.1vw,2.5rem);
  letter-spacing:-.04em; line-height:1.06 }
.feat-meta .veh-paket{ margin-top:.15rem }
.feat-quote{
  margin:1.5rem 0 0; padding:.1rem 0 0 1.35rem;
  border:0; border-left:1px solid var(--line); max-width:none }
.feat-quote p{
  margin:0; font-size:clamp(1.25rem,1.9vw,1.625rem);
  font-weight:300; letter-spacing:-.025em; line-height:1.42; color:var(--fg) }
.feat-cite{
  display:flex; align-items:center; flex-wrap:wrap; gap:.65rem 1.15rem;
  margin-top:1.35rem; font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.feat-cite cite{ font-style:normal; color:var(--muted) }
.feat-say{ margin:1.35rem 0 0; font-size:clamp(1.0625rem,1.25vw,1.1875rem);
  font-weight:300; line-height:1.6; color:var(--muted) }
.feat-did{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem }
.feat-did li{ position:relative; padding-left:1.15rem; font-size:.9375rem; font-weight:300;
  line-height:1.55; color:var(--muted) }
.feat-did li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px;
  background:var(--faint) }
.feat-copy .tlink{ margin-top:1.6rem }
@media (min-width:821px){
  #referenz .feat-ref{ grid-template-columns:minmax(0,26rem) minmax(0,1fr) }
}
@media (max-width:820px){
  .feat-ref{ grid-template-columns:1fr; gap:1.35rem }
  .feat-ref .veh-media{ max-width:20rem }
  #referenz .feat-ref .veh-media{ max-width:22rem }
  /* Startseite: Bild kante an kante, Text wie die Zeile darueber.
     Kein 100vw — das verschiebt den Block auf iOS. */
  .home-feat > .wrap{ padding-inline:0 }
  .home-feat .sec-head.split,
  .home-feat .feat-copy{
    padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r)) }
  .home-feat .feat-ref,
  .home-feat .feat-ref.rv,
  .home-feat .feat-ref.rv.in,
  .home-feat .feat-ref.pop,
  .home-feat .feat-ref.pop.in{
    transform:none; overflow:visible }
  .home-feat .feat-ref .vehs,
  .home-feat .feat-ref .veh{ width:100%; max-width:none }
  .home-feat .feat-ref .veh-media{
    width:100%; max-width:none; max-height:none;
    aspect-ratio:5/4; margin-inline:0 }
  .home-feat .feat-copy{ max-width:none }

  /* Lackkorrektur-Referenz: gleiches Querformat, volle Breite. */
  #referenz > .wrap{ padding-inline:0 }
  #referenz .sec-head,
  #referenz .feat-copy{
    padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r)) }
  #referenz .feat-ref,
  #referenz .feat-ref.rv,
  #referenz .feat-ref.rv.in,
  #referenz .feat-ref.pop,
  #referenz .feat-ref.pop.in{ transform:none; overflow:visible }
  #referenz .feat-ref .vehs,
  #referenz .feat-ref .veh{ width:100%; max-width:none }
  #referenz .feat-ref .veh-media{
    width:100%; max-width:none; max-height:none;
    aspect-ratio:5/4; margin-inline:0 }

  /* Unterseiten-Features (X5, Innenraum, Felge, …): quer, kante an kante.
     Text und Krümel behalten den normalen Seitenrand. */
  .sec:has(> .wrap > .feature) > .wrap{ padding-inline:0 }
  .sec:has(> .wrap > .crumb) > .wrap > .crumb,
  .sec:has(> .wrap > .feature) > .wrap > .feature > :not(.feature-media){
    padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r)) }
  .sec:has(> .wrap > .feature) .feature,
  .sec:has(> .wrap > .feature) .feature.rv,
  .sec:has(> .wrap > .feature) .feature.rv.in,
  .sec:has(> .wrap > .feature) .feature.pop,
  .sec:has(> .wrap > .feature) .feature.pop.in{ transform:none }
  .sec:has(> .wrap > .feature) .feature{ gap:1.35rem }
  .sec:has(> .wrap > .feature) .feature-media:not(:has(.ba)){
    aspect-ratio:5/4; width:100% }
}

/* Startseite: Label + Alle ansehen, ohne untere Kontur. */
.home-feat .sec-head.split{
  align-items:baseline; gap:1rem 2rem;
  margin-bottom:1.35rem; padding-bottom:0; border-bottom:0 }
.home-feat .sec-head.split .label{ margin-bottom:0 }
.home-feat .sec-head.split .tlink{ padding-bottom:0; border-bottom:0 }
@media (max-width:860px){
  .home-feat .sec-head.split{ grid-template-columns:minmax(0,1fr) minmax(0,auto) }
}

/* Erster Slide: Punkte etwas zurueckgenommen. Nach der ersten Bewegung wie bisher. */
.home-feat .veh-dots{ opacity:.48; transition:opacity .35s ease }
.home-feat .veh-media.is-moved .veh-dots{ opacity:1 }
.g-rate{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.55rem .7rem;
  font-size:.75rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); padding-bottom:.2rem; border-bottom:1px solid transparent;
  transition:color .22s, border-color .22s }
.g-rate:hover{ color:var(--fg); border-bottom-color:var(--line) }
.g-stars{ letter-spacing:.16em; color:var(--fg); font-size:.625rem; line-height:1 }
.g-rate-go{ gap:.4rem; padding:0; border:0 }
.g-rate-go:hover{ border:0 }
.g-go{ display:inline-block; font-size:.7rem; line-height:1;
  transition:transform .22s var(--e), color .22s }
.g-rate-go:hover .g-go{ transform:translate(2px,-2px); color:var(--fg) }
.sec-head:not(.split) .sec-copy{ grid-column:2; grid-row:2; min-width:0 }
.sec-copy .g-rate{ margin-top:1.15rem }
@media (max-width:900px){
  .sec-head:not(.split) .sec-copy{ grid-column:1; grid-row:auto }
}

/* 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:820px){
  .vehs:not(.one){
    display:flex; align-items:flex-start; grid-template-columns:none; gap:.8rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:.15rem }
  .vehs:not(.one)::-webkit-scrollbar{ display:none }
  .vehs:not(.one) > .veh{
    flex:0 0 calc(100% - 2.35rem); width:calc(100% - 2.35rem);
    scroll-snap-align:start; scroll-snap-stop:always; min-width:0 }
  .vehs:not(.one) .veh-media{ touch-action:pan-y; cursor:default; aspect-ratio:4/5 }
  .vehs:not(.one) .veh-media.is-swipe{ touch-action:pan-y }
  .vehs:not(.one) .veh-track{
    overflow:hidden; touch-action:pan-y }
}
@media (prefers-reduced-motion:reduce){
  #hdr{ transition:background-color .3s }
  .hero-photo .hs{ transition:none }
  .hero-vid{ display:none !important }
  .veh-media .veh-track{ scroll-behavior:auto }
}

/* ==========================================================================
   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)) } }
.feed-box{ position:relative }
.feed-toggle{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.feed-more{ display:none }
@media (max-width:820px){
  .js .feed-box{
    --fd-cols:4; --fd-gap:2px;
    --fd-row:calc((100vw - 2 * max(var(--gutter),var(--safe-l)) - (var(--fd-cols) - 1) * var(--fd-gap)) / var(--fd-cols) * 5 / 4) }
  /* Fuenf volle Reihen, die sechste laeuft schon ins Weiss. */
  .js .feed-box:not(:has(.feed-toggle:checked)){
    overflow:hidden;
    max-height:calc(5.62 * var(--fd-row) + 5 * var(--fd-gap)) }
  .js .feed-box:not(:has(.feed-toggle:checked)) .feed-more{
    display:flex; position:absolute; left:0; right:0; bottom:0; z-index:3;
    height:calc(.78 * var(--fd-row));
    align-items:flex-end; justify-content:center;
    padding:0 1rem .7rem;
    background:linear-gradient(to bottom,transparent 0%,var(--bg) 72%);
    pointer-events:none }
  .js .feed-box:not(:has(.feed-toggle:checked)) .feed-more .btn{
    pointer-events:auto; background:var(--white) }
}
@media (max-width:620px){
  .js .feed-box{ --fd-cols:3 }
  .js .feed-box:not(:has(.feed-toggle:checked)) .fd:nth-child(n+19){ visibility:hidden }
}

/* ==========================================================================
   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{
  position:relative;
  padding-block:var(--sec);
  isolation:isolate;
}
.close-band:not(.theme-morph),
.close-band.on-accent:not(.theme-morph){
  --bg:var(--white);
  --fg:var(--ink);
  --muted:#5a6161;
  --faint:#8a9090;
  --line:#e4e7e7;
  --surface:#fafbfb;
  color:var(--ink);
  /* Oben dieselbe Fläche wie das Papierband davor, dann ein langer
     weicher Zug ins warme Hellgrau. Unten eine ruhige Kante zum Footer. */
  background:linear-gradient(180deg,
    #ffffff 0%,
    #ffffff 36%,
    #f8f8f7 64%,
    #f1f1f0 86%,
    #ebebea 100%);
}
/* Mit theme-morph folgt das Band demselben Hell/Dunkel-Wechsel
   wie Ablauf und FAQ — sonst bleibt es hell, während der Rest schon kippt. */
.close-band.theme-morph{
  background:var(--bg);
  color:var(--fg);
}
.close-band::after{ content:none }
.close-band > .wrap{ position:relative; z-index:1 }
.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 }
@media (max-width:900px){
  .close-grid{ grid-template-columns:1fr; gap:2.5rem }
  .close-do{ align-items:stretch; width:100% }
  .close-do .row{ justify-content:stretch; width:100%; flex-direction:column }
  .close-do .btn{ width:100%; white-space:normal; min-height:3rem }
}

/* ==========================================================================
   Seitenkopf — randloses Bildband
   ========================================================================== */
/* Unterseiten-Hero: eine Bildschirmhoehe, Text sitzt unten im Bild. */
.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;
  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 picture{ position:absolute; inset:0 }
.page-head-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 45% }
.page-head--leistungen .page-head-bg img{ object-position:42% 48% }
.page-head--lackkorrektur .page-head-bg img{ object-position:56% 62% }
.page-head--referenzen .page-head-bg img{ object-position:58% 46% }
.page-head--kontakt .page-head-bg img{ object-position:58% 42% }
.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:clamp(1.35rem,3.5vh,2.25rem) }
.page-head h1{ color:#fff; max-width:20ch }
.page-head .lead{ max-width:62ch; margin-top:1.15rem; color:rgba(255,255,255,.82) }
.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 }

@media (max-height:700px){
  .page-head h1{ font-size:clamp(1.75rem,5.6vh,2.75rem) }
}

.datastrip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem 2rem;
  border-top:1px solid rgba(255,255,255,.22); margin-top:2rem; padding-top:1.5rem }
.datastrip:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)) }
.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:rgba(255,255,255,.7); margin-bottom:.4rem }
.datastrip b{ font-size:1rem; font-weight:500; letter-spacing:-.015em; color:#fff }
@media (max-width:820px){
  /* Hero ~12% hoeher: Bild und Fade bleiben auf 100svh, Text rueckt nach unten. */
  .page-head{ height:auto; min-height:112vh; min-height:112svh; max-height:none;
    overflow:hidden }
  .page-head-in{ padding-top:calc(var(--hdr-h) + var(--safe-t) + clamp(2.25rem,7vh,3.75rem));
    padding-bottom:1.25rem; background:none }
  .page-head-bg{ position:absolute; inset:0 auto auto 0; top:0; left:0; right:0;
    width:100%; height:100vh; height:100svh; bottom:auto;
    -webkit-mask-image:none; mask-image:none }
  .page-head-bg img{ object-position:64% 42% }
  .page-head--preise .page-head-bg img{ object-position:52% 55% }
  .page-head--leistungen .page-head-bg img{ object-position:48% 40% }
  .page-head--lackkorrektur .page-head-bg img{ object-position:50% 58% }
  .page-head--referenzen .page-head-bg img{ object-position:50% 36% }
  .page-head--kontakt .page-head-bg img{ object-position:50% 40% }
  .page-head-bg::after{ background:linear-gradient(to bottom,
    rgba(18,18,17,.38) 0%,
    rgba(18,18,17,.1) 30%,
    rgba(18,18,17,.42) 58%,
    rgba(18,18,17,.88) 84%,
    var(--ink) 100%) }
  .crumb{ display:none }
  .datastrip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem;
    margin-top:1.15rem; padding-top:1rem }
  .datastrip:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

html:has(#hdr.is-away) .jump{ top:0 }
html:has(#hdr.is-away) .size-stick{ top:0; padding-top:calc(.8rem + var(--safe-t)) }
html:has(#hdr.is-away) .aside{ top:1.5rem }
.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;
  overscroll-behavior-x:contain; max-width:100%; min-width:0;
  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;
  max-width:100%; min-width:0 }
.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) }
.matrix .tick{ display:inline-block }
/* 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,.matrix .add{ color:var(--muted) }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{ border-bottom:0 }

/* ==========================================================================
   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.25rem minmax(0,1fr); gap:1rem 1.15rem; align-items:start;
  text-align:left; padding:1.1rem 1rem; border:0; border-bottom:1px solid var(--line);
  background:transparent; cursor:pointer;
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e) }
.stage .n{ display:grid; place-items:center; width:2.25rem; height:2.25rem; box-sizing:border-box;
  font-size:.75rem; font-weight:500; letter-spacing:.06em; color:var(--faint);
  border:1px solid var(--line); padding:0 }
.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:hover .t,.stage:hover .n{ color:var(--fg) }
.stage:hover .n{ border-color:currentColor }
.stage[aria-selected="true"]{ background:var(--fg); border-bottom-color:var(--fg) }
.stage[aria-selected="true"] .n{ background:var(--bg); color:var(--fg); border-color:var(--bg) }
.stage[aria-selected="true"] .t{ color:var(--bg) }
.stage[aria-selected="true"] .d{ color:color-mix(in oklab,var(--bg) 68%,transparent) }

.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) }
}

/* Groessenwahl: klebt am oberen Rand, solange der Paketblock #pakete
   im Bild ist — danach (Direktvergleich) faehrt sie mit dem Abschnitt weg. */
.size-stick-ghost{ height:0 }
.size-stick{ position:sticky; top:calc(var(--hdr-h) + var(--safe-t)); z-index:60;
  padding-block:.8rem; margin-bottom:clamp(1.5rem,2.8vw,2.5rem);
  background:color-mix(in oklab,var(--bg) 90%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:padding-top .28s var(--e),
    background-color 1.15s var(--e), border-color 1.15s var(--e) }
.size-stick.is-stuck{ position:fixed; left:0; right:0; width:100%; margin-bottom:0 }
.size-stick .wrap{ display:flex; justify-content:flex-end }
@media (max-width:640px){
  .size-stick{ padding-block:.65rem }
  .size-stick .wrap{ display:block }
}

.offers-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:1.25rem clamp(2rem,5vw,4.5rem); align-items:end;
  margin-bottom:clamp(1.75rem,3.2vw,2.75rem)
}
.offers-head .label{ margin-bottom:1rem }
.offers-head .lead{ margin:0; max-width:42ch }
.offers-head .tlink{ display:flex; width:max-content; margin-top:1.15rem }
.offers{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line)
}
.offer{
  position:relative; display:flex; min-width:0; min-height:21rem; overflow:hidden;
  padding:0; color:inherit; background:var(--bg)
}
.offer-media{ position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .55s var(--e) }
.offer-media img{ width:100%; height:100%; object-fit:cover }
.offer-media::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(18,18,17,.38) 0%,rgba(18,18,17,.12) 42%,rgba(18,18,17,.86) 100%) }
.offer-body{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:.55rem;
  width:100%; min-width:0; padding:1.55rem 1.4rem 1.35rem
}
.offer-k{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.45rem .7rem;
  font-size:.75rem; font-weight:400; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint) }
.offer-row{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.45rem .7rem }
.offer h3{ margin:0; min-width:0 }
.offer .price{ margin:0; flex:none; white-space:nowrap }
.offer .price .v{ font-size:clamp(1.45rem,1.9vw,1.85rem) }
.offer .price .cur{ font-size:1.05rem }
.offer-sum{ margin:0; font-size:.875rem; font-weight:300; line-height:1.45; color:var(--muted) }
.offer-tag{
  font-size:.6875rem; font-weight:400; font-style:normal; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)
}
.offer-go{ margin-top:auto; padding-top:1.15rem;
  font-size:.9375rem; font-weight:400; display:inline-flex; gap:.4rem; align-items:center }
@media (hover:hover) and (pointer:fine){
  .offer:hover .offer-media,.offer:focus-visible .offer-media,
  .js .offer.snap.in:hover .offer-media,.js .offer.snap.in:focus-visible .offer-media{ opacity:1 }
  .offer:hover .arw,.offer:focus-visible .arw{ transform:translateX(4px) }
  .offer:hover,.offer:focus-visible{ color:#fff }
  .offer:hover .offer-k,.offer:hover .offer-sum,.offer:hover .offer-tag,
  .offer:hover .offer-go,.offer:hover .price .ab,
  .offer:focus-visible .offer-k,.offer:focus-visible .offer-sum,
  .offer:focus-visible .offer-tag,.offer:focus-visible .offer-go,
  .offer:focus-visible .price .ab{ color:rgba(255,255,255,.72) }
  .offer:hover h3,.offer:hover .price .v,.offer:hover .price .cur,
  .offer:focus-visible h3,.offer:focus-visible .price .v,
  .offer:focus-visible .price .cur{ color:#fff }
}
@media (prefers-reduced-motion:reduce){
  .offer-media{ transition:none }
}
@media (max-width:860px){
  .offers-head{ grid-template-columns:1fr; align-items:start; margin-bottom:1.5rem }
}
@media (max-width:820px){
  .offers-head .lead{ max-width:none }
  .offers-head .tlink{ margin-top:.85rem }
  .offers{
    display:flex; flex-direction:column; gap:0; background:none; border:0;
    border-top:1px solid var(--line);
    margin-inline:calc(-1 * max(var(--gutter),var(--safe-l))) calc(-1 * max(var(--gutter),var(--safe-r)))
  }
  .offer{
    display:grid; grid-template-columns:6.35rem minmax(0,1fr);
    min-height:0; background:transparent; border-bottom:1px solid var(--line)
  }
  .offer-media{ position:relative; opacity:1; min-height:6.6rem }
  .offer-media::after{ display:none }
  .offer-body{
    padding:.95rem max(var(--gutter),var(--safe-r)) .95rem 1rem; gap:.18rem
  }
  .offer-go{ padding-top:.4rem; margin-top:.1rem; font-size:.875rem }
  .offer .price .v{ font-size:1.2rem }
  .offer .price .cur{ font-size:.9rem }
}

.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);
  scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 1.1rem) }
.pkg:target{ box-shadow:inset 3px 0 0 var(--fg) }
.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 input[type="date"]{ min-height:3.15rem; color-scheme:light }
.f input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.45; cursor:pointer }

.date-pick{ position:relative }
.date-pick.is-on input[type="date"]{
  position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden;
  clip:rect(0,0,0,0); opacity:0; pointer-events:none }
.date-pick-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem; min-height:3.15rem; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:0; font:inherit; font-size:1rem; font-weight:300;
  text-align:left; cursor:pointer; transition:border-color .22s }
.date-pick-btn:not(.has-val) .date-pick-txt{ color:var(--faint) }
.date-pick-btn:focus,.date-pick-btn:focus-visible,.date-pick.is-open .date-pick-btn{
  outline:none; border-color:var(--fg) }
.date-pick-ico{ display:block; width:1.1rem; height:1.1rem; flex:none; color:var(--muted) }
.date-pick-ico svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

.date-cal-scrim{ display:none }
.date-cal{
  position:absolute; left:0; right:auto; top:calc(100% + 7px); z-index:24;
  width:min(100%,22.5rem);
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  padding:1.1rem 1.1rem 1rem; box-shadow:0 18px 40px rgba(18,18,17,.08) }
.date-cal-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:1rem }
.date-cal-mo{ font-size:1rem; font-weight:500; letter-spacing:-.02em; margin:0; text-align:center;
  flex:1; min-width:0 }
.date-cal-nav{
  width:2.5rem; height:2.5rem; flex:none; border:1px solid var(--line); background:transparent;
  color:var(--fg); cursor:pointer; display:grid; place-items:center; padding:0 }
.date-cal-nav:hover,.date-cal-nav:focus-visible{ border-color:var(--fg); outline:none }
.date-cal-nav svg{ width:.85rem; height:.85rem; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.date-cal-wk{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.15rem;
  margin-bottom:.45rem }
.date-cal-wk span{
  font-size:.6875rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); text-align:center; padding:.35rem 0 }
.date-cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.15rem }
.date-cal-empty{ min-height:2.5rem }
.date-cal-d{
  min-height:2.5rem; border:1px solid transparent; background:transparent; color:var(--fg);
  font:inherit; font-size:.9375rem; font-weight:400; cursor:pointer; padding:0 }
.date-cal-d:hover:not(:disabled),.date-cal-d:focus-visible{ border-color:var(--line); outline:none }
.date-cal-d.is-today{ border-color:var(--fg) }
.date-cal-d.is-on,.date-cal-d.is-on.is-today{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.date-cal-d:disabled{ color:var(--faint); cursor:default }
.date-cal-foot{ display:flex; justify-content:space-between; gap:1rem; margin-top:1rem;
  padding-top:.85rem; border-top:1px solid var(--line) }
.date-cal-act{
  background:none; border:0; padding:0; color:var(--muted); cursor:pointer;
  font-size:.75rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase }
.date-cal-act:hover,.date-cal-act:focus-visible{ color:var(--fg); outline:none }

@media (max-width:720px){
  html.date-cal-open,html.date-cal-open body{ overflow:hidden }
  .date-cal-scrim{ display:block; position:fixed; inset:0; z-index:94;
    background:rgba(18,18,17,.42) }
  .date-cal{
    position:fixed; left:0; right:0; top:auto; bottom:0; z-index:95; width:auto;
    padding:1.25rem max(var(--gutter),var(--safe-l)) calc(1.15rem + var(--safe-b)) max(var(--gutter),var(--safe-r));
    box-shadow:none; border:0; border-top:1px solid var(--line) }
  .date-cal-empty,.date-cal-d{ min-height:2.85rem }
  .date-cal-nav{ width:2.75rem; height:2.75rem }
}
.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,.f.err .date-pick-btn{ 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 + .consent{ margin-top:1.25rem }
#addrWrap{ margin-top:1rem }
.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:grid; grid-template-columns:minmax(0,1.2fr) minmax(17rem,.8fr);
  grid-template-areas:"main side" "act side";
  gap:clamp(1.35rem,3vw,2.15rem) clamp(2rem,4.2vw,3.75rem); align-items:stretch }
.sent-main{ grid-area:main }
.sent-side{ grid-area:side }
.sent-act{ grid-area:act }
@media (max-width:860px){
  .sent.on{ grid-template-columns:1fr; grid-template-areas:"main" "side" "act"; gap:1.75rem }
}
.wiz-wrap.is-sent{ grid-template-columns:1fr }
.wiz-wrap.is-sent .aside{ display:none }
.wiz-wrap.is-sent .form-card{
  padding:clamp(1.75rem,3.6vw,3.15rem) clamp(1.4rem,3.2vw,3rem);
  scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 1rem) }
#sumHome{ display:contents }

.sent-h{ font-size:clamp(1.875rem,3.4vw,2.75rem); font-weight:600; letter-spacing:-.045em;
  line-height:1.05; margin-bottom:.85rem }
.sent-lead{ font-size:1.0625rem; font-weight:300; line-height:1.6; color:var(--muted);
  max-width:44ch; margin-bottom:2.15rem }
.sent-lead strong{ font-weight:500; color:var(--fg); white-space:nowrap }
.sent-next{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.sent-next li{ display:grid; grid-template-columns:2.35rem minmax(0,1fr);
  gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--line) }
.sent-next .n{ font-size:.75rem; font-weight:400; letter-spacing:.1em;
  color:var(--faint); padding-top:.28rem }
.sent-next b{ display:block; font-size:1rem; font-weight:500; letter-spacing:-.015em }
.sent-next p{ margin:.28rem 0 0; font-size:.9375rem; font-weight:300;
  line-height:1.6; color:var(--muted) }
.sent-act{ display:flex; flex-wrap:wrap; align-items:center;
  gap:1.1rem 1.6rem; margin-top:.35rem }
.sent-again{ background:none; border:0; border-radius:0; cursor:pointer; font:inherit }
.sent-side .aside-card{ height:100% }
.sent-when{ font-size:.6875rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); margin:-.2rem 0 1.15rem }

.sent.on .sent-h,
.sent.on .sent-lead,
.sent.on .sent-next,
.sent.on .sent-act,
.sent.on .sent-side{ animation:sent-rise .72s var(--e) both }
.sent.on .sent-h{ animation-delay:.06s }
.sent.on .sent-lead{ animation-delay:.2s }
.sent.on .sent-next{ animation-delay:.28s }
.sent.on .sent-act{ animation-delay:.4s }
.sent.on .sent-side{ animation-delay:.18s }
@keyframes sent-rise{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .sent.on .sent-h,
  .sent.on .sent-lead,
  .sent.on .sent-next,
  .sent.on .sent-act,
  .sent.on .sent-side{ 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 .5rem; 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:.28rem }
.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:.35rem; margin-top:.15rem }
.f-social a{ width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border:0; border-radius:50%; color:var(--muted); background-color:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s var(--e), background-color .25s var(--e) }
@media (hover:hover) and (pointer:fine){
  .f-social a:hover{ background-color:#fff; color:var(--ink) }
}
.f-social a:focus-visible{ background-color:#fff; color:var(--ink); outline:none }
.f-social svg{ width:.95rem; height:.95rem; 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) }
.f-claim{ margin:1.5rem 0 0; font-size:.875rem; font-weight:300; line-height:1.65;
  color:var(--muted); max-width:36ch }
@media (max-width:1000px){
  .f-top{ grid-template-columns:1fr 1fr }
  .f-brand{ grid-column:1/-1; margin-bottom:.65rem }
}
@media (max-width:820px){
  .f-top{ grid-template-columns:1fr 1fr; text-align:center; gap:1.75rem 1.15rem }
  .f-brand,.f-act{ grid-column:1/-1; width:100% }
  .f-brand{ margin-bottom:.85rem }
  .f-brand .logo{ justify-content:center }
  .f-claim{ margin:1.5rem auto 0; text-align:center }
  .f-col{ width:100% }
  .f-col h5{ margin-bottom:.38rem }
  .f-col ul{ gap:.08rem }
  .f-col ul a{ display:flex; align-items:center; justify-content:center; min-height:2.15rem }
  .f-social{ justify-content:center }
  .f-social a{ width:2.75rem; height:2.75rem }
  .f-bot{ flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:.45rem 1.25rem }
  .f-bot nav{ gap:1.1rem; justify-content:center }
  .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
   ========================================================================== */
.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-r{ gap:.5rem }
  .logo span{ display:none }
  .svc{ gap:1.45rem .7rem }
  .svc > a,.svc-tile > a{ padding-top:1.1rem }
  .svc-media{ margin-bottom:.9rem; aspect-ratio:3/4 }
  .svc-tag{ left:.55rem; top:.55rem; padding:.28rem .5rem; font-size:.5625rem }
  .svc-body h3{ font-size:1.02rem; margin-bottom:.35rem }
  .svc-body > p,.svc-list{ display:none }
  .svc-foot{ padding-top:.85rem }
  .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 }
  .offer{ grid-template-columns:5.65rem minmax(0,1fr) }
  .offer-media{ min-height:6.15rem }
  .offer-body{ padding:.85rem max(var(--gutter),var(--safe-r)) .85rem .9rem }
  .offer h3{ font-size:1.05rem }
  .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 }
  .hero-cta .btn,.hero-cta .btn-lg{ min-height:2.75rem }
  .ba-lbl{ bottom:.7rem; padding:.3rem .55rem }
  .ba-lbl.l{ left:.7rem } .ba-lbl.r{ right:.7rem }
  .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){
  .hero-rail b{ font-size:1.02rem }
  #hdr .logo b{ font-size:.98rem }
}

/* Vergleichstabelle: auf dem Handy stapeln statt 576px-Querscroll */
@media (max-width:860px){
  .matrix-wrap{
    overflow:visible;
    margin-right:0;
    padding-right:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  .matrix-wrap::after{ display:none; content:none }
  .matrix{
    min-width:0;
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  .matrix thead{ display:none }
  .matrix tbody,.matrix tr,.matrix th,.matrix td{
    display:block; width:100%; max-width:100%;
  }
  .matrix th,.matrix td{ padding:0; text-align:left }
  .matrix tbody tr{
    padding:1.15rem 0;
    border-bottom:1px solid var(--line);
  }
  .matrix tbody tr:first-child{ padding-top:0 }
  .matrix tbody tr:last-child{ border-bottom:0 }
  .matrix tbody th{
    position:static;
    width:100%;
    background:none;
    box-shadow:none;
    font-size:1rem;
    font-weight:500;
    letter-spacing:-.015em;
    color:var(--fg);
    padding:0 0 .65rem;
  }
  .matrix tbody td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding:.28rem 0;
    border:0;
    text-align:left;
    font-size:.9375rem;
  }
  .matrix tbody td::before{
    font-size:.6875rem;
    font-weight:400;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--faint);
  }
  .matrix tbody td:nth-child(2)::before{ content:"Basic Innen" }
  .matrix tbody td:nth-child(3)::before{ content:"Premium Innen" }
  .matrix tbody td:nth-child(4)::before{ content:"One for all Basic" }
  .matrix tbody td:nth-child(5)::before{ content:"One for all Premium" }
}

@media (max-width:430px){
  :root{ --gutter:1.1rem }
  #hdr .bar{ gap:.4rem }
  .hero-rail span{ letter-spacing:.06em; overflow-wrap:anywhere }
}

/* Handy: Leistungsblock — Link oben rechts, eine Linie, Kacheln ohne Striche. */
@media (max-width:820px){
  #bereiche .sec-head.split{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:start; column-gap:.75rem; row-gap:0;
    max-width:none; margin-bottom:1.15rem; padding-bottom:1.05rem;
    border-bottom:1px solid var(--line) }
  #bereiche .sec-head.split > div{ display:contents }
  #bereiche .sec-head.split .label{ grid-column:1; grid-row:1; margin-bottom:.55rem }
  #bereiche .sec-head.split h2{ grid-column:1; grid-row:2 }
  #bereiche .sec-head.split .tlink{
    grid-column:2; grid-row:2; align-self:start; justify-self:end;
    margin-top:.2rem; padding-bottom:0; border-bottom:0;
    font-size:.6875rem; font-weight:400; letter-spacing:.06em;
    text-transform:uppercase; white-space:nowrap; color:var(--muted) }
  #bereiche .sec-head.split .tlink .arw{ font-size:.8em }
  #bereiche .svc{ gap:1.25rem .65rem }
  #bereiche .svc > a,#bereiche .svc-tile > a{ border-top:0; padding-top:0 }
  #bereiche .svc-media{ margin-bottom:.65rem; aspect-ratio:3/4 }
  #bereiche .svc-body h3{
    margin-bottom:.38rem; padding-right:0; font-size:1rem }
  #bereiche .svc-info{
    display:grid; place-items:center;
    position:absolute; top:1rem; right:1rem; bottom:auto; z-index:6;
    margin-top:0; appearance:none; -webkit-appearance:none;
    width:1.35rem; height:1.35rem; padding:0;
    border:1px solid rgba(231,231,231,.32); border-radius:50%;
    background:rgba(18,18,17,.7); color:rgba(231,231,231,.9);
    font-family:Georgia,"Times New Roman",serif; font-size:.72rem;
    font-style:italic; font-weight:400; line-height:1; cursor:pointer }
  #bereiche .svc-info:hover,#bereiche .svc-tile.is-open .svc-info{
    color:#fff; border-color:rgba(231,231,231,.5); background:rgba(18,18,17,.82) }
  #bereiche .svc-pop{
    display:none; position:absolute; left:0; right:0; top:0; z-index:5;
    aspect-ratio:3/4; overflow:auto; box-sizing:border-box;
    padding:.85rem .8rem; background:rgba(18,18,17,.88);
    border:1px solid var(--line) }
  #bereiche .svc-tile.is-open .svc-pop{ display:block }
  #bereiche .svc-pop p{
    display:block; margin:0 0 .7rem; font-size:.8125rem; font-weight:300;
    line-height:1.5; color:var(--muted) }
  #bereiche .svc-pop .svc-list{
    display:grid; gap:.45rem; margin:0; padding:0 }
  #bereiche .svc-pop .svc-list li{
    font-size:.75rem; font-weight:300; line-height:1.45; color:var(--muted) }
  #bereiche .svc-foot{
    border-top:0; padding-top:0; margin-top:0;
    justify-content:flex-start; align-items:center; gap:.5rem }
  #bereiche .svc-price{
    display:block; font-size:.6875rem; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted) }
  #bereiche .svc-foot--ask .svc-price{ font-size:0; letter-spacing:0 }
  #bereiche .svc-foot--ask .svc-price::before{
    content:"Anfragen"; font-size:.6875rem; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted) }
  #bereiche .svc-go{ display:none }
  #bereiche .svc-arr{
    display:inline-block; margin:0 0 0 .32em; border:0; padding:0;
    font-size:1em; font-weight:inherit; line-height:1;
    color:inherit; background:none; vertical-align:baseline;
    transition:transform .25s var(--e) }
  #bereiche .svc-tile:hover .svc-arr,
  #bereiche .svc-tile > a:focus-visible .svc-arr{ transform:translateX(3px) }
}