/* ============================================================
   AUTODIENST KIEL — styles.css
   Premium · Anthrazit + Gold · Sora/Manrope
   ============================================================ */

:root{
  /* Dunkel (Basis) */
  --ink:#0f1219;
  --ink-2:#161a24;
  --ink-3:#1e2330;
  --line-dark:#2a303f;
  /* Gold (Akzent) */
  --gold:#f5a623;
  --gold-2:#ffbe45;
  --gold-deep:#d98a12;
  /* Hell */
  --paper:#f6f5f2;
  --paper-2:#efece6;
  --white:#ffffff;
  /* Text */
  --text:#16181f;
  --muted:#5c6270;
  --text-inv:#f3f2ef;
  --muted-inv:#9aa1b0;
  /* Sonstiges */
  --red:#c9564b;
  --green:#3f9d6b;
  --line-light:#eae7e0;
  --radius:16px;
  --shadow-card:0 10px 30px rgba(15,18,25,.08);
  --shadow-card-hover:0 18px 44px rgba(15,18,25,.14);
  --shadow-gold:0 10px 28px rgba(245,166,35,.35);
  --font-head:"Sora",sans-serif;
  --font-body:"Manrope",sans-serif;
  --header-h:78px;
  /* Inhaltsbreite -- .wrap und das Hero-Bildband teilen sie sich */
  --wrap-max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist hier Pflicht, nicht Kosmetik: Die Bilder tragen ihre
   echten Masse als width/height-Attribute (gegen CLS). Ohne height:auto
   begrenzt max-width zwar die Breite, die Hoehe bleibt aber beim
   Attributwert stehen -- das Bild wird vertikal gestreckt. Aufgefallen
   auf der Ueber-uns-Seite, wo 1200x798 in einer schmalen Spalte auf
   voller Hoehe stehen blieb. Die Attribute bleiben erhalten, der
   Browser leitet daraus weiter das Seitenverhaeltnis ab. */
img{max-width:100%;height:auto;display:block}
/* [hidden] muss staerker sein als jede Klasse, die display setzt.
   Das Browser-Standardstylesheet bringt zwar [hidden]{display:none} mit,
   aber jede Autoren-Regel schlaegt es -- und .form-success setzt
   display:flex. Folge: Die Erfolgsmeldung "Ihre Anfrage ist bei uns
   eingegangen" stand auf der Kontaktseite dauerhaft da, ohne dass jemand
   etwas abgeschickt hatte. Wer das las, hielt seine Anfrage fuer raus.
   Betraf ebenso das HU-Formular (.hu-success) und den Avatar im
   Rezensions-Slider. */
[hidden]{display:none!important}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em}
h1{font-weight:800;font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-weight:700;font-size:1.18rem}
p{margin:0 0 1em}
::selection{background:var(--gold);color:#231704}

.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--dark{background:var(--ink);color:var(--text-inv)}
.section--dark2{background:var(--ink-2);color:var(--text-inv)}
.section--paper2{background:var(--paper-2)}
.section--tight{padding:64px 0}

/* ---------- Kicker / Eyebrow ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--gold);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.22em;margin-bottom:14px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.section-head{max-width:640px;margin-bottom:52px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head--center .kicker{justify-content:center}
.section-head p{color:var(--muted);font-size:1.05rem}
.section--dark .section-head p,.section--dark2 .section-head p{color:var(--muted-inv)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:100px;font-weight:700;font-size:.95rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#231704;box-shadow:var(--shadow-gold)}

/* Ladezustand des Absende-Knopfes.
   Die Buchung braucht auf dem Server mehrere Sekunden (Termin schreiben, zwei
   Mails, Google-Kalender). Der Knopf zeigt das an, statt nur grau zu werden —
   ein stummer, deaktivierter Knopf sieht aus wie eine kaputte Seite.
   Hover-Effekte sind dabei aus: Der Knopf soll nicht mehr einladend wirken,
   er arbeitet gerade. */
.btn.is-busy{cursor:progress;transform:none}
.btn.is-busy:hover{transform:none;box-shadow:var(--shadow-gold)}
.btn-spinner{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* Ohne Bewegung bleibt ein ruhiger Punkt, der sanft pulsiert — die Auskunft
   „es läuft" darf nicht an der Drehung hängen. */
@media (prefers-reduced-motion:reduce){
  .btn-spinner{animation:btnPulse 1.4s ease-in-out infinite;border-top-color:currentColor}
  @keyframes btnPulse{50%{opacity:.3}}
}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,166,35,.45)}
.btn-ghost{background:transparent;color:var(--text-inv);border:1.5px solid rgba(243,242,239,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--text-inv)}
.btn-dark:hover{background:var(--ink-3);transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,18,25,.25)}
.btn-lg{padding:17px 34px;font-size:1.02rem}
.btn-sm{padding:10px 20px;font-size:.85rem}

/* ---------- Icon-Badges ---------- */
.icon-badge{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--gold-deep);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.icon-badge svg{width:26px;height:26px}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(15,18,25,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(42,48,63,.6);
  color:var(--text-inv);
  transition:background .3s ease;
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand__tile{
  width:46px;height:46px;border-radius:12px;flex:none;overflow:hidden;
  box-shadow:0 4px 14px rgba(245,166,35,.35);
}
.brand__tile img{width:100%;height:100%;object-fit:cover}
.brand__name{font-family:var(--font-head);font-weight:800;font-size:1.02rem;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
.brand__name em{font-style:normal;color:var(--gold)}
.brand__sub{font-size:.6rem;font-weight:700;letter-spacing:.42em;color:var(--muted-inv);text-transform:uppercase}

.nav{display:flex;gap:6px}
/* Nur die direkten Kinder sind Menüpunkte -- die Links im Social-Ausklapper
   liegen ebenfalls in .nav und dürfen die Pillen-Optik nicht erben. */
.nav > a,.nav__drop-btn{
  padding:9px 15px;border-radius:100px;font-weight:600;font-size:.93rem;
  color:var(--muted-inv);transition:color .2s ease,background .2s ease;
  /* Die Leiste ist eng; ohne das bricht "Über uns" zweizeilig um und
     macht den Kopf höher. */
  white-space:nowrap;
}
.nav > a:hover,.nav__drop-btn:hover{color:var(--text-inv)}
.nav > a.is-active,.nav__drop-btn.is-active{color:var(--gold);background:rgba(245,166,35,.09)}

/* ---------- Social-Ausklapper in der Kopfnavigation ---------- */
.nav__drop{position:relative;display:flex}
.nav__drop-btn{display:flex;align-items:center;gap:7px}
.nav__drop-btn::after{
  content:"";width:6px;height:6px;flex:none;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);
  transition:transform .25s ease;
}
.nav__drop:hover .nav__drop-btn::after,
.nav__drop:focus-within .nav__drop-btn::after,
.nav__drop.is-open .nav__drop-btn::after{transform:rotate(-135deg) translate(-2px,-1px)}
.nav__drop:hover .nav__drop-btn,
.nav__drop:focus-within .nav__drop-btn{color:var(--text-inv)}
/* Unsichtbare Brücke über die Lücke zum Panel: ohne sie klappt das Menü zu,
   sobald die Maus den Zwischenraum überquert. */
.nav__drop::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:14px;
}
.nav__menu{
  position:absolute;top:calc(100% + 12px);left:50%;
  width:266px;padding:8px;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transform:translate(-50%,-8px) scale(.97);transform-origin:top center;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility .22s;
  z-index:120;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu,
.nav__drop.is-open .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
/* Spitze zum Auslöser */
.nav__menu::before{
  content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;
  margin-left:-6px;transform:rotate(45deg);
  background:var(--ink-2);border-left:1px solid var(--line-dark);border-top:1px solid var(--line-dark);
  border-radius:2px;
}
.nav__menu a{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 11px;border-radius:13px;
  color:var(--muted-inv);white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.nav__menu a:hover,.nav__menu a:focus-visible{background:var(--ink-3);color:var(--text-inv)}
.nav__menu a.is-active{color:var(--gold)}
.nav__ico{
  width:38px;height:38px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:transform .25s ease,box-shadow .25s ease;
}
.nav__ico svg{width:19px;height:19px}
/* Kanalfarben nur hier, als kleiner Akzent auf dunklem Grund */
.nav__ico--tt{background:#111;box-shadow:2px 2px 0 rgba(254,44,85,.75),-2px -2px 0 rgba(37,244,238,.75)}
.nav__ico--ig{background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%)}
.nav__menu a:hover .nav__ico{transform:scale(1.07)}
.nav__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav__txt strong{font-size:.92rem;font-weight:700;line-height:1.2;color:inherit}
.nav__txt small{font-size:.74rem;color:var(--muted-inv);opacity:.75;letter-spacing:.01em}
.nav__go{
  margin-left:auto;width:15px;height:15px;flex:none;color:var(--muted-inv);
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease,transform .2s ease;
}
.nav__menu a:hover .nav__go{opacity:1;transform:translateX(0);color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .nav__menu,.nav__ico,.nav__go,.nav__drop-btn::after{transition:none}
}

/* Social-Gruppe im Mobilmenü: dort gibt es kein Überfahren, deshalb stehen
   beide Kanäle offen da -- nur mit Überschrift zusammengefasst. */
.mobile-nav__cap{
  margin:14px 0 2px;font-family:var(--font-head);font-weight:700;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-inv);opacity:.6;
}
.mobile-nav__social{display:flex;align-items:center;gap:11px}
.mobile-nav__social .nav__ico{width:30px;height:30px;border-radius:9px}
.mobile-nav__social .nav__ico svg{width:16px;height:16px}

.header__cta{display:flex;align-items:center;gap:16px}
.header__phone{display:flex;align-items:center;gap:10px;line-height:1.3}
.header__phone svg{width:20px;height:20px;color:var(--gold);flex:none}
.header__phone small{display:block;font-size:.6rem;color:var(--muted-inv);text-transform:uppercase;letter-spacing:.13em;font-weight:700;margin-bottom:1px}
/* Zwei Telefonnummern untereinander: ohne Polsterung sind die Links nur
   22 px hoch und liegen aneinander - Lighthouse fordert min. 24x24 px
   Zielflaeche mit Abstand. */
.header__phone a{display:block;padding:3px 0}
.header__phone strong{font-size:.8rem;font-weight:800;white-space:nowrap;transition:color .2s ease}
.header__phone a:hover strong{color:var(--gold-2)}

/* Sprachumschalter */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:100px;
  border:1.5px solid rgba(243,242,239,.22);font-weight:700;font-size:.82rem;
  color:var(--text-inv);letter-spacing:.06em;transition:border-color .2s ease;
}
.lang__btn:hover{border-color:var(--gold)}
.lang__btn svg{width:16px;height:16px;color:var(--gold)}
.lang__btn::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.lang.is-open .lang__btn::after{transform:rotate(-135deg) translateY(-2px)}
.lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:170px;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;
  padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border-radius:9px;font-weight:600;font-size:.9rem;color:var(--muted-inv);text-align:left;
}
.lang__menu button:hover{background:var(--ink-3);color:var(--text-inv)}
.lang__menu button.is-active{color:var(--gold)}
.lang__menu button .flag{font-size:1rem}

