/* GENERIERT aus Design-Tokens (tokens.css) + Startseiten-Layout (Onepager, konversionsorientiert).
   Nicht direkt Farben/Schriften hartkodieren - aendere Tokens in tokens.css, Struktur hier nur ueber Klassen. */

@import url("tokens.css");

/* ---------------------------------------------------------------------- */
/* Reset & Grundlagen                                                     */
/* ---------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* Sicherheitsnetz gegen das Off-Canvas-Menu (position:fixed + transform) */
  scroll-padding-top: 84px; /* Anker landen nicht unter dem fixed Header */
}
body { overflow-x: hidden; }

@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; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visuell versteckt, aber fuer Screenreader/Bots im DOM vorhanden (z. B. Honeypot-Feld) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Fokus-Zustand ueberall */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--bg-deep);
  color: var(--on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 300;
  transition: top var(--dur) var(--ease);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* Eyebrow / Rubrik-Label (aus dem Designbuch uebernommen) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--accent-2); }
.eyebrow.on-dark::before { background: var(--accent-2); }
/* Auf Fotos (Hero) statt auf durchgehend dunkler Flaeche: Text bleibt weiss fuer garantierten
   Kontrast, nur der kleine Strich bleibt als Akzent farbig (rein dekorativ, kein Text). */
.eyebrow.on-photo { color: var(--on-dark); }
.eyebrow.on-photo::before { background: var(--accent-2); }

/* Buttons */
.btn {
  /* Groesse 2026-08-23 auf Nutzerwunsch um 20% reduziert (vorher 16px/28px Padding,
     44px Mindesthoehe, 16px Schrift - siehe Git-Historie/Wissensdatei fuer den Ausgangswert). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 22px;
  min-height: 35px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-lg { padding: 15px 27px; font-size: 14px; }
.btn-primary {
  background: var(--cta);
  color: var(--on-accent);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--cta-strong); transform: translateY(-1px); box-shadow: 0 16px 36px oklch(0.52 0.17 48 / 0.28); }
.btn-primary:active { transform: translateY(0); }
/* 2026-08-27 (axe-core-Fund, entdeckt auf der neuen Danke-Seite): ":visited" war fuer keine
   Button-Variante explizit gesetzt. Browser wenden auf besuchte Links sonst ihre eigene, gedaempfte
   Standardfarbe an - auf dem kraeftigen CTA-Orange ergab das nur 1.22:1 Kontrast statt 4.5:1. Da
   Links wie "Zur Startseite" oder "Erstgespraech" von wiederkehrenden Besucher:innen sehr
   wahrscheinlich bereits besucht wurden, ist das kein Testartefakt, sondern ein reales Praxisrisiko.
   Farbe fuer :visited explizit auf denselben Wert wie unbesucht gesetzt. */
.btn-primary:visited { color: var(--on-accent); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-on-dark {
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  color: var(--on-dark);
  border-color: color-mix(in srgb, var(--on-dark) 40%, transparent);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
  background: color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-color: var(--on-dark);
  transform: translateY(-1px);
}
/* siehe Begruendung bei .btn-primary:visited oben - gilt fuer alle Zustaende dieser Variante. */
.btn-on-dark:visited { color: var(--on-dark); }

/* ---------------------------------------------------------------------- */
/* Header - transparent ueber dem Hero, wird beim Scrollen fest           */
/* ---------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* Dezente, durchsichtige Glasleiste als Grundzustand - bleibt lesbar, auch ohne die
     scroll-gesteuerte JS-Erweiterung weiter unten (progressive enhancement). 55% Deckkraft
     ist bewusst gewaehlt: bei 30% faellt der Kontrast des weissen Nav-Texts ueber hellen
     Bildstellen (z. B. Himmel) auf ~3.25:1 (WCAG-AA-Fail); bei 55% sind es ~5.2:1. */
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 20px;
  text-decoration: none;
  color: var(--on-dark);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* 2026-08-23 auf Nutzerwunsch: "VAYARO" im Header einfarbig statt zweifarbig abgesetzt -
   color:inherit statt eines eigenen Akzenttons, damit der Schriftzug automatisch der
   .wordmark-Farbe folgt (auch beim Scroll-Zustandswechsel unten). 2026-08-24: Footer auf
   Nutzerwunsch angeglichen, dort ebenfalls einfarbig statt zweifarbig (siehe .footer-brand .wordmark
   weiter unten - die dortige span-Sonderregel wurde entfernt, .wordmark span erbt jetzt ueberall). */
.wordmark span { color: inherit; transition: color var(--dur) var(--ease); }

/* Marken-Zusatz "by Maru" (V3.0-Pivot): eigenes, kleines Element statt Teil von .wordmark,
   damit white-space:nowrap auf dem Wordmark selbst nicht durch den laengeren Zusatztext auf
   schmalen Bildschirmen mit dem Hamburger-Icon kollidiert. Im Header daher ab 640px ausgeblendet,
   im Footer (mehr Platz, kein Hamburger daneben) immer sichtbar - volles Marken-Lockup "VAYARO
   by Maru" bleibt ausserdem in Title/Meta/Hero/JSON-LD erhalten. */
.wordmark-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-dark-soft);
  margin-left: var(--space-2);
  white-space: nowrap;
}
.site-header.is-scrolled .wordmark-tag { color: var(--text-soft); }
@media (max-width: 640px) {
  .site-header .wordmark-tag { display: none; }
  /* 2026-08-24 (Nutzerwunsch): "VAYARO" wirkte in der mobilen Ansicht normal statt fett. Ursache:
     --font-display setzt auf die Systemschriftart "Archivo Black"/"Arial Black" ohne eigenes
     @font-face - auf Desktop-Betriebssystemen ist "Arial Black" meist als echte Schriftdatei
     installiert (daher dort von selbst fett), auf iOS/Android fehlt diese Schriftart jedoch, und
     der Browser faellt auf die normale Gewichtung der naechsten Schrift in der Fallback-Kette
     zurueck. Mit explizitem font-weight:900 erzwingt der Browser (Font-Synthese) durchgaengig
     die fette Darstellung, unabhaengig davon, ob "Arial Black" auf dem Geraet existiert. */
  .wordmark { font-weight: 900; }
}

