/* Design tokens — read from the live Elementor kit (post-7647.css) of
   auto-und-service.de, so the rebuild keeps the brand exactly.

   Palette          Elementor name            Use here
   #FFD301          accent                    brand yellow — CTAs, accents
   #FEEA40          ef1023b                   yellow hover
   #FFFDE5          9166b26                   pale yellow wash
   #212121          primary                   near-black surfaces + headings
   #F8F9FA          secondary                 light section wash
   #2F7D67          e0dfe63                   success green
   #EA4746          492b5db                   error red

   Type             Copperplate-Gothic (headings) · Poppins (body)
   Radius           7px (Elementor button radius) */

:root {
  /* brand */
  --c-accent: #ffd301;
  --c-accent-hover: #feea40;
  --c-accent-wash: #fffde5;
  --c-accent-ink: #212121; /* text on yellow — yellow is far too light for white */

  /* neutrals */
  --c-ink: #212121;
  --c-ink-soft: #4a4a4a;
  --c-ink-muted: #6b6b6b;
  --c-line: #e4e6e9;
  --c-surface: #ffffff;
  --c-surface-alt: #f8f9fa;
  --c-surface-dark: #212121;
  --c-surface-dark-alt: #2c2c2c;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #b4b4b4;

  /* status */
  --c-success: #2f7d67;
  --c-error: #ea4746;

  /* type */
  --font-display: "Copperplate-Gothic", "Copperplate", "Trajan Pro", Georgia, serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.25rem, 1rem + 3.4vw, 3.1rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 1.1rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* the eyebrow labels above every section heading on the live site */
  --fs-eyebrow: 0.8125rem;
  --ls-eyebrow: 0.14em;

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3rem, 1.5rem + 6vw, 5.5rem);

  /* shape */
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --shadow-sm: 0 1px 2px rgb(33 33 33 / 0.06), 0 2px 8px rgb(33 33 33 / 0.05);
  --shadow-md: 0 4px 12px rgb(33 33 33 / 0.08), 0 12px 32px rgb(33 33 33 / 0.07);
  --shadow-lg: 0 8px 24px rgb(33 33 33 / 0.1), 0 24px 60px rgb(33 33 33 / 0.1);

  --container: 1200px;
  --container-narrow: 860px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Fonts — self-hosted, copied 1:1 from the live site (no Google Fonts calls)
   ========================================================================== */
@font-face {
  font-family: "Copperplate-Gothic";
  src: url("/assets/fonts/Copperplate-Gothic.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
  border-radius: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
}
.skip-link:focus { left: 0; }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-surface-alt); }
.section--wash { background: var(--c-accent-wash); }
.section--dark { background: var(--c-surface-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-on-dark); }
.section--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }

.section-head { margin-bottom: var(--sp-7); }
.section-head--center { max-width: 48rem; margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-3);
}
.section--dark .eyebrow { color: var(--c-accent); }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
}
.section--dark .lead { color: var(--c-on-dark-muted); }

