/* ==========================================================================
   APS Auto-Pflege-Service GmbH, Braunschweig
   Gestaltung und technische Umsetzung: BOCK STUDIO

   Gestaltungssystem nach dem Vorbild von Vincent & Dussault (Boléan):
   Die Seite liegt als abgerundeter, dunkler Rahmen auf einem unscharfen
   Hintergrundbild. Innen arbeiten abgerundete Karten, eine cremefarbene
   Navigationspille und eine geometrische Groteske in normaler Schreibweise.
   ========================================================================== */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("schriften/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("schriften/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Am Referenzvideo gemessen */
  --grund: #0b0b0b;        /* hinter dem Rahmen */
  --flaeche: #151515;      /* der Rahmen selbst */
  --karte: #1a1918;        /* Karten im Rahmen */
  --karte-hoch: #201f1d;   /* Karte im Schwebezustand */
  --kontur: #272624;
  --kontur-hell: #33312e;

  --creme: #ede9e0;        /* Navigationspille, helle Flächen */
  --creme-tief: #c9c6bd;
  --text: #f4f2ee;
  --text-2: #a5a39e;
  --text-3: #76736e;

  --rot: #d81324;          /* aus dem APS-Logo */
  --rot-hell: #f0303f;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;
  --s5: 3.5rem;
  --s6: 5.5rem;
  --s7: 8rem;

  --t-hero: clamp(2rem, 3.9vw, 3.5rem);
  --t-sektion: clamp(1.9rem, 4.2vw, 3.5rem);
  --t-gross: clamp(2.6rem, 7vw, 6rem);
  --t-karte: clamp(1.15rem, 1.7vw, 1.4rem);
  --t-zahl: clamp(1.8rem, 3vw, 2.6rem);
  --t-text: 1.0625rem;
  --t-klein: 0.875rem;
  --t-mini: 0.75rem;

  --r-rahmen: 26px;
  --r-karte: 18px;
  --r-bild: 14px;
  --r-pille: 999px;

  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --kurz: 180ms;
  --lang: 760ms;

  --luft: clamp(10px, 1.9vw, 26px);     /* Abstand des Rahmens zum Fensterrand */
  --innen: clamp(1.25rem, 3.4vw, 3.75rem); /* Polsterung im Rahmen */
  --breite: 1560px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Grid- und Flex-Kinder haben min-width:auto und sprengen sonst ihre Spur */
.zahlen > *, .bento > *, .ueber-paar > *, .ueber-reihe > *,
.schaden-reihe > *, .ablauf-reihe > *, .preis-gruppen > *,
.kontakt-raster > *, .fuss-oben > *, .preis-gruppe dl > *,
.hero-unten > *, .preis-fuss > *, .zeiten-liste div > * { min-width: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--grund);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-text);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Unscharfer Grund, auf dem der Rahmen liegt */
.grundbild {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grund) url("bilder/grund-1920.webp") center / cover no-repeat;
}
@media (max-width: 900px) {
  .grundbild { background-image: url("bilder/grund-900.webp"); }
}
.grundbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.3);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rot-hell);
  outline-offset: 3px;
  border-radius: 4px;
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: 0.7rem 1.4rem;
  background: var(--creme); color: #111;
  border-radius: 0 0 12px 12px;
  transition: transform var(--kurz) var(--kurve);
}
.sprung:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   Der Rahmen
   ========================================================================== */