.main-nav { display: flex; align-items: center; gap: var(--space-7); }

.main-nav ul { display: flex; gap: var(--space-6); }

.main-nav ul a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: var(--space-2) 0;
  color: var(--on-dark);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.main-nav ul a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* Instagram-Icon im Header (2026-08-24): eigene Klasse statt .main-nav ul a, da kein Listen-
   Textlink sondern ein quadratisches Icon-Ziel - teilt sich aber Farblogik/Scroll-Verhalten
   mit den Nav-Links, damit es sich optisch nahtlos einreiht. */
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--on-dark);
  transition: color var(--dur) var(--ease);
  flex-shrink: 0;
}
.nav-social svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.nav-social:hover { color: var(--accent-2); }
.site-header.is-scrolled .nav-social { color: var(--ink); }
.site-header.is-scrolled .nav-social:hover { color: var(--accent); }
/* Textlabel bleibt per Default versteckt (Desktop: reines Icon neben den Nav-Links) und wird
   erst im aufgeklappten mobilen Menue sichtbar - dort reiht sich der Link sonst als unbeschrifteter
   Icon-Klotz zwischen Textlinks ein, was ohne Label verwirrend wirkt. */
.nav-social-label { display: none; }

.nav-toggle-label {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--on-dark);
  position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-toggle-label span::before { position: absolute; top: -8px; }
.nav-toggle-label span::after { position: absolute; top: 8px; }
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* Scrolled-Zustand: feste, helle Kopfzeile mit dunklem Text (per JS-Klasse gesetzt).
   Volldeckend (kein color-mix/transparent) - bei 92% Deckkraft schimmerte groesserer,
   fett gesetzter Text darunter (z.B. Preis, Eyebrow-Ueberschriften) sichtbar durch die
   Kopfzeile, was wie ein Rendering-Fehler wirkte. Siehe Selbstkontrolle (mobiler Scroll-Test). */
.site-header.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled .wordmark { color: var(--ink); }
/* kein eigener .wordmark span-Farbwert mehr noetig - erbt jetzt von .wordmark (siehe oben) */
.site-header.is-scrolled .main-nav ul a { color: var(--ink); }
.site-header.is-scrolled .main-nav ul a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-header.is-scrolled .nav-toggle-label span,
.site-header.is-scrolled .nav-toggle-label span::before,
.site-header.is-scrolled .nav-toggle-label span::after { background: var(--ink); }
.site-header.is-scrolled .btn-on-dark {
  background: var(--cta);
  color: var(--on-accent);
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: var(--shadow-brand);
}
.site-header.is-scrolled .btn-on-dark:hover { background: var(--cta-strong); }
.site-header.is-scrolled .btn-on-dark:visited { color: var(--on-accent); }

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    /* top/right/left + explizite Hoehe statt "inset: 84px 0 0 0": .site-header hat
       backdrop-filter (Glasleisten-Effekt), und ein backdrop-filter/filter/transform auf einem
       Vorfahren macht diesen Vorfahren zum Containing Block fuer position:fixed-Nachfahren
       (CSS-Spezifikation). Dadurch bezog sich "bottom: 0" nicht auf den Viewport, sondern auf
       die eigene, nur ~84px hohe Box von .site-header - das Menue kollabierte auf einen
       winzigen Streifen statt den Bildschirm zu fuellen. Mit expliziter Hoehe (100dvh - 84px)
       ist das unabhaengig vom Containing Block korrekt. Siehe Selbstkontrolle (mobile Menue-Test). */
    top: 84px;
    right: 0;
    left: 0;
    height: calc(100dvh - 84px);
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6) var(--gutter);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    gap: var(--space-6);
    overflow-y: auto;
  }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li { border-bottom: 1px solid var(--line); }
  .main-nav ul a { display: block; padding: 18px 0; font-size: 19px; color: var(--ink) !important; }
  .main-nav .btn { width: 100%; }
  /* Bugfix (V3.0-Rueberpruefung): .btn-on-dark ist fuer helle Schrift auf dunklem Hero/Header
     ausgelegt. Im aufgeklappten mobilen Menue ist der Hintergrund aber hell (--bg, siehe .main-nav
     oben) - dadurch war "Termin buchen" praktisch unsichtbar (naeherungsweise weisser Text auf
     naeherungsweise weissem Grund). Gleiche Umfaerbung wie beim gescrollten Header (--cta) noetig. */
  .main-nav .btn-on-dark {
    background: var(--cta);
    color: var(--on-accent);
    border-color: transparent;
    backdrop-filter: none;
  }
  .main-nav .btn-on-dark:hover { background: var(--cta-strong); }
  .main-nav .btn-on-dark:visited { color: var(--on-accent); }
  .main-nav .nav-social {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
  }
  .main-nav .nav-social-label { display: inline; }
  .nav-toggle-label { display: inline-flex; }
  #nav-toggle:checked ~ .main-nav { transform: translateX(0); }
  #nav-toggle:checked ~ .nav-toggle-label span { background: transparent !important; }
  #nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg) translate(5px, 6px); background: var(--ink) !important; }
  #nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg) translate(5px, -6px); background: var(--ink) !important; }
}

/* ---------------------------------------------------------------------- */
/* Hero - vollflaechiges Fahrzeugfoto als Overlay, ueber den ganzen        */
/* ersten Viewport, Header schwebt transparent darueber                   */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  color: var(--on-dark);
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Durchgehend abgedunkelt (nie unter ~0.6), damit Text unabhaengig vom jeweiligen Fotomotiv
     (auch ueber hellen Flaechen wie Wagenlack, Himmel, Kies) WCAG-AA-lesbar bleibt - eine
     fruehere, in der Mitte auf 0.15 abfallende Version war dort nicht mehr ausreichend
     kontrastreich (siehe Rueckmeldung/Selbstkontrolle). */
  background:
    linear-gradient(to top, rgba(15,15,16,0.9) 0%, rgba(15,15,16,0.62) 45%, rgba(15,15,16,0.6) 75%, rgba(15,15,16,0.72) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-9) var(--space-9);
  max-width: 42rem;
}
.hero-headline {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  margin-block: var(--space-4) var(--space-5);
}
.hero-sub {
  font-size: 19px;
  /* Bewusst volles Weiss statt des gedaempften on-dark-soft: Dune Sand/Rost-hell faellt auf
     hellen Bildstellen (Wagenlack, Kies, Himmel) unter AA-Kontrast, siehe Selbstkontrolle. */
  color: var(--on-dark);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}
/* Gebiets-Schnellpruefung im Hero (V4.0). Bewusst ohne zusaetzliche Karten-/Glasflaeche: das
   helle Eingabefeld hebt sich allein schon vom Foto ab, eine weitere Box wuerde die
   Hero-Komposition zerschneiden. Den Kontrast sichert der bestehende Hero-Scrim. */
.hero-check { margin-bottom: var(--space-5); }
.hero-check-label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--on-dark);
  margin-bottom: var(--space-3);
}
.hero-check-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
.hero-check-row input {
  font: inherit;
  font-size: 16px;
  width: 9.5rem;
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}
.hero-check-row input::placeholder { color: var(--text-soft); }
.hero-check-row input:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.hero-check-note { font-size: 13px; color: var(--on-dark); opacity: 0.9; margin-top: var(--space-3); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero-note { font-size: 14px; color: var(--on-dark); opacity: 0.92; margin-top: var(--space-5); }

.scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  width: 30px;
  height: 46px;
  border: 2px solid color-mix(in srgb, var(--on-dark) 55%, transparent);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--on-dark);
  animation: cue-scroll 1.8s ease-in-out infinite;
}
@keyframes cue-scroll {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 0.9; }
}
@media (max-width: 640px) {
  .scroll-cue { display: none; }
}

@media (max-width: 640px) {
  /* 2026-08-28 Mobile-Hero verschlankt (Fokussierung): Der Hero-Inhalt war auf einem 390x844-
     Viewport 655 px hoch. Zusammen mit dem unten fixierten Cookie-Banner blieb fuer den
     wichtigsten Klick der Seite kein Platz - PLZ-Formular und CTA lagen beim ersten Besuch
     hinter dem Banner. Schrift und Abstaende sind hier daher enger als auf dem Desktop
     (19 px Fliesstext im Hero ist auf dem Handy ohnehin ueberdimensioniert). */
  .hero-inner { padding-block: var(--space-7) var(--space-7); }
  .hero-headline { font-size: 30px; margin-block: var(--space-3) var(--space-4); }
  .hero-sub { font-size: 16px; line-height: 1.45; margin-bottom: var(--space-5); }
  .hero-check-note { font-size: 12px; }
  /* Sekundaerer Button entfaellt auf dem Handy: Direkt unter dem Haupt-CTA konkurriert er um
     denselben Blick, und "nach unten scrollen" ist auf einem Onepager die natuerliche Geste -
     ein eigener Sprung-Button dafuer ist Desktop-Komfort, kein Mobile-Bedarf. */
  .hero-actions { display: none; }
  /* Solange das Cookie-Banner sichtbar ist, wird der Hero-Inhalt exakt um dessen gemessene Hoehe
     angehoben (--consent-h wird in cookie-consent.js gesetzt). Der Hero ist align-items:flex-end,
     der Inhalt sitzt also am unteren Rand - ohne diese Regel genau dort, wo das Banner liegt. */
  body:has(#cookie-consent:not([hidden])) .hero-inner {
    padding-bottom: calc(var(--space-5) + var(--consent-h, 0px));
  }
}

/* Stat-Leiste: bewusst HELL statt dunkel (2026-08-28, auf Nutzerwunsch "im Wechsel hell und
   dunkel" zwischen den Bereichen) - direkt nach dem dunklen Hero-Foto sorgt der Hell/Dunkel-
   Wechsel fuer einen klaren Bereichs-Bruch, statt dass Hero und Stat-Leiste optisch zu einem
   einzigen dunklen Block verschmelzen. Siehe Kommentar am Seitenende (Abschnitt "Hell/Dunkel-
   Rhythmus") fuer die komplette Abfolge. */
