/* ============================================================
   Autohaus Wenden GmbH — Gestaltungssystem
   Helle Bühne, Präzision in Logo-Blau. Schrift: Bricolage
   Grotesque (Auftritt) + Archivo (Werk) + IBM Plex Mono (Werte).
   ============================================================ */

/* ---------- Grundwerte ---------- */
:root{
  /* Farbe — abgeleitet aus dem Originallogo (#202978, Schwarz) */
  --papier:        oklch(98.7% 0.003 265);
  --flaeche:       oklch(96.6% 0.007 265);
  --flaeche-2:     oklch(99.4% 0.002 265);
  --studio:        oklch(89% 0.005 260);
  --tinte:         oklch(21% 0.022 276);
  --tinte-2:       oklch(34% 0.022 273);
  --zart:          oklch(45% 0.018 271);
  --leise:         oklch(55% 0.014 270);
  --rand:          oklch(90.5% 0.009 266);
  --rand-stark:    oklch(83% 0.012 266);
  --marine:        oklch(29.8% 0.106 277);   /* Logo-Blau #202978 */
  --marine-tief:   oklch(24.5% 0.088 278);
  --marine-hell:   oklch(44% 0.145 274);
  --marine-flach:  oklch(94.8% 0.019 270);
  --marine-linie:  oklch(86% 0.04 272);
  --gut:           oklch(45% 0.1 155);
  --gut-flach:     oklch(94.5% 0.028 155);
  --signal:        oklch(51% 0.19 27);
  --gold:          oklch(72% 0.09 80);

  --schrift: 'Archivo', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Archivo', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Fluide Größenleiter (Perfect-Fourth-nah) */
  --t--1: clamp(.72rem, .7rem + .1vw, .78rem);
  --t-0:  clamp(.82rem, .8rem + .12vw, .9rem);
  --t-1:  clamp(.95rem, .9rem + .2vw, 1.06rem);
  --t-2:  clamp(1.12rem, 1.05rem + .3vw, 1.3rem);
  --t-3:  clamp(1.35rem, 1.2rem + .6vw, 1.7rem);
  --t-4:  clamp(1.7rem, 1.4rem + 1.2vw, 2.35rem);
  --t-5:  clamp(2.2rem, 1.7rem + 2vw, 3.2rem);
  --t-6:  clamp(2.75rem, 2rem + 3.2vw, 4.4rem);

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --block: clamp(72px, 6vw + 40px, 124px);
  --rand-aussen: clamp(20px, 4vw, 52px);

  --radius: 14px;
  --radius-gross: 22px;
  --takt: cubic-bezier(.16, 1, .3, 1);
  --schatten-1: 0 1px 2px oklch(30% .04 270 / .06), 0 4px 14px oklch(30% .04 270 / .05);
  --schatten-2: 0 2px 4px oklch(28% .05 272 / .07), 0 14px 34px -8px oklch(28% .05 272 / .14);
  --schatten-3: 0 3px 6px oklch(26% .05 274 / .08), 0 28px 60px -12px oklch(26% .06 274 / .2);
  color-scheme: light;
}