.grid { display: grid; gap: var(--sp-5); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--2up { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .grid--2up { grid-template-columns: repeat(2, 1fr); }
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.grid--3cap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
@media (min-width: 64rem) {
  .grid--3cap { grid-template-columns: repeat(3, 1fr); }
}

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.split > * { min-width: 0; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: 2; }
}
.split--stretch { align-items: stretch; }
.split--top { align-items: start; }
.split--sticky-media { align-items: start; }
.split:has(.form-card) { align-items: start; }
.split--stretch:has(.form-card) { align-items: stretch; }
@media (min-width: 62rem) {
  .split--sticky-media .figure { position: sticky; top: 6rem; }
}
.split__map { display: flex; }
.split__map .consent-embed { flex: 1; min-height: 22rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.9rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--dark {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.btn--dark:hover { background: #000; border-color: #000; }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-surface-alt); }

.section--dark .btn--ghost,
.hero .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.4);
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }

.btn--light {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-surface);
}
.btn--light:hover { background: var(--c-surface-alt); border-color: var(--c-surface-alt); }

.btn--whatsapp {
  background: var(--c-surface-alt);
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--whatsapp:hover { background: var(--c-surface); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }

.icon-external {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.35em;
  vertical-align: -0.1em;
  fill: currentColor;
  flex-shrink: 0;
}
.btn svg.icon-external { width: 1em; height: 1em; }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.btn-row--center { justify-content: center; }
@media (max-width: 48rem) {
  .btn-row .btn { flex: 1 1 100%; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 2px;
}
.section--dark .link-arrow { color: #fff; }

/* Sekundäre CTAs, die einen Abschnitt schließen. Auf den Service-Seiten liegen
   die Buttons nur ganz oben und ganz unten — dazwischen scrollt man mobil lange
   ohne Weg zum Formular. Trägt einen oder mehrere .link-arrow und bekommt mobil
   zusätzliche Höhe, damit die Links als Touch-Ziel taugen. */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-6) 0 0;
}
.section-cta--center { justify-content: center; }
.split .section-cta { margin-top: var(--sp-5); }
.section-cta .icon-external { margin-left: 0; }
@media (max-width: 48rem) {
  .section-cta { gap: var(--sp-4) var(--sp-5); }
  .section-cta .link-arrow { padding-top: 0.6rem; }
}

.service-list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.service-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--c-ink);
  text-decoration: none;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.service-list__link span { transition: transform 0.2s var(--ease); }
.service-list__link:hover,
.service-list__link:focus-visible { color: var(--c-accent); gap: var(--sp-4); }
.service-list__link:hover span,
.service-list__link:focus-visible span { transform: translateX(0.25rem); }

.section--dark .service-list { border-top-color: rgb(255 255 255 / 0.15); }
.section--dark .service-list__link { color: var(--c-on-dark); border-bottom-color: rgb(255 255 255 / 0.15); }
.section--dark .service-list__link:hover,
.section--dark .service-list__link:focus-visible { color: var(--c-accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 2.5rem;
  flex-wrap: wrap;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--c-accent); }
.topbar__contact { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__contact span { color: var(--c-on-dark-muted); }
.topbar__social { display: flex; gap: var(--sp-3); }
.topbar__social a { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.topbar__social svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (max-width: 48rem) {
  .topbar__contact .topbar__hours { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem;
}
.site-header__logo img { width: 210px; height: auto; }
@media (max-width: 30rem) { .site-header__logo img { width: 165px; } }

.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: var(--sp-5); }
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list > li { margin: 0; position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 0.125rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
/* .is-section markiert den Hauptpunkt, wenn die aktuelle Seite in seinem
   Untermenue liegt — zugeklappt sieht man sonst nicht, wo man ist. */
.nav__link:hover,
.nav__link.is-section,
.nav__link[aria-current="page"] { border-bottom-color: var(--c-accent); }
.nav__link svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}
.nav__item--has-sub:hover .nav__link svg,
.nav__item--has-sub:focus-within .nav__link svg,
.nav__item--has-sub.is-open .nav__link svg { transform: rotate(180deg); }
/* Hauptpunkte mit Untermenue sind Buttons statt Links: sie fuehren nicht mehr
   auf eine eigene Seite, sondern klappen nur auf — die Uebersichtsseite steht
   als erster Eintrag im Untermenue. */
button.nav__link {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  min-width: 17rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav__item--has-sub:hover .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu,
.nav__item--has-sub.is-open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Zwischen Hauptpunkt und Untermenue liegen 0.75rem Luft. Ohne Bruecke faellt
   der Cursor auf dem Weg nach unten kurz aus beiden Elementen heraus, das
   Menue beginnt auszublenden und flackert. Zwei unsichtbare Streifen schliessen
   den Spalt: einer unter dem Hauptpunkt, einer ueber der vollen Breite des
   Untermenues — der zweite faengt diagonale Mauswege ab. */
.nav__item--has-sub::after,
.nav__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.75rem;
}
.nav__item--has-sub::after { top: 100%; }
.nav__submenu::before { bottom: 100%; }
.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: 0;
}
.nav__submenu a:hover { background: var(--c-surface-alt); }
.nav__submenu a[aria-current="page"] {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35rem;
}

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 64rem) { .header__cta { display: none; } }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
@media (min-width: 64rem) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--c-ink);
  position: relative;
  transition: background 0.15s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.1rem;
  height: 2px;
  background: var(--c-ink);
  transition: transform 0.22s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Das offene Menue fuellt den Bildschirm unterhalb des Headers: fixiert von der
   Headerunterkante bis zum unteren Rand, statt die Seite nach unten zu schieben.
   Wo oben angesetzt wird, setzt das JS (--mobile-nav-top) — der Header steht mal
   mit Topbar darueber, mal klebt er schon oben. Fallback = Hoehe der Headerzeile. */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--mobile-nav-top, 4.5rem);
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { display: block; }
/* Inhalt ueber die volle Panelhoehe, damit die CTAs unten am Rand sitzen. */
.mobile-nav > .container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Seite hinter dem offenen Menue nicht mitscrollen lassen. */
html.has-mobile-nav, html.has-mobile-nav body { overflow: hidden; }
/* Die Scrollsperre nimmt dem Header sein position:sticky — er faellt an seinen
   Platz im Dokument zurueck und waere bei gescrollter Seite weg. Fuer die Dauer
   des offenen Menues haelt ihn deshalb position:fixed dort, wo er beim Oeffnen
   stand (--header-top: 0 wenn er schon klebt, sonst unter der Topbar). */