.burger{display:none;width:44px;height:44px;border-radius:12px;position:relative;z-index:110}
.burger span{
  display:block;width:22px;height:2px;background:var(--text-inv);margin:5px auto;
  border-radius:2px;transition:transform .3s ease,opacity .3s ease;
}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:105;background:rgba(15,18,25,.98);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav a{
  font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--text-inv);
  padding:10px 24px;border-radius:14px;
}
.mobile-nav a.is-active{color:var(--gold)}
.mobile-nav .btn{margin-top:18px}
.mobile-nav__langs{display:flex;gap:10px;margin-top:26px}
.mobile-nav__langs button{
  padding:9px 16px;border-radius:100px;border:1.5px solid rgba(243,242,239,.25);
  color:var(--muted-inv);font-weight:700;font-size:.85rem;letter-spacing:.08em;
}
.mobile-nav__langs button.is-active{border-color:var(--gold);color:var(--gold)}

/* ---------- Hero ----------
   Statt des gerahmten Werkstattfotos rechts liegt jetzt das Aussenbild
   (Gebaeude mit Schriftzug, davor die beiden Fahrzeuge) als Hintergrund
   hinter dem oberen Teil des Heros. Die Textspalte sitzt links auf der
   ruhigen Baumseite, beide Fahrzeuge bleiben in voller Breite sichtbar.
   ----------------------------------------------------------------- */
.hero{
  color:var(--text-inv);
  background:var(--ink);
  position:relative;overflow:hidden;
}

/* Der Hero ist zweigeteilt: oben das Foto bis knapp unter die
   Vertrauenspunkte, darunter ein ruhiger dunkler Streifen fuer
   Google-Wertung, Aktionspille, Siegel und Leistungspillen. Der Schnitt
   haengt an der Textmenge, nicht an einem festen Pixelwert -- die
   russische Ueberschrift ist deutlich laenger als die deutsche. */
.hero__top{
  position:relative;
  /* Die Textspalte beginnt bewusst erst unterhalb des Schriftzugs im Foto:
     "AUTODIENST KIEL" soll frei stehen, der Text sitzt darunter auf den
     dunklen Fahrzeugen -- dort traegt er ohne viel Abdunklung. */
  padding:calc(var(--header-h) + 116px) 0 40px;
  min-height:clamp(640px,50vw,740px);
}
.hero__bottom{
  position:relative;z-index:2;
  background:var(--ink);
  padding:0 0 76px;
}

/* Das Bild laeuft bewusst NICHT ueber die volle Fensterbreite, sondern
   endet an der Inhaltsbreite: sonst skaliert es auf grossen Schirmen so
   weit hoch, dass der Schriftzug oben aus dem Bild wandert. Zusammen mit
   dem festen Seitenverhaeltnis bleibt das Motiv damit auf jeder Breite
   vollstaendig -- beide Fahrzeuge und "AUTODIENST KIEL" ueber ihnen. */
.hero__bg,.hero__veil{
  position:absolute;top:0;left:0;right:0;bottom:auto;
  max-width:var(--wrap-max);margin-inline:auto;
  aspect-ratio:1672/941;
}
.hero__bg{z-index:0}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 26%;
  /* Das Foto ist deutlich waermer und satter als der Rest der Seite --
     leicht entsaettigt und abgedunkelt fuegt es sich in die Tonalitaet ein. */
  filter:saturate(.84) contrast(1.06) brightness(.92);
}
/* Der Auslauf haengt am Band selbst, nicht am Hero -- so sitzt die Kante
   immer exakt am Bildende, egal wie hoch die Sektion gerade ist. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(128% 112% at 50% 46%,transparent 52%,rgba(15,18,25,.45) 84%,rgba(15,18,25,.7) 100%),
    linear-gradient(90deg,var(--ink),transparent 3.5%,transparent 96.5%,var(--ink)),
    linear-gradient(180deg,transparent 58%,rgba(15,18,25,.16) 78%,rgba(15,18,25,.62) 92%,var(--ink) 100%);
}

/* Schleier in drei Lagen: links dicht fuer die Lesbarkeit, rechts offen
   fuers Motiv, oben abgedunkelt unter dem Header, dazu der Goldschimmer
   der uebrigen Seite. Den unteren Auslauf macht .hero__bg::after. */
.hero__veil{
  z-index:1;pointer-events:none;
  background:
    linear-gradient(101deg,
      rgba(15,18,25,.72) 0%,
      rgba(15,18,25,.6) 26%,
      rgba(15,18,25,.36) 44%,
      rgba(15,18,25,.15) 60%,
      rgba(15,18,25,.04) 76%,
      rgba(15,18,25,.18) 100%),
    linear-gradient(180deg,rgba(15,18,25,.82) 0%,rgba(15,18,25,.46) 7%,rgba(15,18,25,.12) 15%,transparent 23%),
    radial-gradient(780px 430px at 86% 6%,rgba(245,166,35,.16),transparent 62%);
}

/* Textspalte und Leistungspillen liegen ueber Bild und Schleier */
.hero__top > .wrap{position:relative;z-index:2}
.hero__copy{max-width:660px;position:relative}
/* Der Werkstattschriftzug im Foto ist selbst gross und kontrastreich und
   wuerde ohne diese weiche Wanne mit der Headline konkurrieren. Sie sitzt
   bewusst nur hinter der Textspalte -- der Rest bleibt offen, damit beide
   Fahrzeuge zu sehen sind. */
.hero__copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-92px;bottom:-64px;left:-460px;right:-150px;
  background:radial-gradient(ellipse at 44% 48%,
    rgba(15,18,25,.6) 0%,rgba(15,18,25,.26) 52%,transparent 74%);
}
.hero h1{text-shadow:0 2px 30px rgba(15,18,25,.7)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lead{color:rgba(243,242,239,.88);font-size:1.13rem;max-width:540px;margin-bottom:34px;text-shadow:0 1px 12px rgba(15,18,25,.8)}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero__trust{display:flex;gap:26px;flex-wrap:wrap;padding:0;margin:0}
.hero__trust li{display:flex;align-items:center;gap:9px;list-style:none;font-size:.9rem;font-weight:600;color:rgba(243,242,239,.9);text-shadow:0 1px 10px rgba(15,18,25,.85)}
.hero__trust svg{width:18px;height:18px;color:var(--gold);flex:none}

/* Pruefsiegel stehen direkt neben den Buttons: dort belegen sie die Zeile
   mit, die ohnehin da ist, statt eine eigene Reihe unter dem Text zu
   oeffnen. Der senkrechte Strich trennt sie von "Alle Leistungen". */
.hero__certs{
  display:flex;gap:14px;align-items:center;
  padding-left:22px;margin-left:6px;
  border-left:1px solid rgba(243,242,239,.18);
}
.hero__cert{
  width:58px;height:58px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.hero__cert img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));
}

