/* ==========================================================================
   Fahrschule GFL Spandau — Stylesheet
   Farben aus dem Logo (#3AAADC / #3E3E40 / #707173) und dem Fahrzeuglack.
   Keine externen Ressourcen: keine CDN-Fonts, keine Tracker.
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
/* width/height im HTML dienen nur der Seitenverhältnis-Reservierung, sie dürfen
   das Bild nicht verzerren, sobald die Breite per CSS gesetzt wird. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Design-Token ------------------------------------------------------- */
:root {
  --navy:        #0E2436;
  --navy-800:    #14314A;
  --navy-700:    #1B3E5C;
  --cyan:        #3AAADC;
  --cyan-600:    #2790BF;
  --cyan-700:    #1E7599;
  --blau-tief:   #1B5AA8;   /* Richtung Königsblau, für den äußeren Kopf-Button */
  --blau-tief-d: #14427C;
  --cyan-050:    #EAF6FC;
  /* Signalgrün aus dem Kopfbereich von elite-consulta.com übernommen —
     nur für die Kopfleiste: Icons und die beiden Kopf-Buttons. */
  --gruen:       #73CF11;
  --ink:         #26292E;
  --ink-soft:    #4E545C;
  --grey:        #707173;
  --line:        #DCE3EA;
  --bg:          #FFFFFF;
  --bg-soft:     #F4F7FA;

  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 2px 4px rgba(14,36,54,.05), 0 12px 28px -12px rgba(14,36,54,.18);
  --shadow-lg:   0 4px 8px rgba(14,36,54,.06), 0 28px 56px -20px rgba(14,36,54,.28);

  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --gut: 22px;
  --header-h: 72px;
}

/* --- Grundlagen --------------------------------------------------------- */
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.14; letter-spacing: -.022em; font-weight: 800; color: var(--navy); }
/* Zu lange Wörter brechen um, statt das Layout zu sprengen. Bewusst OHNE
   hyphens:auto — das trennte auch „Span-dau" in der Startseiten-Headline. */
h1, h2, h3, h4, p, li, dt, dd, td, th, caption { overflow-wrap: break-word; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem); }
h2, h1.as-h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem); }
.section--navy h1 { color: #fff; }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); letter-spacing: -.012em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }
p + p, p + ul, ul + p, h2 + p, h3 + p { margin-top: .85em; }
strong { font-weight: 700; color: var(--navy); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding: clamp(52px, 7vw, 96px) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #CFE0EC; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* Seitenkopf: das navy Band unter der Navigation. Feste Höhe, Inhalt vertikal
   mittig — damit alle Unterseiten gleich hoch beginnen, egal wie lang die
   Überschrift ist. Er enthält bewusst nur Eyebrow, Überschrift und Vorspann;
   Bilder und Buttons gehören in den Inhalt darunter. */
.seitenkopf { display: flex; align-items: center; min-height: 360px; padding-block: 40px; }
.seitenkopf > .wrap { width: 100%; }
.seitenkopf .head { margin-bottom: 0; }
/* Auf schmalen Displays etwas kompakter setzen, damit die unterschiedlich
   langen Vorspänne gleich viele Zeilen belegen und alle Köpfe gleich hoch
   bleiben. */
@media (max-width: 599px) {
  .seitenkopf .lede { font-size: .97rem; line-height: 1.55; }
  .seitenkopf h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 1.9rem); }
}
@media (min-width: 600px) { .seitenkopf { min-height: 340px; padding-block: 44px; } }
@media (min-width: 860px) { .seitenkopf { min-height: 420px; } }

