/* ==========================================================================
   Fahrstation Düsseldorf — Grundgerüst
   --------------------------------------------------------------------------
   Mobile-first: Basis-Styles gelten für Mobile, @media (min-width: …) legt
   für größere Screens nach. Ausschließlich Werte aus design-tokens.css —
   keine Farbe, Schrift oder Abstand wird hier neu erfunden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Unterdrückt das graue Antipp-Rechteck auf iOS/Android — jedes Element
     mit eigenem Hover bekommt weiter unten einen echten :active-Zustand,
     damit Touch-Nutzer:innen trotzdem eine Rückmeldung sehen. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--text-light);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

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

a {
  color: inherit;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Solange das Mobile-Menü offen ist, darf der Hintergrund nicht scrollen. */
body.has-open-menu {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Layout-Container
   -------------------------------------------------------------------------- */
.site-footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Das Banner läuft bewusst über die volle Breite und folgt NICHT dem
   1200px-Container der übrigen Sektionen — Vorgabe: 20px Rand auf Mobile,
   4 % auf Desktop. Es ist damit breiter als der Inhalt darunter. */
.site-header__inner {
  padding-inline: var(--header-pad);
}

/* --------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------
   Das Banner ist EIN Inline-SVG (index.html), vollständig vektorisiert aus
   assets/logo.png, und besteht aus drei Ebenen in einer Zeichenfläche:

     .banner__bar  Rechtecke im äußeren SVG (Nutzereinheiten = px), an beiden
                   Enden eingezogen — der gerade Mittelteil, der sich dehnt
     .banner__cap  preserveAspectRatio="xMinYMid meet"  — Schriftzug, linksbündig
     .banner__tip  preserveAspectRatio="xMaxYMid meet"  — Spitze, rechtsbündig

   Cap und Tip teilen sich dieselbe viewBox-Höhe (392) und skalieren beide auf
   100 % der Bannerhöhe, haben also exakt denselben Maßstab. Der Balken wird
   zuerst gezeichnet, Cap und Tip decken seine Schnittkanten ab — eine
   Überlappung statt eines Stoßes, deshalb gibt es keine Naht, die
   auseinanderlaufen könnte. Schriftzug und Spitze behalten ihr
   Seitenverhältnis, nur der Balken ändert seine Länge.

   Alle Anteile stammen aus design-tokens.css und sind am Logo ausgemessen.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  /* Höher als .mobile-menu (200): der Header bleibt sichtbar, wenn das
     Overlay offen ist, damit das Balken-zu-X-Icon auch wirklich zu sehen
     ist und als Schließen-Button funktioniert. */
  z-index: 300;
  background-color: var(--text-light);
  transition: box-shadow var(--transition-base);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  transition: height var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
}

.site-header__banner {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.banner {
  display: block;
  width: 100%;
  height: var(--banner-h);
}

/* Geometrie-Eigenschaften (x/y/width/height) werden hier per CSS gesetzt,
   damit der Balken an beiden Enden einen festen Einzug bekommt — als
   Attribute ließe sich das nicht ausdrücken, weil der linke Einzug von der
   linken, der rechte von der rechten Kante aus zählt. */
.banner__bar {
  x: calc(var(--banner-h) * var(--bar-inset-l));
  width: calc(100% - var(--banner-h) * (var(--bar-inset-l) + var(--bar-inset-r)));
}

.banner__bar--body {
  y: calc(var(--banner-h) * var(--bar-y));
  height: calc(var(--banner-h) * var(--bar-h));
  fill: var(--primary);
}

.banner__bar--edge-top {
  y: calc(var(--banner-h) * var(--bar-edge-top));
  height: calc(var(--banner-h) * var(--bar-edge-h));
  fill: var(--accent);
}

.banner__bar--edge-bottom {
  y: calc(var(--banner-h) * var(--bar-edge-bot));
  height: calc(var(--banner-h) * var(--bar-edge-h));
  fill: var(--accent);
}

/* --------------------------------------------------------------------------
   Menü-Icon — drei identische, vollflächig gelbe Balken
   --------------------------------------------------------------------------
   Auf der schwarzen Balkenfläche verschwand die frühere Variante mit
   schwarzem Kern fast; vollflächig gelb liest sie sich sofort als
   antippbares Element. Sechseckform (beide Enden spitz) bleibt, jetzt
   schlanker: viewBox 760 × 296, Balken 70 hoch, Abstand 43 (61 % der
   Balkenhöhe, wie in der Referenz), Spitzentiefe 30 (43 %).

   Der Abstand zur gelben Innenkontur ist proportional (19 % des Kanals oben
   wie unten) statt fixer 12px: bei 56/112px Bannerhöhe ist der Kanal nur
   18,7 bzw. 37,4px hoch — 2 × 12px fester Abstand ließe davon nichts übrig.
   -------------------------------------------------------------------------- */
.nav-toggle {
  position: absolute;
  top: calc(var(--banner-h) * var(--channel-mid) + (var(--header-h) - var(--banner-h)) / 2);
  right: calc(var(--header-pad) + var(--banner-h) * var(--tip-w));
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  /* Die sichtbare Grafik darf kleiner sein als die Tap-Fläche: das Icon
     schrumpft, der Button bleibt mindestens 48 × 48px und ragt dabei
     unsichtbar über den Balken hinaus. */
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

.nav-toggle__icon {
  display: block;
  height: calc(var(--banner-h) * var(--channel-h) * 0.62);
  width: auto;
  overflow: visible;
}

/* transform-box: fill-box macht die Rotationsmitte jedes Balkens zu seinem
   eigenen Zentrum statt zum Ursprung des <svg> — sonst würde der Balken um
   die Ecke der Zeichenfläche kippen statt um sich selbst. */
.nav-toggle__bar {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 250ms ease-out, opacity 250ms ease-out;
}

/* 113 = Balkenhöhe + Abstand: der obere und der untere Balken wandern damit
   exakt auf die Mitte. scaleX verkürzt sie, sonst spannte das X gedreht
   537 Einheiten und ragte weit über den Kanal hinaus. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top {
  transform: translateY(113px) rotate(45deg) scaleX(0.5);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bottom {
  transform: translateY(-113px) rotate(-45deg) scaleX(0.5);
}

.nav-toggle:focus-visible,
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Overlay-Menü — jetzt auf allen Bildschirmgrößen die einzige Navigation
   (Nav-Links und Telefonnummer sind aus der Kopfzeile selbst entfernt,
   Logo + durchgehender Balken + Menü-Icon ersetzen sie überall).
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background-color: var(--primary);
  color: var(--text-light);
  /* Platz für den Header, der jetzt darüber sichtbar bleibt. */
  padding-top: var(--header-h);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  /* env() ist 0, wo es kein Notch/Home-Indicator gibt — das Menü bleibt
     dort exakt wie vorher, nur auf iPhones mit Home-Indicator kommt die
     Telefonnummer nicht mehr darunter zu liegen. */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.mobile-menu__list {
  flex: 1;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-target);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.15);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-display);
  text-decoration: none;
}

.mobile-menu__dropdown-icon {
  transition: transform var(--transition-base);
}

.mobile-menu__dropdown {
  display: none;
  padding-bottom: var(--space-2);
}

.mobile-menu__dropdown-toggle[aria-expanded="true"] + .mobile-menu__dropdown {
  display: block;
}

.mobile-menu__dropdown a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-left: var(--space-4);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  text-decoration: none;
}

.mobile-menu__phone {
  margin-top: var(--space-6);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section {
  scroll-margin-top: var(--header-h);
}

/* --------------------------------------------------------------------------
   Anton-Headline-Schrägstellung — projektweit, zentral über eine einzige
   Selektorliste statt an jeder Stelle einzeln (Stufe-1-Vorschau an der
   Hero-Headline geprüft und freigegeben, siehe Commit-Historie).

   Bewusst NUR echte Überschriften, keine kleinen Anton-Stellen (Badges,
   Buttons, Navigation) und keine großen Zahlen-/Deko-Displays — beide
   waren nicht Teil des Auftrags und blieben nach Prüfung ausgeschlossen:
   - Buttons/Navigation (.btn-primary, .btn-signage, .contact-action__label,
     .mobile-menu__link, .mobile-cta-bar__item, .class-card__cta,
     .class-card__heading): UI-Chrome, kein
     Überschriften-Text. Vergleichsrender bei 20px (.mobile-menu__link)
     zeigte sichtbar schlechtere Wirkung — der Pfeil daneben bleibt gerade,
     kurze Einzelworte wirken unruhig statt dynamisch.
   - Große Zahlen-/Deko-Displays (.trust-stat__value, .step-number,
     .class-card__letter, .testimonial__mark): keine Fließtext-Über-
     schriften, sondern Zahlen/Buchstaben-Badges bzw. ein rein dekoratives
     Wasserzeichen.

   .hero-section__title bekommt den Skew nicht direkt aus dieser Regel,
   weil ihre Eintritts-Animation (hero-enter-title) eine gleichzeitig
   gesetzte statische transform-Eigenschaft überschreibt (siehe dortiger
   Kommentar) — sie steht trotzdem mit in der Liste, damit diese Regel die
   vollständige, verbindliche Liste aller Headline-Selektoren bleibt. */
.hero-section__title,
.classes__heading,
.reviews__heading,
.ablauf__heading,
.contact__heading,
.kontakt-heading,
.page-header__title,
.page-cta__heading,
.contact-form__success-heading,
.faq__heading {
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

/* --------------------------------------------------------------------------
   Hero (#hero)
   -------------------------------------------------------------------------- */
.hero-chips {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  animation: hero-enter 400ms ease-out both;
}

.hero-chips::-webkit-scrollbar {
  display: none;
}

.hero-section__title {
  margin: 0 0 var(--space-6);
  max-width: 100%;
  /* Ohne das wird "FAHRSCHULE," bei 320px 9,7px breiter als der verfügbare
     Platz und dann von .hero-section (overflow: hidden) unsichtbar
     abgeschnitten, statt umzubrechen — gemessen via Range.getClientRects().
     hyphens:auto (mit lang="de" auf <html>) bricht an einer echten
     Silbengrenze statt mitten im Wort, overflow-wrap bleibt als Netz für
     den Fall, dass der Browser keine Trennstelle findet. */
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: var(--font-size-hero-h1);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  text-transform: uppercase;
  color: var(--text-light);
  animation: hero-enter-title 400ms ease-out both;
  animation-delay: 80ms;
  /* Der projektweite Skew (siehe Selektorliste weiter oben, Abschnitt
     "Anton-Headline-Schrägstellung") würde hier von der Eintritts-Animation
     überschrieben: animierte Properties gewinnen für die Dauer der
     Animation UND danach (fill-mode: both hält den Endzustand). Eigene
     Keyframes (hero-enter-title) statt des gemeinsamen hero-enter tragen
     den Skew deshalb selbst mit — letzteres teilen sich außerdem
     .hero-chips/__subline/__actions, der Skew wäre sonst dort mit
     gelandet. transform-origin: left bottom verankert die Grundlinie der
     ERSTEN Zeile an ihrer eigenen linken Kante statt an der Blockmitte
     (Standardwert), sonst würde der zweizeilige Text als Ganzes nach
     links aus dem Container wandern. */
}

.hero-section__subline {
  margin: 0 0 var(--space-8);
  max-width: 48ch;
  color: color-mix(in srgb, var(--text-light) 72%, transparent);
  line-height: 1.5;
  animation: hero-enter 400ms ease-out both;
  animation-delay: 160ms;
}

.hero-section__actions {
  display: flex;
  flex-direction: column;
  /* flex-start statt stretch: die Buttons folgen ihrer Inhaltsbreite und
     ziehen sich auch mobil nicht über die ganze Zeile. */
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  /* backwards statt both: eine nach dem Ende gehaltene Animation (opacity/
     transform) bleibt ein Backdrop-Root und würde den backdrop-filter des
     Milchglas-Buttons (.ghost-btn--glass) abschneiden. Optik identisch, weil
     der Endzustand der Keyframes dem Normalzustand entspricht. */
  animation: hero-enter 400ms ease-out backwards;
  animation-delay: 240ms;
}

/* --------------------------------------------------------------------------
   .ghost-btn — Hero-Button: leicht gerundet (8px), 2px --accent-Rand, Anton
   in Großbuchstaben OHNE Schrägstellung (Buttons sind von der Headline-
   Schrägstellung ausgenommen), Text mittig, kein Pfeil. Grundwerte = mobil
   (kompakt); ab 768px größer, siehe unten.
   Ghost-Variante (Standard): transparent, der Hero scheint durch; Hover
   (Desktop) / Tap füllt in --accent, Text --primary. Hauptbutton
   (.ghost-btn--primary): dauerhaft gefüllt. Übergänge laufen über
   --transition-hover, das unter prefers-reduced-motion 0s ist.
   -------------------------------------------------------------------------- */
.ghost-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--accent);
  border-radius: 8px;
  background-color: transparent;
  color: var(--text-light);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--letter-spacing-badge);
  /* Gleicht den Nachlauf-Buchstabenabstand nach dem letzten Zeichen aus,
     damit der Text optisch wirklich mittig sitzt. */
  text-indent: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--transition-hover),
    background-color var(--transition-hover),
    border-color var(--transition-hover),
    box-shadow var(--transition-hover);
}

@media (hover: hover) and (pointer: fine) {
  .ghost-btn:hover {
    background-color: var(--accent);
    color: var(--primary);
  }
}

.ghost-btn:active {
  background-color: var(--accent);
  color: var(--primary);
}

.ghost-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Hauptbutton ("Jetzt voranmelden"): dauerhaft in --accent gefüllt, Text
   --primary — auf allen Geräten gleich, nicht nur beim Hover. Hover/Tap:
   leicht dunkleres Gelb (--accent-hover). */
.ghost-btn--primary {
  background-color: var(--accent);
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .ghost-btn--primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}

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

/* Ab Tablet/Desktop: größer und nebeneinander statt untereinander. */
@media (min-width: 768px) {
  .hero-section__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .ghost-btn {
    min-height: 56px;
    padding: var(--space-3) var(--space-8);
    font-size: 20px;
  }
}

.scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 40px;
  background-color: var(--accent);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  opacity: 0;
  animation: scroll-hint-loop 2.6s ease-in-out infinite;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STUFE-1-VORSCHAU: identisch zu hero-enter, nur mit dem Skew der Headline
   in beiden Keyframes mitgeführt, damit er nach Animationsende erhalten
   bleibt (siehe Kommentar bei .hero-section__title). */
@keyframes hero-enter-title {
  from {
    opacity: 0;
    transform: translateY(12px) skewX(-8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(-8deg);
  }
}

@keyframes scroll-hint-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  40%, 70% {
    opacity: 0.3;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(1);
  }
}

/* --------------------------------------------------------------------------
   Vertrauen (#vertrauen)
   --------------------------------------------------------------------------
   Beantwortet "Kann ich denen vertrauen?" ausschließlich mit Zahlen — bewusst
   ohne Sektionsüberschrift, die Kennzahlen sind die Überschrift. Der Hero
   davor grenzt direkt an, ohne zusätzlichen Rand.
   -------------------------------------------------------------------------- */
.trust {
  background-color: var(--background-light);
  padding-block: var(--space-12);
}

.trust__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- Kennzahlen ------------------------------------------------------- */
.trust-stats {
  display: flex;
  flex-direction: column;
}

.trust-stat {
  position: relative;
  padding-block: var(--space-6);
  text-align: center;
}

/* Gestrichelte Trennlinie zwischen den Kennzahlen, wie eine
   Fahrbahnmarkierung — 2px breit, 8px Strich, 8px Lücke, 50% Deckkraft.
   repeating-linear-gradient statt border-style: dashed, weil dessen
   Strich-/Lückenlänge sich nicht exakt vorgeben lässt. Auf Mobile
   waagerecht am oberen Rand jeder Kennzahl außer der ersten, auf Desktop
   senkrecht am linken Rand. */
.trust-stat:not(:first-child)::before {
  content: "";
  position: absolute;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 50%, transparent) 0 8px,
    transparent 8px 16px
  );
  top: 0;
  left: 20%;
  width: 60%;
  height: 2px;
}

.trust-stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-stat);
  line-height: var(--line-height-tight);
  color: var(--text-dark);
}

.trust-stat__label {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-loose);
  text-transform: uppercase;
  /* 68% statt 60%: 4,41:1 verfehlte WCAG AA für normalen Text (4,5:1) knapp. */
  color: color-mix(in srgb, var(--text-dark) 68%, transparent);
}

/* Die Flaggen sind die dritte Kennzahl — kein Zahlenwert, deshalb kein
   .trust-stat__number darin. font-size skaliert sie auf die optische
   Höhe der Zahlen daneben, statt in nativer Emoji-Größe zu wirken. */
.trust-stat__flags {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: calc(var(--font-size-stat) * 0.6);
  line-height: 1;
}

.trust-stat__flag {
  display: inline-block;
}

/* --- Bewertungs-Karte (#vertrauen) -------------------------------------
   Helle Karte mit gelbem Rahmen wie die Klassen-Karten: Sterne, Note,
   Unterzeile, Flaggen. Die Karte selbst ist das Element mit clip-path (vier
   gefaste Ecken, Fase = --badge-notch) — ein drop-shadow am selben Element
   würde mitgeclippt, deshalb hängt der gelbe Schein am äußeren .rating.
   Zwei-Ebenen-Rand: die Karte ist --accent (= 3px Rahmen), ::before liegt
   3px eingerückt darüber in Weiß mit derselben Fasenform (Innenfase =
   Außenfase minus 0,586 x Rand).

   Die älteren .trust-stat*-Regeln gehören theorie.html/ueber-uns.html und
   bleiben unverändert. */
.rating {
  display: block;
  max-width: 520px;
  margin-inline: auto;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* Gelber Schein wie bei .classes__item (Klassen-Karten): am Wrapper, weil
     der clip-path der Karte einen box-shadow wegschneiden würde. */
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 26%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 13%, transparent));
}

/* Die Karte ist ein Link (alle Bewertungen bei ClickClickDrive), sieht aber
   bewusst aus wie eine ruhige Karte: kein Unterstreichen, kein Hover-Effekt,
   kein Tap-Highlight, kein Hinweistext. Nur der Tastatur-Fokus bekommt einen
   sichtbaren Rahmen (Barrierefreiheit): der Rand der Karte wird gelb und
   dicker — outline/box-shadow würde der clip-path abschneiden. */
.rating:focus-visible {
  outline: none;
}

.rating:focus-visible .rating__body {
  --rating-rim: 6px;
}

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

.rating__body {
  --rating-cut: var(--badge-notch);
  --rating-rim: 3px;
  --rating-cut-in: calc(var(--rating-cut) - 0.586 * var(--rating-rim));
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(3px + var(--space-8)) calc(3px + var(--space-6));
  background-color: var(--accent);
  text-align: center;
  clip-path: polygon(
    var(--rating-cut) 0,
    calc(100% - var(--rating-cut)) 0,
    100% var(--rating-cut),
    100% calc(100% - var(--rating-cut)),
    calc(100% - var(--rating-cut)) 100%,
    var(--rating-cut) 100%,
    0 calc(100% - var(--rating-cut)),
    0 var(--rating-cut)
  );
}

.rating__body::before {
  content: "";
  position: absolute;
  inset: var(--rating-rim);
  background-color: var(--text-light);
  clip-path: polygon(
    var(--rating-cut-in) 0,
    calc(100% - var(--rating-cut-in)) 0,
    100% var(--rating-cut-in),
    100% calc(100% - var(--rating-cut-in)),
    calc(100% - var(--rating-cut-in)) 100%,
    var(--rating-cut-in) 100%,
    0 calc(100% - var(--rating-cut-in)),
    0 var(--rating-cut-in)
  );
}

.rating__body > * {
  position: relative;
}

.rating__stars {
  display: block;
  width: 174px;
  height: 30px;
}

.rating__star {
  fill: var(--accent);
}

.rating__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: var(--space-3);
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--text-dark);
}

.rating__num {
  font-size: 56px;
}

.rating__count {
  font-size: calc(56px * 0.45);
  letter-spacing: var(--letter-spacing-display);
}

.rating__sub {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--text-muted);
}

.rating__langs {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-loose);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Flaggen-Emojis wie zuvor auf der Startseite, gleiche Reihenfolge; in der
   Breite darf die Reihe zentriert auf zwei Zeilen umbrechen. */
.rating__flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 30px;
  line-height: 1;
}

/* Auf ganz schmalen Displays (≤ 359px) in zwei gleich lange Zeilen (3 + 3)
   umbrechen statt 5 + 1. */
@media (max-width: 359px) {
  .rating__flags {
    max-width: 5.4em;
  }
}

/* Sterne und Zahlen zählen beim ersten Sichtbarwerden hoch (initRatingCounter).
   Zwei Sternebenen: unten die leeren Sterne (--accent mit 25 % Deckkraft), darüber
   die vollen, je per clipPath abgeschnitten — JS setzt die Breite des
   Ausschnitts (Teilfüllung von links nach rechts). Im Markup steht der Endwert
   (alle Sterne voll, 5,0, 1200), ohne JavaScript oder bei reduzierter Bewegung
   bleibt es dabei. */
.rating__star--empty {
  fill: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Feste Breite der zählenden Zahlen: ein unsichtbarer Endwert (data-final,
   per ::after in dieselbe Grid-Zelle gelegt) bestimmt die Breite, die
   sichtbare Ziffernfolge steht rechtsbündig darin. So ändert sich die
   Kartengröße beim Hochzählen nicht und das "+" bleibt an seinem Platz. */
.rating__score {
  font-variant-numeric: tabular-nums;
}

.rating__num,
.rating__count-num {
  display: inline-grid;
  text-align: end;
}

.rating__num::after,
.rating__count-num::after,
.rating__live {
  grid-area: 1 / 1;
}

.rating__num::after,
.rating__count-num::after {
  content: attr(data-final);
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Bewertungen (#bewertungen) — laufende Spalten
   --------------------------------------------------------------------------
   Hell wie #vertrauen darüber (der Abstand nach oben kommt aus dessen
   padding-bottom, deshalb hier nur unten Padding). Die Karten sind die
   bestehenden .testimonial-Karten (design-tokens.css), hier nur in <figure>.

   OHNE JavaScript (oder mit prefers-reduced-motion) bleibt .reviews__list ein
   normales Raster: 1 / 2 / 3 Spalten, natürliche Höhe, keine Bewegung. Erst
   unter html.js und ohne reduzierte Bewegung baut initReviewColumns() daraus
   senkrecht laufende Spalten — feste Höhe, Maske, Animation gelten nur dort.
   -------------------------------------------------------------------------- */
.reviews {
  background-color: var(--background-light);
  padding-bottom: var(--space-20);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.reviews__heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--font-size-section-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--text-dark);
}

.reviews__sub {
  max-width: 48ch;
  margin: 0 0 var(--space-12);
  text-align: center;
  color: var(--text-muted);
  line-height: 1.5;
}

.reviews__viewport {
  width: 100%;
}

.reviews__list,
.reviews__col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.reviews__list > li {
  display: grid;
}

/* <figure> bringt Browser-Ränder mit; die Karte selbst kommt unverändert aus
   .testimonial. height: 100% lässt Karten nebeneinander gleich hoch werden. */
.reviews figure.testimonial {
  margin: 0;
}

/* --- Laufende Spalten (nur mit JS und ohne reduzierte Bewegung) --------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reviews__viewport {
    /* 16px Luft links/rechts für den gelben Schein; der negative Rand holt
       sie aus dem Padding von .reviews__inner zurück (Karten bleiben gleich
       breit). */
    box-sizing: border-box;
    width: calc(100% + 2 * var(--space-4));
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    height: 640px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  }

  @media (min-width: 1024px) {
    .js .reviews__viewport {
      height: 720px;
    }
  }
}

.reviews__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

/* Jede Spalte wird vom Skript (initReviewColumns) per transform nach oben
   geschoben und springt nach genau ihrer halben Höhe unsichtbar zurück: die
   zweite Hälfte ist eine exakte Kopie der ersten. padding-bottom statt nur
   gap sorgt dafür, dass die Hälften gleich hoch sind. touch-action: none
   überlässt das senkrechte Wischen dem Skript (die Spalte folgt dem Finger)
   statt die Seite zu scrollen. */
.reviews__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding-bottom: var(--space-6);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}

.reviews__col > li {
  display: grid;
}

/* Gelber Schein hinter jeder Karte, wie bei den Klassen-Karten: der Schatten
   hängt am <li>, NICHT an der Karte — deren clip-path schneidet box-shadow
   restlos weg, drop-shadow arbeitet dagegen auf der bereits geclippten
   Silhouette. Bewusst dezent: halbe Stärke (Deckkraft und Radius) der
   ersten Fassung. */
.reviews__list > li,
.reviews__col > li {
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 28%, transparent))
    drop-shadow(0 0 13px color-mix(in srgb, var(--accent) 19%, transparent));
}

/* --------------------------------------------------------------------------
   Klassen-Übersicht (#klassen)
   --------------------------------------------------------------------------
   Beantwortet "welcher Führerschein ist überhaupt für mich?" als reine
   Übersicht mit Links — die Details folgen auf eigenen Unterseiten.
   -------------------------------------------------------------------------- */
.classes {
  background-color: var(--primary);
  padding-block: var(--space-20);
}

.classes__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Fest zweizeilig (<br> im Markup) statt natürlichem Umbruch über ein
   Leerzeichen — auf breiten Screens hätte "Welchen Führerschein willst
   du?" sonst in eine Zeile gepasst, hier soll die Zeilenaufteilung aber
   nicht vom Viewport abhängen. */
.classes__heading {
  margin: 0 0 var(--space-12);
  font-family: var(--font-display);
  font-size: var(--font-size-section-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-light);
}

.classes__heading-accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Klassen-Karussell (#klassen)
   --------------------------------------------------------------------------
   Track = horizontaler Scroll-Container mit scroll-snap. Seitlich bündig bis
   zum Rand des .classes__inner-Paddings (negativer Rand, gleich großes
   Padding), damit die nächste Karte mobil rechts aus dem Bild ragt und der
   Rand nicht abschneidet. Oben/unten Luft im Padding: overflow-x: auto macht
   overflow-y zwangsläufig ebenfalls zum Scroll-Container, der Glow
   (drop-shadow bis ca. 22px) würde sonst an der Trackkante abgeschnitten.

   Ohne JavaScript bleibt die native Scrollleiste sichtbar (nur unter html.js
   ausgeblendet), sonst kämen Maus-Nutzer nicht an Karte 3 und 4.
   -------------------------------------------------------------------------- */
.classes__carousel {
  --carousel-gap: var(--space-4);
  --carousel-pad: var(--space-4);
  /* Kartenbreite (siehe flex-basis unten) — die Pfeile brauchen sie, um mittig
     auf der Bildfläche (16:10) zu sitzen statt mittig auf der ganzen Karte.
     100cqw = Breite dieses Containers = Content-Breite des Tracks. */
  container-type: inline-size;
  --card-w: calc((100cqw - var(--carousel-gap)) / 2.2);
}

.classes__viewport {
  position: relative;
}

.classes__track {
  position: relative;
  display: flex;
  gap: var(--carousel-gap);
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--carousel-pad));
  padding: var(--space-8) var(--carousel-pad);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-pad);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.js .classes__track {
  scrollbar-width: none;
}

.js .classes__track::-webkit-scrollbar {
  display: none;
}

/* Fokus: --focus-ring liegt außen und würde am Viewport-Rand abgeschnitten.
   Gleicher Doppelring, nach innen gelegt (Track-Padding bietet den Platz). */
.classes__track:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--primary),
    inset 0 0 0 6px var(--accent);
}

/* Handy: 85 % der Trackbreite, die nächste Karte schaut heraus. */
.classes__item {
  flex: 0 0 85%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  /* Der gelbe Glow hängt hier am Elternelement und NICHT an .class-card:
     deren clip-path schneidet box-shadow restlos weg. filter: drop-shadow
     arbeitet dagegen auf der bereits geclippten Silhouette des Kindes und
     folgt ihr exakt. Zwei gestaffelte Schatten (eng/kräftig + weit/schwach)
     ergeben die weiche Aura statt einer harten Neon-Kante. */
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 26%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 13%, transparent));
}

/* --------------------------------------------------------------------------
   .class-card — Klassen-Karte: Foto als volle Fläche oben, darunter heller
   Infobereich. Form: Rechteck mit vier gefasten Ecken, Fase = --badge-notch
   (wie .location-card). Zwei-Ebenen-Technik: die äußere Karte ist voll
   --accent (= gelber Rahmen), __inner liegt --cc-pad eingerückt darüber und
   trägt dieselbe Fasenform — border + clip-path funktionieren an einer
   Schräge nicht zusammen. Die Fase der Innenfläche schrumpft um 0,586 x Rand
   (senkrechte Versetzung einer 45°-Schräge), damit der Rahmen auch an den
   Ecken gleich breit bleibt.
   -------------------------------------------------------------------------- */
.class-card {
  --cc-cut: var(--badge-notch);
  --cc-pad: 3px;
  --cc-cut-in: calc(var(--cc-cut) - 0.586 * var(--cc-pad));
  box-sizing: border-box;
  display: flex;
  padding: var(--cc-pad);
  background-color: var(--accent);
  text-decoration: none;
  clip-path: polygon(
    var(--cc-cut) 0,
    calc(100% - var(--cc-cut)) 0,
    100% var(--cc-cut),
    100% calc(100% - var(--cc-cut)),
    calc(100% - var(--cc-cut)) 100%,
    var(--cc-cut) 100%,
    0 calc(100% - var(--cc-cut)),
    0 var(--cc-cut)
  );
  transition:
    transform var(--transition-hover),
    padding var(--transition-hover);
}

.class-card__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  background-color: var(--background-light);
  clip-path: polygon(
    var(--cc-cut-in) 0,
    calc(100% - var(--cc-cut-in)) 0,
    100% var(--cc-cut-in),
    100% calc(100% - var(--cc-cut-in)),
    calc(100% - var(--cc-cut-in)) 100%,
    var(--cc-cut-in) 100%,
    0 calc(100% - var(--cc-cut-in)),
    0 var(--cc-cut-in)
  );
}

/* Bildfläche 16:10. Wand oben etwas heller als der Boden, damit der Boden
   "dunkler" wirkt, ohne eine neue Farbe zu brauchen — --primary ist bereits
   das dunkelste Token, der Schatten unter dem Fahrzeug (::before) ist
   deshalb reines --primary, der Boden liegt eine Spur darüber. Dahinter der
   weiche gelbe Lichtschein in der Mitte. */
.class-card__stage {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--primary);
  background-image:
    radial-gradient(
      ellipse 62% 58% at 50% 50%,
      color-mix(in srgb, var(--accent) 26%, transparent),
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--text-light) 10%, var(--primary)) 0%,
      color-mix(in srgb, var(--text-light) 8%, var(--primary)) 62%,
      color-mix(in srgb, var(--text-light) 3%, var(--primary)) 62%,
      color-mix(in srgb, var(--text-light) 3%, var(--primary)) 100%
    );
}

.class-card__stage::before {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 7%;
  left: 12%;
  height: 12%;
  background-image: radial-gradient(closest-side, var(--primary), transparent);
}

/* Das Flex-Kind der Bühne ist <picture>, nicht <img> — eine Prozent-Höhe am
   Bild würde gegen die inhaltsabhängige <picture>-Höhe auflösen und
   wirkungslos bleiben. <picture> liegt deshalb absolut auf der Bühne, das
   Bild füllt es, object-fit: contain übernimmt die Einpassung. */
.class-card__stage picture {
  position: absolute;
  z-index: 1;
  inset: 8% 7% 9%;
}

.class-card__vehicle {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.class-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.class-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hexagon-Badge: gelbe Fläche, dunkler Anton-Buchstabe. */
.class-card__letter {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: var(--space-10);
  padding: var(--space-1) var(--space-6);
  background-color: var(--accent);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  clip-path: polygon(
    0 50%,
    var(--badge-notch) 0,
    calc(100% - var(--badge-notch)) 0,
    100% 50%,
    calc(100% - var(--badge-notch)) 100%,
    var(--badge-notch) 100%
  );
}

.class-card__heading {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--text-dark);
}

.class-card__ages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Alters-Badge: helle Füllung, gelber Rand, dunkle Schrift, schräge Ecken.
   border + clip-path funktionieren nicht zusammen (der Rand folgt dem Schnitt
   nicht), deshalb die Zwei-Ebenen-Technik: beide Ebenen liegen auf
   z-index -1 zwischen Elementhintergrund und Inline-Text. ::after (helle
   Füllung) zeichnet nach ::before (gelbe Fläche) und lässt davon genau 2px
   als Rahmen stehen — auf hellem Grund braucht der gelbe Rand mehr Breite
   als die früheren 1px auf Schwarz, um zu tragen. isolation: isolate hält das
   negative z-index innerhalb des Badges. */
.class-card__age {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-loose);
  text-transform: uppercase;
}

.class-card__age::before,
.class-card__age::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.class-card__age::before {
  inset: 0;
  background-color: var(--accent);
}

.class-card__age::after {
  inset: 2px;
  background-color: var(--background-light);
}

.class-card__divider {
  flex: none;
  height: 1px;
  margin-inline: var(--space-4);
  background-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

.class-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.class-card__icon {
  width: 26px;
  height: 26px;
  color: var(--text-dark);
  flex-shrink: 0;
}

.class-card__cta {
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  color: var(--text-dark);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .class-card:hover {
    --cc-pad: 5px;
    transform: translateY(-4px);
  }

  .class-card:hover .class-card__cta {
    text-decoration: underline;
  }
}

.class-card:active {
  --cc-pad: 5px;
  transform: translateY(-2px);
}

/* clip-path schneidet outline weg — der gelbe Rahmen selbst wird als
   Fokus-Indikator dicker, indem die Innenfläche weiter einrückt. */
.class-card:focus-visible {
  --cc-pad: 8px;
  outline: none;
}

/* --- Pfeile (per JS eingefügt) -------------------------------------------
   Signage-Form: Fünfeck mit Spitze in Laufrichtung, Zwei-Ebenen-Rahmen
   (--accent außen, --primary innen). Nur mit Maus sinnvoll — auf Touch-
   Geräten wischt man, dort sind sie ausgeblendet. */
.carousel-arrow {
  --arrow-notch: 14px;
  position: absolute;
  top: 50%;
  top: calc(var(--card-w) * 0.3125);
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin: calc(var(--tap-target) / -2) 0 0;
  padding: 0;
  border: 0;
  background-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.carousel-arrow--prev {
  left: calc(-1 * var(--carousel-pad));
  clip-path: polygon(0 50%, var(--arrow-notch) 0, 100% 0, 100% 100%, var(--arrow-notch) 100%);
}

.carousel-arrow--next {
  right: calc(-1 * var(--carousel-pad));
  clip-path: polygon(0 0, calc(100% - var(--arrow-notch)) 0, 100% 50%, calc(100% - var(--arrow-notch)) 100%, 0 100%);
}

.carousel-arrow::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: var(--primary);
  transition: inset var(--transition-hover), background-color var(--transition-hover);
}

.carousel-arrow--prev::before {
  clip-path: polygon(0 50%, var(--arrow-notch) 0, 100% 0, 100% 100%, var(--arrow-notch) 100%);
}

.carousel-arrow--next::before {
  clip-path: polygon(0 0, calc(100% - var(--arrow-notch)) 0, 100% 50%, calc(100% - var(--arrow-notch)) 100%, 0 100%);
}

.carousel-arrow svg {
  position: relative;
  width: 20px;
  height: 20px;
}

.carousel-arrow.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:hover::before {
    background-color: var(--accent);
  }

  .carousel-arrow:hover {
    color: var(--primary);
  }
}

.carousel-arrow:focus-visible {
  outline: none;
}

.carousel-arrow:focus-visible::before {
  inset: 5px;
}

@media (hover: none) {
  .carousel-arrow {
    display: none;
  }
}

/* --- Punkte (per JS eingefügt): Rauten statt Kreise ---------------------- */
.classes__dots {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

.classes__dot {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.classes__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background-color: color-mix(in srgb, var(--text-light) 30%, transparent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: width var(--transition-base), height var(--transition-base), background-color var(--transition-base);
}

.classes__dot[aria-current="true"]::before {
  width: 14px;
  height: 14px;
  background-color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .classes__dot:hover::before {
    background-color: var(--accent);
  }
}

.classes__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
}


/* --------------------------------------------------------------------------
   Schimmer (.shine) — wiederverwendbarer Baustein
   --------------------------------------------------------------------------
   Jede Sektion bekommt ihren eigenen Lichtschein, passend zur Sektionsfarbe,
   die Kanten zwischen den Sektionen bleiben hart. Zwei Varianten:
     .shine--gold    dunkle Sektionen: gelbe Lichtbänder (--accent/--accent-hover,
                     geringe Deckkraft), wandern langsam (60 s) per transform,
                     nur solange die Sektion sichtbar ist (initAurora, .is-inview)
     .shine--silver  helle Sektionen: silberner Glanz wie ein Lichtreflex auf
                     Lack, STATISCH
   Ecke: .shine--tr / --tl / --bl / --br; sie wechselt von Sektion zu Sektion.

   Aufbau (kein Extra-Markup): ::before = Lichtebene (Gold: breite Ebene, die
   wandert; Silber: statische Verläufe), ::after = statisches Overlay in der
   Sektionsfarbe (--shine-bg), das den Schimmer zu ALLEN vier Kanten und zur
   gegenüberliegenden Ecke hin weich auslaufen lässt — nie an der Kante
   abgeschnitten. Beide liegen mit z-index -1 unter dem Inhalt
   (isolation: isolate hält das in der Sektion). Overlay statt mask-image und
   Bewegung nur per transform: stabil und schnell auf iOS. Kein Blur-Filter,
   kein mix-blend-mode, kein background-attachment: fixed. */
.shine {
  --shine-edge: clamp(48px, 10vw, 96px);
  --shine-edge-t: var(--shine-edge);
  --shine-edge-b: var(--shine-edge);
  --shine-rx: min(120vw, 1300px);
  --shine-ry: min(150vw, 760px);
  --shine-at: 100% 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

@supports (overflow: clip) {
  /* Nur horizontal beschneiden (die wandernde Ebene ist breiter als die
     Sektion), vertikal bleibt alles wie vorher. */
  .shine {
    overflow: visible;
    overflow-x: clip;
  }
}

.shine::before,
.shine::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.shine::after {
  inset: 0;
  /* Auslauf mit geglättetem Profil (mehr Zwischenstopps) statt linearer
     Rampe, damit an keiner Stelle eine Stufe oder ein Knick sichtbar wird. */
  background-image:
    linear-gradient(to bottom, var(--shine-fade-t, var(--shine-bg)) 0, color-mix(in srgb, var(--shine-fade-t, var(--shine-bg)) 90%, transparent) calc(min(var(--shine-edge-t), 30%) * 0.2), color-mix(in srgb, var(--shine-fade-t, var(--shine-bg)) 65%, transparent) calc(min(var(--shine-edge-t), 30%) * 0.4), color-mix(in srgb, var(--shine-fade-t, var(--shine-bg)) 35%, transparent) calc(min(var(--shine-edge-t), 30%) * 0.6), color-mix(in srgb, var(--shine-fade-t, var(--shine-bg)) 10%, transparent) calc(min(var(--shine-edge-t), 30%) * 0.8), transparent min(var(--shine-edge-t), 30%)),
    linear-gradient(to top, var(--shine-fade-b, var(--shine-bg)) 0, color-mix(in srgb, var(--shine-fade-b, var(--shine-bg)) 90%, transparent) calc(min(var(--shine-edge-b), 30%) * 0.2), color-mix(in srgb, var(--shine-fade-b, var(--shine-bg)) 65%, transparent) calc(min(var(--shine-edge-b), 30%) * 0.4), color-mix(in srgb, var(--shine-fade-b, var(--shine-bg)) 35%, transparent) calc(min(var(--shine-edge-b), 30%) * 0.6), color-mix(in srgb, var(--shine-fade-b, var(--shine-bg)) 10%, transparent) calc(min(var(--shine-edge-b), 30%) * 0.8), transparent min(var(--shine-edge-b), 30%)),
    linear-gradient(to right, var(--shine-bg) 0, color-mix(in srgb, var(--shine-bg) 90%, transparent) calc(min(var(--shine-edge), 30%) * 0.2), color-mix(in srgb, var(--shine-bg) 65%, transparent) calc(min(var(--shine-edge), 30%) * 0.4), color-mix(in srgb, var(--shine-bg) 35%, transparent) calc(min(var(--shine-edge), 30%) * 0.6), color-mix(in srgb, var(--shine-bg) 10%, transparent) calc(min(var(--shine-edge), 30%) * 0.8), transparent min(var(--shine-edge), 30%)),
    linear-gradient(to left, var(--shine-bg) 0, color-mix(in srgb, var(--shine-bg) 90%, transparent) calc(min(var(--shine-edge), 30%) * 0.2), color-mix(in srgb, var(--shine-bg) 65%, transparent) calc(min(var(--shine-edge), 30%) * 0.4), color-mix(in srgb, var(--shine-bg) 35%, transparent) calc(min(var(--shine-edge), 30%) * 0.6), color-mix(in srgb, var(--shine-bg) 10%, transparent) calc(min(var(--shine-edge), 30%) * 0.8), transparent min(var(--shine-edge), 30%)),
    radial-gradient(ellipse var(--shine-rx) var(--shine-ry) at var(--shine-at), transparent 38%, color-mix(in srgb, var(--shine-bg) 8%, transparent) 46%, color-mix(in srgb, var(--shine-bg) 25%, transparent) 54%, color-mix(in srgb, var(--shine-bg) 50%, transparent) 64%, color-mix(in srgb, var(--shine-bg) 75%, transparent) 76%, color-mix(in srgb, var(--shine-bg) 92%, transparent) 88%, var(--shine-bg) 100%),
    radial-gradient(ellipse calc(var(--shine-rx) * 0.55) calc(var(--shine-ry) * 0.6) at var(--shine-at), var(--shine-glow, transparent), transparent 70%);
}

/* Nahtlos in die Nachbarsektion: an dieser Kante kein Auslauf, der Schimmer
   läuft in die angrenzende Sektion (gleiche Farbe) weiter. */
/* 2 px Überlappung nach oben schließen die Teilpixel-Naht zwischen den
   Sektionen (die letzte Zeile der oberen wird sonst nur teilweise gemalt). */
.shine--join-t { --shine-edge-t: 0px; --shine-fade-t: transparent; margin-top: -2px; }
.shine--join-b { --shine-edge-b: 0px; --shine-fade-b: transparent; }

.shine--tr { --shine-at: 100% 0; }
.shine--tl { --shine-at: 0 0; }
.shine--bl { --shine-at: 0 100%; }
.shine--br { --shine-at: 100% 100%; }

/* Gold: gelbe Bänder auf dunklem Grund */
.shine--gold {
  --shine-bg: var(--primary);
  --shine-period: 560px;
  /* Verschiebung um genau eine Periode bei 100deg-Streifen: Periode / cos(10deg). */
  --shine-shift: calc(var(--shine-period) * 1.0154);
  /* --shine-strength skaliert die Deckkraft: Grundstärke 1, .shine--strong
     1,35 (ab 768 px, wo kein Text davorsteht), .shine--soft 0,5 dort, wo
     Text darüber den Kontrast von 4,5:1 sonst unterschreiten würde. */
  --shine-strength: 1;
  --shine-a: color-mix(in srgb, var(--accent) calc(38% * var(--shine-strength)), transparent);
  --shine-b: color-mix(in srgb, var(--accent-hover) calc(26% * var(--shine-strength)), transparent);
  --shine-c: color-mix(in srgb, color-mix(in srgb, var(--accent) 30%, var(--text-light)) calc(22% * var(--shine-strength)), transparent);
  --shine-glow: color-mix(in srgb, var(--accent) calc(28% * var(--shine-strength)), transparent);
}

/* Kräftiger (ab Tablet-Breite): dort, wo der Text links steht und die Ecke
   rechts frei bleibt. Auf dem Handy läuft der Text über die volle Breite,
   dort bleibt es bei der Grundstärke. */
@media (min-width: 768px) {
  .shine--gold.shine--strong {
    --shine-strength: 1.35;
  }
}

/* Sanfter: weniger Deckkraft dort, wo Text über dem Schimmer steht. */
.shine--gold.shine--soft {
  --shine-strength: 0.5;
}

.shine--gold::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--shine-shift));
  /* --shine-phase (von initAurora gesetzt) verschiebt das Muster, damit die
     Streifen an der Naht zweier angrenzender Sektionen zusammenpassen. */
  background-image: repeating-linear-gradient(
    100deg,
    transparent calc(0px - var(--shine-phase, 0px)),
    var(--shine-a) calc(75px - var(--shine-phase, 0px)),
    transparent calc(170px - var(--shine-phase, 0px)),
    transparent calc(215px - var(--shine-phase, 0px)),
    var(--shine-b) calc(290px - var(--shine-phase, 0px)),
    transparent calc(365px - var(--shine-phase, 0px)),
    transparent calc(400px - var(--shine-phase, 0px)),
    var(--shine-c) calc(455px - var(--shine-phase, 0px)),
    transparent calc(515px - var(--shine-phase, 0px)),
    transparent calc(var(--shine-period) - var(--shine-phase, 0px))
  );
}

/* Silber: statischer Glanz auf hellem Grund, sehr dezent. Nur ein leichter
   Grauschleier und ein heller Streifen in der Ecke, nie hinter Fließtext. */
.shine--silver {
  --shine-bg: var(--background-light);
  --shine-silver-period: 760px;
  --shine-rx: min(70vw, 640px);
  --shine-ry: min(90vw, 420px);
}

.shine--silver::before {
  inset: 0;
  background-image:
    repeating-linear-gradient(100deg,
      transparent calc(0px - var(--shine-phase, 0px)),
      color-mix(in srgb, var(--text-light) 95%, transparent) calc(110px - var(--shine-phase, 0px)),
      transparent calc(230px - var(--shine-phase, 0px)),
      color-mix(in srgb, var(--text-dark) 2.5%, transparent) calc(330px - var(--shine-phase, 0px)),
      transparent calc(430px - var(--shine-phase, 0px)),
      color-mix(in srgb, var(--text-light) 70%, transparent) calc(540px - var(--shine-phase, 0px)),
      transparent calc(var(--shine-silver-period) - var(--shine-phase, 0px))),
    radial-gradient(ellipse var(--shine-rx) var(--shine-ry) at var(--shine-at), color-mix(in srgb, var(--text-dark) 1.5%, transparent), transparent 75%);
}

/* Bewegung nur gelb und nur bei erlaubter Bewegung, nur im sichtbaren
   Bereich (initAurora setzt .is-inview, höchstens zwei gleichzeitig). */
@media (prefers-reduced-motion: no-preference) {
  .shine--gold::before {
    animation: shine-drift 60s linear infinite;
    animation-play-state: paused;
  }

  .shine--gold.is-inview::before {
    will-change: transform;
    animation-play-state: running;
  }
}

@keyframes shine-drift {
  to {
    transform: translate3d(calc(var(--shine-shift) * -1), 0, 0);
  }
}

/* --------------------------------------------------------------------------
   Abgerundete Sektionsecken (.round-t / .round-b)
   --------------------------------------------------------------------------
   Dunkle Sektionen bekommen dort abgerundete Ecken, wo sie an eine helle
   Fläche grenzen (oben = .round-t, unten = .round-b); ganz oben unter der Kopfleiste
   bleibt der Hero bzw. Seitenkopf glatt. Radius bewusst klein (kein
   Halbkreis). Den Zwickel hinter der Rundung füllt ein Box-Shadow in
   der Farbe der Nachbarfläche (--wedge-above / --wedge-below), darum liegt
   die Sektion mit z-index 1 über ihren Nachbarn. Kein Layout-Versatz. */
:root {
  --section-radius: 24px;
}

@media (min-width: 768px) {
  :root {
    --section-radius: 40px;
  }
}

.round-t,
.round-b {
  /* overflow: clip beschneidet auch die wandernden Lichtebenen an der
     Rundung (ohne das füllen sie die Ecken wieder eckig). */
  overflow: clip;
  position: relative;
  box-shadow:
    0 calc(var(--section-radius) * -1) 0 0 var(--wedge-t, transparent),
    0 var(--section-radius) 0 0 var(--wedge-b, transparent);
}

.round-t {
  --wedge-t: var(--wedge-above, var(--text-light));
  border-top-left-radius: var(--section-radius);
  border-top-right-radius: var(--section-radius);
}

/* Nur unten muss die Sektion über ihren Nachbarn liegen (ihr Zwickel-Schatten
   reicht in die folgende Sektion). Oben genügt die Reihenfolge im Dokument —
   so liegt eine nahtlos anschließende Sektion über der Naht der vorigen. */
.round-b {
  z-index: 1;
  --wedge-b: var(--wedge-below, var(--text-light));
  border-bottom-left-radius: var(--section-radius);
  border-bottom-right-radius: var(--section-radius);
}

/* Startseite: die hellen Sektionen sind --background-light statt Weiß. */
#hero { --wedge-below: var(--background-light); }
#klassen, #kontakt, .ablauf__head { --wedge-above: var(--background-light); --wedge-below: var(--background-light); }

/* --------------------------------------------------------------------------
   Ablauf (#ablauf)
   --------------------------------------------------------------------------
   Beantwortet "wie läuft das ab, wie lange dauert es?" in vier nummerierten
   Schritten. Nach der dunklen Klassen-Sektion wieder hell — wechselnder
   Rhythmus der Seite. Der Kopf (.ablauf__head) ist ein dunkler Signage-Block
   mit Gold-Schimmer (.shine, siehe oben); die Schritte darunter stehen auf
   hellem Grund.
   -------------------------------------------------------------------------- */
.ablauf {
  background-color: var(--background-light);
  padding-block: 0 var(--space-20);
}

.ablauf__head {
  display: flex;
  align-items: center;
  min-height: 380px;
  margin-bottom: var(--space-16);
  padding-block: var(--space-12);
  background-color: var(--primary);
}

.ablauf__head-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.ablauf__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.ablauf__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-section-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-align: left;
  color: var(--text-light);
}

.ablauf__heading-line,
.ablauf__heading-accent {
  display: block;
  width: fit-content;
}

.ablauf__heading-accent {
  color: var(--accent);
}

.ablauf__bar {
  display: block;
  width: 48px;
  height: 4px;
  margin-top: var(--space-6);
  background-color: var(--accent);
}

.ablauf__lead {
  max-width: 46ch;
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-light) 85%, transparent);
}

/* Bewegung nur bei erlaubter Bewegung: die Überschrift blendet einmalig ein. Ohne JavaScript (kein
   html.js) ist die Überschrift sofort da. Die Verschiebung läuft über die
   einzelne Eigenschaft translate, damit der Skew (transform) unangetastet
   bleibt. */
@media (prefers-reduced-motion: no-preference) {
  html.js .ablauf__heading {
    opacity: 0;
    translate: 0 40px;
    transition: opacity 800ms ease-out 300ms, translate 800ms ease-out 300ms;
  }

  html.js .ablauf__heading.is-revealed {
    opacity: 1;
    translate: 0 0;
  }
}


.ablauf-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Verbindungslinie läuft hinter den Nummern-Badges (z-index 0, die
   Badges selbst tragen z-index 1). Auf Mobile ist die exakte Mitte von
   Schritt 1 und Schritt 4 nicht allein aus CSS berechenbar — anders als bei
   vier gleich BREITEN Desktop-Spalten haben gestapelte Schritte
   unterschiedliche HÖHE (je nach Zeilenumbruch der Beschreibung), und CSS
   kennt die Höhe eines Geschwister-Elements nicht. initAblaufLine() in
   script.js misst deshalb die tatsächliche Position der ersten und letzten
   Badge und setzt --ablauf-line-start/-end. Ohne JavaScript (oder vor dem
   ersten Messen) blendet der Fallback-Wert auf die halbe Badge-Höhe —
   korrekt für Schritt 1, für Schritt 4 eine Annäherung, die im Rahmen der
   eigenen Badge-Fläche bleibt.  */
.ablauf-steps {
  --road-w: 24px;
  --road-edge: color-mix(in srgb, var(--text-light) 70%, var(--primary));
}

/* Straße statt gestrichelter Linie: ::before = Asphaltband (--primary) mit
   dünnen hellen Randlinien, ::after = gestrichelte Mittellinie (--accent).
   Beide laufen von der Mitte der ersten bis zur Mitte der letzten Badge; die
   Hexagon-Nummern liegen als Stationen darüber. Mobil senkrecht. */
.ablauf-steps::before,
.ablauf-steps::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--ablauf-line-start, calc(var(--step-badge-size) / 2));
  bottom: var(--ablauf-line-end, calc(var(--step-badge-size) / 2));
  pointer-events: none;
}

.ablauf-steps::before {
  left: calc(var(--step-badge-size) / 2 - var(--road-w) / 2);
  width: var(--road-w);
  background-color: var(--primary);
  box-shadow:
    inset 2px 0 0 var(--road-edge),
    inset -2px 0 0 var(--road-edge);
}

.ablauf-steps::after {
  left: calc(var(--step-badge-size) / 2 - 1.5px);
  width: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0 10px,
    transparent 10px 18px
  );
}

/* Beim ersten Sichtbarwerden baut sich die Straße einmal von 01 bis zum
   letzten Schritt auf (initAblaufLine setzt .is-road-drawn). Ohne
   JavaScript (kein html.js) oder bei reduzierter Bewegung steht sie sofort
   vollständig da. */
@media (prefers-reduced-motion: no-preference) {
  html.js .ablauf-steps::before,
  html.js .ablauf-steps::after {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1200ms ease-in-out;
  }

  html.js .ablauf-steps.is-road-drawn::before,
  html.js .ablauf-steps.is-road-drawn::after {
    clip-path: inset(0 0 0 0);
  }
}

.ablauf-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

/* min-width: 0 verhindert, dass der Flex-Text-Block sich an seinem
   längsten Wort aufbläht statt im verfügbaren Platz umzubrechen — der
   Flexbox-Standard (min-width: auto) würde das sonst tun. */
.ablauf-step__text {
  min-width: 0;
}

.ablauf-step__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-step-title);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-step-title);
  text-transform: uppercase;
  color: var(--text-dark);
}

.ablauf-step__desc {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-step-desc);
  line-height: var(--line-height-relaxed);
  color: color-mix(in srgb, var(--text-dark) 65%, transparent);
}

/* --------------------------------------------------------------------------
   Kontakt (#kontakt)
   --------------------------------------------------------------------------
   Die wichtigste Sektion der Seite — hier passiert die Conversion. Ein
   Primärweg (Anrufen), ein gleichwertiger zweiter (WhatsApp), ein ruhiger
   dritter (Formular, aufklappbar). Dunkler Hintergrund wie der Hero, damit
   die Seite dunkel endet, wie sie begonnen hat.
   -------------------------------------------------------------------------- */
.contact {
  background-color: var(--primary);
  padding-block: var(--space-20);
}

.contact__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.contact__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-contact-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-light);
}

.contact__subline {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-body);
  text-align: center;
  color: color-mix(in srgb, var(--text-light) 70%, transparent);
}

/* --- Block 1: die zwei Direktwege ------------------------------------- */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.contact-actions > a {
  flex: 1;
}

/* --- Block 2: Öffnungszeiten + Adresse --------------------------------- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.contact-hours,
.contact-address {
  flex: 1;
}

.contact-hours__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--text-light);
}

.contact-hours__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-hours__status--open .contact-hours__dot {
  background-color: var(--accent);
}

/* Geschlossen = gedimmter Punkt, wie im Badge der Standort-Karte. */
.contact-hours__status--closed .contact-hours__dot {
  background-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.contact-hours__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid transparent;
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 65%, transparent);
}

.contact-hours__row--today {
  border-left-color: var(--accent);
  color: var(--text-light);
}

/* --------------------------------------------------------------------------
   .location-card — aufklappbare Standort-Karte (Kontaktbereich).
   Form: Rechteck mit vier gefasten Ecken, Fase = --badge-notch (16px) wie
   bei .class-card. Rahmen in Zwei-Ebenen-Technik: __frame (--accent) und
   __body (3px eingerückt, --primary) tragen dieselbe Fasenform, damit der
   Rahmen an den Schrägen nicht verschwindet (clip-path schneidet border ab).

   OHNE JavaScript (kein "js" am <html>) gelten die Grundwerte unten — das ist
   der aufgeklappte Look, alles ist sichtbar, nichts animiert. Erst
   ".js .location-card:not(.is-open)" macht daraus die kompakte Karte.
   -------------------------------------------------------------------------- */
.location-card {
  --loc-cut: var(--badge-notch);
  /* Fase der Innenfläche: bei 3px Rand 3 x (2 - sqrt 2) = 1,76px kleiner,
     damit der gelbe Rand auch an den Schrägen 3px breit bleibt. */
  --loc-cut-in: calc(var(--loc-cut) - 1.76px);
  --loc-h: 19rem;
  --loc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --loc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  width: 100%;
  margin-bottom: var(--space-2);
  perspective: 1000px;
}

.js .location-card:not(.is-open) {
  --loc-h: 9.5rem;
}

.location-card__toggle {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--loc-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-light);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    height 500ms var(--loc-ease),
    transform 600ms var(--loc-spring);
}

/* Beim Verfolgen des Mauszeigers kurze Transition statt Feder. */
.location-card__toggle.is-tilting {
  transition:
    height 500ms var(--loc-ease),
    transform 120ms ease-out;
}

.location-card__frame,
.location-card__body {
  position: absolute;
  clip-path: polygon(
    var(--loc-cut) 0,
    calc(100% - var(--loc-cut)) 0,
    100% var(--loc-cut),
    100% calc(100% - var(--loc-cut)),
    calc(100% - var(--loc-cut)) 100%,
    var(--loc-cut) 100%,
    0 calc(100% - var(--loc-cut)),
    0 var(--loc-cut)
  );
}

.location-card__frame {
  inset: 0;
  background-color: var(--accent);
}

.location-card__body {
  inset: 3px;
  overflow: hidden;
  background-color: var(--primary);
  clip-path: polygon(
    var(--loc-cut-in) 0,
    calc(100% - var(--loc-cut-in)) 0,
    100% var(--loc-cut-in),
    100% calc(100% - var(--loc-cut-in)),
    calc(100% - var(--loc-cut-in)) 100%,
    var(--loc-cut-in) 100%,
    0 calc(100% - var(--loc-cut-in)),
    0 var(--loc-cut-in)
  );
}

/* Dezentes Raster — nur im kompakten Zustand. */
.location-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text-light) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text-light) 4%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.js .location-card:not(.is-open) .location-card__body::before {
  opacity: 1;
}

/* Verlauf von unten, damit der Text über der Karte lesbar bleibt. */
.location-card__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--primary) 92%, transparent) 0%,
    color-mix(in srgb, var(--primary) 60%, transparent) 35%,
    transparent 70%
  );
}

/* --- Stadtplan (Deko, aria-hidden) ---------------------------------------
   viewBox 480x320 mit "slice": gleichmäßig skaliert, nie verzerrt. Die
   Straßen laufen über den ganzen viewBox und ragen bei schmalen Karten
   einfach aus dem Bild; Gebäude und Stecknadel liegen im immer sichtbaren
   Mittelbereich. */
.location-card__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--text-light) 6%, transparent);
  transition: opacity 400ms ease 100ms;
}

.js .location-card:not(.is-open) .location-card__map,
.js .location-card:not(.is-open) .location-card__pin {
  opacity: 0;
  transition-delay: 0s;
}

.location-card__road {
  fill: none;
  stroke: color-mix(in srgb, var(--text-light) var(--o), transparent);
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 200ms ease;
}

.js .location-card:not(.is-open) .location-card__road {
  stroke-dashoffset: 1;
}

.location-card.is-open .location-card__road {
  transition: stroke-dashoffset var(--dur) ease-out var(--d);
}

.location-card__block {
  fill: color-mix(in srgb, var(--text-light) 10%, transparent);
  stroke: color-mix(in srgb, var(--text-light) 15%, transparent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 200ms ease, transform 200ms ease;
}

.js .location-card:not(.is-open) .location-card__block {
  opacity: 0;
  transform: scale(0.8);
}

.location-card.is-open .location-card__block {
  transition: opacity 400ms ease var(--d), transform 400ms ease var(--d);
}

.location-card__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  fill: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent));
  transition: transform 200ms ease, opacity 400ms ease 100ms;
}

.location-card__pin circle {
  fill: var(--primary);
}

.js .location-card:not(.is-open) .location-card__pin {
  transform: scale(0) translateY(-20px);
}

.location-card.is-open .location-card__pin {
  transition: transform 550ms var(--loc-spring) 300ms, opacity 200ms ease 300ms;
}

/* --- Inhalt ------------------------------------------------------------- */
.location-card__content {
  position: absolute;
  inset: 3px;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
}

.location-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-6);
}

.location-card__icon {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--accent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 30%, transparent));
  opacity: 0;
  transition: filter 300ms ease, opacity 300ms ease;
}

.js .location-card:not(.is-open) .location-card__icon {
  opacity: 1;
}

.location-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  background-color: color-mix(in srgb, var(--text-light) 8%, transparent);
  color: color-mix(in srgb, var(--text-light) 85%, transparent);
  font-family: var(--font-display);
  font-size: var(--font-size-micro);
  line-height: 1;
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}

.location-card__badge[hidden] {
  display: none;
}

/* Gleicher Punkt wie .contact-hours__dot: gelb = geöffnet, gedimmt = zu. */
.location-card__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent);
}

.location-card__badge--closed .location-card__dot {
  background-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.location-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.location-card__name,
.location-card__city {
  display: block;
  transition: transform 400ms var(--loc-spring);
}

.location-card__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-light);
}

.location-card__city {
  font-size: var(--font-size-small);
  line-height: var(--line-height-tight);
  color: color-mix(in srgb, var(--text-light) 75%, transparent);
}

.location-card__line {
  display: block;
  height: 2px;
  margin-top: var(--space-1);
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 80%, transparent),
    color-mix(in srgb, var(--accent) 40%, transparent) 50%,
    transparent
  );
  transform-origin: left;
  transition: transform 400ms ease-out;
}

.js .location-card:not(.is-open) .location-card__line {
  transform: scaleX(0.3);
}

@media (hover: hover) and (pointer: fine) {
  .location-card__toggle:hover .location-card__name,
  .location-card__toggle:hover .location-card__city {
    transform: translateX(4px);
  }

  .location-card__toggle:hover .location-card__line {
    transform: scaleX(1);
  }

  .location-card__toggle:hover .location-card__icon {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));
  }
}

/* Fokus: --focus-ring (3px Abstand, 3px Ring in --accent) folgt der Fase.
   box-shadow/outline würden vom clip-path abgeschnitten, deshalb ein Ring
   aus einem eigenen, größeren Polygon (evenodd) 3px bis 6px außerhalb.
   Die Fasenlage ergibt sich aus der senkrechten Versetzung der Schräge:
   nach außen um d verschiebt sich der Fasenpunkt um 0,586 x d nach innen. */
.location-card__toggle::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 3;
  pointer-events: none;
  background-color: var(--accent);
  opacity: 0;
  clip-path: polygon(
    evenodd,
    calc(var(--loc-cut) + 3.52px) 0,
    calc(100% - var(--loc-cut) - 3.52px) 0,
    100% calc(var(--loc-cut) + 3.52px),
    100% calc(100% - var(--loc-cut) - 3.52px),
    calc(100% - var(--loc-cut) - 3.52px) 100%,
    calc(var(--loc-cut) + 3.52px) 100%,
    0 calc(100% - var(--loc-cut) - 3.52px),
    0 calc(var(--loc-cut) + 3.52px),
    calc(var(--loc-cut) + 3.52px) 0,
    calc(var(--loc-cut) + 4.76px) 3px,
    calc(100% - var(--loc-cut) - 4.76px) 3px,
    calc(100% - 3px) calc(var(--loc-cut) + 4.76px),
    calc(100% - 3px) calc(100% - var(--loc-cut) - 4.76px),
    calc(100% - var(--loc-cut) - 4.76px) calc(100% - 3px),
    calc(var(--loc-cut) + 4.76px) calc(100% - 3px),
    3px calc(100% - var(--loc-cut) - 4.76px),
    3px calc(var(--loc-cut) + 4.76px),
    calc(var(--loc-cut) + 4.76px) 3px
  );
}

.location-card__toggle:focus-visible {
  outline: none;
}

.location-card__toggle:focus-visible::after {
  opacity: 1;
}

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

/* Route-Link und Hinweis unter der Karte. Der Link ist immer erreichbar,
   auch zugeklappt und ohne JavaScript. */
.location-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.location-card__route {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .location-card__route:hover {
    text-decoration: underline;
  }
}

.location-card__route:active {
  text-decoration: underline;
}

.location-card__route:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.location-card__hint {
  display: none;
  margin: 0;
  font-size: var(--font-size-micro);
  color: color-mix(in srgb, var(--text-light) 60%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.js .location-card__hint {
  display: block;
}

.location-card__hint-touch {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .js .location-card:hover:not(.is-open) .location-card__hint {
    opacity: 1;
    transform: none;
  }
}

/* Touch: es gibt kein Hover, der Hinweis steht dauerhaft da (nur zugeklappt). */
@media (hover: none) {
  .js .location-card:not(.is-open) .location-card__hint {
    opacity: 1;
    transform: none;
  }

  .location-card__hint-mouse {
    display: none;
  }

  .location-card__hint-touch {
    display: inline;
  }
}

@media (min-width: 768px) {
  .location-card {
    --loc-h: 20rem;
    max-width: 32rem;
    transition: max-width 500ms var(--loc-ease);
  }

  .js .location-card:not(.is-open) {
    --loc-h: 9.5rem;
    max-width: 22rem;
  }

  .location-card__content {
    padding: var(--space-6);
  }

  .location-card__name {
    font-size: 20px;
  }
}

/* Reduzierte Bewegung: keine Neigung, keine Linien-Animation, kein
   Federeffekt — Auf- und Zuklappen passiert sofort. !important, damit die
   spezifischeren Übergangsregeln des aufgeklappten Zustands nicht greifen. */
@media (prefers-reduced-motion: reduce) {
  .location-card,
  .location-card *,
  .location-card *::before,
  .location-card *::after {
    transition: none !important;
  }

  .location-card__toggle {
    transform: none;
  }
}

/* Tap-Fläche der E-Mail-Adresse: das ::before vergrößert sie unsichtbar
   nach UNTEN auf 48px Höhe, ohne die Zeile selbst höher zu machen. */
.contact-address__email {
  position: relative;
  display: block;
  font-size: var(--font-size-small);
  text-decoration: none;
  color: color-mix(in srgb, var(--text-light) 65%, transparent);
}

.contact-address__email::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tap-target);
}

