/* =============================================================
   main.css — Autohaus Odenwälder
   Clone der Live-Site (Elementor Kit 7647), Werte aus tokens.css.
   Aufbau: Reset -> Fonts -> Basis -> Layout -> Komponenten -> Sektionen -> Utilities
   ============================================================= */

/* ---------------- Fonts (self-hosted) ---------------- */
@font-face {
  font-family: "Distinct Style";
  src: url("/assets/fonts/distinct-style-sans.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}
/* Restliche Pixel aus vollflaechigen Baendern abfangen. clip statt hidden,
   damit position: sticky weiter am Viewport haengt. */
body { overflow-x: clip; }
img, picture, svg, video { max-width: 100%; }
/* Lange Komposita (z. B. "Fahrzeugbewertung") sonst breiter als der Bildschirm.
   Bewusst ohne automatische Silbentrennung: die wuerde auch den Markennamen
   trennen ("Oden-waelder"). */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: manual; }
/* Lange URLs in den Rechtstexten sonst breiter als der Bildschirm */
a { overflow-wrap: anywhere; }
img { height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); }
h1, h2 { font-family: var(--font-heading); }
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h1); }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--color-accent); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------- Layout ---------------- */
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--section-pad-y); }
.section--alt { background: var(--color-surface-alt-2); }
.section--alt2 { background: var(--color-surface-alt-3); }
.section--tight { padding-block: var(--section-pad-y-sm); }
/* Akzentflaeche (Live: Abschluss-CTA der Serviceseiten, bg #751329) */
.section--accent { background: var(--color-accent); color: #fff; }
.section--accent h1, .section--accent h2, .section--accent h3 { color: #fff; }
.section--accent .section-head p { color: rgba(255,255,255,.92); }
.section--accent .kicker { color: rgba(255,255,255,.75); }
.section--accent .btn--primary { background: #fff; color: var(--color-accent); }
.section--accent .btn--primary:hover { background: rgba(255,255,255,.88); color: var(--color-accent); }
.section--accent .btn--outline { color: #fff; border-color: rgba(255,255,255,.6); }
.section--accent .btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* Karten behalten auf rotem Grund ihre eigene Textfarbe */
.section--accent .card { color: var(--color-ink); }
.section--accent .card h2, .section--accent .card h3 { color: var(--color-heading); }
.section--accent .card .kicker { color: var(--color-accent); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; }
.split--sticky-copy { align-items: start; }
.split--sticky-copy > :first-child {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
}
/* Zweite Spalte laeuft mit (z. B. Notfall-Karte neben dem Formular) */
.split--sticky-aside { align-items: start; grid-template-columns: 3fr 2fr; }
.split--sticky-aside > :last-child {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
}
@media (max-width: 880px) {
  /* minmax(0, 1fr) statt 1fr: sonst zieht der breiteste Inhalt (Formular,
     Karten-Embed, Widget) die Spalte ueber den Container hinaus. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > * { min-width: 0; }
  .split--sticky-copy > :first-child,
  .split--sticky-aside > :last-child { position: static; }
}

/* ---------------- Section head (Kicker / H2 / Intro) ---------------- */
.kicker {
  display: block;
  font-size: var(--fs-kicker); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--ls-kicker); color: var(--color-accent); margin-bottom: 16px;
}
.section-head { max-width: 900px; margin-bottom: 48px; }
.section-head:last-child { margin-bottom: 0; }
.section-head--center { max-width: 1080px; margin-inline: auto; text-align: center; }
.section-head--timeline {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.section-head p { margin-top: 20px; color: var(--color-ink); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--btn-pad); border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn--outline { background: transparent; color: var(--color-heading); border-color: var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--onimage { background: transparent; color: #fff; border-color: #fff; }
.btn--onimage:hover { background: #fff; color: var(--color-heading); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row--center { justify-content: center; }
/* Mittig gesetzte Knopfreihen stehen auf dem Handy untereinander und fuellen
   die Breite - halbbreite Knoepfe mitten im Satzspiegel wirken dort verloren. */
@media (max-width: 767px) {
  .btn-row--center, .text-center .btn-row, form .btn-row {
    flex-direction: column; align-items: stretch;
  }
  .btn-row--center > .btn, .text-center .btn-row > .btn,
  form .btn-row > .btn { width: 100%; }
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 28px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--hover:hover { box-shadow: var(--shadow-card-hover); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--color-ink); }
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.card__icon svg { display: block; }
.card--value {
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--value:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.card__list { margin-top: 16px; display: grid; gap: 8px; }
.card__list li { position: relative; padding-left: 22px; font-size: var(--fs-small); color: var(--color-muted); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--color-accent);
}
/* Listenvariante mit Checkbox-Haken statt Punkt */
.card__list--check li { position: static; padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.card__list--check li::before { content: none; }
.card__list--check li > svg { flex: 0 0 auto; margin-top: 1px; color: var(--color-accent); }
.card__foot { margin-top: 20px; }
/* Karte in zartem Akzentton (z. B. Notfall-Service) */
.card--soft { background: var(--color-accent-soft); border-color: transparent; }
.card--soft .card__list li { color: var(--color-ink); }

/* Karten gleicher Reihe: CTA buendig am unteren Rand */
.card--stretch { display: flex; flex-direction: column; }
.card--stretch .card__foot { margin-top: auto; padding-top: 20px; }

.card__media { position: relative; margin: -28px -28px 24px; border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Leistungs-Kapseln im unteren Teil des Bildes. Der Verlauf traegt sie auf
   hellen wie dunklen Motiven; die Kapseln selbst bleiben deckend. */
.mediatags {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.mediatags a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--color-heading);
  font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mediatags a:hover, .mediatags a:focus-visible { background: #fff; color: var(--color-accent); text-decoration: none; }
@media (max-width: 480px) {
  .mediatags { gap: 6px; padding: 36px 12px 12px; }
  .mediatags a { padding: 5px 10px; font-size: 12px; }
}

.badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent);
  font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em;
}
.badge--solid { background: var(--color-accent); color: #fff; }
.badge--step {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------- Kundenstimmen ---------------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.review {
  margin: 0;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.review__stars {
  margin: 0 0 14px;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  font-size: 15px;
  line-height: 1;
}
.review > p:not(.review__stars) {
  color: var(--color-ink);
  font-weight: 300;
  line-height: 1.55;
}
.review footer {
  margin-top: 18px;
  font-size: 14px;
  color: var(--color-muted);
}
.review cite {
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
@media (max-width: 880px) { .reviews { grid-template-columns: 1fr; } }

/* ---------------- Header ---------------- */
.site-chrome { position: relative; }


.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
}
.site-header.is-stuck { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
/* Startseite: Header liegt transparent über dem Hero (wie live). */
.hero-overlay .site-chrome { background: transparent; }
.hero-overlay .site-header {
  position: absolute;
  top: 0;
  inset-inline: 0;
  background: transparent;
}
.hero-overlay .site-header .site-nav > ul > li > a,
.hero-overlay .site-header .site-nav > ul > li > button,
.hero-overlay .site-header .nav-toggle { color: #fff; }
/* Kopfleiste bleibt beim Scrollen oben. Bisher galt das nur fuer Seiten mit
   Hero-Overlay; ohne die Regel endet der Sticky-Bereich nach der Kopfzone,
   die Leiste scrollte also weg. Den Platz haelt .site-chrome (siehe main.js). */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  inset-inline: 0;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.hero-overlay .site-header.is-stuck .site-nav > ul > li > a,
.hero-overlay .site-header.is-stuck .site-nav > ul > li > button,
.hero-overlay .site-header.is-stuck .nav-toggle { color: var(--color-heading); }
.hero-overlay .site-header.is-stuck .logo img { filter: none; }
.header-inner { display: flex; align-items: center; gap: 48px; min-height: 88px; }
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; margin-inline-end: 16px; }
.logo img { width: 176px; height: auto; }
.hero-overlay .site-header .logo img { filter: brightness(0) invert(1); }

.site-nav { margin-left: auto; margin-inline-end: 8px; }
.site-nav > ul { display: flex; align-items: center; gap: 22px; }
.site-nav > ul > li > a, .site-nav > ul > li > button { white-space: nowrap; }
@media (max-width: 1366px) and (min-width: 1025px) {
  /* Enge Zone: fuenf Menuepunkte, davon drei mit Aufklapp-Pfeil, plus Logo und
     Termin-Knopf. Die Werte sind so gewaehlt, dass die Leiste bei 1280 px noch
     ohne Querlauf passt - beim Ergaenzen eines Punktes hier nachmessen. */
  .header-inner { gap: 24px; }
  .logo { margin-inline-end: 12px; }
  .site-nav { margin-inline-end: 4px; }
  .site-nav > ul { gap: 14px; }
  .site-nav > ul > li > a, .site-nav > ul > li > button { font-size: 15px; }
  .logo img { width: 140px; }
}
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a,
.site-nav > ul > li > button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
  color: var(--color-heading); font-weight: 400; background: none; border: 0;
}
.site-nav > ul > li > button .nav-label { min-width: 0; }
.site-nav a:hover { color: var(--color-accent); text-decoration: none; }
.site-nav .caret {
  flex: 0 0 auto; width: 12px; height: 8px; margin-top: 1px;
  opacity: .85; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-nav > ul > li > button:hover .caret,
.site-nav [aria-expanded="true"] .caret { opacity: 1; }
.site-nav [aria-expanded="true"] .caret { transform: rotate(180deg); }
.hero-overlay .site-header:not(.is-stuck) .site-nav .caret {
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* Im mobilen Menue steht der Pfeil auf weissem Grund - ohne Schatten */
@media (max-width: 1024px) {
  .site-nav .caret { filter: none !important; }
}

.subnav {
  position: absolute; top: 100%; left: -16px; min-width: 260px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 12px; display: none; z-index: 40;
}
.has-sub[data-open="true"] .subnav { display: block; }
.subnav a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--color-heading); font-size: 15px; }
.subnav a:hover { background: var(--color-surface-alt); color: var(--color-accent); text-decoration: none; }
.subnav__overview,
.subnav__sep { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border); }
/* Mega-Menues: mehrere Gruppen mit Titel nebeneinander. Die Verankerung haengt
   an der Position des Menuepunkts, damit das breite Panel im Fenster bleibt. */
.has-sub--mega-start .subnav { left: -16px; right: auto; }
.has-sub--mega-end .subnav { left: auto; right: -16px; }
.subnav--mega { min-width: 520px; padding: 16px; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.has-sub[data-open="true"] .subnav--mega { display: grid; }
.subnav__heading { padding: 0 12px 6px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }

/* "Auto finden": links Einstiege mit Beschreibung, rechts das Markenraster. */
.subnav--mega-auto { min-width: 640px; grid-template-columns: 1fr 1.1fr; gap: 4px 24px; }
.megalinks__title { display: block; font-weight: var(--fw-medium); }
.megalinks__desc { display: block; margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.megalinks a:hover .megalinks__desc, .megalinks a:focus-visible .megalinks__desc { color: inherit; }
.megabrands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 4px; }
.megabrands a { padding: 8px; border-radius: 10px; }
.megabrands__tile {
  display: flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 8px; background: var(--color-surface-alt);
  transition: background var(--dur) var(--ease);
}
.megabrands__tile img { width: 40px; height: 40px; object-fit: contain; }
/* Platzhalter, solange kein Logo vorliegt (Dacia, SEAT) */
.megabrands__wort { font-size: 14px; font-weight: var(--fw-medium); letter-spacing: .06em; color: var(--color-heading); }
.megabrands a:hover .megabrands__tile, .megabrands a:focus-visible .megabrands__tile { background: var(--color-accent-soft); }
.subnav .megabrands__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 4px 0; padding: 8px 12px;
  font-size: 14px; font-weight: var(--fw-medium); color: var(--color-accent);
}
.subnav .megabrands__cta:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.megabrands__cta svg { transition: transform var(--dur) var(--ease); }
.megabrands__cta:hover svg { transform: translateX(3px); }

.header-cta { flex: 0 0 auto; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--color-heading); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav__extra { display: none; }


@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  /* Der Header spannt den Stapelkontext fuer das Schubladenmenue auf; ohne
     diesen Wert bleibt es unter dem Cookie-Banner (z-index 90) liegen. */
  .site-header { z-index: 100; }
  .header-cta { display: none; }
  /* Vollbild-Menue: Eintraege gross und linksbuendig, darunter Kontaktblock,
     Sozialsymbole und CTA. z-index ueber dem Cookie-Banner (90). */
  .site-nav {
    position: fixed; inset: 0; width: 100%; margin: 0; background: #fff;
    transform: translateY(-100%); transition: transform .3s var(--ease);
    padding: 96px 16px 40px; overflow-y: auto; z-index: 90;
  }
  .site-nav[data-open="true"] { transform: none; }
  /* Logo und Schliesskreuz bleiben ueber der Flaeche sichtbar; die Kopfleiste
     wird deckend, damit die Eintraege nicht unter dem Kreuz durchlaufen. */
  .nav-toggle, .site-header .logo { position: relative; z-index: 95; }
  .site-header:has(.site-nav[data-open="true"]) { background: #fff; }
  .site-header:has(.site-nav[data-open="true"]) .logo img { filter: none; }
  .site-header:has(.site-nav[data-open="true"]) .nav-toggle { color: var(--color-heading); }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header--overlay .site-nav > ul > li > a { color: var(--color-heading); }
  .site-nav > ul > li > a, .site-nav > ul > li > button {
    justify-content: space-between; width: 100%; padding: 16px 4px;
    font-size: 19px; border-bottom: 1px solid var(--color-border);
  }
  .site-nav > ul > li:last-child > a { border-bottom: 0; }
  .subnav { position: static; display: none; border: 0; box-shadow: none; padding: 4px 0 12px 12px; min-width: 0; }
  .subnav a { padding: 13px 12px; }              /* mind. 44px Tippflaeche */
  .subnav__overview,
  .subnav__sep { padding-bottom: 6px; margin-bottom: 6px; }
  /* Mega-Menue: im mobilen Menue stapeln sich die Gruppen untereinander. */
  .subnav--mega, .subnav--mega-auto { min-width: 0; grid-template-columns: 1fr; gap: 0; }
  .megabrands { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
  .megabrands__tile { height: 52px; }
  .subnav__heading { padding: 12px 12px 2px; }
  /* Die Trennlinie laeuft ueber die volle Breite, der Text bleibt im Raster. */
  .site-nav__extra {
    display: block; margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--color-border);
    margin-inline: -16px; padding-inline: 16px;
  }
  .site-nav__name { font-weight: var(--fw-medium); color: var(--color-heading); }
  .site-nav__addr { margin-top: 6px; color: var(--color-muted); font-size: 15px; }
  .site-nav__contact { margin-top: 16px; }
  .site-nav__hours { margin-top: 14px; color: var(--color-muted); font-size: 15px; }
  .site-nav__socials { display: flex; gap: 18px; margin-top: 20px; }
  .site-nav__socials a { display: inline-flex; padding: 8px; color: var(--color-heading); }
  .site-nav__cta { margin-top: 28px; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 95; }
}

/* ---------------- Hero ---------------- */
/* overflow bleibt sichtbar, sonst schneidet der Hero die Auswahllisten der
   Suchkarte ab. Beschnitten wird nur die Bildebene. */
.hero { position: relative; min-height: 755px; display: flex; align-items: center; background: transparent center/cover no-repeat; color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.18) 100%); }
.hero > .container { position: relative; z-index: 2; }
/* 1px Ueberstand: bei gebrochener Hero-Hoehe blitzt sonst die dunkle
   Grundfarbe als Haarlinie unter dem Bild durch. */
.hero__bg { position: absolute; inset: -1px 0; z-index: 0; overflow: hidden; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 48px; align-items: center; }
.hero h1 { color: #fff; text-transform: uppercase; }
.hero__sub { margin-top: 24px; font-size: 18px; font-weight: 300; color: rgba(255,255,255,.92); max-width: 620px; }
.hero .btn-row { margin-top: 36px; }
/* Zwei Standorte nebeneinander im Hero */
/* Spalten auf Inhaltsbreite und als Block zentriert - bei 1fr-Spalten wirkt
   der Doppelblock aussermittig, weil beide Standorte verschieden breit sind. */
.hero__locations { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 24px 56px; }

@media (max-width: 767px) { .hero__locations { grid-template-columns: max-content; gap: 28px; } }
.hero--page { min-height: 520px; }
.hero--page .hero__grid { grid-template-columns: minmax(0, 820px); }
.hero--slim { min-height: 360px; }
/* Zentrierter Page-Hero (z. B. Über uns): dunkler Schleier + weisse Kantenverläufe */
.hero--center { justify-content: center; text-align: center; padding-block: 96px; }
.hero--center .hero__grid { grid-template-columns: minmax(0, 920px); justify-content: center; margin-inline: auto; }
.hero--center .hero__sub { margin-inline: auto; max-width: 760px; }
.hero--center .nap li, .hero--center .nap a { color: rgba(255,255,255,.92); }
.hero--center .nap li { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
/* Standortzeilen linksbuendig statt einzeln zentriert */
.hero--center .hero__locations .nap li { margin-inline: 0; }
.hero__locations .nap a { text-decoration: underline; text-underline-offset: 3px; }
.hero--center .nap a:hover { color: #fff; }
.hero--center .btn-row { justify-content: center; }
.hero--center .hero__bg img { object-position: center 40%; }
.hero--center::after { background: rgba(0, 0, 0, .58); }
/* Hero ohne Foto (z. B. Bad Rappenau, solange kein Standortfoto vorliegt) */
.hero--plain { background: var(--color-heading); }
.hero--plain::after { background: linear-gradient(120deg, rgba(117,19,41,.55) 0%, rgba(33,33,33,.2) 70%); }
.hero--spacer {
  min-height: 120px;
  display: block;
  background: #fff;
  color: inherit;
  overflow: visible;
}
.hero--spacer::after { display: none; }
@media (max-width: 1024px) {
  .hero { min-height: min(80vh, 620px); }
  .hero.hero--spacer { min-height: 100px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero--page { min-height: 420px; }
  .hero--slim { min-height: 300px; }
}

/* Mobil (wie live): Header bleibt weiss, das Heldenbild wird zum Bildband,
   Text und CTAs stehen darunter auf weissem Grund, Buttons volle Breite. */
@media (max-width: 767px) {
  .hero {
    min-height: 0; display: block; color: var(--color-ink);
    padding-top: 230px; padding-bottom: var(--section-pad-y);
    background: var(--color-surface);
  }
  .hero::after { inset: 0 0 auto 0; height: 230px; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)); }
  .hero__bg { inset: 0 0 auto 0; height: 230px; }
  .hero h1 { color: var(--color-heading); }
  .hero__sub { color: var(--color-ink); font-size: 16px; margin-top: 16px; }
  .hero .btn-row { margin-top: 28px; flex-direction: column; align-items: stretch; }
  .hero .btn { width: 100%; padding: 16px 20px; }
  .hero--page .btn--onimage, .hero--slim .btn--onimage { color: var(--color-heading); border-color: var(--color-heading); }
  .hero--page .btn--onimage:hover, .hero--slim .btn--onimage:hover { background: var(--color-heading); color: #fff; }
  .hero .nap { color: var(--color-ink) !important; }
  .hero .kicker { color: var(--color-accent) !important; }
  .hero--slim, .hero--page { padding-top: 200px; }
  .hero--slim .hero__bg, .hero--page .hero__bg,
  .hero--slim.hero::after, .hero--page.hero::after { height: 200px; }
  .hero.hero--spacer {
    min-height: 72px;
    padding: 0;
    background: #fff;
  }
  .hero.hero--spacer::after { display: none; }
  .searchcard { margin-top: 32px; }
  /* Karriere-Teaser und Kontakt-Kopf mittig */
  .featurecard__body { text-align: center; }
  .featurecard__body .btn-row { justify-content: center; align-items: stretch; }
  .featurecard__body .btn { width: 100%; }
  .contactsplit__head { text-align: center; }
  .contactsplit__head p { margin-inline: auto; }
  /* Neueroeffnungs-Flaeche mittig */
  .comingsoon .split { text-align: center; }
  .comingsoon .btn-row { justify-content: center; align-items: stretch; }
  .comingsoon .btn { width: 100%; }
  .comingsoon p { margin-inline: auto; }
  /* Alle Auftakt-Sektionen mobil mittig ausrichten */
  .hero .container, .hero__grid > div { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero .btn-row { justify-content: center; align-items: stretch; }
  .hero .nap li, .hero__locations .nap li { justify-content: center; margin-inline: auto; }
  .hero .kicker { text-align: center; }
  .section--photo:first-of-type .container > *,
  .section--photo:first-of-type .split > div:not([id^="ac24-"]) { text-align: center; }
  .section--photo:first-of-type .checklist li { justify-content: center; }
  /* Karten bleiben linksbuendig, zentriert wird nur der Einleitungstext */
  .section--photo:first-of-type .card { text-align: left; }
  .section--photo:first-of-type .btn-row { justify-content: center; align-items: stretch; }
  .section--photo:first-of-type .btn-row .btn { width: 100%; }
  /* Auftakt der Leistungsseiten: dort traegt die h1 keinen .hero, sondern
     steht in der ersten Sektion neben dem Bild. Mobil wird dieser Block wie
     ein Hero behandelt - mittig, alle Elemente ueber die volle Breite. */
  .section:has(> .container > .split > div > h1) .split > div { text-align: center; }
  .section:has(> .container > .split > div > h1) .split > div > p { margin-inline: auto; }
  .section:has(> .container > .split > div > h1) .btn-row {
    flex-direction: column; justify-content: center; align-items: stretch;
  }
  .section:has(> .container > .split > div > h1) .btn-row .btn { width: 100%; }
  .section:has(> .container > .split > div > h1) .nap li,
  .section:has(> .container > .split > div > h1) .checklist li { justify-content: center; }
  /* Ausnahme: der Ankauf-Auftakt bleibt linksbuendig - die Checkliste darunter
     liest sich mittig gesetzt schlecht. Knoepfe bleiben voll breit. */
  #ankauf .split > div,
  #ankauf .container > * { text-align: left; }
  #ankauf .split > div > p { margin-inline: 0; }
  #ankauf .nap li, #ankauf .checklist li { justify-content: flex-start; }
  /* Startseiten-Hero: Bild als Flaeche der ganzen Sektion statt Bildband oben.
     Die Varianten mit Bildband (--page, --slim) und ohne Foto bleiben davon
     ausgenommen. */
  .hero:not(.hero--page):not(.hero--slim):not(.hero--spacer):not(.hero--plain):not(.hero--center) {
    min-height: min(78vh, 620px);
    display: flex; align-items: center;
    padding-top: 96px; padding-bottom: 48px;
    color: #fff; background: transparent;
  }
  .hero:not(.hero--page):not(.hero--slim):not(.hero--spacer):not(.hero--plain):not(.hero--center) .hero__bg {
    inset: -1px 0; height: auto;
  }
  .hero:not(.hero--page):not(.hero--slim):not(.hero--spacer):not(.hero--plain):not(.hero--center)::after {
    inset: 0; height: auto;
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.65) 100%);
  }
  .hero:not(.hero--page):not(.hero--slim):not(.hero--spacer):not(.hero--plain):not(.hero--center) h1 { color: #fff; }
  .hero:not(.hero--page):not(.hero--slim):not(.hero--spacer):not(.hero--plain):not(.hero--center) .hero__sub { color: rgba(255,255,255,.92); }
  /* Zentrierter Hero bleibt vollflächig (wie Desktop-Screenshot) */
  .hero.hero--center {
    min-height: 420px; display: flex; align-items: center; justify-content: center;
    color: #fff; padding-top: 48px; padding-bottom: 48px; background: transparent;
  }
  .hero.hero--center .hero__bg { inset: -1px 0; height: auto; }
  .hero.hero--center::after { inset: 0; height: auto; background: rgba(0, 0, 0, .58); }
  .hero.hero--center h1 { color: #fff; }
  .hero.hero--center .hero__sub { color: rgba(255,255,255,.92); margin-inline: auto; }
  .hero.hero--center .btn-row { flex-direction: column; justify-content: center; align-items: stretch; }
  .hero.hero--center .btn { width: 100%; }
  .hero.hero--center .btn--onimage { color: #fff; border-color: #fff; }
  .hero.hero--center .btn--onimage:hover { background: #fff; color: var(--color-heading); }
  /* Page-Hero mit Foto: Bild fuellt die ganze Sektion, Text liegt darauf. */
  .hero.hero--fill {
    min-height: 0;
    display: flex;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 48px;
    color: #fff;
    background: transparent;
  }
  .hero.hero--fill .hero__bg {
    inset: -1px 0;
    height: auto;
  }
  .hero.hero--fill::after {
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.65) 100%);
  }
  .hero.hero--fill h1 { color: #fff; }
  .hero.hero--fill .hero__sub { color: rgba(255,255,255,.92); }
  .hero.hero--fill .btn--onimage { color: #fff; border-color: #fff; }
  .hero.hero--fill .btn--onimage:hover { background: #fff; color: var(--color-heading); }
  /* Header liegt mobil nicht mehr ueber dem Bild, bleibt aber beim Scrollen sichtbar */
  .hero-overlay .site-chrome { background: transparent; }
  .hero-overlay .site-header {
    position: sticky;
    top: 0;
    background: var(--color-surface);
  }
  /* Beim Scrollen fix, damit die Leiste sichtbar bleibt: sticky griffe hier
     nur bis zum Ende der Kopfzone. */
  .hero-overlay .site-header.is-stuck { position: fixed; inset-inline: 0; }
  .hero-overlay .site-header .site-nav > ul > li > a,
  .hero-overlay .site-header .site-nav > ul > li > button,
  .hero-overlay .site-header .nav-toggle { color: var(--color-heading); }
  .hero-overlay .site-header .logo img { filter: none; }
}

/* Suchkarte im Hero / Autegro-Quickfilter */
.searchcard { background: var(--color-surface-alt); border-radius: var(--radius-card); padding: 28px; color: var(--color-ink); box-shadow: var(--shadow-card); }
.searchcard--widget { padding: 0; background: transparent; box-shadow: none; }
.searchcard .field + .field { margin-top: 14px; }
.searchcard .btn { margin-top: 18px; }

/* ---------------- Forms ---------------- */
.field { display: block; }
.field > label, .field-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: var(--fw-medium); color: var(--color-heading); }
.req { color: var(--color-accent); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="file"], select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--color-ink);
  background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-input);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(117,19,41,.12); outline: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

.radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-row label, .check label {
  display: block;
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--color-ink);
  line-height: 1.45;
}
.radio-row input, .check input {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: auto;
  margin: 0;
  accent-color: var(--color-accent);
}
.check { font-size: 14px; }
.form-note { margin-top: 14px; font-size: 13px; color: var(--color-muted); display: flex; align-items: center; gap: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Spam-Schutz-Widget aus dem Blickfeld nehmen. Es bleibt im DOM und rechnet
   seine Aufgabe weiter - nur sichtbar ist es nicht mehr. Deshalb das
   Visually-hidden-Muster (aus dem Fluss geklappt) statt display:none:
   Letzteres wuerde das Widget in manchen Browsern gar nicht erst starten,
   und das Formular liesse sich nicht mehr absenden. */
.altcha {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-input); font-size: 15px; display: none; }
.form-status[data-state="ok"] { display: block; background: rgba(47,125,103,.1); color: #1f5a4a; }
.form-status[data-state="error"] { display: block; background: rgba(234,71,70,.1); color: #a52422; }
.form-status[data-state="deferred"] { display: block; background: var(--color-accent-soft); color: var(--color-accent); }

.formcard { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 32px; }
#form,
#bewerbung { scroll-margin-top: calc(var(--header-height) + 12px); }
.formcard--contact { border: 0; box-shadow: var(--shadow-card); }
.formcard__title { font-size: 28px; margin-bottom: 24px; letter-spacing: 0; line-height: 1.2; }
/* Ueberschrift der Anfrageformulare */
.formcard__h { font-size: 32px; margin-bottom: 8px; }
@media (max-width: 767px) {
  .formcard { padding: 22px; }
  .formcard__title { font-size: 22px; }
  .formcard__h { font-size: 22px; }
}

/* Tabs (Ankauf manuell / VIN) */
.tabs { display: flex; gap: 8px; background: var(--color-surface-alt); padding: 6px; border-radius: var(--radius-btn); margin-bottom: 24px; }
.tabs button { flex: 1; padding: 10px 16px; border: 0; border-radius: 6px; background: transparent; color: var(--color-heading); font-weight: var(--fw-medium); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--color-accent); box-shadow: var(--shadow-card); }
[role="tabpanel"][hidden] { display: none; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 900px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; background: none; border: 0; text-align: left;
  font-size: 16px; font-weight: var(--fw-medium); color: var(--color-heading);
}
.faq__icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; background: var(--color-accent); color: #fff; display: grid; place-items: center; }
.faq__icon svg { transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon svg { transform: rotate(45deg); }
.faq__a { padding: 0 24px 22px; color: var(--color-ink); font-weight: 300; }
.faq__a[hidden] { display: none; }

/* ---------------- Consent-gated Embeds (Maps, ELN, Instagram) ---------------- */
.embed { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-alt); }
.embed iframe { display: block; width: 100%; border: 0; }
.embed__placeholder { display: grid; place-items: center; text-align: center; padding: 48px 24px; gap: 14px; min-height: 320px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); }
.embed__placeholder p { max-width: 46ch; color: var(--color-muted); font-size: 15px; }
.embed--tall .embed__placeholder, .embed--tall iframe { min-height: 780px; height: 780px; }
.embed--map .embed__placeholder, .embed--map iframe { min-height: 350px; height: 350px; }
/* Standort-NAP: Karte so hoch wie die Kontaktkarte daneben, nicht die
   feste 350px. In einer Spalte (Handy) greift wieder die Mindesthoehe. */
.split:has(> .locationcard):has(> .embed--map) { align-items: stretch; }
.split:has(> .locationcard) > .embed--map {
  display: flex;
  flex-direction: column;
  min-height: 350px;
}
.split:has(> .locationcard) > .embed--map .embed__placeholder,
.split:has(> .locationcard) > .embed--map iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 350px;
}
.embed--eln,
.embed--eln iframe {
  background: #eceef1;
}

/* ---------------- Autegro listing ---------------- */
.inventory { display: grid; gap: 80px; }
.inventory__slot { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); padding: 56px 24px; text-align: center; background: #fff; }
.inventory__slot--widget { border: 0; padding: 0; text-align: initial; background: transparent; }
.inventory__slot h3 { font-size: 22px; margin-bottom: 12px; }
.inventory__slot p { max-width: 60ch; margin-inline: auto; color: var(--color-muted); }
.wltp { font-size: 12px; line-height: 1.5; color: var(--color-muted); }

/* ---------------- Fahrzeugpool-CTA (seitenweite Komponente) ---------------- */
.poolcta {
  position: relative;
  background: #000;
  background-image: url("/assets/img/poolcta-bg.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  border-radius: var(--radius-card);
  padding: 56px;
  overflow: hidden;
}
.poolcta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.poolcta > * { position: relative; z-index: 1; }
.poolcta .kicker { color: rgba(255,255,255,.75); }
.poolcta h2 { color: #fff; font-size: 22px; letter-spacing: 0; line-height: 1.25; }
@media (max-width: 1024px) { .poolcta h2 { font-size: 20px; } }
@media (max-width: 767px)  { .poolcta h2 { font-size: 18px; } }
.poolcta p { margin-top: 20px; max-width: 70ch; color: rgba(255,255,255,.92); }
.poolcta .btn--primary { background: #fff; color: var(--color-accent); }
.poolcta .btn--primary:hover { background: rgba(255,255,255,.88); color: var(--color-accent); }
.poolcta .btn--outline { color: #fff; border-color: rgba(255,255,255,.6); }
.poolcta .btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* Auf dem Handy fuellt das Bild die ganze Sektion: der Block bricht seitlich
   aus dem Container aus und legt sich ueber den Abstand der Sektion. */
@media (max-width: 767px) {
  .poolcta {
    margin-inline: calc(var(--container-pad) * -1);
    margin-block: calc(var(--section-pad-y) * -1);
    border-radius: 0;
    padding: 56px 20px;
    text-align: center;
  }
  .poolcta p { margin-inline: auto; }
  .poolcta .btn-row { justify-content: center; align-items: stretch; }
  .poolcta .btn { width: 100%; }
}

/* ---------------- Coming-Soon Bad Rappenau (+ Scroll-Parallax) ---------------- */
.comingsoon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #fff;
}
.comingsoon__bg {
  position: absolute;
  inset: -15% 0;
  z-index: 0;
  background-image: url("/assets/img/comingsoon-bg-819.webp");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  will-change: transform;
}
.comingsoon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
  pointer-events: none;
}
.comingsoon > .container { position: relative; z-index: 2; }
.comingsoon .kicker { color: rgba(255, 255, 255, 0.75); }
.comingsoon h2 { color: #fff; }
.comingsoon p { color: rgba(255, 255, 255, 0.92); }
.comingsoon .btn--primary { background: #fff; color: var(--color-accent); }
.comingsoon .btn--primary:hover { background: rgba(255, 255, 255, 0.88); color: var(--color-accent); }
.comingsoon .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.comingsoon .btn--outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .comingsoon__bg { inset: 0; will-change: auto; transform: none !important; }
}

/* ---------------- Arbeitsklima (Foto-Hintergrund + Scroll-Parallax) ---------------- */
.arbeitsklima {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #fff;
}
.arbeitsklima__bg {
  position: absolute;
  inset: -15% 0;
  z-index: 0;
  background-image: url("/assets/img/bild_werkstatt-1920.webp");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  will-change: transform;
}
.arbeitsklima::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
  pointer-events: none;
}
.arbeitsklima > .container { position: relative; z-index: 2; }
.arbeitsklima h2 { color: #fff; }
.arbeitsklima p { color: rgba(255, 255, 255, 0.92); }
@media (prefers-reduced-motion: reduce) {
  .arbeitsklima__bg { inset: 0; will-change: auto; transform: none !important; }
}

/* ---------------- Standortkarten ---------------- */
.locationcard { display: flex; flex-direction: column; gap: 18px; }
.locationcard > .card__media { margin-bottom: 0; }
/* Die beiden Standortkarten sind unterschiedlich lang - Bad Rappenau zeigt bis
   zur Eroeffnung keine Kontaktdaten. Die Buttons sollen trotzdem auf einer
   Linie stehen, deshalb schiebt der Fuss den Rest nach oben. */
.locationcard .card__foot { margin-top: auto; }
.locationcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* Auf dem Handy steht das Etikett unter der Ueberschrift statt daneben */
@media (max-width: 767px) { .locationcard__head { flex-direction: column; gap: 10px; } }
.nap { display: grid; gap: 10px; font-size: 15px; }
.nap li { display: flex; gap: 10px; align-items: center; color: var(--color-ink); }
.nap svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 7px;
  box-sizing: content-box;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 8px;
}
.nap a { color: var(--color-ink); }
.nap a:hover { color: var(--color-accent); }

/* ---------------- Overlap-Slider ----------------
   Horizontal ziehbar; die Karte am linken Rand bleibt haengen, schrumpft und
   dreht sich unter die nachfolgende. Ohne JS bleibt es ein einfacher Scroller. */
.oslider { position: relative; }
.oslider__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 8px 0 24px;
  cursor: grab;
}
.oslider__viewport::-webkit-scrollbar { display: none; }
.oslider__viewport:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-card); }
.oslider__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.oslider__viewport.is-dragging a, .oslider__viewport.is-dragging .card { pointer-events: none; }
.oslider__track { display: flex; gap: var(--gap); align-items: stretch; width: max-content; }
.oslider__item {
  flex: 0 0 clamp(252px, 23vw, 300px);
  scroll-snap-align: start;
  transform-origin: left center;
  transition: box-shadow var(--dur) var(--ease);
}
.oslider__viewport.is-dragging .oslider__item { will-change: transform; }
/* Ab Tablet bleibt der Overlap-Slider wie gehabt: dauerhaft aufgestellte
   Ebenen und hartes Einrasten. Auf dem Handy kostet beides mehr als es
   bringt - dort greifen die Regeln weiter unten. */
@media (min-width: 768px) {
  .oslider__item { will-change: transform; }
}
@media (max-width: 767px) {
  .oslider__viewport { scroll-snap-type: x proximity; }
}
/* Breite Variante: zwei Karten im Blick, der Rest wird herangezogen.
   Breite an das Fenster gekoppelt - Prozentwerte greifen nicht, weil die
   Spur max-content breit ist und damit keine feste Bezugsbreite hat. */
/* Drei Karten fuellen den Ausschnitt genau, die naechste wird herangezogen */
.oslider--wide .oslider__item { flex: 0 0 min(calc(33.33vw - var(--gap)), 424px); }
@media (max-width: 880px) and (min-width: 768px) { .oslider--wide .oslider__item { flex-basis: min(86vw, 420px); } }
/* Mietkarten im Slider auf gleiche Hoehe: ihr height:100% verhindert sonst das
   Strecken in der Flex-Zeile. Der Button sitzt bündig unten. */
.oslider__item.rental-card { height: auto; }
.oslider__item.rental-card .rental-card__body > .btn { margin-top: auto; }
/* Slider nur auf dem Handy; ab Tablet wieder ein normales Raster */
@media (min-width: 768px) {
  .oslider--mobil .oslider__viewport { overflow: visible; }
  /* display:grid zurueckholen: .oslider__track steht spaeter im Stylesheet
     als .grid und wuerde sonst mit display:flex gewinnen - die Karten
     staenden gequetscht in einer Reihe statt im Raster. */
  .oslider--mobil .oslider__track { display: grid; width: auto; }
  .oslider--mobil .oslider__item { flex: initial; }
  .oslider--mobil .oslider__nav { display: none; }
}
@media (max-width: 767px) {
  .oslider--mobil .oslider__track { display: flex; }
  /* Auf dem Handy steht genau eine Karte im Ausschnitt; die naechste wird
     nicht angeschnitten, sondern erst beim Wischen sichtbar. */
  .oslider__item,
  .oslider--wide .oslider__item,
  .oslider--mobil .oslider__item { flex: 0 0 calc(100vw - var(--container-pad) * 2); }
}
.oslider__nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.oslider__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-heading); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.oslider__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.oslider__btn:disabled { opacity: .35; cursor: default; }
.oslider__btn:disabled:hover { background: var(--color-surface); border-color: var(--color-border); color: var(--color-heading); }
.oslider__btn[data-oslider-prev] svg,
.oslider__btn[data-flick-prev] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .oslider__item { transform: none !important; opacity: 1 !important; }
}

/* ---------------- Stapelnde Sticky-Karten ----------------
   Jede Karte rastet unter dem Header ein, die naechste schiebt sich darueber.
   Einflug (Rotation/Versatz) und Bounce kommen aus main.js. */
/* clip haelt die Handy-Seite schmal; die 32px Luft verhindern, dass am
   Schreibtisch die Ecken der eindrehenden Karte flach beschnitten werden. */
.stackcards { --stack-top: 104px; max-width: 860px; margin-inline: auto; overflow-x: clip; overflow-clip-margin: 32px; }
/* Alle Karten rasten auf derselben Hoehe ein; der sichtbare Versatz kommt aus
   der Transformation, sonst rutschen sie beim Loesen um diesen Betrag zusammen. */
.stackcards__item { position: sticky; top: var(--stack-top); }
/* Stapel-Sektion: unten mehr Luft, damit die fertige Karte nicht am Rand klebt */
.section--stack { padding-bottom: calc(var(--section-pad-y) * 1.5); }

/* Sektionskopf bleibt ueber dem Stapel stehen; --stack-top setzt main.js
   passend zur gemessenen Kopfhoehe. */
.section-head--sticky {
  --head-top: 88px;
  position: sticky; top: var(--head-top); z-index: 3;
  padding-block: 24px; margin-bottom: 0;
}
/* Ab dem Ausloesepunkt setzt main.js position:relative plus eingefrorenen
   Versatz - das Halten bleibt damit compositor-seitig und ruckelt nicht. */
.section-head--sticky.is-released { position: relative; top: 0; }
.section--accent .section-head--sticky { background: var(--color-accent); }
@media (max-width: 767px) { .section-head--sticky { --head-top: 72px; padding-block: 16px; } }
@media (prefers-reduced-motion: reduce) { .section-head--sticky { transform: none !important; } }

/* Scrollweg liegt in eigenen Abstandshaltern: die Sticky-Zone einer Karte endet
   immer um ihre eigene Boxhoehe frueher, Rand oder Innenabstand am Item wuerden
   die Karten also vorzeitig loesen. Der Nachlauf haelt den Stapel am Ende. */
.stackcards__gap { height: 30vh; }
.stackcards__pos { will-change: transform; }
.stackcards__card {
  position: relative;
  padding: 40px;
  box-shadow: var(--shadow-card);
}
.stackcards__num {
  position: absolute; top: 40px; right: 40px;
  font-size: var(--fs-kicker); font-weight: 500;
  letter-spacing: var(--ls-kicker); color: var(--color-accent);
}
.stackcards__card h3 { font-size: 26px; }
.stackcards__card.is-locked { animation: stackcards-bounce .5s var(--ease); }
@keyframes stackcards-bounce {
  0%   { transform: scale(1, 1); }
  22%  { transform: scale(1.025, .965); }
  52%  { transform: scale(.988, 1.016); }
  78%  { transform: scale(1.006, .995); }
  100% { transform: scale(1, 1); }
}
@media (max-width: 767px) {
  .stackcards { --stack-top: 88px; }
  .stackcards__gap { height: 24vh; }
  .stackcards__card { padding: 28px; }
  .stackcards__num { top: 28px; right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .stackcards__item { position: static; }
  .stackcards__gap { height: var(--gap); }
  .stackcards__pos { transform: none !important; }
  .stackcards__card.is-locked { animation: none; }
}

/* ---------------- Flick-Karten ----------------
   Aktive Karte mittig, Nachbarn gefaechert dahinter. Ziehen wechselt die Karte,
   die Feder kommt aus der Transition-Kurve. */
.flick { position: relative; overflow-x: clip; }
.flick__list {
  position: relative; margin-inline: auto; max-width: 360px;
  cursor: grab; touch-action: pan-y;
}
.flick__media {
  margin: -28px -28px 20px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}
.flick__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.flick__list.is-dragging { cursor: grabbing; }
.flick__list.is-dragging a, .flick__list.is-dragging button { pointer-events: none; }
.flick__item {
  position: absolute; inset: 0;
  transition: transform .6s cubic-bezier(.2, 1.25, .35, 1), opacity .4s ease;
  will-change: transform;
}
.flick__item .card { height: 100%; }
.flick__list.is-dragging .flick__item { transition: none; }
.flick__nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .flick__item { transition: none; }
}

/* ---------------- Horizontal stapelnde Karten ----------------
   Der Abschnitt bleibt stehen, die Karten laufen nacheinander von rechts in
   ihre Spalte und federn beim Einrasten. Scrollweg liegt im Abstandshalter,
   nicht im Innenabstand - sonst endet die Sticky-Zone zu frueh. */
.hstack { position: relative; }
.hstack__pin { position: sticky; top: clamp(96px, 12vh, 140px); }
.hstack__gap { height: calc(var(--hstack-steps, 3) * 32vh); }
/* clip-margin gibt Schatten und Feder-Animation der Karten 24px Luft, bevor
   die Reihe beschneidet; auf dem Handy scrollt die Reihe (overflow: auto),
   dort greift der Wert schlicht nicht. */
.hstack__row { overflow-x: clip; overflow-clip-margin: 24px; }
.hstack__item { will-change: transform; }
.hstack__item .card { height: 100%; }
.hstack__item.is-locked .card { animation: stackcards-bounce .5s var(--ease); }
/* Auf dem Handy traegt der Stapel nicht: er wuerde nur ~1000px Leerscroll
   erzeugen. Statt die Karten untereinander zu legen, werden sie zu einer
   wischbaren Reihe - gleiche Anmutung wie der Overlap-Slider, aber ohne JS. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .hstack__pin { position: static; }
  .hstack__gap { display: none; }
  .hstack__item { transform: none !important; opacity: 1 !important; }
}
/* Die Pfeilleiste wird per JS nur fuer die Handy-Variante eingehaengt; beim
   Vergroessern des Fensters darf sie nicht stehen bleiben. */
@media (min-width: 768px) {
  .hstack > .oslider__nav, .step-timeline > .oslider__nav { display: none; }
}
@media (max-width: 767px) {
  .hstack__row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Die Reihe bricht seitlich aus dem Container aus, damit die naechste
       Karte am Rand angeschnitten sichtbar bleibt. */
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    /* Ohne scroll-padding rastet die Karte an der Scrollport-Kante ein und
       stuende buendig am Displayrand statt im Seitenraster. */
    scroll-padding-inline: var(--container-pad);
    padding-block: 4px 8px;
    gap: 14px;
  }
  .hstack__row::-webkit-scrollbar { display: none; }
  .hstack__item {
    /* Genau eine Karte im Blick - die naechste wird nicht angeschnitten. */
    flex: 0 0 calc(100vw - var(--container-pad) * 2);
    scroll-snap-align: start;
  }
}

/* Bei transparentem Header muss die erste Sektion darunter durchlaufen,
   ihr Inhalt aber unterhalb beginnen. */
.hero-overlay .section--photo:first-of-type,
.hero-overlay .rent-intro { padding-top: calc(var(--section-pad-y) + 96px); }
/* Auf dem Handy reicht der Platz unter der Kopfleiste; der volle Zuschlag
   liesse die Ueberschrift zu tief stehen. */
@media (max-width: 767px) {
  .hero-overlay .section--photo:first-of-type,
  .hero-overlay .rent-intro { padding-top: calc(var(--section-pad-y) + 40px); }
}
/* Nur ab Tablet: auf dem Handy legt .hero--page den Bildstreifen oben ab und
   braucht seinen eigenen, groesseren Innenabstand. */
@media (min-width: 768px) { .hero-overlay .hero--page { padding-top: 96px; } }

/* ---------------- Radiale Karten-Laufschrift ----------------
   Die Karten sitzen auf einem Kreis, der Ring dreht sich endlos. Reine CSS-
   Animation; --total, --radius und --duration steuern Anzahl, Kreisgroesse
   und Tempo. Bei reduzierter Bewegung wird daraus ein normales Raster. */
.rmarquee {
  --total: 24;
  /* Radius so gross, dass der Bogenabstand (2*pi*r / --total) breiter ist
     als eine Karte - sonst ueberlappen die Karten. */
  --radius: 92em;
  --band: 22em;
  --card-w: 19em;
  --card-h: 13em;
  --duration: 110s;
  position: relative;
  height: var(--band);
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
}
.rmarquee__ring {
  position: absolute;
  left: 50%;
  /* Kreismittelpunkt so tief, dass die Karten mittig im Band stehen.
     Der Ring selbst ist punktgross, sonst verschiebt seine eigene Groesse
     den Drehpunkt um eine halbe Karte. */
  top: calc(var(--radius) + var(--band) / 2);
  width: 0;
  height: 0;
  animation: rmarquee-spin var(--duration) linear infinite;
}
.rmarquee:hover .rmarquee__ring { animation-play-state: paused; }
/* Blende oben und unten: an der Kante deckend weiss, nach innen auf null */
.rmarquee::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 22%),
    linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 22%);
}
.rmarquee__item {
  /* Kartenmitte exakt auf den Drehpunkt legen: Rasterzentrierung greift bei
     einem punktgrossen Container nicht zuverlaessig. */
  position: absolute;
  left: 0;
  top: 0;
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-h) / -2);
  /* feste Groesse: alle Karten teilen sich eine Rasterzelle, ohne Vorgabe
     wuerde die laengste Karte die Hoehe aller anderen bestimmen */
  width: var(--card-w);
  height: var(--card-h);
  transform: rotate(calc(360deg / var(--total) * (var(--card) - 1))) translateY(calc(var(--radius) * -1));
}
.rmarquee__item .card { height: 100%; padding: 20px; }
.rmarquee__item .card h3 { font-size: 18px; margin-bottom: 8px; }
.rmarquee__item .card p { font-size: 14px; }
.rmarquee__item .card__icon { width: 38px; height: 38px; margin-bottom: 10px; }
@keyframes rmarquee-spin { to { transform: rotate(360deg); } }
/* Handy: Karte hoch genug fuer den laengsten Text, Radius entsprechend
   groesser, damit der Bogenabstand weiterhin breiter als die Karte ist. */
@media (max-width: 880px) { .rmarquee { --radius: 64em; --band: 19em; --card-w: 14em; --card-h: 13em; } }
@media (prefers-reduced-motion: reduce) {
  .rmarquee { height: auto; overflow: visible; margin-inline: 0; }
  .rmarquee__ring { position: static; animation: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .rmarquee__item { grid-area: auto; width: auto; transform: none; }
  .rmarquee__item[aria-hidden="true"] { display: none; }
}

/* ---------------- Sektion mit Foto-Hintergrund ----------------
   Bild als Flaeche, dunkler Schleier darueber, Text hell. Karten und
   Formulare behalten ihre eigenen Farben. Das Bild ragt 1px ueber, sonst
   blitzt an gebrochenen Hoehen die Kante durch. */
.section--photo { position: relative; isolation: isolate; color: #fff; }
.section--photo__bg { position: absolute; inset: -1px 0; z-index: -2; }
.section--photo__bg img { width: 100%; height: 100%; object-fit: cover; }
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .65);
}
.section--photo h1, .section--photo h2 { color: #fff; }
.section--photo p, .section--photo li { color: rgba(255,255,255,.92); }
.section--photo .kicker { color: #fff; }
.section--photo .checklist svg { color: #fff; }
.section--photo .card { color: var(--color-ink); }
.section--photo .card h2, .section--photo .card h3 { color: var(--color-heading); }
.section--photo .card p, .section--photo .card li { color: var(--color-ink); }

/* ---------------- Reveal beim Scrollen ----------------
   Elemente steigen versetzt ein, sobald die Gruppe ins Bild kommt. Nur einmal.
   Ohne JS oder bei reduzierter Bewegung bleibt alles sichtbar. */
[data-reveal-group] [data-reveal],
[data-reveal-section] [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 24px));
  transition: opacity .8s cubic-bezier(.77, 0, .175, 1), transform .8s cubic-bezier(.77, 0, .175, 1);
}
[data-reveal-group] [data-reveal].is-revealed,
[data-reveal-section] [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (max-width: 767px) { [data-reveal-section] { --reveal-distance: 16px; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-group] [data-reveal],
  [data-reveal-section] [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Marken-Logos ---------------- */
.brandgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
.brandgrid a { display: grid; place-items: center; padding: 40px 24px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); transition: box-shadow var(--dur) var(--ease); }
.brandgrid a:hover { box-shadow: var(--shadow-card-hover); }
.brandgrid img { width: 120px; height: auto; }
@media (max-width: 880px) { .brandgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------- Vorteile / Benefit-Karten ---------------- */
.benefitgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.benefitcard {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 20px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.benefitcard h3 {
  margin: 0;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-heading);
}
.benefitcard__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f8ef;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.benefitcard__icon svg { display: block; }
@media (max-width: 767px) {
  .benefitgrid { grid-template-columns: 1fr; }
}

/* ---------------- Vermietung: Intro + Mietkonzept (Live-Klon) ---------------- */
/* Vermietungs-Auftakt mit Foto: Bild als Flaeche, Schleier fuer Lesbarkeit */
.rent-intro {
  position: relative;
  isolation: isolate;
  background: var(--color-heading);
  display: flex;
  align-items: center;
  min-height: min(72vh, 720px);
  padding-block: calc(var(--section-pad-y) * 1.6);
}
.rent-intro > .container { width: 100%; }
/* Handy: keine Mindesthoehe, die Sektion ist nur so hoch wie ihr Inhalt */
@media (max-width: 767px) { .rent-intro { min-height: 0; padding-bottom: var(--section-pad-y); } }
.rent-intro__bg { position: absolute; inset: 0; z-index: -2; }
.rent-intro__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.rent-intro::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.66) 100%);
}
.rent-intro h1 { color: #fff; }
.rent-intro .rent-hero__sub { color: rgba(255,255,255,.92); }
.rent-konzept h2 { color: var(--color-heading); }
.rent-konzept .section-head p { color: var(--color-ink); }
.rent-konzept .card h3 { color: var(--color-heading); }
.rent-hero {
  text-align: center;
  max-width: 1024px;
  margin-inline: auto;
}
.rent-hero__sub {
  margin: 20px auto 0;
  max-width: 760px;
}
.rent-hero .btn-row { margin-top: 20px; }
.card .benefitcard__icon { margin-bottom: 16px; }
.rent-konzept .benefitcard__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.rental-note {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-size: 14px;
  color: var(--color-ink);
}
.rental-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rental-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.rental-card__media {
  position: relative;
  background: var(--color-surface-alt);
}
.rental-card__media img {
  width: 100%;
  height: 240px;
  aspect-ratio: auto;
  object-fit: cover;
}
.rental-card__media--empty {
  display: grid;
  place-items: center;
  height: 240px;
  font-size: 48px;
}
.rental-card__tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #fff;
  color: var(--color-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.rental-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
  padding: 24px;
}
.rental-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.rental-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.rental-card__row strong {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 600;
}
.rental-card__row--alt {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-alt);
}
.rental-card__row--alt strong {
  font-size: 20px;
  font-weight: 500;
}
.rental-card .small.muted {
  margin-top: auto;
  color: var(--color-muted);
}
.rental-card .btn {
  padding: 16px;
  border-radius: 4px;
}

.terms-card {
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.terms-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.terms-card__head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.terms-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.terms-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.terms-card__list { margin-top: 0; }
.terms-card__list li { color: var(--color-ink); font-size: 15px; }
.terms-card__list li::before { background: var(--color-accent); }
.terms-weekend {
  margin-top: 24px;
  padding: 32px;
  border-radius: 12px;
  background: var(--color-accent);
  color: #fff;
  text-align: center;
}
.terms-weekend__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: #fff;
}
.terms-weekend h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.terms-weekend p { margin: 0; color: #fff; font-weight: 300; }

.rent-quality .card {
  background: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.rent-quality .card:hover { box-shadow: var(--shadow-card-hover); }
.quality-card__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  line-height: 0;
  transition: transform var(--dur) var(--ease);
}
.quality-card__icon span {
  display: block;
  font-size: 24px;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  transform: translateY(0.06em);
}
.rent-quality .card:hover .quality-card__icon { transform: scale(1.12); }

/* ---------------- Leistungsliste (Werkstatt-Teaser) ---------------- */
.servicelist { display: grid; gap: 10px; }
.servicelist a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-heading);
  background: var(--color-surface-alt);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.servicelist__check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(117, 19, 41, 0.22);
}
.servicelist__check svg { width: 13px; height: 13px; display: block; }
.servicelist a > span:not(.servicelist__check) { flex: 1 1 auto; }
/* Pfeil rechts: macht ohne Hover erkennbar, dass jede Zeile auf eine
   eigene Leistungsseite fuehrt. Beim Zeigen wandert er ein Stueck mit. */
.servicelist__caret {
  flex: 0 0 auto; width: 16px; height: 16px;
  color: var(--color-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.servicelist a:hover, .servicelist a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  text-decoration: none;
}
.servicelist a:hover .servicelist__caret,
.servicelist a:focus-visible .servicelist__caret { color: var(--color-accent); transform: translateX(4px); }

/* ---------------- Bewerbung: Klickstrecke ---------------- */
.stepform { position: relative; padding-top: 0; overflow: hidden; }
.stepform__progress { height: 4px; margin: 0 -32px; background: var(--color-surface-alt); }
.stepform__bar { height: 100%; width: 14%; background: var(--color-accent); transition: width .35s var(--ease); }
.stepform__head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 -32px 20px; padding: 14px 32px;
  border-bottom: 1px solid var(--color-border);
}
.stepform__back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 6px 8px; margin-left: -8px;
  font: inherit; font-size: 14px; color: var(--color-muted); cursor: pointer; border-radius: 8px;
}
.stepform__back:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.stepform__back[hidden] { display: none; }
.stepform__count { margin-left: auto; font-size: 13px; color: var(--color-muted); }

.stepform__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.stepform__tags:empty { display: none; }
.stepform__tag {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 6px 13px; background: var(--color-surface-alt);
  font-size: 13px; color: var(--color-ink);
}

.stepform__step { display: none; }
.stepform__step.is-active { display: block; animation: stepform-in .3s var(--ease); }
@keyframes stepform-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .stepform__step.is-active { animation: none; }
  .stepform__bar { transition: none; }
}

.stepform__q { font-size: 22px; line-height: 1.32; margin: 0 0 18px; }
.stepform__q--sub { font-size: 18px; margin-top: 4px; }
.stepform__hint { margin: -10px 0 20px; color: var(--color-muted); font-size: 15px; }

.stepform__options { display: grid; gap: 10px; }
.stepform__opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 15px 18px;
  border: 1.5px solid var(--color-border); border-radius: 12px; background: #fff;
  font-size: 16px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stepform__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.stepform__opt:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.stepform__opt:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(117, 19, 41, .14); }
.stepform__opt.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.stepform__dot {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  border: 1.5px solid var(--color-border); background: #fff;
  display: grid; place-items: center; color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stepform__dot svg { opacity: 0; transform: scale(.6); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.stepform__opt.is-selected .stepform__dot { background: var(--color-accent); border-color: var(--color-accent); }
.stepform__opt.is-selected .stepform__dot svg { opacity: 1; transform: none; }

.stepform__sub { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.stepform__sub[hidden] { display: none; }

.stepform__upload {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 18px; border: 1.5px dashed var(--color-border); border-radius: 12px;
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stepform__upload:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.stepform__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stepform__upload svg { flex: 0 0 auto; color: var(--color-accent); }
.stepform__upload-t { display: block; font-weight: var(--fw-medium); }
.stepform__upload-s { display: block; margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.stepform__file {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 12px 15px; border: 1.5px solid var(--color-border); border-radius: 12px; font-size: 14px;
}
.stepform__file[hidden] { display: none; }
.stepform__file span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepform__file-x { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-muted); border-radius: 7px; line-height: 0; }
.stepform__file-x:hover { color: var(--color-accent); background: var(--color-accent-soft); }

.stepform__done { text-align: center; padding: 12px 4px 8px; }
.stepform__done-ic {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center;
}
.stepform__done h3 { font-size: 23px; margin-bottom: 10px; }
.stepform__done p { color: var(--color-muted); }

@media (max-width: 767px) {
  .stepform__progress { margin-inline: -22px; }
  .stepform__head { margin-inline: -22px; padding-inline: 22px; }
  .stepform__q { font-size: 19px; }
  .stepform__opt { min-height: 56px; padding: 14px 16px; font-size: 15px; }
}

/* ---------------- Feature card (Karriere-Teaser) ---------------- */
.featurecard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.featurecard__media { min-height: 100%; }
.featurecard__media picture,
.featurecard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featurecard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 64px);
}
.featurecard__body h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
@media (max-width: 880px) {
  .featurecard { grid-template-columns: 1fr; }
  .featurecard__media img { aspect-ratio: 16 / 10; height: auto; }
}

/* ---------------- Scroll parallax (Werkstatt-Teaser Bild) ---------------- */
.split > .parallax-media {
  align-self: start;
  position: sticky;
  top: clamp(80px, 12vh, 120px);
}
.parallax-media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.parallax-media picture { display: block; width: 100%; height: 100%; }
.parallax-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------- Zähler ---------------- */
.counters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); text-align: center; }
.counters--below { margin-top: 48px; max-width: 900px; margin-inline: auto; }
.counters--below + .section-head { margin-top: 48px; margin-bottom: 0; }
.counter__value { font-family: var(--font-heading); font-size: 48px; line-height: 1; color: var(--color-accent); }
.counter__label { margin-top: 10px; font-size: 14px; color: var(--color-muted); }
@media (max-width: 767px) { .counters { grid-template-columns: 1fr; } .counter__value { font-size: 38px; } }