.lede { font-size: clamp(1.02rem, .96rem + .35vw, 1.19rem); color: var(--ink-soft); max-width: 62ch; }
.section--navy .lede { color: #A9C4D6; }

.head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 48px); }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan-600); margin-bottom: 12px;
}
.section--navy .eyebrow { color: var(--cyan); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: .98rem; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s, border-color .15s, color .15s;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn--primary { background: var(--cyan); color: #fff; box-shadow: 0 7px 18px -10px rgba(58,170,220,.75); }
.btn--primary:hover { background: var(--cyan-600); }
.btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--outline { border-color: var(--line); color: var(--navy); background: #fff; }
.btn--outline:hover { border-color: var(--cyan); color: var(--cyan-600); }
.btn--sm { padding: 10px 20px; font-size: .9rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Chevron-Motiv (aus der Fahrzeugbeklebung) -------------------------- */
.chevrons { height: 8px; width: 100%; background:
  repeating-linear-gradient(115deg,
    var(--cyan) 0 26px, var(--grey) 26px 40px, #fff 40px 48px, var(--navy) 48px 74px, transparent 74px 128px); }
.chevrons--thin { height: 5px; }

/* --- Kopfzeile ---------------------------------------------------------- */
.topbar { background: var(--navy); color: #C6D9E6; font-size: .84rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; justify-content: space-between; min-height: 40px; padding-block: 7px; }
.topbar-adresse { font-weight: 600; }
.topbar-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.topbar a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 15px; height: 15px; flex: none; color: var(--gruen); }
/* Auf dem Handy nimmt die Adresse zu viel vom ersten Bildschirm weg —
   sie steht im Fußbereich und auf der Kontaktseite. */
@media (max-width: 860px) {
  .topbar { font-size: .76rem; }
  .topbar .wrap { justify-content: center; gap: 3px 16px; }
  .topbar-kontakt { justify-content: center; gap: 3px 16px; }
  .topbar-adresse { display: none; }
}

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: 40px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-txt b { font-size: 1.06rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.brand-txt span { font-size: .68rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--grey); }

.nav { margin-left: clamp(18px, 3vw, 44px); }
.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block; padding: 9px 13px; border-radius: 8px; text-decoration: none;
  font-size: .93rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--cyan-050); }
.nav .nav-cta { display: none; }
/* Die beiden Kopf-Buttons stehen rechts außen: eckig, zweizeilig, weiße
   Schrift und eine feine schwarze Linie ringsum. Innen „Online Anmeldung" im
   Blau der Seite, außen „Login Fahrschule" zwei Stufen dunkler. */
.header-btns { flex: none; margin-left: auto; display: flex; gap: 10px; }
.header-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 128px; padding: 0.15rem 0.84rem;
  background: var(--cyan); color: #fff;
  border: 1px solid #000; border-radius: 3px;
  font-size: .74rem; font-weight: 800; line-height: 1.3;
  letter-spacing: .07em; text-transform: uppercase; text-align: center;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s;
}
.header-btn:hover { background: var(--cyan-600); }
.header-btn--login { background: var(--blau-tief); }
.header-btn--login:hover { background: var(--blau-tief-d); }
.header-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px auto; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .header-btns { display: none; }
  .nav { position: fixed; inset: calc(var(--header-h) + 1px) 0 auto 0; margin: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gut) 22px; }
  .nav a { padding: 13px 4px; font-size: 1.02rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav li:last-child a { border-bottom: 0; }
  .nav .nav-cta { display: block; margin-top: 14px; }
  .nav .nav-cta a { background: var(--cyan); color: #fff; border: 1px solid #000; border-radius: 3px;
    text-align: center; padding: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; font-size: .82rem; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,24,37,.95) 0%, rgba(9,24,37,.86) 34%, rgba(9,24,37,.45) 62%, rgba(9,24,37,.18) 100%);
}
.hero-inner { position: relative; padding: clamp(58px, 9vw, 118px) 0 clamp(46px, 6vw, 84px); }
.hero-card { max-width: 640px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero p { color: #C6D9E6; font-size: clamp(1.03rem, .97rem + .4vw, 1.2rem); margin-top: 18px; max-width: 52ch; }
.hero .btn-row { margin-top: 30px; }

.hero-facts { position: relative; border-top: 1px solid rgba(255,255,255,.16); }
.hero-facts ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-facts li { padding: 20px 22px 22px 0; }
.hero-facts b { display: block; color: #fff; font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; }
.hero-facts span { display: block; font-size: .87rem; color: #9FBACD; margin-top: 2px; }
@media (max-width: 760px) { .hero-facts ul { grid-template-columns: repeat(2, 1fr); } }

/* --- Karten-Raster ------------------------------------------------------ */
.grid { display: grid; gap: 22px; }
/* Grid-/Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen, sonst sprengen
   breite Tabellen das Layout auf schmalen Bildschirmen. */
.grid > *, .split > *, .calc > *, .gallery > *, .portal > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Klappt selbst um, sobald pro Spalte weniger als 250px bleiben — für Kästen,
   die in einer ohnehin schmalen Spalte stehen. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card--pad-lg { padding: 30px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--cyan-050); display: grid; place-items: center; margin-bottom: 16px; }
.card-ico svg { width: 23px; height: 23px; stroke: var(--cyan-600); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Klassenkarte */
.klasse { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.klasse:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: #C6D6E2; }
.klasse-badge { background: var(--navy); color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; padding: 18px 24px; display: flex; align-items: baseline; gap: 10px; }
.klasse-badge small { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.klasse-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.klasse-body ul { margin: 14px 0 20px; display: grid; gap: 9px; }
.klasse-body li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink-soft); }
.klasse-body li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.klasse-body .btn { margin-top: auto; }

/* --- Ablauf-Zeitstrahl -------------------------------------------------- */
.steps { display: grid; gap: 4px; counter-reset: step; }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 22px; padding-bottom: 30px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  grid-column: 1; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cyan-050); color: var(--cyan-600); border: 2px solid var(--cyan);
  display: grid; place-items: center; font-weight: 800; font-size: 1.12rem; z-index: 1;
}
.step::after { content: ""; position: absolute; left: 26px; top: 52px; bottom: 0; width: 2px; background: var(--line); }
.step:last-child::after { display: none; }
.step h3 { margin-bottom: 5px; }
.step p { color: var(--ink-soft); font-size: .97rem; }
.section--navy .step::before { background: rgba(58,170,220,.14); color: var(--cyan); }
.section--navy .step::after { background: rgba(255,255,255,.14); }
.section--navy .step p { color: #A9C4D6; }

/* --- Split (Bild + Text) ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.split--narrow-media { grid-template-columns: .82fr 1fr; }
@media (max-width: 860px) { .split, .split--narrow-media { grid-template-columns: 1fr; } }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.split-media--frame { position: relative; }
.split-media--frame::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 2px solid var(--cyan); border-radius: var(--radius); z-index: -1; }

/* --- Galerie ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.gallery figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 20px 16px; color: #fff; font-size: .92rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(9,24,37,.85)); }
.gallery-col { display: grid; gap: 18px; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* --- Info-Box / Zeiten -------------------------------------------------- */
.infobox { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: var(--radius-sm); padding: 22px 24px; }
.infobox h3 { font-size: 1.08rem; margin-bottom: 8px; }
.infobox p, .infobox li { color: var(--ink-soft); font-size: .96rem; }

.timelist { display: grid; gap: 10px; }
.timelist li { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); font-size: .97rem; }
.timelist li:last-child { border-bottom: 0; padding-bottom: 0; }
.timelist b { color: var(--navy); font-weight: 700; white-space: nowrap; }

.ticks { display: grid; gap: .5em; margin-top: .8em; }
.ticks li { position: relative; padding-left: 24px; color: var(--ink-soft); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.section--navy .ticks li { color: #A9C4D6; }

/* --- Preistabelle ------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.price { width: 100%; border-collapse: collapse; min-width: 460px; }
table.price caption { text-align: left; padding: 20px 24px 0; font-weight: 800; color: var(--navy); font-size: 1.12rem; }
table.price th, table.price td { padding: 13px 24px; text-align: left; border-bottom: 1px solid var(--line); font-size: .97rem; vertical-align: top; }
table.price thead th { font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; color: var(--grey); font-weight: 800; background: var(--bg-soft); }
table.price td:last-child, table.price th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.price tbody tr:last-child td { border-bottom: 0; }
table.price td b { color: var(--navy); }
table.price .row-sum td { background: var(--cyan-050); font-weight: 700; }
table.price .sub { display: block; color: var(--grey); font-size: .85rem; margin-top: 2px; }

/* --- Kostenrechner ------------------------------------------------------ */
.calc { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.calc-field { padding: 16px 0; border-bottom: 1px solid var(--line); }
.calc-field:last-of-type { border-bottom: 0; }
.calc-field > label, .calc-legend { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-weight: 700; color: var(--navy); font-size: .98rem; }
.calc-field output { font-variant-numeric: tabular-nums; color: var(--cyan-600); font-weight: 800; }
.calc-field .hint { display: block; color: var(--grey); font-size: .86rem; margin-top: 3px; font-weight: 400; }
input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--cyan); height: 26px; }
.calc-sum { position: sticky; top: calc(var(--header-h) + 16px); background: var(--navy); color: #fff; border-radius: var(--radius); padding: 26px; }
.calc-sum h3 { color: #fff; font-size: 1.05rem; }
.calc-sum dl { margin-top: 16px; display: grid; gap: 9px; font-size: .93rem; color: #B9CFDE; }
.calc-sum dl > div { display: flex; justify-content: space-between; gap: 14px; }
.calc-sum dd { font-variant-numeric: tabular-nums; color: #fff; }
.calc-total { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; align-items: baseline; }
.calc-total span { font-size: .9rem; color: #B9CFDE; }
.calc-total b { font-size: 1.85rem; font-weight: 800; color: var(--cyan); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-note { margin-top: 14px; font-size: .82rem; color: #92AEC2; line-height: 1.5; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: block; padding: 9px 17px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .15s; }
.chip input:checked + span { border-color: var(--cyan); background: var(--cyan-050); color: var(--cyan-600); }
.chip input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* --- Formularelemente --------------------------------------------------- */
/* align-content: start ist wichtig — ohne das streckt das Grid seine Zeilen auf
   die Höhe des Nachbarfelds. Steht neben einem Feld mit Hinweistext eines ohne,
   wird dessen Eingabefeld höher gezogen und die Reihe steht schief. */
.field { display: grid; gap: 6px; align-content: start; }
.field label, .fieldset-label { font-weight: 700; font-size: .92rem; color: var(--navy); }
.field .hint { font-size: .84rem; color: var(--grey); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="password"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 1rem;
  line-height: 1.5;
}
/* Alle einzeiligen Felder bekommen dieselbe feste Höhe. Ohne das baut Chrome
   das Datumsfeld ein paar Pixel höher als ein Textfeld daneben und die Reihe
   steht schief. Mehrzeilige Felder behalten ihre eigene Höhe. */
.field input:not([type="checkbox"]):not([type="radio"]), .field select { height: 50px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(58,170,220,.18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .94rem; color: var(--ink-soft); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cyan); }
.req { color: #C0392B; }

/* --- Anmeldestrecke ----------------------------------------------------- */
.wizard-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 34px; }
.wizard-progress li { font-size: .78rem; font-weight: 700; color: var(--grey); padding-top: 10px; border-top: 4px solid var(--line); letter-spacing: .01em; }
.wizard-progress li.is-done { border-top-color: var(--cyan); color: var(--cyan-600); }
.wizard-progress li.is-active { border-top-color: var(--navy); color: var(--navy); }
.wizard-progress li span { display: block; font-size: .7rem; font-weight: 600; color: var(--grey); }
@media (max-width: 700px) { .wizard-progress li span { display: none; } }

.wstep { display: none; }
.wstep.is-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wstep > h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.wstep-body { display: grid; gap: 20px; margin-top: 24px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }

.pick { display: grid; gap: 12px; }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick .pick-box { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; display: flex; gap: 16px; align-items: center; transition: .15s; }
.pick input:checked + .pick-box { border-color: var(--cyan); background: var(--cyan-050); box-shadow: 0 0 0 1px var(--cyan); }
.pick input:focus-visible + .pick-box { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pick-key { flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
/* Zahlungsarten tragen Wörter statt Buchstaben — die brauchen weniger Schriftgröße. */
.pick--wort .pick-key { font-size: .8rem; letter-spacing: .02em; }
.pick-txt { min-width: 0; }
.pick-txt b { display: block; color: var(--navy); }
.pick-txt span { display: block; font-size: .9rem; color: var(--ink-soft); }
.pick-price { margin-left: auto; text-align: right; font-weight: 800; color: var(--navy); white-space: nowrap; }
@media (max-width: 430px) {
  .pick .pick-box { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .pick-key { width: 46px; height: 46px; font-size: 1rem; }
  .pick-price { width: 100%; margin-left: 58px; text-align: left; }
}

.contract { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; background: #fff; font-size: .92rem; color: var(--ink-soft); }
.contract h4 { color: var(--navy); margin: 16px 0 6px; }
.contract h4:first-child { margin-top: 0; }
.contract p + p { margin-top: .6em; }

.summary-box { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 22px; }
.summary-box dl { display: grid; gap: 10px; }
.summary-box dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.summary-box dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-box dt { color: var(--ink-soft); }
.summary-box dd { font-weight: 700; color: var(--navy); text-align: right; }

.done-mark { width: 76px; height: 76px; border-radius: 50%; background: var(--cyan-050); display: grid; place-items: center; margin: 0 auto 22px; }
.done-mark svg { width: 38px; height: 38px; stroke: var(--cyan-600); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.notice { border-radius: var(--radius-sm); padding: 16px 18px; font-size: .9rem; background: var(--cyan-050); color: var(--navy); border: 1px solid #C9E6F5; }
.notice b { display: block; }

/* --- Fahrschüler-Portal -------------------------------------------------- */
.portal { display: grid; grid-template-columns: 258px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 900px) { .portal { grid-template-columns: 1fr; gap: 22px; } }

.portal-side { position: sticky; top: calc(var(--header-h) + 18px); }
.side-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px; margin-bottom: 16px; }
.side-card b { display: block; font-size: 1.08rem; letter-spacing: -.01em; }
.side-card span { display: block; font-size: .85rem; color: #9FBACD; margin-top: 3px; }
.side-nav ul { display: grid; gap: 3px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px;
  text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--ink-soft);
}
.side-nav a:hover { background: var(--bg-soft); color: var(--navy); }
.side-nav a.is-active { background: var(--cyan-050); color: var(--cyan-600); }
.side-nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-nav .side-extern { color: var(--grey); }
.side-nav .side-extern::after { content: "↗"; margin-left: auto; font-size: .85rem; }
@media (max-width: 900px) {
  .portal-side { position: static; }
  .side-nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .side-nav a { white-space: nowrap; border: 1px solid var(--line); }
}

.pview { display: none; }
.pview.is-active { display: block; animation: fade .2s ease; }
.pview > h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem); margin-bottom: 6px; }
.pview > .lede { margin-bottom: 26px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stat-grid { grid-template-columns: 1fr; } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.stat b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--navy); letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { display: block; font-size: .86rem; color: var(--grey); margin-top: 4px; }
.stat--cyan b { color: var(--cyan-600); }

.bar { height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--cyan); }
.bar-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: .93rem; }
.bar-row b { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge--ok { background: #E4F5EA; color: #1D6B3A; }
.badge--offen { background: #FDF0E4; color: #96551A; }
.badge--info { background: var(--cyan-050); color: var(--cyan-600); }
.badge--grau { background: var(--bg-soft); color: var(--grey); }

/* Stundenplan */
.plan-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.plan-legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: var(--ink-soft); }
.plan-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan { display: grid; grid-template-columns: repeat(6, minmax(132px, 1fr)); gap: 10px; min-width: 700px; }
.plan-tag { text-align: center; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.plan-tag b { display: block; color: var(--navy); font-size: .95rem; }
.plan-tag span { display: block; font-size: .8rem; color: var(--grey); }
.slot { border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: .88rem; text-align: left; background: #fff; width: 100%; }
.slot b { display: block; color: var(--navy); font-variant-numeric: tabular-nums; }
.slot span { display: block; font-size: .78rem; color: var(--grey); margin-top: 2px; }
.slot--frei { cursor: pointer; border-color: #BFE3F4; transition: .15s; }
.slot--frei:hover { border-color: var(--cyan); background: var(--cyan-050); transform: translateY(-1px); }
.slot--frei b { color: var(--cyan-600); }
.slot--belegt { background: var(--bg-soft); color: var(--grey); border-style: dashed; }
.slot--belegt b { color: var(--grey); }
.slot--meiner { background: var(--navy); border-color: var(--navy); }
.slot--meiner b, .slot--meiner span { color: #fff; }
.slot--meiner span { color: #9FBACD; }

/* Termin- und Kontolisten */
.liste { display: grid; gap: 12px; }
.eintrag { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.eintrag-datum { flex: none; width: 62px; text-align: center; background: var(--cyan-050); border-radius: 9px; padding: 7px 4px; }
.eintrag-datum b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--navy); line-height: 1; }
.eintrag-datum span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-600); margin-top: 3px; }
.eintrag-txt { flex: 1 1 190px; min-width: 0; }
.eintrag-txt b { display: block; color: var(--navy); }
.eintrag-txt span { display: block; font-size: .88rem; color: var(--ink-soft); }
.eintrag-tat { flex: none; margin-left: auto; display: flex; gap: 10px; align-items: center; }

.leer { text-align: center; padding: 40px 20px; color: var(--grey); background: var(--bg-soft); border-radius: var(--radius-sm); font-size: .95rem; }

/* Theorie-Themenliste */
.themen { display: grid; gap: 8px; }
.thema { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; }
.thema-nr { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: var(--bg-soft); color: var(--grey); }
.thema--ok .thema-nr { background: #E4F5EA; color: #1D6B3A; }
.thema-txt { flex: 1 1 auto; min-width: 0; font-size: .95rem; color: var(--ink); }
.thema-txt span { display: block; font-size: .82rem; color: var(--grey); }
.thema-status { flex: none; margin-left: auto; }

.hinweis-zeile { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--cyan-050); border: 1px solid #C9E6F5; border-radius: var(--radius-sm); padding: 14px 18px; font-size: .92rem; color: var(--navy); }

/* --- FAQ / Details ------------------------------------------------------ */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.faq summary { padding: 17px 22px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--cyan); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 22px 20px; color: var(--ink-soft); font-size: .96rem; }

/* --- CTA-Band ----------------------------------------------------------- */
.cta-band { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 100%); color: #fff; border-radius: var(--radius); padding: clamp(32px, 5vw, 52px); display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: #B9CFDE; margin-top: 8px; max-width: 46ch; }

/* --- Fußzeile ----------------------------------------------------------- */
.site-footer { background: var(--navy); color: #9FBACD; padding: clamp(46px, 6vw, 72px) 0 0; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cyan); text-decoration: underline; }
.site-footer ul { display: grid; gap: 8px; }
.footer-brand img { width: 48px; height: 48px; margin-bottom: 14px; background: #fff; border-radius: 11px; padding: 4px; }
.site-footer .timelist li { border-bottom-color: rgba(255,255,255,.16); }
.site-footer .timelist b { color: #fff; }
.footer-brand p { max-width: 34ch; }
.footer-bottom { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: .87rem; }
.footer-bottom ul { display: flex; gap: 22px; }

/* --- Kleinteile --------------------------------------------------------- */
.tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--cyan-050); color: var(--cyan-600); font-size: .8rem; font-weight: 700; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin-top: .8em; display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.prose a { color: var(--cyan-600); }
.mt-l { margin-top: 32px; }
.mt-m { margin-top: 20px; }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow); }

@media print { .site-header, .topbar, .site-footer, .btn { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }