/* FahrFit Berlin, Demo-Website von TEAM Gold LLC.
   Fassung 2 (Oktober 2026). Fassung 1 war eine kompakte React-Demo unter /demo/fahrschule,
   Screenshots davon liegen in docs/archiv/demo-v1/fahrschule/.

   Gestaltungsidee: die Sprache der Verkehrszeichen. Schilderblau mit weißer Innenlinie wie
   ein Richtzeichen, Verkehrsrot nur für Warnungen und falsche Antworten, Asphalt als ruhige
   Fläche, Fahrbahnmarkierung als Trenner. Overpass, weil sie an die Autobahnschrift erinnert.

   Bewegung: wie Markierungsfarbe auf frischem Asphalt. Der Mittelstreifen wird beim Scrollen
   einmal gezogen, Schilder klappen hoch, wenn man an ihnen vorbeikommt. Jede Bewegung einmal,
   prefers-reduced-motion wird respektiert. */

:root {
  --blue: #1d4f9c;
  --blue-d: #163e7c;
  --blue-l: #e8eef8;
  --red: #d22b2b;
  --white: #fff;
  --paper: #f3f4f6;
  --asphalt: #2c2f34;
  --asphalt-2: #383c42;
  --ink: #14171c;
  --dim: #56606c;
  --faint: #8a939e;
  --line: rgba(20, 23, 28, 0.12);
  --line-strong: rgba(20, 23, 28, 0.28);
  --sign-yellow: #f2c200;

  --sans: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, Menlo, monospace;

  --out: cubic-bezier(0.2, 0, 0, 1);
  --flip: cubic-bezier(0.3, 1.3, 0.5, 1);

  --gutter: clamp(18px, 4vw, 56px);
  --max: 1280px;
  --hdr-h: 74px;
  --r: 10px;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--out) both vt-out; }