/* ---------------- Jobkarten ---------------- */
.jobcard__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jobcard__meta span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-muted); background: var(--color-surface-alt);
  padding: 5px 12px; border-radius: 999px;
}
.jobcard__meta svg { flex: 0 0 auto; color: var(--color-accent); }

/* Kompakte Stellenliste (/ueber-uns): eine Zeile pro Stelle, ganze Karte klickbar. */
.joblink {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 20px 24px; color: var(--color-heading);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.joblink:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card); text-decoration: none; }
.joblink__title { display: block; font-size: 17px; font-weight: var(--fw-semibold); margin-bottom: 10px; }
.joblink .jobcard__meta { margin-bottom: 0; }
.joblink__arrow { flex: 0 0 auto; color: var(--color-accent); transition: transform var(--dur) var(--ease); }
.joblink:hover .joblink__arrow { transform: translateX(3px); }

/* ---------------- Personenkarte ---------------- */
.personcard { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 24px; align-items: center; }
.personcard picture { display: block; width: 100%; }
.personcard img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); aspect-ratio: 1; object-fit: cover; }
.personcard--contact {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
  width: 100%;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.personcard--contact img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.personcard--contact h3 { margin-bottom: 0; font-size: 20px; }
.personcard__role { display: block; margin-top: 4px; color: var(--color-accent); font-size: 15px; font-weight: var(--fw-medium); }
.personcard--contact .nap { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .personcard { grid-template-columns: 1fr; }
  .personcard:not(.personcard--contact) {
    text-align: center;
    justify-items: center;
  }
  .personcard:not(.personcard--contact) picture {
    justify-self: stretch;
    width: 100%;
  }
  .personcard:not(.personcard--contact) img {
    width: 100%;
  }
  .personcard:not(.personcard--contact) .nap {
    justify-items: center;
  }
  .personcard:not(.personcard--contact) .nap li {
    justify-content: center;
  }
  .personcard--contact { grid-template-columns: 48px minmax(0, 1fr); }
}

/* ---------------- Kontakt-Teaser (Startseite) ---------------- */
.contactsplit {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}
.contactsplit > .formcard--contact {
  align-self: start;
  position: sticky;
  top: clamp(80px, 12vh, 120px);
}
.contactsplit__side { display: grid; gap: 24px; max-width: 480px; }
.contactsplit__head h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.contactsplit__head p { margin-top: 20px; color: var(--color-ink); }
@media (max-width: 880px) {
  .contactsplit { grid-template-columns: 1fr; }
  .contactsplit__side { max-width: none; }
  /* Reihenfolge auf dem Handy: Kopf, Formular, Karte, Ansprechpartner.
     display: contents loest die Seitenspalte auf, damit sich ihre Teile
     einzeln zwischen Kopf und Formular einsortieren lassen. */
  .contactsplit__side { display: contents; }
  .contactsplit__head { order: 1; }
  .contactsplit > .formcard { order: 2; margin-block: 24px; position: static; }
  .contactsplit .embed--map { order: 3; }
  .contactsplit .personcard { order: 4; margin-top: 24px; }
  .contactsplit > .formcard--contact { position: static; }
}

/* ---------------- Legal-/Textseiten ---------------- */
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-size: 24px; margin: 40px 0 14px; letter-spacing: 0; }
.prose h3 { font-size: 17px; margin: 28px 0 10px; }
.prose h4 { font-size: 16px; margin: 22px 0 8px; }
.prose p, .prose li { font-weight: 300; }
.prose ul { margin: 0 0 1em; display: grid; gap: 6px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.prose a { text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
/* Breite Tabellen (Cookie-Uebersicht) scrollen in ihrem eigenen Rahmen,
   statt die ganze Seite zu verbreitern. Der Rahmen ist fokussierbar, damit
   die Tabelle auch mit der Tastatur erreichbar bleibt. */
.tabelle-scroll { overflow-x: auto; margin: 0 0 1em; }
.tabelle-scroll table { margin: 0; }
.tabelle-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 767px) {
  .prose table:not(.tabelle-scroll table) { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
  .tabelle-scroll table { min-width: 34rem; }
}
.prose td, .prose th { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--color-footer-surface); color: var(--color-footer-ink); padding-top: 72px; }
.footer-brand { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.footer-brand img { width: 250px; margin: 0 auto 24px; }
.footer-brand p { color: var(--color-ink); }
.footer-brand .btn-row { margin-top: 28px; justify-content: center; }
.footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 40px; padding-top: 48px; border-top: 1px solid var(--color-border); }
.footer-cols h2 { font-family: var(--font-body); font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: 20px; }
.footer-cols ul { display: grid; gap: 10px; }
.footer-cols a { color: var(--color-ink); font-size: 15px; }
.footer-cols a:hover { color: var(--color-accent); }
/* "Wir stellen ein!" neben dem Karriere-Link. Kommt aus Sanity: kein Badge,
   wenn keine Stelle offen ist (tools/karriere-render.mjs). */
.badge-jobs {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; background: var(--color-accent); color: #fff;
  font-size: 12px; font-weight: var(--fw-medium); line-height: 1.6;
  white-space: nowrap; vertical-align: middle;
}
@media (max-width: 1100px) { .footer-cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 1024px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr; gap: 32px; } }