/* ---------- Boden ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--schrift);
  font-size:var(--t-1);
  line-height:1.55;
  color:var(--tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p a, li a:not(.knopf){ color:var(--marine-hell); text-underline-offset:3px; }
p a:hover, li a:not(.knopf):hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--marine); color:#fff; }
:focus-visible{ outline:2px solid var(--marine-hell); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:640;
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--tinte);
  text-wrap:balance;
}
h1{ font-size:var(--t-6); font-weight:660; }
h2{ font-size:var(--t-5); }
h3{ font-size:var(--t-2); letter-spacing:-.012em; line-height:1.2; }
h4{ font-size:var(--t-1); letter-spacing:0; }

.huelle{ width:min(1220px, 100% - 2*var(--rand-aussen)); margin-inline:auto; }
.huelle-weit{ width:min(1380px, 100% - 2*var(--rand-aussen)); margin-inline:auto; }

.zart{ color:var(--zart); }
.leise{ color:var(--leise); }
.mono{ font-family:var(--mono); }
.zahl{ font-variant-numeric:tabular-nums; }
.reihe{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Vorspann über Überschriften */
.marke{
  font-size:var(--t--1);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--marine-hell);
}
.kapitel-kopf{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:var(--s-5); }
.kapitel-kopf .marke{ display:block; margin-bottom:10px; }
.kapitel-kopf p{ max-width:52ch; margin-top:12px; color:var(--zart); }

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid var(--rand-stark);
  background:var(--flaeche-2);
  font-weight:600; font-size:var(--t-0);
  transition:border-color .25s var(--takt), background .25s var(--takt),
             transform .25s var(--takt), box-shadow .25s var(--takt);
}
.knopf:hover{ border-color:var(--marine); transform:translateY(-1px); box-shadow:var(--schatten-1); }
.knopf:active{ transform:translateY(0); }
.knopf svg{ width:16px; height:16px; flex:none; }
.knopf-voll{
  background:var(--marine); border-color:var(--marine); color:#fff;
  box-shadow:0 10px 24px -10px oklch(29.8% .106 277 / .55);
}
.knopf-voll:hover{ background:var(--marine-tief); border-color:var(--marine-tief); box-shadow:0 14px 30px -10px oklch(29.8% .106 277 / .6); }
.knopf-still{ border-color:transparent; background:transparent; }
.knopf-still:hover{ border-color:var(--rand-stark); box-shadow:none; }
.knopf-gross{ padding:15px 26px; font-size:var(--t-1); }

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:60;
  background:oklch(98.7% .003 265 / .86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--takt), background .3s var(--takt);
}
.kopf[data-fest]{ border-bottom-color:var(--rand); background:oklch(98.7% .003 265 / .94); }
.kopf-innen{ display:flex; align-items:center; gap:28px; height:76px; }
.logo{ display:flex; align-items:center; flex:none; }
.logo img, .logo svg{ height:40px; width:auto; }
.navi{ display:flex; gap:4px; margin-left:8px; }
.navi a{
  padding:8px 13px; border-radius:999px;
  font-size:var(--t-0); font-weight:560; color:var(--tinte-2);
  transition:background .2s var(--takt), color .2s var(--takt);
}
.navi a:hover{ background:var(--flaeche); color:var(--tinte); }
.navi a[aria-current]{ background:var(--marine-flach); color:var(--marine); font-weight:640; }
.kopf-rechts{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.kopf-rechts .knopf-voll span{ white-space:nowrap; }

.schalter{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--flaeche); border:1px solid var(--rand); border-radius:999px;
}
.schalter button{
  padding:5px 12px; border-radius:999px; font-size:var(--t--1); font-weight:620; color:var(--zart);
  transition:background .2s var(--takt), color .2s var(--takt), box-shadow .2s var(--takt);
}
.schalter button[aria-pressed="true"]{ background:var(--flaeche-2); color:var(--tinte); box-shadow:var(--schatten-1); }

.menue-knopf{ display:none; }
.schublade{
  display:none; position:fixed; inset:76px 0 auto 0; z-index:59;
  background:var(--papier); border-bottom:1px solid var(--rand);
  box-shadow:var(--schatten-2);
}
.schublade[data-offen]{ display:block; }
.schublade-innen{ padding:14px 0 20px; display:grid; gap:2px; }
.schublade-innen > a{
  padding:13px 14px; border-radius:var(--radius); font-weight:600; font-size:var(--t-2);
  font-family:var(--display); letter-spacing:-.01em;
}
.schublade-innen > a:hover{ background:var(--flaeche); }
.schublade-innen > a[aria-current]{ color:var(--marine); }
.schublade-fuss{ display:flex; gap:12px; align-items:center; margin-top:14px; padding-top:16px; border-top:1px solid var(--rand); }