::view-transition-new(root) { animation: 320ms var(--out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.hdr { view-transition-name: site-header; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--blue); color: var(--white); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* Schrift --------------------------------------------------------------- */
.t-xxl, .t-xl, .t-l, .t-m, .t-s { font-weight: 900; letter-spacing: -0.015em; line-height: 1; overflow-wrap: break-word; hyphens: manual; }
.t-xxl { font-size: clamp(2.9rem, 7vw, 6.2rem); line-height: 0.95; }
.t-xl { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.t-l { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.05; }
.t-m { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15; font-weight: 800; }
.t-s { font-size: 1.2rem; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.tag::before { content: ""; width: 34px; height: 4px; background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 16px); }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.2rem); color: var(--dim); max-width: 48ch; line-height: 1.6; }
.dim { color: var(--dim); }
.small { font-size: 0.88rem; }

/* Knöpfe: wie ein Richtzeichen, blau mit weißer Innenlinie --------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--blue); color: var(--white); border-radius: var(--r); font-weight: 800; font-size: 1.05rem; line-height: 1.1;
  box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px rgba(255, 255, 255, 0.85);
  transition: background-color 150ms linear, box-shadow 150ms linear, transform 150ms var(--out);
}
.btn:hover { background: var(--blue-d); box-shadow: inset 0 0 0 3px var(--blue-d), inset 0 0 0 5px #fff; }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform 250ms var(--out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ghost { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-ghost:hover { background: var(--blue-l); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-white { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--blue); }
.btn-white:hover { background: var(--blue-l); box-shadow: inset 0 0 0 3px var(--blue-l), inset 0 0 0 5px var(--blue); }
.btn-sm { padding: 10px 16px; font-size: 0.95rem; }
.link { color: var(--blue); font-weight: 800; text-decoration: none; border-bottom: 2px solid rgba(29, 79, 156, 0.35); transition: border-color 150ms linear; }
.link:hover { border-color: var(--blue); }

/* Fahrbahnmarkierung als Trenner ----------------------------------------- */
.lane { height: 18px; background: var(--asphalt) linear-gradient(90deg, #fff 0 44px, transparent 44px 80px) 0 50% / 80px 4px repeat-x; }

/* Kopfzeile ------------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); }
.hdr .wrap { width: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--blue); color: var(--white); font-weight: 900; font-size: 1.35rem; border-radius: 8px; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; padding-top: 3px; }
.brand b { display: block; font-weight: 900; font-size: 1.2rem; line-height: 1; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 0.76rem; color: var(--dim); margin-top: 3px; }
.nav { display: flex; gap: 20px; }
.nav a { text-decoration: none; font-weight: 700; font-size: 0.98rem; color: var(--dim); position: relative; padding: 6px 0; transition: color 120ms linear; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--out); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.status { font-size: 0.85rem; color: var(--dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.status .lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.status.is-open .lamp { background: #1f9d55; }
.status strong { color: var(--ink); font-weight: 700; }
.lang { background: none; border: 2px solid var(--line-strong); border-radius: 6px; padding: 4px 9px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.lang:hover { border-color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; background: var(--paper); border: 0; border-radius: 8px; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform 300ms var(--out); }
.menu-btn span:first-child { top: 17px; } .menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; background: var(--blue); color: var(--white); padding: calc(var(--hdr-h) + 20px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 250ms linear, transform 350ms var(--out), visibility 0s 350ms; }
.menu-open .sheet { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms linear, transform 350ms var(--out); }
.sheet nav { display: grid; }
.sheet nav a { font-weight: 900; font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.15; text-decoration: none; padding: 6px 0; border-bottom: 2px dashed rgba(255, 255, 255, 0.35); }
.sheet nav a[aria-current="page"] { color: var(--sign-yellow); }
.sheet-foot { display: grid; gap: 4px; font-size: 0.92rem; }
.sheet .status, .sheet .status strong { color: var(--white); }
.menu-open { overflow: hidden; }
@media (max-width: 1120px) { .nav { display: none; } .menu-btn { display: block; } }
@media (max-width: 640px) { .hdr .status, .hdr .btn { display: none; } }

/* Einblendungen --------------------------------------------------------- */
.js [data-rv] { opacity: 0; transform: translateY(24px); transition: opacity 400ms linear, transform 650ms var(--out); transition-delay: var(--d, 0ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.js [data-hero] { opacity: 0; transform: translateY(20px); transition: opacity 400ms linear, transform 700ms var(--out); transition-delay: var(--d, 0ms); }
.js .is-up [data-hero] { opacity: 1; transform: none; }

/* Abschnitte ------------------------------------------------------------ */
main { padding-top: var(--hdr-h); }
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-gray { background: var(--paper); }
.sec-asphalt { background: var(--asphalt); color: var(--white); }
.sec-asphalt .tag { color: var(--sign-yellow); }
.sec-asphalt .lede, .sec-asphalt .dim { color: #c5cad1; }
.sec-blue { background: var(--blue); color: var(--white); }
.sec-blue .tag { color: #fff; }
.sec-blue .lede { color: #d9e3f3; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 52px); flex-wrap: wrap; }
.head > div { max-width: 760px; }
.head .lede { margin-top: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }
.demo-note { margin-top: 28px; font-size: 0.86rem; color: var(--faint); max-width: 70ch; }

/* Startseite: Held mit Wegweiser ----------------------------------------- */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy .t-xxl { max-width: 11ch; }
.hero-copy .lede { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-side { position: relative; padding-bottom: 90px; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.gw { position: absolute; left: -36px; right: 36px; bottom: 0; background: var(--blue); color: var(--white); border-radius: 14px; padding: 10px; box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 7px #fff, 0 18px 40px -18px rgba(20, 23, 28, 0.5); }
.gw-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; text-decoration: none; border-radius: 6px; transition: background-color 150ms linear; }
.gw-row + .gw-row { border-top: 2px solid rgba(255, 255, 255, 0.85); border-radius: 0; }
.gw-row:hover { background: var(--blue-d); }
.gw-code { min-width: 54px; text-align: center; background: var(--white); color: var(--blue); font-weight: 900; font-size: 1.3rem; border-radius: 6px; padding: 4px 8px 1px; }
.gw-name { flex: 1; font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.1; padding-top: 3px; }
.ga { width: 34px; height: 34px; flex: none; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: square; }
.js .ga path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 600ms var(--out); transition-delay: calc(var(--d, 0ms) + 300ms); }
.js .is-up .ga path { stroke-dashoffset: 0; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-side { padding-bottom: 0; }
  .gw { position: relative; left: auto; right: auto; margin: -40px 14px 0; }
}

/* Klassenwähler --------------------------------------------------------- */
.cp-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.cp-tabs button { display: grid; gap: 4px; justify-items: center; padding: 16px 6px 12px; background: var(--white); border: 0; border-radius: var(--r); cursor: pointer; box-shadow: inset 0 0 0 2px var(--line-strong); transition: background-color 150ms linear, box-shadow 150ms linear, color 150ms linear; }
.cp-tabs button b { font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; }
.cp-tabs button span { font-size: 0.78rem; color: var(--dim); line-height: 1.2; text-align: center; }
.cp-tabs button:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.cp-tabs button[aria-selected="true"] { background: var(--blue); color: var(--white); box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; }
.cp-tabs button[aria-selected="true"] span { color: #d9e3f3; }
.cp-panel { border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); padding: clamp(22px, 3vw, 36px); }
.js .cp-panel.swap { animation: panel-in 380ms var(--out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.cp-head { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.cp-head .dim { margin: 6px 0 0; }
.cp-code { flex: none; min-width: 96px; height: 96px; padding: 0 12px; display: grid; place-items: center; background: var(--blue); color: var(--white); font-weight: 900; font-size: 2.6rem; border-radius: var(--r); box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 6px #fff; padding-top: 6px; }
.cp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.cp-facts > div { padding: 14px 0; border-top: 2px dashed var(--line-strong); }
.cp-facts dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.cp-facts dd { margin: 4px 0 0; font-weight: 700; }
.cp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
@media (max-width: 860px) { .cp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cp-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cp-tabs button { padding: 14px 4px 10px; } .cp-tabs button span { display: none; } }
@media (max-width: 420px) { .cp-head { flex-direction: column; align-items: flex-start; } .cp-code { min-width: 76px; height: 76px; font-size: 2rem; } }

/* Ausbildungsweg: der Mittelstreifen wird gezogen -------------------------- */
.road { position: relative; --p: 0; }
.asphalt { position: absolute; top: -20px; bottom: -20px; left: 50%; width: 130px; transform: translateX(-50%); background: var(--asphalt-2); border-left: 4px solid #fff; border-right: 4px solid #fff; }
.paint { position: absolute; left: 50%; top: 0; width: 7px; margin-left: -3.5px; height: calc(var(--p) * 100%); background: repeating-linear-gradient(180deg, #fff 0 40px, transparent 40px 72px); }
.stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 190px; row-gap: 36px; }
.st { display: flex; gap: 18px; align-items: flex-start; }
.st:nth-child(odd) { grid-column: 1; flex-direction: row-reverse; text-align: right; }
.st:nth-child(even) { grid-column: 2; margin-top: 110px; }
.st h3 { color: #fff; margin-bottom: 6px; }
.st p { margin: 0; color: #c5cad1; max-width: 38ch; }
.st:nth-child(odd) p { margin-left: auto; }
.st-sign { flex: none; width: 58px; height: 58px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 900; font-size: 1.7rem; border-radius: 8px; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; padding-top: 4px; }
.js .st { opacity: 0.32; transition: opacity 400ms linear; }
.js .st .st-sign { transform: perspective(300px) rotateX(78deg); transform-origin: 50% 100%; transition: transform 700ms var(--flip); }
.js .st.on { opacity: 1; }
.js .st.on .st-sign { transform: none; }
@media (max-width: 760px) {
  .asphalt { left: 0; width: 46px; transform: none; border-left-width: 3px; border-right-width: 3px; }
  .paint { width: 5px; margin-left: -2.5px; background: repeating-linear-gradient(180deg, #fff 0 26px, transparent 26px 48px); }
  .stations { grid-template-columns: minmax(0, 1fr); padding-left: 66px; row-gap: 30px; }
  .st:nth-child(n) { grid-column: 1; flex-direction: row; text-align: left; margin-top: 0; }
  .st:nth-child(odd) p { margin-left: 0; }
  .st-sign { width: 46px; height: 46px; font-size: 1.35rem; }
}

/* Theorietest ----------------------------------------------------------- */
.quiz { background: var(--white); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--ink); padding: clamp(22px, 3.4vw, 44px); max-width: 980px; }
.sec-gray .quiz { box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 rgba(0, 0, 0, 0.02); }
.q { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.js .q.swap { animation: panel-in 380ms var(--out); }
.q-sign .vz { width: 100%; height: auto; }
.q-no { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.opts { display: grid; gap: 10px; margin-top: 18px; }
.opt { text-align: left; padding: 14px 18px; background: var(--white); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line-strong); cursor: pointer; font-weight: 700; transition: box-shadow 150ms linear, background-color 150ms linear, color 150ms linear; }
.opt:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--blue); }
.opt:disabled { cursor: default; }
.opt.right { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; }
.opt.wrong { background: var(--red); color: #fff; box-shadow: none; }
.opt.dull { opacity: 0.45; }
.q-ex { margin-top: 18px; padding: 16px 18px; background: var(--paper); border-left: 5px solid var(--blue); border-radius: 0 8px 8px 0; }
.q-ex.miss { border-left-color: var(--red); }
.q-ex p { margin-bottom: 14px; }
.q-end .q-score { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.q-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (max-width: 640px) { .q { grid-template-columns: minmax(0, 1fr); } .q-sign { width: 110px; } }

/* Bilder als Schild gefasst --------------------------------------------- */
.photo-sign img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.sec-blue .photo-sign img { box-shadow: 0 0 0 6px #fff; }
.band img { width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; }

/* Stimmen als Zusatzzeichen --------------------------------------------- */
.zz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.zz { margin: 0; background: var(--white); border: 3px solid var(--ink); border-radius: 8px; padding: 22px 24px 18px; }
.zz blockquote { margin: 0 0 16px; font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.zz figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.8rem; color: var(--dim); border-top: 2px solid var(--ink); padding-top: 10px; }
.zz figcaption b { color: var(--ink); }
.zz-row .zz:nth-child(3n+2) { margin-top: 36px; }
.zz-all { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.zz-all .zz:nth-child(n) { margin-top: 0; }
.zz-all .zz:nth-child(even) { margin-top: 40px; }
@media (max-width: 900px) { .zz-row { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .zz-row .zz:nth-child(n) { margin-top: 0; } }

/* Abschluss ------------------------------------------------------------- */
.sec-cta { background: var(--paper); border-top: 6px solid var(--red); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.cta-grid .lede { margin-top: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; justify-content: flex-end; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } .cta-actions { justify-content: flex-start; } }

/* Unterseiten-Kopf ------------------------------------------------------ */
.phead { background: var(--paper); padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 5vw, 64px); border-bottom: 18px solid var(--asphalt); position: relative; }
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 4px; background: linear-gradient(90deg, #fff 0 44px, transparent 44px 80px) 0 0 / 80px 4px repeat-x; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.phead .lede { margin-top: 18px; }
.crumbs { font-family: var(--mono); font-size: 0.82rem; color: var(--dim); margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--blue); font-weight: 700; }
.phead-sign .vz { width: clamp(90px, 13vw, 170px); height: auto; }
@media (max-width: 640px) { .phead-grid { grid-template-columns: minmax(0, 1fr); } .phead-sign { display: none; } }

/* Klassen: Kurse -------------------------------------------------------- */
.xtras { border-top: 2px solid var(--ink); }
.xtra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 22px 0; border-bottom: 2px dashed var(--line-strong); }
.xtra p { margin: 0; color: var(--dim); }
@media (max-width: 720px) { .xtra { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Preise ---------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--ink); }
.price-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.price-table th, .price-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th { background: var(--blue); color: #fff; font-size: 0.86rem; font-weight: 700; line-height: 1.25; vertical-align: bottom; }
.price-table thead th:first-child { border-top-left-radius: 12px; }
.price-table thead th:last-child { border-top-right-radius: 12px; }
.price-table tbody th { font-weight: 600; }
.price-table tbody th b { display: inline-block; min-width: 50px; font-weight: 900; color: var(--blue); }
.price-table td { font-size: 0.98rem; white-space: nowrap; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table tr:target > * { background: var(--blue-l); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.calc fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.calc legend, .field label:not(.switch), .field .lbl { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.field label output { color: var(--blue); font-size: 1.1rem; margin-left: 8px; }
.calc input[type="range"] { width: 100%; accent-color: var(--blue); height: 28px; }
.calc-out { background: var(--blue); color: #fff; border-radius: 14px; padding: clamp(20px, 3vw, 32px); box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 6px #fff; }
.calc-lines { list-style: none; margin: 0 0 14px; padding: 0; }
.calc-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); font-size: 0.95rem; }
.calc-lines li b { font-family: var(--mono); white-space: nowrap; }
.calc-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; font-weight: 700; }
.calc-sum b { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* Pillen, Schalter, Formular -------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pill span { display: inline-block; min-width: 54px; text-align: center; padding: 10px 14px 8px; border-radius: 8px; font-weight: 900; box-shadow: inset 0 0 0 2px var(--line-strong); background: var(--white); transition: background-color 150ms linear, box-shadow 150ms linear, color 150ms linear; }
.pill:hover span { box-shadow: inset 0 0 0 2px var(--blue); }
.pill input:checked + span { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px; }
.full { grid-column: 1 / -1; }
.field input:not([type]), .field input[type="tel"], .field input[type="email"], .field select, .field textarea { width: 100%; background: var(--paper); border: 2px solid transparent; border-radius: 8px; padding: 12px 14px; transition: border-color 150ms linear; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { min-height: 100px; resize: vertical; }
.switch { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch .track { width: 52px; height: 28px; border-radius: 14px; background: var(--line-strong); position: relative; flex: none; transition: background-color 150ms linear; }
.switch .track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 250ms var(--out); }
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track::after { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 3px solid var(--red); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--dim); cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.form-hint { color: var(--red); font-weight: 700; margin: 0; min-height: 1.2em; }
.sent { display: none; gap: 20px; align-items: center; margin-top: 24px; padding: 20px; background: var(--paper); border-radius: 14px; }
.sent.on { display: flex; }
.sent p { margin: 0; }
.lights { flex: none; display: grid; gap: 6px; padding: 8px; background: var(--ink); border-radius: 12px; }
.lights i { width: 26px; height: 26px; border-radius: 50%; background: #3b3f45; }
.sent.on .lights .r { animation: lamp-r 1500ms linear both; }
.sent.on .lights .y { animation: lamp-y 1500ms linear both; }
.sent.on .lights .g { animation: lamp-g 1500ms linear both; }
@keyframes lamp-r { 0%, 45% { background: var(--red); } 46%, 100% { background: #3b3f45; } }
@keyframes lamp-y { 0%, 30% { background: #3b3f45; } 31%, 66% { background: #f2a900; } 67%, 100% { background: #3b3f45; } }
@keyframes lamp-g { 0%, 66% { background: #3b3f45; } 67%, 100% { background: #1f9d55; } }
.side .t-m { margin-bottom: 8px; }
.bring { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bring li { padding-left: 30px; position: relative; }
.bring li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 12px; border-left: 4px solid var(--blue); border-bottom: 4px solid var(--blue); transform: rotate(-45deg) scale(0.8); }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Ausbildung: Fahrzeuge ------------------------------------------------- */
.fleet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.fleet li { padding: 20px 22px 6px 0; color: var(--dim); }
.fleet li + li { padding-left: 22px; border-left: 2px dashed var(--line-strong); }
.fleet b { display: block; color: var(--ink); font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; }
@media (max-width: 900px) { .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fleet li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .fleet { grid-template-columns: minmax(0, 1fr); } .fleet li:nth-child(n) { padding-left: 0; border-left: 0; border-bottom: 2px dashed var(--line-strong); } }

/* Team: Fahrlehrerausweise ---------------------------------------------- */
.ids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.card-id { border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); overflow: hidden; }
.id-top { display: flex; justify-content: space-between; padding: 10px 18px 8px; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.id-body { display: flex; gap: 16px; align-items: center; padding: 20px 18px 6px; }
.id-ini { flex: none; width: 78px; height: 96px; display: grid; place-items: center; background: var(--paper); border-radius: 6px; font-weight: 900; font-size: 1.7rem; color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.role { margin: 4px 0 0; color: var(--dim); font-size: 0.92rem; }
.id-cls { margin: 6px 0 0; font-size: 0.85rem; color: var(--blue); font-weight: 700; }
.id-text { padding: 8px 18px 20px; margin: 0; color: var(--dim); font-size: 0.95rem; }

/* Über uns -------------------------------------------------------------- */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.rules li { padding: 4px 0 4px 22px; border-left: 5px solid var(--blue); color: var(--dim); }
.rules b { display: block; color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.years li { padding-top: 18px; border-top: 4px solid var(--asphalt); position: relative; }
.years li::before { content: ""; position: absolute; top: -4px; left: 0; width: 46px; height: 4px; background: var(--red); }
.years b { display: block; font-size: 1.6rem; color: var(--blue); margin-bottom: 8px; }
.years p { color: var(--dim); margin-top: 8px; }
@media (max-width: 860px) { .years { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .years { grid-template-columns: minmax(0, 1fr); } }

/* Rechtliches ----------------------------------------------------------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.legal aside { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; display: grid; gap: 8px; }
.legal aside a { text-decoration: none; font-weight: 800; color: var(--blue); }
.legal section + section { margin-top: 56px; }
.legal h3 { font-size: 1.05rem; font-weight: 800; margin: 26px 0 6px; }
.legal p { color: var(--dim); }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal aside { position: static; } }

/* Fußzeile -------------------------------------------------------------- */
.foot { background: var(--asphalt); color: #d6dae0; padding-bottom: 32px; }
.foot .lane { background-color: var(--asphalt-2); margin-bottom: clamp(44px, 6vw, 72px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.foot .brand { margin-bottom: 16px; }
.foot .brand small { color: #aab1ba; }
.foot p { font-size: 0.92rem; color: #aab1ba; max-width: 38ch; }
.foot h4 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sign-yellow); margin-bottom: 12px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.hours { border-collapse: collapse; font-size: 0.92rem; width: 100%; }
.hours td { padding: 4px 0; }
.hours td:last-child { text-align: right; font-family: var(--mono); font-size: 0.85rem; }
.hours tr.today td { font-weight: 700; }
.hours tr.today td:first-child::after { content: attr(data-today); margin-left: 8px; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; background: var(--blue); color: #fff; padding: 1px 6px; border-radius: 4px; }
.foot-demo { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 2px dashed rgba(255, 255, 255, 0.2); font-size: 0.82rem; color: #8f97a1; }
.foot-demo strong { color: #d6dae0; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Bewegung reduziert ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-rv], .js [data-hero] { opacity: 1 !important; transform: none !important; }
  .js .st { opacity: 1; }
  .js .st .st-sign { transform: none; }
  .js .ga path { stroke-dashoffset: 0; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}