/* Deine Fahrschule — Fürstenfeldbruck
   ------------------------------------------------------------------
   Thema: Ohne Stress heißt: du weißt vorher, was passiert. Der Betrieb
   sagt selbst „Fahren lernen ganz ohne Stress" und „auf Augenhöhe".
   Stress entsteht bei einem Führerschein vor allem an zwei Stellen —
   was kostet das, und wie lange dauert es. Deshalb stehen auf dieser
   Seite die Preise offen und vollständig, und der Rechner sagt dir die
   ungefähre Summe, bevor du anrufst. Das ist die Signatur.

   Farbe ist NICHT erfunden, und seit dem 05.08.2026 ist sie auch nicht
   mehr geraten: Sie ist die HAUSFARBE des Betriebs, gemessen an der
   bestehenden Website (scripts/farben_messen.py). Dort trägt Schwarz
   72,8 % der Fläche und Orange #f75f0e 10,5 % — Wortmarke, Claim,
   Knöpfe, die Straßen-Signatur im Logo, sogar die Säule im Theorieraum.
   Vorher stand hier das Grün des Schulwagens vom Flottenfoto; das war
   aus EINEM Bild abgeleitet, während die Marke selbst orange ist.

   Nachgerechnet (WCAG AA), Grund ist #0d0b09:
       Orange   #f75f0e auf Nacht   = 6,17:1   Akzenttext auf dunkel
       Nacht    auf Orange          = 6,17:1   gefüllte Knöpfe
       Orange   #ff8038 auf Nacht   = 7,86:1   Hover und Hero-Auszeichnung
       Tieforange #a63d00 auf Hell  = 5,72:1   Akzenttext auf hellem Band
   Orange auf dem hellen Band wäre 2,85:1 — kommt nirgends als Text vor,
   dafür gibt es --akzent-tief. Weiß auf Orange ist ebenfalls verboten.

   Ansprache: Du. So spricht die Altseite, und so spricht das Publikum.

   Mobile first (Hausregel 3 vom 04.08.2026): Grundregeln beschreiben die
   schmale Ansicht, jede Medienabfrage ist ein `min-width`.
*/

@font-face{font-family:BricolageLokal;src:url("schrift/bricolage-grotesque-800-x.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:BricolageLokal;src:url("schrift/bricolage-grotesque-600-x.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:JostLokal;src:url("schrift/jost-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:JostLokal;src:url("schrift/jost-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:JostLokal;src:url("schrift/jost-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --nacht:#0d0b09;
  --nacht-2:#171412;
  --nacht-3:#211d19;
  --kante:rgba(244,240,234,.15);
  --text:#f4f0ea;
  --gedaempft:rgba(244,240,234,.72);
  /* Hausfarbe des Betriebs, gemessen an der Altseite. Kontraste siehe
     Kopfkommentar; kurz: 6,17:1 auf dem Nachtgrund, 5,72:1 als Tieforange
     auf dem hellen Band. Weiss auf Orange kommt nirgends vor. */
  --akzent:#f75f0e;
  --akzent-hell:#ff8038;
  --akzent-tief:#a63d00;
  --hell:#f5f2ee;
  --hell-2:#e5e0d8;
  --auf-hell:#171310;
  --auf-hell-2:#544c45;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--text);
  font-family:JostLokal,system-ui,Arial,sans-serif;line-height:1.62;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:BricolageLokal,system-ui,sans-serif;font-weight:800;
  line-height:1.02;margin:0;letter-spacing:-.025em;overflow-wrap:break-word}
h1{font-size:clamp(2.4rem,10.5vw,3.3rem)}
h2{font-size:clamp(1.8rem,7vw,2.4rem)}
h3{font-size:1.12rem;line-height:1.2;font-weight:600}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:1rem}

.marke{display:inline-block;font-family:JostLokal;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:.9rem}
.hell .marke{color:var(--akzent-tief)}
.hero .marke{color:var(--akzent-hell)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--akzent);
  color:var(--nacht);padding:.7rem 1rem;z-index:40;border-radius:8px;font-weight:600}
.sprung:focus{left:.75rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(13,11,9,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--kante)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.15rem;column-gap:.5rem;
  max-width:1220px;margin:auto;padding:.2rem .85rem .28rem}
.wortmarke{display:flex;align-items:baseline;gap:.35rem;order:1;flex:0 1 auto;min-width:0;
  font-family:BricolageLokal;font-weight:800;font-size:.94rem;letter-spacing:-.02em}
.wortmarke em{font-style:normal;color:var(--akzent)}
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.82rem;color:var(--gedaempft);
  padding:.25rem .5rem;border-radius:999px;white-space:nowrap}