.stat-strip {
  background: var(--bg);
  color: var(--ink);
}
.stat-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.stat {
  border-left: 1px solid var(--line);
  padding-left: var(--space-5);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .label { font-size: 14px; color: var(--text-soft); margin-top: var(--space-2); }

@media (max-width: 760px) {
  .stat-strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; padding-left: 0; }
}

/* ---------------------------------------------------------------------- */
/* Sektionen allgemein - kompakter fuer den Onepager-Rhythmus              */
/* ---------------------------------------------------------------------- */

section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-7); }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin-top: var(--space-3); }
.section-head p:not(.eyebrow) { color: var(--text-soft); font-size: 17px; margin-top: var(--space-4); max-width: 58ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p:not(.eyebrow) { margin-inline: auto; }

/* Nutzen-Sektion: asymmetrisches Editorial-Grid */
.benefits {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
.benefit-lead h2 { font-size: clamp(28px, 3.4vw, 44px); }
.benefit-lead p:not(.eyebrow) { margin-top: var(--space-5); color: var(--text-soft); font-size: 18px; max-width: 42ch; }

.benefit-list { display: flex; flex-direction: column; }
.benefit-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.benefit-item:last-child { border-bottom: 1px solid var(--line); }
.benefit-item .num { font-family: var(--font-display); font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.benefit-item h3 { font-size: 21px; font-family: var(--font-body); font-weight: 700; }
.benefit-item p { margin-top: var(--space-2); color: var(--text-soft); font-size: 16px; max-width: 52ch; }

/* #vorteile-Kopf: Bild + Text nebeneinander (V4.4), unabhaengig vom .benefits-Grid der
   Leistungen-Sektion weiter unten, damit beide Sektionen sich nicht gegenseitig beeinflussen. */
.vorteile-intro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.vorteile-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.vorteile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vorteile-text h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: var(--space-3); }
.vorteile-text p:not(.eyebrow) { margin-top: var(--space-5); color: var(--text-soft); font-size: 18px; max-width: 46ch; }

/* Problem/Loesung/Wirkung-Band: gleiche Kartenoptik wie .cost-card, damit die Seite nicht immer
   neue Bausteine erfindet, sondern ein wiedererkennbares Karten-Vokabular durchhaelt. */
.psych-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.psych-step {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.psych-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--accent);
}
.psych-step h3 { font-size: 19px; font-family: var(--font-body); font-weight: 700; margin-top: var(--space-3); }
.psych-step p { margin-top: var(--space-2); color: var(--text-soft); font-size: 15px; }

/* 2026-08-28 (auf Nutzerwunsch "im Wechsel hell und dunkel" zwischen den Bereichen): #vorteile
   wird zur dunklen Flaeche zwischen der hellen Stat-Leiste und dem hellen Kostenvergleich.
   Gleiches Muster wie bei .termin/.aside-card: Karten bekommen einen dezenten hellen Tint statt
   der hellen --card-bg, Text/Linien wechseln auf die on-dark-Pendants. */
#vorteile { background: var(--bg-deep); color: var(--on-dark); }
#vorteile .eyebrow { color: var(--accent-2); }
#vorteile .eyebrow::before { background: var(--accent-2); }
#vorteile .vorteile-text p:not(.eyebrow) { color: var(--on-dark-soft); }
#vorteile .psych-step {
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid var(--line-on-dark);
}
#vorteile .psych-label { color: var(--accent-2); }
#vorteile .psych-step p { color: var(--on-dark-soft); }
#vorteile .benefit-item { border-top-color: var(--line-on-dark); }
#vorteile .benefit-item .num { color: var(--accent-2); }
#vorteile .benefit-item p { color: var(--on-dark-soft); }

@media (max-width: 860px) {
  .vorteile-intro { grid-template-columns: 1fr; }
  .psych-steps { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .benefits { grid-template-columns: 1fr; }
}

/* Leistungen als schmales Band (2026-08-28, Fokussierung auf Nutzerwunsch): ersetzt den frueheren
   Drei-Spalten-Block. Bewusst ohne eigene Karten/Nummern und ohne CTA - dieser Abschnitt soll
   informieren, nicht konkurrieren. Ueberschrift kleiner als die uebrigen H2 der Seite, damit die
   visuelle Rangfolge der Sektionen die inhaltliche Rangfolge abbildet. */
.leistungen-band h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  margin-top: var(--space-3);
}
.leistungen-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}
.leistungen-inline li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}
.leistungen-inline li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex: none;
}
.leistungen-note {
  margin-top: var(--space-4);
  color: var(--text-soft);
  font-size: 15px;
  max-width: 60ch;
}

/* Kostenvergleich (V4.2): teilt sich die Dune-Sand-Flaeche mit der direkt folgenden
   Paket-Sektion, damit beide als ein zusammenhaengender "Kosten -> Preis"-Block wirken. */
.cost-compare { background: var(--surface); }
.cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
  align-items: stretch;
}
.cost-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
}
/* Highlight per Border/Hintergrund statt Farbverlauf (wie bei .package-tier.is-highlight) -
   VAYARO soll als die ruhigere, aufgeraeumtere Option erscheinen, nicht als lauteste Flaeche. */
.cost-card.is-highlight { border-color: var(--accent); background: var(--card-bg); box-shadow: var(--shadow); }
.cost-card-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--text-soft);
}
.cost-card.is-highlight .cost-card-label { color: var(--accent-strong); }
.cost-amount {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-3);
}
.cost-amount .cost-period { font-family: var(--font-body); font-size: 16px; color: var(--text-soft); font-weight: 400; margin-left: var(--space-2); }
.cost-sub { font-size: 14px; color: var(--text-soft); margin-top: var(--space-2); margin-bottom: var(--space-5); }
.cost-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }
.cost-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 15px;
}
.cost-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--text-soft);
  flex: none;
}
.cost-card.is-highlight .cost-list li::before { background: var(--accent); }
.cost-footnote {
  margin-top: var(--space-6);
  font-size: 13px;
  color: var(--text-soft);
  max-width: 72ch;
}

