/* ==========================================================================
   Jimmy's Fahrschule — Stylesheet
   Farbwelt: Graphit / Hellgrau / Akzentblau (angelehnt an die Fahrzeugbeschriftung)
   Schrift:  Space Grotesk (Headlines) + Manrope (Fliesstext)
   ========================================================================== */

/* --- Eigene Schriften (self-hosted) --------------------------------------
   Liegen lokal unter assets/fonts/ statt bei Google — dadurch überträgt
   das Laden der Schriften keine IP-Adresse mehr an Google (siehe
   datenschutz.html). Nur der "latin"-Zeichensatz ist eingebunden; der
   deckt auch Umlaute und ß ab (U+0000–00FF), reicht für Deutsch also aus. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-variable.woff2") format("woff2");
}

/* --- Design Tokens ------------------------------------------------------ */
:root {
  /* Hell */
  --bg:            #F4F5F7;
  --bg-alt:        #ECEEF1;
  --surface:       #FFFFFF;
  --line:          #DFE2E6;
  --ink:           #14181D;
  --ink-2:         #31373F;
  --muted:         #5C6470;

  /* Dunkel */
  --graphite:      #1A1D21;
  --graphite-2:    #24282D;
  --graphite-3:    #101214;
  --line-dark:     #33383E;
  --on-dark:       #F5F6F7;
  --on-dark-2:     #C7CCD3;
  --on-dark-3:     #A6ADB8;
  --on-dark-4:     #8A9099;

  /* Akzent — aus dem Logo entnommen (die blaue L-Tafel, gemessen #0C30E4).
     --accent gilt auf hellen Flächen. In den dunklen Abschnitten wird es
     weiter unten automatisch auf --accent-on-dark umgestellt, weil das
     Markenblau auf Graphit nur 2.1:1 erreicht und damit unlesbar wäre.
     --accent-solid bleibt überall gleich: es ist die Füllfarbe der Buttons,
     die weisse Schrift tragen (8.2:1). */
  --accent:         #0C30E4;
  --accent-solid:   #0C30E4;
  --accent-hover:   #0A28C4;
  --accent-on-dark: #7B9BFF;
  --accent-ink:     #FFFFFF;

  /* Abschnitts-Rhythmus — drei Stufen statt eines Werts.
     Vorher trugen alle zehn Abschnitte dasselbe padding-block; damit war
     jeder gleich laut und die Seite wirkte flach. Jetzt bekommen die drei
     Momente, auf die es ankommt (Hero, Preise, VKU-Buchung), Luft, und die
     tragenden Abschnitte treten zurück. */
  --sec-lead:      clamp(96px, 11vw, 152px);
  --sec-base:      clamp(64px, 8vw, 96px);
  --sec-quiet:     clamp(48px, 6vw, 72px);

  /* Titel-Skala — gleiche Staffelung, damit Grösse die Hierarchie trägt
     und nicht ein Label darüber. */
  --t-lead:        clamp(32px, 4.6vw, 52px);
  --t-base:        clamp(26px, 3.4vw, 36px);
  --t-quiet:       clamp(21px, 2.4vw, 27px);

  /* Struktur */
  --wrap:          1120px;
  --wrap-wide:     1440px;
  --gutter:        clamp(20px, 5vw, 64px);
  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     18px;
  --shadow-card:   0 1px 3px rgba(20, 24, 29, .06), 0 10px 28px rgba(20, 24, 29, .05);
  --shadow-nav:    0 1px 0 var(--line), 0 8px 24px rgba(20, 24, 29, .06);
  --header-h:      88px;

  --font-disp:     "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:     "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease:          cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, .disp {
  font-family: var(--font-disp);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

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

/* Sichtbarer Tastaturfokus auf allen interaktiven Elementen */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Hilfsklassen ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --- Sektionen ---------------------------------------------------------- */
.section {
  padding-block: var(--sec-base);
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Die zwei Momente, die tragen sollen: mehr Luft und ein grösserer Titel.
   Alles andere tritt bewusst zurück. */
.section--lead  { padding-block: var(--sec-lead); }
.section--lead .section-title { font-size: var(--t-lead); }

/* Stützende Abschnitte: kompakter, kleinerer Titel — sie sollen nicht mit
   den Hauptmomenten um Aufmerksamkeit konkurrieren. */
.section--quiet { padding-block: var(--sec-quiet); }
.section--quiet .section-title { font-size: var(--t-quiet); }

.section--light  { background: var(--bg); }
.section--alt    { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--paper  { background: var(--surface); }
.section--dark   { background: var(--graphite); }
.section--hairline { border-bottom: 1px solid var(--line); }

.section--dark h2,
.section--dark h3 { color: var(--on-dark); }

/* Eine Zeile stellt jede Akzentfarbe innerhalb der dunklen Bereiche auf die
   aufgehellte Variante um — Eyebrows, Icons, Links, Preise, Fokusrahmen.
   Die Buttons sind davon ausgenommen, sie nutzen --accent-solid. */
.hero,
.section--dark,
.site-footer {
  --accent: var(--accent-on-dark);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease) .15s;
}
.reveal.is-visible .eyebrow { opacity: 1; transform: none; }
.reveal.is-visible .eyebrow::before { transform: scaleX(1); }

.section-title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: clamp(32px, 5vw, 48px);
  max-width: 22ch;
  overflow: hidden;
}
.section-title--wide { max-width: none; }
.section-title > span {
  display: inline-block;
  transform: translateY(-100%);
  transition: transform .6s var(--ease) .1s;
}
.reveal.is-visible .section-title > span { transform: translateY(0); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--primary {
  background: linear-gradient(135deg, #3555F0, var(--accent-solid));
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #4562F5, var(--accent-hover));
  box-shadow: 0 10px 24px rgba(12, 48, 228, .28);
}

.btn--outline {
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, .22);
}
.btn--outline:hover { background: rgba(245, 246, 247, .08); border-color: rgba(255, 255, 255, .4); }

.btn--pill { border-radius: 999px; padding: 11px 22px; font-size: 14.5px; }

.link-accent { color: var(--accent); }
.link-accent:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Header / Navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 245, 247, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header[data-scrolled] { box-shadow: var(--shadow-nav); }

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* Das Logo ist freigestellt (transparenter Grund) und sehr breit — die Höhe
   steuert, nicht die Breite. */
.brand__logo-wrap {
  position: relative;
  display: block;
  flex: none;
  line-height: 0;
}
.brand__logo {
  /* Bewusst grosszügig: Das Auto, das beim Scrollen die Strasse hochfährt,
     ist nur ein Bruchteil dieser Höhe — es braucht die Grösse, um aufzufallen. */
  height: 64px;
  width: auto;
  display: block;
}

/* Auto-Overlay: liegt deckungsgleich über dem Logo. Gleiches Seitenverhältnis
   wie die Bilddatei, deshalb passt der viewBox-Raum exakt auf die Grafik. */
.brand__car {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.brand__car-body { transition: transform .12s linear; }

@media (prefers-reduced-motion: reduce) {
  /* Das Auto bleibt sichtbar, fährt aber nicht mit. */
  .brand__car-body { transition: none; }
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav__link {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--accent); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.nav-toggle:hover { background: rgba(20, 24, 29, .05); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-2px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--graphite);
  padding-block: clamp(56px, 8vw, 88px) clamp(64px, 9vw, 96px);
  position: relative;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}
.hero__glow--accent {
  width: 520px; height: 520px;
  top: -220px; right: -140px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .16;
}
.hero__glow--steel {
  width: 360px; height: 360px;
  bottom: -180px; left: -100px;
  background: radial-gradient(circle, #9CA3AF 0%, transparent 70%);
  opacity: .14;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  align-items: center;
  gap: clamp(32px, 5vw, 56px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-2);
}
.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero__title {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.06;
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  max-width: 17ch;
}
/* Betonung über Farbe, nicht über einen Verlauf: Verlaufstext ist Dekoration
   und liest sich bei grossen Graden unsauber an den Kanten. */
.hero__title-accent { color: var(--accent-on-dark); }
.hero__line { display: block; overflow: hidden; }
.hero__line-inner { display: block; }
.hero__text {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--on-dark-3);
  margin-bottom: 34px;
  max-width: 46ch;
}

/* --- Hero: Eintritts-Animation ------------------------------------------- */
@keyframes hero-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__text, .hero__actions, .hero .facts, .hero .hero__photo-frame {
  animation: hero-up .8s var(--ease) both;
}
.hero__text   { animation-delay: .38s; }
.hero__actions{ animation-delay: .5s; }
.hero .facts  { animation-delay: .62s; }
.hero .hero__photo-frame { animation-delay: .22s; }

/* Titelzeilen fahren von oben (aus der Maske) nach unten ein. */
@keyframes line-down {
  from { transform: translateY(-115%); }
  to   { transform: translateY(0); }
}
.hero__line-inner { animation: line-down .75s var(--ease) both; }
.hero__line:nth-child(1) .hero__line-inner { animation-delay: .05s; }
.hero__line:nth-child(2) .hero__line-inner { animation-delay: .2s; }

@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-16px, 18px) scale(1.06); }
}
.hero__glow--accent { animation: glow-drift 14s ease-in-out infinite; }
.hero__glow--steel   { animation: glow-drift 18s ease-in-out infinite reverse; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; }

.facts {
  display: flex;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-dark-2);
  transition: color .18s var(--ease);
}
.facts li:hover { color: var(--on-dark); }
.facts svg { color: var(--accent); flex: none; transition: transform .18s var(--ease); }
.facts li:hover svg { transform: scale(1.2); }

/* Foto-Rahmen (Hero + Porträt) --------------------------------------------
   Sobald die echte Bilddatei unter assets/img/ liegt, ersetzt sie den
   Platzhalter automatisch. Fehlt sie, blendet main.js den Platzhalter ein. */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--graphite-2);
  border: 1px solid var(--line-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo--hero { aspect-ratio: 1 / 1; width: 100%; }
.photo--portrait { aspect-ratio: 5 / 6; width: 100%; max-width: 300px; }
.photo--wide { aspect-ratio: 4 / 3; width: 100%; }
/* Flottenfotos: drei im Dreierpack in der Originalform der Bilder (3:2).
   Auf dem Handy eine seitlich wischbare Reihe mit einrastenden Bildern,
   das nächste Foto schaut jeweils ein Stück heraus. */
.flotte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.photo--flotte { aspect-ratio: 3 / 2; }
.flotte:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-lg); }

/* Klick auf ein Flottenfoto öffnet die Grossansicht. Der Link füllt den
   ganzen Rahmen, die Zoom-Animation des Bildes bleibt (.photo:hover). */
.photo__oeffnen { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.photo__oeffnen:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.photo__lupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 18, 20, .72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #FFFFFF;
  opacity: .85;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.photo__oeffnen:hover .photo__lupe, .photo__oeffnen:focus-visible .photo__lupe { opacity: 1; transform: scale(1.1); }

/* --- Grossansicht (Lightbox) ---------------------------------------------
   Natives <dialog>: Fokus bleibt im Dialog, Esc schliesst, der Fokus
   springt danach zum Foto zurück. */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  overflow: hidden;
}
.lightbox[open] { display: block; animation: lb-ein .22s var(--ease); }
.lightbox::backdrop { background: rgba(10, 12, 14, .9); backdrop-filter: blur(4px); }
@keyframes lb-ein { from { opacity: 0; } to { opacity: 1; } }
html.lightbox-offen { overflow: hidden; }

