/* Dörr Explore — Gestaltung 2. Runde (9.10.2026)
   Wechsel aus dunklen Erlebnisflächen und hellen Produktflächen (Kiesel).
   Petrol = Konfigurator, Hellgelb = Aktion und Schnellzugriff, Hellblau = Interaktion. */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("schrift/poppins-regular.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("schrift/poppins-medium.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("schrift/poppins-semibold.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("schrift/poppins-bold.woff2") format("woff2")}

:root{
  --nacht:#011A24;
  --tief:#02222E;
  --petrol:#06465E;
  --hellblau:#83D0F5;
  --hellgelb:#FFE63F;
  --kiesel:#ECE8E1;
  --kiesel-tief:#E1DCD2;
  /* heller Grund und Kacheln darauf: an einer Stelle umschaltbar */
  --hell-grund:#E7F1F6;   /* Eisblau, gewählt nach Vergleich mit Kiesel, Weiß, Nebelgrau */
  --hell-kachel:#fff;
  --s:"Poppins",-apple-system,"Segoe UI",Roboto,sans-serif;
  --rand:clamp(1.25rem,4vw,3.5rem);
  --r:1.5rem;
  --r-klein:1rem;
  --weich:cubic-bezier(.22,1,.36,1);
  /* Farben im dunklen Grundzustand, helle Flächen überschreiben sie */
  --vg:#fff;
  --nebel:rgba(255,255,255,.74);
  --dunst:rgba(255,255,255,.58);
  --kante:rgba(255,255,255,.16);
  --glas:rgba(255,255,255,.07);
  --akzent:var(--hellblau);
  --sperre:.01em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{margin:0;background:var(--nacht);color:var(--vg);font-family:var(--s);font-size:1.0625rem;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menue-offen{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--hellblau);outline-offset:3px;border-radius:8px}
.huelle{max-width:84rem;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}
.sprung{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--hellblau);color:var(--tief);
  padding:.6rem 1rem;border-radius:999px;font-weight:700;text-decoration:none}
.sprung:focus{top:1rem}
.tab{font-variant-numeric:tabular-nums}

/* ---------- Flächen ---------- */
.hell{background:var(--hell-grund);color:var(--tief);
  --vg:var(--tief);--nebel:rgba(2,34,46,.8);--dunst:rgba(2,34,46,.7);--kante:rgba(2,34,46,.16);
  --glas:var(--hell-kachel);--akzent:var(--petrol)}
.hell :focus-visible{outline-color:var(--petrol)}
.petrol{background:var(--petrol);--nebel:rgba(255,255,255,.84);--dunst:rgba(255,255,255,.7);
  --kante:rgba(255,255,255,.22);--glas:rgba(255,255,255,.09)}
.abschnitt{padding-top:clamp(4.5rem,9vw,7.5rem);padding-bottom:clamp(4.5rem,9vw,7.5rem)}

/* ---------- Schrift ---------- */
/* Versal-Headlines: mehr Laufweite und Zeilenabstand, damit nichts gestaucht wirkt */
main h2{font-size:clamp(2rem,4.2vw,3.4rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1.04}
.etikett{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--akzent);line-height:1.4;margin-bottom:.9rem}
.lead{color:var(--nebel);font-size:1.125rem;max-width:46ch}
.kopfzeile{display:grid;gap:1rem 4rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
@media(min-width:62rem){.kopfzeile{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--hellblau);color:var(--tief);
  border:1.5px solid transparent;border-radius:999px;padding:.9rem 1.8rem;font-weight:700;font-size:.9375rem;
  line-height:1.2;text-decoration:none;transition:transform .18s var(--weich),background .18s,color .18s,border-color .18s}
.knopf:hover{transform:translateY(-2px);background:#fff}
.knopf--glas{background:transparent;color:var(--vg);border-color:rgba(255,255,255,.55)}
.knopf--glas:hover{background:#fff;color:var(--tief);border-color:#fff}
.hell .knopf{background:var(--tief);color:#fff}
.hell .knopf:hover{background:var(--petrol)}
.hell .knopf--glas{background:transparent;color:var(--tief);border-color:rgba(2,34,46,.4)}
.hell .knopf--glas:hover{background:var(--tief);color:#fff;border-color:var(--tief)}
.knopf--dunkel,.hell .knopf--dunkel{background:var(--tief);color:#fff}
.knopf--dunkel:hover,.hell .knopf--dunkel:hover{background:var(--nacht);color:#fff}
.knopf--gelb{background:var(--hellgelb);color:var(--tief)}
.knopf--gelb:hover{background:#fff}
.knopfreihe{display:flex;gap:.6rem;flex-wrap:wrap}
.knopf__symbol{width:1rem;height:1rem}
@media(max-width:30rem){.knopf{padding:.85rem 1.4rem}}

/* =================================================================== Kopf */
.insel{position:fixed;left:50%;top:.85rem;transform:translateX(-50%);z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;
  width:min(44rem,calc(100vw - 1.5rem));padding:.45rem .5rem .45rem .45rem;
  /* immer schwarz, passend zum Ausklappmenü, unabhängig vom Hintergrund (Laura) */
  background:#000;border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.35);color:#fff}
.insel__menue{justify-self:start;display:inline-flex;align-items:center;gap:.6rem;background:transparent;border:0;
  border-radius:999px;padding:.5rem .95rem .5rem .75rem;font-size:.875rem;font-weight:600;color:#fff;
  transition:background .18s}
.insel__menue:hover{background:rgba(255,255,255,.1)}
.insel__menue svg{width:1.25rem;height:1.25rem}
.insel__logo{justify-self:center;line-height:0;border-radius:6px}
.insel__logo img{width:8rem}
/* Termin spiegelt den Menüknopf: Text mit Symbol, keine zweite Pille in der Navigation (Laura) */
.insel__cta{justify-self:end;display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;
  padding:.5rem .75rem .5rem .95rem;font-size:.875rem;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;
  transition:background .18s}
.insel__cta svg{width:1.25rem;height:1.25rem;color:var(--hellblau)}
.insel__cta:hover{background:rgba(255,255,255,.1)}
@media(max-width:34rem){
  .insel{gap:.4rem}
  .insel__logo img{width:6.6rem}
  .insel__menue span,.insel__zusatz{display:none}
  .insel__menue{padding:.55rem .65rem}
  .insel__cta{padding:.55rem .65rem .55rem .75rem;gap:.45rem}
}

/* ---------- Menü: klappt direkt unter der Navigationspille auf, nichts springt ---------- */
.menue__schleier{position:fixed;inset:0;z-index:49;background:rgba(1,12,18,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
.menue__schleier[hidden]{display:none}
.menue{position:absolute;left:0;right:0;top:calc(100% + .55rem);background:#000;color:#fff;border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.45);padding:.6rem clamp(1.1rem,3vw,2rem) 1.25rem;
  max-height:calc(100vh - 6.5rem);max-height:calc(100svh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-.6rem);
  transition:opacity .25s ease,transform .3s var(--weich),visibility 0s .3s}
.menue[data-offen]{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s var(--weich)}
.menue__liste{list-style:none;margin:0;padding:0}
.menue__liste > li{border-bottom:1px solid rgba(255,255,255,.12)}
.menue__liste > li:last-child{border-bottom:0}
.menue__punkt{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;padding:.8rem 0;
  background:none;border:0;text-align:left;color:#fff;text-decoration:none;
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;letter-spacing:var(--sperre);line-height:1.25;transition:color .18s}
.menue__punkt:hover,.menue__punkt[aria-expanded=true]{color:var(--hellblau)}
.menue__punkt svg{width:1.25rem;height:1.25rem;flex:none;transition:transform .25s var(--weich)}
.menue__punkt[aria-expanded=true] svg{transform:rotate(90deg)}
.menue__unter{display:none;padding:0 0 1rem}
.menue__punkt[aria-expanded=true] + .menue__unter{display:block}
@media(min-width:40rem){
  #menue-modelle{columns:2;column-gap:2rem}
  #menue-modelle .menue__gruppe{break-after:avoid}
  #menue-modelle ul{break-inside:avoid}
}
.menue__gruppe{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);
  margin:.8rem 0 .15rem}
.menue__unter ul{list-style:none;margin:0;padding:0}
.menue__unter a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.35rem 0;
  color:rgba(255,255,255,.88);text-decoration:none;font-size:1rem;font-weight:500}
.menue__unter a span{font-size:.8125rem;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.menue__unter a:hover{color:var(--hellblau)}
.menue__fuss{margin-top:.75rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;
  gap:.5rem 1.5rem;font-size:.875rem}
.menue__fuss a{color:rgba(255,255,255,.72);text-decoration:none}
.menue__fuss a:hover{color:#fff;text-decoration:underline}
.insel__menue svg[hidden]{display:none}
body.menue-offen{overflow:hidden}

/* ---------- Schnellzugriff rechts (gelb) ---------- */
.schnell{position:fixed;right:clamp(.75rem,1.6vw,1.5rem);top:50%;transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;gap:.7rem}
body.menue-offen .schnell{display:none}
.schnell__ort{position:relative}
.schnell__knopf{position:relative;width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center;
  background:var(--hellgelb);color:var(--tief);border:0;padding:0;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s var(--weich)}
.schnell__knopf:hover{transform:scale(1.07)}
.schnell__knopf:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:50%}
.schnell__knopf svg{width:1.85rem;height:1.85rem}
.schnell__text{position:absolute;right:calc(100% + .6rem);top:50%;transform:translate(.4rem,-50%);opacity:0;
  pointer-events:none;background:var(--tief);color:#fff;border-radius:999px;padding:.4rem .85rem;
  font-size:.8125rem;font-weight:600;white-space:nowrap;transition:opacity .18s,transform .18s var(--weich)}
.schnell__knopf:hover .schnell__text,.schnell__knopf:focus-visible .schnell__text{opacity:1;transform:translate(0,-50%)}
.schnell__knopf[aria-expanded=true] .schnell__text{opacity:0}
.schnell__wahl{position:absolute;right:calc(100% + .7rem);top:50%;transform:translateY(-50%);display:none;
  background:#000;border-radius:var(--r-klein);padding:.45rem;min-width:13rem;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.schnell__wahl[data-offen]{display:grid}
.schnell__wahl a{display:block;color:#fff;text-decoration:none;padding:.65rem .85rem;border-radius:.65rem;
  font-size:.9375rem;font-weight:600}
.schnell__wahl a span{display:block;font-size:.75rem;font-weight:400;color:rgba(255,255,255,.65)}
.schnell__wahl a:hover{background:rgba(255,255,255,.1)}
/* Handy: feste Leiste am unteren Rand mit Beschriftung, verdeckt keinen Text */
@media(max-width:48rem){
  body{padding-bottom:4.4rem}
  .schnell{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;gap:0;
    background:rgba(1,26,36,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.14);padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom))}
  .schnell > *{flex:1}
  .schnell__knopf{width:100%;height:auto;line-height:1.3;border-radius:.75rem;background:transparent;color:#fff;box-shadow:none;
    display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.2rem 0}
  .schnell__knopf:hover{transform:none}
  .schnell__knopf svg{width:2.35rem;height:2.35rem;padding:.3rem;border-radius:50%;background:var(--hellgelb);color:var(--tief)}
  .schnell__text{position:static;transform:none;opacity:1;background:none;padding:0;font-size:.6875rem;font-weight:600;
    color:rgba(255,255,255,.85)}
  .schnell__knopf[aria-expanded=true] .schnell__text{opacity:1}
  .schnell__wahl{top:auto;bottom:calc(100% + .6rem);left:50%;right:auto;transform:translateX(-50%)}
  .schnell__ort{position:relative}
}

/* =================================================================== Startseite */

/* ---------- Auftakt: Fotos über die volle Breite ---------- */
.held{position:relative;height:100vh;height:100svh;min-height:34rem;max-height:62rem;overflow:hidden;
  background:var(--nacht);color:#fff}
.held__folie{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.held__folie.an{opacity:1}
.held__folie img{width:100%;height:100%;object-fit:cover}
/* nur unten und oben ein Verlauf, die Mitte mit den Fahrzeugen bleibt frei */
.held::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,26,36,.55) 0%,rgba(1,26,36,0) 20%),
             linear-gradient(90deg,rgba(1,26,36,.6) 0%,rgba(1,26,36,.25) 32%,rgba(1,26,36,0) 55%),
             linear-gradient(0deg,rgba(1,26,36,.92) 0%,rgba(1,26,36,.6) 26%,rgba(1,26,36,0) 55%)}
.held__inhalt{position:absolute;left:0;right:0;bottom:clamp(4.5rem,10vh,6.5rem);z-index:2}
.held h1{font-size:clamp(3rem,7.6vw,7.25rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:.98}
.held h1 span{color:var(--hellblau)}
.held__lead{max-width:44ch;color:rgba(255,255,255,.9);margin-top:1.25rem;font-size:1.125rem}
.held .knopfreihe{margin-top:1.75rem}
.held__steuerung{position:absolute;left:0;right:0;bottom:1.5rem;z-index:2;display:flex;justify-content:flex-end;
  align-items:center;gap:.5rem}
.held__punkt{width:2.25rem;height:1.5rem;padding:0;border:0;background:none;display:grid;place-items:center}
.held__punkt::before{content:"";width:100%;height:3px;border-radius:999px;background:rgba(255,255,255,.4);
  transition:background .3s}
.held__punkt[aria-current=true]::before{background:#fff}
.held__pause{width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;
  display:grid;place-items:center;padding:0;margin-left:.35rem;color:#fff}
.held__pause svg{width:.85rem;height:.85rem}
@media(max-width:48rem){
  /* Handy (Laura): der Bereich wächst mit dem Text, die Headline beginnt immer unter der Navigation,
     das Foto füllt die ganze Fläche */
  .held{max-height:none;height:auto;min-height:calc(100svh - 5rem);display:flex;flex-direction:column;justify-content:flex-end}
  .held__inhalt{position:relative;bottom:auto;padding-top:6.25rem;padding-bottom:4.5rem}
  .held h1{font-size:clamp(2.5rem,12.5vw,4.25rem)}
  .held .knopfreihe{gap:.5rem}
  .held .knopf{padding:.8rem 1.05rem}
  .held__lead{font-size:1rem}
  .held__steuerung{justify-content:flex-start;bottom:1.25rem}
}

/* ---------- Baureihe (hell) ---------- */
.reihe{max-width:86rem;margin:0 auto;padding:0 max(0rem,calc(var(--rand) - 1.5rem))}
.reihe__rollbar{overflow-x:auto;overscroll-behavior-x:contain;padding:1rem clamp(.75rem,2.5vw,2rem) 6rem;
  scrollbar-width:thin;scrollbar-color:rgba(2,34,46,.3) transparent}
.reihe__rollbar:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.reihe__buehne{position:relative;min-width:62rem}
.reihe__modell{position:absolute;display:block;color:var(--vg);text-decoration:none;border-radius:1rem}
.reihe__modell .frei{width:100%;height:auto}
.reihe__name{position:absolute;left:50%;transform:translateX(-50%);margin-top:1rem;display:flex;flex-direction:column;
  align-items:center;white-space:nowrap;line-height:1.35}
.reihe__name b{font-size:1rem;transition:color .18s}
.reihe__name span{font-size:.8125rem;color:var(--nebel);font-variant-numeric:tabular-nums}
.reihe__modell:hover .reihe__name b,.reihe__modell:focus-visible .reihe__name b{color:var(--petrol);text-decoration:underline}
.reihe__aktion{font-style:normal;margin-top:.3rem;background:var(--hellgelb);color:var(--tief);border-radius:999px;
  padding:.05rem .55rem;font-size:.6875rem;font-weight:700}
.eckdaten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--kante)}
@media(min-width:56rem){.eckdaten{grid-template-columns:repeat(4,1fr)}}
.eckdaten li{padding:1.5rem 1.25rem 0 0;display:flex;flex-direction:column;gap:.35rem}
@media(min-width:56rem){.eckdaten li + li{border-left:1px solid var(--kante);padding-left:1.5rem}}
.eckdaten b{font-size:clamp(2rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.eckdaten span{color:var(--nebel);font-size:.9375rem;line-height:1.45}

/* ---------- Modellbühne: freigestellt vor dem Kompass, ohne Kasten ---------- */
.buehne{position:relative;background:var(--nacht)}
/* nicht mehr festgeklebt: die Seite scrollt normal weiter (Laura) */
.buehne__fest{position:relative;height:100vh;height:100svh;min-height:44rem;max-height:62rem;display:flex;
  align-items:center;overflow:hidden;touch-action:pan-y}
.buehne__fest{container-type:inline-size}
/* Breite endet 1,5rem vor der Textspalte (gleiche Rechnung wie .huelle und .buehne__wechsel), Höhe unabhängig davon */
.buehne__podest{position:absolute;left:calc(var(--rand) * .5);top:calc(50% - 1rem);transform:translateY(-50%);
  width:min(58rem,60cqw,calc(100cqw - max(0rem,(100cqw - 84rem) / 2) - var(--rand) * 1.5 - clamp(0rem,3vw,2.5rem)
    - min(27rem,(min(100cqw,84rem) - 2 * var(--rand)) * .38) - 1.5rem));
  height:min(46.4rem,48cqw,100svh - 12rem)}
.buehne__podest::before,.kompass-buehne::before{content:"";position:absolute;left:30%;top:4%;height:78%;aspect-ratio:1;
  background:url("logo/kompass-hellblau.svg") center/contain no-repeat}
.buehne__bild,.zusammen__bild,.mkopf__fahrzeug{position:absolute;left:50%;aspect-ratio:var(--r,1.5);max-width:96%;
  transform:translate(-50%,calc((1 - var(--boden,1)) * 100%))}
.buehne__bild{bottom:10%;height:calc(var(--h,1) * 88%);max-width:100%;opacity:0;transform-origin:50% 100%}
.buehne__bild.an{opacity:1}
/* Fahrzeugwechsel (Laura): das neue Fahrzeug fährt in Fahrtrichtung ein und bremst mit leichtem Nicken ab,
   das vorherige fährt hinaus. Rückwärts scrollen spiegelt die Bewegung. */
[data-richtung=vor] .buehne__bild.an{animation:einfahren-vor 1s cubic-bezier(.2,.8,.25,1) .12s both}
[data-richtung=zurueck] .buehne__bild.an{animation:einfahren-zurueck 1s cubic-bezier(.2,.8,.25,1) .12s both}
[data-richtung=vor] .buehne__bild.war{animation:ausfahren-vor .6s cubic-bezier(.55,0,.85,.35) both}
[data-richtung=zurueck] .buehne__bild.war{animation:ausfahren-zurueck .6s cubic-bezier(.55,0,.85,.35) both}
@keyframes einfahren-vor{
  0%{opacity:0;filter:blur(6px);transform:translate(-92%,calc((1 - var(--boden,1)) * 100%))}
  35%{opacity:1}
  72%{filter:blur(0);transform:translate(-48.5%,calc((1 - var(--boden,1)) * 100%)) rotate(.6deg)}
  100%{opacity:1;filter:blur(0);transform:translate(-50%,calc((1 - var(--boden,1)) * 100%)) rotate(0)}}
@keyframes einfahren-zurueck{
  0%{opacity:0;filter:blur(6px);transform:translate(-8%,calc((1 - var(--boden,1)) * 100%))}
  35%{opacity:1}
  72%{filter:blur(0);transform:translate(-51.5%,calc((1 - var(--boden,1)) * 100%)) rotate(-.5deg)}
  100%{opacity:1;filter:blur(0);transform:translate(-50%,calc((1 - var(--boden,1)) * 100%)) rotate(0)}}
@keyframes ausfahren-vor{
  0%{opacity:1;filter:blur(0);transform:translate(-50%,calc((1 - var(--boden,1)) * 100%))}
  100%{opacity:0;filter:blur(6px);transform:translate(-10%,calc((1 - var(--boden,1)) * 100%))}}
@keyframes ausfahren-zurueck{
  0%{opacity:1;filter:blur(0);transform:translate(-50%,calc((1 - var(--boden,1)) * 100%))}
  100%{opacity:0;filter:blur(6px);transform:translate(-90%,calc((1 - var(--boden,1)) * 100%))}}
/* Der Kompass dreht sich bei jedem Modell ein kleines Stück mit */
.buehne__podest::before{transform:rotate(var(--dreh,-15deg));transition:transform 1.2s var(--weich)}
@media(prefers-reduced-motion:reduce){
  .buehne__bild.an,.buehne__bild.war{animation:none}
  .buehne__bild{transition:opacity .3s}
  .buehne__podest::before{transition:none}
}
.frei{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.buehne__text{position:relative;width:100%;display:flex;justify-content:flex-end;margin-top:-3rem}
.buehne__wechsel{width:27rem;max-width:38%;margin-right:clamp(0rem,3vw,2.5rem)}
/* alle Stufen liegen übereinander, so bleibt die Höhe beim Wechsel gleich */
.buehne__wechsel{display:grid}
.buehne__stufe{grid-area:1/1;visibility:hidden}
.buehne__stufe.an{visibility:visible;animation:auf .55s var(--weich)}
@keyframes auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.buehne__oben{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.buehne__oben .etikett{margin:0}
.buehne__wechsel{container-type:inline-size}
.buehne h2{font-size:min(3.75rem,11.4cqw);white-space:nowrap;margin-top:.75rem}
.buehne__kurz{color:var(--nebel);margin-top:1rem;max-width:36ch}
.buehne__werte{display:flex;gap:1.25rem 2rem;margin-top:1.6rem;flex-wrap:wrap}
.buehne__wert b{display:block;font-size:1.5rem;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.buehne__wert span{display:block;font-size:.8125rem;color:var(--nebel)}
.buehne__knopf{margin-top:1.6rem}
/* Modellwahl gut sichtbar im Bild statt dünner Striche am Rand */
.buehne__tabs{position:absolute;left:0;right:0;bottom:clamp(1.25rem,4vh,2.5rem);z-index:3}
.buehne__tabs .huelle{display:flex;gap:.4rem}
.buehne__tab{position:relative;flex:1;min-width:0;background:none;border:0;border-top:3px solid rgba(255,255,255,.2);padding:.8rem 0 0;
  text-align:left;color:rgba(255,255,255,.62);font-size:.875rem;font-weight:600;line-height:1.3;
  transition:color .2s,border-color .2s}
.buehne__tab span{display:block;font-size:.75rem;font-weight:400;color:rgba(255,255,255,.55)}
.buehne__tab:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.buehne__tab[aria-current=true]{color:#fff;border-color:var(--hellblau)}
/* Fortschrittsbalken, solange der automatische Wechsel läuft */
[data-auto=an] .buehne__tab[aria-current=true]{border-color:rgba(255,255,255,.35)}
[data-auto=an] .buehne__tab[aria-current=true]::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;
  background:var(--hellblau);transform-origin:0 50%;animation:fortschritt 6.5s linear both}
@keyframes fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.buehne__pause{flex:none;align-self:flex-start;width:2rem;height:2rem;margin-top:.5rem;border-radius:50%;padding:0;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;display:grid;place-items:center}
.buehne__pause:hover{background:#fff;color:var(--tief)}
.buehne__pause svg{width:.8rem;height:.8rem}
@media(max-width:56rem){
  .buehne{--bildhoehe:min(58vw,34svh)}
  .buehne__fest{display:block;height:auto;min-height:0;max-height:none;padding-bottom:3rem}
  .buehne__tabs{top:5rem;bottom:auto}
  .buehne__tabs .huelle{overflow-x:auto;scrollbar-width:none}
  .buehne__tabs .huelle::-webkit-scrollbar{display:none}
  .buehne__tab{flex:none;padding-right:1rem}
  .buehne__tab span{display:none}
  .buehne__podest{left:var(--rand);right:var(--rand);top:8.25rem;transform:none;width:auto;height:var(--bildhoehe);
    aspect-ratio:auto;max-height:none}
  .buehne__bild{bottom:10%}
  .buehne__text{display:block;margin-top:0;padding-top:calc(8.5rem + var(--bildhoehe) + 1rem)}
  .buehne__wechsel{width:auto;max-width:none;margin-right:0}
  .buehne h2{margin-top:.4rem}
  .buehne__kurz{margin-top:.6rem;font-size:.9375rem}
  .buehne__werte{margin-top:.9rem;gap:.6rem 1.5rem}
  .buehne__wert b{font-size:1.2rem}
  .buehne__knopf{margin-top:1rem}
  .buehne__pause{margin-top:.45rem}
}
@media(max-height:35rem){
  .buehne__fest{position:relative;height:auto;min-height:0;max-height:none;display:block;overflow:visible}
  .buehne__podest,.buehne__tabs{display:none}
  .buehne__text{display:block;padding-top:2rem;margin-top:0}
  .buehne__wechsel{display:block;width:auto;max-width:none;margin-right:0}
  .buehne__stufe,.buehne__stufe.an{visibility:visible;animation:none;margin-bottom:3rem}
}

/* Herstellermarke */
.marke{display:inline-flex;align-items:center;height:1.65rem;background:#fff;color:var(--tief);border-radius:.4rem;
  padding:0 .55rem;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.marke img{height:1.05rem;width:auto;max-width:6.2rem;object-fit:contain}
.mkarte__kachel .marke img{height:auto;width:min(100%,7rem);max-width:none}

/* ---------- Erlebnisabholung auf der Startseite: Foto über die volle Breite ---------- */
.eband{position:relative;overflow:hidden;color:#fff;background:var(--nacht)}
.eband__bild{position:absolute;inset:0}
.eband__bild img{width:100%;height:100%;object-fit:cover}
/* seitlicher Verlauf: links Text, rechts bleibt das Foto frei */
.eband__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,26,36,.94) 0%,rgba(1,26,36,.82) 34%,rgba(1,26,36,.25) 66%,rgba(1,26,36,0) 100%)}
.eband__inhalt{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
@media(min-width:62rem){.eband__inhalt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:44rem}}
.eband h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.eband__lead{color:rgba(255,255,255,.88);margin-top:1.1rem;max-width:44ch}
.eband__ablauf{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.55rem 1.5rem}
@media(min-width:30rem){.eband__ablauf{grid-template-columns:1fr 1fr}}
.eband__ablauf li{display:flex;align-items:center;gap:.7rem;font-size:.9375rem;line-height:1.35}
.eband__nr{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--hellblau);color:var(--tief);font-size:.75rem;font-weight:700}
.eband__fein{font-size:.875rem;color:rgba(255,255,255,.8);margin:1.4rem 0 1.6rem}
.polaroids{position:relative;height:30rem}
.polaroids img{position:absolute;width:15rem;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.polaroids img:nth-child(1){right:4%;top:0;transform:rotate(6deg)}
.polaroids img:nth-child(2){right:36%;top:5.5rem;transform:rotate(-7deg)}
.polaroids img:nth-child(3){right:10%;top:12rem;transform:rotate(3deg)}
@media(max-width:62rem){
  .polaroids{height:auto;display:flex;justify-content:center;padding-bottom:1rem}
  .polaroids img{position:relative;width:min(30vw,11rem);right:auto!important;top:auto!important}
  .polaroids img + img{margin-left:-1.5rem}
}

/* ---------- Aktion (Hellgelb) ---------- */
.aktion__marke{display:inline-block;background:var(--hellgelb);color:var(--tief);border-radius:999px;
  padding:.2rem .7rem;font-size:.75rem;font-weight:700;letter-spacing:.02em;line-height:1.4}
.aktion__flaeche{background:var(--hellgelb);color:var(--tief);border-radius:var(--r);
  padding:clamp(1.75rem,4vw,3.25rem);display:grid;gap:2rem;position:relative;overflow:hidden}
@media(min-width:56rem){.aktion__flaeche{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end}}
.aktion__flaeche::before{content:"";position:absolute;right:-6%;top:-25%;height:150%;aspect-ratio:1;
  background:url("logo/kompass.svg") center/contain no-repeat;opacity:.07}
.aktion__text,.aktion__preis{position:relative}
.aktion .aktion__marke{background:var(--tief);color:var(--hellgelb)}
.aktion h2{font-size:clamp(2.4rem,6vw,4.75rem);line-height:1;margin-top:.9rem}
.aktion__lead{margin-top:1rem;font-weight:500;max-width:46ch}
.aktion__liste{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.5rem;max-width:52ch}
.aktion__liste li{display:grid;grid-template-columns:1.1rem 1fr;gap:.65rem;font-size:.9375rem;line-height:1.45}
.aktion__liste svg{width:1.1rem;height:1.1rem;margin-top:.15rem}
.aktion__statt{font-size:1.0625rem;font-weight:500}
.aktion__betrag{font-size:clamp(3rem,7vw,5rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:.2rem}
.aktion__vorteil{display:inline-block;margin-top:.75rem;background:var(--tief);color:var(--hellgelb);
  border-radius:999px;padding:.35rem .9rem;font-weight:700;font-size:.9375rem}
.aktion__preis .knopf{display:flex;margin-top:1.25rem}
.aktion__fein{font-size:.75rem;margin-top:.75rem;color:rgba(2,34,46,.8)}
.aktion :focus-visible{outline-color:var(--tief)}
.aktionshinweis{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--hellgelb);
  font-size:.875rem;font-weight:600;text-decoration:none}
.aktionshinweis::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--hellgelb)}
.aktionshinweis:hover{text-decoration:underline}

/* ---------- Ihr nächster Schritt: Kacheln ---------- */
.wege__raster{display:grid;gap:1rem}
@media(min-width:56rem){.wege__raster{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto}}
.weg{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(1.6rem,3vw,2.5rem);min-height:15rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;color:#fff;background:var(--nacht);
  --nebel:rgba(255,255,255,.8)}
.weg h3{font-size:clamp(1.75rem,3vw,2.6rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1.04}
.weg p{color:var(--nebel);max-width:34ch}
.weg .knopf{margin-top:auto}
.weg__label{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.weg--konf{background:var(--petrol);min-height:31rem}
@media(min-width:56rem){.weg--konf{grid-row:span 2}}
/* Fahrzeug groß und mittig vor dem Kompass, Knopf darunter (Laura) */
.weg--konf::before{content:"";position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);height:74%;aspect-ratio:1;
  background:url("logo/kompass-hellblau.svg") center/contain no-repeat;opacity:.16}
.weg__fahrzeug{position:relative;z-index:1;align-self:center;width:min(calc(100% + 1.5rem),38rem);margin:auto 0}
.weg__fahrzeug .frei{height:auto}
.weg--konf .knopf{position:relative;z-index:1;margin-top:.5rem}
/* Knöpfe in den Kacheln: eigene Farben, nicht die der hellen Fläche */
.hell .weg .knopf{background:var(--hellblau);color:var(--tief)}
.hell .weg .knopf:hover{background:#fff}
.hell .weg .knopf--glas{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hell .weg .knopf--glas:hover{background:#fff;color:var(--tief)}
.hell .weg--vergleich .knopf{background:var(--tief);color:#fff}
.hell .weg--vergleich .knopf:hover{background:var(--nacht)}
.weg--vergleich{background:var(--hellblau);color:var(--tief);--nebel:rgba(2,34,46,.82)}
.weg--vergleich .knopf{background:var(--tief);color:#fff}
.weg--vergleich .knopf:hover{background:var(--nacht)}
.orte-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .9rem}
.orte-chips a{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.35rem .8rem;font-size:.875rem;
  color:#fff;text-decoration:none;transition:background .18s,color .18s}
.orte-chips a:hover{background:#fff;color:var(--tief)}

/* ---------- Live erleben: Termine ---------- */
.termine-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:40rem){.termine-liste{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.termine-liste{grid-template-columns:repeat(4,1fr)}}
.termin{display:flex;flex-direction:column;gap:.45rem;border:1px solid var(--kante);border-radius:var(--r-klein);
  padding:1.3rem 1.3rem 1.4rem;background:var(--glas);height:100%}
.termin__datum{font-size:1.5rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.termin__name{font-weight:600;line-height:1.35}
.termin__ort{color:var(--nebel);font-size:.9375rem}
.termin__art{align-self:flex-start;margin-top:auto;border-radius:999px;padding:.2rem .7rem;font-size:.75rem;font-weight:700;
  background:var(--hellblau);color:var(--tief)}
.termin__art--standort{background:transparent;color:var(--vg);border:1px solid var(--kante)}
.termin a{color:var(--akzent)}
.live__fuss{margin-top:2rem}

/* ---------- Über uns (hell) ---------- */
.ueber{padding-top:clamp(4.5rem,9vw,7rem);overflow:hidden}
.ueber__raster{display:grid;gap:1rem 4rem;align-items:end}
@media(min-width:62rem){.ueber__raster{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.ueber__bild{position:relative;align-self:end;display:flex;justify-content:center}
.ueber__bild::before{content:"";position:absolute;left:50%;top:6%;width:min(110%,34rem);aspect-ratio:1;transform:translateX(-50%);
  background:url("logo/kompass-hellblau.svg") center/contain no-repeat;opacity:.55}
.ueber__bild img{position:relative;width:min(100%,24rem)}
.ueber__text{margin:0;padding-bottom:clamp(4rem,8vw,6.5rem)}
.ueber__zitat{margin:1.75rem 0 0;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;line-height:1.55;max-width:38em}
.ueber__zitat p + p{margin-top:1rem}
.ueber__name{margin-top:1.75rem;display:flex;flex-direction:column}
.ueber__name b{font-size:1.125rem}
.ueber__name span{color:var(--nebel);font-size:.9375rem}
@media(max-width:62rem){.ueber__bild{order:2}.ueber__text{padding-bottom:0}}

/* ---------- Abschluss: Termin ---------- */
.ende__raster{display:grid;gap:3.5rem}
@media(min-width:56rem){.ende__raster{grid-template-columns:1.25fr 1fr;column-gap:clamp(2.5rem,6vw,6rem)}}
.ende h2{font-size:clamp(2rem,5vw,3.75rem)}
.ende .ende__h2-klein{font-size:clamp(1.5rem,3vw,2.25rem)}
.ende__lead{color:var(--nebel);margin:1.25rem 0 1.5rem;max-width:42ch}
.ende__haendler{align-self:start;border-top:1px solid var(--kante);padding-top:1.5rem}
@media(min-width:56rem){.ende__haendler{border-top:0;border-left:1px solid var(--kante);padding:0 0 0 clamp(2rem,4vw,3.5rem)}}
.felder--kompakt .knopf{margin-top:.25rem}

/* ---------- Standortband ---------- */
.band{border-top:1px solid var(--kante);border-bottom:1px solid var(--kante);padding:1.1rem 0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band__spur{display:flex;gap:2.5rem;width:max-content;animation:rollen 40s linear infinite}
.band:hover .band__spur{animation-play-state:paused}
.band__wort{font-size:clamp(1.25rem,3vw,2rem);font-weight:700;letter-spacing:var(--sperre);text-transform:uppercase;
  white-space:nowrap;color:rgba(255,255,255,.3)}
.band__wort:nth-child(odd){color:var(--hellblau)}
@keyframes rollen{to{transform:translateX(-50%)}}

/* =================================================================== Fuß (schwarz) */
.fuss{background:#000;color:#fff;padding-top:clamp(4rem,8vw,6.5rem);--nebel:rgba(255,255,255,.72)}
.fuss__oben{display:grid;gap:3rem}
@media(min-width:62rem){.fuss__oben{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}}
.fuss__marke .fuss__claim{color:#fff;margin:0;font-size:clamp(2.75rem,6vw,5rem);font-weight:700;text-transform:uppercase;letter-spacing:var(--sperre);
  line-height:.98}
.fuss__claim span{color:var(--hellblau)}
.fuss__marke img{width:9rem;margin-top:2rem}
.fuss__marke p{color:var(--nebel);font-size:.9375rem;margin-top:.6rem}
.fuss__nav{display:flex;flex-direction:column;gap:.35rem}
@media(min-width:62rem){.fuss__nav{border-left:1px solid rgba(255,255,255,.2);padding-left:2.5rem}}
.fuss__nav a{color:#fff;text-decoration:none;font-size:1.375rem;font-weight:700;letter-spacing:var(--sperre);line-height:1.5}
.fuss__nav a:hover{color:var(--hellblau)}
.fuss__kontakt{font-size:.9375rem;line-height:1.6;color:var(--nebel)}
@media(min-width:62rem){.fuss__kontakt{border-left:1px solid rgba(255,255,255,.2);padding-left:2.5rem}}
.fuss__kontakt h3{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 .4rem}
.fuss__kontakt h3 + p{margin-bottom:1.25rem}
.fuss__kontakt a{color:#fff;text-decoration:none}
.fuss__kontakt a:hover{color:var(--hellblau);text-decoration:underline}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;margin-top:clamp(3rem,6vw,5rem);
  padding-top:1.5rem;padding-bottom:5.5rem;font-size:.875rem;color:var(--nebel);
  background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) var(--rand) 0/calc(100% - 2 * var(--rand)) 1px no-repeat}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.fuss__unten a{color:var(--nebel);text-decoration:none}
.fuss__unten a:hover{color:#fff;text-decoration:underline}
.fuss :focus-visible{outline-color:#fff}

/* =================================================================== Seitenköpfe */
.skopf{padding-top:clamp(8.5rem,18vh,11rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.skopf h1{font-size:clamp(2.6rem,7vw,6rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1}
.skopf h1 span{display:block;color:var(--hellblau)}
.hell .skopf h1 span{color:var(--petrol)}
.skopf .lead{margin-top:1.25rem}

/* =================================================================== Konfigurator (Petrol) */
.konf{padding-bottom:clamp(4rem,9vw,7rem)}
.konf__raster{display:grid;gap:2rem;grid-template-areas:"schritte" "zusammen" "anfrage"}
@media(min-width:62rem){
  .konf__raster{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem);
    grid-template-areas:"schritte zusammen" "anfrage zusammen";align-items:start}
  .zusammen{position:sticky;top:6rem}
}
.konf__schritte{grid-area:schritte;min-width:0}
.zusammen{grid-area:zusammen}
.anfrage{grid-area:anfrage}
.schritt{border:0;margin:0;padding:0 0 2.25rem;min-width:0}
.schritt + .schritt{border-top:1px solid var(--kante);padding-top:2rem}
[data-fuer][hidden]{display:none}
.schritt__titel{float:left;width:100%;display:flex;align-items:center;gap:.75rem;padding:0;margin:0 0 1.25rem;
  font-size:1.3rem;font-weight:700;line-height:1.2}
.schritt > :not(legend){clear:both}
.schritt__nr{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  background:var(--hellblau);color:var(--tief);font-size:.875rem;font-weight:700}
.modellwahl{display:grid;gap:1.1rem}
.modellwahl__titel,.frage__titel{display:block;font-size:.8125rem;color:var(--nebel);margin-bottom:.55rem;padding:0}
.schalter{display:flex;flex-wrap:wrap;gap:.5rem}
.pille{position:relative;display:inline-flex}
.pille input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pille span{display:inline-block;background:var(--glas);border:1px solid var(--kante);border-radius:999px;
  padding:.6rem 1.15rem;font-size:.9375rem;font-weight:500;line-height:1.3;
  transition:background .18s ease,color .18s ease,transform .18s var(--weich)}
.pille:hover span{transform:translateY(-2px)}
.pille input:checked + span{background:var(--hellblau);color:var(--tief);border-color:transparent;font-weight:700}
.pille input:focus-visible + span{outline:2px solid #fff;outline-offset:3px}
.hilfe{margin-top:1.4rem;border:1px solid var(--kante);border-radius:var(--r-klein);background:rgba(0,0,0,.12)}
.hilfe summary{cursor:pointer;padding:.95rem 1.25rem;font-weight:600;font-size:.9375rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.hilfe summary::-webkit-details-marker{display:none}
.hilfe summary::after{content:"+";font-size:1.25rem;line-height:1;color:var(--hellblau)}
.hilfe[open] summary::after{content:"\2013"}
.hilfe__fragen{display:grid;gap:1.1rem;padding:.25rem 1.25rem 1.25rem}
.frage{border:0;margin:0;padding:0;min-width:0}
.hilfe__ergebnis{margin:0 1.25rem 1.25rem;padding:.75rem 1rem;border-left:2px solid var(--hellblau);
  font-size:.9375rem;color:var(--nebel)}
.hilfe__ergebnis:empty{display:none}
.hilfe__ergebnis b{color:#fff}
.karten{display:grid;gap:.75rem}
@media(min-width:40rem){.karten{grid-template-columns:1fr 1fr}}
.karte{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.25rem;cursor:pointer;
  border:1px solid var(--kante);border-radius:var(--r-klein);background:var(--glas);transition:border-color .18s,background .18s}
.karte input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.karte:hover{border-color:rgba(255,255,255,.45)}
.karte:has(input:checked){border-color:var(--hellblau);background:rgba(131,208,245,.14)}
.karte:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}
.karte__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;line-height:1.3}
.karte__marke{flex:none;background:var(--hellgelb);color:var(--tief);border-radius:999px;padding:.15rem .6rem;
  font-size:.75rem;font-weight:700}
.karte__preis{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.karte__preis b{font-size:1.25rem}
.karte__statt{color:var(--dunst);font-size:.875rem}
.karte__inhalt{margin:.15rem 0 0;padding:0 0 0 1rem;font-size:.8125rem;color:var(--nebel);line-height:1.45}
.karte__inhalt li + li{margin-top:.2rem}
.karte--breit{grid-column:1 / -1}
.karte--klein{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;
  padding:.8rem 1.25rem;background:transparent;border-style:dashed}
.karte--klein .karte__kopf b{font-weight:500;font-size:.9375rem}
.karte--klein .karte__preis b{font-size:.9375rem;font-weight:500}
.karte--klein .karte__inhalt{list-style:none;padding:0;margin:0;width:100%}
.karte--aktion .karte__preis b{color:var(--hellgelb)}
.karte--aktion:has(input:checked){border-color:var(--hellgelb);background:rgba(255,230,63,.1)}
.optionen{display:grid}
.option{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:.9rem 0;cursor:pointer;
  border-bottom:1px solid var(--kante)}
.option:first-child{padding-top:0}
.option input{appearance:none;-webkit-appearance:none;width:1.35rem;height:1.35rem;margin:.1rem 0 0;flex:none;
  border:1.5px solid rgba(255,255,255,.6);border-radius:.4rem;background:transparent;cursor:pointer;
  display:grid;place-items:center}
.option input:checked{background:var(--hellblau);border-color:var(--hellblau)}
.option input:checked::after{content:"";width:.4rem;height:.7rem;border:solid var(--tief);border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg)}
.option input:disabled{cursor:default;opacity:.75}
.option input:focus-visible{outline:2px solid #fff;outline-offset:3px}
.option__text b{display:block;font-weight:500;line-height:1.35}
.option__info,.option__hinweis{display:block;font-size:.8125rem;color:var(--nebel);margin-top:.2rem;line-height:1.45}
.option__hinweis{color:var(--hellblau)}
.option__hinweis:empty{display:none}
.option__preis{font-weight:500;white-space:nowrap}
.option[data-zustand=serie] .option__preis{color:var(--hellblau)}
.option[data-zustand=enthalten] .option__preis{color:var(--hellgelb)}
.option[data-zustand=enthalten],.option[data-zustand=serie],.option[data-zustand=gesperrt]{cursor:default}
.option[data-zustand=gesperrt] .option__text b,.option[data-zustand=gesperrt] .option__preis{color:var(--dunst)}
/* Zusammenfassung: dunkle Karte auf Petrol */
.zusammen{background:var(--nacht);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);
  --nebel:rgba(255,255,255,.76);--kante:rgba(255,255,255,.16)}
.zusammen__podest{position:relative;aspect-ratio:3/2;container-type:inline-size}
.zusammen__podest.kompass-buehne::before{left:34%;top:8%;height:80%}
/* jedes Modell füllt die Karte, wie auf den Modellseiten */
.zusammen__bild{bottom:6%;height:min(60cqw,calc(94cqw / var(--r,1.5)));max-width:none;display:none;z-index:0}
.zusammen__bild.an{display:block}
.zusammen__text{padding:1.5rem}
.zusammen__text .etikett{margin:0}
.zusammen h2{font-size:1.9rem;text-transform:uppercase;letter-spacing:var(--sperre);margin-top:.4rem}
.zusammen__zeile{color:var(--nebel);font-size:.875rem;margin-top:.45rem}
.zusammen__liste{margin:1.25rem 0 0;padding:0;list-style:none}
.zusammen__liste li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--kante);font-size:.9375rem}
.zusammen__liste li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.zusammen__liste .zusammen__klein{font-size:.8125rem;color:var(--hellgelb)}
.zusammen__summe{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.zusammen__summe span{font-weight:500}
.zusammen__summe b{font-size:clamp(1.75rem,3vw,2.25rem);letter-spacing:-.02em}
.zusammen__hinweis{font-size:.75rem;color:var(--nebel);margin-top:.5rem}
.zusammen .knopf{margin-top:1.25rem;width:100%}
.anfrage{border-top:1px solid var(--kante);padding-top:2rem}
.anfrage__lead{color:var(--nebel);margin:-.5rem 0 1.25rem;font-size:.9375rem}

/* =================================================================== Formulare */
.felder{display:grid;gap:.9rem 1rem;grid-template-columns:1fr}
@media(min-width:40rem){.felder{grid-template-columns:1fr 1fr}.feld--breit{grid-column:1 / -1}}
.feld{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.feld label{font-size:.8125rem;color:var(--nebel)}
.feld label span{color:var(--dunst)}
.feld input,.feld select,.feld textarea{width:100%;background:var(--glas);border:1px solid var(--kante);
  border-radius:999px;padding:.85rem 1.2rem;font:inherit;font-size:1rem;color:var(--vg)}
.hell .feld input,.hell .feld select,.hell .feld textarea{border-color:rgba(2,34,46,.22)}
.feld textarea{border-radius:var(--r-klein);resize:vertical;min-height:6rem}
.feld select{appearance:none;-webkit-appearance:none;padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--akzent) 50%),linear-gradient(135deg,var(--akzent) 50%,transparent 50%);
  background-position:calc(100% - 1.35rem) 55%,calc(100% - 1rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat}
.feld select option{background:var(--tief);color:#fff}
.feld input:focus-visible,.feld select:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:999px}
.feld textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--r-klein)}
.feld [aria-invalid=true]{border-color:var(--hellgelb)}
.hell .feld [aria-invalid=true]{border-color:#9a6b00}
::placeholder{color:var(--dunst)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage__recht{font-size:.8125rem;color:var(--nebel);margin:1rem 0}
.felder .anfrage__recht{margin:.25rem 0 0}
.anfrage__recht a{color:var(--akzent)}
.meldung{margin:0 0 1rem;font-size:.9375rem;border-left:2px solid var(--akzent);padding:.5rem .9rem;color:var(--nebel)}
.meldung--fehler{border-color:var(--hellgelb);color:var(--vg)}
.meldung[hidden]{display:none}

/* =================================================================== Modellseite */
.mkopf{display:grid;gap:2rem;padding-top:clamp(7.5rem,15vh,9.5rem);padding-bottom:clamp(3rem,6vw,5rem);align-items:center}
@media(min-width:62rem){.mkopf{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem)}}
.mkopf__podest{position:relative;aspect-ratio:5/4;container-type:inline-size}
.mkopf__podest.kompass-buehne::before{left:28%;top:2%;height:80%}
/* Höhe nach Platz: höchstens 64 % der Breite hoch, höchstens 100 % breit */
.mkopf__fahrzeug{bottom:9%;height:min(64cqw,calc(100cqw / var(--r,1.5)));max-width:none}
.mkopf__fahrzeug .frei{width:100%;height:100%}
.pfad{font-size:.8125rem;color:var(--nebel);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pfad a{color:var(--hellblau);text-decoration:none}
.pfad a:hover{text-decoration:underline}
.hell .pfad a{color:var(--petrol)}
/* Schriftgröße an der Spaltenbreite: auch lange Namen wie Saarbrücken bleiben in einer Zeile */
.mkopf__text{container-type:inline-size;min-width:0}
.mkopf h1{font-size:min(4.5rem,11.4cqw);white-space:nowrap;text-transform:uppercase;
  letter-spacing:var(--sperre);line-height:1;margin-top:.9rem}
.mkopf__basis{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;margin-top:1rem;color:var(--nebel);font-size:.9375rem}
.mkopf__kurz{color:var(--nebel);margin-top:1.1rem;max-width:42ch}
.fakten{list-style:none;margin:1.75rem 0 0;padding:1.1rem 0;display:flex;flex-wrap:wrap;gap:.9rem 2rem;
  border-top:1px solid var(--kante);border-bottom:1px solid var(--kante)}
.fakten li{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.55rem}
.fakten svg{width:1.4rem;height:1.4rem;color:var(--hellblau);grid-row:span 2}
.fakten b{font-size:1.125rem;line-height:1.2;white-space:nowrap}
.fakten span{font-size:.75rem;color:var(--nebel)}
@media(max-width:30rem){.fakten{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}}
.mkopf__preis{margin-top:1.6rem;display:flex;align-items:baseline;gap:.5rem}
.mkopf__preis span{font-size:1.125rem;color:var(--nebel)}
.mkopf__preis b{font-size:clamp(2.25rem,4.5vw,3.25rem);letter-spacing:-.02em;line-height:1}
.mkopf__fein{font-size:.8125rem;color:var(--dunst);margin-top:.35rem}
.mkopf .knopfreihe{margin-top:1.6rem}
.mkopf__aktion{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;padding:.75rem 1rem;
  border:1px solid rgba(255,230,63,.5);border-radius:var(--r-klein);background:rgba(255,230,63,.08);
  color:#fff;text-decoration:none;font-size:.875rem;line-height:1.4;max-width:34rem}
.mkopf__aktion b{color:var(--hellgelb)}
.mkopf__aktion:hover{border-color:var(--hellgelb)}

/* Grundriss: Tag hell, Nacht dunkel — der ganze Abschnitt wechselt mit */
.grundriss{padding:clamp(4rem,8vw,6.5rem) 0;transition:background-color .6s ease,color .6s ease}
.grundriss[data-ansicht=nacht]{background:#000F15;color:#fff;--vg:#fff;--nebel:rgba(255,255,255,.76);
  --dunst:rgba(255,255,255,.6);--kante:rgba(255,255,255,.16);--akzent:var(--hellblau)}
.grundriss__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.grundriss__kopf p{color:var(--nebel)}
.plan{margin:clamp(1.75rem,4vw,3rem) 0 0}
.plan__flaeche{position:relative;max-width:76rem;margin:0 auto}
.plan__bild{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(1,26,36,.28));transition:opacity .5s ease}
.plan__bild--nacht{position:absolute;inset:0;opacity:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.plan[data-ansicht=nacht] .plan__bild--nacht{opacity:1}
.plan[data-ansicht=nacht] .plan__bild--tag{opacity:0}
.plan__leiste{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;max-width:76rem;margin:clamp(1.25rem,3vw,2rem) auto 0}
.plan__schalter{display:flex;gap:.75rem}
.rund{width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;padding:0;background:transparent;
  border:1.5px solid var(--kante);color:var(--vg);transition:background .2s,color .2s,border-color .2s,transform .18s var(--weich)}
.hell .rund,.grundriss .rund{border-color:rgba(2,34,46,.35)}
.grundriss[data-ansicht=nacht] .rund{border-color:rgba(255,255,255,.5)}
.rund svg{width:1.4rem;height:1.4rem}
.rund:hover{transform:translateY(-2px)}
.rund[aria-pressed=true]{background:var(--hellgelb);border-color:var(--hellgelb);color:var(--tief)}
.plan__betten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 2rem;font-size:.875rem;color:var(--nebel)}
.plan__betten b{color:var(--vg);font-weight:600;margin-right:.35rem}

.streifen{padding:clamp(4rem,8vw,6.5rem) 0}
.streifen__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.streifen__kopf p{color:var(--nebel);font-size:.875rem}
.streifen__spur{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin-top:1.75rem;padding:0 var(--rand) 1rem;scroll-padding-left:var(--rand);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
@media(min-width:84rem){.streifen__spur{padding-left:calc((100vw - 84rem) / 2 + var(--rand));
  scroll-padding-left:calc((100vw - 84rem) / 2 + var(--rand))}}
.streifen__spur:focus-visible{outline:2px solid var(--hellblau);outline-offset:-2px}
.streifen__bild{flex:none;margin:0;scroll-snap-align:start;width:clamp(15rem,30vw,26rem)}
.streifen__bild img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-klein);background:var(--tief)}
.streifen__bild figcaption{font-size:.875rem;color:var(--nebel);margin-top:.6rem}

.daten__raster{display:grid;gap:2.5rem;margin-top:2rem}
@media(min-width:62rem){.daten__raster{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem)}}
.daten__tabelle{display:grid;gap:2rem 2.5rem}
@media(min-width:44rem){.daten__tabelle{grid-template-columns:1fr 1fr}}
.daten h3{font-size:.8125rem;font-weight:600;color:var(--akzent);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:.4rem;line-height:1.4}
.daten dl{margin:0}
.daten dl div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--kante);font-size:.9375rem;line-height:1.45}
.daten dt{color:var(--nebel)}
.daten dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ungeprueft{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#E8B400;margin-left:.4rem;vertical-align:.1em}
.daten__hinweis{font-size:.8125rem;color:var(--nebel);grid-column:1 / -1}
.daten__hinweis .ungeprueft{margin:0 .5rem 0 0}
.daten__serie{background:var(--hell-kachel);border-radius:var(--r);padding:1.6rem 1.7rem;align-self:start}
.haken{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.55rem}
.haken li{display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;font-size:.9375rem;line-height:1.45}
.haken svg{width:1.1rem;height:1.1rem;color:var(--petrol);margin-top:.15rem}
.daten__fein{font-size:.8125rem;color:var(--nebel);margin-top:1.1rem}
.daten__fein a{color:var(--akzent)}

.vergleich{padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
.vergleich__lead{color:var(--nebel);margin-top:.75rem}
.vergleich__liste{margin-top:1.75rem;display:grid;column-gap:clamp(2rem,5vw,4rem);border-top:1px solid var(--kante)}
@media(min-width:62rem){.vergleich__liste{grid-template-columns:1fr 1fr}}
.vergleich__zeile{display:grid;grid-template-columns:8.5rem 1fr;gap:1.25rem;align-items:center;padding:1rem 0;
  border-bottom:1px solid var(--kante);text-decoration:none;color:var(--vg);opacity:.55;transition:opacity .2s}
.vergleich__zeile:hover,.vergleich__zeile:focus-visible,.vergleich__zeile.ist-aktiv{opacity:1}
.vergleich__name b{display:block;font-size:1.0625rem}
.vergleich__name span{font-size:.8125rem;color:var(--nebel)}
.vergleich__zeile.ist-aktiv .vergleich__name b{color:var(--hellblau)}
.vergleich__plan{display:block;max-width:24rem}
.vergleich__plan img{display:block;height:auto}
@media(max-width:40rem){.vergleich__zeile{grid-template-columns:1fr;gap:.5rem}}

/* =================================================================== Alle Modelle (Übersicht) */
.mgruppe + .mgruppe{margin-top:clamp(3rem,6vw,4.5rem)}
.mgruppe__titel{font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);
  border-bottom:1px solid var(--kante);padding-bottom:.75rem;margin-bottom:1.5rem}
.mkarten{display:grid;gap:2.5rem 1.5rem}
@media(min-width:44rem){.mkarten{grid-template-columns:1fr 1fr}}
@media(min-width:76rem){.mkarten{grid-template-columns:repeat(3,1fr)}}
.mkarte{display:flex;flex-direction:column}
.mkarte__art{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dunst)}
.mkarte h3{font-size:1.75rem;text-transform:uppercase;letter-spacing:var(--sperre);margin:.15rem 0 1rem}
.mkarte__kacheln{display:grid;grid-template-columns:2.2fr 1fr;gap:.6rem}
.mkarte__kachel{background:var(--hell-kachel);border-radius:var(--r-klein);display:grid;place-items:center;min-height:8.5rem;
  padding:.75rem;text-decoration:none;color:var(--tief)}
.mkarte__kachel img{max-height:8rem;width:auto}
.mkarte__kachel .marke{background:transparent;font-size:.8125rem;padding:0}
.mkarte__plan{grid-column:1 / -1;min-height:auto;aspect-ratio:2.6/1;padding:1rem 1.25rem;justify-items:start}
.mkarte__plan img{max-height:none;height:auto}
.mkarte dl{margin:1rem 0 0}
.mkarte dl div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--kante);font-size:.9375rem}
.mkarte dt{color:var(--nebel)}
.mkarte dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mkarte .knopfreihe{margin-top:1.25rem}
.mkarte .knopf{padding:.7rem 1.3rem;font-size:.875rem}

/* =================================================================== Erlebnisabholung (Seite) */
.eauftakt{display:grid;gap:2.5rem;padding-top:clamp(8rem,17vh,10.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);align-items:center}
@media(min-width:62rem){.eauftakt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem)}}
.eauftakt h1{font-size:clamp(2.4rem,6vw,4.8rem);text-transform:uppercase;line-height:1;letter-spacing:var(--sperre)}
.eauftakt h1 span{display:block;color:var(--hellblau)}
.eauftakt__lead{color:var(--nebel);margin-top:1.4rem;max-width:42ch;font-size:1.125rem}
.eauftakt__fakten{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.eauftakt__fakten li{border:1px solid var(--kante);border-radius:999px;padding:.45rem .95rem;font-size:.875rem}
.eauftakt__bild{position:relative}
.eauftakt__bild > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.eauftakt__bild .polaroid{position:absolute;width:min(40%,13rem);left:-7%;bottom:-12%;transform:rotate(-6deg);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.route-abschnitt{padding-top:clamp(5rem,10vw,8rem);padding-bottom:clamp(4rem,8vw,6rem)}
.route{--marke:4.25rem;position:relative;list-style:none;margin:2.5rem 0 0;padding:0}
/* ohne Skript: einfache gestrichelte Linie; mit Skript zeichnet app.js eine geschwungene Linie */
.route::before{content:"";position:absolute;top:2rem;bottom:0;left:calc(var(--marke) / 2 - 1px);
  border-left:3px dashed rgba(131,208,245,.7)}
.route.hat-linie::before{display:none}
.route__linie{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.route__linie path{fill:none;stroke:var(--hellblau);stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round;opacity:.85}
.route__start{position:relative;width:var(--marke);height:var(--marke);margin-bottom:2rem}
.route__start img{width:100%;height:100%;position:relative;background:var(--nacht);border-radius:50%}
.route__halt{position:relative;display:grid;grid-template-columns:var(--marke) 1fr;gap:1.25rem;align-items:start;padding-bottom:2.5rem}
.route__marke{position:relative;z-index:1;display:grid;place-items:center;width:var(--marke);height:var(--marke);border-radius:50%;
  background:var(--hellblau);color:var(--tief);box-shadow:0 0 0 7px var(--nacht)}
.route__marke svg{width:2.2rem;height:2.2rem}
.route__karte{position:relative;z-index:1;background:#0B2531;border:1px solid var(--kante);border-radius:var(--r-klein);overflow:hidden;max-width:30rem}
.route__karte img{width:100%;aspect-ratio:16/9;object-fit:cover}
.route__karte div{padding:1.1rem 1.3rem 1.25rem}
.route__nr{font-size:.75rem;color:var(--hellblau);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.route__karte h3{font-size:1.25rem;line-height:1.25;margin-top:.3rem}
.route__karte p{color:var(--nebel);font-size:.9375rem;margin-top:.45rem}
@media(max-width:40rem){.route{--marke:3.5rem}.route__marke svg{width:1.8rem;height:1.8rem}}
@media(min-width:56rem){
  .route::before{left:calc(50% - 1px)}
  .route__start{margin:0 auto 2rem}
  /* feste Zeilenhöhe: Stationen in gleichem Abstand, Karten ragen versetzt in die nächste Zeile */
  .route{--zeile:15.5rem;padding-bottom:12rem}
  .route__halt{grid-template-columns:1fr var(--marke) 1fr;gap:2rem;padding-bottom:0;height:var(--zeile)}
  .route__marke{grid-column:2;grid-row:1}
  .route__halt:nth-child(even) .route__karte{grid-column:1;grid-row:1;justify-self:end;text-align:right}
  .route__halt:nth-child(odd) .route__karte{grid-column:3;grid-row:1}
}
.eleistung__raster{display:grid;gap:1rem;margin-top:1.75rem}
@media(min-width:56rem){.eleistung__raster{grid-template-columns:1fr 1fr}}
.eleistung__karte{border-radius:var(--r);padding:1.75rem 1.9rem;background:var(--hell-kachel);display:flex;flex-direction:column;
  align-items:flex-start;gap:.75rem}
.eleistung__karte h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25}
.eleistung__karte p{color:var(--nebel)}
.eleistung__karte .knopf{margin-top:.5rem}
.eleistung__karte--blau{background:var(--petrol);color:#fff;--nebel:rgba(255,255,255,.84)}
.eleistung__karte--blau .knopf{background:var(--hellblau);color:var(--tief)}
.eleistung__fein{color:var(--nebel);font-size:.9375rem;margin-top:1.25rem;max-width:60ch}
.galerie{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:56rem){.galerie{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
  .galerie figure:first-child{grid-row:span 2}}
.galerie figure{margin:0;position:relative;border-radius:var(--r-klein);overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galerie figure:first-child img{aspect-ratio:auto}
.galerie figcaption{position:absolute;left:.75rem;bottom:.75rem;background:rgba(1,26,36,.78);color:#fff;
  border-radius:999px;padding:.25rem .75rem;font-size:.8125rem;font-weight:600}

/* =================================================================== Termine (Seite) */
.tmonat + .tmonat{margin-top:clamp(2.5rem,5vw,3.5rem)}
.tmonat h2{font-size:.875rem;font-weight:600;letter-spacing:.08em;color:var(--akzent);border-bottom:1px solid var(--kante);
  padding-bottom:.75rem;margin-bottom:0}
.tzeile{display:grid;grid-template-columns:7.5rem 1fr;gap:.5rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--kante);
  align-items:start}
@media(min-width:56rem){.tzeile{grid-template-columns:12rem minmax(0,1.5fr) minmax(0,1fr) 9rem;align-items:center}
  .tzeile__aktion{justify-content:flex-end}}
.tzeile__datum{font-size:1.4rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.tzeile__datum span{display:block;font-size:.8125rem;font-weight:500;color:var(--nebel)}
.tzeile h3{font-size:1.25rem;line-height:1.3}
.tzeile__ort{color:var(--nebel);font-size:.9375rem}
.tzeile .termin__art{margin-top:.5rem}
.tzeile__aktion{display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:56rem){.tzeile > :not(.tzeile__datum){grid-column:2}}
.tzeile .knopf{padding:.6rem 1.1rem;font-size:.8125rem}

/* =================================================================== Standorte (Seite) */
.standorte__raster{display:grid;gap:3rem}
@media(min-width:62rem){.standorte__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
  .standorte__karte{position:sticky;top:6.5rem}}
.orte{display:grid;gap:1rem}
.ort{border:1px solid var(--kante);border-radius:var(--r);padding:1.5rem 1.6rem;background:var(--glas);
  scroll-margin-top:7rem;transition:border-color .2s}
.ort:target,.ort.ist-aktiv{border-color:var(--hellgelb)}
.ort__kopf{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.ort h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ort__zusatz{color:var(--nebel);font-size:.875rem}
.ort__raster{display:grid;gap:1rem 2rem;margin-top:1rem;font-size:.9375rem}
@media(min-width:40rem){.ort__raster{grid-template-columns:1fr 1fr}}
.ort__raster h3{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);margin-bottom:.3rem}
.ort__raster p,.ort__raster dl{color:var(--nebel);margin:0}
.ort__raster a{color:var(--vg)}
.ort__raster dl div{display:flex;gap:.75rem}
.ort__raster dt{min-width:6.5rem}
.ort__raster dd{margin:0}
.ort__fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.25rem}
.ort .knopfreihe{margin-top:0}
/* Betreiber klein unten rechts, später auch Logos von Partnerhändlern */
.ort__logo{height:1.55rem;width:auto;margin-left:auto;opacity:.92}
.ort .knopf{padding:.65rem 1.2rem;font-size:.8125rem}

/* =================================================================== Händler werden */
.hraster{display:grid;gap:2.5rem}
@media(min-width:62rem){.hraster{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}}
.hpunkte{list-style:none;margin:0;padding:0;border-top:1px solid var(--kante)}
.hpunkte li{display:grid;gap:.35rem;padding:1.15rem 0;border-bottom:1px solid var(--kante)}
.hpunkte b{font-size:1.25rem}
.hpunkte span{color:var(--nebel);font-size:.9375rem}
.hformular{background:var(--glas);border:1px solid var(--kante);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.25rem)}
.hformular h2{font-size:1.5rem;text-transform:none;letter-spacing:-.01em;line-height:1.2;margin-bottom:1.25rem}

/* =================================================================== Runde 4 (9.10.2026) */

/* Erlebnisabholung: Seitenkopf wie das Toskana-Band der Startseite */
.eband--seite .eband__inhalt{padding-top:clamp(7.5rem,15vh,9.5rem);padding-bottom:clamp(3.5rem,7vw,5rem)}
@media(min-width:62rem){.eband--seite .eband__inhalt{min-height:min(52rem,100svh)}}
.eband--seite h1{font-size:clamp(2.4rem,5.5vw,4.6rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1}
.eband--seite h1 span{color:var(--hellblau)}
.eband .eauftakt__fakten li{border-color:rgba(255,255,255,.4);background:rgba(1,26,36,.35)}

/* Einsteigen statt weiterklicken */
.ende h2 span{color:var(--hellblau)}

/* Häkchen für den Finanzierungswunsch */
.ankreuz{display:flex;align-items:center;gap:.7rem;cursor:pointer;font-size:.9375rem;color:var(--vg)}
.ankreuz input{appearance:none;-webkit-appearance:none;width:1.35rem;height:1.35rem;margin:0;flex:none;cursor:pointer;
  border:1.5px solid var(--dunst);border-radius:.4rem;display:grid;place-items:center;background:transparent}
.ankreuz input:checked{background:var(--hellblau);border-color:var(--hellblau)}
.ankreuz input:checked::after{content:"";width:.4rem;height:.7rem;border:solid var(--tief);border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg)}
.ankreuz input:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* Finanzierung */
.finanz{background:var(--nacht)}
.finanz__raster{display:grid;gap:2rem 4rem;align-items:center}
@media(min-width:62rem){.finanz__raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.finanz h2 span{color:var(--hellblau)}
.finanz .lead{margin-top:1.1rem}
.finanz__karte{background:var(--petrol);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);position:relative;overflow:hidden}
.finanz__karte::before{content:"";position:absolute;right:-18%;bottom:-30%;height:120%;aspect-ratio:1;
  background:url("logo/kompass-hellblau.svg") center/contain no-repeat;opacity:.12}
.finanz__karte .haken{position:relative;margin:0 0 1.5rem;gap:.8rem}
.finanz__karte .haken li{font-size:1.0625rem}
.finanz__karte .haken svg{color:var(--hellblau)}
.finanz__karte .knopf{position:relative}
.zusammen__finanz{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:.8125rem;color:var(--nebel)}
.zusammen__finanz svg{width:1.1rem;height:1.1rem;flex:none;color:var(--hellblau);margin-top:.1rem}

/* Social Media im Fuß */
.social{display:flex;gap:.6rem;margin-top:1.5rem}
.social__link{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.3);transition:background .18s,color .18s,border-color .18s}
.social__link svg{width:1.3rem;height:1.3rem}
.social__link:hover{background:#fff;color:#000;border-color:#fff}

/* Händler finden: Lauras Karte mit Pins, Fotos, Dörr-Gruppe-Logo, Händlernetz */
.gruppe{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;color:var(--nebel);font-size:.875rem}
.gruppe img{height:1.5rem;width:auto}
.lkarte{position:relative;margin:0 auto;max-width:31rem}
.lkarte > img{width:100%;height:auto}
.lkarte__pin{position:absolute;width:3rem;height:3.6rem;transform:translate(-50%,-100%);display:block;text-decoration:none;
  border-radius:1.5rem 1.5rem 50% 50%}
.lkarte__name{position:absolute;left:calc(50% + 1.2rem);top:.35rem;white-space:nowrap;background:rgba(1,26,36,.88);
  color:#fff;border-radius:999px;padding:.15rem .6rem;font-size:.8125rem;font-weight:600;pointer-events:none;
  transition:background .18s,color .18s}
.lkarte__pin:hover .lkarte__name,.lkarte__pin:focus-visible .lkarte__name,.lkarte__pin.ist-aktiv .lkarte__name{
  background:var(--hellgelb);color:var(--tief)}
.lkarte__pin:focus-visible{outline:2px solid var(--hellgelb);outline-offset:2px}
.lkarte__pin[data-pin=rees] .lkarte__name,.lkarte__pin[data-pin=bliesen] .lkarte__name{left:auto;right:calc(50% + 1.2rem)}
.lkarte__pin[data-pin=hockenheim] .lkarte__name{left:50%;top:calc(100% + .3rem);transform:translateX(-50%)}
.netz{margin-top:2rem;border:1px solid var(--kante);border-radius:var(--r);padding:1.5rem 1.6rem;background:var(--glas)}
.netz h2{font-size:1.25rem;text-transform:none;letter-spacing:0;line-height:1.3}
.netz p{color:var(--nebel);margin:.6rem 0 1.1rem;font-size:.9375rem}
.ort{overflow:hidden}
.ort__foto{display:block;width:calc(100% + 3.2rem);max-width:none;margin:-1.5rem -1.6rem 1.25rem;aspect-ratio:536/314;object-fit:cover}

/* Konfigurator hell (Eisblau), Zusammenfassung bleibt dunkel */
.konf-seite .pille span{background:#fff;border-color:rgba(2,34,46,.18)}
.konf-seite .pille input:checked + span{background:var(--petrol);color:#fff}
.konf-seite .pille input:focus-visible + span,.konf-seite .karte:has(input:focus-visible),
.konf-seite .option input:focus-visible{outline-color:var(--petrol)}
.konf-seite .schritt__nr{background:var(--petrol);color:#fff}
.konf-seite .hilfe{background:#fff;border-color:rgba(2,34,46,.14)}
.konf-seite .hilfe summary::after{color:var(--petrol)}
.konf-seite .hilfe__ergebnis{border-color:var(--petrol)}
.konf-seite .hilfe__ergebnis b{color:var(--tief)}
.konf-seite .karte{border-color:rgba(2,34,46,.14)}
.konf-seite .karte:hover{border-color:rgba(2,34,46,.4)}
.konf-seite .karte:has(input:checked){border-color:var(--petrol);background:#fff;box-shadow:0 0 0 1px var(--petrol)}
.konf-seite .karte--aktion .karte__preis b{color:var(--tief);background:var(--hellgelb);border-radius:.35rem;padding:0 .4rem}
.konf-seite .karte--aktion:has(input:checked){border-color:var(--petrol);background:#FFFBDF}
.konf-seite .karte--klein{background:transparent}
.konf-seite .option input{border-color:rgba(2,34,46,.45)}
.konf-seite .option input:checked{background:var(--petrol);border-color:var(--petrol)}
.konf-seite .option input:checked::after{border-color:#fff}
.konf-seite .option__hinweis{color:var(--petrol)}
.konf-seite .option[data-zustand=serie] .option__preis{color:var(--petrol)}
.konf-seite .option[data-zustand=enthalten] .option__preis{color:var(--tief);background:var(--hellgelb);
  border-radius:999px;padding:.05rem .55rem;font-size:.875rem}
.konf-seite .ankreuz input:checked{background:var(--petrol);border-color:var(--petrol)}
.konf-seite .ankreuz input:checked::after{border-color:#fff}
.hell .zusammen{color:#fff;--vg:#fff;--akzent:var(--hellblau);--nebel:rgba(255,255,255,.76);--dunst:rgba(255,255,255,.6)}
.hell .zusammen .knopf{background:var(--hellblau);color:var(--tief)}
.hell .zusammen .knopf:hover{background:#fff}
.hell .zusammen :focus-visible{outline-color:var(--hellblau)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Roomtour-Pille: Link zu YouTube, ohne Video ausgegraut ---------- */
.roomtour{position:relative;display:inline-flex;align-items:center;gap:.4rem;border:1px solid currentColor;
  border-radius:999px;padding:.3rem .8rem .3rem .6rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;white-space:nowrap;color:var(--akzent);text-decoration:none;
  transition:background .18s,color .18s,border-color .18s}
.roomtour svg{width:.8rem;height:.8rem;flex:none}
a.roomtour:hover{background:var(--akzent);border-color:var(--akzent);color:var(--tief)}
.hell a.roomtour:hover{color:#fff}
.roomtour--bald{color:var(--dunst);border-style:dashed;cursor:default}
.roomtour--bald::after{content:attr(data-tipp);position:absolute;left:50%;bottom:calc(100% + .5rem);z-index:6;
  transform:translate(-50%,.25rem);background:#000;color:#fff;border-radius:.45rem;padding:.4rem .7rem;
  font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.roomtour--bald:hover::after{opacity:1;transform:translate(-50%,0)}
.mkarte__kopf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem .75rem;margin:.15rem 0 1rem}
.mkarte__kopf h3{margin:0}

/* ---------- Termine: Vorbehalt klein ganz unten ---------- */
.vorbehalt{margin-top:1.75rem;font-size:.8125rem;color:var(--nebel)}

/* ---------- Tipps & Touren: Band in Petrol mit Explore-Kompass und gestrichelter Reiseroute ----------
   Eigene Elemente der Marke, bewusst kein Höhenlinien-Muster (Laura: nicht wie Sunlight) */
.tband{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(4rem,8vw,6.5rem) 0;
  background:var(--petrol) url("logo/route-band.svg") center/cover no-repeat;--nebel:rgba(255,255,255,.84)}
.tband::before{content:"";position:absolute;z-index:-1;left:-9rem;top:50%;height:135%;aspect-ratio:1;
  transform:translateY(-50%) rotate(-12deg);background:url("logo/kompass-hellblau.svg") center/contain no-repeat;opacity:.09}
.tband__raster{display:grid;gap:2rem;padding-left:max(var(--rand),calc((100vw - 84rem) / 2 + var(--rand)))}
@media(min-width:56rem){.tband__raster{grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);align-items:center;gap:2.5rem}}
.tband__kopf{padding-right:var(--rand)}
@media(min-width:56rem){.tband__kopf{padding-right:0}}
.tband__kopf h2{font-size:clamp(2.3rem,3.8vw,3.4rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1}
.tband__kopf p{color:var(--nebel);margin-top:1rem;max-width:26ch}
.tband__knoepfe{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1.75rem}
.tband .knopf{background:var(--hellblau);color:var(--tief);margin-right:.35rem}
.tband .knopf:hover{background:#fff}
.tband__pfeil{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;
  color:#fff;display:grid;place-items:center;transition:background .18s,color .18s}
.tband__pfeil:hover{background:#fff;color:var(--tief)}
.tband__pfeil svg{width:1.1rem;height:1.1rem}
.tband__pfeil[data-spur-zurueck] svg{transform:rotate(180deg)}
.tband__pfeil:focus-visible{outline:2px solid var(--hellblau);outline-offset:2px}
.tband .tkarte{box-shadow:0 16px 40px rgba(0,0,0,.35)}
.tband .tkarte:focus-visible{outline-color:var(--hellblau)}
.tband__spur{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:.75rem var(--rand) 1.5rem .25rem;scroll-padding-left:.25rem;scrollbar-width:none}
.tband__spur::-webkit-scrollbar{display:none}
.tband__spur:focus-visible{outline:2px solid var(--hellblau);outline-offset:-2px}
.tkarte{position:relative;flex:none;display:block;width:clamp(14rem,21vw,18rem);aspect-ratio:2/3;overflow:hidden;
  border-radius:var(--r-klein);scroll-snap-align:start;background:var(--tief);color:#fff;text-decoration:none;
  box-shadow:0 14px 34px rgba(2,34,46,.18)}
.tkarte__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--weich)}
.tkarte::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.85))}
.tkarte:hover .tkarte__bild{transform:scale(1.05)}
.tkarte:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.tkarte__art{position:absolute;left:1rem;top:1rem;z-index:1;background:var(--hellblau);color:var(--tief);border-radius:999px;
  padding:.2rem .65rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tkarte__titel{position:absolute;left:1rem;right:1rem;bottom:1.1rem;z-index:1;font-size:1.0625rem;font-weight:600;line-height:1.3}

/* Übersicht tipps.html */
.tgruppe + .tgruppe{margin-top:clamp(3rem,6vw,4.5rem)}
.tgruppe__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;
  margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--kante)}
.tgruppe__kopf h2{font-size:clamp(1.75rem,3vw,2.5rem);text-transform:uppercase;letter-spacing:var(--sperre)}
.tgruppe__kopf p{color:var(--nebel)}
.tgitter{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.tgitter .tkarte{width:auto}

/* Beitragsseite */
.artikel__kopf{padding-top:clamp(8.5rem,18vh,11rem);padding-bottom:clamp(1.75rem,3vw,2.5rem)}
.artikel__kopf h1{font-size:clamp(2rem,4.6vw,3.6rem);text-transform:uppercase;letter-spacing:var(--sperre);line-height:1.05;
  margin-top:1rem;max-width:22ch}
.artikel__kopf .lead{margin-top:1.25rem;max-width:60ch}
.artikel__bild{margin:0}
.artikel__bild img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
@media(max-width:40rem){.artikel__bild img{aspect-ratio:4/3}}
.artikel__raster{display:grid;gap:2rem;padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:62rem){
  .artikel__raster{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:4rem;align-items:start}
  .artikel__blick{position:sticky;top:6.5rem}
}
.artikel__blick{background:#fff;border-radius:var(--r);padding:1.5rem 1.6rem;box-shadow:0 10px 30px rgba(2,34,46,.08)}
.artikel__blick ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.artikel__blick li{position:relative;padding-left:1.4rem;font-size:.9375rem;line-height:1.5}
.artikel__blick li::before{content:"";position:absolute;left:0;top:.5rem;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--hellblau)}
.artikel__text{max-width:44rem;font-size:1.0625rem;line-height:1.7}
.artikel__text h2{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;margin:2.25rem 0 .6rem}
.artikel__text h2:first-child{margin-top:0}
.artikel__text p,.artikel__text ul,.artikel__text ol{color:var(--nebel);margin:0 0 1rem}
.artikel__text ul,.artikel__text ol{padding-left:1.25rem}
.artikel__text li{margin:.35rem 0}
.artikel__text a{color:var(--petrol)}
.artikel__text .artikel__masse{list-style:none;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}
.artikel__masse li{margin:0;background:#fff;border-radius:var(--r-klein);padding:.9rem 1rem;line-height:1.4}
.artikel__masse b{display:block;color:var(--tief)}
.artikel__text .artikel__klein{font-size:.8125rem}
.artikel__text .artikel__stand{font-size:.8125rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--kante)}
.artikel__weiter{margin-top:2rem}

/* ---------- Datenschutz-Häkchen in allen Formularen ---------- */
.ankreuz--recht{align-items:flex-start;font-size:.875rem;line-height:1.5;color:var(--nebel)}
.ankreuz--recht input{margin-top:.1rem}
.ankreuz--recht a{color:var(--akzent)}
.ankreuz input[aria-invalid=true]{border-color:var(--hellgelb);box-shadow:0 0 0 2px rgba(255,230,63,.35)}
.hell .ankreuz input[aria-invalid=true]{border-color:#9a6b00;box-shadow:0 0 0 2px rgba(154,107,0,.25)}