.wege a[aria-current="page"],.wege a:hover{color:var(--nacht);background:var(--akzent)}
.ruf{order:2;flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.1rem;border-radius:8px;border:2px solid var(--akzent);
  background:var(--akzent);color:var(--nacht);font-family:JostLokal;
  font-weight:600;font-size:.9rem;cursor:pointer}
.knopf:hover{background:var(--akzent-hell);border-color:var(--akzent-hell)}
.kopf .knopf{min-height:34px;padding:.25rem .8rem;font-size:.84rem}
.knopf--leer{background:transparent;color:var(--text);border-color:var(--kante)}
.knopf--leer:hover{background:rgba(244,240,234,.09);border-color:var(--text)}
.hell .knopf--leer{color:var(--auf-hell);border-color:#cfc7bd}
.hell .knopf--leer:hover{background:rgba(23,19,16,.07);border-color:var(--auf-hell)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;align-items:end;min-height:72vh;
  overflow:hidden;border-bottom:1px solid var(--kante)}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,11,9,.97) 8%,rgba(13,11,9,.6) 56%,rgba(13,11,9,.68)),
             linear-gradient(90deg,rgba(13,11,9,.9) 6%,rgba(13,11,9,.5) 55%,transparent 84%)}
/* Kein `margin:auto`: automatische Raender an einem Rasterelement schlagen
   `align-items:end` und setzen den Text in die Bildmitte. */
.hero__innen{position:relative;z-index:1;width:100%;max-width:1220px;
  margin-inline:auto;padding:5rem 1rem 2.6rem}
.hero p{font-size:1.06rem;max-width:38rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}
.hero.klein{min-height:42vh}
.hero.klein .hero__innen{padding-top:4rem}

.band{padding:3.4rem 1rem}
.innen{max-width:1220px;margin:auto}
.hell{background:var(--hell);color:var(--auf-hell);border-block:1px solid var(--hell-2)}
.hell h1,.hell h2,.hell h3{color:var(--auf-hell)}
.hell p{color:#4b453f}

.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.04rem}

/* ── Kacheln ──────────────────────────────────────────────────────── */
.kacheln{display:grid;gap:1px;background:var(--kante);border:1px solid var(--kante);
  border-radius:8px;overflow:hidden;margin-top:2.2rem}
.hell .kacheln{background:var(--hell-2);border-color:var(--hell-2)}
.kachel{background:var(--nacht-2);padding:1.4rem 1.25rem 1.6rem}
.hell .kachel{background:var(--hell)}
.kachel__kopf{display:flex;align-items:baseline;gap:.65rem;
  font-size:1.12rem;line-height:1.2;min-height:2.4em}
.kachel__nr{font-family:BricolageLokal;font-weight:800;color:var(--akzent);
  font-size:inherit;line-height:inherit}
.hell .kachel__nr{color:var(--akzent-tief)}
.kachel p{margin-top:.55rem;font-size:.96rem}

/* ── Preisliste ───────────────────────────────────────────────────── */
.preise{margin-top:2rem}
.preise h3{margin-bottom:.2rem}
.preisliste{display:grid;gap:0;margin-top:.9rem;border-top:1px solid var(--kante)}
.preisliste div{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.15rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--kante)}
.preisliste span:first-child{flex:1 1 12rem}
.preisliste b{font-family:JostLokal;font-weight:600;white-space:nowrap;color:var(--akzent)}
.hell .preisliste,.hell .preisliste div{border-color:var(--hell-2)}
.hell .preisliste b{color:var(--akzent-tief)}
.stand{margin-top:1.2rem;font-size:.86rem;color:var(--gedaempft)}
.hell .stand{color:var(--auf-hell-2)}

/* ── Mitmach-Station ──────────────────────────────────────────────── */
.station{border:1px solid var(--kante);background:var(--nacht-2);
  padding:1.3rem 1.15rem;margin-top:1.8rem;border-radius:8px}
.hell .station{border-color:var(--hell-2);background:#fff}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.wahl button{appearance:none;font:inherit;font-family:JostLokal;font-weight:600;
  font-size:.88rem;min-height:44px;padding:.5rem 1rem;border-radius:8px;cursor:pointer;
  border:2px solid var(--kante);background:transparent;color:var(--text)}
.wahl button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--nacht)}
.hell .wahl button{border-color:#cfc7bd;color:var(--auf-hell)}
.hell .wahl button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--nacht)}
.antwort{border-left:4px solid var(--akzent);padding:.2rem 0 .2rem 1rem}
.antwort b{display:block;font-family:BricolageLokal;font-weight:600;font-size:1.05rem;
  color:var(--text);margin-bottom:.35rem}