@media (max-width: 860px) {
  .cost-grid { grid-template-columns: 1fr; }
}

/* Paket-Sektion */
.package {
  background: var(--surface);
}
.package-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: stretch;
}
.package-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--space-7);
  box-shadow: var(--shadow);
}
.package-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.package-price .amount { font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); color: var(--ink); font-variant-numeric: tabular-nums; }
.package-price .period { color: var(--text-soft); font-size: 16px; }

/* Zwei Laufzeit-Stufen nebeneinander (V4.0). Die guenstigere Stufe ist hervorgehoben, aber nicht
   als Empfehlung ausgezeichnet - sie soll den Vergleich ermoeglichen, nicht die Entscheidung
   vorwegnehmen. Beide Preise mit tabular-nums, damit die Ziffern spaltentreu stehen. */
.package-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.package-tier {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  /* Flex-Spalte, damit die beiden Preise auf einer Linie stehen, auch wenn das Rabatt-Badge
     die Kopfzeile der rechten Stufe zweizeilig macht - sonst vergleicht das Auge zwei Zahlen
     auf unterschiedlicher Hoehe und liest den Versatz als Rangfolge. */
  display: flex;
  flex-direction: column;
}
.package-tier.is-highlight { border-color: var(--accent); background: var(--card-bg); }
.package-tier .tier-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.package-tier .tier-badge {
  letter-spacing: 0.06em;
  color: var(--on-accent);
  background: var(--accent);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
}
.package-tier .tier-price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* auto statt fester Abstand: schiebt beide Preise an die Unterkante ihrer Karte, damit sie auf
     einer Linie stehen, auch wenn das Rabatt-Badge die rechte Kopfzeile zweizeilig macht. */
  margin-top: auto;
  padding-top: var(--space-3);
}
.package-tier .tier-meta { color: var(--text-soft); font-size: 14px; margin-top: var(--space-1); }
.package-unit { font-size: 15px; color: var(--ink); margin-bottom: var(--space-2); }
.package-note { color: var(--text-soft); font-size: 15px; margin-bottom: var(--space-6); }

@media (max-width: 560px) {
  .package-tiers { grid-template-columns: 1fr; }
}

.package-features { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.package-features li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 16px;
}
.package-features li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--accent);
  flex: none;
}
.package-risk {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-soft);
}
/* Kooperativer Zusatz-Hinweis (V4.1): bewusst ohne eigenen Trennstrich direkt unter dem
   Risikoumkehr-Absatz - er ist keine neue Sachinformation, sondern der weichere Tonfall dazu. */
.package-cooperative {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--text-soft);
}

.package-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}
.aside-card {
  background: var(--bg-deep);
  color: var(--on-dark);
  padding: var(--space-6);
  border-radius: var(--radius);
}
.aside-card h3 { font-family: var(--font-body); font-size: 19px; font-weight: 700; margin-bottom: var(--space-3); }
.aside-card p { color: var(--on-dark-soft); font-size: 15px; }

@media (max-width: 860px) {
  .package-grid { grid-template-columns: 1fr; }
}

/* Media-Frame: wiederverwendbarer Rahmen fuer echte Fahrzeugfotos mit Textlesbarkeits-Verlauf */
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame.has-caption::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 20, 21, 0.6) 0%, rgba(20, 20, 21, 0) 40%);
}

/* Beispiele / Themenwelten (Content-Rubriken ohne Bildmaterial noch nicht existierender Trips) */
.beispiele-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.theme-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--bg);
}
.theme-card .rubrik {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--accent);
}
.theme-card h3 { font-size: 18px; font-family: var(--font-body); font-weight: 700; margin-top: var(--space-3); }
.theme-card p { font-size: 14px; color: var(--text-soft); margin-top: var(--space-2); }

/* Bebildertes Themenraster (V4.0): vier gleichrangige Karten statt einem grossen Bild plus vier
   Textkarten. Das "Konzept"-Label sitzt im Bild und nicht darunter, damit die Kennzeichnung auch
   dann mitwandert, wenn jemand einen Screenshot der Kachel weiterreicht. */
.theme-grid-visual { grid-template-columns: repeat(4, 1fr); }
/* margin: 0 ist hier nicht kosmetisch: <figure> traegt in allen Browsern einen Default-Rand von
   40px links/rechts, der die Karten sonst auf die halbe Spaltenbreite zusammenzieht. */
.theme-grid-visual .theme-card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.theme-media { position: relative; aspect-ratio: 4 / 3; background: var(--card-bg); }
.theme-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-tag {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--on-dark);
  background: rgba(42, 43, 45, 0.82);
  padding: 4px 7px;
  border-radius: var(--radius-sm);
}
.theme-grid-visual figcaption { padding: var(--space-5); }

@media (max-width: 1000px) {
  .theme-grid-visual { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .theme-grid-visual { grid-template-columns: 1fr; }
}

.gallery-note {
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--text-soft);
}

/* .real-proof-Regeln am 2026-08-28 entfernt - der zugehoerige Echtfoto-Block wurde auf
   Nutzerwunsch aus index.html genommen (Begruendung siehe Kommentar dort). */