.rahmen {
  position: relative;
  width: calc(100% - 2 * var(--luft));
  max-width: var(--breite);
  margin: var(--luft) auto;
  background: var(--flaeche);
  border-radius: var(--r-rahmen);
  overflow: clip;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.spalte {
  padding-inline: var(--innen);
}

.abschnitt { padding-block: clamp(3.5rem, 8vw, var(--s7)); }
.abschnitt-eng { padding-block: clamp(2.5rem, 5vw, var(--s6)); }

/* ---- Typografie ---- */
.display {
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.label {
  display: block;
  font-size: var(--t-mini);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lauftext { max-width: 58ch; color: var(--text-2); }

.kopfzeile { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.kopfzeile h2 { font-size: var(--t-sektion); max-width: 17ch; text-wrap: balance; }
.kopfzeile .lauftext { max-width: 52ch; }

/* ---- Knöpfe ---- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: var(--r-pille);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--kurz) var(--kurve),
              border-color var(--kurz) var(--kurve),
              color var(--kurz) var(--kurve);
}
.knopf .pfeil { transition: transform var(--kurz) var(--kurve); }
.knopf:hover .pfeil { transform: translateX(4px); }

.knopf-rot {
  border: 1px solid rgba(216, 19, 36, 0.75);
  color: var(--rot-hell);
  background: rgba(216, 19, 36, 0.06);
}
.knopf-rot:hover, .knopf-rot:focus-visible {
  background: var(--rot); border-color: var(--rot); color: #fff;
}

.knopf-creme {
  background: var(--creme); color: #141414;
  border: 1px solid var(--creme);
}
.knopf-creme:hover, .knopf-creme:focus-visible { background: #fff; border-color: #fff; }

.knopf-klar {
  border: 1px solid var(--kontur-hell);
  color: var(--text);
}
.knopf-klar:hover, .knopf-klar:focus-visible { border-color: var(--text-2); background: var(--karte); }

/* ==========================================================================
   Kopfleiste im Rahmen
   ========================================================================== */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: clamp(1rem, 2vw, 1.75rem) var(--innen);
}

.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }
.marke img { width: 40px; height: 42px; }
.marke-text {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.marke-text span {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Die cremefarbene Navigationspille */
.navi {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  background: var(--creme);
  border-radius: var(--r-pille);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.navi a {
  padding: 0.5rem 1.05rem;
  border-radius: var(--r-pille);
  font-size: 0.92rem;
  font-weight: 400;
  color: #2b2a28;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--kurz) var(--kurve), color var(--kurz) var(--kurve);
}
.navi a:hover, .navi a:focus-visible { background: #141414; color: var(--creme); }

.kopf-rechts { display: flex; align-items: center; gap: 0.6rem; }
.kopf-telefon {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.5rem 0.4rem;
}
.kopf-telefon:hover { color: var(--rot-hell); }

.schalter {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px;
  background: var(--creme);
  border-radius: var(--r-pille);
}
.schalter span { display: block; width: 18px; height: 1.5px; background: #1a1a1a; transition: transform var(--kurz) var(--kurve), opacity var(--kurz); }
.schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Menü ---- */
.menue {
  position: fixed;
  inset: var(--luft);
  z-index: 90;
  border-radius: var(--r-rahmen);
  background: var(--flaeche);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s4);
  padding: calc(var(--s6) + 1rem) var(--innen) var(--s4);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 380ms var(--kurve), visibility 380ms;
}
.menue[data-offen="ja"] { opacity: 1; visibility: visible; }
.menue-liste { display: flex; flex-direction: column; gap: 0.1rem; align-self: center; }
.menue-liste a {
  display: inline-block;
  padding: 0.3rem 0;
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 200;
  text-decoration: none;
  color: var(--text-3);
  transition: color 200ms var(--kurve), transform 200ms var(--kurve);
}
.menue-liste a:hover, .menue-liste a:focus-visible { color: var(--text); transform: translateX(10px); }
.menue-fuss {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--kontur);
  font-size: var(--t-klein);
  color: var(--text-2);
}
.menue-fuss a { text-decoration: none; }
.menue-fuss a:hover { color: var(--text); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92dvh, 940px);
  display: grid;
  align-items: end;
  padding: var(--innen);
  padding-top: calc(var(--s6) + 2rem);
  isolation: isolate;
  overflow: hidden;
}
/* ---- Zoomfahrt im Hero ----
   Beim Laden öffnet sich das Bildfeld aus einem kleineren Rechteck heraus,
   wie beim Vorbild. Das Standbild liegt darunter und bleibt sichtbar,
   solange das Video nicht läuft. */
.hero-bild {
  position: absolute; inset: 0; z-index: -2;
  clip-path: inset(0 round 0);
  animation: feld-oeffnen 1500ms var(--kurve) both;
}
.hero-bild img,
.hero-bild video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: bild-zuruecknehmen 2600ms var(--kurve) both;
}
.hero-video { opacity: 0; transition: opacity 900ms var(--kurve); }
.hero-video[data-laeuft="ja"] { opacity: 1; }

@keyframes feld-oeffnen {
  from { clip-path: inset(14% 19% 16% 19% round 22px); }
  to   { clip-path: inset(0 round 0); }
}
@keyframes bild-zuruecknehmen {
  from { transform: scale(1.16); }
  to   { transform: scale(1); }
}

.hero-bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(9,9,9,0.6) 0%, rgba(9,9,9,0.1) 24%, rgba(9,9,9,0.22) 48%, rgba(9,9,9,0.95) 100%),
    linear-gradient(100deg, rgba(9,9,9,0.92) 0%, rgba(9,9,9,0.6) 30%, rgba(9,9,9,0.12) 58%, rgba(9,9,9,0) 76%);
}

.hero-unten {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.hero-text { display: grid; gap: var(--s2); max-width: 620px; }
.hero h1 { font-size: var(--t-hero); }
.hero h1 .rot { color: var(--rot-hell); }
.hero-seit {
  order: -1;
  font-size: var(--t-klein);
  color: var(--text-2);
  letter-spacing: 0.06em;
}
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--s2); }

/* Kleine Kachel unten rechts, wie im Vorbild */
.hero-kachel {
  display: grid;
  gap: 0.55rem;
  width: min(260px, 64vw);
  text-decoration: none;
}
.hero-kachel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-bild);
  transition: transform 600ms var(--kurve);
}
.hero-kachel:hover img, .hero-kachel:focus-within img { transform: scale(1.03); }
.hero-kachel-zeile {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-klein);
  color: var(--text-2);
}
.hero-kachel:hover .hero-kachel-zeile { color: var(--text); }

/* ==========================================================================
   Kennzahlen
   ========================================================================== */
.zahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.zahl-karte {
  padding: var(--s4) var(--s3);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.zahl-wert {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--t-zahl);
  font-weight: 200;
  line-height: 1;
  color: var(--text);
}
.zahl-wert .stern { color: var(--rot); font-size: 0.46em; letter-spacing: 0.1em; }
.zahl-karte p + p { margin-top: 0.7rem; font-size: var(--t-klein); color: var(--text-2); line-height: 1.5; }

/* ==========================================================================
   Leistungen als Bento
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.b-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  min-height: 260px;
  padding: var(--s3);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: border-color var(--kurz) var(--kurve), background var(--kurz) var(--kurve);
}
.b-karte:hover, .b-karte:focus-within { border-color: var(--kontur-hell); background: var(--karte-hoch); }
.b-karte img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--kurve);
}
.b-karte::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10,10,10,0.97) 2%, rgba(10,10,10,0.88) 26%, rgba(10,10,10,0.46) 56%, rgba(10,10,10,0.18) 100%);
}
.b-karte:hover img, .b-karte:focus-within img { transform: scale(1.04); }
.b-karte h3 { font-size: var(--t-karte); font-weight: 400; line-height: 1.2; }
.b-karte p { font-size: var(--t-klein); color: var(--text-2); max-width: 32ch; }
.b-karte .mehr {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: var(--t-klein);
  color: var(--rot-hell);
}
.b-karte .mehr .pfeil { transition: transform var(--kurz) var(--kurve); }
.b-karte:hover .mehr .pfeil { transform: translateX(4px); }

.b-gross  { grid-column: span 7; min-height: 420px; }
.b-hoch   { grid-column: span 5; grid-row: span 2; min-height: 420px; }
.b-klein  { grid-column: span 4; }
.b-mittel { grid-column: span 3; }

/* Textkarte ohne Bild */
.b-text { justify-content: space-between; }
.b-text::after { display: none; }
.b-text h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 200; line-height: 1.25; }
.b-text .lauftext { font-size: var(--t-klein); max-width: 30ch; }

