/* =========================================================
   ARI Fahrschule Freiburg, Gestaltung
   Farben aus dem Logo: Gold, Anthrazit, Creme.
   Aufbau: 1. Grundlagen  2. Bausteine  3. Abschnitte
           4. Assistent   5. Bewegung   6. Schmale Bildschirme
   ========================================================= */

/* ---------------------------------------------------------
   1. Grundlagen
   --------------------------------------------------------- */
:root {
  /* Farben direkt aus dem Logo: Weiss, Gold, das Grau der Wortmarke.
     Die Textwerte sind so weit abgedunkelt, dass sie den Kontrast
     nach WCAG AA schaffen, reines Logo-Gold auf Weiss tut das nicht. */
  --gold: #c9b41e;          /* Logo-Gold, für Flächen und Linien */
  /* Eigener Ton nur für den Fokusring. Logo-Gold schafft auf Weiss nur
     2,1:1, WCAG verlangt für Fokusanzeigen 3:1, wer mit der Tastatur
     bedient, sah kaum, wo er steht. Dieser Ton hält auf jedem Grund der
     Seite mindestens 3,2:1, von Weiss bis Asphalt, in beiden Modi. */
  --fokus: #9c8911;
  --gold-titel: #a89413;    /* große Schrift: 3,0:1 auf Weiss */
  --gold-deep: #7e6d0a;     /* kleine Schrift: 5,2:1 auf Weiss */
  --gold-tint: #fbf7e2;

  --ink: #2c2d2c;
  --ink-2: #595a59;
  --ink-3: #6e6f6e;

  --paper: #ffffff;
  --surface: #fafaf8;
  --band: #f6f6f3;
  --card: #ffffff;
  --cream: #fcf9ea;
  --stone: #f3f3f1;

  --line: #e7e6e1;
  --line-soft: #f1f0ec;

  --shell: min(1200px, 90vw);
  /* Drei Stufen, mehr nicht: Flächen, Kleinteile, Schaltflächen.
     Bilder und randlose Bänder laufen ohne Rundung an die Kante. */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Der Asphalt unter der Bühne. Bewusst ein fester Wert und kein Token,
     das im Dunkelmodus kippt: Die Fahrbahn ist in beiden Modi dunkel. */
  --asphalt: #1f2022;

  --shadow-sm: 0 1px 2px rgba(44, 45, 44, .04), 0 6px 20px rgba(44, 45, 44, .05);
  --shadow-md: 0 2px 6px rgba(44, 45, 44, .06), 0 18px 44px rgba(44, 45, 44, .09);

  --ease: cubic-bezier(.22, .68, .32, 1);      /* lange Einfahrten */
  --ease-out: cubic-bezier(.23, 1, .32, 1);    /* kurze Rückmeldungen */
  --header-h: 76px;
}

html[data-theme="dark"] {
  --gold: #dcc63f;
  --gold-titel: #dcc63f;    /* auf dunklem Grund reicht das Logo-Gold */
  --gold-deep: #e8d566;
  --gold-tint: #2a2716;

  --ink: #f2f1ee;
  --ink-2: #c5c5c1;
  --ink-3: #8e8f8c;

  --paper: #16181a;
  --surface: #1d1f21;
  --band: #1a1d1f;
  --card: #23262a;
  --cream: #23241f;
  --stone: #212325;

  --line: #2f3134;
  --line-soft: #26282a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45);
}

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

html {
  /* Erlaubt das Überblenden auf height/block-size: auto. Ohne das lässt
     sich eine Antwort unbekannter Höhe nicht animieren. */
  interpolate-size: allow-keywords;
  /* Waagerecht abschneiden gehoert an das Wurzelelement, nicht an body.
     Auf body macht es den Body zum Scrollbehaelter, dann greift
     scroll-behavior auf html ins Leere und Sprungmarken funktionieren
     gar nicht mehr. Am Wurzelelement wird der Wert auf den Anzeigebereich
     uebertragen, html bleibt der Scroller. Gebraucht wird es, weil Buehne,
     Asphaltkante und Fahrbahn bewusst ueber die Seitenraender hinausgehen. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3, h4 {
  font-family: "Rubik", "Onest", system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.028em;
  line-height: 1.08;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 7.2vw, 5.1rem); font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; }

p { margin: 0 0 1.1em; color: var(--ink-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* Gold mit Weiss schaffte nur 2,1:1, im Dunkelmodus 1,7:1. Genau beim
   Markieren einer Nummer verschwand der Text. Dunkle Schrift auf Gold
   liest sich in beiden Modi. */
::selection { background: var(--gold); color: #24200f; }

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

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

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -180%);
  background: var(--ink); color: var(--paper); padding: 10px 20px;
  border-radius: var(--radius-pill); z-index: 200; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Seitenwechsel ---------------------------------------
   Beim Klick auf Klassen oder Preise blitzte die Seite weiß auf und
   Kopfzeile samt Logo sprangen neu ins Bild. Mit benannten Elementen
   bleiben sie stehen, nur der Inhalt blendet über. Browser, die das
   nicht kennen, laden wie bisher, es fehlt ihnen nichts.        */
@view-transition { navigation: auto; }

.site-header { view-transition-name: kopfzeile; }
.site-header .brand { view-transition-name: wortmarke; }
.site-footer { view-transition-name: fusszeile; }
.ari-root { view-transition-name: assistent; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }

/* --- Wechsel zwischen hell und dunkel ---
   Das neue Farbschema waechst als Kreis aus dem Schalter heraus, statt
   hart umzuspringen. Waehrend des Wechsels geben Kopfzeile, Wortmarke,
   Fusszeile und Assistent ihre eigenen Namen ab: Sonst waeren sie eigene
   Gruppen, die der Kreis nicht erfasst, sie wuerden schlagartig
   umspringen, waehrend der Rest sauber aufzieht. Ohne Unterstuetzung
   oder bei weniger Bewegung schaltet das Skript schlicht um. */
html.themenwechsel .site-header,
html.themenwechsel .site-header .brand,
html.themenwechsel .site-footer,
html.themenwechsel .ari-root { view-transition-name: none; }

html.themenwechsel::view-transition-old(root) {
  animation: none; mix-blend-mode: normal; z-index: 0;
}
html.themenwechsel::view-transition-new(root) {
  animation: themenKreis 520ms var(--ease-out);
  mix-blend-mode: normal; z-index: 1;
}
@keyframes themenKreis {
  from { clip-path: circle(0 at var(--wechsel-x) var(--wechsel-y)); }
  to   { clip-path: circle(var(--wechsel-r) at var(--wechsel-x) var(--wechsel-y)); }
}

/* Kopf- und Fußzeile sollen nicht überblenden, sondern schlicht bleiben. */
::view-transition-old(kopfzeile),
::view-transition-new(kopfzeile),
::view-transition-old(fusszeile),
::view-transition-new(fusszeile),
::view-transition-old(assistent),
::view-transition-new(assistent) { animation: none; mix-blend-mode: normal; }

/* ---------------------------------------------------------
   2. Bausteine
   --------------------------------------------------------- */

.lead { font-size: clamp(1.08rem, 1.5vw, 1.26rem); color: var(--ink-2); max-width: 62ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Rubik", sans-serif; font-size: .95rem; font-weight: 500;
  padding: 15px 28px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 140ms var(--ease-out), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
/* Hover nur dort, wo es einen Zeiger gibt: Auf Tastgeräten bliebe der
   Zustand sonst nach dem Tippen kleben. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-md); }
html[data-theme="dark"] .btn-primary { background: var(--ink); color: #14161a; }

.btn-gold { background: var(--gold); color: #24200f; box-shadow: 0 10px 26px rgba(200, 162, 51, .28); }
.btn-gold:hover { background: var(--gold-deep); color: #1c1906; }
html[data-theme="dark"] .btn-gold { color: #17150c; }

.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
}

/* Alles, was man drückt, antwortet gleich. Der Wert bleibt bewusst
   knapp unter der Wahrnehmungsschwelle: Man sieht es nicht, man merkt es. */
.icon-btn:active,
.ari-launcher:active,
.ari-send:active,
.ari-chip:active,
.ari-hbtn:active,
.contact-card:active,
.kl-mehr:active,
.zustimmung:active input { transform: scale(.97); }
.ari-send { transition: background .2s var(--ease), transform 140ms var(--ease-out); }
.contact-card:active { transform: scale(.99); }

/* ---------------------------------------------------------
   3. Abschnitte
   --------------------------------------------------------- */
section { padding: clamp(76px, 9vw, 132px) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head p { margin-top: 20px; font-size: clamp(1.02rem, 1.3vw, 1.15rem); }

/* --- Kopfzeile --- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), height .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line-soft); height: 66px; }
/* Das Menue auf schmalen Schirmen richtet sich an dieser Groesse aus. */
html { --kopf-hoehe: var(--header-h); }
html:has(.site-header.is-stuck) { --kopf-hoehe: 66px; }
.site-header .shell { display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img {
  display: block; height: 40px; width: auto;
  transition: transform .4s var(--ease);
}
.brand:hover img { transform: translateY(-1px); }
.site-header.is-stuck .brand img { height: 34px; }
/* Zwei Fassungen im Markup, sichtbar ist immer genau eine.
   Die Regeln brauchen .brand davor, sonst gewinnt .brand img. */
.brand .logo-dark { display: none; }
html[data-theme="dark"] .brand .logo-light { display: none; }
html[data-theme="dark"] .brand .logo-dark { display: block; }
.site-footer .brand .logo-light { display: none; }
.site-footer .brand .logo-dark { display: block; }
.site-footer .brand img { height: 46px; }

.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  display: block; padding: 9px 15px; border-radius: var(--radius-pill);
  font-size: .93rem; color: var(--ink-2); text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.main-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* Der aktive Punkt in Gold. Der Rahmen liegt als innerer Schatten an,
   damit die Zeile beim Wechsel nicht um einen Pixel springt. */
.main-nav a[aria-current="page"] {
  color: var(--gold-deep);
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
  font-weight: 500;
}
.main-nav a[aria-current="page"]:hover {
  color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }

.nav-toggle { display: none; }

/* --- Bühne: randlos, harte Naht zwischen Papier und Foto ---
   Kein weicher Verlauf ueber das Bild: eine harte Kante liest sich als
   Absicht, ein Verlauf als Baukasten. Und es steht kein Wort auf dem
   Foto, damit ist der Kontrast unabhaengig vom Farbschema gesichert. */
/* Die Fahrbahn hört nicht am Ende der Bühne auf: Sie läuft unter der
   Info-Leiste weiter und geht in das Zahlenband über. Vorher stand eine
   weisse Leiste zwischen zwei dunklen Bändern, das zerschnitt den Asphalt
   in zwei Stücke. Der Hero traegt deshalb den Asphalt, die Bühne legt
   ihren hellen Grund darüber. */
.hero { position: relative; padding: 0; background: var(--asphalt); }

.hero-stage {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: clamp(560px, 86svh, 820px);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(196px, 23vw, 286px);
  background: var(--paper);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0 0 0 auto; width: 43%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%;
  /* Das Handyfoto hat einen kalten LED-Stich und arbeitet so gegen das
     Gold. Entsaettigt und leicht angewaermt passt es zur Marke. */
  filter: saturate(.72) contrast(1.06) brightness(1.03);
  animation: mediaIn 1.1s var(--ease) backwards;
}
html[data-theme="dark"] .hero-media img { filter: saturate(.62) contrast(1.05) brightness(.86); }
@keyframes mediaIn { from { opacity: 0; transform: scale(1.03); } }

/* Tonung Richtung Marke, bewusst schwach */
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold) 12%, transparent),
              color-mix(in srgb, var(--ink-2) 22%, transparent));
  mix-blend-mode: multiply;
}
/* Haarlinie auf der Naht: macht aus zwei Flaechen eine Komposition.
   Sie endet an der Fahrbahn. Vorher lief sie darüber hinweg, weil sie
   über der Fahrbahn liegt, das sah aus wie ein Strich auf der Strasse. */