html.has-mobile-nav .site-header {
  position: fixed;
  top: var(--header-top, 0px);
  left: 0;
  right: 0;
}
@media (min-width: 64rem) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--c-line); }
.mobile-nav a {
  display: block;
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav .mobile-nav__sub a {
  padding-left: 1rem;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}

/* Aktuelle Seite — und, liegt sie in einem Untermenue, der Hauptpunkt dazu. */
.mobile-nav a[aria-current="page"],
.mobile-nav__row.is-section {
  color: var(--c-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35rem;
}

/* Eintrag mit Untermenue: die ganze Zeile ist der Aufklapp-Button. Der
   Hauptpunkt selbst fuehrt nicht mehr auf eine Seite — die Uebersichtsseite
   (z. B. /werkstatt) steht als erster Eintrag im Untermenue. */
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  padding: 0.9rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  background: none;
  border: 0;
  color: var(--c-ink);
  cursor: pointer;
}
.mobile-nav__toggle svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}
.mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Untermenues starten eingeklappt. Die mobile Navigation haengt ohnehin an JS
   (.mobile-nav ist bis .is-open display:none), ein per JS aufklappbares
   Untermenue kostet hier also nichts an Zugaenglichkeit. */
.mobile-nav__sub { display: none; }
.mobile-nav__sub.is-open { display: block; padding-bottom: var(--sp-2); }
.mobile-nav__sub li:last-child { border-bottom: 0; }