@media (max-width: 860px) {
  .beispiele-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .theme-grid { grid-template-columns: 1fr; }
}

/* Ablauf */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.step { border-top: 2px solid var(--line-strong); padding-top: var(--space-4); }
.step .num { font-family: var(--font-display); color: var(--accent); font-size: 15px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.step h3 { font-size: 19px; font-family: var(--font-body); font-weight: 700; margin-top: var(--space-3); }
.step p { color: var(--text-soft); font-size: 15px; margin-top: var(--space-2); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
}

/* 2026-08-28 (Hell/Dunkel-Rhythmus, auf Nutzerwunsch): #ablauf dunkel zwischen dem hellen
   Kostenvergleich/Paket-Block und den hellen Beispielen. */
#ablauf { background: var(--bg-deep); color: var(--on-dark); }
#ablauf .eyebrow { color: var(--accent-2); }
#ablauf .eyebrow::before { background: var(--accent-2); }
#ablauf .section-head p:not(.eyebrow) { color: var(--on-dark-soft); }
#ablauf .step { border-top-color: var(--line-on-dark); }
#ablauf .step .num { color: var(--accent-2); }
#ablauf .step p { color: var(--on-dark-soft); }

/* Signatur-Band: ganzflaechiges Fahrzeugfoto mit Motto (einmalig, emotionaler Wendepunkt vor der FAQ/CTA) */
.signature-band {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  color: var(--on-dark);
  overflow: hidden;
}
.signature-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.signature-band::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Durchgehend abgedunkelt statt in der Mitte auf 0.15 abzufallen - gleiche Korrektur wie
     beim Hero-Scrim, siehe dort. */
  background: linear-gradient(to top, rgba(20,20,21,0.88) 0%, rgba(20,20,21,0.6) 55%, rgba(20,20,21,0.62) 100%);
}
.signature-band .wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--space-7);
}
.signature-band .motto {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(20px, 3vw, 30px);
}
.signature-band .motto-sub {
  margin-top: var(--space-3);
  color: var(--on-dark);
  opacity: 0.92;
  font-family: var(--font-body);
  font-size: 16px;
  max-width: 50ch;
}

/* FAQ - reine CSS-Accordion (details/summary), kein JS noetig */
.faq-intro {
  max-width: 62ch;
  color: var(--text-soft);
  font-size: 17px;
  margin-bottom: var(--space-7);
}
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-item summary .icon::before,
.faq-item summary .icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-item summary .icon::before { width: 10px; height: 1.5px; }
.faq-item summary .icon::after { width: 1.5px; height: 10px; }
.faq-item[open] summary .icon { border-color: var(--accent); transform: rotate(180deg); }
.faq-item[open] summary .icon::after { opacity: 0; }
.faq-item p {
  padding-bottom: var(--space-5);
  padding-right: 40px;
  color: var(--text-soft);
  font-size: 16px;
  max-width: 60ch;
}

/* 2026-08-28 (Hell/Dunkel-Rhythmus, auf Nutzerwunsch): #faq dunkel zwischen den hellen
   Leistungen und dem jetzt hellen Termin-Block (siehe .termin unten). */
#faq { background: var(--bg-deep); color: var(--on-dark); }
#faq .eyebrow { color: var(--accent-2); }
#faq .eyebrow::before { background: var(--accent-2); }
#faq .faq-intro { color: var(--on-dark-soft); }
#faq .faq-list { border-top-color: var(--line-on-dark); }
#faq .faq-item { border-bottom-color: var(--line-on-dark); }
#faq .faq-item summary .icon { border-color: var(--line-on-dark); }
#faq .faq-item summary .icon::before,
#faq .faq-item summary .icon::after { background: var(--on-dark); }
#faq .faq-item[open] summary .icon { border-color: var(--accent-2); }
#faq .faq-item p { color: var(--on-dark-soft); }

/* Termin / Booking-CTA - der zentrale Konversionspunkt der Seite.
   2026-08-28 (Hell/Dunkel-Rhythmus, auf Nutzerwunsch): von dunkel auf HELL gedreht, damit die
   Seite nach der dunklen FAQ nicht direkt in einen weiteren dunklen Block (Termin) laeuft -
   Footer bleibt als einziger fixer Dunkel-Abschluss stehen. Alle Kinder unten von den
   on-dark-Pendants auf die Standard-Light-Tokens umgestellt; .eyebrow.on-dark im HTML wurde
   dafuer auf schlichtes .eyebrow zurueckgesetzt (siehe index.html). */
.termin {
  background: var(--bg);
  color: var(--ink);
}
.termin-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8);
  align-items: center;
}
.termin-copy h2 { font-size: clamp(30px, 4vw, 46px); }
.termin-copy p { margin-top: var(--space-5); color: var(--text-soft); font-size: 18px; max-width: 44ch; }
.termin-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.termin-trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--text-soft);
}
.termin-trust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.termin-booking {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  text-align: center;
}
.termin-booking .btn { width: 100%; }
.termin-booking .btn-primary { box-shadow: none; }
.termin-alt {
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--text-soft);
}
.termin-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.termin-contact {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.termin-info-col { display: flex; flex-direction: column; gap: var(--space-6); }

/* Portraetfoto neben den Kontaktdaten (2026-08-23) - freigestelltes PNG/WebP mit Transparenz,
   deshalb per object-fit:cover + border-radius:50% rund zugeschnitten statt fest zugeschnitten
   geliefert. Dezenter Rahmen + leicht heller Hintergrund, damit der Kreis auch dann sauber
   wirkt, wenn der Zuschnitt am Rand nicht exakt mittig faellt. */
.termin-person { display: flex; align-items: center; gap: var(--space-4); }
.termin-person-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card-bg);
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.termin-person-name { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin: 0; }
.termin-person-role { font-size: 14px; color: var(--text-soft); margin: 2px 0 0; }

.termin-contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.termin-contact-info dt { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.termin-contact-info dd { margin: 3px 0 0; font-size: 15px; color: var(--ink); }

.form-card {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.form-card h3 { font-size: 16px; font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-2); }
.form-required-note { font-size: 13px; color: var(--text-soft); margin-bottom: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 13px; font-weight: 600; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.form-note { font-size: 12px; color: var(--text-soft); margin-top: var(--space-3); }

@media (max-width: 860px) {
  .termin-card { grid-template-columns: 1fr; }
  .termin-contact { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  color: var(--on-dark);
}
.footer-top {
  padding-block: var(--space-7);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-7);
  border-bottom: 1px solid var(--line-on-dark);
}
/* Einfarbig statt zweifarbig (2026-08-24, Nutzerwunsch): Footer-Wordmark folgt jetzt derselben
   Logik wie im Header - .wordmark span erbt via color:inherit von .wordmark, keine eigene
   Akzentfarbe fuer "ARO" mehr. */
.footer-brand .wordmark { color: var(--on-dark); }
.footer-motto {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 15px;
  color: var(--accent-2);
  margin-top: var(--space-4);
}
.footer-col h4 { font-family: var(--font-body); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-dark-soft); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; }
/* padding statt reinem Zeilenabstand: vergroessert die Tapflaeche auf Mobilgeraeten
   (vorher nur ~19px hohe reine Textzeile pro Link). */
.footer-col a { display: inline-block; text-decoration: none; color: var(--on-dark); padding-block: var(--space-2); }
.footer-col a:hover { color: var(--accent-2); }

.footer-bottom {
  padding-block: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--on-dark-soft);
}
.footer-bottom a { display: inline-block; padding-block: var(--space-2); text-decoration: underline; color: var(--on-dark-soft); }

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Cookie-Consent-Banner (2026-08-23)                                     */
/* ---------------------------------------------------------------------- */

.cookie-consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 400;
  max-width: 560px;
  background: var(--bg-deep);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  padding: var(--space-6);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent p { font-size: 14px; color: var(--on-dark-soft); line-height: 1.6; }
.cookie-consent p + p { margin-top: var(--space-3); }
.cookie-consent a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.cookie-consent-actions .btn { flex: 1 1 auto; }
.cookie-consent-panel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
}
.cookie-consent-panel[hidden] { display: none; }
.cookie-consent-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.cookie-consent-category + .cookie-consent-category { margin-top: var(--space-4); }
.cookie-consent-category h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--on-dark); margin: 0; }
.cookie-consent-category p { margin-top: 2px; font-size: 13px; }
.cookie-consent-category input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent-2); }
.cookie-consent-save { margin-top: var(--space-5); width: 100%; }

@media (max-width: 640px) {
  /* 2026-08-28: kompakter auf Mobilgeraeten. Vorher standen die drei Buttons je in einer eigenen
     Zeile (flex 1 1 100%) - zusammen mit dem langen Text ergab das ein Banner ueber die halbe
     Bildschirmhoehe, das den Hero-CTA verdeckte. Jetzt teilen sich die beiden Neben-Buttons eine
     Zeile, "Alle akzeptieren" rutscht als dritter Flex-Eintrag von selbst in die zweite Zeile und
     bleibt dort in voller Breite die optisch fuehrende Wahl. */
  .cookie-consent { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: var(--space-4); }
  .cookie-consent p { font-size: 13px; line-height: 1.5; }
  .cookie-consent-actions { gap: var(--space-2); margin-top: var(--space-4); }
  .cookie-consent-actions .btn { flex: 1 1 calc(50% - var(--space-2)); }
  .cookie-consent-actions #cookie-consent-accept-all { flex: 1 1 100%; }
}

/* Sehr niedrige Viewports (aeltere/kompakte Android-Geraete, Querformat): Dort frisst ein Banner
   von 245 px fast 40 % des Bildschirms. Hier zusaetzlich verdichtet - alle drei Aktionen in eine
   Zeile, engere Zeilen. Die Schrift bleibt bei 12 px lesbar und die Buttons behalten ueber
   .btn ihre Mindest-Tapflaeche. */
@media (max-height: 720px) {
  .cookie-consent { padding: var(--space-3) var(--space-4); }
  .cookie-consent p { font-size: 12px; line-height: 1.45; }
  .cookie-consent-actions { margin-top: var(--space-3); flex-wrap: nowrap; }
  .cookie-consent-actions .btn,
  .cookie-consent-actions #cookie-consent-accept-all { flex: 1 1 0; padding-inline: var(--space-2); white-space: nowrap; }
}

/* Kleine Telefone im Hochformat (z. B. 360x640): letzter Verdichtungsschritt, damit der
   Haupt-CTA auch dort ueber dem Cookie-Banner bleibt. Bewusst nur fuer diese Kombination aus
   schmal UND niedrig - auf groesseren Geraeten waere diese Schriftgroesse unnoetig klein. */
@media (max-width: 640px) and (max-height: 720px) {
  .hero-inner { padding-block: var(--space-6) var(--space-5); }
  .hero-inner .eyebrow { font-size: 11px; }
  .hero-headline { font-size: 26px; margin-block: var(--space-2) var(--space-3); }
  .hero-sub { font-size: 15px; margin-bottom: var(--space-4); }
  .hero-check-label { margin-bottom: var(--space-2); }
  /* PLZ-Feld und Button in eine Zeile statt uebereinander: spart die volle Hoehe einer
     Eingabezeile (~60 px) und ist genau der Betrag, der den CTA hier ueber das Banner hebt.
     Beide behalten ueber .btn / .field-Regeln ihre Mindesthoehe von 44 px. */
  .hero-check-row { flex-wrap: nowrap; }
  .hero-check-row input { flex: 1 1 auto; min-width: 0; }
  .hero-check-row .btn { flex: 0 0 auto; padding-inline: var(--space-4); }
}

/* ---------------------------------------------------------------------- */
/* Rechtsseiten (Impressum / Datenschutz / Barrierefreiheit) - schlichte   */
/* Fliesstext-Seiten, nutzen denselben Header/Footer wie die Startseite.   */
/* ---------------------------------------------------------------------- */

.legal-page {
  padding-block: var(--space-9) var(--space-8);
}
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: var(--space-6); }
.legal-page .legal-updated { font-size: 14px; color: var(--text-soft); margin-top: calc(-1 * var(--space-5)); margin-bottom: var(--space-7); }
.legal-page h2 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  letter-spacing: normal;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  letter-spacing: normal;
}
.legal-page p { margin-top: var(--space-4); color: var(--text); max-width: 68ch; }
.legal-page p:first-of-type { margin-top: 0; }
.legal-page ul { list-style: disc; padding-left: 1.3em; margin-top: var(--space-4); max-width: 68ch; }
.legal-page ul li { margin-top: var(--space-2); }
.legal-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--accent-strong); }
/* 2026-08-27 (axe-core-Fund auf kontakt/danke.html): ".legal-page a" und ".btn-primary" haben
   dieselbe Selektor-Spezifitaet (je eine Klasse); da ".legal-page a" spaeter im Stylesheet steht,
   gewann sie und ueberschrieb die Button-Textfarbe mit dem Rost-Ton der Fliesstext-Links - auf dem
   kraeftigen CTA-Orange nur noch 1.2:1 Kontrast statt der eigentlich vorgesehenen ~6.5:1. Fix per
   hoeherer Spezifitaet (zwei Klassen statt einer) statt per Quellreihenfolge, damit sich das nicht
   bei der naechsten Bearbeitung wiederholt. Kein Text-Unterstrich auf Buttons - passt nicht zur
   sonstigen Button-Optik der Seite. */
.legal-page a.btn { text-decoration: none; }
.legal-page a.btn-primary { color: var(--on-accent); }
.legal-page a.btn-primary:hover { color: var(--on-accent); }
.legal-page a.btn-on-dark { color: var(--on-dark); }
.legal-page strong { font-weight: 700; }
.legal-page .legal-note {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--card-bg);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-soft);
}
.legal-page .legal-placeholder { background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 5px; border-radius: 2px; }
.legal-page table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: 15px; }
.legal-page table caption { text-align: left; font-weight: 700; margin-bottom: var(--space-3); }
.legal-page th, .legal-page td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page th { font-weight: 700; }
.legal-page .back-home { display: inline-block; margin-top: var(--space-8); font-size: 15px; }

/* ---------------------------------------------------------------------- */
/* WhatsApp-Kontaktbutton (V4.3) - fixiert, laeuft beim Scrollen mit        */
/* ---------------------------------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: var(--space-5);
  /* 2026-08-28 (auf Nutzerwunsch): vertikal mittig am rechten Rand statt unten rechts -
     top:50% + translateY(-50%) statt bottom, damit die Position unabhaengig von der
     Viewport-Hoehe immer exakt mittig bleibt. Hover/Active-Transforms muessen die -50%
     deshalb mitfuehren (siehe unten), sonst springt der Button beim Hover an den oberen Rand. */
  top: 50%;
  transform: translateY(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Bewusst das offizielle WhatsApp-Gruen statt eines Marken-Tons: der Wiedererkennungswert
     ("das ist der WhatsApp-Knopf") ist hier wichtiger als Farbkonsistenz zum restlichen
     Rost-/Sand-Farbschema - ein brand-farbener Kreis wuerde nicht sofort als Chat-Einstieg
     gelesen. */
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px rgba(19, 43, 32, 0.32);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.whatsapp-fab svg { width: 30px; height: 30px; fill: currentColor; }
.whatsapp-fab:hover { transform: translateY(calc(-50% - 2px)); box-shadow: 0 14px 34px rgba(19, 43, 32, 0.4); }
.whatsapp-fab:active { transform: translateY(-50%); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
/* Dezenter Ping-Ring statt dauerhaftem Blinken - zieht kurz den Blick, ohne auf Dauer zu nerven.
   Faellt unter die globale prefers-reduced-motion-Regel oben in dieser Datei. */
.whatsapp-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: whatsapp-ping 2.6s ease-out infinite;
}
@keyframes whatsapp-ping {
  0% { opacity: 0.55; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 640px) {
  .whatsapp-fab { right: var(--space-4); width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 28px; height: 28px; }
  /* Auf schmalen Screens ist das Cookie-Banner (siehe unten) volle Breite und ueberdeckt sonst
     den FAB unten rechts. Auf Desktop bleibt der FAB waehrend des Banners sichtbar, da sich
     beide dort raeumlich nicht ueberschneiden (Banner links verankert). */
  body:has(#cookie-consent:not([hidden])) .whatsapp-fab { display: none; }
}