.hero-media::before {
  content: ""; position: absolute; z-index: 2; width: 1px;
  inset: 0 auto clamp(84px, 10vw, 122px) 0;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 34rem; padding-inline-end: clamp(1.5rem, 5vw, 4rem); }
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  text-wrap: normal; margin-bottom: 24px;
}
.hero .lead { max-width: 44ch; }
.hero h1 .accent { color: var(--gold-titel); position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .075em;
  background: var(--gold); opacity: .4; border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  animation: swipe 1s var(--ease) .6s forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* --- Der Wagen: Karosserie steht, die Felgen drehen sich ---
   Die Felge ist gezeichnet (images/felge.svg), nicht aus dem Foto
   geschnitten: dadurch ist sie exakt rund, hat keine Schnittkante und
   bleibt bei jeder Größe scharf. Sie liegt innerhalb des Reifens, der
   Teil des Fahrzeugbildes bleibt, dort kann nichts durchblitzen.
   Die Prozentwerte stammen aus der Vermessung des Fahrzeugbildes. */
.wagen { position: relative; display: block; }
.wagen-karosse { display: block; width: 100%; height: auto; }
.felge {
  position: absolute; top: 50.996%; width: 14.554%; height: auto;
}
.felge-v { left: 13.028%; }
.felge-h { left: 73.944%; }
/* Im Hero sitzt jede Felge in einem Lager (span). Das Lager uebernimmt
   die Position, das Bild fuellt es aus, so kann der Auftakt dem Lager
   eine zusaetzliche Drehung geben, die sich mit der endlosen Drehung des
   Bildes addiert, ohne deren Phase anzufassen. */
.hero-car .felge-lager {
  position: absolute; top: 50.996%; width: 14.554%;
}
.hero-car .felge-lager-v { left: 13.028%; }
.hero-car .felge-lager-h { left: 73.944%; }
.hero-car .felge-lager .felge {
  position: static; top: auto; left: auto; width: 100%; display: block;
}

/* --- Fahrbahn: das Auto steht, die Strasse laeuft darunter durch ---
   Ein nach links zeigendes Auto, das nach rechts wandert, sieht aus wie
   Rueckwaertsfahren. Deshalb das Laufband-Prinzip aus der Autowerbung. */
.hero-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(84px, 10vw, 122px);
  background: var(--asphalt);
  z-index: 0;
}
html[data-theme="dark"] .hero-ground { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hero-ground::before {
  content: ""; position: absolute; left: -60px; right: -60px; top: 46%;
  height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg,
              var(--gold) 0 36px, transparent 36px 64px);
  animation: fahrbahn 1.1s linear infinite;
}
@keyframes fahrbahn { to { transform: translateX(64px); } }

.hero-car {
  position: absolute; left: 0; right: 0; z-index: 1;
  bottom: calc(clamp(84px, 10vw, 122px) - 20px);
  display: flex; justify-content: center; pointer-events: none;
}
.hero-car .wagen {
  /* Die Quelldatei ist 852 px breit. Mehr Anzeigebreite waere auf
     dichten Displays sichtbar weich. */
  width: clamp(260px, 40vw, 500px);
  filter: drop-shadow(0 16px 22px rgba(27, 30, 35, .22));
  animation: einfahrt .9s cubic-bezier(.16, .84, .44, 1) .2s backwards;
}
html[data-theme="dark"] .hero-car .wagen { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)); }
/* Der Wagen zeigt nach links und fährt nach links, die Felgen drehen also
   gegen den Uhrzeigersinn. Die Dauer entspricht der Fahrbahn darunter. */
.hero-car .felge { animation: felgeLinks 1.1s linear infinite; }
@keyframes felgeLinks { to { transform: rotate(-1turn); } }
@keyframes einfahrt { from { opacity: 0; transform: translateX(38px); } }

/* --- Auftakt: der Wagen zieht den goldenen Strich ---
   Beim ersten Aufruf einer Sitzung liegt Asphalt über der Seite, nur
   das Fahrbahnband der Bühne bleibt frei. Der Golf schiesst von rechts
   herein und zieht dabei die goldene Mittellinie wie einen Stift hinter
   sich her; danach reisst der Asphalt entlang dieser Linie an seinen
   Abrisskanten auf, und derselbe Strich zieht sich als Unterstrich
   unter "Führerschein", Strasse und Überschrift sind eine Geste.

   Die Mittellinie und die Felgen laufen dabei durchgehend in ihren
   endlosen Schleifen weiter; der Auftakt legt nur Zusätze darüber
   (einen Deckstreifen, ein zusätzlich drehendes Lager, einen Kegel
   Licht). Faellt die Auftaktklasse, ausgeloest durch Eingriff oder Zeitgeber
   im Skript, kollabiert alles in den Ruhezustand der Seite: Das
   letzte Bild des Auftakts ist das erste Bild der Seite.

   Die Bewegung liegt vollstaendig im CSS und laeuft mit forwards aus;
   bleibt das Skript aus, oeffnet sich der Vorhang trotzdem. Das Skript
   misst nur die Naht (--auftakt-naht/-fuss) und raeumt hinterher auf.

   Zeitplan: Wagen und Felgenschub 60 bis 1180, Linie 60 bis 1400 (Knick bei
   998), Licht statisch bis 1020, aus bis 1400, Vorhang 1020 bis 1520, Text
   1040/1085/1130 je 380, Unterstrich 1380 bis 1900, Aufraeumen 1600.

   Auf schmalen Schirmen gilt ein eigener Plan, siehe ganz unten in
   diesem Abschnitt: Dort faellt der Vorhang weg. */
.auftakt { display: none; }
.auftakt-laeuft .auftakt { display: block; }
.auftakt span {
  position: fixed; left: 0; right: 0; z-index: 80;
  background: var(--asphalt);
  /* Die Flaechen schlucken Klicks, sie reichen sie nicht durch. Vorher
     stand hier pointer-events: none: Der Treffertest ging durch den
     Asphalt hindurch auf die Knoepfe der Buehne, die waehrend des
     Auftakts nur durchsichtig, aber weiter bedienbar sind. Wer die
     schwarze Flaeche wegklicken wollte, landete im Telefonwaehler.
     Eine Dauersperre entsteht nicht: Die Flaechen fahren mit forwards
     aus dem Bild und nehmen ihren Trefferbereich mit. Die Kopfzeile
     liegt ohnehin darueber und bleibt die ganze Zeit bedienbar. */
}
.auftakt-oben {
  top: 0; height: var(--auftakt-naht, 70%);
  animation: auftaktOben 500ms var(--ease) 1020ms forwards;
}
.auftakt-unten {
  top: var(--auftakt-fuss, 70%); bottom: 0;
  animation: auftaktUnten 500ms var(--ease) 1020ms forwards;
}
@keyframes auftaktOben  { to { transform: translateY(-100%); } }
@keyframes auftaktUnten { to { transform: translateY(100%); } }