/* ==========================================================================
   Über uns
   ========================================================================== */
/* Bild oben, Text im dunklen Teil darunter. Der Verlauf verbindet beides. */
.ueber-kopf {
  position: relative;
  margin-bottom: clamp(0.5rem, 1vw, 0.9rem);
  border-radius: var(--r-karte);
  overflow: hidden;
  background: var(--karte);
  border: 1px solid var(--kontur);
}
.ueber-bild { position: relative; }
.ueber-bild img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.ueber-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(12,12,12,0.34) 0%,
    rgba(12,12,12,0.06) 30%,
    rgba(16,16,16,0.55) 72%,
    rgba(26,25,24,0.97) 96%,
    var(--karte) 100%);
}
.ueber-text {
  position: relative;
  margin-top: calc(var(--s4) * -1);
  padding: 0 var(--s4) var(--s4);
  display: grid; gap: var(--s2);
}
.ueber-text h2 { font-size: var(--t-sektion); }
.ueber-text .lauftext { color: var(--text-2); max-width: 62ch; }

.ueber-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.9rem);
}
.ueber-karte {
  display: grid; gap: var(--s2);
  padding: var(--s4);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.ueber-karte h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 300; }
.ueber-karte p { color: var(--text-2); font-size: 1rem; }

.ueber-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.ueber-reihe img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; border-radius: var(--r-bild); }

/* ==========================================================================
   Schäden
   ========================================================================== */
.schaden-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.schaden figure { margin: 0; }
.schaden img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-bild); }
.schaden figcaption { margin-top: 0.85rem; font-size: var(--t-klein); color: var(--text-2); }
.schaden-nachsatz {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--kontur);
  color: var(--text-2);
}
.schaden-nachsatz span { display: block; max-width: 62ch; }

/* ==========================================================================
   Ablauf
   ========================================================================== */
.ablauf-reihe {
  --luecke: clamp(0.75rem, 1.4vw, 1.25rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--luecke);
}
.schritt {
  position: relative;
  display: grid; gap: 0.55rem;
  padding: var(--s4) var(--s3) var(--s3);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.schritt h3 { font-size: var(--t-karte); font-weight: 400; }
.schritt p { color: var(--text-2); font-size: var(--t-klein); }
.schritt::before {
  content: "";
  position: absolute;
  top: var(--s3); left: var(--s3);
  width: 8px; height: 8px;
  background: var(--rot);
  border-radius: var(--r-pille);
}

/* ==========================================================================
   Preise
   ========================================================================== */
.platzhalter-hinweis {
  max-width: 64ch;
  margin-bottom: var(--s4);
  padding: var(--s3);
  border: 1px solid rgba(216, 19, 36, 0.55);
  border-radius: var(--r-karte);
  background: rgba(216, 19, 36, 0.07);
  font-size: var(--t-klein);
  line-height: 1.6;
}
.platzhalter-hinweis strong { color: var(--rot-hell); font-weight: 500; }

.preis-gruppen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(0.5rem, 1vw, 0.9rem); }
.preis-gruppe {
  padding: var(--s4);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.preis-gruppe h3 {
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--kontur);
  font-size: var(--t-mini);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.preis-gruppe dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.1rem var(--s3);
  margin-top: var(--s3);
}
.preis-gruppe dt { font-size: 1.05rem; }
.preis-gruppe dt small { display: block; font-size: var(--t-klein); color: var(--text-3); }
.preis-gruppe dd { font-size: 1.3rem; font-weight: 200; white-space: nowrap; text-align: right; }
.preis-gruppe dd span { font-size: 0.7rem; color: var(--text-3); letter-spacing: 0.08em; }

.preis-fuss {
  margin-top: var(--s4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3);
}
.preis-fuss p { max-width: 52ch; color: var(--text-2); font-size: var(--t-klein); }

/* ==========================================================================
   Stimmen
   ========================================================================== */
