/* Fun Fahrschule, Gestaltungsentwurf. Farben aus dem Logo (Indigo, Gelb) und der Berliner Abendstimmung. */
@font-face {
  font-family: 'Funnel Display';
  src: url('assets/fonts/FunnelDisplay-var-latin.woff2') format('woff2');
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url('assets/fonts/FunnelSans-var-latin.woff2') format('woff2');
  font-weight: 300 800; font-display: swap;
}

:root {
  --nacht: #120f3a;
  --nacht-2: #1a1652;
  --indigo: #221d7a;
  --daemmer: #4a3f8c;
  --gelb: #f7d23e;
  --laterne: #ffb658;
  --kreide: #f3f0ff;
  --kreide-2: #c9c3ee;
  --rot: #ff6b5e;
  --s25: #0b8a4a;
  --display: 'Funnel Display', 'Arial Black', system-ui, sans-serif;
  --text: 'Funnel Sans', system-ui, sans-serif;
  --rand: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--kreide);
  font: 400 1.0625rem/1.55 var(--text);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 0.9em; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--gelb); color: var(--nacht); padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 700 1rem/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf--gelb { background: var(--gelb); color: var(--nacht); box-shadow: 0 0 0 0 rgba(247, 210, 62, 0), 0 6px 22px -6px rgba(247, 210, 62, .55); }
.knopf--gelb:hover { background: #ffe066; }
.knopf--linie { color: var(--kreide); box-shadow: inset 0 0 0 2px var(--kreide-2); }
.knopf--linie:hover { box-shadow: inset 0 0 0 2px var(--gelb); color: var(--gelb); }

/* ---------- Kopf ---------- */
.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--rand);
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marke img { width: 88px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.marke span { font: 800 1.35rem/1 var(--display); letter-spacing: -0.01em; color: var(--kreide); }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; font-weight: 600; color: var(--kreide); opacity: .88; padding: 8px 0; }
.nav a:hover { opacity: 1; color: var(--gelb); }

/* ---------- Hero mit 3D-Kreuzung ---------- */
.hero { position: relative; background: var(--nacht); }
.buehne { position: relative; overflow: hidden; background: linear-gradient(#231c63, #4a3f8c 60%, #2a2350); }
.buehne__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne.is-3d .buehne__bild { display: none; }
.buehne.is-flat .buehne__canvas { visibility: hidden; }
.buehne__hinweis {
  position: absolute; right: var(--rand); bottom: 22px; margin: 0;
  font-size: .9rem; color: var(--kreide); background: rgba(18, 15, 58, .72);
  padding: 8px 14px; border-radius: 999px; pointer-events: none;
}
.buehne.is-flat .buehne__hinweis { display: none; }

.tags { position: absolute; inset: 0; pointer-events: none; }
.schild {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 7px 13px 7px 11px;
  background: var(--kreide); color: var(--nacht);
  font: 700 .88rem/1 var(--text); white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(8, 6, 30, .6);
  transition: opacity .2s;
}
.schild::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--kreide);
}
.hero:has(.spiel[data-phase='ask']) .schild { animation: tippen 1.6s ease-in-out infinite; }
@keyframes tippen { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 210, 62, .9), 0 6px 18px -4px rgba(8, 6, 30, .6); } 60% { box-shadow: 0 0 0 9px rgba(247, 210, 62, 0), 0 6px 18px -4px rgba(8, 6, 30, .6); } }
.schild.is-first { background: var(--gelb); }
.schild.is-first::after { border-top-color: var(--gelb); }
.schild.is-picked:not(.is-first) { background: var(--rot); color: #fff; }
.schild.is-picked:not(.is-first)::after { border-top-color: var(--rot); }

.rank {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--nacht); color: var(--gelb); font: 800 .8rem/1 var(--display);
}

/* Spielfeld */
.spiel { padding: 22px var(--rand) 26px; background: var(--nacht-2); }
.spiel__kopf { font: 800 1rem/1.2 var(--display); letter-spacing: 0; color: var(--gelb); display: flex; justify-content: space-between; gap: 12px; }
.spiel__kopf span { color: var(--kreide-2); font: 600 .9rem/1.2 var(--text); }
.spiel__dots { display: flex; gap: 6px; margin: 10px 0 14px; }
.spiel__dots span { height: 4px; flex: 1; border-radius: 2px; background: rgba(243, 240, 255, .18); }
.spiel__dots .done { background: var(--kreide-2); }
.spiel__dots .now { background: var(--gelb); }
.spiel__titel { font: 800 clamp(1.35rem, 2.2vw, 1.7rem)/1.1 var(--display); letter-spacing: -0.01em; margin-bottom: 6px; }
.spiel__frage { color: var(--kreide-2); margin-bottom: 14px; font-weight: 600; }
.spiel__frage[data-ok='ja'] { color: var(--gelb); }
.spiel__frage[data-ok='nein'] { color: var(--rot); }
.spiel__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl {
  display: inline-flex; align-items: center; gap: 10px; text-align: left;
  min-height: 52px; padding: 8px 16px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--kreide); color: var(--nacht);
  font: 700 1rem/1.15 var(--text);
  transition: transform .15s, background-color .15s, opacity .2s;
}
.wahl:hover:not(:disabled) { background: var(--gelb); transform: translateY(-1px); }
.wahl:disabled { cursor: default; }
[data-phase='enter'] .wahl { opacity: .55; }
.wahl__von { display: block; font: 500 .8rem/1.2 var(--text); color: #4b4680; }
.wahl.is-first { background: var(--gelb); }
.wahl.is-picked:not(.is-first) { background: var(--rot); color: #fff; }
.wahl.is-picked:not(.is-first) .wahl__von { color: #ffe5e1; }
.wahl:not(.is-first):not(.is-picked)[data-rank] { background: rgba(243, 240, 255, .78); }
.spiel__ergebnis { margin-top: 16px; font-size: 1rem; }
.spiel__ergebnis .regel { font: 800 1.15rem/1.2 var(--display); color: var(--gelb); margin-bottom: 4px; }
.spiel__ergebnis .bilanz { font-weight: 700; color: var(--kreide); border-top: 2px solid rgba(243, 240, 255, .2); padding-top: 12px; margin-top: 12px; }
.spiel__weiter { margin-top: 4px; }

.hero__text { padding: 84px var(--rand) 18px; }
.hero h1 { font-size: clamp(2rem, 8.6vw, 4.6rem); max-width: 13ch; }
@media (min-width: 1000px) { .hero h1 { font-size: clamp(2.6rem, 3.6vw, 3.7rem); max-width: 15ch; } .hero__lead { max-width: 40ch; } }
.hero__lead { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--kreide-2); max-width: 36ch; margin: 12px 0 14px; }
.hero__tel { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.hero__tel a { text-decoration: none; font: 800 1.2rem/1.2 var(--display); color: var(--gelb); white-space: nowrap; }
.hero__tel a span { display: block; font: 600 .8rem/1.3 var(--text); color: var(--kreide-2); }
.hero__tel a:hover { color: #fff; }

/* Handy: Text, Szene, Spielfeld untereinander */
@media (max-width: 999px) {
  .nav { display: none; }
  .kopf { padding-top: 14px; }
  .marke img { width: 72px; }
  .kopf__cta { min-height: 42px; padding: 0 18px; }
  /* Das Spiel als eine Einheit, die auf einen Handybildschirm passt: Frage, Kreuzung, Antworten, Auflösung */
  .hero { display: flex; flex-direction: column; }
  .hero__text { order: 0; padding: 72px var(--rand) 6px; }
  .hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); max-width: none; }
  .hero__lead { font-size: .98rem; margin: 8px 0 0; max-width: none; }
  .hero__tel { display: none; }
  .spiel { display: contents; }
  .spiel > * { margin-left: var(--rand); margin-right: var(--rand); }
  .spiel__kopf { order: 1; margin-top: 18px; padding-top: 14px; border-top: 2px solid rgba(243, 240, 255, .16); scroll-margin-top: 8px; }
  .spiel__dots { order: 2; }
  .spiel__titel { order: 3; font-size: 1.25rem; margin-bottom: 2px; scroll-margin-top: 10px; }
  .spiel__frage { order: 4; margin-bottom: 10px; }
  .buehne { order: 5; height: clamp(280px, 42svh, 380px); min-height: 0; }
  .spiel__wahl { order: 6; margin-top: 12px; gap: 8px; }
  .spiel__wahl { flex-wrap: nowrap; }
  .spiel__wahl .wahl {
    flex: 1 1 0; min-width: 0; min-height: 54px; padding: 8px 10px; border-radius: 12px; position: relative;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    font-size: .93rem; overflow-wrap: anywhere; hyphens: auto;
  }
  .spiel__wahl .wahl .rank { position: absolute; top: -9px; right: -5px; box-shadow: 0 0 0 2px var(--nacht); }
  .spiel__wahl .wahl__von { font-size: .74rem; }
  .spiel__ergebnis { order: 7; margin-top: 12px; font-size: .96rem; }
  .spiel__weiter { order: 8; margin-top: 10px; margin-bottom: 22px; scroll-margin-bottom: 76px; }
  .spiel__wahl:last-of-type { margin-bottom: 0; }
  .hero::after { content: ""; order: 9; height: 22px; }
  .buehne__hinweis { left: 50%; right: auto; transform: translateX(-50%); bottom: 8px; font-size: .78rem; white-space: nowrap; padding: 5px 12px; }
}

/* Desktop: Szene füllt den ersten Bildschirm, Text und Spiel liegen links darüber */
@media (min-width: 1000px) {
  .hero { min-height: max(680px, 100svh); }
  .buehne { position: absolute; inset: 0; }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(18, 15, 58, .9) 0%, rgba(18, 15, 58, .62) 26%, rgba(18, 15, 58, 0) 46%);
  }
  .hero__text { position: relative; z-index: 2; padding-top: 112px; padding-bottom: 0; max-width: 40rem; pointer-events: none; }
  .hero__text a { pointer-events: auto; }
  .spiel {
    position: relative; z-index: 3; margin: 26px 0 40px var(--rand); width: min(27rem, 34vw);
    border-radius: 20px; background: rgba(18, 15, 58, .9);
    box-shadow: 0 0 0 1px rgba(201, 195, 238, .14), 0 26px 60px -20px rgba(0, 0, 0, .6);
  }
  .tags { z-index: 2; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .hero__text { padding-top: 96px; }
  .hero h1 { font-size: 3.4rem; }
  .hero__lead { margin: 10px 0 12px; }
}

/* ---------- Bürozeiten ---------- */
.zeiten { background: var(--gelb); color: var(--nacht); padding: clamp(56px, 8vw, 110px) var(--rand); }
.zeiten :focus-visible { outline-color: var(--indigo); }
.zeiten__kopf { display: grid; gap: 18px; margin-bottom: 40px; }
.zeiten h2 { font-size: clamp(2.3rem, 6vw, 4.8rem); color: var(--indigo); }
.jetzt { font: 700 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--text); max-width: 36ch; margin: 0; padding-left: 26px; position: relative; }
.jetzt::before { content: ''; position: absolute; left: 0; top: .42em; width: 13px; height: 13px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 0 rgba(34, 29, 122, .5); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(34, 29, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 29, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .jetzt::before, .schild { animation: none !important; } }
@media (min-width: 900px) { .zeiten__kopf { grid-template-columns: 1fr 1fr; align-items: end; } }

.woche { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.woche .tag {
  display: grid; grid-template-columns: 7.6rem 1fr; column-gap: 12px; row-gap: 2px;
  padding: 16px 0 18px; border-top: 5px solid var(--indigo);
}
.tag__name { font: 800 1.3rem/1.1 var(--display); grid-row: span 3; }
.tag__ort { font: 800 1.15rem/1.2 var(--display); }
.tag--lk .tag__ort::before, .tag--lf .tag__ort::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.tag--lk .tag__ort::before { background: var(--indigo); }
.tag--lf .tag__ort::before { background: transparent; box-shadow: inset 0 0 0 3px var(--indigo); }
.tag__zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.tag__theorie { font-weight: 700; color: var(--indigo); }
.tag__theorie::before { content: '+ '; }
.woche .tag.is-heute { background: var(--indigo); color: var(--kreide); padding-left: 16px; padding-right: 16px; border-top-color: var(--indigo); }
.woche .tag.is-heute .tag__name::after { content: 'heute'; display: block; font: 700 .8rem/1.4 var(--text); color: var(--gelb); }
.woche .tag.is-heute .tag__theorie { color: var(--gelb); }
.woche .tag.is-heute .tag__ort::before { background: var(--gelb); box-shadow: none; }
@media (min-width: 900px) {
  .woche { grid-template-columns: repeat(4, 1fr); column-gap: 20px; }
  .woche .tag { grid-template-columns: 1fr; padding: 18px 16px 22px 0; }
  .woche .tag.is-heute { padding-left: 16px; }
  .tag__name { font-size: clamp(1.8rem, 2.6vw, 2.6rem); grid-row: auto; margin-bottom: 10px; }
}
.zeiten__fuss { margin: 30px 0 0; max-width: 62ch; font-weight: 500; }

/* ---------- Klassen ---------- */
.klassen {
  padding: clamp(64px, 9vw, 130px) var(--rand);
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(122, 90, 166, .35), transparent 70%),
    var(--nacht);
}
.klassen h2 { font-size: clamp(2.3rem, 6vw, 4.8rem); margin-bottom: clamp(24px, 4vw, 56px); }
.klasse { display: grid; gap: 8px 48px; align-items: center; padding: 18px 0 clamp(40px, 6vw, 80px); }
.klasse__bild {
  width: 100%; max-width: 560px; max-height: 440px; object-fit: contain; margin: 0 auto;
  background: radial-gradient(50% 30% at 50% 82%, rgba(255, 182, 88, .32), transparent 72%);
}
.klasse__code { font: 800 clamp(3.4rem, 9vw, 7rem)/0.9 var(--display); color: var(--gelb); letter-spacing: -0.04em; margin: 0 0 6px; }
.klasse__code span { color: transparent; -webkit-text-stroke: 2px var(--gelb); }
.klasse h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
.klasse p { max-width: 54ch; color: #e2def8; }
.klasse strong { color: var(--kreide); }
.stufen { margin: 18px 0 0; display: grid; gap: 0; max-width: 54ch; }
.stufen div { display: grid; grid-template-columns: 3.4rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(201, 195, 238, .22); }
.stufen dt { font: 800 1.15rem/1.3 var(--display); color: var(--gelb); }
.stufen dd { margin: 0; }
@media (min-width: 900px) {
  .klasse { grid-template-columns: 1.1fr 1fr; }
  .klasse--moto .klasse__bild { order: 2; }
}

/* ---------- Ablauf als Straße ---------- */
.ablauf { background: var(--kreide); color: var(--nacht); padding: clamp(64px, 9vw, 130px) var(--rand); }
.ablauf :focus-visible { outline-color: var(--indigo); }
.ablauf h2 { font-size: clamp(2.3rem, 6vw, 4.8rem); color: var(--indigo); margin-bottom: 44px; max-width: 14ch; }
.strecke { list-style: none; margin: 0; padding: 0; counter-reset: s; position: relative; display: grid; gap: 30px; }
.strecke::before {
  content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 46px; margin-left: -23px;
  background:
    linear-gradient(var(--gelb), var(--gelb)) center / 4px 100% no-repeat,
    #2c2a3d;
  -webkit-mask: linear-gradient(#000, #000);
  border-radius: 8px;
}
.strecke::after {
  content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 4px; margin-left: -2px;
  background: repeating-linear-gradient(#2c2a3d 0 14px, transparent 14px 34px);
}
.strecke li { position: relative; padding-left: 72px; counter-increment: s; }
.strecke li::before {
  content: counter(s); position: absolute; left: 0; top: -4px; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gelb); color: var(--nacht); font: 800 1.25rem/1 var(--display);
  box-shadow: 0 0 0 4px #2c2a3d;
}
.strecke h3 { font-size: 1.5rem; margin-bottom: 6px; color: var(--indigo); }
.strecke p { margin: 0; max-width: 44ch; }
@media (min-width: 1000px) {
  .strecke { grid-template-columns: repeat(5, 1fr); gap: 28px; padding-top: 74px; }
  .strecke::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 46px; margin: 0;
    background: linear-gradient(var(--gelb), var(--gelb)) center / 100% 4px no-repeat, #2c2a3d; }
  .strecke::after { left: 0; right: 0; top: 21px; bottom: auto; width: auto; height: 4px; margin: 0;
    background: repeating-linear-gradient(90deg, #2c2a3d 0 22px, transparent 22px 48px); }
  .strecke li { padding-left: 0; }
  .strecke li::before { top: -72px; left: 0; }
}

/* ---------- Filialen ---------- */
.filialen { padding: clamp(64px, 9vw, 130px) var(--rand); background: var(--nacht); }
.filialen h2 { font-size: clamp(2.3rem, 6vw, 4.8rem); margin-bottom: 34px; }
.linie { display: flex; align-items: center; gap: 16px; margin-bottom: 44px; overflow: hidden; }
.linie__s { flex: none; background: var(--s25); color: #fff; font: 800 1rem/1 var(--display); padding: 8px 12px; border-radius: 8px; }
.linie ol { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; justify-content: space-between; position: relative; min-width: 0; }
.linie ol::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 4px; background: var(--s25); }
.linie li { position: relative; padding-top: 22px; font-size: .85rem; color: var(--kreide-2); text-align: center; flex: 1; min-width: 0; }
.linie li::before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--nacht); box-shadow: inset 0 0 0 4px var(--s25); }
.linie li.is-fun { color: var(--gelb); font-weight: 800; font-size: .95rem; }
.linie li.is-fun::before { background: var(--gelb); box-shadow: 0 0 0 4px var(--s25), 0 0 18px rgba(247, 210, 62, .7); width: 18px; height: 18px; margin-left: -9px; top: -1px; }
.linie li:first-child, .linie li:last-child { opacity: .7; }
@media (max-width: 560px) {
  .linie li { font-size: .78rem; color: transparent; }
  .linie li.is-fun { font-size: .82rem; line-height: 1.2; }
  .linie li:first-child, .linie li:last-child { visibility: hidden; }
}
.filialen__paar { display: grid; gap: 52px; }
@media (min-width: 900px) { .filialen__paar { grid-template-columns: 1fr 1fr; gap: 64px; } }
.filiale h3 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--kreide); }
.filiale__adr { font: 600 1.2rem/1.35 var(--text); margin: 12px 0 8px; color: var(--kreide-2); }
.filiale__tel { display: inline-block; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.1 var(--display); color: var(--gelb); text-decoration: none; margin-bottom: 20px; }
.filiale__tel:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.filiale dl { margin: 0 0 24px; }
.filiale dl div { display: grid; grid-template-columns: 5.6rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(201, 195, 238, .2); }
.filiale dt { font-weight: 700; color: var(--kreide-2); }
.filiale dd { margin: 0; }

/* ---------- Anmelden ---------- */
.anmelden {
  display: grid; gap: 40px; padding: clamp(64px, 9vw, 130px) var(--rand);
  background: var(--indigo);
}
@media (min-width: 900px) { .anmelden { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.anmelden h2 { font-size: clamp(2.3rem, 6vw, 4.8rem); color: var(--gelb); margin-bottom: 18px; }
.anmelden__text > p { max-width: 40ch; font-size: 1.15rem; }
.anmelden__wege { display: grid; gap: 10px; margin-top: 26px; }
.anmelden__wege a { font: 800 1.3rem/1.2 var(--display); text-decoration: none; color: var(--kreide); }
.anmelden__wege a:hover { color: var(--gelb); }
.formular { display: grid; gap: 16px; align-content: start; }
.formular__demo { margin: 0; font-size: .9rem; color: var(--gelb); font-weight: 600; }
.formular label { display: grid; gap: 6px; font-weight: 600; }
.formular input:not([type='radio']) {
  font: 500 1.05rem/1.3 var(--text); color: var(--nacht); background: var(--kreide);
  border: 0; border-radius: 12px; padding: 14px 16px; min-height: 52px; width: 100%;
}
.formular fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formular legend { font-weight: 600; margin-bottom: 8px; width: 100%; }
.formular__wahl label { display: block; position: relative; }
.formular__wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formular__wahl span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--kreide-2); font-weight: 700;
}
.formular__wahl input:checked + span { background: var(--gelb); color: var(--nacht); box-shadow: none; }
.formular__wahl input:focus-visible + span { outline: 3px solid var(--gelb); outline-offset: 3px; }
.formular .knopf { justify-self: start; margin-top: 6px; }
.formular__antwort { margin: 0; font-weight: 600; background: var(--nacht); padding: 14px 16px; border-radius: 12px; }

/* ---------- Fuß ---------- */
.fuss { padding: 40px var(--rand) 48px; background: var(--nacht); color: var(--kreide-2); font-size: .92rem; }
.fuss p { margin: 0 0 8px; max-width: 80ch; }
.fuss a { margin-right: 18px; }
.fuss__ukm { opacity: .75; margin-top: 18px !important; }

/* ---------- Anrufleiste am Handy ---------- */
.anruf { display: none; }
@media (max-width: 999px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .anruf {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 20;
    padding-bottom: env(safe-area-inset-bottom); background: var(--nacht);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
  .anruf a { display: grid; place-items: center; min-height: 58px; font-weight: 800; text-decoration: none; font-family: var(--display); }
  .anruf a:first-child { background: var(--gelb); color: var(--nacht); }
  .anruf a:last-child { background: var(--indigo); color: var(--kreide); }
}