.mobile-nav__foot { margin-top: auto; padding: var(--sp-5) 0; display: grid; gap: var(--sp-3); }
.mobile-nav__foot .btn {
  display: flex;
  justify-content: center;
  padding: 0.9rem 1.6rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--c-ink);
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Scrim: on narrow screens the copy spans the full width, so it stays close to
   uniform. From the two-column breakpoint up it falls off to the right, where
   there is no text — otherwise the photography behind it never reads. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(18 18 18 / 0.78) 0%, rgb(18 18 18 / 0.84) 100%);
}
@media (min-width: 62rem) {
  .hero::after {
    background: linear-gradient(
      100deg,
      rgb(18 18 18 / 0.86) 0%,
      rgb(18 18 18 / 0.8) 40%,
      rgb(18 18 18 / 0.5) 64%,
      rgb(18 18 18 / 0.28) 100%
    );
  }
}
.hero__inner { max-width: 52rem; }
.hero h1 { font-size: var(--fs-hero); color: #fff; }
.hero__lead {
  font-size: var(--fs-lead);
  color: rgb(255 255 255 / 0.86);
  max-width: 44rem;
}
/* Hero intro — plays once on load, pure CSS on purpose.
   Unlike the scroll reveals below there is no JS here: a keyframe animation
   with fill-mode `backwards` holds the from-state only while the delay runs and
   then hands the element back to its normal style, so nothing lingers to
   interfere with hover, and there is no script that could fail and leave the
   hero blank. Reduced motion drops the whole block (and the global reduced-
   motion rule zeroes any animation that slips through).

   The background image is only transformed, never faded: it is the LCP element
   on most of these pages, and a transform does not hold up its first paint. */
@media (prefers-reduced-motion: no-preference) {
  .hero__bg { animation: hero-bg-in 1.6s var(--ease) backwards; }
  .hero__inner > * { animation: hero-in 0.7s var(--ease) backwards; }
  .hero__inner > :nth-child(1) { animation-delay: 0.08s; }
  .hero__inner > :nth-child(2) { animation-delay: 0.16s; }
  .hero__inner > :nth-child(3) { animation-delay: 0.24s; }
  .hero__inner > :nth-child(4) { animation-delay: 0.32s; }
  .hero__inner > :nth-child(n + 5) { animation-delay: 0.4s; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes hero-bg-in {
  from { transform: scale(1.06); }
}

.hero--compact { padding-block: clamp(2.75rem, 1.5rem + 5vw, 4.5rem); }
.hero--compact h1 { font-size: var(--fs-h1); }

/* Bestandsseiten (/fahrzeuge und die Markenseiten): der Hero traegt nur noch
   das Bild — der Bestand soll direkt oben stehen, statt hinter einem Absatz
   Fliesstext. H1 und Einleitung bleiben als .visually-hidden im DOM: geclippter
   Text wird von Screenreadern vorgelesen und von Suchmaschinen gewertet
   (anders als display:none), die Seite behaelt also ihre Ueberschrift.
   Ueber dem Foto liegt eine flache Abdunklung: Die Luftaufnahme ist von Haus
   aus hell und laeuft sonst direkt in den weissen Seitenhintergrund und die
   weisse Kopfzeile — der dunklere Ton grenzt den Hero sichtbar ab.

   Auf dem Handy faellt der Hero komplett weg: Standard ist deshalb die
   zusammengeklappte Variante, das Bild kommt erst ab 48rem dazu. Es haengt
   bewusst hier im Stylesheet statt als <img class="hero__bg"> in der Seite —
   ein display:none-Bild wuerde trotzdem geladen, ein Background aus einer
   nicht greifenden Media Query nicht. Auf schmalen Screens spart das rund
   220 kB, die dort ohnehin nichts anzeigen wuerden.

   Die Hoehe kommt allein aus padding-block, weil der geclippte Text
   position:absolute ist und selbst keinen Platz einnimmt. */
.hero--bare { padding-block: 0; background: none; }
.hero--bare::after { display: none; }
@media (min-width: 48rem) {
  .hero--bare {
    padding-block: clamp(5rem, 2rem + 8vw, 8.5rem);
    background:
      linear-gradient(rgb(18 18 18 / 0.32), rgb(18 18 18 / 0.32)),
      url("/assets/images/DJI_0406.webp") center / cover no-repeat;
    background-color: var(--c-ink);
  }
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.85);
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}
.hero__badges li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
@media (max-width: 36rem) {
  .partners-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}
.partners-grid__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-4);
}
.partners-grid__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners-grid__logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.partners-grid__logos img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
}
.partners-grid__name {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}
/* Single group (e.g. Wohnmobil-Servicepartner): one centred row instead of two columns. */
.partners-grid--single { grid-template-columns: 1fr; }
.partners-grid--single .partners-grid__logos { justify-content: center; }

/* Below ~800px the flex row no longer fits three logos, so it wraps after the two
   wide wordmarks and the block grows to four rows. Lay each group out as three
   fixed columns instead and let the logos scale down into their cell (object-fit
   keeps them centred), so every group stays a single row. */
@media (max-width: 50rem) {
  .partners-grid__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .partners-grid__logos img { width: 100%; height: 2.25rem; }
  .partners-grid__label { margin-bottom: var(--sp-3); }
  /* Without a cap the three columns would drift to the container edges. */
  .partners-grid--single .partners-grid__logos { max-width: 30rem; margin-inline: auto; }
}

/* Search and CTA row share a width so their edges line up. */
.hero__inner { --hero-cta-w: 36rem; }
.hero .btn-row { max-width: var(--hero-cta-w); }
/* Two equal-width CTAs, together as wide as the search box above them. Steht
   nur ein CTA in der Zeile, gibt es nichts aufzuteilen — er behaelt seine
   Inhaltsbreite, statt sich auf 36rem zu ziehen. */