.footer-socials { display: flex; gap: 16px; margin-top: 10px; }
.footer-socials a { color: var(--color-heading); }
.footer-socials a:hover { color: var(--color-accent); }
.footer-bottom {
  margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px;
}
.footer-bottom a { color: var(--color-ink); }
.footer-bottom a:hover { color: var(--color-accent); }
.footer-credit {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 10px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn);
}

/* ---------------- Floating actions (Cookies + WhatsApp) ---------------- */
.float-stack {
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.cookie-float {
  appearance: none; border: 0; padding: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: #d9d9d9; color: var(--color-heading);
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); cursor: pointer;
}
.cookie-float:hover { background: #c8c8c8; color: var(--color-accent); }
.cookie-float svg { display: block; }
.wa-float {
  width: 46px; height: 46px; border-radius: 10px; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.wa-float:hover { background: #1eb955; }
@media print { .float-stack { display: none; } }

/* ---------------- Linktree ---------------- */
/* /links (Link in Bio): einzige Seite ohne Header und ohne grossen Footer.
   Der Body spannt Inhalt und Rechtszeile ueber die volle Hoehe. Vorher war der
   Inhalt 100vh hoch und die Rechtszeile stand darunter: dadurch scrollte die
   Seite immer um genau deren Hoehe und es entstand eine Farbkante zum weissen
   Footer. */
.linktree-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-surface-alt); }
.linktree-page > main { flex: 1 0 auto; display: flex; }
.linktree { flex: 1; display: grid; place-items: center; padding: 28px 20px 20px; }
.linktree__inner { width: min(460px, 100%); text-align: center; display: grid; gap: 10px; }

/* Die Bildpipeline haengt die Klasse an <picture>, nicht an <img>. */
.linktree .logo-img { display: block; width: 220px; max-width: 72%; margin: 0 auto; }
.linktree .logo-img img { width: 100%; height: auto; }
/* 14px, damit die zweite Zeile auch auf 375px in eine Zeile passt. */
.linktree__intro { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }

/* line-height 1 aus .btn presst zweizeilige Beschriftungen zusammen; hier
   brauchen die Buttons echte Zeilen und eine gemeinsame Mindesthoehe. */
.linktree .btn { width: 100%; min-height: 54px; padding: 12px 18px; font-size: 15px; line-height: 1.35; text-wrap: balance; }
.linktree .btn--outline { background: var(--color-surface); border-color: var(--color-border); }
.linktree .btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: var(--shadow-card); }
.linktree .btn--primary:hover { box-shadow: var(--shadow-card); }

/* 44px Ziel statt 24px Icon: mit dem Daumen bedienbar. */
.linktree__socials { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.linktree__socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--color-accent); transition: background-color var(--dur) var(--ease); }
.linktree__socials a:hover { background: var(--color-accent-soft); }

.linktree__legal-wrap { flex: 0 0 auto; padding: 0 20px 16px; }
.linktree__legal-wrap p { margin: 0; }

/* ---------------- Consent (Karte unten, Muster autohaus-harbrecht.de) ------ */
/* Kein Modal, keine Abdunklung: die Karte sitzt unten am Rand, die Seite
   bleibt sichtbar. Vor der Wahl laedt ohnehin nichts - Consent Mode steht auf
   denied, Embeds bleiben Platzhalter. */
.consent {
  position: fixed; z-index: 200;
  left: 50%; bottom: clamp(12px, 2vw, 24px); transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto;
}
.consent[hidden] { display: none; }
.consent__card {
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(17, 17, 17, .12), 0 4px 12px rgba(0, 0, 0, .08);
  padding: clamp(18px, 2.5vw, 24px);
}
.consent__title { font-size: 20px; letter-spacing: -.2px; margin: 0 0 8px; }
.consent__lead { font-size: 14px; line-height: 1.55; color: var(--color-ink); margin: 0 0 16px; }
.consent__lead a { color: var(--color-accent); text-decoration: underline; }

/* Grid-Akkordeon statt max-height: laeuft ohne feste Hoehe und ohne Sprung. */
.consent__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.consent[data-consent-detail="true"] .consent__details { grid-template-rows: 1fr; }
.consent__details-inner { overflow: hidden; min-height: 0; }
.consent__cat {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--color-border);
}
.consent__cat:first-child { border-top: none; }
.consent__cat h3 { font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: 0; margin: 0 0 2px; }
.consent__cat p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); }

/* Schalter statt Haekchen - dieselbe Mechanik wie in der Referenz. */
.consent__toggle { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.consent__toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.consent__track { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: 999px; transition: background var(--dur) var(--ease); }
.consent__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform var(--dur) var(--ease);
}
.consent__toggle input:checked + .consent__track { background: var(--color-accent); }
.consent__toggle input:checked + .consent__track::after { transform: translateX(20px); }
.consent__toggle input:disabled + .consent__track { background: var(--color-accent); opacity: .5; cursor: not-allowed; }
.consent__toggle input:focus-visible + .consent__track { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Ablehnen und Zustimmen gleich gross und gleich prominent. */
.consent__aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.consent__wahl { margin-left: auto; display: flex; gap: 10px; }
.consent__btn {
  font: inherit; font-size: 14px; font-weight: var(--fw-medium); line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: filter var(--dur) var(--ease);
}
.consent__btn--accept { background: var(--color-accent); color: var(--color-accent-ink); }
.consent__btn--reject { background: var(--color-heading); color: #fff; }
.consent__btn--accept:hover, .consent__btn--reject:hover { filter: brightness(1.15); }
.consent__btn--link { background: none; border: none; color: var(--color-heading); text-decoration: underline; padding: 13px 4px; }
.consent__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Aufgeklappt wechselt "Einstellungen" zu "Auswahl speichern". */
.consent__speichern { display: none; }
.consent[data-consent-detail="true"] .consent__speichern { display: inline-flex; }
.consent[data-consent-detail="true"] .consent__details-btn { display: none; }

@media (max-width: 560px) {
  .consent__aktionen { flex-direction: column; align-items: stretch; }
  .consent__wahl { margin-left: 0; flex-direction: column; }
  .consent__btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent__details, .consent__btn, .consent__track, .consent__track::after { transition: none; }
}

/* ---------------- Utilities ---------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.mb-24 { margin-bottom: 24px; }
.muted { color: var(--color-muted); }
.small { font-size: var(--fs-small); }
.stack { display: grid; gap: 24px; }
.stack--sm { display: grid; gap: 12px; }
.rounded { border-radius: var(--radius-card); overflow: hidden; }
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist svg { flex: 0 0 auto; margin-top: 3px; color: var(--color-accent); }

/* ---------------- Store Locator (Mapbox, /standorte) ---------------- */
.standorte-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad-y);
  min-height: min(92vh, 980px);
}
.standorte-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-surface-alt);
}
.standorte-section__front {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 420px);
  align-items: start;
}
.standorte-section__front a,
.standorte-section__front button,
.standorte-section__front [tabindex="0"],
.locator__side {
  pointer-events: auto;
}
.standorte-intro .section-head { margin-bottom: 0; }