.stimmen-bahn {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 370px);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
  scrollbar-color: var(--kontur-hell) transparent;
}
.stimme {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) var(--s3);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.sterne { color: var(--rot); font-size: 0.78rem; letter-spacing: 0.2em; }
.stimme blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.stimme figcaption {
  margin-top: auto; padding-top: var(--s2);
  border-top: 1px solid var(--kontur);
  font-size: var(--t-klein); color: var(--text-3);
}
.stimme figcaption b { display: block; color: var(--text); font-weight: 400; }

/* ==========================================================================
   Fragen
   ========================================================================== */
.fragen-liste { display: grid; gap: clamp(0.4rem, 0.8vw, 0.7rem); }
.frage {
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
  overflow: hidden;
  transition: border-color var(--kurz) var(--kurve);
}
.frage:has(.frage-knopf[aria-expanded="true"]) { border-color: var(--kontur-hell); }
.frage-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  transition: color var(--kurz) var(--kurve);
}
.frage-knopf:hover { color: var(--rot-hell); }
.frage-zeichen { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.frage-zeichen::before, .frage-zeichen::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 16px; height: 1.5px; background: currentColor;
  transition: transform 280ms var(--kurve);
}
.frage-zeichen::after { transform: rotate(90deg); }
.frage-knopf[aria-expanded="true"] .frage-zeichen::after { transform: rotate(0deg); }

.frage-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--kurve); }
.frage-knopf[aria-expanded="true"] + .frage-text { grid-template-rows: 1fr; }
.frage-text > div { overflow: hidden; }
.frage-text p {
  max-width: 68ch;
  padding: 0 var(--s3) var(--s3);
  color: var(--text-2);
  font-size: 1rem;
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(0.5rem, 1vw, 0.9rem); }
.kontakt-karte {
  padding: var(--s4);
  background: var(--karte);
  border: 1px solid var(--kontur);
  border-radius: var(--r-karte);
}
.kontakt-karte h2 { font-size: var(--t-sektion); margin-bottom: var(--s2); }
.kontakt-daten { display: grid; gap: var(--s3); margin-top: var(--s4); }
.kontakt-zeile { display: grid; gap: 0.25rem; }
.kontakt-zeile dt {
  font-size: var(--t-mini); font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.kontakt-zeile dd { font-size: 1.1rem; }
.kontakt-zeile a { text-decoration: none; }
.kontakt-zeile a:hover { color: var(--rot-hell); }
.kontakt-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--s4); }

.zeiten { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--kontur); }
.zeiten-liste { display: grid; gap: 0.6rem; margin-top: var(--s2); }
.zeiten-liste div { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-klein); }
.zeiten-liste dt { color: var(--text-2); }
.zeiten-liste dd { font-variant-numeric: tabular-nums; }
.zeiten-liste .zu dd { color: var(--text-3); }

.karte-bild {
  position: relative;
  display: block;
  border-radius: var(--r-karte);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  min-height: 340px;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-fahne {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3);
  background: linear-gradient(to top, rgba(10,10,10,0.95), rgba(10,10,10,0));
  font-size: var(--t-klein);
}
.karte-fahne b { font-weight: 400; }

/* ==========================================================================
   Abschluss
   ========================================================================== */
.schluss {
  position: relative;
  display: grid;
  gap: var(--s4);
  justify-items: center;
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) var(--innen);
  overflow: hidden;
  isolation: isolate;
}
.schluss-bild { position: absolute; inset: 0; z-index: -2; }
.schluss-bild img { width: 100%; height: 100%; object-fit: cover; }
.schluss-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,21,21,0.94) 0%, rgba(21,21,21,0.72) 48%, rgba(21,21,21,0.97) 100%);
}
.schluss .label { color: var(--text-2); }
.schluss h2 { font-size: var(--t-gross); font-weight: 200; line-height: 1; }
.schluss p { max-width: 46ch; color: var(--text-2); }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.fuss {
  padding: var(--s5) var(--innen) var(--s4);
  border-top: 1px solid var(--kontur);
  font-size: var(--t-klein);
}
.fuss-oben { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s4); }
.fuss-oben h2 {
  font-size: var(--t-mini); font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s2);
}
.fuss-liste { display: grid; gap: 0.55rem; }
.fuss-liste a { text-decoration: none; color: var(--text-2); }
.fuss-liste a:hover, .fuss-liste a:focus-visible { color: var(--text); }
.fuss-marke p { max-width: 36ch; color: var(--text-2); margin-top: var(--s2); }

.fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--kontur);
  color: var(--text-3);
}
.fuss-unten nav { display: flex; gap: var(--s3); }
.fuss-unten a { text-decoration: none; }
.fuss-unten a:hover { color: var(--text); }

/* ---- Einblenden ---- */
.auf { opacity: 0; transform: translateY(22px); transition: opacity var(--lang) var(--kurve), transform var(--lang) var(--kurve); }
.auf[data-sichtbar="ja"] { opacity: 1; transform: none; }
.auf-2 { transition-delay: 80ms; }
.auf-3 { transition-delay: 160ms; }
.auf-4 { transition-delay: 240ms; }

/* ==========================================================================
   Schmalere Bildschirme
   ========================================================================== */
@media (max-width: 1180px) {
  .navi { display: none; }
  .kopf-telefon { display: none; }
  .schalter { display: flex; }
  .b-gross { grid-column: span 12; }
  .b-hoch { grid-column: span 6; grid-row: auto; min-height: 340px; }
  .b-klein { grid-column: span 6; }
  .b-mittel { grid-column: span 6; }
}

@media (max-width: 900px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ueber-paar { grid-template-columns: minmax(0, 1fr); }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .preis-gruppen { grid-template-columns: minmax(0, 1fr); }
  .schaden-reihe { grid-template-columns: minmax(0, 1fr); }
  .ablauf-reihe { grid-template-columns: minmax(0, 1fr); }
  .fuss-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss-marke { grid-column: span 2; }
  .ueber-text { position: static; padding: var(--s4) 0 0; }
  .ueber-bild::after { background: linear-gradient(to bottom, rgba(12,12,12,0.4) 0%, rgba(12,12,12,0.1) 100%); }
  .karte-bild { min-height: 260px; }
}

@media (max-width: 620px) {
  .hero { min-height: min(90dvh, 760px); }
  .hero-unten { flex-direction: column; align-items: stretch; }
  .hero-text { max-width: none; }
  .hero-kachel { width: 100%; }
  .hero-aktionen .knopf { flex: 1 1 100%; }
  .b-gross, .b-hoch, .b-klein, .b-mittel { grid-column: span 12; min-height: 250px; }
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .ueber-reihe { grid-template-columns: minmax(0, 1fr); }
  .fuss-oben { grid-template-columns: minmax(0, 1fr); }
  .fuss-marke { grid-column: auto; }
  .marke-text { font-size: 0.95rem; }
  .preis-gruppe dl { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .preis-gruppe dt { margin-top: var(--s2); }
  .preis-gruppe dt:first-of-type { margin-top: 0; }
  .preis-gruppe dd { text-align: left; font-size: 1.15rem; }
  .zeiten-liste div { flex-direction: column; gap: 0.1rem; }
  .preis-fuss .knopf, .kontakt-aktionen .knopf { flex: 1 1 100%; }
}

/* ---- Weniger Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .auf { opacity: 1; transform: none; }
  .hero-bild { clip-path: none; }
  .hero-bild img, .hero-bild video { transform: none; }
  .hero-video { display: none; }
}

/* ---- BOCK STUDIO Credit ---- */
.bs-credit { color: inherit; opacity: .62; text-decoration: none; }
.bs-credit:hover, .bs-credit:focus-visible { opacity: 1; text-decoration: underline; }
.bs-credit-zeile {
  flex-basis: 100%; width: 100%;
  margin: .9rem 0 0; padding: 0;
  text-align: center; font-size: .78em; line-height: 1.5;
}