.hero .btn-row .btn { flex: 1 1 0; min-width: 0; }
.hero .btn-row .btn:only-child { flex: 0 0 auto; }
@media (max-width: 48rem) {
  .hero .btn-row { gap: var(--sp-2); }
  .hero .btn-row .btn,
  .hero .btn-row .btn:only-child { flex: 1 1 100%; }
}

/* Autegro search widget, inline in the hero copy — no white wrapper, the
   widget brings its own white card. */
.hero__search {
  margin-top: var(--sp-6);
  max-width: var(--hero-cta-w);
}
.hero__search-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.hero .hero__search-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.86);
  margin: 0;
}
.hero .hero__search-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgb(255 255 255 / 0.86);
  white-space: nowrap;
}
.hero .hero__search-link:hover { color: #fff; }
/* Reserve space for the widget so the hero doesn't jump once it loads. */
.hero__search-host { min-height: 52px; }

/* ==========================================================================
   Vollflaechen-Bildsektion
   ========================================================================== */
/* Das Bild liegt nicht mehr als Spalte neben dem Text, sondern randlos
   dahinter — der Inhalt steht zentriert darauf. Technik wie beim Hero: das
   <img> als eigenes Element statt background-image, damit width/height,
   loading="lazy" und object-fit greifen, darueber ein Scrim aus ::after.
   Kombiniert wird sie mit .section--dark, das faerbt Ueberschrift, Lead und
   den Ghost-Button schon passend ein. */
.section--media {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 2rem + 8vw, 7rem);
  text-align: center;
}
.section--media__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Der Text laeuft hier ueber die ganze Bildbreite, der Scrim bleibt deshalb
   gleichmaessig — anders als beim Hero, wo er nach rechts ausduennt. */
.section--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(18 18 18 / 0.72) 0%, rgb(18 18 18 / 0.82) 100%);
}
.section--media__inner {
  max-width: 46rem;
  margin-inline: auto;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  height: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.card--link { text-decoration: none; cursor: pointer; }
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

.card--media { padding: 0; overflow: hidden; }
.card--media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card--media .card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }

/* Full-bleed image cards with bottom-anchored text — the whole card is one link.
   Touch devices have no hover, so the description and the deeper overlay are the
   default there; pointer devices start collapsed and reveal on hover/focus. */
.card--brand-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  border: none;
  overflow: hidden;
  min-height: 24rem;
  background: var(--c-ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.card--brand-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.card--brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.68) 60%, rgb(0 0 0 / 0.28) 100%);
  transition: background 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.card--brand-hero .card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: var(--sp-6);
}
.card--brand-hero h3 { color: #fff; margin-bottom: 0; }
.card--brand-hero .card__body > p:not(.card__foot) {
  color: rgb(255 255 255 / 0.88);
  margin: var(--sp-3) 0 0;
}
.card--brand-hero .card__foot { margin-top: var(--sp-3); padding-top: 0; }
.card--brand-hero .link-arrow { color: #fff; border-color: var(--c-accent); }
.card--brand-hero:focus-visible { outline-color: var(--c-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card--brand-hero::after {
    background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.32) 55%, rgb(0 0 0 / 0.05) 100%);
  }
  .card--brand-hero .card__body > p:not(.card__foot) {
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.9s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1),
      margin-top 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .card--brand-hero:hover::after,
  .card--brand-hero:focus-visible::after {
    background: linear-gradient(to top, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.68) 60%, rgb(0 0 0 / 0.28) 100%);
  }
  .card--brand-hero:hover .card__body > p:not(.card__foot),
  .card--brand-hero:focus-visible .card__body > p:not(.card__foot) {
    max-height: 8rem;
    opacity: 1;
    margin-top: var(--sp-3);
  }
}
@media (min-width: 48rem) {
  .card--brand-hero { min-height: 27rem; }
  .card--brand-hero .card__body { padding: var(--sp-7); }
}

.card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--c-accent-wash);
  margin-bottom: var(--sp-4);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; stroke: var(--c-ink); fill: none; stroke-width: 1.7; }

.card--flat { background: var(--c-surface-alt); }
.card--flat .card__icon { background: var(--c-accent); }
.card--flat .card__icon svg { stroke: #fff; fill: #fff; }

.section--dark .card {
  background: var(--c-surface-dark-alt);
  border-color: rgb(255 255 255 / 0.1);
}
.section--dark .card p { color: var(--c-on-dark-muted); }
.section--dark .card__icon { background: rgb(255 255 255 / 0.08); }
.section--dark .card__icon svg { stroke: var(--c-accent); }

/* ==========================================================================
   Testimonials slider
   ========================================================================== */
.testimonials__track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sp-1);
  margin: 0;
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
  list-style: none;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial {
  scroll-snap-align: start;
  flex: 0 0 min(23rem, 88%);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.testimonial__stars {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--c-line);
}
.testimonial__stars::before { content: "★★★★★"; }
.testimonial__stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: calc(var(--rating) / 5 * 100%);
  color: var(--c-accent);
}
.testimonial__quote { flex: 1; margin: var(--sp-4) 0; color: var(--c-ink-soft); }
.testimonial__author { margin: 0; font-weight: 600; }
.testimonial__author span { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-ink-muted); }

.testimonials__rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
}
.testimonials__rating-summary strong { color: var(--c-ink); }
.testimonials__stars-fg { letter-spacing: 0.15em; color: var(--c-accent); }
.icon-google { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.testimonials__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}
.testimonials__links a {
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.testimonials__links a:hover { color: var(--c-ink); }

.testimonials__nav { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.testimonials__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.testimonials__btn:hover { border-color: var(--c-ink); background: var(--c-surface-alt); }
.testimonials__btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* compact list of service links */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pill-list li { margin: 0; }
.pill-list a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pill-list a:hover { background: var(--c-accent); border-color: var(--c-accent); }

/* checkmark feature list */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.check-list li {
  position: relative;
  margin: 0;
  padding-left: calc(1.35rem + 0.7rem);
  font-size: var(--fs-sm);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* numbered process steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } }
.steps li { margin: 0; position: relative; padding-top: calc(2.4rem + var(--sp-3)); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-accent);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
}
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* stat strip */
.stats {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats li { margin: 0; }
.stats dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.stats dd { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.section--dark .stats dd { color: var(--c-on-dark-muted); }
.section--dark .stats dt { color: var(--c-accent); }

/* media figure */
.figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure figcaption {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  padding-top: var(--sp-3);
}

/* prose block for legal pages */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-5); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.accordion { display: grid; gap: var(--sp-3); }
.accordion details {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1rem 1.25rem;
  font-weight: 500;
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion__body { padding: 0 1.25rem 1.15rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--sp-4); }
.form__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgb(255 211 1 / 0.35);
}
.field--check {
  grid-template-columns: 1.15rem 1fr;
  align-items: start;
  gap: 0.65rem;
}
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--c-ink); }
.field--check label { font-size: var(--fs-xs); font-weight: 400; color: var(--c-ink-soft); line-height: 1.55; }
.field--check a { color: inherit; }

/* Datei-Upload (Bewerbung) — nativer Input, aber im Formular-Look des Hauses */
.field--file input[type="file"] {
  padding: 0.5rem 0.6rem;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.field--file input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.field--file input[type="file"]::file-selector-button:hover {
  background: var(--c-accent-hover);
}
.field__hint { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-muted); }

/* honeypot — off-screen, never focusable */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.form__status {
  font-size: var(--fs-sm);
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  display: none;
}
.form__status.is-ok { display: block; background: rgb(47 125 103 / 0.1); color: var(--c-success); }
.form__status.is-error { display: block; background: rgb(234 71 70 / 0.1); color: var(--c-error); }

.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Modal (Werkstatt-Terminanfrage)
   ==========================================================================
   Natives <dialog>: Fokusfalle, Escape und ::backdrop kommen vom Browser.
   Der Kopf bleibt stehen, gescrollt wird nur .modal__body — sonst laeuft das
   lange Formular auf kleinen Screens aus dem Viewport heraus. */
.modal {
  width: min(100% - 2rem, 42rem);
  max-width: none;
  max-height: min(90vh, 46rem);
  max-height: min(90dvh, 46rem);
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgb(33 33 33 / 0.6); }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.modal__head h2 { font-size: var(--fs-h3); margin: 0; }