.locator__side {
  grid-column: 1;
  display: grid; gap: var(--gap);
  max-width: 420px;
}
.locator__list { display: grid; gap: var(--gap); }

.locator__item {
  background: rgba(255, 255, 255, .96); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 28px; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.locator__item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card-hover); }
.locator__item[data-active="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-card-hover);
}
.locator__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.locator__head .badge { flex: 0 0 auto; white-space: nowrap; align-self: flex-start; }
/* Auf dem Handy steht das Etikett unter der Ueberschrift statt daneben */
@media (max-width: 767px) { .locator__head { flex-direction: column; gap: 10px; } }
.locator__name { margin-bottom: 12px; }
.locator__head .locator__name { margin-bottom: 0; }
.locator__meta { margin: 12px 0 18px; color: var(--color-ink); }
.locator__actions { margin-top: 20px; }

/* mapbox-gl.css wird erst zur Laufzeit in den <head> geladen und setzt
   .mapboxgl-map { position: relative }. Das ueberschreibt inset:0, der Container
   faellt auf Hoehe 0 und die Canvas landet bei ihren 300px Default. Deshalb hier
   mit hoeherer Spezifitaet gegenhalten. */
.standorte-section__bg .locator__map { position: absolute; inset: 0; height: 100%; }
.standorte-section .mapboxgl-map { position: absolute; inset: 0; height: 100%; }
.standorte-section__bg .locator__gate {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
}
.standorte-section__bg .locator__preview { position: absolute; inset: 0; }
.standorte-section__bg .locator__preview picture,
.standorte-section__bg .locator__preview img { width: 100%; height: 100%; object-fit: cover; }
.standorte-section__bg .locator__gate .embed__placeholder {
  position: relative; z-index: 1; max-width: 30rem; margin: 20px;
  background: rgba(255, 255, 255, .94); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); backdrop-filter: blur(2px);
  pointer-events: auto;
}
.standorte-section__bg .locator__gate[hidden] { display: none; }
.standorte-section__bg .locator__gate { overflow: auto; }
.standorte-section__bg .locator__gate .embed__placeholder { border: 0; min-height: 0; padding: 32px 24px; }