@media (max-width: 1080px){
  .navi{ display:none; }
  .menue-knopf{ display:inline-flex; }
  .kopf-rechts .schalter{ display:none; }
}
@media (max-width: 560px){
  .kopf-innen{ height:64px; gap:14px; }
  .logo img, .logo svg{ height:33px; }
  .schublade{ inset:64px 0 auto 0; }
  .kopf-rechts .knopf-voll span{ display:none; }
  .kopf-rechts .knopf-voll{ padding:11px 13px; }
}

/* ---------- Bühne (Startseite) ---------- */
.buehne{ position:relative; padding:clamp(28px, 4.5vw, 72px) 0 0; overflow:clip; }
.buehne::before{
  content:""; position:absolute; inset:-40% -20% auto;
  height:120%;
  background:
    radial-gradient(58% 44% at 18% 22%, oklch(94.8% .019 270 / .9), transparent 68%),
    radial-gradient(46% 40% at 88% 8%, oklch(95.5% .012 240 / .8), transparent 70%);
  pointer-events:none;
}
.buehne-raster{
  position:relative;
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(24px, 4vw, 64px); align-items:end;
}
.buehne-text{ padding-bottom:clamp(28px, 3.5vw, 60px); }
.buehne h1{ margin:18px 0 20px; max-width:13ch; }
.buehne h1 em{ font-style:normal; color:var(--marine); }
.buehne-satz{ font-size:var(--t-2); color:var(--zart); max-width:44ch; line-height:1.5; }