/* Abrisskanten: Asphalt-Fransen stehen über die schnurgeraden Flächen
   hinaus. Geschlossen liegen sie Asphalt auf Asphalt im Fahrbahnband
   und sind unsichtbar; erst wenn die Flächen über die helle Bühne
   fahren, erscheint der Riss, genau im Moment des Reissens. Sie haben
   keine eigene Bewegung, sie erben das translateY der Flächen.
   Hoehe hart bei 30px gedeckelt: Die Goldlinie liegt mindestens 38px
   unter der Naht (46 % von minimal 84px Fahrbahn), 3px Überlappung
   plus 30px Fransen = 33px, die Fransen erreichen die Linie nie. */
.auftakt-oben::after,
.auftakt-unten::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(16px, 2.4vw, 30px);
  background: url("../images/asphalt-kante.png") 0 0 / max(1000px, 100vw) 100% repeat-x;
  pointer-events: none;
}
.auftakt-oben::after { top: 100%; }
.auftakt-unten::after { bottom: 100%; transform: scaleY(-1); }

/* Der Wagen faehrt über dem Vorhang, aber unter der Kopfzeile: "Anrufen"
   ist ab der ersten Millisekunde erreichbar. */
.auftakt-laeuft .hero-car { z-index: 85; }

/* Einfahrt mit Kamera-Physik: Der Wagen schiesst herein, die Kamera
   holt auf, überholt um eine Handbreit und korrigiert zurueck, der
   Wagen driftet minimal über die Ruheposition hinaus und setzt sich
   dann exakt auf translateX(0). Nichts bremst: Das ewige Cruisen der
   Bühne wird nahtlos übernommen, weil der Endwert die Identitaet ist.
   Abbruch mitten im Überschwinger snapt maximal 0.5vw, das traegt. */