/* Pin: Marker-Vorlage aus dem Template, aktiv = groesser und dunkler */
.locator__marker {
  width: 34px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-accent); line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  transform-origin: bottom center;
}
.locator__marker svg { width: 100%; height: 100%; }
.locator__marker:hover { transform: scale(1.1); }
.locator__marker[data-active="true"] { color: var(--color-heading); transform: scale(1.2); }
.locator__marker:focus-visible { outline: 3px solid var(--color-heading); outline-offset: 2px; border-radius: 4px; }

/* Mapbox-Steuerelemente an die Tokens angleichen */
.standorte-section .mapboxgl-ctrl-group { border-radius: var(--radius-btn); box-shadow: var(--shadow-card); }
.standorte-section .mapboxgl-ctrl-group button + button { border-top-color: var(--color-border); }
.standorte-section .mapboxgl-ctrl-attrib { font-size: 11px; }
.standorte-section .mapboxgl-ctrl-bottom-right { z-index: 2; }

@media (max-width: 1024px) {
  .standorte-section { min-height: 0; }
  .standorte-section__front { grid-template-columns: 1fr; }
  .locator__side { max-width: none; }
  .standorte-section__bg .locator__gate .embed__placeholder {
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .locator__item { padding: 22px; }
  .standorte-section__bg .locator__gate .embed__placeholder { padding: 20px 18px; gap: 10px; }
  .locator__head { flex-direction: column; gap: 10px; }
  /* Karte als gerahmte Flaeche ueber der Liste, nicht als Section-Hintergrund. */
  .standorte-intro { padding-bottom: 8px; }
  .standorte-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: visible;
    min-height: 0;
    padding-top: 8px;
  }
  .standorte-section__bg {
    position: relative;
    inset: auto;
    height: min(42vh, 280px);
    margin-inline: var(--container-pad);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
  }
  .standorte-section__front { pointer-events: auto; }
}

/* ---------------- Step-by-step Timeline (Osmo) ---------------- */
.step-timeline-col {
  max-width: 52rem;
  margin-inline: auto;
}
.step-timeline {
  width: 100%;
}
.step-timeline__wrapper { position: relative; }
.step-timeline__list {
  display: flex;
  flex-direction: column;
  gap: 5.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  position: relative;
}
.step-timeline__line {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.5rem - 1px);
  width: 2px;
  background: rgba(117, 19, 41, .14);
}
.step-timeline__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform-origin: 50% 0;
}
.step-timeline__marker {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100em;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition: background .4s cubic-bezier(.645, .045, .355, 1),
    color .4s cubic-bezier(.645, .045, .355, 1),
    border-color .4s cubic-bezier(.645, .045, .355, 1),
    box-shadow .4s cubic-bezier(.645, .045, .355, 1);
}
[data-step-timeline-item][data-status="active"] [data-step-timeline-marker] {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
[data-step-timeline-item][data-current] [data-step-timeline-marker] {
  box-shadow: 0 0 0 0.5em rgba(117, 19, 41, .14);
}
.step-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 38rem;
  padding-top: 6px;
  transition: opacity .25s;
}
[data-step-timeline-item] .step-timeline__content { opacity: .28; }
[data-step-timeline-item][data-status="active"] .step-timeline__content { opacity: .55; }
[data-step-timeline-item][data-current] .step-timeline__content { opacity: 1; }
.step-timeline__content-h {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.step-timeline__p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}
/* Auf dem Handy laeuft die Zeitleiste waagerecht als wischbare Reihe: die
   Ziffer steht ueber Ueberschrift und Text, die senkrechte Fortschrittslinie
   entfaellt. Alle Schritte sind gleich deutlich - ohne Scrollfortschritt gibt
   es keinen "aktuellen" Schritt mehr. */
@media (max-width: 767px) {
  .step-timeline { max-width: none; }
  .step-timeline-col { max-width: none; }
  /* Kopf bleibt linksbuendig, nur der Abschluss-Knopf geht ueber die volle
     Breite. */
  .step-timeline-col > .btn-row {
    flex-direction: column; justify-content: center; align-items: stretch;
  }
  .step-timeline-col > .btn-row > .btn { width: 100%; }
  .step-timeline__line { display: none; }
  .step-timeline__list {
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
    /* Der Ring um die aktuelle Ziffer steht 0.5em ueber den Kreis hinaus.
       Ohne diesen Innenabstand schneidet ihn der Scrollrahmen oben ab. */
    padding-block: 12px 10px;
  }
  .step-timeline__list::-webkit-scrollbar { display: none; }
  .step-timeline__item {
    flex: 0 0 calc(100vw - var(--container-pad) * 2);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    scroll-snap-align: start;
  }
  .step-timeline__content { max-width: none; padding-top: 0; }
  .step-timeline__content-h { font-size: 18px; }
  /* Der aktuelle Schritt steht voll da, spaetere bleiben zurueckgenommen. */
  [data-step-timeline-item] .step-timeline__content { opacity: .35; }
  [data-step-timeline-item][data-current] .step-timeline__content,
  [data-step-timeline-item][data-status="active"] .step-timeline__content { opacity: 1; }
}

/* ---------------- Reveal beim Scrollen ----------------
   Vorbild: osmo.supply "Elements Reveal on Scroll". Verborgen wird nur,
   solange <html data-reveal="an"> steht - das setzt ein kurzes Skript im
   <head>, und nur bei laufendem JavaScript ohne Bewegungsvorbehalt.
   Faellt eines davon aus, greift keine dieser Regeln und die Seite steht
   vollstaendig da.

   power4.inOut aus der Vorlage entspricht easeInOutQuart. */
[data-reveal="an"] {
  --reveal-distance: 2em;
  --reveal-dauer: .8s;
  --reveal-ease: cubic-bezier(.77, 0, .175, 1);
}
[data-reveal="an"] [data-reveal-item="aus"] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}
[data-reveal="an"] [data-reveal-item="da"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-dauer) var(--reveal-ease),
    transform var(--reveal-dauer) var(--reveal-ease);
}
/* Was beim Laden schon sichtbar war, springt ohne Uebergang auf den Endwert. */
[data-reveal="an"] [data-reveal-item="sofort"] {
  opacity: 1;
  transform: none;
}
/* Doppelte Absicherung: schaltet jemand die Bewegung erst nach dem Laden ab,
   greift der Vorbehalt trotzdem. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal="an"] [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}