.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.modal__close:hover { background: var(--c-surface-alt); }
.modal__close svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__lead { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-5); }
.modal .form__note a { color: inherit; }

/* Auf dem Handy als Vollbild-Sheet: kein doppelter Scrollkontext, und die
   Tastatur verkleinert den Viewport, ohne dass Felder unerreichbar werden. */
@media (max-width: 40rem) {
  .modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
  }
  .modal__head { padding: var(--sp-4); }
  .modal__body { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
}

/* Hintergrund still halten, solange das Modal offen ist — showModal() sperrt
   das Scrollen nicht in allen Browsern zuverlaessig. */
html.has-modal, html.has-modal body { overflow: hidden; }

/* ==========================================================================
   Contact / location blocks
   ========================================================================== */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.contact-list li { margin: 0; display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.8rem; font-size: var(--fs-sm); }
.contact-list svg { width: 1.15rem; height: 1.15rem; stroke: var(--c-ink); fill: none; stroke-width: 1.8; margin-top: 0.25rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.section--dark .contact-list svg { stroke: var(--c-accent); }
.contact-list .icon-whatsapp { fill: var(--c-ink); stroke: none; }
.section--dark .contact-list .icon-whatsapp { fill: var(--c-accent); stroke: none; }

.hours { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-line);
  margin: 0;
}
.hours li:last-child { border-bottom: 0; }
.hours dt, .hours span:first-child { color: var(--c-ink-soft); }
.section--dark .hours li { border-color: rgb(255 255 255 / 0.12); }
.section--dark .hours span:first-child { color: var(--c-on-dark-muted); }

/* team */
.team-card { text-align: left; }
.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
}
.team-card__role { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-muted); }

/* consent-gated embeds (map, reviews) */
.consent-embed {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface-alt);
  min-height: 22rem;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  text-align: center;
  overflow: hidden;
}
.consent-embed__msg { max-width: 34rem; }
.consent-embed__msg p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.consent-embed iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

/* ==========================================================================
   Autegro widget slots
   ========================================================================== */
.ac24-slot { min-height: 18rem; }
.ac24-slot--overview { min-height: 40rem; }
/* the widget renders its own cards; keep our page background behind it */
[id^="ac24-"] { width: 100%; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: var(--c-accent);
  color: var(--c-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 52rem) {
  .cta-band { grid-template-columns: 1fr auto; }
}
.cta-band h2 { margin-bottom: var(--sp-2); }
.cta-band p { font-size: var(--fs-sm); margin: 0; }
.cta-band .btn-row { margin-top: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--c-ink);
  color: var(--c-on-dark);
  /* Trennlinie zur Seite: section--dark hat dieselbe Farbe wie der Footer, ohne
     die Linie liefen die beiden Blöcke nahtlos ineinander. */
  border-top: 1px solid rgb(255 255 255 / 0.2);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--fs-sm);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer .contact-list svg { stroke: var(--c-accent); }
.footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__brand img { width: 200px; margin-bottom: var(--sp-4); }
.footer__brand p { color: var(--c-on-dark-muted); font-size: var(--fs-sm); }
.footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 0.55rem; }
.footer__col li a { color: var(--c-on-dark-muted); }
.footer__col li a:hover { color: var(--c-accent); }

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius);
}
.footer__social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.footer__social svg { width: 1rem; height: 1rem; fill: currentColor; }

.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-on-dark-muted);
  text-align: center;
}
@media (min-width: 48rem) {
  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
  }
  .footer__bottom > span { justify-self: start; }
  .footer__bottom > .inception { justify-self: center; }
  .footer__bottom > .footer__legal { justify-self: end; }
}
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }

/* Inception Media footer credit badge — source of truth:
   AutoConnect24/website-1shot /inception/skills/website/templates/footer-badge/ */
.inception {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-xs, 0.8rem);
  line-height: 1;
  color: var(--c-on-dark-muted, #b4b4b4);
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius, 8px);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.inception:hover,
.inception:focus-visible {
  color: var(--c-accent, #ffd301);
  border-color: var(--c-accent, #ffd301);
}
.inception__logo { height: 18px; width: auto; flex: none; display: block; }
.inception__preview {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  z-index: 20;
  width: min(340px, 80vw);
  overflow: hidden;
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / 0.15));
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.inception__preview img { display: block; width: 100%; height: auto; }
.inception:hover .inception__preview,
.inception:focus-visible .inception__preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .inception__preview { transition: opacity 0.2s ease; transform: translateX(-50%); }
}

/* ==========================================================================
   Consent banner (self-hosted CMP — consent.js)
   ========================================================================== */
.cmp-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
  z-index: 900;
}
.cmp {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(100% - 2rem, 44rem);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 901;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: var(--fs-sm);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.cmp h2 { font-size: 1.25rem; margin-bottom: var(--sp-3); }
.cmp p { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.cmp__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.cmp__actions .btn { flex: 1 1 12rem; }
.cmp__links { margin-top: var(--sp-4); font-size: var(--fs-xs); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.cmp__cats { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.cmp__cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.cmp__cat strong { display: block; margin-bottom: 0.25rem; }
.cmp__cat p { font-size: var(--fs-xs); margin: 0; }

/* floating "Cookie-Einstellungen" re-opener */
.cmp-reopen {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.cmp-reopen svg { width: 1.25rem; height: 1.25rem; stroke: var(--c-ink); fill: none; stroke-width: 1.7; }

/* ==========================================================================
   Reveal on scroll — opt-in, respects reduced motion
   ========================================================================== */
/* Content is visible by default. JS arms the animation (.is-armed) right before
   it starts observing, and removes it again once the reveal has played. So the
   only thing that can ever hide a block is the same code that is guaranteed to
   show it — no JS, a throttled/hidden document, or a dead observer all just
   render the content.

   Siblings that reveal together are staggered by JS via --reveal-delay, so a
   grid cascades instead of popping in as one block. Both the delay and the
   transition are dropped again after the reveal (JS removes .is-armed and
   .is-visible), so they never bleed into hover/focus transitions on the same
   element — .card--link:hover keeps its own 0.22s lift. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-armed {
    opacity: 0;
    transform: translateY(var(--reveal-shift, 16px));
    /* Arming must snap, never animate: .card already declares a 0.22s transform
       transition for its hover lift, which would otherwise make the element
       slide into its offset instead of starting there. The reveal transition is
       (re)declared on .is-visible below, which outranks this. */
    transition: none;
    will-change: opacity, transform;
  }
  .reveal.is-armed.is-visible,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.55s var(--ease) var(--reveal-delay, 0s),
      transform 0.55s var(--ease) var(--reveal-delay, 0s);
  }
  /* Media blocks travel a touch further — the extra distance reads on a large
     image where it would look sloppy on a headline. */
  .reveal.figure,
  .reveal.card--brand-hero { --reveal-shift: 24px; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header, .site-footer, .topbar, .cmp, .cmp-reopen, .btn-row { display: none !important; }
  body { color: #000; }
  /* Never print a hero that is still sitting in its pre-animation state. */
  .hero__bg, .hero__inner > * { animation: none !important; }
}

/* ==========================================================================
   Rental price cards (/vermietung)
   ========================================================================== */
.rate-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface);
  height: 100%;
}
.rate-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rate-card__head { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.rate-card__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-2);
}
.rate-card h3 { margin-bottom: var(--sp-2); }
.rate-card__meta { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0; }
.rate-card__rates {
  list-style: none;
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
}
.rate-card__rates li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--c-line);
  margin: 0;
}
.rate-card__rates li:last-child { border-bottom: 0; }
.rate-card__rates span:first-child { color: var(--c-ink-soft); }
.rate-card__rates span:last-child { font-weight: 600; white-space: nowrap; }
.rate-card__foot { margin-top: auto; padding: 0 var(--sp-5) var(--sp-5); }
.rate-card--highlight { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-wash); }

.note {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-5);
}

/* season legend */
.season-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.season-list li { margin: 0; display: grid; grid-template-columns: 10rem 1fr; gap: var(--sp-4); font-size: var(--fs-sm); }
.season-list strong { font-weight: 600; }
@media (max-width: 40rem) { .season-list li { grid-template-columns: 1fr; gap: 0.2rem; } }