.auftakt-laeuft .hero-car .wagen {
  animation: auftaktWagen 1120ms linear 60ms backwards;
}
@keyframes auftaktWagen {
  0%   { transform: translateX(118vw); animation-timing-function: cubic-bezier(.16, .8, .3, 1); }
  85%  { transform: translateX(-0.5vw); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  100% { transform: translateX(0); }
}
/* Nach dem Auftakt steht der Wagen. Ohne das liefe die Einfahrt der Bühne
   ein zweites Mal, sobald die Auftaktklasse faellt.
   Dasselbe gilt, wenn jemand ueber eine Sprungmarke kommt: Er will zu
   einem Abschnitt weiter unten, und die Einfahrt fuhr ihm dabei kurz
   durchs Bild. Sie gehoert zur Ankunft oben, nicht zum Sprung. */
.auftakt-fertig .hero-car .wagen,
.sprungmarke .hero-car .wagen { animation: none; }


/* Felgenschub: Das Lager dreht waehrend der Einfahrt zusaetzlich von
   2turn auf 0, abnehmender Winkel, also gegen den Uhrzeigersinn wie
   felgeLinks (0 auf -1turn). Lager- und Felgendrehung addieren sich;
   die Kurve ist dieselbe wie die erste Phase des Wagens und endet mit
   waagerechter Tangente: Die Übergabe ans Cruisen ist nahtlos, die
   Endlosdrehung auf dem Bild wurde nie angefasst. Zwei Umdrehungen
   statt physikalisch korrekter sieben: Lesbarkeit vor Simulation. */
.auftakt-laeuft .hero-car .felge-lager {
  animation: felgenSchub 1120ms cubic-bezier(.16, .8, .3, 1) 60ms backwards;
}
@keyframes felgenSchub { from { transform: rotate(2turn); } to { transform: rotate(0turn); } }

/* Der goldene Strich: Die Mittellinie laeuft von Anfang an in ihrer
   endlosen Schleife, liegt aber unter einem asphaltfarbenen Deckstreifen.
   Der schiebt sich nach links aus dem Bild und legt die Linie von rechts
   her frei, der Wagen zieht den Strich hinter sich her. Am Knick der
   Kurve liegt die Aufdeckfront unter der Karosserie (52 bis 69vw breit),
   die Übergabe ist deshalb auf jeder Viewportbreite verdeckt; danach
   reisst sich der Strich los und vollendet sich zum linken Rand.
   Bewusst KEINE Maske auf .hero-ground::before: Das Element pendelt
   selbst per translateX in der Schleife, eine Maske pendelte mit.
   Der Überhang -60px entspricht dem Bleed von .hero-ground::before, wer den eine aendert, aendert beide. */
.auftakt-laeuft .hero-ground::after {
  content: ""; position: absolute; inset: 0 -60px; z-index: 1;
  background: var(--asphalt); pointer-events: none;
  animation: linieZiehen 1340ms linear 60ms forwards;
}
@keyframes linieZiehen {
  0%   { transform: translateX(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  70%  { transform: translateX(-58%); animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  100% { transform: translateX(-101%); }
}

/* Der eine Lichtmoment: ein warmer Kegel vor der Fahrzeugnase, haengt
   am Wagen und faehrt mit. Er ragt weit über die Nase hinaus, das Licht
   betritt das Bild also vor der Karosserie. Bewusst ohne mix-blend-mode:
   Der drop-shadow-Filter auf .wagen kapselt Blending, screen bliebe
   wirkungslos. Als ::before liegt er hinter den Bild-Kindern und
   überdeckt nie die Haube. Sobald der Vorhang aufgeht, schluckt das
   Tageslicht der Seite den Schein: Er blendet parallel zur Öffnung aus.
   Endzustand unsichtbar = Ruhezustand ohne Kegel. */
.auftakt-laeuft .hero-car .wagen::before {
  /* Der Ursprung liegt auf dem Scheinwerfer, nicht irgendwo auf der Haube.
     Im Bild sitzt die Lampe bei 5,6 % der Wagenbreite und 52,6 % der Hoehe
     (nachgemessen an golf-8.png, der Wagen zeigt nach links). Die rechte
     Kante dieses Kastens ist der Lichtursprung, also right: 94.4 %.
     Senkrecht: 20 % + 53 % von 62 % Hoehe = 52,9 %, die Lampenmitte. */
  content: ""; position: absolute; right: 94.4%; width: 76%;
  top: 20%; height: 62%; pointer-events: none;
  /* Explizite Radien, nicht closest-side: Mit dem Zentrum auf der
     rechten Kante waere die naechste Seite null Pixel entfernt und der
     Verlauf haette Radius null, er renderte gar nicht. */
  background: radial-gradient(100% 58% at 100% 53%,
              rgba(255, 240, 190, .28), rgba(255, 240, 190, .09) 52%,
              rgba(255, 240, 190, 0) 80%);
  animation: auftaktLichtAus 380ms var(--ease) 1020ms forwards;
}
@keyframes auftaktLichtAus { to { opacity: 0; } }

/* Die Typografie tritt gestaffelt ein, waehrend der Asphalt sie
   freigibt: Überschrift, Fliesstext, Knoepfe in drei kurzen Schlaegen.
   Alles endet vor dem Aufraeumen bei 1250, der Klassenwechsel trifft
   nie eine laufende Bewegung. */
.auftakt-laeuft .hero-copy h1     { animation: auftaktText 380ms var(--ease) 1040ms backwards; }
.auftakt-laeuft .hero-copy .lead  { animation: auftaktText 380ms var(--ease) 1085ms backwards; }
.auftakt-laeuft .hero-cta         { animation: auftaktText 380ms var(--ease) 1130ms backwards; }
@keyframes auftaktText { from { opacity: 0; transform: translateY(14px); } }

/* Die Pointe: Die Mittellinie kommt bei 1140 am linken Rand an, im
   selben Atemzug zieht sich derselbe goldene Strich unter "Führerschein",
   von links nach rechts in Leserichtung.
   Doppel-Deklaration nicht aufraeumen: Die Regel steht absichtlich
   identisch unter beiden Klassen, damit sich der berechnete Wert beim
   Klassenwechsel um 1250 nicht aendert und die laufende Bewegung nicht
   neu startet, jede Abweichung, auch nur im Delay, startet sie neu.
   Besucher ohne Auftakt behalten die Basisregel (swipe 1s .6s). */
html.auftakt-laeuft .hero h1 .accent::after,
html.auftakt-fertig .hero h1 .accent::after {
  animation: swipe 520ms var(--ease-out) 1380ms both;
}

/* --- Auftakt auf schmalen Schirmen ---
   Hoch und schmal ist die Fahrbahn nur ein Streifen ganz unten. Ein
   Vorhang über die ganze Flaeche waere dort fast nur Schwarz: Beim
   Öffnen saehe man vom Hero nichts, nur einen kleinen Wagen am unteren
   Rand. Deshalb faellt der Vorhang hier weg.

   Was bleibt, ist der eigentliche Kern: Der Wagen faehrt herein und
   zieht die goldene Mittellinie hinter sich her, und derselbe Strich
   zieht sich danach unter "Führerschein". Der Unterschied ist, dass der
   Hero die ganze Zeit sichtbar ist, auf dem Handy sieht man Strasse und
   Überschrift sogar gleichzeitig, die Übergabe des Strichs liest sich
   hier also besser als auf dem Breitbild.

   Der Text tritt deshalb sofort ein statt erst zum Öffnen. Das Licht
   entfaellt: Ein Scheinwerferkegel braucht Dunkelheit. Und der Wagen
   wird nicht mehr über den Vorhang gehoben, den es hier nicht gibt. */
@media (max-width: 900px) {
  .auftakt-laeuft .auftakt { display: none; }
  .auftakt-laeuft .hero-car { z-index: 1; }
  .auftakt-laeuft .hero-car .wagen::before { content: none; }

  .auftakt-laeuft .hero-copy h1     { animation-delay: 60ms; }
  .auftakt-laeuft .hero-copy .lead  { animation-delay: 105ms; }
  .auftakt-laeuft .hero-cta         { animation-delay: 150ms; }
}

/* Alles, was fest über der Seite schwebt, tritt so lange zurück. Beide
   haben eigene Überblendungen, sie kommen danach von selbst wieder. */
.ari-root { transition: opacity .45s var(--ease); }
.auftakt-laeuft .ari-root { opacity: 0; pointer-events: none; }
.auftakt-laeuft .dh { transform: translateY(140%); opacity: 0; }

/* --- Info-Leiste unter der Bühne ---
   Vier Spalten, getrennt durch Haarlinien, stehend auf der Fahrbahn.
   Die Leiste ist in beiden Modi dunkel, deshalb sind die Farben hier
   fest notiert: Token wie --ink kippen im Dunkelmodus ins Helle und
   die Schrift wäre dann auf dem Asphalt nicht mehr zu lesen. */
.fakten {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: clamp(30px, 3.4vw, 46px) 0 clamp(32px, 3.6vw, 50px);
}
.fakt {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
  align-content: start;
  padding: 4px clamp(18px, 2.4vw, 32px) 6px 0;
}
.fakt + .fakt { padding-left: clamp(18px, 2.4vw, 32px); }
.fakt + .fakt::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, .13);
}
.fakt-icon {
  grid-row: span 3; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-top: 2px;
  background: rgba(201, 180, 30, .15); color: var(--gold);
  border: 1px solid rgba(201, 180, 30, .34);
}
.fakt-icon svg { width: 17px; height: 17px; }
.fakt-label {
  font-family: "Rubik", sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.fakt-wert {
  font-family: "Rubik", sans-serif; font-size: 1.02rem; font-weight: 500;
  color: #f6f6f4; text-decoration: none; margin-top: 3px;
  transition: color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a.fakt-wert:hover { color: var(--gold); }
}
.fakt-zusatz { font-size: .82rem; color: rgba(255, 255, 255, .62); margin-top: 4px; line-height: 1.45; }

/* Die Anmeldung ist die wichtigste Spalte, also bekommt sie mehr Gewicht */
.fakt-ruf .fakt-icon { background: var(--gold); color: #24200f; border-color: var(--gold); }
.fakt-ruf .fakt-wert { font-weight: 600; font-size: 1.1rem; }

/* --- Zahlenband --- */
.strip {
  position: relative; overflow: hidden;
  /* Derselbe Asphalt wie Fahrbahn und Info-Leiste. Gleicher Ton heisst:
     Der Übergang ist allein die Asphaltkante, keine gerade Farbkante. */
  background: var(--asphalt); color: #fff;
  padding: clamp(64px, 7vw, 92px) 0 clamp(40px, 4vw, 56px);
}
/* Asphaltkante aus dem Bestand der alten Seite, als Übergang nach oben */
.strip-edge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%) rotate(180deg);
  width: 102vw; height: auto; min-width: 1000px; pointer-events: none;
}
/* Rad im Hintergrund, dreht sich beim Scrollen mit */
.strip-wheel {
  position: absolute; right: -60px; bottom: -70px;
  width: clamp(190px, 26vw, 300px); height: auto;
  opacity: .1; pointer-events: none;
  transform: rotate(calc(var(--spin, 0) * 1turn));
}
/* Oben keine Linie: Da liegt der Asphalt der Info-Leiste an, den soll
   nur die Asphaltkante ablösen. Unten trennt die Linie zum hellen Grund. */
html[data-theme="dark"] .strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.strip-item b {
  display: block; font-family: "Rubik", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; color: var(--gold);
  letter-spacing: -.03em; line-height: 1;
}
.strip-item span {
  display: block; margin-top: 10px; font-size: .9rem;
  color: rgba(255, 255, 255, .68);
}
html[data-theme="dark"] .strip-item span { color: var(--ink-3); }

/* --- Theorie: randloses Breitbild mit aufgesetzter Karte --- */
.theorie-band {
  position: relative; padding: 0;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.theorie-photo { position: absolute; inset: 0; overflow: hidden; }
.theorie-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 44%;
}
/* Feste Farbwerte, ausdrücklich KEINE Tokens: Der Schleier liegt auf einem
   Foto, und das Foto dreht im Dunkelschema nicht mit. Mit var(--ink) wurde
   die Abdunklung im Dunkelmodus fast weiß und der Text unlesbar hell. */
.theorie-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
              rgba(16, 18, 20, .92) 0%,
              rgba(16, 18, 20, .74) 46%,
              rgba(16, 18, 20, .34) 100%);
}
html[data-theme="dark"] .theorie-photo img { filter: brightness(.82) saturate(.8); }
.theorie-inner {
  position: relative; z-index: 1;
  padding: clamp(72px, 9vw, 132px) 0;
}
.theorie-card { max-width: 620px; color: #fff; }   /* fest hell, siehe oben */
.theorie-card h2 { color: #fff; }
.theorie-card h2 + p { margin-top: 20px; }
.theorie-card p { color: rgba(255, 255, 255, .84); font-size: clamp(1rem, 1.3vw, 1.12rem); }

.facts { display: grid; gap: 0; margin: 30px 0 0; }
.facts > div {
  display: flex; align-items: baseline; gap: 20px;
  padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.facts dt {
  font-family: "Rubik", sans-serif; font-weight: 700; font-size: 1.7rem;
  color: var(--gold); min-width: 92px; letter-spacing: -.03em;
}
.facts dd { margin: 0; font-size: .97rem; color: rgba(255, 255, 255, .82); }

/* --- Klassen: Raster mit Haarlinien statt vier gleicher Kästen ---
   Vier identische Karten mit Symbol, Überschrift und Text sind der
   Baukasten-Reflex. Dieselbe Information trägt ein Raster aus Linien
   ruhiger, und das Kürzel wird zum eigentlichen Merkzeichen. */
.kl-raster {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--line);
}
.kl-kachel {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.kl-kuerzel {
  font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.035em;
  color: var(--gold-titel); line-height: 1.05;
  min-width: 3.4ch;
}
.kl-kachel h3 { margin-bottom: 8px; }
.kl-kachel p { font-size: .95rem; margin-bottom: 12px; }
.kl-mehr {
  font-size: .88rem; color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding-bottom: 1px;
}
.kl-mehr:hover { border-bottom-color: var(--gold); }

/* --- Gründe: drei Spalten, oben eine Linie, sonst nichts --- */
.gruende {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
}
.grund { border-top: 2px solid var(--gold); padding-top: 20px; }
.grund h3 { margin-bottom: 10px; }
.grund p { font-size: .95rem; margin: 0; }

/* --- Fuhrpark auf "Ueber uns" ---
   Diese Kacheln hatten keine einzige Regel: Die drei Bloecke lagen
   untereinander, und weil die Symbole weder Groessenangaben im Markup
   noch im CSS hatten, zeichnete der Browser sie in seiner Ersatzgroesse
   von 300 mal 150 Pixeln. Aufbau wie die Gruende auf der Startseite,
   nur mit Symbol darueber. */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
}
.why-item { border-top: 2px solid var(--gold); padding-top: 20px; }
.why-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.why-icon svg { width: 20px; height: 20px; }
.why-item h3 { margin-bottom: 10px; }
.why-item p { font-size: .95rem; margin: 0; }

/* --- Ablauf: fuenf Schritte an einer gestrichelten Strasse ---
   Die Rauten sind der Verkehrszeichen-Anmutung der bisherigen
   Wegegrafik entlehnt, nur eben als Markup statt als Bilddatei. */
.road {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; position: relative; list-style: none; padding: 0; margin: 0;
}
.road::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 33px;
  border-top: 2px dashed var(--line);
}
.road-step { padding-right: 20px; position: relative; }
.road-num {
  position: relative; z-index: 1;
  width: 66px; height: 66px; display: grid; place-items: center;
  margin-bottom: 26px;
  font-family: "Rubik", sans-serif; font-weight: 700; font-size: 1.2rem;
  color: var(--ink-3);
  transition: color .45s var(--ease);
}
.road-num::before {
  content: ""; position: absolute; inset: 6px; z-index: -1;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: 6px; transform: rotate(45deg);
  transition: background .45s var(--ease), border-color .45s var(--ease), transform .6s var(--ease);
}
.road-step.is-visible .road-num { color: var(--ink); }
.road-step.is-visible .road-num::before {
  background: var(--gold); border-color: var(--gold); transform: rotate(45deg) scale(1.04);
}
html[data-theme="dark"] .road-step.is-visible .road-num { color: #17150c; }
.road-step h3 { margin-bottom: 9px; }
.road-step p { font-size: .95rem; }

/* --- Der fahrende Golf: Position haengt am Scrollfortschritt (--drive) --- */
.road-run {
  position: relative; height: 116px; margin-bottom: 26px;
  display: flex; align-items: flex-end;
}
.road-track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(to right,
              var(--line) 0 30px, transparent 30px 54px);
}
.road-car {
  position: absolute; bottom: 2px; left: 0;
  width: clamp(150px, 21vw, 260px); height: auto;
  /* Hier fährt der Wagen mit der Leserichtung von Schritt 1 zu Schritt 5.
     Dafür liegt eine eigene, gespiegelte Bilddatei bereit: Beim bloßen
     Spiegeln stünden "ARI FAHRSCHULE" und die Web-Adresse seitenverkehrt,
     deshalb sind die beschrifteten Flächen darin unverändert wieder
     eingesetzt. Siehe images/golf-8-rechts.png. */
  transform: translateX(calc(var(--drive, 0) * (100cqw - 100%)));
  filter: drop-shadow(0 10px 14px rgba(27, 30, 35, .16));
}
/* Umdrehungen aus Strecke und Reifenumfang, --turns setzt das Skript.
   Fahrt nach rechts heißt Drehung im Uhrzeigersinn, also positiv. */
.road-car .felge {
  transform: rotate(calc(var(--drive, 0) * var(--turns, 6) * 1turn));
}
/* Im gespiegelten Bild liegen die Räder an der gespiegelten Stelle: Aus der
   Mitte m wird (Bildbreite - 1 - m), nicht einfach der Wert des anderen Rades,
   denn der Wagen sitzt nicht mittig in der Bildfläche. */
.road-car .felge-v { left: 72.300%; }
.road-car .felge-h { left: 11.385%; }
.road-run { container-type: inline-size; }

/* --- Hinweisband --- */
.note-band {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: clamp(24px, 3vw, 36px);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius);
}
.note-band h3 { margin-bottom: 8px; }
.note-band p { margin: 0; max-width: 58ch; font-size: .97rem; }