.buehne-suche{ margin-top:clamp(22px, 2.6vw, 36px); max-width:560px; }
.suchfeld{
  display:flex; align-items:center; gap:6px;
  background:var(--flaeche-2);
  border:1.5px solid var(--rand-stark);
  border-radius:999px;
  padding:6px 6px 6px 20px;
  box-shadow:var(--schatten-2);
  transition:border-color .25s var(--takt), box-shadow .25s var(--takt);
}
.suchfeld:focus-within{ border-color:var(--marine); box-shadow:0 0 0 4px var(--marine-flach), var(--schatten-2); }
.suchfeld svg{ width:19px; height:19px; color:var(--leise); flex:none; }
.suchfeld input{
  flex:1; min-width:0; border:none; background:none; font:inherit; font-size:var(--t-1);
  color:var(--tinte); outline:none; padding:10px 0;
}
.suchfeld input::placeholder{ color:var(--leise); }
.suchfeld .knopf-voll{ flex:none; }
.buehne-beispiele{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.beispiel{
  font-size:var(--t--1); font-weight:560; color:var(--zart);
  padding:6px 12px; border-radius:999px; border:1px solid var(--rand);
  background:oklch(99.4% .002 265 / .7);
  transition:border-color .2s var(--takt), color .2s var(--takt), background .2s var(--takt);
}
.beispiel:hover{ border-color:var(--marine); color:var(--marine); background:var(--flaeche-2); }

.buehne-belege{ display:flex; gap:22px; flex-wrap:wrap; margin-top:clamp(24px, 3vw, 40px); }
.beleg{ display:flex; align-items:center; gap:9px; font-size:var(--t-0); color:var(--tinte-2); font-weight:560; }
.beleg svg{ width:17px; height:17px; color:var(--marine-hell); flex:none; }
.beleg .sterne{ color:var(--gold); letter-spacing:.05em; }

/* Fahrzeug-Bühne rechts */
.buehne-wagen{ position:relative; align-self:end; }
.buehne-bild{
  position:relative; border-radius:var(--radius-gross) var(--radius-gross) 0 0;
  overflow:hidden; background:var(--studio);
  box-shadow:var(--schatten-3);
}
.buehne-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(98.7% .003 265 / .12), transparent 30%),
             linear-gradient(0deg, oklch(20% .03 270 / .16), transparent 26%);
  pointer-events:none;
}
.buehne-bild img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10.4; }
.buehne-schild{
  position:absolute; left:18px; bottom:18px; z-index:2;
  display:flex; align-items:center; gap:14px;
  background:oklch(99% .002 265 / .92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid oklch(100% 0 0 / .6);
  border-radius:var(--radius); padding:10px 16px 10px 12px;
  box-shadow:var(--schatten-2);
}
.buehne-schild .wagen-name{ font-weight:680; font-size:var(--t-0); line-height:1.25; }
.buehne-schild .wagen-name span{ display:block; font-weight:480; color:var(--zart); font-size:var(--t--1); }
.buehne-schild .preis{ font-family:var(--display); font-weight:680; font-size:var(--t-2); color:var(--marine); white-space:nowrap; }
.buehne-schild .trenn{ width:1px; align-self:stretch; background:var(--rand); }

@media (max-width: 940px){
  .buehne-raster{ grid-template-columns:1fr; }
  .buehne-text{ padding-bottom:0; }
  .buehne-wagen{ margin-inline:calc(-1 * var(--rand-aussen)); }
  .buehne-bild{ border-radius:0; }
  .buehne h1{ max-width:16ch; }
}

/* Markenzeile unter der Bühne */
.markenzeile{ border-block:1px solid var(--rand); background:var(--flaeche-2); }
.markenzeile-innen{
  display:flex; align-items:center; gap:clamp(18px, 3.5vw, 44px);
  padding:16px 0; flex-wrap:wrap;
}
.markenzeile-innen .titel{ font-size:var(--t--1); color:var(--leise); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.markenposten{ display:flex; align-items:baseline; gap:8px; font-family:var(--display); }
.markenposten b{ font-size:var(--t-1); font-weight:640; letter-spacing:-.01em; }
.markenposten span{ font-size:var(--t-0); color:var(--leise); font-variant-numeric:tabular-nums; }

/* ---------- Zahlenband ---------- */
.zahlenband{ padding:var(--block) 0 0; }
.zahlenband-raster{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px, 2.5vw, 40px);
}
.kennwert{ border-top:2px solid var(--marine-linie); padding-top:18px; }
.kennwert:first-child{ border-top-color:var(--marine); }
.kennwert b{
  display:block; font-family:var(--display); font-weight:660; letter-spacing:-.025em;
  font-size:var(--t-5); line-height:1; color:var(--tinte);
  font-variant-numeric:tabular-nums;
}
.kennwert b small{ font-size:.55em; font-weight:600; letter-spacing:0; }
.kennwert > span{ display:block; margin-top:8px; color:var(--zart); font-size:var(--t-0); }
@media (max-width: 780px){
  .zahlenband-raster{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Einstiege (asymmetrisches Feld) ---------- */
.einstiege{ padding:var(--block) 0 0; }
.einstiege-raster{
  display:grid; gap:16px;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:clamp(120px, 16vw, 210px);
}
.einstieg{
  position:relative; overflow:hidden; border-radius:var(--radius-gross);
  background:var(--studio);
  display:flex; align-items:end;
  transition:box-shadow .35s var(--takt), transform .35s var(--takt);
}
.einstieg:hover{ box-shadow:var(--schatten-3); transform:translateY(-3px); }
.einstieg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--takt);
}
.einstieg:hover img{ transform:scale(1.045); }
.einstieg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(12deg, oklch(17% .05 275 / .78) 8%, oklch(17% .05 275 / .28) 42%, transparent 66%);
}
.einstieg-inhalt{ position:relative; z-index:2; padding:22px 24px; color:#fff; width:100%; }
.einstieg-inhalt .obertitel{ font-size:var(--t--1); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:oklch(92% .02 270); }
.einstieg-inhalt h3{ color:#fff; font-size:var(--t-3); margin-top:4px; display:flex; align-items:center; gap:10px; }
.einstieg-inhalt h3 svg{ width:20px; height:20px; transition:transform .3s var(--takt); }
.einstieg:hover h3 svg{ transform:translateX(5px); }
.einstieg-inhalt .anzahl{ font-size:var(--t-0); color:oklch(88% .015 270); margin-top:2px; display:block; }
.einstieg-gross{ grid-column:span 7; grid-row:span 2; }
.einstieg-hoch{ grid-column:span 5; grid-row:span 2; }
.einstieg-breit{ grid-column:span 7; }
.einstieg-klein{ grid-column:span 5; }
@media (max-width: 900px){
  .einstiege-raster{ grid-auto-rows:clamp(130px, 22vw, 190px); }
  .einstieg-gross, .einstieg-hoch{ grid-column:span 12; grid-row:span 2; }
  .einstieg-breit, .einstieg-klein{ grid-column:span 6; }
}
@media (max-width: 620px){
  .einstieg-breit, .einstieg-klein{ grid-column:span 12; }
  .einstieg-gross, .einstieg-hoch{ grid-row:span 1; min-height:220px; }
}

/* ---------- Wagenkarten ---------- */
.wagen{
  position:relative; display:flex; flex-direction:column;
  background:var(--flaeche-2);
  border:1px solid var(--rand);
  border-radius:var(--radius-gross);
  overflow:hidden;
  transition:box-shadow .35s var(--takt), transform .35s var(--takt), border-color .35s var(--takt);
}
.wagen:hover{ box-shadow:var(--schatten-2); transform:translateY(-4px); border-color:var(--rand-stark); }
.wagen-bild{ position:relative; display:block; overflow:hidden; background:var(--studio); }
.wagen-bild img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s var(--takt); }
.wagen:hover .wagen-bild img{ transform:scale(1.04); }
.fahne{
  position:absolute; left:12px; top:12px;
  font-size:var(--t--1); font-weight:640;
  padding:5px 11px; border-radius:999px;
  background:oklch(99% .002 265 / .93); color:var(--tinte);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--schatten-1);
}
.fahne-gut{ color:var(--gut); }
.fahne-selten{ color:var(--marine-hell); }
.merken{
  position:absolute; right:12px; top:12px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:oklch(99% .002 265 / .92); color:var(--tinte-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--schatten-1);
  transition:transform .25s var(--takt), color .25s var(--takt), background .25s var(--takt);
}
.merken:hover{ transform:scale(1.1); color:var(--signal); }
.merken svg{ width:17px; height:17px; }
.merken[aria-pressed="true"]{ color:#fff; background:var(--signal); }
.merken[aria-pressed="true"] svg{ fill:currentColor; }
.wagen-koerper{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.wagen-titel b{ display:block; font-family:var(--display); font-weight:640; letter-spacing:-.012em; font-size:var(--t-2); line-height:1.15; }
.wagen-titel span{
  display:block; margin-top:3px; color:var(--leise); font-size:var(--t--1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.wagen-daten{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:var(--t--1); color:var(--tinte-2); font-variant-numeric:tabular-nums; }
.wagen-daten b{ font-weight:560; }
.wagen-preis{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--rand);
  display:flex; align-items:end; justify-content:space-between; gap:10px;
}
.preis-gross{ font-family:var(--display); font-weight:680; letter-spacing:-.02em; font-size:var(--t-3); color:var(--marine); font-variant-numeric:tabular-nums; }
.preis-neben{ font-size:var(--t--1); color:var(--leise); line-height:1.35; }

/* Empfehlungs-Zeile: bricht rechts aus dem Rahmen aus */
.empfehlungen{ padding:var(--block) 0 0; }
.scroller-rahmen{ position:relative; }
.scroller{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(262px, 24vw, 330px);
  gap:18px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:6px calc((100vw - min(1220px, 100vw - 2*var(--rand-aussen))) / 2) 26px;
  margin:0 calc(-1 * (100vw - min(1220px, 100vw - 2*var(--rand-aussen))) / 2);
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{ display:none; }
.scroller > *{ scroll-snap-align:start; }
.scroller-pfeile{ display:flex; gap:8px; }
.scroller-pfeile button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--rand-stark); background:var(--flaeche-2);
  display:grid; place-items:center;
  transition:border-color .2s var(--takt), transform .2s var(--takt), opacity .2s;
}
.scroller-pfeile button:hover{ border-color:var(--marine); transform:translateY(-1px); }
.scroller-pfeile button[disabled]{ opacity:.35; pointer-events:none; }
.scroller-pfeile svg{ width:17px; height:17px; }

/* ---------- Betrieb / Leistungen ---------- */
.leistungen{ padding:var(--block) 0 0; }
.leistungen-raster{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(28px, 4vw, 72px); align-items:start;
}
.leistungen-text p{ color:var(--zart); max-width:46ch; margin-top:14px; }
.leistungen-text .knopf{ margin-top:26px; }
.leistung-feld{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.leistung{
  background:var(--flaeche-2); border:1px solid var(--rand); border-radius:var(--radius);
  padding:18px 18px 16px;
  transition:border-color .3s var(--takt), box-shadow .3s var(--takt), transform .3s var(--takt);
}
.leistung:hover{ border-color:var(--marine-linie); box-shadow:var(--schatten-1); transform:translateY(-2px); }
.leistung svg{ width:21px; height:21px; color:var(--marine-hell); }
.leistung b{ display:block; margin-top:10px; font-weight:640; font-size:var(--t-0); }
.leistung span{ display:block; margin-top:3px; font-size:var(--t--1); color:var(--leise); line-height:1.45; }
@media (max-width: 900px){
  .leistungen-raster{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .leistung-feld{ grid-template-columns:1fr; }
}

/* ---------- Ablauf ---------- */
.ablauf{ padding:var(--block) 0 0; }
.ablauf-raster{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.5vw, 36px); counter-reset:schritt; }
.schritt{ position:relative; padding:26px 0 0; border-top:1px solid var(--rand-stark); }
.schritt::before{
  counter-increment:schritt; content:"0" counter(schritt);
  position:absolute; top:-13px; left:0;
  font-family:var(--display); font-weight:660; font-size:var(--t-0);
  background:var(--papier); padding-right:12px; color:var(--marine);
  font-variant-numeric:tabular-nums;
}
.schritt h3{ font-size:var(--t-2); }
.schritt p{ margin-top:8px; color:var(--zart); font-size:var(--t-0); max-width:34ch; }
@media (max-width: 720px){
  .ablauf-raster{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- Bewertungen ---------- */
.stimmen{ padding:var(--block) 0 0; }
.stimmen-raster{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(28px, 4vw, 64px); }
.stimmen-wert > b{
  font-family:var(--display); font-weight:680; letter-spacing:-.03em;
  font-size:clamp(4rem, 7vw, 6.4rem); line-height:.95; display:block; color:var(--tinte);
}
.stimmen-wert .sterne{ color:var(--gold); font-size:var(--t-3); letter-spacing:.08em; display:block; margin-top:10px; }
.stimmen-wert p{ color:var(--zart); margin-top:10px; font-size:var(--t-0); }
.plattformen{ margin-top:26px; display:grid; gap:9px; }
.plattform{ display:flex; align-items:baseline; gap:10px; font-size:var(--t-0); }
.plattform b{ font-variant-numeric:tabular-nums; min-width:2.2em; }
.plattform span{ color:var(--leise); }
.plattform .balken{ flex:1; height:4px; border-radius:2px; background:var(--flaeche); position:relative; overflow:hidden; align-self:center; }
.plattform .balken i{ position:absolute; inset:0 auto 0 0; background:var(--marine); border-radius:2px; }
.zitate{ display:grid; gap:14px; align-content:start; }
.zitat{
  background:var(--flaeche-2); border:1px solid var(--rand); border-radius:var(--radius-gross);
  padding:20px 22px;
}
.zitat p{ font-size:var(--t-1); line-height:1.5; }
.zitat footer{ margin-top:12px; display:flex; align-items:center; gap:10px; font-size:var(--t--1); color:var(--leise); }
.zitat footer .sterne{ color:var(--gold); }
@media (max-width: 860px){
  .stimmen-raster{ grid-template-columns:1fr; }
}

/* ---------- Ankauf-Band ---------- */
.ankauf-band{ padding:var(--block) 0 0; }
.ankauf-kasten{
  position:relative; overflow:hidden;
  background:linear-gradient(118deg, var(--marine-tief), var(--marine) 55%, oklch(33% .12 272));
  border-radius:calc(var(--radius-gross) + 6px);
  padding:clamp(36px, 5vw, 72px);
  color:#fff;
}
.ankauf-kasten::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(46% 60% at 84% 20%, oklch(60% .12 270 / .25), transparent 70%);
  pointer-events:none;
}
.ankauf-kasten .marke{ color:oklch(78% .06 270); }
.ankauf-kasten h2{ color:#fff; max-width:17ch; margin-top:12px; }
.ankauf-kasten p{ color:oklch(87% .03 270); max-width:52ch; margin-top:14px; font-size:var(--t-1); }
.ankauf-kasten .reihe{ margin-top:28px; position:relative; z-index:2; }
.ankauf-kasten .knopf{ border-color:transparent; }
.ankauf-kasten .knopf-voll{ background:#fff; color:var(--marine); box-shadow:0 14px 34px -12px oklch(0% 0 0 / .5); }
.ankauf-kasten .knopf-voll:hover{ background:oklch(95% .01 270); }
.ankauf-kasten .knopf-rahmen{ background:transparent; border:1px solid oklch(100% 0 0 / .35); color:#fff; }
.ankauf-kasten .knopf-rahmen:hover{ border-color:#fff; background:oklch(100% 0 0 / .08); }

/* ---------- Standort ---------- */
.standort{ padding:var(--block) 0; }
.standort-raster{
  display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:clamp(28px, 4vw, 72px); align-items:start;
}
.standort h2{ max-width:14ch; }
.standort-daten{ margin-top:26px; display:grid; gap:20px; }
.standort-posten{ display:flex; gap:14px; }
.standort-posten svg{ width:19px; height:19px; color:var(--marine-hell); flex:none; margin-top:3px; }
.standort-posten b{ display:block; font-weight:640; font-size:var(--t-0); }
.standort-posten span, .standort-posten a:not(.knopf){ color:var(--zart); font-size:var(--t-0); }
.zeiten-tafel{
  background:var(--flaeche-2); border:1px solid var(--rand); border-radius:var(--radius-gross);
  padding:26px 28px;
}
.zeiten-tafel h3{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.offen-chip{
  font-size:var(--t--1); font-weight:640; font-family:var(--schrift);
  padding:5px 12px; border-radius:999px; letter-spacing:0;
  background:var(--gut-flach); color:var(--gut);
}
.offen-chip[data-zu]{ background:var(--flaeche); color:var(--zart); }
.zeiten-tafel table{ width:100%; margin-top:16px; border-collapse:collapse; font-size:var(--t-0); }
.zeiten-tafel td{ padding:8px 0; border-top:1px solid var(--rand); color:var(--zart); }
.zeiten-tafel td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--tinte-2); }
.zeiten-tafel tr[data-heute] td{ color:var(--tinte); font-weight:640; }
.zeiten-tafel tr[data-heute] td:first-child::after{
  content:"heute"; margin-left:9px; font-size:.72em; font-weight:640;
  color:var(--marine-hell); text-transform:uppercase; letter-spacing:.1em;
}
@media (max-width: 860px){
  .standort-raster{ grid-template-columns:1fr; }
}

/* ---------- Fuß ---------- */
.fuss{ background:var(--flaeche); border-top:1px solid var(--rand); margin-top:var(--block); }
.fuss-raster{
  display:grid; grid-template-columns:2.2fr 1fr 1.2fr 1fr;
  gap:clamp(24px, 3vw, 56px);
  padding:clamp(40px, 5vw, 72px) 0 40px;
}
.fuss h4{ margin-bottom:14px; font-size:var(--t-0); letter-spacing:.02em; }
.fuss ul{ display:grid; gap:8px; }
.fuss a:not(.knopf):hover{ color:var(--marine-hell); }
.fuss .logo img{ height:36px; }
.fuss-unten{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px 0 34px; border-top:1px solid var(--rand);
  color:var(--leise); font-size:var(--t--1);
}
@media (max-width: 860px){
  .fuss-raster{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 540px){
  .fuss-raster{ grid-template-columns:1fr; }
}

/* ---------- Rückruf ---------- */
.ruf{ position:fixed; right:clamp(14px, 2.5vw, 28px); bottom:clamp(14px, 2.5vw, 28px); z-index:55; }
.ruf-knopf{
  display:flex; align-items:center; gap:9px;
  background:var(--marine); color:#fff;
  border-radius:999px; padding:13px 20px;
  font-weight:640; font-size:var(--t-0);
  box-shadow:0 18px 40px -12px oklch(29.8% .106 277 / .65);
  transition:transform .25s var(--takt), box-shadow .25s var(--takt), background .25s var(--takt);
}
.ruf-knopf:hover{ transform:translateY(-2px); background:var(--marine-tief); }
.ruf-knopf svg{ width:16px; height:16px; }
@media (max-width: 560px){
  .ruf-knopf span{ display:none; }
  .ruf-knopf{ padding:15px; }
}

dialog{
  margin:auto;
  border:none; border-radius:var(--radius-gross);
  padding:0; width:min(480px, calc(100vw - 32px));
  box-shadow:var(--schatten-3);
  background:var(--papier); color:var(--tinte);
}
dialog::backdrop{ background:oklch(20% .03 275 / .45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.dialog-kopf{
  display:flex; justify-content:space-between; align-items:start; gap:14px;
  padding:22px 24px 0;
}
.dialog-koerper{ padding:18px 24px 24px; }

/* ---------- Einblendung ---------- */
.auf{ opacity:1; transform:none; }
html.js .auf.auf-warte{ opacity:0; transform:translateY(22px); }
html.js .auf{ transition:opacity .75s var(--takt), transform .75s var(--takt); }
html.js .auf.da{ opacity:1; transform:none; }
.auf[data-takt="2"]{ transition-delay:.08s; }
.auf[data-takt="3"]{ transition-delay:.16s; }
.auf[data-takt="4"]{ transition-delay:.24s; }

/* Bühnen-Auftritt beim Laden */
@keyframes auftritt{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}
@keyframes auftritt-bild{
  from{ opacity:0; transform:translateX(34px) scale(1.015); }
  to{ opacity:1; transform:none; }
}
html.js .buehne-text > *{ animation:auftritt .85s var(--takt) backwards; }
html.js .buehne-text > *:nth-child(1){ animation-delay:.05s; }
html.js .buehne-text > *:nth-child(2){ animation-delay:.14s; }
html.js .buehne-text > *:nth-child(3){ animation-delay:.23s; }
html.js .buehne-text > *:nth-child(4){ animation-delay:.32s; }
html.js .buehne-text > *:nth-child(5){ animation-delay:.41s; }
html.js .buehne-wagen{ animation:auftritt-bild 1s var(--takt) .25s backwards; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html.js .auf.auf-warte{ opacity:1; transform:none; }
}

/* ---------- Kleinkram ---------- */
.trennlinie{ border:none; border-top:1px solid var(--rand); margin:var(--block) 0 0; }
.hinweis{
  background:var(--marine-flach); border:1px solid var(--marine-linie);
  border-radius:var(--radius); padding:14px 18px; font-size:var(--t-0); color:var(--tinte-2);
}
@media print{
  .kopf, .fuss, .ruf, .schublade{ display:none; }
}

/* ---------- Betriebsbilder ---------- */
.betriebsbild{
  position:relative; overflow:hidden;
  border-radius:var(--radius-gross);
  background:var(--studio);
  box-shadow:var(--schatten-2);
  margin:0;
}
.betriebsbild img{ width:100%; height:100%; object-fit:cover; display:block; }
.betriebsbild .foto-marke{
  position:absolute; right:10px; bottom:10px;
  font-size:.66rem; font-weight:600; letter-spacing:.08em;
  color:oklch(99% 0 0 / .95);
  background:oklch(20% .03 270 / .45);
  padding:3px 10px; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}