.hell .antwort b{color:var(--auf-hell)}

/* Rechner */
.regler{display:grid;gap:1.1rem;margin-bottom:1.3rem}
.regler label{display:grid;gap:.35rem;font-family:JostLokal;font-weight:600;font-size:.9rem}
.regler .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.regler output{font-family:BricolageLokal;font-weight:800;color:var(--akzent-tief);font-size:1.05rem}
input[type=range]{width:100%;accent-color:var(--akzent-tief);height:32px}
.summe{border-top:1px solid var(--hell-2);padding-top:1rem;display:flex;
  flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem}
.summe span{font-family:JostLokal;font-weight:600}
.summe b{font-family:BricolageLokal;font-weight:800;font-size:clamp(1.8rem,7vw,2.6rem);
  line-height:1;color:var(--akzent-tief)}
.summe p{flex:1 0 100%;font-size:.86rem;margin-top:.4rem}

/* ── Team ─────────────────────────────────────────────────────────── */
.team{display:grid;gap:1px;background:var(--kante);border:1px solid var(--kante);
  border-radius:8px;overflow:hidden;margin-top:2.2rem}
.kopfzeile{background:var(--nacht-2);padding:1.15rem 1.2rem}
.kopfzeile b{display:block;font-family:BricolageLokal;font-weight:600;font-size:1.05rem}
.kopfzeile span{font-size:.9rem;color:var(--gedaempft)}

/* ── Bildstreifen ─────────────────────────────────────────────────── */
.streifen{position:relative;min-height:34vh;overflow:hidden;border-block:1px solid var(--kante)}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen::after{content:"";position:absolute;inset:0;background:rgba(13,11,9,.5)}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.formular{display:grid;gap:.9rem;margin-top:1.6rem}
label{display:grid;gap:.3rem;font-family:JostLokal;font-weight:600;font-size:.88rem}
input,textarea,select{width:100%;font:inherit;padding:.75rem;border-radius:8px;
  border:1px solid var(--kante);background:rgba(244,240,234,.06);color:var(--text)}
/* Ein Haken von 13x24 px ist auf dem Handy nicht sicher zu treffen. */
input[type=checkbox]{width:24px;height:24px;min-height:24px;padding:0;flex:0 0 auto;
  accent-color:var(--akzent-tief)}
textarea{min-height:7.5rem;resize:vertical}
.daten{display:grid;gap:0;margin-top:1.4rem;border-top:1px solid var(--kante)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:1px solid var(--kante)}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{padding-block:0}
.daten b{font-family:JostLokal;font-weight:600;font-size:.98rem;color:var(--text)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.daten a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.zeiten{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--kante)}
.zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.15rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--kante)}
.zeiten b{font-family:JostLokal;font-weight:600;font-size:.98rem}
.zeiten span{color:var(--gedaempft);font-size:.9rem}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,8vw,2.6rem);margin-bottom:.4rem}
.rechtstext h2{font-size:1.14rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.85rem}
.rechtstext a{text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:26px;padding-block:3px}
.hinweis{margin-top:2.6rem;border:1px solid var(--akzent);border-left-width:5px;
  background:rgba(247,95,14,.08);padding:1.15rem;border-radius:8px}