/* --- Ueber uns --- */
.about-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.about-copy .lead {
  border-left: 3px solid var(--gold); padding-left: 22px;
  margin-bottom: 26px; font-style: normal;
}
.values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.values li {
  font-size: .88rem; font-weight: 500; padding: 9px 16px;
  border-radius: var(--radius-pill); background: var(--gold-tint);
  color: var(--gold-deep);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.about-figure { margin: 0; }
.about-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.about-figure figcaption {
  margin-top: 14px; font-size: .85rem; color: var(--ink-3); line-height: 1.55;
}

/* --- Standorte --- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.loc {
  border-radius: var(--radius); padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.loc-a { background: var(--cream); }
.loc-b { background: var(--stone); }
.loc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.loc-pin {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; flex: none;
}
.loc-a .loc-pin { background: var(--gold); color: #241f0c; }
.loc-b .loc-pin { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .loc-b .loc-pin { background: var(--ink-3); color: #14161a; }
.loc-pin svg { width: 21px; height: 21px; }
.loc-head h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: .01em; text-transform: uppercase;
  font-weight: 700;
}
.loc-a .loc-head h3 { color: var(--gold-deep); }

/* Kartenausschnitt je Standort, echtes OpenStreetMap-Embed. Steht
   bewusst zwischen Kopf und Zeiten: Erst wissen, wo man ist, dann sehen,
   wo es liegt, dann die Details. Der "Groessere Karte"-Verweis ist
   OpenStreetMaps eigene Vorgabe fuer eingebettete Karten. */
.loc-map { margin-bottom: 24px; }
.loc-map iframe {
  display: block; width: 100%; height: 200px; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.loc-map-gross {
  display: inline-block; margin-top: 6px; font-size: .82rem; color: var(--ink-3);
  text-decoration: none;
}
.loc-map-gross:hover { color: var(--gold-deep); }

.hours { display: grid; gap: 0; margin-bottom: 26px; }
.hours-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hours-row:last-child { border-bottom: 0; }
.hours-label { display: flex; align-items: center; gap: 11px; font-weight: 500; color: var(--ink); font-size: .98rem; }
.hours-label svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.hours-label small { display: block; font-weight: 400; color: var(--ink-3); font-size: .82rem; }
.hours-time {
  font-family: "Rubik", sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--ink); white-space: nowrap;
}
.loc-address {
  display: flex; gap: 11px; align-items: flex-start; margin-top: auto;
  padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: .95rem; color: var(--ink-2);
}
.loc-address svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; margin-top: 4px; }
.loc-address a { text-decoration: none; }
.loc-address a:hover { color: var(--gold-deep); }

.loc-note {
  margin-top: 22px; font-size: .88rem; color: var(--ink-3);
  display: flex; gap: 10px; align-items: flex-start;
}
.loc-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }

/* --- Vorteile --- */
.why { background: var(--band); border-block: 1px solid var(--line-soft); }

/* --- FAQ --- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-list { display: grid; gap: 2px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px; cursor: pointer; list-style: none;
  font-family: "Rubik", sans-serif; font-size: 1.06rem; font-weight: 500;
  color: var(--ink); transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary .chev {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; flex: none;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.faq-item summary .chev svg { width: 14px; height: 14px; }
.faq-item[open] summary .chev { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); color: #241f0c; }
.faq-answer { padding: 0 60px 24px 2px; font-size: .98rem; color: var(--ink-2); }

/* Der Winkel drehte sich schon sauber, der Text sprang. ::details-content
   ist der Kasten, den der Browser selbst um den Inhalt legt, nur darüber
   lässt sich ein <details> überblenden. Wo der Browser das nicht kennt,
   klappt die Antwort wie bisher sofort auf. */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 240ms var(--ease),
    opacity 170ms var(--ease),
    content-visibility 240ms allow-discrete;
  transition-behavior: allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-answer p { margin-bottom: .8em; }

.faq-aside { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 34px); }
.faq-aside h3 { margin-bottom: 12px; }
.faq-aside p { font-size: .95rem; }

/* --- Kontakt --- */
.contact { background: var(--band); border-top: 1px solid var(--line-soft); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }

/* --- Kontaktformular: die zweite Möglichkeit --- */
.form-vorspann {
  margin-bottom: 24px; font-size: .95rem; color: var(--ink-2);
}
.form-vorspann span {
  display: block; font-family: "Rubik", sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}


.form-row { display: grid; gap: 18px; margin-bottom: 18px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.field label span { color: var(--gold-deep); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--fokus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fokus) 22%, transparent);
}
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6f6e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  background-size: 17px; padding-right: 44px;
}

.zustimmung {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 22px; font-size: .85rem; line-height: 1.55; color: var(--ink-2);
  cursor: pointer;
}
.zustimmung input {
  appearance: none; flex: none; margin-top: 2px;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.zustimmung input:checked {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324200f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--gold);
}
/* Auch :focus, nicht nur :focus-visible: Beim Absenden ohne Haken setzt
   das Skript den Fokus per focus() hierher. Das gilt nicht als
   focus-visible, es war also nichts zu sehen, obwohl die Meldung
   ausdruecklich auf dieses Kaestchen zeigte. */
.zustimmung input:focus-visible,
.zustimmung input:focus { outline: 2px solid var(--fokus); outline-offset: 2px; }
.zustimmung a { color: var(--gold-deep); }

.form-status { font-size: .9rem; margin-top: 14px; color: var(--gold-deep); min-height: 1.2em; }
.form-note { font-size: .82rem; color: var(--ink-3); margin-top: 12px; line-height: 1.6; }
.form-note a { color: var(--ink-2); }

.contact-cards { display: grid; gap: 14px; }
.contact-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-card:hover { border-color: var(--gold); transform: translateX(4px); }
}
.contact-card .ci {
  width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--gold-tint); color: var(--gold-deep); flex: none;
}
.contact-card .ci svg { width: 19px; height: 19px; }
.contact-card b { display: block; font-family: "Rubik", sans-serif; font-weight: 500; font-size: 1rem; }
.contact-card span { display: block; font-size: .85rem; color: var(--ink-3); }

/* --- Fußzeile --- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding: clamp(56px, 6vw, 84px) 0 clamp(96px, 9vw, 124px); }
html[data-theme="dark"] .site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-2); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.footer-about p { color: rgba(255, 255, 255, .62); font-size: .95rem; margin-top: 20px; max-width: 34ch; }
html[data-theme="dark"] .site-footer .brand-text span,
html[data-theme="dark"] .footer-about p { color: var(--ink-3); }
/* Stufe 3, nicht 4: Impressum und Datenschutz nutzen nur h1 und h2,
   dort riss eine h4 in der Fußzeile ein Loch in die Gliederung. */
.footer-col h3 {
  font-family: "Rubik", sans-serif; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 600;
}
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: inherit; text-decoration: none; font-size: .95rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  align-items: center; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .83rem;
}
html[data-theme="dark"] .footer-bottom { border-top-color: var(--line); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* --- Nach oben --- */
.to-top {
  position: fixed; right: 22px; bottom: 112px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); z-index: 60;
  box-shadow: var(--shadow-sm);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Im Fußbereich zurücktreten, damit er nicht über den Verweisen liegt */
.to-top.im-fuss { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.to-top svg { width: 17px; height: 17px; }

/* Fortschrittsbalken oben. Läuft bei jedem Scroll-Frame mit, deshalb
   transform statt width, das bleibt reines Compositing ohne Reflow. */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--gold); z-index: 95; transition: transform .1s linear;
}

/* ---------------------------------------------------------
   4. KI-Assistent
   --------------------------------------------------------- */