@media (hover: hover) and (pointer: fine) {
  .contact-address__email:hover {
    color: var(--text-light);
  }
}

.contact-address__email:active {
  color: var(--text-light);
}

.contact-address__email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Block 3: Formular, aufklappbar ------------------------------------ */
.contact-form-toggle {
  margin-top: var(--space-16);
  text-align: center;
}

.contact-form-toggle__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: var(--space-2) 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 70%, transparent);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form-toggle__trigger:hover {
    color: var(--text-light);
  }
}

.contact-form-toggle__trigger:active {
  color: var(--text-light);
}

.contact-form-toggle__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.contact-form-toggle__chevron {
  display: inline-block;
  transition: transform var(--transition-base);
}

.contact-form-toggle__trigger[aria-expanded="true"] .contact-form-toggle__chevron {
  transform: rotate(90deg);
}

/* Die Klasse setzt initContactForm() in script.js erst nach dem Laden —
   ohne JavaScript bleibt das Formular ein normaler, vollständig sichtbarer
   Block statt für immer unerreichbar zu sein (gleiches Prinzip wie
   trust-stats--ready in #vertrauen). */
.contact-form-panel--js {
  overflow: hidden;
  transition: max-height var(--transition-panel);
}

.contact-form-panel__inner {
  padding-top: var(--space-8);
  text-align: left;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.contact-form__label {
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 80%, transparent);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--text-light) 30%, transparent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--text-light) 6%, var(--primary));
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
}

.contact-form__textarea {
  min-height: calc(var(--tap-target) * 2);
  resize: vertical;
}

.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form__textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* Klassischer Honeypot: für echte Nutzer:innen unsichtbar und außerhalb
   der Tab-Reihenfolge (siehe tabindex="-1" im Markup), aber nicht per
   display:none — manche Bots überspringen genau diese Erkennung. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 13px Browser-Standard ist als Antippziel zu klein; 20px plus das per
   for-Attribut ebenfalls klickbare Label ergeben zusammen eine bequeme
   Trefferfläche. */
.contact-form__checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.contact-form__checkbox-label {
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 80%, transparent);
}

.contact-form__checkbox-label a {
  color: var(--accent);
}

.contact-form__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-light);
  font-size: var(--font-size-small);
}

.contact-form__submit {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Kontaktseite (site/kontakt.html)
   --------------------------------------------------------------------------
   Nutzt den dunklen .contact-Abschnitt der Startseite mit, damit die
   bestehenden Formular-, Öffnungszeiten- und Adress-Stile unverändert
   greifen — sie sind alle für dunklen Grund gebaut.
   -------------------------------------------------------------------------- */
.kontakt-heading {
  margin: var(--space-16) 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--text-light);
}

/* Zwei-Ebenen-Technik wie bei .contact-action--whatsapp: ein normaler border
   folgt der geschnittenen Silhouette nicht (clip-path schneidet ihn an den
   Schrägen weg). Die äußere Fläche ist deshalb komplett gelb und wird vom
   2px eingerückten, dunkel gefüllten __inner bis auf einen Rahmen verdeckt.
   Hier bewusst ein echtes Kindelement statt ::before — der Rahmen umschließt
   ein hohes Formular im Textfluss, eine absolut positionierte Ebene müsste
   dessen Höhe erst nachbilden. */
/* Auf dieser Seite stehen die Direktwege ganz oben, direkt unter dem
   Seitenkopf — der Vorschub aus .contact-actions käme zum padding des
   Abschnitts hinzu und risse eine Lücke auf. */
.contact__inner > .contact-actions:first-child {
  margin-top: 0;
}

/* Der Rahmen entsteht als padding der äußeren Fläche, nicht als margin der
   inneren: bei margin würden der obere und untere Wert mit denen des
   Elternelements verschmelzen (margin-collapsing) und der Rahmen wäre nur
   noch links und rechts zu sehen. */
.kontakt-form-card {
  --kontakt-card-notch: 28px;
  padding: 2px;
  background-color: var(--accent);
  clip-path: polygon(
    0 0,
    calc(100% - var(--kontakt-card-notch)) 0,
    100% var(--kontakt-card-notch),
    100% 100%,
    var(--kontakt-card-notch) 100%,
    0 calc(100% - var(--kontakt-card-notch))
  );
}

.kontakt-form-card__inner {
  padding: var(--space-6);
  background-color: var(--primary);
  clip-path: polygon(
    0 0,
    calc(100% - var(--kontakt-card-notch)) 0,
    100% var(--kontakt-card-notch),
    100% 100%,
    var(--kontakt-card-notch) 100%,
    0 calc(100% - var(--kontakt-card-notch))
  );
}

@media (min-width: 768px) {
  .kontakt-form-card__inner {
    padding: var(--space-10);
  }
}

.contact-form__required {
  color: var(--accent);
}

.contact-form__error {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--error);
}

/* Die Checkbox-Fehlermeldung steht außerhalb von .contact-form__field und
   damit ohne dessen gap — der Abstand nach oben muss hier selbst kommen. */
.contact-form__error--checkbox {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.contact-form__success {
  padding: var(--space-6) 0;
  text-align: center;
}

.contact-form__success-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--accent);
}

.contact-form__success-text {
  margin: 0;
  color: color-mix(in srgb, var(--text-light) 80%, transparent);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  --footer-pad: var(--space-4);
  /* Schriftgröße des Umriss-Schriftzugs: die sichtbaren Buchstaben füllen die
     Innenbreite (Container wie .site-footer__inner) genau aus. 4,70 = Breite
     von "FAHRSTATION" in Anton in em (ohne Buchstabenabstand, ohne die
     seitlichen Vorräume der Randbuchstaben); --mark-h = Höhe der Großbuchstaben
     (0,88 em). cqw = Breite dieses Footers (container-type). */
  --mark-fs: calc((min(100cqw, var(--max-width)) - 2 * var(--footer-pad)) / 4.70);
  --mark-h: calc(var(--mark-fs) * 0.88);
  --footer-pb: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  container-type: inline-size;
  background-color: var(--primary);
  color: var(--text-light);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Vollständiges Logo (Wortmarke + "FAHRSCHULE") in Originalproportion 3:1 —
   die frühere feste Höhe von 28px machte aus dem breiten Banner-Bild ein
   winziges, gequetschtes Band. Breite statt Höhe vorgeben, Höhe folgt aus dem
   Seitenverhältnis. */
.site-footer__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.site-footer__address {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--text-light);
  opacity: 0.8;
}

.site-footer__links {
  display: flex;
  gap: var(--space-4);
}

.site-footer__links a {
  position: relative;
  font-size: var(--font-size-small);
  text-decoration: none;
  opacity: 0.8;
}

/* Unsichtbare Tap-Fläche statt sichtbar größerer Box — "Impressum" und
   "Datenschutz" sind schon breiter als 48px, nur die Höhe wächst. */
.site-footer__links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--tap-target));
  height: max(100%, var(--tap-target));
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    opacity: 1;
  }
}

.site-footer__links a:active {
  opacity: 1;
}

.site-footer__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Abstand nur an dieser Stelle auf --space-6 angehoben (lokal auf diesem
   Selektor, --space-4 bleibt überall sonst unangetastet) — vergrößert die
   maximal mögliche Tap-Fläche der Icons darunter von 30px auf 38px Breite.
   Volle 48px wären erst ab --space-10 (40px Lücke) möglich: bei 22px
   Icon-Breite ist der Mitte-zu-Mitte-Abstand icon+gap, und die größte
   Trefferbreite, die noch ≥8px Lücke zur Nachbarfläche lässt, ist
   (icon+gap−8) — bei 24px Lücke also 22+24−8 = 38px, nicht 48px. */
.site-footer__social {
  display: flex;
  gap: var(--space-6);
}

.site-footer__social a {
  position: relative;
  display: flex;
  color: var(--text-light);
  opacity: 0.8;
}

.site-footer__social a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 38px);
  height: max(100%, var(--tap-target));
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover {
    opacity: 1;
  }
}

.site-footer__social a:active {
  opacity: 1;
}

.site-footer__social a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--text-light);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Footer-Abschluss: Umriss-Schriftzug "FAHRSTATION" über die volle Innenbreite
   und ein statischer gelber Schein, der von der Unterkante nach oben ausläuft.
   Der Schriftzug ist reine Dekoration (aria-hidden, nicht auswählbar). Er
   überlappt den unteren Rand von __inner so, dass Copyright/Icons über dem
   oberen Drittel der Buchstaben liegen; der Umriss ist dort gedämpft, damit
   der Text davor den Kontrast von 4,5:1 hält. Eigene Ebene, keine Kopplung
   an die .shine-Logik.
   -------------------------------------------------------------------------- */
.site-footer__mark {
  position: relative;
  box-sizing: border-box;
  max-width: var(--max-width);
  height: var(--mark-h);
  margin-inline: auto;
  margin-top: calc(var(--space-8) * -1 - var(--mark-h) / 3);
  padding-inline: var(--footer-pad);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.site-footer__mark-text {
  display: block;
  /* Anton: Oberkante der Großbuchstaben liegt bei line-height 1 bei 0,055 em,
     die Grundlinie bei 0,925 em — der Versatz (top, nicht margin-top: ein
     negativer margin-top würde mit dem Elternelement kollabieren) setzt sie
     bündig an die Oberkante der Box; der seitliche Vorraum der Randbuchstaben
     (0,03 em) wird ausgeglichen. */
  position: relative;
  top: calc(var(--mark-fs) * -0.055);
  left: calc(var(--mark-fs) * -0.03);
  font-family: var(--font-display);
  font-size: var(--mark-fs);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 45%, transparent);
  /* Oben (dort liegen Copyright und Icons) stark gedämpft, nach unten voll. */
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0, rgb(0 0 0 / 0.14) 30%, rgb(0 0 0 / 0.5) 45%, #000 62%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0, rgb(0 0 0 / 0.14) 30%, rgb(0 0 0 / 0.5) 45%, #000 62%);
}

@supports not (-webkit-text-stroke: 1px red) {
  .site-footer__mark-text {
    color: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}

/* Gelber Schein: von der Unterkante des Schriftzugs nach oben auslaufend, etwa
   über 1,5 Schriftzughöhen, geglättetes Profil (mehrere Zwischenstopps) gegen
   Banding. Läuft bis 0 % Deckkraft vor dem oberen Ende aus — keine Kante. */
.site-footer__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: calc(var(--footer-pb) * -1);
  left: 50%;
  width: 100vw;
  height: calc(var(--mark-h) * 1.5 + var(--footer-pb));
  transform: translateX(-50%);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--accent) 13%, transparent) 0,
    color-mix(in srgb, var(--accent) 12.2%, transparent) 10%,
    color-mix(in srgb, var(--accent) 10.4%, transparent) 20%,
    color-mix(in srgb, var(--accent) 8%, transparent) 30%,
    color-mix(in srgb, var(--accent) 5.6%, transparent) 40%,
    color-mix(in srgb, var(--accent) 3.4%, transparent) 50%,
    color-mix(in srgb, var(--accent) 1.8%, transparent) 62%,
    color-mix(in srgb, var(--accent) 0.7%, transparent) 76%,
    color-mix(in srgb, var(--accent) 0.2%, transparent) 88%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .site-footer {
    --footer-pad: var(--space-6);
  }
}

/* ==========================================================================
   Breakpoint ≥ 600px — Klassen-Karussell zeigt etwas über zwei Karten, die
   dritte schaut noch heraus.
   ========================================================================== */
@media (min-width: 600px) {
  .classes__item {
    flex-basis: calc((100% - var(--carousel-gap)) / 2.2);
  }
}

/* ==========================================================================
   Breakpoint ≥ 768px — Tablet/Desktop
   ========================================================================== */
@media (min-width: 768px) {
  .hero-section__title {
    max-width: 62%;
  }

  .trust {
    padding-block: var(--space-16);
  }

  .rating__num {
    font-size: 64px;
  }

  .rating__count {
    font-size: calc(64px * 0.45);
  }

  .trust-stats {
    flex-direction: row;
  }

  .trust-stat {
    flex: 1;
  }

  /* Trennlinie kippt auf Desktop von waagerecht (oben) auf senkrecht
     (links) — gleiche Strich-/Lückenmaße, andere Richtung. */
  .trust-stat:not(:first-child)::before {
    background-image: repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 50%, transparent) 0 8px,
      transparent 8px 16px
    );
    top: 20%;
    left: 0;
    width: 2px;
    height: 60%;
  }

  .reviews {
    padding-bottom: var(--space-30);
  }

  .reviews__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews figure.testimonial {
    height: 100%;
  }

  .classes {
    padding-block: var(--space-30);
  }

  .contact {
    padding-block: var(--space-30);
  }

  .contact-actions {
    flex-direction: row;
  }

  .contact-info {
    flex-direction: row;
    gap: var(--space-16);
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__links {
    order: 2;
  }

  .site-footer__social {
    order: 3;
  }

  .site-footer__copyright {
    order: 4;
    margin-left: var(--space-4);
  }
}

/* ==========================================================================
   Breakpoint ≥ 1024px — Desktop breit
   ========================================================================== */
@media (min-width: 1024px) {
  .reviews__list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Exakt zwei volle Karten, keine angeschnittene dritte: 100 % ist die
     Content-Breite des Tracks (ohne Padding), zwei Karten plus ein Abstand
     füllen sie genau; die dritte beginnt damit erst hinter der Trackkante.
     Größerer Abstand (24px) gegen einen Streifen der dritten Karte. */
  .classes__carousel {
    --carousel-gap: var(--space-6);
    --card-w: calc((100cqw - var(--carousel-gap)) / 2);
  }

  .classes__item {
    flex-basis: calc((100% - var(--carousel-gap)) / 2);
  }

  .ablauf {
    padding-block: 0 var(--space-30);
  }

  .ablauf__head {
    min-height: 460px;
    padding-block: var(--space-16);
  }

  .ablauf-steps {
    flex-direction: row;
    gap: var(--space-6);
  }

  .ablauf-step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .ablauf-step__title {
    margin-top: var(--space-4);
  }

  .ablauf-step__desc {
    max-width: 22ch;
  }

  /* Vier gleich breite Spalten (flex: 1) mit festem Gap: die Distanz von
     der Außenkante zur Mitte der ersten/letzten Spalte ist bei gleicher
     Breite eine reine Funktion von Breite und Gap, unabhängig vom Inhalt —
     Spaltenbreite = (100% − 3 × Gap) / 4, deren Mitte liegt bei der Hälfte
     davon. Anders als auf Mobile (siehe oben) reicht hier reines CSS, ohne
     JavaScript-Messung. */
  .ablauf-steps {
    --road-w: 28px;
  }

  .ablauf-steps::before,
  .ablauf-steps::after {
    bottom: auto;
    left: calc((100% - 3 * var(--space-6)) / 8);
    right: calc((100% - 3 * var(--space-6)) / 8);
    width: auto;
  }

  .ablauf-steps::before {
    top: calc(var(--step-badge-size) / 2 - var(--road-w) / 2);
    height: var(--road-w);
    box-shadow:
      inset 0 2px 0 var(--road-edge),
      inset 0 -2px 0 var(--road-edge);
  }

  .ablauf-steps::after {
    top: calc(var(--step-badge-size) / 2 - 1.5px);
    height: 3px;
    background-image: repeating-linear-gradient(
      to right,
      var(--accent) 0 10px,
      transparent 10px 18px
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    html.js .ablauf-steps::before,
    html.js .ablauf-steps::after {
      clip-path: inset(0 100% 0 0);
    }

    html.js .ablauf-steps.is-road-drawn::before,
    html.js .ablauf-steps.is-road-drawn::after {
      clip-path: inset(0 0 0 0);
    }
  }

  .site-footer__inner {
    padding-inline: var(--space-6);
  }
}

/* ==========================================================================
   Vorlage für Unterseiten (site/template.html, site/404.html)
   --------------------------------------------------------------------------
   Betrifft ausschließlich Elemente, die auf index.html nicht vorkommen
   (.page-header, .page-body, .page-cta, .mobile-cta-bar) bzw. dort nie die
   passende Klasse tragen (.mobile-menu__link.is-active, body.has-mobile-
   cta-bar) — nichts hier verändert das gerenderte Erscheinungsbild von
   index.html.
   ========================================================================== */

/* --- Aktiver Menüpunkt --------------------------------------------------
   Klasse wird pro Unterseite manuell am passenden <a> gesetzt, siehe
   Kommentar in template.html. Hier nirgends vorbelegt. */
.mobile-menu__link.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Breadcrumb ---------------------------------------------------------
   "Start / [Seitenname]" über der Seitenüberschrift in .page-header. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 55%, transparent);
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb__link:hover {
    color: var(--text-light);
  }
}

.breadcrumb__link:active {
  color: var(--text-light);
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.breadcrumb__current {
  color: inherit;
}

/* --- .page-header ---------------------------------------------------------
   Kompakter Seitenkopf für Unterseiten — bewusst KEIN bildschirmfüllender
   Hero wie auf der Startseite. Höhe ~30–35% der Bildschirmhöhe auf Mobile
   über min-height, nach demselben Muster wie .hero-section. */
.page-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 34svh;
  background-color: var(--primary);
  color: var(--text-light);
}

/* Für Seiten ohne .page-header__subtitle (aktuell nur kontakt.html): die
   34svh waren für Überschrift + Unterzeile bemessen, mit nur der
   Überschrift bleibt sonst durch align-items:center viel toter Raum
   stehen. min-height allein reicht nicht — .page-header__inner trägt sein
   eigenes, für zwei Zeilen bemessenes Padding (--space-16), das hier
   ebenfalls reduziert werden muss. */
.page-header--compact {
  min-height: auto;
}

.page-header--compact .page-header__inner {
  padding-block: var(--space-10);
}

.page-header__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-16) var(--space-4);
}

/* Aktualisierter Wert (war zuvor 52px): exakte Vorgabe für die Fahrzeugfoto-
   Variante, liegt jetzt genau auf der Obergrenze von --font-size-h1
   (clamp(32px, 8vw, 48px)) — trotzdem literal statt Token, weil
   design-tokens.css außerhalb des erlaubten Änderungsbereichs lag. */
.page-header__title {
  margin: var(--space-3) 0 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 48px);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
}

.page-header__subtitle {
  margin: var(--space-2) 0 0;
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: color-mix(in srgb, var(--text-light) 70%, transparent);
}

/* --- .page-header--with-photo -----------------------------------------
   Variante für die vier Klassen-Seiten: Fahrzeugfoto im Signage-Rahmen,
   auf Mobile unter dem Text, ab 900px daneben (Grund für den eigenen
   900px-Bruchpunkt statt 768/1024: erst ab da hat ein 5:4-Bild neben dem
   Text genug Breite, ohne verkrampft zu wirken). Rein additiv über eine
   Modifier-Klasse — .page-header ohne sie (z. B. site/404.html) bleibt exakt
   wie zuvor. */
.page-header--with-photo .page-header__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .page-header--with-photo .page-header__inner {
    grid-template-columns: 45fr 55fr;
    align-items: center;
    gap: var(--space-10);
  }
}

/* min-width: 0 überschreibt den Grid-Item-Default (auto), der Textzeilen
   sonst auf ihre ungebrochene Breite aufbläht, statt sie im Grid-Track
   umzubrechen — sonst würde .page-header__title trotz overflow-wrap den
   Viewport horizontal sprengen. */
.page-header__text {
  min-width: 0;
}

/* --- .signage-frame -----------------------------------------------------
   Fotorahmen im Signage-Look: derselbe Zwei-Ebenen-Aufbau wie .class-tile
   (border + clip-path funktionieren nicht zusammen — siehe Kommentar dort),
   hier mit demselben Sechseck-Polygon, nicht neu erfunden. Das Foto selbst
   wird nicht beschnitten (object-fit: contain); der Rahmen ist die
   gestalterische Antwort auf die dadurch entstehenden Ränder. */
.page-header__photo {
  margin: 0;
}

.signage-frame {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-height: 45vh;
  background-color: var(--accent);
  clip-path: polygon(
    0 50%,
    var(--badge-notch) 0,
    calc(100% - var(--badge-notch)) 0,
    100% 50%,
    calc(100% - var(--badge-notch)) 100%,
    var(--badge-notch) 100%
  );
}

.signage-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: var(--primary);
  clip-path: polygon(
    0 50%,
    var(--badge-notch) 0,
    calc(100% - var(--badge-notch)) 0,
    100% 50%,
    calc(100% - var(--badge-notch)) 100%,
    var(--badge-notch) 100%
  );
}

/* Wie bei .class-tile: position: relative hebt Bild/<picture> über das
   absolut positionierte ::before, ohne z-index, weil positionierte
   Geschwister in Baumreihenfolge gestapelt werden. */
.signage-frame > * {
  position: relative;
}

.signage-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.signage-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 900px) {
  .signage-frame {
    max-width: 620px;
    max-height: none;
  }
}

/* --- .page-body -----------------------------------------------------------
   Inhaltsbereich der Unterseite. 800px ist ebenfalls ein vorgegebener
   literaler Wert ohne bestehenden Token (--max-width ist mit 1200px für
   Fließtext einer Unterseite deutlich zu breit) — hält lange Textzeilen auf
   großen Bildschirmen lesbar. */
.page-body {
  max-width: 800px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-4);
}

@media (min-width: 768px) {
  .page-body {
    padding: var(--space-20) var(--space-4);
  }
}

/* --- .page-cta --------------------------------------------------------
   Einheitlicher Abschluss-Block vor dem Footer, auf jeder Unterseite
   identisch. Nutzt .contact-action/.contact-actions 1:1 wie in #kontakt
   auf der Startseite — keine eigenen Klassen für die zwei Direktwege. */
.page-cta {
  background-color: var(--primary);
  color: var(--text-light);
  padding-block: var(--space-20);
  text-align: center;
}

.page-cta__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.page-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
}

.page-cta__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  margin-top: var(--space-6);
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--text-light) 70%, transparent);
  text-decoration: underline;
  transition: color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .page-cta__link:hover {
    color: var(--text-light);
  }
}

.page-cta__link:active {
  color: var(--text-light);
}

.page-cta__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .page-cta {
    padding-block: var(--space-30);
  }
}

/* --- .mobile-cta-bar --------------------------------------------------
   Feste Aktionsleiste am unteren Bildschirmrand, nur Unterseiten
   (index.html hat sie nicht). Immer sichtbar, kein Ein-/Ausblenden beim
   Scrollen. z-index 150: unter .mobile-menu (200) und .site-header (300),
   damit das Overlay-Menü sie beim Öffnen automatisch verdeckt (inset:0
   deckt den ganzen Viewport ab) — keine eigene JS-Logik nötig. */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgb(22 21 20 / 0.16);
}

.mobile-cta-bar__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-12) + var(--space-2));
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.mobile-cta-bar__item--call {
  background-color: var(--accent);
  color: var(--primary);
}

.mobile-cta-bar__item--whatsapp {
  background-color: var(--primary);
  color: var(--text-light);
  border: 2px solid var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-cta-bar__item--call:hover {
    background-color: var(--accent-hover);
  }

  .mobile-cta-bar__item--whatsapp:hover {
    background-color: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
  }
}

.mobile-cta-bar__item--call:active {
  background-color: var(--accent-hover);
}

.mobile-cta-bar__item--whatsapp:active {
  background-color: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
}

.mobile-cta-bar__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .mobile-cta-bar {
    display: none;
  }
}

/* Platz für die feste Aktionsleiste, damit sie nichts verdeckt — nur auf
   Seiten mit body.has-mobile-cta-bar. index.html trägt weder diese Klasse
   noch die Leiste und bleibt dadurch unangetastet. 56px = derselbe Wert wie
   .mobile-cta-bar__item min-height, damit Leiste und Polsterung exakt
   zueinander passen. */
@media (max-width: 767.98px) {
  body.has-mobile-cta-bar .page-cta,
  body.has-mobile-cta-bar .site-footer {
    padding-bottom: calc(var(--space-12) + var(--space-2) + env(safe-area-inset-bottom));
  }

  /* Der gelbe Schein des Footers reicht bis zur Footer-Unterkante (auch durch
     diesen Polsterstreifen), sonst endet er an der Unterkante des Schriftzugs
     mit einer Stufe. */
  body.has-mobile-cta-bar .site-footer {
    --footer-pb: calc(var(--space-12) + var(--space-2) + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .nav-toggle__bar {
    transition: none;
  }

  .scroll-hint {
    animation: none;
    opacity: 0.3;
    transform: translateX(-50%) scaleY(1);
  }

  .hero-section__title,
  .hero-section__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Gold-Metall-Buttons
   --------------------------------------------------------------------------
   Alle Buttons (keine Textlinks) in drei Stufen:
     p1  Primär    — Gold-Metall, dunkle Schrift
     p2  Sekundär  — "Schwarz-Chrom": dunkle Fläche, goldener Rahmen, helle/
                     goldene Schrift
     p3  Icon      — Karussell-Pfeile: goldener Rahmen, dezente dunkle Fläche
   Drei Schichten wie bei einem Metallrahmen: äußerer Rahmen (dunkel → hell),
   innere Kante (hell → dunkles Gold → hell), Fläche (helles → dunkleres Gold).
   Nur Tokens + color-mix, keine festen Hex-Werte.

   Zwei Bauweisen:
   - Direkt (.ghost-btn, .btn-primary): rechteckig mit runden Ecken — border
     trägt den Rahmen, ::before Kante + Fläche. Maße unverändert.
   - Wrapper <span class="metal …"> (.btn-signage, .contact-action, Pfeile):
     clip-path schneidet an der eigenen Box auch filter/box-shadow ab. Der
     Wrapper ist deshalb UNGESCHNITTEN und trägt Schatten, Rahmen (::before,
     geschnitten) und Zustände; das innere Element (.metal__btn) liefert
     Kante + Fläche, jeweils um die Rahmenstärke eingerückt (Polygon der
     Innenform = Außenform minus Einzug).
   Zustände: Hover nur mit Maus (Helligkeit 1.05, Schatten, Lichtstreifen
   einmal 600 ms), gedrückt (2,5 px einsinken, scale .97, kleinerer Schatten,
   Touch: Blitz 250 ms), Fokus (Doppelring, der Form folgend), disabled.
   ========================================================================== */
.metal,
.ghost-btn,
.btn-primary,
.mobile-cta-bar__item {
  --m-dark: color-mix(in srgb, var(--accent) 45%, var(--primary));
  --m-mid: color-mix(in srgb, var(--accent-hover) 70%, var(--primary));
  --m-light: color-mix(in srgb, var(--accent) 55%, var(--text-light));
  --m-frame: linear-gradient(to bottom, var(--m-dark), var(--m-light));
  --m-edge: linear-gradient(to bottom, var(--m-light), var(--m-mid) 50%, var(--m-light));
  --m-face-1: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, var(--text-light)), var(--accent) 48%, color-mix(in srgb, var(--accent) 82%, var(--primary)));
  --m-face-2: linear-gradient(to bottom, color-mix(in srgb, var(--primary) 84%, var(--text-light)), var(--primary) 55%, color-mix(in srgb, var(--primary) 94%, var(--accent)));
  --m-face-3: linear-gradient(to bottom, color-mix(in srgb, var(--primary) 86%, var(--accent)), color-mix(in srgb, var(--primary) 93%, var(--accent)));
  --m-ease: cubic-bezier(0.1, 0.4, 0.2, 1);
  --streak: 60%;
  --face: var(--m-face-1);
  --ink: var(--primary);
  --emboss: 0 1px 0 color-mix(in srgb, var(--text-light) 55%, transparent);
  --m-shadow: drop-shadow(0 2px 2px color-mix(in srgb, var(--primary) 28%, transparent));
  --m-shadow-hover: drop-shadow(0 4px 4px color-mix(in srgb, var(--primary) 34%, transparent));
  --m-shadow-down: drop-shadow(0 1px 1px color-mix(in srgb, var(--primary) 30%, transparent));
  --m-focus: drop-shadow(2px 0 0 var(--primary)) drop-shadow(-2px 0 0 var(--primary)) drop-shadow(0 2px 0 var(--primary)) drop-shadow(0 -2px 0 var(--primary))
    drop-shadow(2px 0 0 var(--accent)) drop-shadow(-2px 0 0 var(--accent)) drop-shadow(0 2px 0 var(--accent)) drop-shadow(0 -2px 0 var(--accent));
}

/* Sechsecke/Pfeile stehen oft auf hellem Grund: Schatten dort ~30 % dezenter
   (Deckkraft und Radius). */
.metal {
  --m-shadow: drop-shadow(0 1.4px 1.4px color-mix(in srgb, var(--primary) 20%, transparent));
  --m-shadow-hover: drop-shadow(0 2.8px 2.8px color-mix(in srgb, var(--primary) 24%, transparent));
  --m-shadow-down: drop-shadow(0 0.7px 0.7px color-mix(in srgb, var(--primary) 21%, transparent));
}

.metal--p1 { --face: var(--m-face-1); --ink: var(--primary); --emboss: 0 1px 0 color-mix(in srgb, var(--text-light) 55%, transparent); }
.metal--p2 { --streak: 22%; --face: var(--m-face-2); --ink: var(--accent); --emboss: 0 1px 0 color-mix(in srgb, var(--primary) 70%, transparent); }
.metal--p3 { --streak: 22%; --face: var(--m-face-3); --ink: var(--accent); --emboss: none; --d1: 1px; --d2: 2px; }

@keyframes metal-streak {
  from { transform: translateX(-120%); }
  to { transform: translateX(260%); }
}

/* ---------- Direkte Variante: runde Ecken, Maße unverändert ---------- */
.ghost-btn,
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--m-frame);
  color: var(--ink);
  text-shadow: var(--emboss);
  filter: var(--m-shadow);
  transition: transform 250ms var(--m-ease), filter 250ms var(--m-ease);
}

.ghost-btn { --streak: 22%; --face: var(--m-face-2); --ink: var(--accent); --emboss: 0 1px 0 color-mix(in srgb, var(--primary) 70%, transparent); }

.ghost-btn--primary,
.btn-primary { --streak: 60%; --face: var(--m-face-1); --ink: var(--primary); --emboss: 0 1px 0 color-mix(in srgb, var(--text-light) 55%, transparent); }

/* .btn-primary hatte keinen Rand: den 2px-Rahmen vom Innenabstand abziehen,
   damit die Maße gleich bleiben. */
.btn-primary { padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px); }

.ghost-btn::before,
.btn-primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--face) padding-box, var(--m-edge) border-box;
  transition: filter 250ms var(--m-ease);
}

.btn-primary::before { border-radius: calc(var(--radius-sm) - 1px); }

.ghost-btn::after,
.btn-primary::after,
.metal__btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--text-light) var(--streak), transparent) 50%, transparent 80%);
  transform: translateX(-120%);
}

@media (hover: hover) and (pointer: fine) {
  .ghost-btn:hover,
  .ghost-btn--primary:hover,
  .btn-primary:hover {
    background: var(--m-frame);
    border-color: transparent;
    color: var(--ink);
    filter: var(--m-shadow-hover);
  }

  .ghost-btn:hover::before,
  .btn-primary:hover::before { filter: brightness(1.05); }

  .ghost-btn:hover::after,
  .btn-primary:hover::after { animation: metal-streak 600ms var(--m-ease) 1 both; }
}

.ghost-btn:active,
.ghost-btn--primary:active,
.btn-primary:active {
  background: var(--m-frame);
  border-color: transparent;
  color: var(--ink);
  transform: translateY(2.5px) scale(0.97);
  filter: var(--m-shadow-down);
}

.ghost-btn:active::after,
.btn-primary:active::after { animation: metal-streak 250ms var(--m-ease) 1 both; }

.ghost-btn:focus-visible,
.btn-primary:focus-visible {
  box-shadow: none;
  filter: var(--m-shadow) var(--m-focus);
}

.ghost-btn:disabled,
.btn-primary:disabled {
  opacity: 0.5;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* ---------- Wrapper-Variante für clip-path-Formen ---------- */
.metal {
  --n: 20px;
  --d1: 1.25px;
  --d2: 2.25px;
  position: relative;
  display: inline-flex;
  filter: var(--m-shadow);
  transition: transform 250ms var(--m-ease), filter 250ms var(--m-ease);
  -webkit-tap-highlight-color: transparent;
}

.metal--sig { --n: var(--btn-signage-notch, 20px); }
.metal--block { --n: var(--badge-notch); }
.metal--icon { --n: 14px; }

.metal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--m-frame);
}

.metal > .metal__btn {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  margin: var(--d1);
  border: 0;
  background: var(--m-edge);
  color: var(--ink);
  text-shadow: var(--emboss);
  transform: none;
  transition: none;
}

.metal > .metal__btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--d2) - var(--d1));
  background: var(--face);
  transition: filter 250ms var(--m-ease);
}

/* Sechseck (btn-signage, contact-action) */
.metal--hex::before { clip-path: polygon(0 50%, var(--n) 0, calc(100% - var(--n)) 0, 100% 50%, calc(100% - var(--n)) 100%, var(--n) 100%); }
.metal--hex > .metal__btn { clip-path: polygon(0 50%, calc(var(--n) - var(--d1)) 0, calc(100% - var(--n) + var(--d1)) 0, 100% 50%, calc(100% - var(--n) + var(--d1)) 100%, calc(var(--n) - var(--d1)) 100%); }
.metal--hex > .metal__btn::before { clip-path: polygon(0 50%, calc(var(--n) - var(--d2)) 0, calc(100% - var(--n) + var(--d2)) 0, 100% 50%, calc(100% - var(--n) + var(--d2)) 100%, calc(var(--n) - var(--d2)) 100%); }

/* Rechteck mit vier gefasten Ecken (.contact-action), Fase = --badge-notch wie
   bei .location-card. Innenfase = Außenfase − 0,586 × Randbreite, damit der
   Rahmen an den Schrägen überall gleich dick ist (Einzug d: Schräge rückt um
   d·√2 nach innen, die Box um 2d → Fase − (2 − √2)·d). */
.metal--chamfer::before { clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); }
.metal--chamfer > .metal__btn { --c1: calc(var(--n) - 0.586 * var(--d1)); clip-path: polygon(var(--c1) 0, calc(100% - var(--c1)) 0, 100% var(--c1), 100% calc(100% - var(--c1)), calc(100% - var(--c1)) 100%, var(--c1) 100%, 0 calc(100% - var(--c1)), 0 var(--c1)); }
.metal--chamfer > .metal__btn::before { --c2: calc(var(--n) - 0.586 * var(--d2)); clip-path: polygon(var(--c2) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c2)); }

/* Pfeile */
.metal--next::before { clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% 50%, calc(100% - var(--n)) 100%, 0 100%); }
.metal--next > .metal__btn { clip-path: polygon(0 0, calc(100% - var(--n) + var(--d1)) 0, 100% 50%, calc(100% - var(--n) + var(--d1)) 100%, 0 100%); }
.metal--next > .metal__btn::before { clip-path: polygon(0 0, calc(100% - var(--n) + var(--d2)) 0, 100% 50%, calc(100% - var(--n) + var(--d2)) 100%, 0 100%); }
.metal--prev::before { clip-path: polygon(0 50%, var(--n) 0, 100% 0, 100% 100%, var(--n) 100%); }
.metal--prev > .metal__btn { clip-path: polygon(0 50%, calc(var(--n) - var(--d1)) 0, 100% 0, 100% 100%, calc(var(--n) - var(--d1)) 100%); }
.metal--prev > .metal__btn::before { clip-path: polygon(0 50%, calc(var(--n) - var(--d2)) 0, 100% 0, 100% 100%, calc(var(--n) - var(--d2)) 100%); }

/* Größen: Gesamtmaß (Wrapper) bleibt wie vorher, die Rahmenstärke wird vom
   inneren Element abgezogen. */
.metal > .btn-signage {
  min-height: calc(var(--btn-signage-h) - 2 * var(--d1));
  padding: 0 calc(var(--space-8) - var(--d1)) 0 calc(76px - var(--d1));
}

.metal > .btn-signage > .btn-signage__stripes {
  top: calc(var(--d2) - var(--d1));
  bottom: calc(var(--d2) - var(--d1));
}

.metal > .contact-action {
  flex: 1;
  min-height: calc(var(--space-24) - 2 * var(--d1));
  padding: calc(var(--space-6) - var(--d1));
}

.metal > .contact-form__submit { width: auto; flex: 1; }

.metal--block { display: flex; }
.contact-actions > .metal { flex: 1; }

/* Texte/Icons in Sekundär-Flächen (Schwarz-Chrom) */
.metal--p2 > .contact-action .contact-action__sub { color: color-mix(in srgb, var(--text-light) 70%, transparent); }
.metal--p1 > .contact-action .contact-action__sub { color: color-mix(in srgb, var(--primary) 70%, transparent); }

/* alte Einzel-Zustände der Innenelemente neutralisieren (Hebung, Fokusring,
   Fokus-Umfärbung) — Zustände trägt jetzt der Wrapper */
.metal > .metal__btn:hover,
.metal > .metal__btn:active { transform: none; }
.metal > .metal__btn:focus-visible { outline: none; box-shadow: none; color: var(--ink); }
.metal > .metal__btn:focus-visible::before { inset: calc(var(--d2) - var(--d1)); }
.metal > .contact-action:focus-visible .contact-action__sub { color: inherit; }
.metal--p1 > .contact-action:focus-visible .contact-action__sub { color: color-mix(in srgb, var(--primary) 70%, transparent); }
.metal--p2 > .contact-action:focus-visible .contact-action__sub { color: color-mix(in srgb, var(--text-light) 70%, transparent); }

/* Pfeile: Wrapper übernimmt Position und Sichtbarkeit */
.metal--arrow {
  position: absolute;
  top: calc(var(--card-w) * 0.3125);
  z-index: 3;
  width: var(--tap-target);
  height: var(--tap-target);
  margin: calc(var(--tap-target) / -2) 0 0;
  transition: transform 250ms var(--m-ease), filter 250ms var(--m-ease), opacity var(--transition-base), visibility var(--transition-base);
}

.metal--arrow.metal--prev { left: calc(-1 * var(--carousel-pad)); }
.metal--arrow.metal--next { right: calc(-1 * var(--carousel-pad)); }
.metal--arrow.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.metal > .carousel-arrow {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  flex: 1;
  margin: var(--d1);
  transition: none;
}

.metal > .carousel-arrow svg { z-index: 1; }

@media (hover: none) {
  .metal--arrow { display: none; }
}

/* ---------- Zustände (Wrapper) ---------- */
@media (hover: hover) and (pointer: fine) {
  .metal:hover { filter: var(--m-shadow-hover); }
  .metal:hover > .metal__btn::before { filter: brightness(1.05); }
  .metal:hover > .metal__btn::after { animation: metal-streak 600ms var(--m-ease) 1 both; }
}

.metal:active {
  transform: translateY(2.5px) scale(0.97);
  filter: var(--m-shadow-down);
}

.metal:active > .metal__btn::after { animation: metal-streak 250ms var(--m-ease) 1 both; }

/* Fokus nur per Tastatur (focus-visible); der Doppelring folgt der Form,
   weil er als Schatten-Kette am ungeschnittenen Wrapper hängt. */
.metal:has(> :focus-visible) { filter: var(--m-shadow) var(--m-focus); }

@supports not selector(:has(*)) {
  .metal:focus-within { filter: var(--m-shadow) var(--m-focus); }
}

.metal:has(> :disabled) {
  opacity: 0.5;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* ---------- Mobile Anruf-Leiste: nur Metall-Fläche ---------- */
.mobile-cta-bar__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-shadow: var(--emboss);
  filter: none;
  transition: none;
}

.mobile-cta-bar__item--call { --streak: 60%; background: var(--m-face-1); color: var(--primary); }

.mobile-cta-bar__item--whatsapp {
  --streak: 22%;
  --face: var(--m-face-2);
  --ink: var(--accent);
  --emboss: 0 1px 0 color-mix(in srgb, var(--primary) 70%, transparent);
  background: var(--m-face-2);
  color: var(--text-light);
}

.mobile-cta-bar__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--text-light) var(--streak), transparent) 50%, transparent 80%);
  transform: translateX(-120%);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-cta-bar__item--call:hover,
  .mobile-cta-bar__item--whatsapp:hover {
    background-image: linear-gradient(color-mix(in srgb, var(--text-light) 5%, transparent), color-mix(in srgb, var(--text-light) 5%, transparent)), var(--face);
  }
  .mobile-cta-bar__item:hover::after { animation: metal-streak 600ms var(--m-ease) 1 both; }
}

.mobile-cta-bar__item--call:active { background: var(--m-face-1); }
.mobile-cta-bar__item--whatsapp:active { background: var(--m-face-2); }
.mobile-cta-bar__item:active::after { animation: metal-streak 250ms var(--m-ease) 1 both; }

@media (prefers-reduced-motion: reduce) {
  .metal,
  .metal--arrow,
  .ghost-btn,
  .btn-primary,
  .metal > .metal__btn::before,
  .ghost-btn::before,
  .btn-primary::before { transition: none; }

  .metal:active,
  .ghost-btn:active,
  .btn-primary:active { transform: none; }

  .metal__btn::after,
  .ghost-btn::after,
  .btn-primary::after,
  .mobile-cta-bar__item::after { display: none; }
}

/* ---------- „Absenden“ und „Jetzt voranmelden“: vier Fasen, Pfeil ----------
   Gleiche Fase (--badge-notch) wie die Kontakt-Kästen; die Fasen-Polygone
   kommen von .metal--chamfer. Keine Schrägstreifen mehr, Text mittig, dahinter
   ein Pfeil, der bei Maus-Hover 4 px nach rechts gleitet. */
.metal--wide,
.metal--cta { --n: var(--badge-notch); }

.metal--wide {
  display: flex;
  width: 100%;
}

.metal.metal--wide > .btn-signage,
.metal.metal--cta > .btn-signage {
  flex: 1;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(56px - 2 * var(--d1));
  padding: 0 calc(var(--space-6) - var(--d1));
}

/* „Jetzt voranmelden“ (.kb-cta): gleicher Stil, aber nur so breit wie sein
   Inhalt (zentriert im Textfluss), etwas mehr Luft links/rechts. */
.metal.metal--cta > .btn-signage { padding-inline: calc(var(--space-8) - var(--d1)); }

.metal__arrow {
  display: inline-block;
  transition: transform 250ms var(--m-ease);
}

@media (hover: hover) and (pointer: fine) {
  .metal:hover .metal__arrow { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .metal__arrow { transition: none; }
  .metal:hover .metal__arrow { transform: none; }
}

/* ==========================================================================
   FAQ „Häufige Fragen“ (#faq, nur Startseite)
   --------------------------------------------------------------------------
   Helle Sektion zwischen dunklem Kontaktbereich und dunklem Footer
   (.shine--silver). Jede Frage ist ein natives <details>/<summary> — läuft
   ohne JS, ist per Tastatur bedienbar, mehrere dürfen offen sein.
   Karte = Zwei-Ebenen-Technik mit gefasten Ecken (--badge-notch): ::before
   Rahmen, ::after Fläche, die Fase der Fläche = Außenfase − 0,586 × Rand.
   clip-path schneidet filter/box-shadow am Element selbst ab; der Schein
   (offen) und der Fokus-Ring hängen deshalb als drop-shadow am ungeschnittenen
   <details>, das nur die geclippten Pseudo-Ebenen trägt.
   Auf-/Zuklappen: ::details-content + interpolate-size (CSS); wo das fehlt
   (Safari), übernimmt initFaq() in script.js per Web Animations.
   ========================================================================== */
.faq {
  background-color: var(--background-light);
  /* oben knapper als unten: die Überschrift soll nicht in einer großen
     Lücke unter dem dunklen Kontaktbereich schweben */
  padding-block: var(--space-12) var(--space-20);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.faq__heading {
  margin: 0 0 var(--space-10);
  font-family: var(--font-display);
  font-size: var(--font-size-section-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  /* Auf hellem Grund durchgehend --text-dark (Gelb wäre dort unlesbar);
     auf dunklem Grund wäre „Antworten“ hier --accent. */
  color: var(--text-dark);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.faq-item {
  --faq-bw: 1.5px;
  --faq-cut: var(--badge-notch);
  --faq-cut-in: calc(var(--faq-cut) - 0.586 * var(--faq-bw));
  --faq-frame: color-mix(in srgb, var(--primary) 16%, var(--background-light));
  --faq-ink: color-mix(in srgb, var(--text-dark) 74%, var(--text-light));
  position: relative;
  isolation: isolate;
  interpolate-size: allow-keywords;
  color: var(--faq-ink);
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 300ms ease, color 200ms ease;
}

.faq-item::before,
.faq-item::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.faq-item::before {
  inset: 0;
  background-color: var(--faq-frame);
  clip-path: polygon(var(--faq-cut) 0, calc(100% - var(--faq-cut)) 0, 100% var(--faq-cut), 100% calc(100% - var(--faq-cut)), calc(100% - var(--faq-cut)) 100%, var(--faq-cut) 100%, 0 calc(100% - var(--faq-cut)), 0 var(--faq-cut));
  transition: background-color 200ms ease;
}

.faq-item::after {
  inset: var(--faq-bw);
  background-color: var(--text-light);
  clip-path: polygon(var(--faq-cut-in) 0, calc(100% - var(--faq-cut-in)) 0, 100% var(--faq-cut-in), 100% calc(100% - var(--faq-cut-in)), calc(100% - var(--faq-cut-in)) 100%, var(--faq-cut-in) 100%, 0 calc(100% - var(--faq-cut-in)), 0 var(--faq-cut-in));
}

.faq-item[open] {
  --faq-frame: var(--accent);
  color: var(--text-dark);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 38%, transparent));
}

@media (hover: hover) and (pointer: fine) {
  .faq-item:not([open]):hover { --faq-frame: color-mix(in srgb, var(--accent) 65%, var(--background-light)); color: var(--text-dark); }
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:focus-visible { outline: none; }

/* Formfolgender Fokus-Ring: Doppelring als drop-shadow-Kette am <details>. */
.faq-item:has(> .faq-item__summary:focus-visible) {
  filter:
    drop-shadow(2px 0 0 var(--primary)) drop-shadow(-2px 0 0 var(--primary)) drop-shadow(0 2px 0 var(--primary)) drop-shadow(0 -2px 0 var(--primary))
    drop-shadow(2px 0 0 var(--accent)) drop-shadow(-2px 0 0 var(--accent)) drop-shadow(0 2px 0 var(--accent)) drop-shadow(0 -2px 0 var(--accent));
}

.faq-item__q {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--font-size-body) + 1px);
  line-height: 1.35;
}

/* Plus-Symbol: gelbe Fläche mit dunklem Plus (Gelb allein hätte auf Hell
   kaum Kontrast); beim Öffnen dreht sich nur das Symbol zum ×. */
.faq-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--accent);
  color: var(--primary);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.faq-item__icon {
  transition: scale 200ms ease-out;
}

.faq-item__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
  /* leichte Überschwing-Kurve: das Plus „rastet“ beim × ein */
  transition: transform 260ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .faq-item__summary:hover .faq-item__icon { scale: 1.1; }
}

.faq-item__summary:active .faq-item__icon { scale: 0.92; }

.faq-item[open] .faq-item__icon svg { transform: rotate(45deg); }

.faq-item__a {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--text-dark);
  line-height: 1.6;
  /* Schließen: Text blendet schneller aus, als die Karte einfährt. */
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 180ms ease-in-out, translate 300ms ease-in-out;
}

/* Öffnen: Text folgt der aufgehenden Karte mit kurzem Versatz (@starting-style
   liefert den Startzustand; ohne Unterstützung steht der Text sofort da). */
.faq-item[open] .faq-item__a {
  opacity: 1;
  translate: 0 0;
  transition: opacity 260ms ease-out 90ms, translate 300ms ease-out 60ms;
}

@starting-style {
  .faq-item[open] .faq-item__a {
    opacity: 0;
    translate: 0 -6px;
  }
}

.faq-item__a > * { margin: 0; }
.faq-item__a > * + * { margin-top: var(--space-4); }

/* --- Antworten strukturiert statt Fließtext --------------------------------
   .faq-rows   Bezeichnung | Wert (Zeiten, Alter, Kosten, Kontakt) — eine
               kleine Tabelle mit Haarlinien; unter 360px stehen Bezeichnung
               und Wert untereinander.
   .faq-check  Checkliste (Unterlagen) mit gelbem Fasen-Häkchen.
   .faq-chips  kleine Marken für Kurzwerte (Altersstufen, Sonderfahrten).
   .faq-note   Hinweiszeile mit gelber Kante links. */
.faq-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  /* nur seitlich/unten nullen — der Abstand nach oben kommt aus
     .faq-item__a > * + * (z. B. wenn ein Einleitungssatz davorsteht) */
  margin-inline: 0;
  margin-bottom: 0;
}

/* subgrid: die Bezeichnungsspalte ist so breit wie die längste Bezeichnung
   der jeweiligen Antwort, alle Zeilen fluchten. */
.faq-rows__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--space-1) var(--space-6);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--text-light));
}

.faq-rows__row:first-child { border-top: 0; padding-top: 0; }
.faq-rows__row:last-child { padding-bottom: 0; }

.faq-rows dt {
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.faq-rows dt a { color: var(--text-dark); }

.faq-rows dd {
  margin: 0;
  color: var(--text-dark);
}

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-rows dd > .faq-chips:not(:first-child) { margin-top: var(--space-2); }

.faq-chips li {
  padding: 2px var(--space-2);
  background-color: color-mix(in srgb, var(--accent) 32%, var(--text-light));
  color: var(--text-dark);
  font-size: var(--font-size-small);
  line-height: 1.5;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.faq-check {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-check li {
  position: relative;
  padding-left: calc(20px + var(--space-3));
}

/* Häkchen: gelbe Fasen-Kachel + dunkler Haken aus zwei Rahmenkanten */
.faq-check li::before,
.faq-check li::after {
  content: "";
  position: absolute;
  top: 0.18em;
}

.faq-check li::before {
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--accent);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.faq-check li::after {
  left: 7px;
  top: calc(0.18em + 3px);
  width: 6px;
  height: 11px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.faq-note {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--text-light));
  color: var(--text-dark);
}

@media (min-width: 560px) {
  .faq-check { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

@media (max-width: 359px) {
  .faq-rows { grid-template-columns: 1fr; }
}

/* Antworten mit längeren Sätzen (Fahrstunden/Kosten): auf dem Handy
   Bezeichnung über dem Text, damit der Text nicht in eine schmale Spalte
   gequetscht wird. */
@media (max-width: 559px) {
  .faq-rows--stack { grid-template-columns: 1fr; }
}

/* Beim Öffnen laufen Zeilen und Listenpunkte leicht gestaffelt ein. */
.faq-item[open] :where(.faq-rows__row, .faq-check li, .faq-note) {
  transition: opacity 260ms ease-out, translate 300ms ease-out;
  transition-delay: calc(90ms + var(--faq-n, 0) * 45ms);
}

@starting-style {
  .faq-item[open] :where(.faq-rows__row, .faq-check li, .faq-note) {
    opacity: 0;
    translate: 0 -4px;
  }
}

:where(.faq-rows__row, .faq-check li):nth-child(2) { --faq-n: 1; }
:where(.faq-rows__row, .faq-check li):nth-child(3) { --faq-n: 2; }
:where(.faq-rows__row, .faq-check li):nth-child(4) { --faq-n: 3; }
:where(.faq-rows__row, .faq-check li):nth-child(5) { --faq-n: 4; }
.faq-note { --faq-n: 4; }

.faq-item__a a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-hover);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.faq-item__a a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Eintritt beim Scrollen: Überschrift und Karten steigen gestaffelt auf.
   initFaq() setzt .faq--pending (versteckt) und beim Sichtbarwerden
   .is-inview; ohne JS oder mit reduzierter Bewegung steht alles sofort da. */
@keyframes faq-rise {
  from { opacity: 0; translate: 0 20px; }
}

.faq--pending :where(.faq__heading, .faq-item) { opacity: 0; }

.faq.is-inview :where(.faq__heading, .faq-item) {
  animation: faq-rise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.faq.is-inview .faq__heading { animation-delay: 0ms; }
.faq.is-inview .faq-item:nth-child(1) { animation-delay: 90ms; }
.faq.is-inview .faq-item:nth-child(2) { animation-delay: 160ms; }
.faq.is-inview .faq-item:nth-child(3) { animation-delay: 230ms; }
.faq.is-inview .faq-item:nth-child(4) { animation-delay: 300ms; }
.faq.is-inview .faq-item:nth-child(5) { animation-delay: 370ms; }

/* Weiches Auf-/Zuklappen (CSS-Pfad) */
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 300ms ease-in-out, content-visibility 300ms ease-in-out allow-discrete;
}

.faq-item[open]::details-content { block-size: auto; }

@media (min-width: 768px) {
  .faq { padding-block: var(--space-16) var(--space-30); }
  .faq-item__q { font-size: calc(var(--font-size-body) + 2px); }
  .faq-item__summary { padding-inline: var(--space-8) var(--space-4); }
  .faq-item__a { padding-inline: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::before,
  .faq-item::after,
  .faq-item::details-content,
  .faq-item__icon,
  .faq-item__icon svg,
  .faq-item__a,
  .faq-item[open] .faq-item__a,
  .faq-item[open] :where(.faq-rows__row, .faq-check li, .faq-note) { transition: none; }

  .faq.is-inview :where(.faq__heading, .faq-item) { animation: none; }
}

/* „Weitere Klassen im Überblick“ auf den Klassen-Seiten nutzt denselben
   FAQ-Abschnitt (.faq/.faq-item). Der folgende dunkle Abschluss (.page-cta,
   round-t) bekommt dort Zwickel in der hellgrauen FAQ-Farbe statt Weiß. */
.faq + .page-cta { --wedge-above: var(--background-light); }

/* Footer unter der hellen FAQ: abgerundete Oberkante, Zwickel in der Farbe der FAQ */
.site-footer.round-t { --wedge-above: var(--background-light); }

/* ==========================================================================
   Hero „Jetzt anrufen“ als Milchglas (.ghost-btn--glass)
   --------------------------------------------------------------------------
   Statt Schwarz-Chrom: halbtransparentes Weiß mit backdrop-filter, das Video
   (bzw. das Poster) dahinter wird weichgezeichnet. Größe, Form (8px), Text und
   Position bleiben wie bei allen .ghost-btn.
   Wichtig für den Blur: am Button und an den Eltern bis zum Video darf kein
   filter / clip-path / mask / opacity < 1 / will-change liegen, sonst bricht
   der Backdrop ab (Backdrop-Root) — darum Schatten und Fokus-Ring per
   box-shadow, nicht per drop-shadow. Der Goldrand ist der echte 2px-border (Maß
   unverändert); ::before ist nur der Glanz. overflow:hidden schneidet am
   Innenrand ab, ein Rahmen im Pseudo-Element wäre deshalb unsichtbar.
   ========================================================================== */
.ghost-btn.ghost-btn--glass {
  --streak: 16%;
  --glass: color-mix(in srgb, var(--text-light) 16%, transparent);
  --glass-hover: color-mix(in srgb, var(--text-light) 24%, transparent);
  /* leichter dunkler Schleier (--primary 20 %) unter dem Weiß: hält die helle
     Schrift auch vor hellen Videostellen über 4,5:1 */
  --veil: linear-gradient(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
  background: var(--veil), var(--glass);
  background-clip: padding-box;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--text-light);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 40%, transparent);
  filter: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 25%, transparent),
    0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 250ms var(--m-ease), background-color 250ms var(--m-ease), border-color 250ms var(--m-ease), box-shadow 250ms var(--m-ease);
}

/* feiner Glanz oben (Weiß 20 % → 0 % zur Mitte) */
.ghost-btn.ghost-btn--glass::before {
  inset: 0;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--text-light) 20%, transparent) 0%, transparent 50%);
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .ghost-btn.ghost-btn--glass:hover {
    background: var(--veil), var(--glass-hover);
    background-clip: padding-box;
    border-color: var(--accent);
    color: var(--text-light);
    filter: none;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text-light) 25%, transparent),
      0 8px 24px color-mix(in srgb, var(--primary) 40%, transparent);
  }

  .ghost-btn.ghost-btn--glass:hover::before { filter: none; }
}

.ghost-btn.ghost-btn--glass:active {
  background: var(--veil), var(--glass-hover);
  background-clip: padding-box;
  border-color: var(--accent);
  color: var(--text-light);
  filter: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 25%, transparent),
    0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Fokus-Ring wie früher (Doppelring per box-shadow; kein filter am Button) */
.ghost-btn.ghost-btn--glass:focus-visible {
  filter: none;
  box-shadow: var(--focus-ring);
}

/* Ohne backdrop-filter-Unterstützung: dunkler Schleier, damit die Schrift
   auf dem Video lesbar bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ghost-btn.ghost-btn--glass,
  .ghost-btn.ghost-btn--glass:hover,
  .ghost-btn.ghost-btn--glass:active { background: color-mix(in srgb, var(--primary) 45%, transparent); background-clip: padding-box; }
}

/* ==========================================================================
   Kopfbereich der Klassen-Seiten (.page-header--cover)
   --------------------------------------------------------------------------
   Das Fahrzeugfoto ist der Hintergrund des Kopfbereichs: unverzerrt
   (object-fit: cover), Ausschnitt pro Klasse über --kh-x / --kh-y. Ein
   dunkler Verlauf (--primary) hält Brotkrumen, Titel, Untertitel und die
   gelben Info-Schilder unten links lesbar. Unten ein gerader Abschluss mit
   gelber Doppellinie — keine runden Ecken, kein Schimmer.
   Mobil steht das Foto im Fluss (fast quadratisch, Fahrzeug ganz sichtbar) und der
   Text überlappt nur dessen dunkel auslaufenden unteren Rand; so kann der
   Text nie über helle Bildteile rutschen, egal wie lang Untertitel oder
   Schilder umbrechen. Ab 900px steht das Foto rechts (ca. 60 % der Breite)
   und läuft nach links weich in --primary aus; der Text steht links auf
   dunklem Grund.
   ========================================================================== */
.page-header--cover {
  --kh-x: 50%;
  --kh-y: 100%;
  /* Doppellinie unten: 4px Gelb, 3px Dunkel, 2px Gelb */
  --kh-rule: 9px;
  --kh-overlap: 56px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  min-height: 0;
  padding-bottom: var(--kh-rule);
  background-color: var(--primary);
}

.page-header--cover .page-header__bg {
  position: relative;
  z-index: -1;
  margin: 0;
  /* etwas höher als das 5:4-Foto (nur leichter seitlicher Anschnitt), damit
     der Kopf mobil rund zwei Drittel der Bildschirmhöhe einnimmt */
  aspect-ratio: 21 / 20;
  /* greift erst auf breiteren Bildschirmen (Tablet hochkant), auf dem Handy
     ist das Foto ohnehin niedriger */
  max-height: 62svh;
}

.page-header--cover .page-header__bg picture,
.page-header--cover .page-header__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-header--cover .page-header__bg img {
  object-fit: cover;
  object-position: var(--kh-x) var(--kh-y);
}

/* Verlauf: oben leicht abgedunkelt (Kopfleiste), in der Mitte offen fürs
   Fahrzeug, zum unteren Fotorand deckend in --primary. */
.page-header--cover .page-header__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 30%, transparent) 0%,
    transparent 18%,
    transparent 58%,
    color-mix(in srgb, var(--primary) 60%, transparent) 72%,
    color-mix(in srgb, var(--primary) 90%, transparent) 82%,
    var(--primary) 100%
  );
}

/* gelbe Doppellinie als gerader Abschluss */
.page-header--cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--kh-rule);
  background-image: linear-gradient(
    to bottom,
    var(--accent) 0 4px,
    var(--primary) 4px 7px,
    var(--accent) 7px 9px
  );
}

.page-header--cover .page-header__inner {
  position: relative;
  margin-top: calc(-1 * var(--kh-overlap));
  padding-block: 0 var(--space-8);
}

.page-header--cover .breadcrumb {
  color: color-mix(in srgb, var(--text-light) 75%, transparent);
}

.page-header--cover .page-header__subtitle {
  color: color-mix(in srgb, var(--text-light) 85%, transparent);
}

/* --- gelbe Info-Schilder (nur Fakten, die auf der Seite stehen) --- */
.page-header__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.page-header__facts li,
.kb-info-card__q {
  padding: var(--space-1) var(--space-3);
  background-color: var(--accent);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* Ausschnitt pro Klasse (mobil): Fahrzeug im Bild halten */
.page-header--klasse-a { --kh-x: 85%; }
.page-header--klasse-b { --kh-x: 50%; }
.page-header--klasse-c { --kh-x: 55%; }
.page-header--klasse-d { --kh-x: 55%; }

/* Abstand zum folgenden Text deutlich kleiner */
.page-header--cover + .page-body { padding-top: var(--space-10); }

@media (min-width: 900px) {
  .page-header--cover {
    display: flex;
    align-items: center;
    min-height: min(70svh, 720px);
  }

  /* Foto rechts, höchstens 1400px breit (= Originalbreite): bei max. 720px
     Höhe wird es so nie über seine echte Größe hochskaliert. */
  .page-header--cover .page-header__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--kh-rule);
    width: min(60%, 1400px);
    max-height: none;
    aspect-ratio: auto;
  }

  /* Weicher Auslauf nach links in --primary (viele Zwischenstufen, damit
     keine Kante sichtbar wird) plus leichte Abdunklung unten. */
  .page-header--cover .page-header__bg::after {
    background-image:
      linear-gradient(
        to right,
        var(--primary) 0%,
        color-mix(in srgb, var(--primary) 94%, transparent) 4%,
        color-mix(in srgb, var(--primary) 80%, transparent) 9%,
        color-mix(in srgb, var(--primary) 60%, transparent) 14%,
        color-mix(in srgb, var(--primary) 38%, transparent) 19%,
        color-mix(in srgb, var(--primary) 20%, transparent) 24%,
        color-mix(in srgb, var(--primary) 8%, transparent) 29%,
        transparent 34%
      ),
      linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--primary) 35%, transparent) 100%);
  }

  .page-header--cover .page-header__inner {
    margin-top: 0;
    padding-block: var(--space-16) var(--space-12);
  }

  .page-header--cover .page-header__text {
    max-width: 46%;
  }

  /* Größer am Desktop: Titel wie die großen Überschriften (z. B. „Bereit?“),
     Untertitel und Schilder passend dazu. */
  .page-header--cover .page-header__title {
    font-size: var(--font-size-contact-heading);
  }

  .page-header--cover .page-header__subtitle {
    font-size: var(--font-size-h3);
    line-height: 1.4;
  }

  .page-header--cover .page-header__facts {
    gap: var(--space-3);
    margin-top: var(--space-8);
  }

  .page-header--cover .page-header__facts li {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-body);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  }

  .page-header--cover + .page-body { padding-top: var(--space-12); }

  /* Ausschnitt: Foto füllt die Breite des rechten Felds, vertikal so,
     dass Dach bzw. ganzes Motorrad sichtbar bleiben */
  .page-header--klasse-a { --kh-x: 50%; --kh-y: 100%; }
  .page-header--klasse-b { --kh-x: 50%; --kh-y: 70%; }
  .page-header--klasse-c { --kh-x: 50%; --kh-y: 25%; }
  .page-header--klasse-d { --kh-x: 50%; --kh-y: 30%; }
}

/* ==========================================================================
   Steckbrief-Schild „Wer? / Wie? / Was?“ (.kb-info-cards, Klassen-Seiten)
   --------------------------------------------------------------------------
   EIN dunkles Schild statt drei Kästen: gefaste Ecken (--badge-notch),
   oben die gelbe Doppellinie wie im Klassen-Kopf (4px Gelb, 3px Dunkel,
   2px Gelb), innen drei Zeilen mit feinen gelben Trennlinien. Dazu der
   gelbe Schimmer (.shine--gold.shine--soft im Markup). Dessen Ebenen
   (::before/::after, z-index -1) liegen über dem eigenen Hintergrund des
   Schilds — die Doppellinie sitzt deshalb im Hintergrund der obersten
   Zeile(n), also über dem Schimmer, und wird nicht abgedunkelt.
   Das Etikett „Wer?“ usw. nutzt den Stil der Info-Schilder im Klassen-Kopf
   (.page-header__facts li). Mobil untereinander, ab 768px drei Spalten mit
   senkrechten Trennlinien.
   ========================================================================== */
.kb-info-cards {
  --kh-rule: 9px;
  --kb-cut: var(--badge-notch);
  --kb-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --kb-rule-bg: linear-gradient(to bottom, var(--accent) 0 4px, var(--primary) 4px 7px, var(--accent) 7px 9px) top / 100% var(--kh-rule) no-repeat;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 0 var(--space-16);
  background-color: var(--primary);
  clip-path: polygon(var(--kb-cut) 0, calc(100% - var(--kb-cut)) 0, 100% var(--kb-cut), 100% calc(100% - var(--kb-cut)), calc(100% - var(--kb-cut)) 100%, var(--kb-cut) 100%, 0 calc(100% - var(--kb-cut)), 0 var(--kb-cut));
}

.kb-info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
}

.kb-info-card + .kb-info-card {
  border-top: 1px solid var(--kb-line);
}

/* Doppellinie oben (mobil: über der ersten Zeile) */
.kb-info-card:first-child {
  padding-top: calc(var(--space-4) + var(--kh-rule));
  background: var(--kb-rule-bg);
}

.kb-info-card__q {
  margin: 0;
}

.kb-info-card__a {
  margin: 0;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .kb-info-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Desktop: Doppellinie über allen drei Spalten */
  .kb-info-card,
  .kb-info-card:first-child {
    gap: var(--space-3);
    padding: calc(var(--space-6) + var(--kh-rule)) var(--space-6) var(--space-6);
    background: var(--kb-rule-bg);
  }

  .kb-info-card + .kb-info-card {
    border-top: 0;
    border-left: 1px solid var(--kb-line);
  }
}