.lightbox__buehne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 56px clamp(12px, 6vw, 88px);
  cursor: zoom-out;
}
.lightbox__figur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: default; }
.lightbox__bild {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: lb-bild .28s var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
@keyframes lb-bild { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox__zaehler { font-size: 13px; font-weight: 700; color: #C7CCD3; letter-spacing: .04em; }

.lightbox__zu, .lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(16, 18, 20, .72);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.lightbox__zu:hover, .lightbox__nav:hover { background: rgba(16, 18, 20, .95); border-color: rgba(255, 255, 255, .55); }
.lightbox__zu:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid var(--accent-on-dark); outline-offset: 2px; }
.lightbox__zu { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--zurueck { left: 14px; }
.lightbox__nav--weiter { right: 14px; }
@media (max-width: 760px) {
  .lightbox__buehne { padding: 64px 10px 40px; }
  .lightbox__bild { max-height: calc(100vh - 170px); }
  .lightbox__nav { top: auto; bottom: 14px; translate: none; }
  .lightbox__nav--zurueck { left: calc(50% - 56px); }
  .lightbox__nav--weiter { right: calc(50% - 56px); }
}

/* Werbevideo (Hero): im Originalformat 16:9, damit nichts abgeschnitten wird.
   Das <video> nimmt keine Mausklicks an (pointer-events), damit weder das
   Kontextmenü «Video speichern unter …» noch langes Drücken auf dem Handy
   etwas auslöst. Bedienbar ist nur der Ton-Knopf. */
.photo--video { aspect-ratio: 16 / 9; background: #000; }
.photo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.video__ton {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(16, 18, 20, .72);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.video__ton:hover { background: rgba(16, 18, 20, .9); border-color: rgba(255, 255, 255, .5); }
.video__ton:focus-visible { outline: 3px solid var(--accent-on-dark); outline-offset: 2px; }
.video__ton-icon { flex: none; }
.video__ton-icon--an { display: none; }
.video__ton.ist-an .video__ton-icon--aus { display: none; }
.video__ton.ist-an .video__ton-icon--an { display: inline; }

.hero__photo-frame { position: relative; }

.photo__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.photo[data-missing] .photo__img { display: none; }
.photo:hover .photo__img { transform: scale(1.06); }

.photo__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.photo[data-missing] .photo__fallback { display: flex; }
.photo__fallback span {
  font-size: 13px;
  color: var(--on-dark-4);
  font-weight: 600;
  max-width: 30ch;
  line-height: 1.5;
}
/* Liegt über dem Foto — braucht eine eigene dunkle Grundierung, sonst geht
   die Schrift auf hellen Bildstellen (Himmel) unter. */
.photo__tag {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 18, 20, .72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
}
.photo__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* --- Karten-Grids ------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Auf --paper (weiss) reicht der sehr dezente Kartenschatten allein nicht,
   um die weisse Karte vom ebenfalls weissen Hintergrund abzuheben — hier
   zusätzlich ein feiner Rahmen wie bei .price/.price-addon. */
.section--paper .card { border: 1px solid var(--line); }
.card:hover,
.reveal.is-visible .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(20, 24, 29, .08), 0 18px 36px rgba(20, 24, 29, .1);
}
.card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 16%, white);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.card:hover .card__icon {
  background: linear-gradient(135deg, #3555F0, var(--accent));
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.card__q {
  display: block;
  cursor: pointer;
  list-style: none;
}
.card__q::-webkit-details-marker { display: none; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__q:hover .card__title { color: var(--accent); }
.card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.card__sign {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C7CBD1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
  transition: transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.card__sign::before, .card__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.card__sign::before { width: 9px; height: 1.5px; }
.card__sign::after  { width: 1.5px; height: 9px; transition: opacity .22s var(--ease); }
.card__details[open] .card__sign { transform: rotate(180deg); border-color: var(--accent); color: var(--accent); }
.card__details[open] .card__sign::after { opacity: 0; }
.card__text { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; }

/* --- Der Weg zum Führerschein ------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step { display: block; }
.step__q {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.step__q::-webkit-details-marker { display: none; }
.step__num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.step:hover .step__num {
  transform: scale(1.15);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.step__title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.step__q:hover .step__title { color: var(--accent); }
.step__sign {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C7CBD1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
  transition: transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.step__sign::before, .step__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.step__sign::before { width: 9px; height: 1.5px; }
.step__sign::after  { width: 1.5px; height: 9px; transition: opacity .22s var(--ease); }
.step__details[open] .step__sign { transform: rotate(180deg); border-color: var(--accent); color: var(--accent); }
.step__details[open] .step__sign::after { opacity: 0; }
.step__text { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 10px 0 0 50px; }

.section--dark .step__title { color: var(--on-dark); }
.section--dark .step__text  { color: var(--on-dark-3); }
.section--dark .step__sign  { border-color: rgba(255, 255, 255, .3); color: var(--on-dark-3); }
.section--dark .step__details[open] .step__sign { border-color: var(--accent); color: var(--accent); }

/* --- Preise --------------------------------------------------------------
   Ein Akzent (Markenblau) überall — die Linie oben, Haken und Badges
   bleiben konsistent blau. Unterscheidung kommt jetzt über zwei andere
   Achsen: eine Karte pro Sektion kann als .price--featured hervorgehoben
   werden (Bestseller-Rahmen + Badge, dauerhaft sichtbar), und jede Karte
   wächst beim Hover/Fokus leicht und blendet Haken + CTA ein, die im
   Ruhezustand kompakt eingeklappt sind. Auf Touch (kein :hover) bleiben
   Haken + CTA immer offen, sonst gäbe es dort keine Möglichkeit, sie zu
   sehen. */
.price-group .grid--2,
.price-group .grid--3 { gap: 14px; }
.price-group + .price-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.price-group__title {
  font-family: var(--font-disp);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.price-group__note {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Kompakte Kategorie-Kennzeichnung für Karten, deren Titel die Kategorie
   nicht schon selbst nennt (VKU-Kurs, Motorrad-Grundkurs). */
.price__kat {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Einzeilige Zusatzinfo für Karten, deren Titel die Kategorie schon nennt
   (Fahrstunde Kat. B/BE/BPT). */
.price__note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Einmalige Zusatzpauschale, volle Breite unter den Fahrstunden-Preisen —
   gilt nur fürs Fahrstunden-Konto, darum kein eigenes grid--2-Kärtchen
   und kein eigener price-group. */
.price-addon {
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.price-addon:hover,
.reveal.is-visible .price-addon:hover { border-color: var(--accent); transform: translateY(-2px); }
.price-addon__bar { height: 4px; background: var(--accent); }
.price-addon__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 18px;
}
.price-addon__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-addon__body { flex: 1 1 260px; min-width: 0; }
.price-addon__title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.price-addon__sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.price-addon__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.price-addon__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.price-addon__price {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-addon__price b {
  font-family: var(--font-disp);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.price-addon__price span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.price {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.price:hover,
.reveal.is-visible .price:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(20, 24, 29, .08), 0 18px 36px rgba(20, 24, 29, .1);
}
.price__bar { height: 4px; background: var(--accent); }
.price__body { padding: clamp(14px, 2vw, 20px); }
.price__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.price__amount b {
  font-family: var(--font-disp);
  font-size: clamp(24px, 2.8vw, 29px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.price__amount span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.price__amount + .price__kat { margin-top: 6px; }

.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.ticks svg { flex: none; margin-top: 3px; color: var(--accent); }

.price__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.price__cta:hover { color: var(--accent-hover); gap: 11px; }

/* Bestseller-Auszeichnung: statt Rahmen/Band bekommen die beiden
   wichtigsten Karten (Fahrstunde Kat. B, VKU-Kurs) denselben dunklen
   Look wie der grosse CTA-Block darunter — dauerhaft, nicht erst beim
   Hover, und ohne ein zusätzliches "Beliebt"-Etikett zu behaupten, das
   für einen obligatorischen Kurs (VKU) ohnehin nicht stimmen würde.
   --accent kippt hier wie in .hero/.section--dark auf die helle
   Variante, damit Bar, Haken und Badge auf Dunkel lesbar bleiben. */
.price--highlight {
  --accent: var(--accent-on-dark);
  background: var(--graphite);
  border-color: var(--line-dark);
}
/* Der Streifen bleibt das fixe Markenblau, wie bei allen anderen Karten —
   nur Haken/Badge/Rahmen wechseln auf den helleren Dunkel-Ton, damit sie
   auf Graphit lesbar bleiben. */
.price--highlight .price__bar { background: var(--accent-solid); }
.price--highlight:hover,
.reveal.is-visible .price--highlight:hover { border-color: var(--accent); }
.price--highlight .price__label,
.price--highlight .price__amount span,
.price--highlight .price__note { color: var(--on-dark-3); }
.price--highlight .price__amount b { color: var(--on-dark); }
.price--highlight .ticks li { color: var(--on-dark-2); }
.price--highlight .price__kat { background: rgba(123, 155, 255, .16); color: var(--accent-on-dark); }
.price__cta--btn { margin-top: 12px; width: 100%; }

/* Details (Haken + CTA) klappen erst beim Hover/Fokus auf — nur wenn das
   Eingabegerät echtes Hover kann. Auf Touch bleiben sie immer offen.
   grid-template-rows 0fr→1fr statt max-height: animiert nur Compositing,
   kein Layout-Thrash, und braucht keinen geschätzten Maximalwert. */
@media (hover: hover) and (pointer: fine) {
  .price__details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s var(--ease), opacity .2s var(--ease);
  }
  .price__details-inner { overflow: hidden; min-height: 0; }
  .price:hover .price__details,
  .price:focus-within .price__details { grid-template-rows: 1fr; opacity: 1; }
  .price:hover,
  .reveal.is-visible .price:hover,
  .price:focus-within {
    transform: scale(1.045) translateY(-4px);
    z-index: 2;
  }
}

/* Eine grosse, gebündelte Buchungs-Aktion statt eines CTA-Links pro
   Preiskarte — dunkler Block bricht bewusst mit den hellen Karten
   darüber und macht die Handlung unübersehbar. */
.leistungen-cta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  background: var(--graphite);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 30px) clamp(24px, 5vw, 36px);
}
.leistungen-cta__title {
  font-family: var(--font-disp);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--on-dark);
  margin-bottom: 5px;
}
.leistungen-cta__sub { font-size: 13.5px; color: var(--on-dark-3); max-width: 44ch; }
.leistungen-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; }
.leistungen-cta__btn { font-size: 15px; padding: 15px 28px; }
.leistungen-cta__link { font-size: 12.5px; font-weight: 600; color: var(--accent-on-dark); }
.leistungen-cta__link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .leistungen-cta__actions { width: 100%; }
  .leistungen-cta__btn { width: 100%; justify-content: center; }
}

/* --- Kundenstimmen ------------------------------------------------------ */
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin: 0;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.quote:hover,
.reveal.is-visible .quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.quote__sterne { display: flex; gap: 3px; margin: 0 0 14px; color: var(--accent-solid); }
.quote__sterne svg { flex: none; transition: transform .22s var(--ease); }
.quote:hover .quote__sterne svg { transform: scale(1.12); }
.quote__text {
  margin: 0;                /* sonst setzt der Browser den Standard-Einzug von <blockquote> */
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  font-style: italic;
}

/* Endlose Lauf-Schleife: Karten ziehen von links nach rechts durch und
   verschwinden am rechten Rand.

   Der Streifen ist von Anfang an fertig gesetzt: Der Track enthält die drei
   Karten dreimal (Kopien aria-hidden) und steht im Ruhezustand schon um einen
   Satz nach links verschoben (-33.333%) — das Fenster ist also gleich beim
   ersten Bild voll, ohne dass etwas einfahren muss. Der Lauf (main.js setzt
   data-laeuft nach dem Laden) schiebt ihn um genau diesen einen Satz nach
   rechts und springt dann zurück; Anfangs- und Endbild sind identisch,
   der Sprung bleibt unsichtbar. Das Fenster hat kein Padding, damit der
   Track exakt am Fensterrand beginnt. */
.testi-marquee {
  overflow: hidden;
  margin: 0 calc(var(--gutter) * -1);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track {
  display: flex;
  gap: 24px;
  padding-right: 24px;   /* letzter Abstand, damit jeder Satz exakt gleich breit ist (3 x 364 px) */
  width: max-content;
  transform: translateX(-33.3333%);
}
.testi-marquee[data-laeuft] .testi-track { animation: testi-scroll 32s linear infinite; }
.testi-marquee[data-laeuft]:hover .testi-track { animation-play-state: paused; }
.testi-track .quote { flex: 0 0 340px; }
@keyframes testi-scroll {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0%); }
}

/* --- Über mich ---------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.about__name {
  font-size: clamp(28px, 3.8vw, 34px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.about__role { font-size: 15px; color: var(--muted); font-weight: 600; margin-bottom: 24px; }
.about__details { margin-bottom: 24px; }
.about__q {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  transition: color .18s var(--ease);
}
.about__q::-webkit-details-marker { display: none; }
.about__q:hover { color: var(--accent-hover); }
.about__sign {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C7CBD1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  position: relative;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.about__sign::before, .about__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.about__sign::before { width: 9px; height: 1.5px; }
.about__sign::after  { width: 1.5px; height: 9px; transition: opacity .22s var(--ease); }
.about__details[open] .about__sign { transform: rotate(180deg); border-color: currentColor; }
.about__details[open] .about__sign::after { opacity: 0; }
.about__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 62ch;
  margin-top: 16px;
}
.chips { display: flex; gap: 12px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.chips li {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.chips li:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
}

/* --- FAQ (native <details>) --------------------------------------------- */
.faq { max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: clamp(15.5px, 2vw, 16.5px);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }

.faq__sign {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C7CBD1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
  transition: transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.faq__sign::before { width: 10px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 10px; transition: opacity .22s var(--ease); }

.faq__item[open] .faq__sign { transform: rotate(180deg); border-color: var(--accent); color: var(--accent); }
.faq__item[open] .faq__sign::after { opacity: 0; }

.faq__a {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 64ch;
  padding-bottom: 22px;
  margin-top: -4px;
}

/* --- Standort / Karte --------------------------------------------------- */
/* Karte oben über die ganze Breite, die Adresse als Karte direkt darunter. */
.location {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #E8EAED;
  overflow: hidden;
  min-height: 400px;
}
.map__sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 22px;
  text-align: center;
  /* Deckung bleibt bis 52% Höhe konstant hoch (deckt Text + Button
     zuverlässig ab), erst darüber, wo kein Text mehr liegt, blendet es
     zur Kartenskizze aus. Vorher verlief die Abstufung schon unter dem
     Text, wodurch die obere Zeile streckenweise unter 4.5:1 Kontrast fiel. */
  background: linear-gradient(to top, rgba(26, 29, 33, .88) 0%, rgba(26, 29, 33, .88) 52%, transparent 100%);
}
.map__consent p { font-size: 12.5px; color: #E6E8EB; max-width: 42ch; line-height: 1.5; }

.address {
  /* Eigene helle Karte, unabhängig davon, ob die Sektion drumherum hell
     oder dunkel ist (--standort kann beides sein) — --accent bewusst auf
     die normale Variante zurückgesetzt, sonst würde .section--dark sie
     hier drin auf die helle On-Dark-Variante kippen. */
  --accent: var(--accent-solid);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.address__label {
  /* Höhere Spezifität als `.section--dark h3`, das sonst gewinnen und
     dieses <h3> auf helle On-Dark-Farbe kippen würde. */
  font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.address .address__label { color: var(--ink); }
.address__value { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; font-style: normal; }
.address__note { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

.address__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.address__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.address__link svg { flex: none; }

/* --- Kontakt -------------------------------------------------------------
   Bewusst kein Formular: ein grosser WhatsApp-CTA als Hauptweg, Telefon/
   Mail/Adresse nur noch als kleine, sekundäre Zeile darunter. */
.contact {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.contact .section-title { margin-inline: auto; }
.contact__text {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 44ch;
}
.btn--cta { padding: 18px 36px; font-size: 16.5px; }
.contact__cta { margin-bottom: 36px; }

.contact__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.contact__list li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.contact__list svg { flex: none; }
.contact__list a { color: var(--ink-2); transition: color .18s var(--ease); }
.contact__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--graphite-3); padding-block: 44px; }
.site-footer__offices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--on-dark-4);
}
.site-footer__offices-label { font-weight: 700; color: var(--on-dark-3); margin-bottom: 2px; }
.site-footer__offices a { color: var(--on-dark-4); transition: color .18s var(--ease); }
.site-footer__offices a:hover { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__name {
  font-family: var(--font-disp);
  font-size: 16px;
  font-weight: 700;
  color: var(--on-dark);
  margin-bottom: 4px;
}
.site-footer__meta { font-size: 13px; color: var(--on-dark-4); }

.site-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.site-footer__links { display: flex; gap: 18px; font-size: 13px; color: var(--on-dark-4); flex-wrap: wrap; }
.site-footer__links a:hover { color: var(--on-dark-2); }

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--on-dark-3);
  transition: color .18s var(--ease);
}
.site-footer__social:hover { color: var(--accent-on-dark); }
.site-footer__social:hover span { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}
.site-footer__credit { font-size: 12.5px; color: var(--on-dark-4); }
.site-footer__credit a { color: #8A9099; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--accent); }

/* --- Rechtstexte (Impressum / Datenschutz) ------------------------------ */
.legal { max-width: 760px; }
.legal h1 {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 700;
  margin-bottom: 12px;
}
.legal__intro { color: var(--muted); margin-bottom: 40px; }
.legal h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 10px;
}
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin: 12px 0; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal address { font-style: normal; }
.todo {
  background: #FFF6E0;
  border: 1px solid #F0DDA8;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #6B5514;
  margin: 24px 0;
}
.todo strong { color: #4F3F0C; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 32px;
}
.back-link:hover { color: var(--accent); }

/* --- Intro: Logo-Einblendung beim ersten Laden --------------------------
   Deckt die Seite bis main.js übernimmt (kein Flash unfertiger Inhalte),
   dann: Logo einblenden, kurz halten, ganze Fläche ausblenden.
   Läuft nur einmal pro Sitzung, siehe main.js.
   Hintergrund ist das helle --bg der Seite, damit er zur weissen Logo-
   Karte passt statt hart dagegen zu stehen. Die Wortmarke "JIMMYS" im
   Logo ist dunkel gezeichnet (fürs helle Kopfzeilen-Weiss ausgelegt) und
   sitzt darum auf einer eigenen weissen Karte mit Schatten, die sich vom
   hellen Hintergrund trotzdem klar abhebt. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity .5s var(--ease);
}
.intro__logo-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 36px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.intro[data-visible] .intro__logo-card { opacity: 1; transform: scale(1); }
.intro__logo { display: block; width: clamp(150px, 26vw, 220px); height: auto; }
.intro[data-leaving] { opacity: 0; pointer-events: none; }

/* Auto-Durchfahrt vorerst deaktiviert (Wunsch: erstmal nur Logo, Auto
   kann später wieder rein) — Markup dafür in main.js/HTML ist ebenfalls
   auskommentiert, nicht entfernt. Regeln hier bewusst stehen gelassen.
.intro__car {
  position: absolute;
  left: 0;
  bottom: 24%;
  width: 240px;
  height: auto;
  opacity: 0;
  z-index: 1;
}
.intro[data-visible] .intro__car { animation: intro-car-drive 1.7s linear .15s forwards; }
@keyframes intro-car-drive {
  0%   { opacity: 0; transform: translateX(calc(100vw + 100px)); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-300px); }
}
*/

/* --- Scroll-Reveal ------------------------------------------------------
   Etwas weiterer Weg und ein Hauch mehr Dauer als vorher, damit der
   Effekt beim Scrollen als "Einfliegen" wahrgenommen wird statt als
   reines Aufblenden — bleibt aber dieselbe eine Bewegung, die die ganze
   Seite schon durchgängig nutzt (kein zweiter, abweichender Effekt). */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Kinder von Grids/Listen erscheinen nacheinander statt alle auf einmal. */
.reveal .card,
.reveal .step,
.reveal .price,
.reveal .quote {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.reveal.is-visible .card,
.reveal.is-visible .step,
.reveal.is-visible .price,
.reveal.is-visible .quote {
  opacity: 1;
  transform: none;
}
.reveal.is-visible .card:nth-child(1),
.reveal.is-visible .step:nth-child(1),
.reveal.is-visible .price:nth-child(1),
.reveal.is-visible .quote:nth-child(1) { transition-delay: .05s; }
.reveal.is-visible .card:nth-child(2),
.reveal.is-visible .step:nth-child(2),
.reveal.is-visible .price:nth-child(2),
.reveal.is-visible .quote:nth-child(2) { transition-delay: .13s; }
.reveal.is-visible .card:nth-child(3),
.reveal.is-visible .step:nth-child(3),
.reveal.is-visible .price:nth-child(3),
.reveal.is-visible .quote:nth-child(3) { transition-delay: .21s; }
.reveal.is-visible .card:nth-child(4),
.reveal.is-visible .step:nth-child(4) { transition-delay: .29s; }
.reveal.is-visible .step:nth-child(5) { transition-delay: .37s; }
.reveal.is-visible .step:nth-child(6) { transition-delay: .45s; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 760px) {
  .flotte {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: 6px;
  }
  .photo--flotte { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) 360px; }
}

@media (max-width: 1080px) {
  :root { --header-h: 76px; }

  .brand__logo { height: 48px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 24, 29, .14);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open] { transform: none; opacity: 1; visibility: visible; }
  .nav__link {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav .btn { margin-top: 18px; width: 100%; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .photo--hero { max-width: 420px; }
  .photo--hero.photo--video { max-width: 560px; }

  .location { grid-template-columns: minmax(0, 1fr); }
  .contact  { grid-template-columns: minmax(0, 1fr); }
  .about    { grid-template-columns: minmax(0, 1fr); }
  .photo--portrait { max-width: 260px; }
  .grid--2  { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .grid--4, .grid--3, .steps { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 26px; }
  .hero__actions { gap: 18px; }
  .hero__buttons { width: 100%; }
  .hero__buttons .btn { flex: 1 1 auto; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__right { align-items: flex-start; }
  .card { padding: 24px; }
}

/* --- Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .map__consent, .hero__glow { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding-block: 24px; background: #fff !important; }
  .section--dark *, .hero * { color: #000 !important; }
}

/* ==========================================================================
   VKU-Termine und Online-Anmeldung
   Liegt im dunklen Abschnitt, deshalb greift dort automatisch
   --accent-on-dark. Buttons behalten --accent-solid.
   ========================================================================== */

.vku__lead {
  font-size: clamp(15px, 1.8vw, 16.5px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
  margin: -24px 0 36px;
}

/* --- Kursarten: Tabs für VKU, Motorrad-Grundkurs, Nothelferkurs ---------- */
.kurs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }

.kurs-tab {
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.kurs-tab:hover { border-color: var(--accent); color: var(--accent); }
.kurs-tab[aria-selected="true"] {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-ink);
}
.kurs-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.kurs-panel__lead {
  font-size: clamp(15px, 1.8vw, 16.5px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 28px;
}

/* Schmales Einzelfeld, z. B. die Anrede */
.field--schmal { max-width: 240px; }

/* --- Kategorien-Chips unter der Leistungs-Überschrift -------------------
   Kompaktere Variante der Standard-Chips: kleinere Schrift/Polsterung,
   sonst dieselben hellen Token-Farben. */
.chips--kategorien { gap: 8px; margin: -24px 0 28px; }
.chips--kategorien li {
  font-family: var(--font-disp);
  letter-spacing: .02em;
  background: var(--bg-alt);
  border-color: var(--line);
  color: var(--ink-2);
  padding: 6px 12px;
  font-size: 12px;
}
.chips--kategorien li:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- Terminliste -------------------------------------------------------- */
.kursliste { display: flex; flex-direction: column; gap: 14px; }

.kurs-info {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-3);
  background: var(--graphite-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0;
}
.kurs-info a { color: var(--accent); font-weight: 700; }

.kurs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  background: var(--graphite-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.kurs:hover { border-color: #454B53; transform: translateY(-2px); }

.kurs__datum {
  font-family: var(--font-disp);
  font-weight: 700;
  color: var(--on-dark);
  line-height: 1.15;
  text-align: center;
  min-width: 76px;
}
.kurs__datum b { display: block; font-size: 20px; letter-spacing: -0.01em; }
.kurs__datum span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}

.kurs__titel {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--on-dark);
  margin: 0 0 4px;
}
.kurs__meta {
  font-size: 13.5px;
  color: var(--on-dark-3);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kurs__frei {
  display: inline-flex;
  align-items: center;
  background: rgba(123, 155, 255, .10);
  border: 1px solid rgba(123, 155, 255, .32);
  color: #8FA9FF;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 700;
}
.kurs__frei--knapp {
  background: rgba(255, 176, 58, .10);
  border-color: rgba(255, 176, 58, .38);
  color: #FFC061;
}

.kurs__text {
  grid-column: 2 / -1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-3);
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-dark);
}

/* Erbt Farbe und Verlauf von .btn--primary — hier nur die Platzierung. */
.kurs__cta { flex: none; white-space: nowrap; }

/* --- Aufklappbare Anmeldung --------------------------------------------- */
.anmeldung {
  margin-top: 28px;
  background: var(--graphite-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.anmeldung__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  font-size: clamp(15.5px, 2vw, 16.5px);
  font-weight: 700;
  color: var(--on-dark);
  cursor: pointer;
  list-style: none;
}
.anmeldung__kopf::-webkit-details-marker { display: none; }
.anmeldung__kopf:hover { color: var(--accent); }

.anmeldung__zeichen {
  flex: none;
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-dark);
  color: var(--on-dark-3);
  transition: transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.anmeldung__zeichen::before,
.anmeldung__zeichen::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: currentColor;
  border-radius: 1px;
}
.anmeldung__zeichen::before { width: 10px; height: 1.5px; }
.anmeldung__zeichen::after  { width: 1.5px; height: 10px; transition: opacity .22s var(--ease); }

.anmeldung[open] .anmeldung__zeichen {
  transform: rotate(180deg);
  border-color: var(--accent);
  color: var(--accent);
}
.anmeldung[open] .anmeldung__zeichen::after { opacity: 0; }

.anmeldung__inhalt {
  padding: 24px 24px 26px;
  border-top: 1px solid var(--line-dark);
}

/* --- Formular ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }

.form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-3);
}

.field input,
.field select {
  font: inherit;
  font-size: 15px;
  color: var(--on-dark);
  background: var(--graphite);
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s var(--ease);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6ADB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.field input::placeholder { color: #858C96; }
.field input:hover,
.field select:hover { border-color: #454B53; }
.field input:focus,
.field select:focus { border-color: var(--accent); outline: none; }
.field input:focus-visible,
.field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #FF9B9B; }

/* Für Menschen unsichtbar; nur automatisierte Einträge füllen es aus. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Zustimmungen ------------------------------------------------------- */
.zustimmung > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--on-dark-2);
  cursor: pointer;
}
.zustimmung input[type="checkbox"] {
  width: 19px; height: 19px;
  margin: 1px 0 0;
  accent-color: var(--accent-solid);
  cursor: pointer;
}
.zustimmung a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.zustimmung strong { color: var(--on-dark); }

/* --- Bild zur Registernummer -------------------------------------------- */
.reg-bild { margin: 12px 0 0; }
.reg-bild img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: #FFFFFF;
}
.reg-bild figcaption {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-dark-4);
  margin-top: 8px;
}

/* --- Rückmeldungen ------------------------------------------------------ */
.feld-fehler {
  font-size: 13px;
  font-weight: 600;
  color: #FF9B9B;
  margin: 0;
}

.form__submit { width: 100%; margin-top: 4px; }

.form-meldung {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-3);
  margin: 0;
}
.form-meldung:empty { display: none; }
.form-meldung--fehler { color: #FF9B9B; }

.buchung-fertig { text-align: center; padding: 14px 0 6px; }
.buchung-fertig__titel {
  font-family: var(--font-disp);
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}
.buchung-fertig p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-2);
  margin: 0 auto;
  max-width: 52ch;
}
.buchung-fertig__nr {
  font-size: 13px !important;
  color: var(--on-dark-4) !important;
  margin-top: 14px !important;
}

@media (max-width: 720px) {
  .kurs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px;
  }
  .kurs__datum {
    text-align: left;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .kurs__datum span { margin-top: 0; }
  .kurs__text { grid-column: 1; }
  .kurs__cta { width: 100%; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .anmeldung__kopf { padding: 20px; }
  .anmeldung__inhalt { padding-left: 20px; padding-right: 20px; }
}

/* --- Cookie-Banner -------------------------------------------------------
   Erscheint nur, bis eine Wahl getroffen wurde (main.js speichert sie in
   localStorage). Erst nach "Akzeptieren" lädt main.js Google Analytics. */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 250;
  background: var(--graphite);
  border-top: 1px solid var(--line-dark);
  padding: 18px var(--gutter);
  box-shadow: 0 -8px 24px rgba(20, 24, 29, .18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.cookie-banner__text { font-size: 13.5px; color: var(--on-dark-3); line-height: 1.6; max-width: 62ch; margin: 0; }
.cookie-banner__text a { color: var(--accent-on-dark); }
.cookie-banner__text a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }

@media (max-width: 620px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
}