.hinweis strong{display:block;font-family:BricolageLokal;font-weight:600;
  color:var(--akzent);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ── Fuss ─────────────────────────────────────────────────────────── */
.fuss{background:#0a0806;border-top:1px solid var(--kante);padding:2.6rem 1rem}
.fuss__innen{max-width:1220px;margin:auto;display:grid;gap:1.6rem}
.fuss b{font-family:BricolageLokal;font-weight:600}
.fuss p{font-size:.92rem}
.fuss a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.fein{font-size:.82rem;color:rgba(244,240,234,.6)}
.fein a{min-height:32px;padding-block:.3rem;font-weight:600}

/* ---------- Klapptexte: Klassen, Fragen, Formulare -----------------
   Ergaenzt am 05.08.2026 mit den Inhalten der Altseite (13 Klassenseiten,
   FAQ, Downloads). Bewusst `<details>` und nicht die Reiter von oben:
   Reiter brauchen JavaScript, und ohne JavaScript waeren dreizehn
   Klassenbeschreibungen nicht erreichbar. `<details>` klappt ohne Skript. */
.klapp{border:1px solid var(--kante);border-radius:8px;background:var(--nacht-2);
  margin-top:.7rem;overflow:hidden}
.hell .klapp{border-color:var(--hell-2);background:#fff}
.klapp>summary{list-style:none;cursor:pointer;display:flex;gap:.9rem;
  align-items:baseline;padding:.95rem 1.1rem;min-height:48px;
  font-family:BricolageLokal;font-weight:600;font-size:1.05rem}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary::after{content:"+";margin-left:auto;font-family:JostLokal;
  font-weight:600;font-size:1.3rem;line-height:1;color:var(--akzent)}
.hell .klapp>summary::after{color:var(--akzent-tief)}
.klapp[open]>summary::after{content:"–"}
.klapp>summary:hover{background:rgba(244,240,234,.04)}
.hell .klapp>summary:hover{background:#faf7f2}
.klapp__kuerzel{font-family:JostLokal;font-weight:600;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);
  flex:0 0 auto;min-width:3.4rem}
.hell .klapp__kuerzel{color:var(--akzent-tief)}
/* Das Raster gilt erst im offenen Zustand. Hintergrund, gemessen am
   05.08.2026: Chromium gibt Kindern eines GESCHLOSSENEN <details> weiterhin
   einen Kasten von voller Groesse zurueck (Inhalt 1218 x 215 px, obwohl das
   <details> nur 60 px hoch ist). Gemalt wird nichts, aber ein Messwerkzeug,
   das Rechtecke vergleicht, sieht dort Ueberlappungen. Das Werkzeug wurde
   entsprechend nachgezogen; hier bleibt die engere Regel, weil sie ohnehin
   praeziser ist. */
.klapp__inhalt{padding:0 1.1rem 1.2rem}
.klapp[open] > .klapp__inhalt{display:grid;gap:.9rem}
.klapp__inhalt p{font-size:.96rem}

/* Eckwerte einer Klasse: Begriff und Wert, zweispaltig ab 620 px. */
.werte{display:grid;gap:.45rem;margin:0}
.werte div{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--kante);padding-bottom:.4rem}
.hell .werte div{border-color:var(--hell-2)}
.werte dt{font-size:.9rem;color:var(--gedaempft)}
.hell .werte dt{color:var(--auf-hell-2)}
.werte dd{margin:0;font-weight:600;font-size:.92rem;text-align:right}

/* Formularliste: Beschriftungen wie auf der Altseite. */
.formulare{display:grid;gap:.1rem;margin-top:1.2rem}
.formulare a{display:flex;gap:.8rem;align-items:center;min-height:48px;
  padding:.55rem .2rem;border-bottom:1px solid var(--kante);font-weight:500}
.hell .formulare a{border-color:var(--hell-2)}
.formulare a:hover{color:var(--akzent)}
.hell .formulare a:hover{color:var(--akzent-tief)}
.formulare a::before{content:"↓";color:var(--akzent);font-weight:600;flex:0 0 auto}
.hell .formulare a::before{color:var(--akzent-tief)}

/* Fussleiste: die drei Kanaele des Betriebs. */
.kanaele{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.2rem}
.kanaele a{font-size:.9rem}

:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

/* ══ ab 620 px ═══════════════════════════════════════════════════ */
@media (min-width:620px){
  .werte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.45rem 1.8rem}
  .kacheln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular .weit{grid-column:1/-1}
  .hero__knoepfe .knopf{flex:0 0 auto}
  .preise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.2rem}
}

/* ══ ab 760 px: Kopf wieder einreihig ════════════════════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.45rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0;font-size:1.05rem}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.88rem;padding:.4rem .75rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.88rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
  .team{grid-template-columns:repeat(3,1fr)}
}

/* ══ ab 1000 px ══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(3.1rem,5.6vw,4.8rem)}
  h2{font-size:clamp(2.2rem,3.4vw,3rem)}
  .hero{min-height:80vh}
  .hero.klein{min-height:48vh}
  /* 05.08.2026: Ueberschrift und Text stehen UNTEREINANDER. Der Beitext
     neben der Ueberschrift zerreisst den Lesefluss — die Anweisung dazu
     steht in ANWEISUNG-NEU, Hausregel 15. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .zwei > div > p{max-width:70ch}
  /* Zwei eigenstaendige Bloecke duerfen nebeneinander stehen (Kontaktdaten
     und Formular). Das ist kein Beitext zur Ueberschrift, sondern ein Paar. */
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .kacheln{grid-template-columns:repeat(3,1fr)}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
  .streifen{min-height:42vh}
}

/* Lange deutsche Woerter liefen auf 320 px aus der Seite. Getrennt wird NUR
   hier unten; auf grossen Schaugroessen zerlegt eine automatische Trennung die
   Schlagzeile. */
@media (max-width:719.98px){
  h1,h2,h3,p,.preisliste span{hyphens:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}