/* ---------- Markenleiste (echte Logos in weißen Pills) ---------- */
.brands{background:var(--ink-2);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:26px 0;overflow:hidden}
.brands__track{display:flex;gap:28px;width:max-content;animation:marquee 30s linear infinite}
.brands:hover .brands__track{animation-play-state:paused}
.brands__track span{
  display:flex;align-items:center;justify-content:center;flex:none;
  min-width:150px;height:66px;padding:0 34px;
  background:var(--white);border-radius:100px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.brands__logo{height:36px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:640px){
  .brands__track{gap:16px}
  .brands__track span{min-width:110px;height:54px;padding:0 24px}
  .brands__logo{height:28px}
}

/* ---------- Karten ---------- */
.card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:30px 28px;transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.card:hover .icon-badge{background:var(--gold);color:#231704;transform:scale(1.06)}
.card h3{margin:18px 0 8px}
.card p{color:var(--muted);font-size:.95rem;margin:0}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.section-foot{text-align:center;margin-top:46px}

/* Leistungs-Karte mit Foto */
.svc-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svc-card__img{height:190px;overflow:hidden;position:relative}
.svc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-card:hover .svc-card__img img{transform:scale(1.06)}
.svc-card__body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.svc-card__body h3{margin:0 0 8px;display:flex;align-items:center;gap:10px}
.svc-card__body p{flex:1}
.svc-card__link{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:.88rem;color:var(--gold-deep);
}
.svc-card__link svg{width:15px;height:15px;transition:transform .2s ease}
/* Zwei Aktionen je Kachel: Detailseite und Terminbuchung. Ohne den
   Container stapeln sich die margin-top der Links zu weit auseinander. */
.svc-card__actions{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.svc-card__actions .svc-card__link{margin-top:0}

/* Schrittnummer auf den Leistungsseiten. Nicht .stat__num nehmen --
   dort haengt ::after ein "+" an die Zahl (fuer Angaben wie 500+). */
.step-num{
  font-family:var(--font-head);font-weight:800;font-size:2rem;
  color:var(--gold-deep);line-height:1;letter-spacing:-.02em;margin-bottom:10px;
}
/* Autorzeile der Kundenstimmen auf hellem Grund. */
.review-card figcaption{color:var(--muted);font-size:.9rem}
.review-card figcaption strong{color:var(--text)}
.svc-price-tag{
  position:absolute;top:12px;right:-6px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  background:var(--gold);color:#231704;
  padding:8px 14px 8px 16px;border-radius:12px 0 0 12px;
  box-shadow:var(--shadow-gold);transform:rotate(2deg);
}
.svc-price-tag strong{font-family:var(--font-head);font-weight:800;font-size:1rem;line-height:1.2}
.svc-price-tag small{font-size:.68rem;font-weight:700;opacity:.85}
.svc-card:hover .svc-price-tag{transform:rotate(0deg)}

/* Preisliste in der Leistungskarte (HU/AU: Pkw, E-Auto, Anhaenger) */
.svc-prices{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--line-light)}
.svc-prices li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:.9rem;color:var(--muted);
}
.svc-prices li+li{border-top:1px dashed var(--line-light)}
.svc-prices strong{font-weight:800;color:var(--ink);white-space:nowrap}
.svc-card:hover .svc-card__link svg{transform:translateX(4px)}

/* ---------- Warum wir (dunkel) ---------- */
.value-card{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:32px 28px;transition:transform .25s ease,border-color .25s ease;
}
.value-card:hover{transform:translateY(-5px);border-color:rgba(245,166,35,.45)}
.value-card .icon-badge{background:var(--ink-3);color:var(--gold)}
.value-card:hover .icon-badge{background:var(--gold);color:#231704}
.value-card h3{margin:18px 0 8px;color:var(--text-inv)}
.value-card p{color:var(--muted-inv);font-size:.95rem;margin:0}

/* ---------- Statistiken ---------- */
.stats{background:var(--ink-2);border-top:1px solid var(--line-dark)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat{padding:26px 10px;border-radius:var(--radius);position:relative}
.stat + .stat::before{content:"";position:absolute;left:-11px;top:22%;bottom:22%;width:1px;background:var(--line-dark)}
.stat__num{
  font-family:var(--font-head);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);
  color:var(--gold);line-height:1;letter-spacing:-.02em;
}
.stat__num::after{content:"+";color:var(--gold-2)}
.stat__label{margin-top:10px;color:var(--muted-inv);font-weight:600;font-size:.92rem}

/* ---------- Bewertungen ---------- */
.review-card{display:flex;flex-direction:column;gap:14px}
.review-card .stars{color:var(--gold);letter-spacing:.14em;font-size:.95rem}
.review-card blockquote{margin:0;font-size:.98rem;color:var(--text);flex:1}
.review-card figcaption{display:flex;align-items:center;gap:12px}
.review-card .avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--gold);font-family:var(--font-head);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.review-card figcaption strong{display:block;font-size:.92rem}
.review-card figcaption small{color:var(--muted);font-size:.78rem}
.google-pill{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid var(--line-light);border-radius:100px;padding:10px 20px;
  font-weight:700;font-size:.9rem;box-shadow:var(--shadow-card);
  /* Die Pille ist immer weiss - auch im dunklen Footer. Ohne eigene
     Textfarbe erbt sie dort --muted-inv (heller Grauton fuer dunklen
     Grund) und kommt auf 2,59:1. --muted erreicht 6,11:1. */
  color:var(--muted);
}
.google-pill .stars{color:var(--gold);letter-spacing:.1em}

/* Nur fuer Screenreader: Gliederungsueberschriften, die optisch nicht
   noetig sind. Ohne sie springen Unterseiten von h1 direkt auf h3. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   LEISTUNGS-PILLS IM HERO
   Alle Leistungen auf einen Blick, direkt unter den Vertrauens-
   punkten. Bewusst zurückhaltend: Sie sollen die Überschrift
   stützen, nicht mit ihr konkurrieren.
   ============================================================ */
.hero__pills{
  list-style:none;margin:0;padding:44px 0 0;
  display:flex;flex-wrap:wrap;gap:9px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:46px;
}
.hero__pills a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border-radius:999px;text-decoration:none;
  font-size:.805rem;font-weight:600;letter-spacing:.005em;
  color:var(--text-inv);
  background:rgba(15,18,25,.42);
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .28s cubic-bezier(.22,1,.36,1),background .28s ease,
             border-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.hero__pills svg{
  width:15px;height:15px;flex:none;
  color:var(--muted-inv);transition:color .28s ease,transform .28s ease;
}
.hero__pills a:hover,.hero__pills a:focus-visible{
  background:rgba(245,166,35,.12);
  border-color:rgba(245,166,35,.55);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(245,166,35,.18);
  outline:none;
}
.hero__pills a:hover svg,.hero__pills a:focus-visible svg{
  color:var(--gold);transform:scale(1.08);
}
.hero__pills a:focus-visible{box-shadow:0 0 0 3px rgba(245,166,35,.32)}

/* Sammel-Pill: führt zu den übrigen Leistungen, deshalb in Gold abgesetzt */
.hero__pills-alle{
  padding-left:15px !important;
  color:var(--gold) !important;
  border-color:rgba(245,166,35,.4) !important;
  background:rgba(245,166,35,.07) !important;
}
.hero__pills-alle::after{
  content:"→";margin-left:2px;font-size:.95em;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.hero__pills-alle:hover::after{transform:translateX(3px)}

/* Gestaffeltes Einblenden – die Reihe baut sich auf, statt zu erscheinen */
.hero__pills li{opacity:0;transform:translateY(10px);animation:pillRein .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes pillRein{to{opacity:1;transform:none}}
.hero__pills li:nth-child(1){animation-delay:.30s}
.hero__pills li:nth-child(2){animation-delay:.35s}
.hero__pills li:nth-child(3){animation-delay:.40s}
.hero__pills li:nth-child(4){animation-delay:.45s}
.hero__pills li:nth-child(5){animation-delay:.50s}
.hero__pills li:nth-child(6){animation-delay:.55s}
.hero__pills li:nth-child(7){animation-delay:.60s}
.hero__pills li:nth-child(8){animation-delay:.65s}
.hero__pills li:nth-child(9){animation-delay:.70s}
.hero__pills li:nth-child(10){animation-delay:.75s}
.hero__pills li:nth-child(11){animation-delay:.80s}
.hero__pills li:nth-child(12){animation-delay:.85s}
.hero__pills li:nth-child(13){animation-delay:.90s}
.hero__pills li:nth-child(14){animation-delay:.95s}

/* ---------- Macher-Pill: Website realisiert von pixagentur.com ---------- */
.madeby{
  --pix:#1668ff;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  width:80%;max-width:840px;margin:40px auto 0;
  padding:10px 12px 10px 24px;
  background:var(--white);
  border:1px solid rgba(245,166,35,.42);
  border-radius:999px;
  box-shadow:0 14px 36px rgba(0,0,0,.30);
  color:var(--ink);text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .32s ease,box-shadow .32s ease;
}
/* Lichtstreifen, der in Ruhe alle paar Sekunden einmal durchläuft */
.madeby::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(22,104,255,.13) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:madebyGlanz 7s ease-in-out 2.5s infinite;
}
@keyframes madebyGlanz{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.madeby:hover,.madeby:focus-visible{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 20px 44px rgba(0,0,0,.38);
  outline:none;
}
.madeby:focus-visible{box-shadow:0 0 0 3px rgba(245,166,35,.45),0 20px 44px rgba(0,0,0,.38)}

.madeby__by{display:flex;align-items:center;gap:13px;min-width:0}
.madeby__eyebrow{
  font-size:.62rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:#8b9099;white-space:nowrap;
}
.madeby__logo{height:30px;width:auto;display:block;flex:none}

.madeby__claim{
  display:flex;align-items:center;gap:16px;min-width:0;
  font-size:.9rem;color:#5c626d;
}
.madeby__claim b{font-weight:800;color:var(--ink)}
.madeby__go{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pix);color:#fff;
  font-size:1rem;font-weight:700;line-height:1;
  transition:transform .32s cubic-bezier(.22,1,.36,1),background .32s ease;
}
.madeby:hover .madeby__go{transform:translateX(3px);background:#0b4fd0}

@media (max-width:900px){
  .madeby{
    width:100%;flex-wrap:wrap;justify-content:center;gap:12px;
    border-radius:28px;padding:16px 18px;text-align:center;
  }
  .madeby__by{justify-content:center}
  .madeby__claim{justify-content:center;font-size:.85rem;gap:12px}
}
@media (max-width:480px){
  .madeby__eyebrow{display:none}
  .madeby__logo{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .madeby::before{animation:none}
  .madeby:hover,.madeby:focus-visible{transform:none}
}

@media (max-width:900px){
  .hero__pills{margin-top:40px;padding-top:34px}
}
@media (max-width:640px){
  .hero__pills{gap:7px;margin-top:32px;padding-top:28px}
  .hero__pills a{padding:7px 13px 7px 10px;font-size:.78rem}
  .hero__pills svg{width:14px;height:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero__pills li{opacity:1;transform:none;animation:none}
  .hero__pills a,.hero__pills svg{transition:none}
  .hero__pills a:hover{transform:none}
}

/* Angesprungene Leistungskarte kurz hervorheben */
.svc-card:target{
  box-shadow:0 0 0 2px var(--gold),var(--shadow-card-hover);
  scroll-margin-top:calc(var(--header-h) + 24px);
}

/* ============================================================
   REZENSIONS-SLIDER
   Dunkle Bühne im hellen Abschnitt: der Kontrast lässt das Gold
   arbeiten. Bewegung über CSS-Scroll-Snap – dadurch funktioniert
   Wischen auf dem Handy ohne eine Zeile Drag-Code.
   ============================================================ */
.rv{--rv-card:clamp(280px,30vw,384px);position:relative}

.rv__stage{
  position:relative;border-radius:26px;padding:44px 0 40px;
  background:
    radial-gradient(120% 100% at 12% 0%,rgba(245,166,35,.16) 0%,transparent 58%),
    radial-gradient(90% 90% at 92% 100%,rgba(245,166,35,.10) 0%,transparent 55%),
    linear-gradient(160deg,var(--ink-2) 0%,var(--ink) 62%);
  box-shadow:0 28px 70px rgba(15,18,25,.22),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
/* feine Körnung – nimmt den Flächen das Digitale */
.rv__stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.rv__viewport{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 0 22px;
  scrollbar-width:none;-ms-overflow-style:none;
  /* weiche Ränder statt harter Schnittkanten */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.rv__viewport::-webkit-scrollbar{display:none}
.rv__viewport:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:18px}

.rv__track{display:flex;gap:22px;margin:0;padding:0 clamp(20px,6vw,64px);list-style:none}
.rv__slide{flex:0 0 var(--rv-card);scroll-snap-align:center}

.rv-card{
  position:relative;height:100%;margin:0;display:flex;flex-direction:column;gap:16px;
  padding:34px 28px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(2px);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s ease,box-shadow .4s ease;
}
/* Signatur: das Anführungszeichen bricht über die Kartenkante hinaus */
.rv-card__mark{
  position:absolute;top:-26px;left:18px;font-family:var(--font-head);
  font-size:112px;line-height:1;color:var(--gold);opacity:.22;
  pointer-events:none;user-select:none;
}
.rv-card__stars{color:var(--gold);letter-spacing:.16em;font-size:.9rem}
.rv-card__text{
  margin:0;flex:1;color:var(--text-inv);font-size:1rem;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.rv-card.is-open .rv-card__text{-webkit-line-clamp:unset;overflow:visible}
.rv-card__more{
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font:600 .82rem/1 var(--font-body);color:var(--gold);letter-spacing:.02em;
}
.rv-card__more:hover{color:var(--gold-2);text-decoration:underline}
.rv-card__foot{display:flex;align-items:center;gap:13px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.rv-card__avatar{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font:700 .84rem/1 var(--font-head);letter-spacing:.03em;color:#22180a;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 6px 16px rgba(245,166,35,.28);
}
.rv-card__who strong{display:block;font-size:.94rem;color:var(--text-inv);font-family:var(--font-head)}
.rv-card__who small{color:var(--muted-inv);font-size:.76rem}

/* aktive Karte hervorheben – ruhig, nicht zappelig */
.rv-card.is-active{
  border-color:rgba(245,166,35,.42);
  box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(245,166,35,.14);
  transform:translateY(-6px);
}

/* Navigation */
.rv__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.94);border:0;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  transition:transform .25s ease,background .25s ease,opacity .25s ease;
}
.rv__nav svg{width:20px;height:20px}
.rv__nav--prev{left:10px}
.rv__nav--next{right:10px}
.rv__nav:hover{background:var(--gold);transform:translateY(-50%) scale(1.08)}
.rv__nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rv__nav[disabled]{opacity:.28;pointer-events:none}

/* Fuß: Punkte + Google-Link */
.rv__foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:22px;padding:0 4px;
}
.rv__dots{display:flex;gap:9px;flex-wrap:wrap}
.rv__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(22,24,31,.2);transition:width .3s ease,background .3s ease;
}
.rv__dot.is-active{width:26px;border-radius:5px;background:var(--gold-deep)}
.rv__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rv__count{
  font:700 .9rem/1 var(--font-head);color:var(--muted);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.rv__all{
  font-weight:700;font-size:.9rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease;
}
.rv__all:hover{color:var(--text);border-bottom-color:var(--gold)}

@media (max-width:640px){
  .rv__stage{border-radius:20px;padding:34px 0 30px}
  .rv__nav{display:none}
  .rv-card{padding:30px 22px 22px}
  .rv-card__mark{font-size:88px;top:-20px}
  .rv__foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .rv__viewport{scroll-behavior:auto}
  .rv-card,.rv__nav,.rv__dot{transition:none}
  .rv-card.is-active{transform:none}
}

/* ---------- Öffnungszeiten + CTA ---------- */
.hours-cta{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
.hours{background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);padding:36px}
.hours table{width:100%;border-collapse:collapse}
.hours td{padding:13px 4px;border-bottom:1px solid var(--line-light);font-size:.98rem}
.hours tr:last-child td{border-bottom:none}
.hours td:last-child{text-align:right;font-weight:700}
.hours .closed{color:var(--red)}
.hours .today td{color:var(--gold-deep);font-weight:800}
.open-badge{
  display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  padding:8px 16px;font-weight:700;font-size:.85rem;margin-bottom:18px;
  background:rgba(63,157,107,.12);color:var(--green);
}
.open-badge.is-closed{background:rgba(201,86,75,.1);color:var(--red)}
.open-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.8s ease infinite}
@keyframes pulse{50%{opacity:.35}}

.cta-card{
  background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);
  color:var(--text-inv);border-radius:var(--radius);padding:44px 40px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.cta-card::before{
  content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.22),transparent 70%);
}
.cta-card h3{font-size:1.6rem;color:var(--text-inv)}
.cta-card p{color:var(--muted-inv);margin-bottom:26px}
.cta-card .btn{align-self:flex-start}

/* ---------- Gold-CTA-Strip ---------- */
.strip{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 45%,var(--gold-2));
  color:#231704;padding:56px 0;
}
.strip__in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.strip h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.strip p{margin:6px 0 0;font-weight:600;opacity:.85}
.strip .btn-dark:hover{background:#000}

/* ---------- Page-Hero (Unterseiten) ---------- */
.page-hero{
  background:
    radial-gradient(700px 380px at 85% -20%,rgba(245,166,35,.14),transparent 60%),
    var(--ink);
  color:var(--text-inv);
  padding:calc(var(--header-h) + 74px) 0 74px;
}
.page-hero p{color:var(--muted-inv);font-size:1.1rem;max-width:600px;margin:0}

/* ---------- Kontakt ---------- */
.contact-card{display:flex;gap:18px;align-items:flex-start}
.contact-card h3{margin:0 0 6px;font-size:1.05rem}
.contact-card p{margin:0;font-size:.94rem}
.contact-card a{color:var(--gold-deep);font-weight:700}
.contact-card a:hover{text-decoration:underline}

.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-light);box-shadow:var(--shadow-card);line-height:0}
.map-frame iframe{width:100%;height:420px;border:0;filter:grayscale(.25) contrast(1.02)}
.map-consent{
  line-height:1.65;background:var(--white);min-height:420px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-image:radial-gradient(circle at 1px 1px,var(--line-light) 1.5px,transparent 0);
  background-size:26px 26px;
}
.map-consent__inner{max-width:440px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.map-consent__inner h3{margin:10px 0 0}
.map-consent__inner p{color:var(--muted);font-size:.9rem;margin:0 0 12px}
.map-consent__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:700;font-size:.85rem}
.field .req{color:var(--gold-deep)}
.input{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line-light);
  background:var(--white);font-size:.96rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
textarea.input{resize:vertical;min-height:110px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .span-2{grid-column:span 2}
.form-note{font-size:.82rem;color:var(--muted)}
.hint-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;margin-left:7px;vertical-align:-3px;
  background:var(--paper-2);border:1.5px solid var(--line-light);
  color:var(--gold-deep);font-size:.72rem;font-weight:800;line-height:1;
  transition:all .2s ease;
}
.hint-btn:hover{background:var(--gold);border-color:var(--gold);color:#231704}
.field-hint{
  margin:8px 0 0;padding:11px 14px;border-radius:10px;
  background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.35);
  color:var(--muted);font-size:.82rem;line-height:1.55;
}
.input--vin{text-transform:uppercase;font-family:"SF Mono",Menlo,monospace;font-size:.9rem;letter-spacing:.06em}
.input--vin::placeholder{text-transform:none;font-family:var(--font-body);letter-spacing:normal}
.form-success{
  background:rgba(63,157,107,.1);border:1.5px solid rgba(63,157,107,.4);color:var(--green);
  border-radius:14px;padding:18px 22px;font-weight:600;display:flex;gap:12px;align-items:flex-start;
}
.form-success svg{width:22px;height:22px;flex:none;margin-top:2px}
.form-error{
  background:rgba(198,63,63,.1);border:1.5px solid rgba(198,63,63,.45);color:#e08a8a;
  border-radius:14px;padding:14px 18px;font-weight:600;margin:0;
}
/* Honigtopf gegen Formular-Spam: für Menschen unsichtbar, für Bots verlockend */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
button.is-busy{opacity:.6;pointer-events:none}

/* ============================================================
   TERMINBUCHER
   ============================================================ */
.booking{max-width:960px;margin:0 auto}
.booking-shell{
  background:var(--white);border:1px solid var(--line-light);border-radius:24px;
  box-shadow:0 24px 70px rgba(15,18,25,.10);overflow:hidden;
}

/* Stepper */
.bk-steps{
  display:flex;background:var(--ink);color:var(--muted-inv);
  padding:0 12px;
}
.bk-step{
  flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 8px;font-weight:700;font-size:.82rem;position:relative;
  opacity:.55;transition:opacity .3s ease;
}
.bk-step__num{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:1.5px solid var(--muted-inv);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:all .3s ease;
}
.bk-step.is-active{opacity:1;color:var(--text-inv)}
.bk-step.is-active .bk-step__num{background:var(--gold);border-color:var(--gold);color:#231704}
.bk-step.is-done{opacity:1;color:var(--gold)}
.bk-step.is-done .bk-step__num{background:transparent;border-color:var(--gold);color:var(--gold)}
.bk-progress{height:3px;background:var(--ink-3);position:relative}
.bk-progress__bar{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));transition:width .45s cubic-bezier(.65,0,.35,1)}

.bk-body{padding:38px 40px 42px;min-height:430px}
.bk-pane{display:none;animation:paneIn .4s ease}
.bk-pane.is-active{display:block}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bk-pane h3{font-size:1.35rem;margin-bottom:4px}
.bk-pane__sub{color:var(--muted);font-size:.95rem;margin-bottom:26px}

/* Schritt 1: Leistungen */
.bk-services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bk-svc{
  border:1.5px solid var(--line-light);border-radius:14px;padding:16px 14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;
  transition:all .2s ease;background:var(--white);
}
.bk-svc:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.bk-svc.is-selected{border-color:var(--gold);background:rgba(245,166,35,.07);box-shadow:0 0 0 1px var(--gold)}
.bk-svc svg{width:24px;height:24px;color:var(--gold-deep)}
.bk-svc strong{font-size:.9rem;line-height:1.25}
.bk-svc small{color:var(--muted);font-size:.75rem;font-weight:600}
.bk-svc.is-selected small{color:var(--gold-deep)}

/* Schritt 2: Kalender + Slots */
.bk-datetime{display:grid;grid-template-columns:1.05fr .95fr;gap:34px}
.bk-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bk-cal__head strong{font-family:var(--font-head);font-size:1.02rem;text-transform:capitalize}
.bk-cal__nav{display:flex;gap:8px}
.bk-cal__nav button{
  width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line-light);
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;
}
.bk-cal__nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep)}
.bk-cal__nav button:disabled{opacity:.3;cursor:default}
.bk-cal__nav svg{width:16px;height:16px}
.bk-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.bk-cal__dow{text-align:center;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:6px 0}
.bk-day{
  aspect-ratio:1;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.88rem;transition:all .15s ease;position:relative;
}
.bk-day:not(:disabled):hover{background:var(--paper-2)}
.bk-day:disabled{color:#c9c5bc;cursor:default;font-weight:500}
.bk-day.is-today::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.bk-day.is-selected{background:var(--gold);color:#231704;box-shadow:var(--shadow-gold)}
.bk-day.is-selected:hover{background:var(--gold)}

.bk-slots__label{font-weight:800;font-size:.85rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.bk-slots__label svg{width:16px;height:16px;color:var(--gold-deep)}
/* Bewusst ohne eigene Scrollfläche: ein zweiter Scrollbereich mitten in der
   Seite verdeckt auf dem Handy die letzten Uhrzeiten und fühlt sich klemmig an. */
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.bk-slot{
  padding:11px 6px;border-radius:11px;border:1.5px solid var(--line-light);
  font-weight:700;font-size:.88rem;text-align:center;transition:all .15s ease;
}
.bk-slot:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep)}
.bk-slot.is-selected{background:var(--gold);border-color:var(--gold);color:#231704;box-shadow:var(--shadow-gold)}
.bk-slot:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.bk-slots-empty{color:var(--muted);font-size:.9rem;padding:20px 0}
.bk-legend{display:flex;gap:18px;margin-top:14px;font-size:.75rem;color:var(--muted);font-weight:600}
.bk-legend span{display:flex;align-items:center;gap:6px}
.bk-legend i{width:12px;height:12px;border-radius:4px;border:1.5px solid var(--line-light)}
.bk-legend .l-free i{background:var(--white)}
.bk-legend .l-busy i{background:var(--paper-2);opacity:.5}
.bk-legend .l-sel i{background:var(--gold);border-color:var(--gold)}

/* Abgabetermin-Mini-Hinweis (Bucher Schritt 1 + Leistungsseite) */
.drop-mini{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.45);
  color:var(--gold-deep);border-radius:100px;padding:9px 16px;
  font-size:.85rem;font-weight:700;margin:2px 0 24px;
}
.drop-mini svg{width:17px;height:17px;flex:none}
.page-hero .drop-mini{color:var(--gold-2);margin:18px 0 0}

/* Schritt 2: Abgabetag-Panel */
.bk-dayinfo{display:flex;flex-direction:column;gap:16px}
.bk-day-selected{
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;line-height:1.35;
  background:var(--paper);border:1.5px dashed var(--line-light);border-radius:14px;
  padding:20px 22px;color:var(--muted);transition:all .25s ease;
}
.bk-day-selected.is-set{
  color:var(--text);border-style:solid;border-color:var(--gold);
  background:rgba(245,166,35,.07);
  display:flex;flex-direction:column;gap:5px;
}
.bk-day-selected__date{display:block}
.bk-day-selected__time{
  font-family:var(--font-body);font-size:.88rem;font-weight:700;color:var(--muted);
}
.bk-day-selected__time.is-set{color:var(--gold-deep);font-size:1rem}

/* Uhrzeiten-Panel */
.bk-times{display:flex;flex-direction:column}
.bk-slot[aria-pressed="true"]{font-weight:800}
.bk-huau-hint{
  display:flex;gap:9px;align-items:flex-start;margin:0;
  font-size:.85rem;font-weight:700;color:var(--gold-deep);
}
.bk-huau-hint svg{width:17px;height:17px;flex:none;margin-top:1px}
.bk-note-drop{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(245,166,35,.1),rgba(245,166,35,.03));
  border:1px solid rgba(245,166,35,.4);border-radius:14px;padding:16px 18px;
}
.bk-note-drop svg{width:22px;height:22px;flex:none;color:var(--gold-deep);margin-top:2px}
.bk-note-drop strong{display:block;font-family:var(--font-head);font-size:.92rem;margin-bottom:3px}
.bk-note-drop span{font-size:.85rem;color:var(--muted);line-height:1.55}

/* Schritt 3: Daten */
.bk-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bk-form .span-2{grid-column:span 2}

/* Anrede – damit die Mail „Sehr geehrte Frau …“ schreiben kann */
.bk-choice{display:flex;flex-wrap:wrap;gap:8px}
.bk-choice label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--line-light);
  background:var(--white);font-size:.88rem;font-weight:700;transition:all .15s ease;
}
.bk-choice label:hover{border-color:var(--gold)}
.bk-choice input{accent-color:var(--gold-deep);margin:0}
.bk-choice label:has(input:checked){
  border-color:var(--gold);background:rgba(245,166,35,.1);color:var(--gold-deep);
}
.bk-choice label:focus-within{outline:2px solid var(--gold);outline-offset:2px}