/* Ueber dem Datenschutzband (120), unter dem Sprunglink (200). Lag der
   Assistent darunter, verdeckte das Band auf dem Handy Eingabezeile,
   Senden-Knopf und Vorschlaege des geoeffneten Fensters. */
.ari-root { position: fixed; right: 22px; bottom: 44px; z-index: 130; font-family: inherit; }

/* Der Knopf ist eine kleine Karte, kein bunter Klecks: heller Grund mit
   Rand wie die übrigen Karten, davor die goldene Sprechblase mit
   Bereitschaftspunkt. So gehört er sichtbar zur Seite und schreit nicht. */
.ari-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink); cursor: pointer;
  font-family: "Rubik", sans-serif;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ari-launcher:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}
.ari-launcher-icon {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #24200f; flex: none;
}
.ari-launcher-text {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25;
}
.ari-launcher-text strong { font-size: .86rem; font-weight: 600; }
.ari-launcher-text small { font-size: .7rem; color: var(--ink-3); font-weight: 400; }

/* Bereitschaftspunkt, zweimal blinzeln und dann Ruhe */
.ari-punkt {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #3fbf6a; border: 2px solid var(--card);
}
.ari-punkt::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid #3fbf6a;
  animation: ariPuls 2.6s ease-out 3;
}
@keyframes ariPuls {
  0% { transform: scale(.7); opacity: .9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.ari-open .ari-launcher { opacity: 0; pointer-events: none; transform: scale(.9); }

/* [hidden] allein reicht nicht: display:flex unten wuerde es ueberstimmen. */
.ari-panel[hidden] { display: none; }

.ari-panel {
  position: absolute; right: 0; bottom: 0; width: min(384px, calc(100vw - 32px));
  /* Die Wurzel sitzt 44 px ueber dem unteren Rand. 100dvh - 40px war
     deshalb immer 4 px zu hoch und schnitt oben den Rahmen ab. Und bei
     niedrigen Fenstern (200 Prozent Zoom, Handy quer) blieb fuer den
     Verlauf nichts uebrig, weil alle anderen Teile feste Hoehen haben.
     Mit einer Mindesthoehe bleibt das Fenster bedienbar, notfalls
     ueberlaeuft es nach oben statt den Verlauf zu verschlucken. */
  height: min(680px, calc(100dvh - 56px));
  max-height: calc(100dvh - 56px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  /* Der Drehpunkt liegt in der Ecke, in der der Knopf sitzt: Das Fenster
     waechst aus ihm heraus, statt aus dem Nichts in der Mitte zu erscheinen.
     Ohne das hat die Bewegung keinen Ursprung und wirkt beliebig. */
  transform-origin: 100% 100%;
  animation: ariIn .32s var(--ease-out);
}
@keyframes ariIn { from { opacity: 0; transform: translateY(8px) scale(.92); } }

.ari-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 15px;
  border-bottom: 1px solid var(--line-soft); flex: none;
}
.ari-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #24200f; flex: none;
  font-family: "Rubik", sans-serif; font-weight: 700; font-size: 1rem;
}
.ari-headtext { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.ari-headtext strong { font-family: "Rubik", sans-serif; font-size: .98rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ari-headtext span { font-size: .78rem; color: var(--ink-3); }
.ari-badge {
  font-size: .6rem; letter-spacing: .12em; font-weight: 600; padding: 3px 7px;
  border-radius: 4px; background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.ari-close {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ari-close:hover { background: var(--stone); color: var(--ink); }

.ari-log {
  flex: 1; overflow-y: auto; padding: 18px 16px 6px; scrollbar-width: thin;
  /* Ohne Mindesthoehe drueckten die festen Teile den Verlauf auf null:
     Man sah keine einzige Nachricht mehr. */
  min-height: 84px;
}
.ari-msg { display: flex; margin-bottom: 12px; }
.ari-msg-user { justify-content: flex-end; }
.ari-bubble {
  /* Lange Zeichenketten ohne Leerzeichen sprengten sonst die Blase und
     erzeugten einen waagerechten Rollbalken im Verlauf. */
  overflow-wrap: anywhere;
  max-width: 86%; padding: 12px 15px; border-radius: var(--radius-sm);
  font-size: .93rem; line-height: 1.55;
}
.ari-msg-bot .ari-bubble { background: var(--stone); color: var(--ink); border-bottom-left-radius: 5px; }
.ari-msg-user .ari-bubble { background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
html[data-theme="dark"] .ari-msg-user .ari-bubble { background: var(--gold); color: #17150c; }
.ari-bubble p { margin: 0 0 .5em; color: inherit; }
.ari-bubble p:last-child { margin-bottom: 0; }

.ari-disclaimer {
  font-size: .77rem; color: var(--ink-3); line-height: 1.5;
  background: var(--gold-tint); border-radius: var(--radius-sm); padding: 11px 13px; margin: 0 0 12px;
}

.ari-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ari-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: ariBlink 1.3s infinite ease-in-out;
}
.ari-dots i:nth-child(2) { animation-delay: .18s; }
.ari-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ariBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ari-handoff { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ari-handoff-title { display: block; font-size: .78rem; color: var(--ink-3); margin-bottom: 9px; }
.ari-handoff-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ari-hbtn {
  font-size: .82rem; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  background: var(--surface); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ari-hbtn:hover { border-color: var(--gold); }
.ari-hbtn-primary { background: var(--gold); border-color: var(--gold); color: #24200f; }
.ari-hbtn-primary:hover { background: var(--gold-deep); }

.ari-suggest { padding: 4px 16px 12px; flex: none; }
.ari-suggest-label { display: block; font-size: .74rem; color: var(--ink-3); margin-bottom: 8px; }
.ari-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* Bei niedrigen Fenstern nimmt der Vorschlagsblock sonst die halbe Hoehe. */
@media (max-height: 620px) {
  .ari-suggest { max-height: 92px; overflow-y: auto; }
}
.ari-chip {
  font-family: inherit; font-size: .82rem; padding: 8px 13px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.ari-chip:hover { border-color: var(--gold); color: var(--ink); background: var(--gold-tint); }

.ari-form {
  display: flex; gap: 8px; align-items: center; padding: 12px 14px;
  border-top: 1px solid var(--line-soft); flex: none;
}
.ari-input {
  /* Mindestens 16 px: Safari auf dem iPhone zoomt sonst beim Antippen
     in die Seite hinein und wieder heraus geht nur von Hand. */
  font-size: max(16px, .93rem);
  flex: 1; font-family: inherit; color: var(--ink);
  background: var(--stone); border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 12px 16px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ari-input:focus { outline: none; border-color: var(--gold); background: var(--surface); }
.ari-send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: var(--gold); color: #24200f; cursor: pointer; display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.ari-send:hover { background: var(--gold-deep); transform: scale(1.05); }
.ari-privacy { font-size: .69rem; color: var(--ink-3); text-align: center; padding: 0 16px 12px; margin: 0; line-height: 1.45; }

/* ---------------------------------------------------------
   5. Bewegung
   --------------------------------------------------------- */
/* Nur verstecken, wenn Skripte laufen: Ohne JavaScript wuerde niemand die
   Klasse is-visible setzen und der halbe Inhalt bliebe dauerhaft unsichtbar.
   Die Klasse js setzt das Kopfskript vor dem ersten Anzeigen. */
html.js .reveal { opacity: 0; transform: translateY(22px); }
/* Muss dieselbe Stufe wie die Versteck-Regel darueber tragen, sonst
   gewinnt das Verstecken und eingeblendete Abschnitte bleiben unsichtbar. */
html.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .reveal-delay-1.is-visible { transition-delay: .08s; }
html.js .reveal-delay-2.is-visible { transition-delay: .16s; }
html.js .reveal-delay-3.is-visible { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ground::before, .hero-car .felge, .ari-punkt::after { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal,
  html.js .bk-band .bk { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   6. Schmale Bildschirme
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .gruende { grid-template-columns: repeat(3, 1fr); }
  .road { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .road::before { display: none; }
}

@media (max-width: 900px) {
  :root { --shell: min(1200px, 92vw); }

  /* Gestapelt: Foto als Streifen oben, darunter Papier mit dem Text.
     Die Naht wird dabei aus der Senkrechten in die Waagerechte gedreht. */
  .hero-stage {
    min-height: 0; display: block;
    padding: calc(var(--header-h) + 34svh + 40px) 0 clamp(160px, 40vw, 210px);
  }
  /* Das Foto beginnt bewusst erst unterhalb der Kopfzeile, nicht darunter
     versteckt: egal wie durchsichtig sie ist, überlappt sie immer einen
     Teil davon. So bleibt das ganze Foto sichtbar. */
  .hero-media { inset: var(--header-h) 0 auto 0; width: 100%; height: 34svh; }
  .hero-media img { object-position: 50% 46%; }
  .hero-media::before { inset: auto 0 0 0; width: auto; height: 2px; }
  .hero-copy { max-width: none; padding-inline-end: 0; }
  .fakten { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .fakt:nth-child(3) { padding-left: 0; }
  .fakt:nth-child(3)::before { display: none; }
  .hero-ground { height: 96px; }
  .hero-car { bottom: calc(96px - 16px); }
  .hero-car .wagen { width: min(320px, 64vw); }
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; }
  .loc-grid { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }

  .nav-toggle { display: grid; }
  .main-nav {
    /* An der Kopfzeile ausgerichtet, nicht an ihrer Ausgangshoehe: Im
       Zustand is-stuck ist sie nur noch 66 px hoch, dazwischen klaffte
       sonst ein Streifen, durch den der Inhalt lief.
       Dazu eine Hoehengrenze mit eigenem Rollbalken, sonst wird im
       Querformat der letzte Punkt abgeschnitten und ist unerreichbar. */
    position: fixed; inset: var(--kopf-hoehe, var(--header-h)) 0 auto 0;
    max-height: calc(100dvh - var(--kopf-hoehe, var(--header-h)));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px 0 24px; transform: translateY(-120%); opacity: 0;
    visibility: hidden; transition: transform .35s var(--ease), opacity .3s var(--ease), visibility .3s;
    box-shadow: var(--shadow-md);
  }
  .nav-open .main-nav { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: stretch; width: var(--shell); margin-inline: auto; gap: 0; }
  .main-nav a { padding: 15px 4px; font-size: 1.06rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .main-nav a[aria-current="page"] {
    background: transparent; box-shadow: none;
    padding-left: 14px; border-left: 3px solid var(--gold);
  }
  .nav-cta { display: none; }
}

@media (max-width: 620px) {
  .road { grid-template-columns: 1fr; row-gap: 4px; }
  .road-step { display: grid; grid-template-columns: 66px 1fr; column-gap: 18px; padding-right: 0; }
  .road-num { margin-bottom: 0; grid-row: span 2; }
  .road-step h3 { align-self: end; }
  .note-band { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-stage { padding-top: calc(var(--header-h) + 20svh + 32px); }
  /* Schmal reicht der seitliche Verlauf nicht: das Bild wird gleichmäßig
     abgedunkelt, sonst steht die rechte Zeilenhälfte auf hellem Grund. */
  .theorie-photo::after {
    background: linear-gradient(to bottom, rgba(16, 18, 20, .9), rgba(16, 18, 20, .82));
  }
  .hero-media { height: 20svh; }
  .facts dt { min-width: 74px; font-size: 1.45rem; }
  .road-run { height: 84px; }
  .fakten { grid-template-columns: 1fr; row-gap: 0; }
  .fakt { padding: 16px 0; }
  .fakt + .fakt { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .11); }
  .fakt + .fakt::before { display: none; }
  .to-top { bottom: 96px; right: 16px; }
  .ari-root { right: 16px; bottom: 30px; }
  .ari-launcher-text small { display: none; }
  .ari-launcher { padding: 8px 18px 8px 8px; }
  .ari-panel { height: min(680px, calc(100dvh - 32px)); }
}

/* ---------------------------------------------------------
   7. Rechtliche Seiten
   --------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 92px)); }
.legal .shell { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.legal h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 48px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.06rem; margin: 26px 0 8px; }
.legal p, .legal li { font-size: .99rem; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 1.1em; }
.legal li { margin-bottom: .45em; color: var(--ink-2); }
.legal .todo {
  background: var(--gold-tint); border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius-sm); padding: 16px 18px; font-size: .9rem; color: var(--ink-2);
}
.legal .updated { font-size: .86rem; color: var(--ink-3); margin-top: 48px; }

/* ---------------------------------------------------------
   8. Bestätigung der Datenschutzerklärung
   Eine schmale Leiste, kein Sperrbildschirm: Die Seite verarbeitet
   nichts, worauf gewartet werden müsste. Bewusst einzeilig gehalten,
   damit sie auf dem Handy nicht die halbe Bühne verdeckt.
   --------------------------------------------------------- */
.dh {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 20px);
  transform: translateY(140%); opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
  pointer-events: none;
}
.dh-sichtbar { transform: translateY(0); opacity: 1; }
/* Nur die sichtbare Pille faengt Klicks. Lag pointer-events auf dem ganzen
   Band, fing dessen durchsichtiger Innenabstand ueber die volle Breite alles
   ab, was darunter lag: der Knopf des Assistenten, der Nach-oben-Knopf und
   die Verweise der Fusszeile reagierten nicht mehr. */
.dh-sichtbar .dh-innen { pointer-events: auto; }

.dh-innen {
  width: min(760px, 100%); margin-inline: auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 12px 12px 12px 24px;
  box-shadow: var(--shadow-md);
}
.dh-text {
  flex: 1 1 240px; margin: 0;
  font-size: .87rem; line-height: 1.5; color: var(--ink-2);
}
.dh-text a { color: var(--gold-deep); }
.dh-ok { flex: 0 0 auto; padding: 11px 26px; font-size: .9rem; }

@media (max-width: 620px) {
  .dh { padding-bottom: 96px; }             /* Platz für den Assistenten */
  .dh-innen { border-radius: var(--radius); padding: 16px 18px; }
  .dh-ok { width: 100%; }
}

/* ---------------------------------------------------------
   9. Unterseiten
   --------------------------------------------------------- */
.seitenkopf {
  padding: calc(var(--header-h) + clamp(52px, 7vw, 96px)) 0 clamp(36px, 4.5vw, 60px);
  border-bottom: 1px solid var(--line-soft);
}
.seitenkopf h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); margin-bottom: 22px; }
.seitenkopf .lead { max-width: 60ch; }

/* --- Preisaushang --- */
.p-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.p-karte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
}
.p-karte-haupt { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

.p-kopf {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.p-klasse {
  font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; color: var(--gold-titel);
}
.p-titel { font-size: .95rem; color: var(--ink-3); }

.p-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.p-zeile:last-child { border-bottom: 0; }
.p-was { font-size: .97rem; color: var(--ink); }
.p-was small { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.p-wert {
  font-family: "Rubik", sans-serif; font-weight: 600; font-size: 1.06rem;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.p-leer { color: var(--ink-3); font-weight: 400; }

.p-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.p-extra-block {
  background: var(--gold-tint); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  padding: clamp(22px, 2.6vw, 32px);
}
.p-extra-label {
  display: block; font-family: "Rubik", sans-serif; font-size: .7rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 10px;
}
.p-extra-block strong {
  display: block; font-family: "Rubik", sans-serif; font-size: 1.15rem;
  font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.p-extra-block p { margin: 0; font-size: .93rem; }

.p-hinweis { margin-top: clamp(40px, 5vw, 64px); max-width: 68ch; }
.p-hinweis h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 16px; }
.p-stand { font-size: .86rem; color: var(--ink-3); }

/* --- Theorie-Themen ---
   Der Turnus wird berechnet, nicht getippt: js/theorie-plan.js rechnet ab
   einem festen Ankerpunkt fort, welches Thema an welchem Abend dran ist,
   und traegt die Karten hier ein. Ohne Javascript bleibt die Fallback-
   Zeile stehen, die im Markup schon steht, statt ein veraltetes Datum zu
   riskieren. Die 14 Themen selbst aendern sich nicht, die stehen fest im
   HTML und brauchen kein Skript. */
.themen-plan { padding: clamp(40px, 5vw, 64px) 0 0; }
.themen-plan h2 { margin-bottom: 22px; }
.thema-plan-fallback {
  color: var(--ink-2); font-size: .97rem;
  padding: clamp(20px, 2.6vw, 28px); background: var(--band);
  border-radius: var(--radius); border: 1px solid var(--line);
}
.thema-plan-fallback a { color: var(--gold-deep); }

.thema-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.thema-karte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px);
}
.thema-kopf {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.thema-tag {
  flex: none; font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: #241f0c; background: var(--gold); border-radius: var(--radius-pill);
  padding: 5px 12px; white-space: nowrap;
}
.thema-kopf h3 { font-size: 1rem; }
.thema-titel { font-size: .93rem; color: var(--ink); margin-bottom: 10px; line-height: 1.5; }
.thema-ort { font-size: .84rem; color: var(--ink-3); }

.themen-liste { padding: clamp(48px, 6vw, 76px) 0 clamp(56px, 6vw, 88px); }
.thema-liste {
  list-style: decimal; padding-left: 1.3em; display: grid; gap: 11px;
  max-width: 62ch; margin-top: 22px; font-size: .95rem; color: var(--ink-2);
}
.thema-liste li { padding-left: 8px; }
.thema-liste li::marker {
  font-family: "Rubik", sans-serif; font-weight: 700; color: var(--gold-titel);
}

/* --- Klassen im Detail --- */
.klassen-lang { display: grid; gap: clamp(40px, 5vw, 72px); }
.kl {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line-soft);
}
.klassen-lang .kl:last-child { border-bottom: 0; padding-bottom: 0; }
.kl-marke {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px;
}
.kl-marke span {
  font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.04em;
  color: var(--gold-titel); line-height: 1;
}
.kl-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 18px; }
.kl-text .lead { font-size: 1.08rem; margin-bottom: 18px; }
.kl-preis { margin-top: 20px; }
.kl-preis a {
  font-family: "Rubik", sans-serif; font-weight: 500; font-size: .95rem;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  padding-bottom: 2px;
}
.kl-preis a:hover { border-bottom-color: var(--gold); }

/* --- Verweis auf die Preise auf der Startseite --- */
.preis-teaser {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(22px, 3vw, 44px);
  align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(26px, 3vw, 40px);
}
.pt-zahlen { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 20px; }
.pt-zahl b {
  display: block; font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--gold-titel);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pt-zahl span { font-size: .85rem; color: var(--ink-3); }

@media (max-width: 900px) {
  .p-karten, .p-extra, .thema-karten { grid-template-columns: 1fr; }
  .kl { grid-template-columns: 1fr; gap: 12px; }
  .kl-marke { justify-content: flex-start; padding-top: 0; }
  .preis-teaser { grid-template-columns: 1fr; }
}

.faq-links { font-size: .9rem; color: var(--ink-3); margin-top: 18px; }
.faq-links a { color: var(--gold-deep); text-decoration: none; }
.faq-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   10. Bestanden
   Ein waagerechtes Band statt eines hohen Rasters: neun Hochformate
   untereinander würden die Startseite sprengen. Gewischt wird mit
   Fangpunkten, damit immer eine Kachel sauber sitzt.
   --------------------------------------------------------- */
.bestanden { padding-bottom: clamp(56px, 7vw, 96px); }

.bk-band {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px clamp(4vw, calc(50vw - var(--shell) / 2), 50vw) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-overflow-scrolling: touch;
}
.bk-band::-webkit-scrollbar { height: 6px; }
.bk-band::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.bk {
  flex: 0 0 auto; width: clamp(200px, 24vw, 264px); margin: 0;
  scroll-snap-align: center;
}
.bk img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .bk:hover img { transform: translateY(-4px); }
}
/* Die neun Bilder treten versetzt ein, nicht alle auf einmal. Der Versatz
   ist bewusst knapp: Bei 55 ms je Bild ist das letzte nach einer halben
   Sekunde da, man nimmt eine Reihenfolge wahr, wartet aber auf nichts.
   Wie bei den uebrigen Abschnitten wird nur versteckt, wenn Skripte
   laufen, sonst blieben die Bilder ohne JavaScript dauerhaft weg. */
html.js .bk-band .bk { opacity: 0; transform: translateY(16px); }
html.js .bk-band.is-visible .bk {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.js .bk-band.is-visible .bk:nth-child(1) { transition-delay: 0ms; }
html.js .bk-band.is-visible .bk:nth-child(2) { transition-delay: 55ms; }
html.js .bk-band.is-visible .bk:nth-child(3) { transition-delay: 110ms; }
html.js .bk-band.is-visible .bk:nth-child(4) { transition-delay: 165ms; }
html.js .bk-band.is-visible .bk:nth-child(5) { transition-delay: 220ms; }
html.js .bk-band.is-visible .bk:nth-child(6) { transition-delay: 275ms; }
html.js .bk-band.is-visible .bk:nth-child(7) { transition-delay: 330ms; }
html.js .bk-band.is-visible .bk:nth-child(8) { transition-delay: 385ms; }
html.js .bk-band.is-visible .bk:nth-child(9) { transition-delay: 440ms; }

.bk figcaption {
  margin-top: 10px; font-size: .8rem; color: var(--ink-3); line-height: 1.4;
}
.bk-hinweis { font-size: .82rem; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 620px) {
  .bk { width: 70vw; }
  .bk-band { padding-inline: 4vw; }
}

/* --- Besucherzähler im Fußbereich --- */
/* [hidden] allein reicht nicht: display unten würde es überstimmen. */
.bz[hidden] { display: none; }
.bz {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .83rem; color: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] .bz { color: var(--ink-3); }
.bz svg { width: 15px; height: 15px; opacity: .7; }
.bz-zahl {
  font-family: "Rubik", sans-serif; font-weight: 600;
  color: var(--gold); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   11. Handy: Maßstab statt nur Umbruch
   Die Abstände und Schriftgrößen sind für breite Bildschirme gemacht.
   Auf 375 px wirkt dieselbe Großzügigkeit nicht luftig, sondern zäh, die Seite war 18 Bildschirme lang. Hier wird der ganze Maßstab
   heruntergezogen, nicht nur umgebrochen.
   --------------------------------------------------------- */
@media (max-width: 620px) {
  body { font-size: 1rem; line-height: 1.6; }

  section { padding: clamp(52px, 13vw, 96px) 0; }
  .section-head { margin-bottom: clamp(26px, 7vw, 40px); }
  .section-head p { margin-top: 14px; font-size: 1rem; }

  h2 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  h3 { font-size: 1.08rem; }
  .lead { font-size: 1rem; line-height: 1.58; }

  .btn { padding: 13px 22px; font-size: .9rem; }

  /* Bühne: Foto, Überschrift, die zwei Schaltflächen UND die Fahrbahn
     mit dem Wagen sollen ohne Scrollen sichtbar sein. Die Fahrbahn stand
     vorher nicht in der Rechnung, auf einem Handy mit Adressleiste lagen
     von ihren 84px nur 19 im Bild, der Wagen klebte bei 94 Prozent der
     Höhe am unteren Rand und schien zu schweben. Die fehlende Höhe kommt
     aus dem Foto (20svh statt 30svh); der Abstand darunter bleibt, denn
     er ist genau der Platz, den der Wagen über den Schaltflächen braucht. */
  .hero-stage {
    padding: calc(var(--header-h) + 20svh + 24px) 0 clamp(152px, 40vw, 190px);
  }
  .hero-media { height: 20svh; }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 2.9rem); margin-bottom: 16px; }
  .hero .lead { font-size: 1rem; }
  .hero-cta { margin-top: 22px; gap: 10px; }
  .hero-ground { height: 84px; }
  .hero-car { bottom: calc(84px - 14px); }
  .hero-car .wagen { width: min(290px, 66vw); }

  /* Karten und Kacheln dichter */
  .loc, .faq-aside, .preis-teaser, .p-karte,
  .p-extra-block, .theorie-card { padding: 22px; }
  .kl-raster { grid-template-columns: 1fr; }
  .kl-kachel { padding: 20px 0; }
  .gruende, .why-grid { grid-template-columns: 1fr; gap: 26px; }
  .kl-kachel p, .grund p { font-size: .95rem; }

  .strip { padding: clamp(52px, 14vw, 76px) 0 clamp(32px, 8vw, 46px); }
  .strip-grid { gap: 26px 18px; }
  /* Auf schmalen Bildschirmen wirkt die Asphaltkante nur noch abgehackt,
     beide Seiten haben ohnehin dieselbe Asphaltfarbe. */
  .strip-edge { display: none; }

  .fakten { padding-top: 24px; padding-bottom: 26px; }
  .about-grid, .contact-grid, .faq-wrap { gap: 28px; }
  .values { gap: 8px; margin-top: 20px; }
  .values li { padding: 7px 13px; font-size: .84rem; }

  .theorie-inner { padding: clamp(52px, 14vw, 88px) 0; }
  .facts > div { padding: 12px 0; }

  .road { row-gap: 0; }
  .road-step { padding: 13px 0; }
  .road-num { width: 54px; height: 54px; font-size: 1rem; }
  .road-run { height: 68px; margin-bottom: 18px; }

  .faq-item summary { padding: 18px 2px; font-size: 1rem; }
  .faq-answer { padding: 0 34px 20px 2px; font-size: .95rem; }

  .footer-top { gap: 26px; padding-bottom: 32px; }
  .footer-col li { margin-bottom: 9px; }

  .seitenkopf { padding: calc(var(--header-h) + 40px) 0 30px; }
  .seitenkopf h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); margin-bottom: 16px; }
  .kl { padding-bottom: 30px; }
  .kl-text .lead { font-size: 1rem; margin-bottom: 14px; }
  .klassen-lang { gap: 30px; }
}

/* ---------------------------------------------------------
   12. Papier
   Gedruckt wird hier vor allem zweierlei: der Preisaushang und das
   Impressum. Ohne eigene Regeln kaemen die dunklen Baender als grosse
   schwarze Flaechen mit aufs Blatt, dazu die schwebenden Knoepfe und
   die feste Kopfzeile. Also: alles Bewegliche und Bedienbare weg,
   dunkle Flaechen aufhellen, und nichts mitten in einer Karte umbrechen.
   --------------------------------------------------------- */
@media print {
  /* Bedienelemente und Zierde gehoeren nicht aufs Papier */
  .site-header, .to-top, .ari-root, .dh, .scroll-progress, .auftakt,
  .hero-car, .hero-ground, .road-run, .strip-wheel, .strip-edge,
  .skip-link, .hero-media, .bk-band, .theorie-band { display: none !important; }

  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 11pt; line-height: 1.45;
  }
  /* Alle Flaechen hell, sonst frisst der Drucker die Patrone */
  .hero, .hero-stage, .strip, .why, .contact, .site-footer, .fakten,
  .theorie-card, .loc, .faq-aside, .p-karte, .kl-kachel {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important;
  }
  .site-footer, .strip, .fakten { border-top: 1px solid #999; }

  /* Abschnitte, die das Skript sonst erst beim Scrollen einblendet */
  html.js .reveal, html.js .reveal.is-visible, html.js .bk-band .bk {
    opacity: 1 !important; transform: none !important;
  }

  .hero-stage { min-height: 0 !important; padding: 0 0 12pt !important; }
  section, .shell { padding-block: 10pt !important; }

  /* Nichts mitten im Kasten umbrechen */
  .p-karte, .kl-kachel, .loc, .faq-item, .p-extra-block, .grund {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000 !important; }

  /* Adressen sichtbar machen, aber nur die, die man wirklich abtippt */
  .loc-address a::after, .contact-card[href^="tel:"]::after,
  .contact-card[href^="mailto:"]::after { content: ""; }
  a { color: #000 !important; text-decoration: none; }
}