/* FIN: freiwillig, aber ausdrücklich erwünscht */
.field-tag{
  display:inline-block;margin-left:8px;vertical-align:1px;
  background:rgba(245,166,35,.14);color:var(--gold-deep);
  border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:800;
  letter-spacing:.03em;text-transform:lowercase;
}
.field-why{margin:2px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted)}
.hint-btn.is-open{background:var(--gold);border-color:var(--gold);color:#231704}
.field-hint--vin{padding:14px}
.field-hint--vin img{
  display:block;width:100%;height:auto;border-radius:10px;
  background:var(--white);border:1px solid rgba(245,166,35,.3);
}
.field-hint--vin p{margin:12px 0 0}
.field-hint--vin strong{color:var(--gold-deep)}

/* Termin in der Erfolgsmeldung */
.bk-when{
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  color:var(--gold-deep);margin:14px 0 2px;
}

/* Zusammenfassung */
.bk-summary{
  background:var(--paper);border:1px solid var(--line-light);border-radius:14px;
  padding:20px 22px;margin-bottom:24px;display:flex;flex-wrap:wrap;gap:10px 28px;
}
.bk-summary div{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600}
.bk-summary svg{width:17px;height:17px;color:var(--gold-deep);flex:none}

/* Fußzeile / Navigation */
.bk-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 40px;border-top:1px solid var(--line-light);background:var(--paper);
}
.bk-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--muted);border-radius:100px;padding:10px 18px;transition:color .2s ease}
.bk-back:hover{color:var(--text)}
.bk-back svg{width:16px;height:16px}
/* Ausnahme zur Regel oben: bleibt als Platzhalter stehen, sonst
   springt die Kopfzeile des Terminbuchers beim Schrittwechsel. */
.bk-back[hidden]{visibility:hidden;display:inline-flex!important}

/* Schritt 4: Erfolg */
.bk-success{text-align:center;padding:26px 0 10px}
.bk-success__check{
  width:84px;height:84px;margin:0 auto 24px;border-radius:50%;
  background:rgba(63,157,107,.12);display:flex;align-items:center;justify-content:center;
}
.bk-success__check svg{width:40px;height:40px;color:var(--green)}
.bk-success__check svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .7s .25s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bk-success h3{font-size:1.55rem}
.bk-success p{color:var(--muted);max-width:440px;margin:0 auto 26px}
.bk-success__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bk-ref{
  display:inline-block;background:var(--paper-2);border-radius:10px;padding:8px 18px;
  font-family:var(--font-head);font-weight:700;letter-spacing:.14em;margin-bottom:22px;
}

/* Google-Sync-Hinweis */
.bk-sync{
  display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;color:var(--muted);
}
.bk-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease infinite}

/* ---------- Terminbucher-Modal ---------- */
.booking-shell{scroll-margin-top:calc(var(--header-h) + 20px)}
.bk-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease,visibility .32s;
}
.bk-modal::before{
  content:"";position:absolute;inset:0;
  background:rgba(15,18,25,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.bk-modal.is-open{opacity:1;visibility:visible}
.bk-modal__dialog{
  position:relative;width:min(960px,100%);max-height:calc(100vh - 48px);
  overflow-y:auto;border-radius:24px;
  transform:translateY(30px) scale(.965);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  box-shadow:0 42px 120px rgba(0,0,0,.55);
}
.bk-modal.is-open .bk-modal__dialog{transform:none}
.bk-modal .booking-shell{border:none;box-shadow:none}
.bk-modal .bk-steps{padding-right:64px}
.bk-modal__close{
  position:absolute;top:13px;right:14px;z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:rgba(243,242,239,.1);color:var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,transform .25s ease;
}
.bk-modal__close:hover{background:var(--gold);color:#231704;transform:rotate(90deg)}
.bk-modal__close svg{width:17px;height:17px}
@media (max-width:640px){
  .bk-modal{padding:0}
  .bk-modal__dialog{width:100%;height:100%;max-height:none;border-radius:0}
  .bk-modal .booking-shell{border-radius:0;min-height:100%;display:flex;flex-direction:column}
  .bk-modal .bk-body{flex:1}
  .bk-modal__close{position:fixed;top:10px;right:10px}
}

/* ---------- Vorher/Nachher-Slider ---------- */
.ba-sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.ba-slider{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-card-hover);
  -webkit-user-select:none;user-select:none;
}
.ba-slider .ba-img{width:100%;height:100%;object-fit:cover;display:block}
.ba-slider > .ba-img{position:absolute;inset:0}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba-pos,50%)) 0 0)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:3px;
  background:var(--gold);transform:translateX(-50%);pointer-events:none;
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--gold);
  box-shadow:var(--shadow-gold);display:flex;align-items:center;justify-content:center;
}
.ba-handle span::before{content:"◀ ▶";font-size:.6rem;color:#231704;letter-spacing:2px}
.ba-slider input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none;
}
.ba-label{
  position:absolute;top:14px;pointer-events:none;
  background:rgba(15,18,25,.75);color:var(--text-inv);
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
}
.ba-label--l{left:14px}
.ba-label--r{right:14px}

/* ---------- Preis-Schnellschätzer ---------- */
.pe-card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-card);
}
.pe-selects{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pe-out{
  font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:var(--gold-deep);
  letter-spacing:-.02em;min-height:56px;display:flex;align-items:baseline;gap:10px;
}
.pe-out small{font-size:1rem;color:var(--muted);font-weight:700}
.pe-request{font-size:1.25rem;color:var(--muted)}
.pe-card .form-note{margin:0}
@media (max-width:640px){.pe-selects{grid-template-columns:1fr}}

/* ---------- WhatsApp-Blitzdiagnose ---------- */
.wa-diag{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.wa-diag__text{color:var(--muted-inv);max-width:520px;margin-bottom:28px}
.wa-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.wa-steps li{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--ink-3);border:1px solid var(--line-dark);border-radius:14px;padding:18px 20px;
}
.wa-steps li > span{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--gold);color:#231704;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.wa-steps strong{color:var(--text-inv);display:block;margin-bottom:3px}
.wa-steps p{color:var(--muted-inv);font-size:.9rem;margin:0}
.btn-whatsapp{background:#25d366;color:#0b3d24;box-shadow:0 10px 28px rgba(37,211,102,.35)}
.btn-whatsapp:hover{background:#3fe07c;transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,211,102,.45)}
.btn-whatsapp svg{width:20px;height:20px}
@media (max-width:1000px){.wa-diag{grid-template-columns:1fr;gap:36px}}

/* ---------- HU-Erinnerung ---------- */
.hu-card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:34px 36px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow-card);
}
.hu-card__info{display:flex;gap:18px;align-items:flex-start}
.hu-card__info h3{margin:2px 0 6px}
.hu-card__info p{color:var(--muted);margin:0;font-size:.95rem;max-width:680px}
.hu-form{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.7fr auto;gap:12px}
@media (max-width:1000px){.hu-form{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hu-form{grid-template-columns:1fr}.hu-card{padding:26px 22px}}

/* ---------- „Wo klemmt's?"-Diagramm ---------- */
.dg-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:center}
.dg-stage{position:relative}
.dg-stage svg,.dg-car{width:100%;height:auto;display:block}
.dg-spot{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(245,166,35,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.dg-spot::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(245,166,35,.5);animation:spotPulse 2.2s ease infinite;
}
.dg-spot::after{
  content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#231704;font-weight:800;font-size:1rem;line-height:1;
}
.dg-spot:hover{transform:translate(-50%,-50%) scale(1.18)}
.dg-spot.is-active{
  transform:translate(-50%,-50%) scale(1.28);
  box-shadow:0 0 0 6px rgba(245,166,35,.35),0 0 24px rgba(245,166,35,.55);
}
.dg-spot.is-active::before{animation:none;opacity:0}
@keyframes spotPulse{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.45);opacity:0}}
.dg-card{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:32px 30px;min-height:320px;display:flex;flex-direction:column;align-items:flex-start;
}
.dg-card.is-in{animation:paneIn .35s ease}
.dg-card__icon{
  width:52px;height:52px;border-radius:14px;background:var(--ink-3);color:var(--gold);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.dg-card__icon svg{width:26px;height:26px}
.dg-card h3{color:var(--text-inv);font-size:1.22rem}
.dg-card p{color:var(--muted-inv);font-size:.95rem;flex:1}
.dg-card__meta{color:var(--gold);font-weight:700;font-size:.82rem;margin-bottom:20px;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:1000px){.dg-layout{grid-template-columns:1fr;gap:28px}.dg-card{min-height:0}}
@media (max-width:640px){
  .dg-spot{width:19px;height:19px;box-shadow:0 0 0 3px rgba(245,166,35,.22)}
  .dg-spot::after{font-size:.75rem}
  .dg-spot::before{inset:-6px}
}

/* ---------- Saison-Banner ---------- */
.season-banner{
  position:fixed;left:22px;bottom:22px;z-index:95;max-width:560px;
  display:flex;align-items:center;gap:16px;
  background:var(--ink-2);border:1px solid var(--line-dark);border-left:4px solid var(--gold);
  color:var(--text-inv);border-radius:16px;padding:16px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:translateY(150%);transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.season-banner.is-in{transform:none}
.season-banner__icon{
  width:44px;height:44px;flex:none;border-radius:12px;
  background:rgba(245,166,35,.12);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.season-banner__icon svg{width:24px;height:24px}
.season-banner__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.season-banner__text strong{font-family:var(--font-head);font-size:.98rem}
.season-banner__text span{color:var(--muted-inv);font-size:.82rem;line-height:1.4}
.season-banner .btn{flex:none}
.season-banner__close{flex:none;width:32px;height:32px;border-radius:50%;color:var(--muted-inv);display:flex;align-items:center;justify-content:center}
.season-banner__close:hover{color:var(--text-inv)}
.season-banner__close svg{width:14px;height:14px}
@media (max-width:640px){
  .season-banner{left:12px;right:12px;bottom:12px;flex-wrap:wrap;padding:14px}
  .season-banner .btn{width:100%;order:3}
}

/* ---------- „Meine Garage" (Terminbucher Schritt 3) ---------- */
.bk-welcome{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.35);border-radius:12px;
  padding:12px 16px;font-weight:700;font-size:.92rem;
}
.bk-forget{color:var(--gold-deep);font-weight:700;font-size:.82rem;text-decoration:underline}
.bk-forget:hover{color:var(--gold)}
.bk-remember{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--muted);cursor:pointer}
.bk-remember input{width:17px;height:17px;accent-color:var(--gold-deep);margin:0}

/* ---------- Über uns ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.about-grid img{border-radius:var(--radius);box-shadow:var(--shadow-card-hover)}
.about-grid ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.about-grid li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:.97rem}
.about-grid li svg{width:20px;height:20px;color:var(--gold-deep);flex:none;margin-top:3px}
.partner-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.partner-row img{height:84px;width:auto;filter:grayscale(.15);transition:filter .3s,transform .3s}
.partner-row img:hover{filter:none;transform:scale(1.05)}

/* ---------- TikTok-Seite ---------- */
.tiktok-hero{
  background:
    radial-gradient(620px 340px at 88% -10%,rgba(37,244,238,.12),transparent 60%),
    radial-gradient(560px 320px at 8% 110%,rgba(254,44,85,.12),transparent 60%),
    var(--ink);
}
.tiktok-hero .btn svg,.tt-consent .btn svg{width:18px;height:18px}
.tiktok-handle{
  display:inline-block;margin:22px 0 0;font-family:var(--font-head);font-weight:700;
  color:var(--muted-inv);font-size:.95rem;letter-spacing:.04em;
  border:1.5px dashed var(--line-dark);border-radius:100px;padding:8px 18px;
}
.tt-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start}
.tt-consent{
  background:var(--ink);color:var(--text-inv);border-radius:var(--radius);
  min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;padding:48px 28px;
  background-image:
    radial-gradient(360px 220px at 85% 10%,rgba(37,244,238,.14),transparent 65%),
    radial-gradient(360px 220px at 15% 90%,rgba(254,44,85,.14),transparent 65%);
}
.tt-consent h3{color:var(--text-inv);font-size:1.3rem;margin:0}
.tt-consent > p{color:var(--muted-inv);font-size:.9rem;max-width:420px;margin:0 0 14px}
.tt-consent__icon{
  width:76px;height:76px;border-radius:22px;background:var(--ink-3);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
  color:var(--text-inv);
  box-shadow:4px 4px 0 rgba(254,44,85,.55),-4px -4px 0 rgba(37,244,238,.55);
}
.tt-consent__icon svg{width:38px;height:38px}
.tt-consent.is-loaded{
  background:var(--paper-2);min-height:0;padding:16px;display:block;text-align:center;
}
.tt-consent.is-loaded .tiktok-embed{margin:0 auto}
.tt-qr{display:flex;gap:18px;align-items:center}
.tt-qr img{width:104px;height:104px;flex:none;border-radius:10px;border:1px solid var(--line-light)}
.tt-qr h3{margin:0 0 6px;font-size:1.02rem}
.tt-qr p{font-size:.88rem;margin:0}
@media (max-width:1000px){.tt-info{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tt-info{grid-template-columns:1fr}}

/* Video-Galerie */
.tt-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}
.tt-card{
  position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line-dark);
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;
}
.tt-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,18,25,.35)}
.tt-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tt-card:hover img{transform:scale(1.05)}
.tt-card__ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--line-dark);
}
.tt-card__ph svg{width:38px;height:38px}
.tt-card.is-ready .tt-card__ph{display:none}
.tt-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;
  background:rgba(15,18,25,.65);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,transform .25s ease;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.tt-card__play svg{width:22px;height:22px;margin-left:3px}
.tt-card:hover .tt-card__play{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.tt-card__title{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:26px 12px 10px;color:#fff;font-size:.72rem;font-weight:600;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(15,18,25,.85));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-align:left;
}

/* Modal-Player */
.ttm{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:rgba(15,18,25,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.ttm.is-open{opacity:1;visibility:visible}
.ttm__stage{
  width:min(400px,86vw);height:min(86vh,720px);
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.ttm__stage iframe,.ttm__stage video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.ttm__meta{
  position:absolute;bottom:58px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  max-width:min(480px,90vw);text-align:center;
}
.ttm__meta span{
  color:var(--text-inv);font-size:.82rem;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ttm__meta a{color:var(--gold-2);font-size:.78rem;font-weight:700}
.ttm__meta a:hover{text-decoration:underline}
.tt-card--ext{
  display:block;background:linear-gradient(160deg,var(--ink-2),var(--ink-3));
}
.tt-card--ext .tt-card__ph{color:var(--gold)}
.ttm__nav{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:rgba(243,242,239,.1);color:var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.ttm__nav:hover{background:var(--gold);color:#231704}
.ttm__nav svg{width:22px;height:22px}
.ttm__close{
  position:absolute;top:20px;right:22px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(243,242,239,.1);color:var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,transform .25s ease;
}
.ttm__close:hover{background:var(--gold);color:#231704;transform:rotate(90deg)}
.ttm__close svg{width:18px;height:18px}
.ttm__counter{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:var(--muted-inv);font-family:var(--font-head);font-weight:700;font-size:.9rem;
  letter-spacing:.08em;
}
@media (max-width:640px){
  .ttm{gap:8px}
  .ttm__nav{position:absolute;bottom:70px;z-index:2}
  .ttm__nav--prev{left:18px}
  .ttm__nav--next{right:18px}
  .ttm__stage{width:min(400px,94vw);height:min(78vh,700px)}
}

/* ---------- Instagram-Seite ----------
   Der Instagram-Verlauf (Violett/Rot/Orange) kommt nur als Akzent zum
   Einsatz - Rahmen, Badge, Schimmer. Flächen bleiben Ink und Gold, damit
   die Seite nicht plötzlich nach einer anderen Marke aussieht. */
:root{
  --ig-grad:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%);
}
.instagram-hero{
  background:
    radial-gradient(620px 340px at 88% -10%,rgba(238,42,123,.14),transparent 60%),
    radial-gradient(560px 320px at 8% 110%,rgba(98,40,215,.14),transparent 60%),
    var(--ink);
}
.instagram-hero .btn svg{width:18px;height:18px}
.ig-handle{
  display:inline-block;margin:22px 0 0;font-family:var(--font-head);font-weight:700;
  color:var(--muted-inv);font-size:.95rem;letter-spacing:.04em;
  border:1.5px dashed var(--line-dark);border-radius:100px;padding:8px 18px;
}

/* Profilkopf über dem Raster */
.ig-profile{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:18px 22px;margin-bottom:26px;
  background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--radius);
}
.ig-profile__ring{
  width:76px;height:76px;flex:none;border-radius:50%;padding:3px;
  background:var(--ig-grad);
}
.ig-profile__ring img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--paper-2);background:var(--ink);
}
.ig-profile__id{flex:1 1 200px;min-width:0}
.ig-profile__name{margin:0;font-size:1.05rem;font-family:var(--font-head)}
.ig-profile__at{margin:2px 0 0;font-size:.88rem;color:var(--muted)}
.ig-profile__stats{display:flex;gap:22px;flex-wrap:wrap}
.ig-profile__stats b{display:block;font-family:var(--font-head);font-size:1.15rem;line-height:1.1}
.ig-profile__stats span{font-size:.78rem;color:var(--muted);letter-spacing:.03em}
@media (max-width:560px){
  .ig-profile{gap:14px;padding:16px}
  .ig-profile__ring{width:60px;height:60px}
  .ig-profile .btn{width:100%}
}

/* Beitragsraster im Hochformat, wie im Instagram-Profil */
.ig-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.ig-card{
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line-dark);
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;
}
.ig-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,18,25,.35)}
.ig-card img,.ig-card__prev{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.ig-card img{transition:transform .4s ease}
.ig-card:hover img{transform:scale(1.05)}
.ig-card__prev{opacity:0;transition:opacity .35s ease;z-index:1}
.ig-card.is-previewing .ig-card__prev{opacity:1}
/* Läuft die Vorschau, tritt alles andere zurück */
.ig-card.is-previewing .ig-card__kind{opacity:.35}
.ig-card__kind{
  position:absolute;top:10px;right:10px;z-index:3;
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(15,18,25,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:opacity .3s ease;
}
.ig-card__kind svg{width:17px;height:17px}
/* Schimmernder Verlaufsrand beim Überfahren */
.ig-card__glow{
  position:absolute;inset:0;z-index:2;border-radius:14px;pointer-events:none;
  padding:2px;background:var(--ig-grad);opacity:0;transition:opacity .3s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.ig-card:hover .ig-card__glow,.ig-card:focus-visible .ig-card__glow{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ig-card,.ig-card img{transition:none}
  .ig-card:hover{transform:none}
  .ig-card:hover img{transform:none}
}
/* Auf dem Telefon zwei feste Spalten: mit auto-fill bliebe eine einzige übrig
   und zwölf Beiträge würden die Seite endlos lang machen. */
@media (max-width:640px){
  .ig-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* Modal-Player mit Bildtext */
.igm{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:rgba(15,18,25,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.igm.is-open{opacity:1;visibility:visible}
.igm__stage{
  width:min(400px,86vw);height:min(78vh,680px);
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.igm__stage video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.igm__meta{
  position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  max-width:min(520px,92vw);text-align:center;
}
.igm__date{color:var(--muted-inv);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.igm__cap{
  margin:0;color:var(--text-inv);font-size:.85rem;font-weight:600;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.igm__tags{margin:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.igm__tag{
  font-size:.72rem;font-weight:600;color:var(--text-inv);
  background:rgba(243,242,239,.12);border-radius:100px;padding:3px 10px;
}
.igm__link{color:var(--gold-2);font-size:.78rem;font-weight:700}
.igm__link:hover{text-decoration:underline}
.igm__nav{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:rgba(243,242,239,.1);color:var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.igm__nav:hover{background:var(--gold);color:#231704}
.igm__nav svg{width:22px;height:22px}
.igm__close{
  position:absolute;top:20px;right:22px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(243,242,239,.1);color:var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,transform .25s ease;
}
.igm__close:hover{background:var(--gold);color:#231704;transform:rotate(90deg)}
.igm__close svg{width:18px;height:18px}
.igm__counter{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:var(--muted-inv);font-family:var(--font-head);font-weight:700;font-size:.9rem;
  letter-spacing:.08em;
}
@media (max-width:640px){
  .igm{gap:8px}
  .igm__nav{position:absolute;bottom:66px;z-index:2}
  .igm__nav--prev{left:14px}
  .igm__nav--next{right:14px}
  .igm__stage{width:min(400px,94vw);height:min(66vh,620px)}
  .igm__meta{bottom:48px}
  .igm__cap{-webkit-line-clamp:2}
}

/* ---------- Rechtsseiten (Prosa) ---------- */
.prose{max-width:780px}
.prose h2{font-size:1.4rem;margin-top:2.2em}
.prose h3{font-size:1.05rem;margin-top:1.6em}
.prose p,.prose li{color:var(--muted);font-size:.97rem}
.prose strong{color:var(--text)}
.prose a{color:var(--gold-deep);font-weight:600}
.prose a:hover{text-decoration:underline}
.draft-note{
  background:rgba(201,86,75,.08);border:1.5px solid rgba(201,86,75,.4);color:var(--red);
  border-radius:14px;padding:16px 20px;font-weight:600;font-size:.9rem;margin-bottom:40px;
}
.placeholder-mark{background:rgba(245,166,35,.25);padding:1px 6px;border-radius:6px;font-weight:700}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{
  background:var(--white);border:1px solid var(--line-light);border-radius:14px;
  margin-bottom:12px;overflow:hidden;transition:box-shadow .2s ease;
}
.faq details[open]{box-shadow:var(--shadow-card)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;font-weight:700;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .25s ease;margin-right:4px;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 22px 20px;margin:0;color:var(--muted);font-size:.95rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--muted-inv);padding:72px 0 0;border-top:1px solid var(--line-dark)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px}
.footer h4{color:var(--text-inv);font-size:.95rem;margin-bottom:18px}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.footer a{font-size:.92rem;transition:color .2s ease}
.footer a:hover{color:var(--gold-2)}
.footer__brand p{font-size:.92rem;margin:16px 0}
.footer__contact li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.footer__contact svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:3px}
.footer__bar{border-top:1px solid var(--line-dark);padding:22px 0}
.footer__bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer__bar small{font-size:.82rem}
.footer__legal{display:flex;gap:22px}
.footer__legal a{font-size:.82rem}

/* ---------- Reveal-Animationen ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .brands__track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- WhatsApp-Float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .header__phone{display:none}
}
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:block}
  .header .lang{display:none}
  /* Ab hier kippt der Schleier von der Seite in die Senkrechte --
     der Text steht dann nicht mehr neben, sondern auf dem Motiv. */
  /* Schmaler als die Inhaltsbreite greift die Deckelung nicht mehr; das
     Band bekommt hier wieder etwas Hoehe und schneidet dafuer links und
     rechts ein wenig ab -- der Schriftzug bleibt vollstaendig. */
  .hero__top{min-height:0;padding:calc(var(--header-h) + 96px) 0 40px}
  /* aspect-ratio muss hier weg: zusammen mit einer festen Hoehe leitet der
     Browser daraus die BREITE ab -- das Band wurde dadurch breiter als
     der Viewport und rechts abgeschnitten. */
  .hero__bg,.hero__veil{aspect-ratio:auto}
  .hero__bg{height:min(100%,60vw)}
  .hero__bg img{object-position:50% 42%}
  .hero__bg::after{
    background:linear-gradient(180deg,transparent 52%,rgba(15,18,25,.34) 80%,var(--ink) 100%);
  }
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(15,18,25,.8) 0%,rgba(15,18,25,.48) 26%,rgba(15,18,25,.3) 56%,transparent 80%),
      linear-gradient(98deg,rgba(15,18,25,.56),rgba(15,18,25,.18) 68%,rgba(15,18,25,.32));
  }
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat + .stat::before{display:none}
  .hours-cta{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .bk-datetime{grid-template-columns:1fr}
  .bk-services{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header__cta > .btn{display:none}
  .section{padding:68px 0}
  /* grid-4 gehört hier ebenfalls hinein – zweispaltig passt auf 375px nicht
     mehr und schob die ganze Seite seitlich über den Rand hinaus. */
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .form-grid,.bk-form{grid-template-columns:1fr}
  .form-grid .span-2,.bk-form .span-2{grid-column:span 1}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .hero__top{padding:calc(var(--header-h) + 88px) 0 32px;min-height:0}
  .hero__bottom{padding:0 0 56px}
  /* Hochkant wuerde das Foto ueber die volle Texthoehe so stark
     beschnitten, dass nur noch ein Fensterausschnitt uebrig bleibt.
     Es steht deshalb als Querband oben und laeuft hinter dem Fliesstext
     in Ink aus -- so bleiben beide Fahrzeuge nebeneinander im Bild. */
  /* ... und es beginnt erst unter dem Header: der Schriftzug liegt im Foto
     bei 16-28 % der Hoehe und verschwaende sonst genau dahinter. */
  .hero__bg,.hero__veil{aspect-ratio:auto;top:var(--header-h);height:min(100%,66vw)}
  /* Beide Wagen sind schwarz und stehen im Schatten -- im kleinen
     Ausschnitt saufen sie ohne aufgehellte Tiefen ab. */
  .hero__bg img{object-position:50% 46%;filter:saturate(.9) contrast(.98) brightness(1.1)}
  .hero__bg::after{
    background:linear-gradient(180deg,transparent 58%,rgba(15,18,25,.22) 79%,rgba(15,18,25,.8) 93%,var(--ink) 100%);
  }
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(15,18,25,.78) 0%,rgba(15,18,25,.5) 20%,rgba(15,18,25,.36) 42%,rgba(15,18,25,.18) 60%,transparent 78%),
      linear-gradient(96deg,rgba(15,18,25,.4),rgba(15,18,25,.12) 62%,rgba(15,18,25,.26));
  }
  .hero__lead{font-size:1.03rem;margin-bottom:28px}
  .hero__ctas{margin-bottom:28px}
  .hero__ctas .btn{flex:1 1 100%;justify-content:center}
  .hero__trust{gap:14px 20px}
  /* Hochkant nehmen die Buttons die volle Breite -- die Siegel rutschen
     in eine eigene Zeile und brauchen dort keinen Trennstrich. */
  .hero__certs{border-left:0;padding-left:0;margin:2px 0 0;gap:12px}
  .hero__cert{width:50px;height:50px}
  .bk-body{padding:28px 20px 32px}
  .bk-foot{padding:18px 20px}
  .bk-step span:last-child{display:none}
  .bk-services{grid-template-columns:1fr}
  .bk-slots{grid-template-columns:repeat(2,1fr)}
  .strip__in{flex-direction:column;text-align:center}
  .stats__grid{grid-template-columns:1fr 1fr;gap:10px}
}

/* ---------- Kyrillisch: Ueberschriftenschrift ----------
   Sora gibt es nur mit lateinischem Zeichensatz -- auf den russischen Seiten
   fielen alle Ueberschriften deshalb auf eine Systemschrift zurueck, waehrend
   der Fliesstext in Manrope stand. Das sah nach zwei verschiedenen Websites
   aus. Manrope bringt Kyrillisch mit und ist ohnehin die zweite Hausschrift,
   also uebernimmt sie dort auch die Ueberschriften.
   Polnisch braucht das nicht: die Sonderzeichen liegen in latin-ext, das Sora
   mitbringt. */
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] .brand__name,
html[lang="ru"] .step-num,
html[lang="ru"] .stat__num{
  font-family:var(--font-body);
  letter-spacing:-.015em;
}


/* Hinweis auf die Terminverwaltung — sitzt UNTEN IM Bucher-Kasten, mittig.
   Bewusst sehr zurückhaltend: Wer bucht, soll buchen; die Zeile ist eine
   Fußnote, kein Werbebanner. */
.bk-powered {
  margin: 0;
  padding: 12px 20px 16px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .01em;
  color: #9a958c;
}

.bk-powered a {
  color: #6f6a61;
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 106, 97, .35);
}

.bk-powered a:hover { color: var(--gold, #c8a24a); border-bottom-color: currentColor; }