/* ============================================================
   Fahrschule Bernert v2 — „Der Fahrplan"
   Design-DNA: Technische Praezision, hell + weich
   Gruen-Familie + 1 warmer Gegenpol · Lexend + Source Sans 3
   ============================================================ */

:root{
  --canvas:      #F0F1EC;
  --weiss:       #FFFFFF;
  --salbei:      #E4F1E6;
  --salbei-tief: #CDE5D4;
  --gruen:       #22B14C;
  --gruen-tief:  #157A34;
  --gruen-hell:  #35C463;  /* v18: starkes Marken-Grün auf Dunkel (Sage war zu schwach) */
  --tanne:       #22302A;
  --tanne-2:     #2C3D34;
  --creme:       #F6F1E9;
  --text:        #2A3230;
  --text-hell:   #F2F6F1;

  /* Gedaempfter Sage-Akzent fuer dunkle Flaechen (Ringe, Marker, Deko) — NICHT das grelle Kelly */
  --akzent-sage: #8FBBA0;

  --font-head: 'Lexend', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --ease: cubic-bezier(0.3, 0.9, 0.3, 1);
  --ease-reveal: cubic-bezier(0.2, 0.75, 0.25, 1);
  --pad-section: clamp(68px, 7vw, 108px);
  --schatten-gross: 0 44px 90px -40px rgba(15, 24, 20, .55);
  --schatten-klein: 0 16px 40px -20px rgba(34, 48, 42, .26);
  --radius-karte: 18px;
  --radius-btn: 8px;
  /* Film-Grain: killt den "flacher Vektor = billig"-Look auf dunklen Flaechen (Craft-Vokabular) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:17px; line-height:1.6;
  color:var(--text);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--gruen-tief); }
:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; border-radius:4px; }

h1,h2,h3{ font-family:var(--font-head); font-weight:600; line-height:1.12; }
h1{ font-weight:700; font-size:clamp(2.6rem, 4.6vw, 3.9rem); line-height:1.08; letter-spacing:-.015em; }
h2{ font-size:clamp(1.9rem, 3vw, 2.6rem); letter-spacing:-.01em; }
h2 em, h1 em{ font-style:normal; color:var(--gruen); }
.on-dark h2 em{ color:var(--gruen-hell); }

.container{ max-width:1240px; margin:0 auto; padding:0 28px; }
.kicker{
  font-family:var(--font-head); font-weight:600; font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gruen-tief);
  display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--gruen); flex-shrink:0; }
.on-dark .kicker{ color:var(--gruen-hell); }
.on-dark .kicker::before{ background:var(--gruen-hell); }
.sub{ font-size:1.12rem; font-weight:500; color:rgba(42,50,48,.9); line-height:1.55; }
.on-dark .sub{ color:rgba(242,246,241,.86); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background:var(--gruen); color:#fff;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:15px 28px; border-radius:var(--radius-btn); text-decoration:none;
  border:0; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(34,177,76,.65);
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ background:var(--gruen-tief); box-shadow:0 6px 14px -8px rgba(21,122,52,.7); }
.btn-ghost{
  display:inline-block; font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:var(--radius-btn); text-decoration:none;
  color:var(--text); border:1.5px solid rgba(42,50,48,.28);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.btn-ghost:hover{ border-color:var(--gruen); background:rgba(34,177,76,.06); }
/* WhatsApp-Button (eigene Rolle, in der Gruen-Familie: tief statt hell) */
.btn-wa{ background:var(--gruen-tief); display:inline-flex; align-items:center; gap:9px; box-shadow:0 10px 24px -12px rgba(21,122,52,.6); }
.btn-wa:hover{ background:#0f5f28; box-shadow:0 6px 14px -8px rgba(15,95,40,.7); }
.btn-wa svg{ flex-shrink:0; }
/* Ghost-Button auf dunklem Grund (Final-CTA) */
.final .btn-ghost{ color:var(--text-hell); border-color:rgba(255,255,255,.32); }
.final .btn-ghost:hover{ border-color:var(--gruen-hell); background:rgba(255,255,255,.06); }
.micro{ font-size:.85rem; color:rgba(42,50,48,.7); margin-top:12px; }
.on-dark .micro{ color:rgba(242,246,241,.7); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--canvas);
  border-bottom:1px solid rgba(42,50,48,.12);
  transition:box-shadow .3s var(--ease);
}
.nav.scrolled{ box-shadow:0 6px 24px -12px rgba(34,48,42,.18); }
.nav-inner{
  max-width:1240px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-logo{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--text);
}
.nav-siegel{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow:0 2px 8px rgba(34,48,42,.18);
}
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--font-head); font-weight:500; font-size:.94rem;
  color:var(--text); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .2s var(--ease);
}
.nav-links a:hover{ border-color:var(--gruen); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-phone{ font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--text); text-decoration:none; }
.nav-right .btn{ padding:12px 20px; font-size:.92rem; }
/* Burger-Toggle (nur mobil sichtbar) */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span{ display:block; width:24px; height:2px; margin:0 auto; background:var(--text); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-links-cta{ display:none; }

/* ---------- Hero (Layer-Buehne) ---------- */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(42,50,48,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,50,48,.045) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(#000 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(#000 60%, transparent 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
  max-width:1240px; margin:0 auto;
  padding:clamp(56px, 6vw, 92px) 28px clamp(64px, 7vw, 100px);
}
.hero h1{ margin:16px 0 18px; max-width:560px; }
.hero .sub{ max-width:500px; margin-bottom:28px; }
.hero-cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-phone{ font-family:var(--font-head); font-weight:600; color:var(--text); text-decoration:none; }
.hero-phone:hover{ color:var(--gruen-tief); }

/* Fahrplan-Karte — der Star */
.fahrplan-karte{
  position:relative; background:var(--weiss);
  border:1px solid var(--salbei-tief);
  border-radius:var(--radius-karte); padding:34px 32px 28px;
  box-shadow:var(--schatten-gross);
}
.fk-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.fk-head h3{ font-size:1.02rem; }
.fk-badge{
  font-family:var(--font-head); font-size:.76rem; font-weight:600; white-space:nowrap;
  color:var(--gruen-tief); background:var(--salbei); border-radius:20px; padding:5px 13px;
}
.tacho-wrap{ display:grid; place-items:center; margin-bottom:22px; }
.tacho-wrap svg{ width:225px; height:126px; overflow:visible; }
.tacho-bogen{ transition:stroke-dashoffset 1.5s var(--ease); }
.tacho-nadel{ transform-origin:115px 118px; transform:rotate(-116deg); transition:transform 1.6s var(--ease); }
.tacho-wrap.play .tacho-nadel{ transform:rotate(0deg); }
.tacho-label{ text-align:center; font-size:.9rem; color:rgba(42,50,48,.76); margin-top:-4px; }
.tacho-label b{ font-family:var(--font-head); font-weight:600; color:var(--text); display:block; font-size:1.2rem; }
.stationen{ list-style:none; position:relative; }
.stationen::before{
  content:""; position:absolute; left:11px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--gruen) 55%, var(--salbei-tief));
}
.stationen li{ display:flex; align-items:center; gap:14px; padding:7px 0; font-size:.96rem; }
.stationen .dot{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--salbei); border:2px solid var(--gruen);
  display:grid; place-items:center; position:relative; z-index:1;
  font-family:var(--font-head); font-size:.66rem; font-weight:700; color:var(--gruen-tief);
}
.stationen li.done .dot{ background:var(--gruen); color:#fff; }


/* Haekchen als SVG-Hintergrund. WICHTIG: ::before ABSOLUT (inset:0), NICHT display:block+height:100%
   im Grid — sonst entsteht ein 2-Zeilen-Grid (::before Zeile 1, verstecktes ✓ Zeile 2) und der Haken
   wird nach oben gedrueckt (live -22% gemessen, R5-Bug). Pfad zusaetzlich massen-zentriert auf (6,6).
   Ergebnis: +-1,4% statt -22%. Details: lessons.md 2026-07-06. */
.haken{ position:relative; }
.haken, .stationen li.done .dot{ font-size:0 !important; }
.haken::before, .stationen li.done .dot::before{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 5.66L5.0 8.06L9.4 3.06' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.eltern-liste .haken::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 5.66L5.0 8.06L9.4 3.06' fill='none' stroke='%23157A34' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Trust-Band: schwebende dunkle Stat-Karte, ragt ueber die Hero-Kante ---------- */
.trust{ background:var(--canvas); }
.trust-inner{
  max-width:1140px; margin:-56px auto 0; padding:40px;
  background:var(--tanne); color:var(--text-hell);
  border-radius:22px; box-shadow:var(--schatten-gross);
  position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; text-align:center;
}
.trust-item{ position:relative; padding-top:14px; min-width:0; }
.trust-item b{
  font-family:var(--font-head); font-size:2rem; font-weight:700;
  color:var(--gruen-hell); display:block; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.trust-item span{ font-size:.9rem; color:rgba(242,246,241,.82); }
.trust-item::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:17px;
  border:2.5px solid var(--gruen); border-bottom:0;
  border-radius:34px 34px 0 0; opacity:.55;
}
.trust-item + .trust-item::after{ /* zarte Trennlinie zwischen den Stats (nur Desktop) */
  content:""; position:absolute; left:-12px; top:14px; bottom:6px; width:1px;
  background:rgba(255,255,255,.12);
}

/* ---------- Kopfkino (weiss) + Simulator-Karte mit Overlap ---------- */
.kopfkino{ background:var(--canvas); padding:var(--pad-section) 0 0; }
.kk-lese{ max-width:640px; }
.kk-lese h2{ margin:14px 0 16px; }
.kk-lese p{ color:rgba(42,50,48,.87); max-width:60ch; }
.sim-karte{
  position:relative; z-index:2;
  margin-top:48px; margin-bottom:calc(-1 * clamp(56px, 6vw, 88px));
  background:var(--tanne); color:var(--text-hell);
  border-radius:var(--radius-karte); box-shadow:var(--schatten-gross);
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px;
  padding:clamp(30px, 4vw, 52px);
}
.sim-karte h3{ font-size:clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom:14px; }
.sim-karte h3 em{ font-style:normal; color:var(--gruen-hell); }
.sim-karte p{ color:rgba(242,246,241,.86); max-width:52ch; }
.sim-karte .btn{ margin-top:22px; }
.sim-visual{
  background:var(--tanne-2); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.sim-row{ display:flex; align-items:center; gap:12px; font-size:.92rem; color:rgba(242,246,241,.93); }
.sim-row .balken{
  flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.1);
  position:relative; overflow:hidden;
}
.sim-row .balken i{
  position:absolute; inset:0; right:auto; border-radius:6px; background:var(--gruen);
  width:var(--w, 50%); transition:width 1s var(--ease);
}
.sim-row .lbl{ width:118px; flex-shrink:0; }
.sim-row .val{ font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--gruen-hell); width:56px; text-align:right; flex-shrink:0; }
.sim-caption{ font-size:.78rem; color:rgba(242,246,241,.62); margin-top:6px; }

/* ---------- Fahrplan-Sektion (salbei) ---------- */
.fahrplan{ background:var(--canvas); padding:calc(var(--pad-section) + clamp(56px, 6vw, 88px)) 0 var(--pad-section); border-bottom:1px solid rgba(42,50,48,.08); }
.fahrplan-kopf{ max-width:640px; margin-bottom:56px; }
.fahrplan-kopf h2{ margin-top:14px; }
.fp-liste{ list-style:none; position:relative; max-width:980px; margin:0 auto; }
.fp-liste::before{
  content:""; position:absolute; left:50%; top:30px; bottom:30px; width:2px;
  background:linear-gradient(var(--gruen) 70%, var(--salbei));
  transform:translateX(-50%);
}
.fp-schritt{
  position:relative; width:calc(50% - 44px);
  background:var(--weiss); border:1px solid var(--salbei-tief); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-klein); padding:26px 28px;
  margin-bottom:34px;
}
.fp-schritt:nth-child(odd){ margin-right:auto; }
.fp-schritt:nth-child(even){ margin-left:auto; }
.fp-schritt::after{ /* Verbindungs-Punkt auf der Linie */
  content:""; position:absolute; top:34px; width:16px; height:16px;
  border-radius:50%; background:var(--gruen); border:3px solid var(--salbei);
  z-index:1;
}
.fp-schritt:nth-child(odd)::after{ right:-53px; }
.fp-schritt:nth-child(even)::after{ left:-53px; }
.fp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.fp-num{
  font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--gruen-tief);
  background:var(--salbei); border-radius:20px; padding:4px 12px;
}
.fp-gauge{ width:52px; height:30px; flex-shrink:0; }
.fp-schritt h3{ font-size:1.15rem; margin-bottom:6px; }
.fp-schritt p{ font-size:.96rem; color:rgba(42,50,48,.88); }

/* ---------- Klassen-Bento (canvas) ---------- */
.klassen{ background:var(--canvas); padding:var(--pad-section) 0; border-bottom:1px solid rgba(42,50,48,.08); }
.klassen-kopf{ max-width:640px; margin-bottom:48px; }
.klassen-kopf h2{ margin-top:14px; }
/* Featured PKW-Karte + Klassen-Zeilen (kein Grid das Loecher schlagen kann) */
.kl-feat{
  background:var(--tanne); color:var(--text-hell);
  border-radius:var(--radius-karte); box-shadow:var(--schatten-gross);
  display:grid; grid-template-columns:1.15fr .85fr; gap:36px;
  padding:clamp(28px, 3.5vw, 44px); position:relative; overflow:hidden;
}
.kl-feat .bk-kuerzel{
  position:absolute; top:20px; right:22px;
  font-family:var(--font-head); font-weight:700; font-size:.8rem;
  padding:4px 12px; border-radius:16px; background:rgba(123,217,154,.16); color:var(--gruen-hell);
}
.klf-lese{ display:flex; flex-direction:column; }
.klf-eyebrow{ font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--gruen-hell); margin-bottom:12px; }
.kl-feat h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); margin-bottom:10px; }
.klf-code{ color:var(--gruen-hell); }
.kl-feat p{ color:rgba(242,246,241,.86); max-width:48ch; }
/* B197-Star: Pruefung auf Automatik -> du faehrst beides (gecodetes Fahr-Visual) */
.b197{ display:flex; align-items:stretch; gap:12px; margin:22px 0 18px; }
.b197-box{
  flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:16px 14px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.b197-box-win{ background:rgba(34,177,76,.13); border-color:rgba(123,217,154,.45); }
.b197-tag{ font-family:var(--font-head); font-size:.76rem; font-weight:600; color:rgba(242,246,241,.62); }
.b197-box-win .b197-tag{ color:var(--gruen-hell); }
.b197-ico{ width:32px; height:40px; color:var(--gruen-hell); margin:6px 0 2px; }
.b197-doppel{ display:flex; align-items:center; gap:6px; margin:6px 0 2px; }
.b197-doppel .b197-ico{ width:28px; height:34px; margin:0; }
.b197-plus{ color:var(--gruen-hell); font-family:var(--font-head); font-weight:700; font-size:1.1rem; }
.b197-box b{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--text-hell); }
.b197-sub{ font-size:.78rem; color:rgba(242,246,241,.6); }
.b197-pfeil{ width:30px; height:24px; color:var(--gruen-hell); flex-shrink:0; align-self:center; }
.kl-feat .bk-hinweis{
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.9rem; color:var(--gruen-hell);
}
.kl-fakten{
  background:var(--tanne-2); border:1px solid rgba(255,255,255,.09);
  border-radius:12px; padding:22px 24px;
  display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.kl-fakten span{ display:flex; align-items:center; gap:10px; font-size:.94rem; color:rgba(242,246,241,.92); }
.kl-fakten .haken{
  width:19px; height:19px; border-radius:50%; background:var(--gruen); color:#fff;
  display:grid; place-items:center; font-size:.58rem; flex-shrink:0;
}
/* Mini-Stationen in der PKW-Karte (Star-Rhyme zum Fahrplan) */
.bk-stationen{
  display:flex; align-items:center; gap:0; margin-bottom:16px; padding:4px 110px 0 2px;
}
.bk-stationen .bs-dot{
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  background:var(--gruen); border:2px solid rgba(255,255,255,.25);
}
.bk-stationen .bs-dot.offen{ background:var(--tanne); border-color:var(--gruen); }
.bk-stationen .bs-linie{ flex:1; height:2px; background:linear-gradient(90deg, var(--gruen), rgba(123,217,154,.35)); }
.bk-stationen .bs-label{
  font-family:var(--font-head); font-weight:500; font-size:.78rem;
  color:var(--gruen-hell); margin-left:12px; white-space:nowrap;
}
.kl-gruppen{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.kl-gruppe{
  background:var(--weiss); border:1px solid var(--salbei-tief); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-klein); overflow:hidden;
  display:flex; flex-direction:column;
}
.kl-gruppe > .foto{ height:170px; border-radius:0; }
.kl-gruppe h3{ font-size:1.18rem; padding:22px 26px 8px; }
.kl-gruppe ul{ list-style:none; padding:6px 26px 22px; }
.kl-gruppe li{
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-top:1px solid rgba(42,50,48,.1);
}
.kl-gruppe li:first-child{ border-top:0; }
.kg-kuerzel{
  min-width:52px; text-align:center; flex-shrink:0;
  background:var(--salbei); color:var(--gruen-tief);
  font-family:var(--font-head); font-weight:700; font-size:.8rem;
  border-radius:8px; padding:7px 8px;
}
.kg-text{ flex:1; min-width:0; }
.kg-text b{ font-family:var(--font-head); font-weight:600; font-size:1.02rem; display:block; margin-bottom:2px; }
.kg-text span{ font-size:.9rem; color:rgba(42,50,48,.9); line-height:1.45; }
.kg-alter{
  font-family:var(--font-head); font-weight:600; font-size:.82rem; white-space:nowrap;
  color:var(--gruen-tief); background:var(--salbei); border-radius:16px; padding:6px 13px;
}
.bf17{ margin-top:22px; font-size:.95rem; color:rgba(42,50,48,.7); }
.bf17 b{ color:var(--gruen-tief); }

/* ---------- Fuhrpark (Fahrzeug-Raster, Geruest — Fotos spaeter tauschen) ---------- */
.fuhrpark{ background:var(--canvas); padding:var(--pad-section) 0; }
.fuhrpark-kopf{ max-width:640px; margin-bottom:44px; }
.fuhrpark-kopf h2{ margin:14px 0 12px; }
.fp-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.fz-karte{
  background:var(--weiss); border:1px solid var(--salbei-tief); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-klein); overflow:hidden; display:flex; flex-direction:column;
}
.fz-karte > .foto{ height:186px; border-radius:0; }
.fz-cap{ padding:16px 20px 18px; }
.fz-cap b{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; display:block; margin-bottom:2px; }
.fz-cap span{ font-size:.9rem; color:rgba(42,50,48,.82); }
.fz-slot{
  height:186px; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;
  color:var(--gruen-tief); border-bottom:1px solid var(--salbei-tief);
  background:
    repeating-linear-gradient(45deg, rgba(34,177,76,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--salbei), var(--salbei-tief));
}
.fz-slot span{ font-family:var(--font-head); font-weight:600; font-size:.82rem; }
.fz-platz .fz-cap b{ color:rgba(42,50,48,.7); }

/* ---------- USP-Trio (dunkler Anker: Rhythmus + Karten poppen) ---------- */
.usp{ background:var(--tanne); color:var(--text-hell); padding:var(--pad-section) 0; }
.usp-kopf{ max-width:640px; margin-bottom:48px; }
.usp-kopf h2{ margin-top:14px; }
.usp h3{ color:var(--text-hell); }
.usp-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.usp-feat{
  background:var(--tanne-2); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-gross); padding:clamp(28px, 3.5vw, 44px);
  display:flex; flex-direction:column; gap:12px;
}
.usp-feat .u-label{ font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gruen-hell); }
.usp-feat h3{ font-size:1.18rem; }
.usp-feat p{ color:rgba(242,246,241,.88); font-size:.95rem; max-width:56ch; }
.usp-side{ display:grid; gap:20px; }
.usp-karte{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-klein); padding:26px 28px;
}
.usp-karte h3{ font-size:1.18rem; margin-bottom:6px; }
.usp-karte .u-quote{ font-family:var(--font-head); font-weight:600; color:var(--gruen-hell); font-size:.92rem; margin-bottom:8px; display:block; }
.usp-karte p{ font-size:.95rem; color:rgba(242,246,241,.86); }
/* Gecodete Fahr-Visuals in den USP-Karten (DriversCam-Handy, 7-Tage-Kalender) */
.uv{ display:block; width:100%; margin-bottom:16px; }
.uv-cam{ height:92px; }
.uv-cal{ display:flex; gap:6px; align-items:stretch; }
.uv-cal span{
  flex:1; aspect-ratio:3/4; display:grid; place-items:center;
  background:rgba(34,177,76,.14); border:1px solid rgba(123,217,154,.32); border-radius:7px;
  font-family:var(--font-head); font-weight:700; font-size:.82rem; color:var(--gruen-hell);
}
.dabei{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px; }
.dabei span{ display:flex; align-items:center; gap:9px; font-size:.93rem; color:rgba(242,246,241,.9); }
.dabei .haken{
  width:19px; height:19px; border-radius:50%; background:var(--gruen); color:#fff;
  display:grid; place-items:center; font-size:.6rem; flex-shrink:0;
}

/* ---------- Ueber uns (weiss) ---------- */
.ueber{ background:var(--canvas); padding:var(--pad-section) 0; }
.ueber-grid{ display:grid; grid-template-columns:1fr .82fr; gap:56px; align-items:center; }
.ueber h2{ margin:14px 0 18px; }
.ueber p{ color:rgba(42,50,48,.87); max-width:58ch; }
.ueber p + p{ margin-top:14px; }
.ueber-visual{ position:relative; z-index:3; margin-top:clamp(-96px, -7vw, -60px); }
.foto-slot{
  background:
    repeating-linear-gradient(45deg, rgba(34,177,76,.05) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--salbei), var(--salbei-tief));
  border:2px dashed var(--gruen);
  border-radius:var(--radius-karte);
  display:grid; place-items:center; text-align:center;
  color:var(--gruen-tief); font-family:var(--font-head); font-weight:500; font-size:.85rem;
  padding:14px; min-height:200px;
}
.ueber-visual .foto-slot{ aspect-ratio:4/3; box-shadow:var(--schatten-klein); }
.ueber-siegel{
  position:absolute; bottom:-26px; left:-26px; width:132px; height:132px;
  border-radius:50%; object-fit:cover;
  box-shadow:0 14px 30px rgba(34,48,42,.3);
}

/* ---------- Stimmen (tanne) ---------- */
.stimmen{ background:var(--tanne); color:var(--text-hell); padding:var(--pad-section) 0; }
.stimmen-kopf{ max-width:640px; margin-bottom:48px; }
.stimmen-kopf h2{ margin-top:14px; }
.st-grid{ column-count:3; column-gap:18px; }
.st{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius-karte); padding:24px 26px;
  display:flex; flex-direction:column; gap:12px;
  break-inside:avoid; margin-bottom:18px;
}
.st-lead{ background:rgba(255,255,255,.09); }
.st-lead blockquote{ font-family:var(--font-head); font-weight:500; font-size:1.3rem; line-height:1.4; }
.st blockquote{ font-size:.98rem; color:rgba(242,246,241,.93); line-height:1.5; }
.st-stars{ color:var(--gruen-hell); letter-spacing:2.5px; font-size:.95rem; }
.st-autor{ margin-top:auto; display:flex; align-items:center; gap:10px; font-size:.85rem; color:rgba(242,246,241,.76); }
.st-autor b{ color:rgba(242,246,241,.9); font-weight:600; }
.st-fb{
  width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:.65rem; font-weight:700; color:#fff; flex-shrink:0;
}

/* ---------- Eltern (salbei) ---------- */
.eltern{ background:var(--canvas); padding:var(--pad-section) 0; }
.eltern-karte{
  background:var(--salbei); border-radius:var(--radius-karte); box-shadow:var(--schatten-klein);
  max-width:860px; margin:0 auto; padding:clamp(30px, 4vw, 52px);
}
.eltern-karte h2{ margin:14px 0 18px; font-size:clamp(1.6rem, 2.4vw, 2.1rem); }
.eltern-liste{ list-style:none; display:grid; gap:12px; margin:20px 0 24px; }
.eltern-liste li{ display:flex; gap:12px; align-items:flex-start; color:rgba(42,50,48,.9); }
.eltern-liste .haken{
  width:21px; height:21px; border-radius:50%; background:#fff; color:var(--gruen-tief);
  display:grid; place-items:center; font-size:.62rem; font-weight:700; flex-shrink:0; margin-top:3px;
  border:1.5px solid var(--gruen);
}
.eltern-tel{ font-size:.95rem; color:rgba(42,50,48,.82); }
.eltern-tel a{ font-family:var(--font-head); font-weight:600; }

/* ---------- FAQ (canvas + Grid) ---------- */
.faq{ background:var(--canvas); padding:var(--pad-section) 0; position:relative; overflow:hidden; }
.faq::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(42,50,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,50,48,.04) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(transparent, #000 40%);
  -webkit-mask-image:linear-gradient(transparent, #000 40%);
  pointer-events:none;
}
.faq .container{ position:relative; }
.faq-kopf{ max-width:640px; margin-bottom:48px; }
.faq-kopf h2{ margin-top:14px; }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.faq-item{
  background:var(--weiss); border:1px solid var(--salbei-tief); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-klein); padding:24px 28px;
}
.faq-item h3{ font-size:1.05rem; margin-bottom:8px; display:flex; gap:10px; }
.faq-item h3::before{ content:"?"; color:var(--gruen); font-weight:700; }
.faq-item p{ font-size:.95rem; color:rgba(42,50,48,.88); }

/* ---------- Final-CTA (tanne) ---------- */
.final{ background:var(--tanne); color:var(--text-hell); padding:var(--pad-section) 0; }
.final-kopf{ text-align:center; max-width:620px; margin:0 auto 20px; }
.final-kopf h2{ margin:14px 0 12px; }
.final-kopf .kicker{ justify-content:center; }
.final-kopf .kicker::after{ content:""; width:26px; height:2px; background:var(--gruen-hell); flex-shrink:0; }
.final-cta-row{ display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; margin:26px 0 8px; }
.final .micro{ text-align:center; }
.standorte{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:48px auto 0; }
.so-karte{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius-karte); padding:28px 30px;
}
.so-karte h3{ font-size:1.2rem; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.so-pin{
  width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--gruen); flex-shrink:0; display:grid; place-items:center;
}
.so-pin::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--tanne); }
.so-karte dl{ display:grid; gap:7px; font-size:.95rem; }
.so-karte dt{ color:rgba(242,246,241,.66); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; font-family:var(--font-head); font-weight:500; margin-top:8px; }
.so-karte dd{ color:rgba(242,246,241,.95); }
/* ---------- Standort-Karte: echte Deutschlandkarte + Hessen hervorgehoben + Info-Karte ---------- */
.standort-split{
  max-width:1040px; margin:52px auto 0;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center;
}
.de-mapwrap{ position:relative; }
.de-mapwrap::before{ /* dezenter Glow hinter dem Landkreis (entschaerft: .30 -> .12) */
  content:""; position:absolute; left:20%; top:24%; width:60%; height:56%;
  background:radial-gradient(circle, rgba(34,177,76,.12), rgba(34,177,76,0) 70%);
  filter:blur(12px); pointer-events:none;
}
.de-map{ position:relative; display:block; width:100%; height:auto; max-width:560px; margin:0 auto; }
.kr-nb{ fill:none; stroke:#4f6158; stroke-width:1.1; }      /* Nachbarkreise: nur Grenzlinien, kein grauer Fill; verblassen per Maske nach aussen (Ruben R7b) */
.kr-mr{ fill:#3B5A46; stroke:#8FE3AC; stroke-width:2; }     /* Landkreis MR: Sage-Fill + kraeftiger heller Rand = sticht als einzige Flaeche heraus */
.reg-loc .reg-ring{ fill:none; stroke:#ffffff; stroke-width:2; transform-box:fill-box; transform-origin:center;
  animation:regPuls 2.4s ease-out infinite; }
@keyframes regPuls{ 0%{ transform:scale(1); opacity:.75 } 100%{ transform:scale(2.6); opacity:0 } }
.reg-lbl{ font-family:var(--font-head); font-weight:600; font-size:27px; fill:#ffffff;
  paint-order:stroke; stroke:rgba(12,22,16,.6); stroke-width:4px; }
.reg-lbl-faint{ font-family:var(--font-head); font-weight:500; font-size:22px; fill:rgba(242,246,241,.62);
  paint-order:stroke; stroke:rgba(12,22,16,.5); stroke-width:3px; }
/* Schwebende Info-Karte (ragt ueber die Karte) */
.standort-info{
  position:relative; z-index:2; margin-left:-56px;
  background:var(--tanne-2); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; box-shadow:var(--schatten-gross); padding:26px 28px; display:grid; gap:16px;
}
.si-brand{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.10); }
.si-brand img{ width:52px; height:52px; border-radius:50%; flex-shrink:0; }
.si-brand b{ font-family:var(--font-head); font-size:1.1rem; display:block; }
.si-brand span{ font-size:.86rem; color:rgba(242,246,241,.66); }
.si-ort{ display:flex; gap:12px; align-items:flex-start; }
.si-ort .so-pin{ margin-top:2px; }
.si-ort b{ font-family:var(--font-head); font-size:1.02rem; display:block; margin-bottom:2px; }
.si-ort span{ font-size:.88rem; color:rgba(242,246,241,.78); line-height:1.5; }
.wa-bubble{
  max-width:460px; margin:44px auto 0;
  background:var(--tanne-2); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-karte); padding:20px 22px;
}
.wa-row{ display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; }
.wa-msg{
  background:rgba(255,255,255,.1); border-radius:14px 14px 14px 4px;
  padding:10px 14px; font-size:.9rem; color:rgba(242,246,241,.96); max-width:75%;
}
.wa-msg.wa-out{ margin-left:auto; background:var(--gruen-tief); border-radius:14px 14px 4px 14px; }
.wa-link{ display:block; text-align:center; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--gruen-hell); text-decoration:none; margin-top:6px; }
.wa-link:hover{ text-decoration:underline; }

/* ---------- Footer ---------- */
.footer{ background:#1B2621; color:rgba(242,246,241,.8); padding:56px 0 90px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:36px; }
.footer h4{ font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--text-hell); margin-bottom:14px; }
.footer ul{ list-style:none; display:grid; gap:8px; font-size:.92rem; }
.footer a{ color:rgba(242,246,241,.8); text-decoration:none; }
.footer a:hover{ color:var(--gruen-hell); }
.footer-brand img{ width:110px; margin-bottom:14px; }
.footer-brand p{ font-size:.9rem; max-width:30ch; }
.footer-bottom{
  max-width:1240px; margin:44px auto 0; padding:20px 28px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem; color:rgba(242,246,241,.6);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}


/* Echte Bernert-Fotos: ein Grade fuer alle (C4) */
.foto{ filter:saturate(.94) contrast(1.04); border-radius:12px; display:block; width:100%; object-fit:cover; }
.fp-foto{ height:130px; margin-top:14px; }
/* Fuehrerschein-Karte als Ziel-Motiv (gecodet, am Fahrplan-Ende) */
.fs-lappen{ display:block; width:100%; max-width:250px; height:auto; margin-top:16px; filter:drop-shadow(0 12px 24px rgba(34,48,42,.28)); }
.sim-foto-wrap{ display:flex; flex-direction:column; gap:10px; justify-content:center; }
.sim-foto-wrap .foto{ border:1px solid rgba(255,255,255,.14); }
.kl-rechts{ display:flex; flex-direction:column; gap:14px; }
.kl-rechts .foto{ height:170px; }
.ueber-visual .foto{ aspect-ratio:4/3; height:auto; box-shadow:var(--schatten-gross); }

/* ---------- Sticky Mobile-Bar ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none;
  background:var(--tanne); border-top:1px solid rgba(255,255,255,.12);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.sticky-bar a{
  flex:1; text-align:center; text-decoration:none;
  font-family:var(--font-head); font-weight:600; font-size:.88rem;
  padding:12px 8px; border-radius:var(--radius-btn);
}
.sb-tel{ background:rgba(255,255,255,.1); color:var(--text-hell); }
.sb-wa{ background:rgba(255,255,255,.1); color:var(--gruen-hell); }
.sb-cta{ background:var(--gruen); color:#fff; flex:1.4; }

/* ---------- Formular (anfrage.html) ---------- */
.anfrage{ background:var(--canvas); padding:clamp(48px, 5vw, 72px) 0 var(--pad-section); }
.anfrage-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.anfrage h1{ font-size:clamp(2.2rem, 3.6vw, 3rem); margin:16px 0 16px; }
.anfrage .sub{ max-width:46ch; }
.fp-mini{ list-style:none; display:grid; gap:10px; margin-top:30px; }
.fp-mini li{ display:flex; align-items:center; gap:12px; font-size:.95rem; color:rgba(42,50,48,.82); }
.fp-mini .dot{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--salbei); border:2px solid var(--salbei-tief);
  display:grid; place-items:center; font-family:var(--font-head); font-size:.7rem; font-weight:700; color:var(--gruen-tief);
}
.fp-mini li.aktiv{ color:var(--text); font-weight:600; }
.fp-mini li.aktiv .dot{ background:var(--gruen); border-color:var(--gruen); color:#fff; }
.form-karte{
  background:var(--weiss); border:1px solid var(--salbei-tief); border-radius:var(--radius-karte);
  box-shadow:var(--schatten-gross); padding:clamp(28px, 3.5vw, 44px);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-feld{ display:grid; gap:7px; }
.form-feld.breit{ grid-column:span 2; }
.form-feld label{ font-family:var(--font-head); font-weight:500; font-size:.88rem; }
.form-feld input, .form-feld select, .form-feld textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  background:var(--canvas); border:1.5px solid var(--salbei-tief);
  border-radius:var(--radius-btn); padding:12px 14px; width:100%;
}
.form-feld input:focus, .form-feld select:focus, .form-feld textarea:focus{
  outline:2px solid var(--gruen); outline-offset:0; border-color:var(--gruen);
}
.form-karte .btn{ width:100%; margin-top:22px; }
.form-alt{ margin-top:18px; text-align:center; font-size:.92rem; color:rgba(42,50,48,.82); }

/* ---------- Danke ---------- */
.danke{ background:var(--canvas); min-height:72vh; display:grid; place-items:center; padding:72px 0; }
.danke-karte{ text-align:center; max-width:520px; padding:0 28px; }
.danke-karte h1{ font-size:clamp(2.2rem, 3.6vw, 3rem); margin:20px 0 14px; }
.danke-karte p{ color:rgba(42,50,48,.86); }
.danke-karte .tacho-wrap svg{ width:200px; height:112px; }
.danke-cta{ display:flex; gap:16px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* ---------- Rechtsseiten ---------- */
.recht{ background:var(--canvas); padding:clamp(48px, 5vw, 72px) 0 var(--pad-section); }
.recht .container{ max-width:800px; }
.recht h1{ font-size:clamp(2rem, 3.2vw, 2.6rem); margin:14px 0 28px; }
.recht h2{ font-size:1.3rem; margin:32px 0 10px; }
.recht h3{ font-size:1.05rem; margin:20px 0 8px; }
.recht p, .recht li{ color:rgba(42,50,48,.88); font-size:.98rem; }
.recht ul{ padding-left:22px; }
.recht .hinweis{ background:var(--salbei); border-radius:12px; padding:16px 20px; font-size:.92rem; margin:20px 0; }

/* ---------- Reveals ---------- */
.reveal{ opacity:0; transform:translateY(30px) scale(.975); transition:opacity .55s var(--ease-reveal), transform .55s var(--ease-reveal); transition-delay:var(--d, 0s); will-change:opacity, transform; }
html.no-js .reveal, .reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .tacho-bogen, .sim-row .balken i{ transition:none; }
  .tacho-nadel{ transition:none; transform:rotate(0deg); }
  .reg-loc .reg-ring{ animation:none; opacity:0; }
}

/* ============ Responsive ============ */
@media (max-width: 1080px){
  .st-grid{ column-count:2; }
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; padding-top:44px; }
  .hero h1{ max-width:none; }
  .nav-links{ display:none; }
  .trust-inner{ grid-template-columns:repeat(2, 1fr); gap:26px 20px; margin-top:-40px; padding:32px 26px; }
  .trust-item + .trust-item::after{ display:none; }
  .sim-karte{ grid-template-columns:1fr; }
  .kl-feat{ grid-template-columns:1fr; }
  .kl-gruppen{ grid-template-columns:1fr; }
  .fp-grid{ grid-template-columns:1fr 1fr; }
  .usp-grid{ grid-template-columns:1fr; }
  .ueber-grid{ grid-template-columns:1fr; gap:40px; }
  .ueber-visual{ margin-top:0; }  /* kein Foto-Ausbruch am Handy */
  .anfrage-grid{ grid-template-columns:1fr; gap:36px; }
  .fp-liste::before{ left:14px; transform:none; }
  .fp-schritt{ width:auto; margin-left:44px !important; margin-right:0 !important; }
  .fp-schritt:nth-child(odd)::after, .fp-schritt:nth-child(even)::after{ left:-37px; right:auto; }
  .standorte{ grid-template-columns:1fr; }
  .standort-split{ grid-template-columns:1fr; }
  .standort-info{ margin-left:0; margin-top:26px; }
  .de-map{ height:300px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* Burger-Menue: Toggle zeigen, Links als Dropdown, Nav-Rechts aus */
  .nav-toggle{ display:flex; }
  .nav-right{ display:none; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--canvas);
    border-top:1px solid rgba(42,50,48,.1); box-shadow:var(--schatten-klein); padding:6px 0 14px;
  }
  .nav.open .nav-links{ display:flex; }
  .nav-links a{ padding:14px 28px; font-size:1.02rem; border-bottom:0; }
  .nav-links a:hover{ border-color:transparent; background:rgba(34,177,76,.06); }
  .nav-links-cta{ display:inline-block; margin:12px 28px 2px; text-align:center; }
  /* B197-Star am Handy stapeln (Pruefung -> Pfeil runter -> faehrst beides) */
  .b197{ flex-direction:column; }
  .b197-pfeil{ transform:rotate(90deg); margin:2px 0; }
  /* Final-Sektion: CTAs nach unten, Abstand zur Karte kleiner */
  .final .container{ display:flex; flex-direction:column; }
  .final-kopf{ order:1; }
  .final .standort-split{ order:2; margin-top:26px; }
  .final-cta-row{ order:3; margin-top:26px; }
  .final .micro{ order:4; }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  .nav-phone{ display:none; }
  .nav-right .btn{ display:none; }
  .st-grid{ column-count:1; }
  .faq-grid{ grid-template-columns:1fr; }
  .fp-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-feld.breit{ grid-column:auto; }
  .trust-inner{ grid-template-columns:1fr 1fr; margin:-30px 16px 0; padding:26px 18px; gap:24px 12px; }
  .trust-item b{ font-size:1.5rem; }
  .btn, .btn-wa, .btn-ghost{ padding:12px 22px; font-size:.94rem; }
  .final-cta-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .final-cta-row .btn, .final-cta-row .btn-wa{ width:100%; }
}

/* ============================================================
   v17 — Premium-Craft Override-Layer (kommt ZULETZT = gewinnt im Cascade)
   Hebt gecodete Elemente auf Premium-Handwerk: gedaempfte Farbe (Kelly nur
   noch CTA), Grain, echte Tiefe, feine SVG, Typo-als-Design.
   ============================================================ */

/* --- Grain auf solide dunkle Flaechen (weiche Textur statt Flat) --- */
.usp, .stimmen, .final, .footer,
.trust-inner, .sim-karte, .kl-feat, .usp-feat, .standort-info{
  background-image:var(--grain);
  background-size:120px 120px;
  background-blend-mode:soft-light;
}

/* --- Farb-Rollen v18: Logo-Grün ist HAUPTfarbe (stark), Dunkel nur sekundär.
   Kelly bleibt weg von Deko-Krümeln, aber DA wo's zählt: Akzentwort, Haken, Kicker, CTA. --- */
h1 em, h2 em{ color:var(--gruen); }
.on-dark h1 em, .on-dark h2 em{ color:var(--gruen-hell); }
.kicker{ color:var(--gruen); }
.kicker::before{ background:var(--gruen); }
.fp-liste::before{ background:linear-gradient(var(--gruen) 70%, var(--salbei)); }
.fp-schritt::after{ background:var(--gruen); }
.faq-item h3::before{ color:var(--gruen); }
.kl-fakten .haken, .dabei .haken{ background:var(--gruen); }
a{ color:var(--gruen-tief); }
.b197-box-win{ background:rgba(143,187,160,.10); border-color:rgba(143,187,160,.4); }
.uv-cal span{ background:rgba(143,187,160,.10); border-color:rgba(143,187,160,.3); color:var(--gruen-hell); }
.so-pin{ background:var(--gruen-tief); }
/* Karte: kein Kelly-Fill, kein Glow */
.de-mapwrap::before{ display:none; }
.kr-mr{ fill:#33463C; stroke:var(--gruen-hell); stroke-width:1.6; }
/* Fuhrpark-Platzhalter: kein Kelly-Streifenmuster */
.fz-slot{ background:linear-gradient(160deg, var(--salbei), var(--salbei-tief)); color:var(--gruen-tief); }

/* --- Material-Konsistenz: zarte Inner-Highlight-Kante auf Glas-Karten (echte Tiefe) --- */
.usp-karte, .st, .kl-fakten, .sim-visual, .b197-box, .standort-info{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--schatten-klein);
}

/* --- Trust-Band: Doodle-Bögen raus, Zahl = Display-Typo --- */
.trust-item::before{ display:none; }
.trust-item{ padding-top:0; }
.trust-item b{ font-weight:600; font-size:2.1rem; letter-spacing:-.02em; }

/* --- Fahrplan-Fotos gross (editorial statt Briefmarke) --- */
.fp-foto{ height:200px; margin-top:18px; }

/* --- Gecodete Clipart raus (in HTML entfernt; hier als Sicherheitsnetz) --- */
.fp-gauge, .fs-lappen{ display:none; }

/* --- Testimonial-Initialen (dezent, konsistentes Material) --- */
.st-fb{
  width:34px; height:34px; font-size:.78rem; letter-spacing:.02em;
  background:rgba(143,187,160,.15); color:var(--gruen-hell);
  font-family:var(--font-head); font-weight:600;
}

/* --- USP: Karten-Material --- */

/* ============================================================
   Hero-Karte — dunkles Glas + Grain + feiner Fortschritts-Ring
   (statt Toy-Tacho + Wizard-Haken). Die Signatur der Seite.
   ============================================================ */
.fahrplan-karte{
  background-color:var(--tanne);
  background-image:
    var(--grain),
    linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,0) 48%),
    radial-gradient(120% 90% at 82% 0%, rgba(143,187,160,.14), transparent 58%);
  background-size:120px 120px, auto, auto;
  background-blend-mode:soft-light, normal, normal;
  color:var(--text-hell);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--schatten-gross);
  padding:30px 30px 26px;
  overflow:hidden;
}
.fahrplan-karte .fk-head{ margin-bottom:0; align-items:flex-start; }
.fk-eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(242,246,241,.58); display:block;
}
.fahrplan-karte .fk-head h3{
  font-family:var(--font-head); font-weight:500; font-size:1.16rem;
  color:var(--text-hell); margin-top:4px; letter-spacing:-.01em;
}
.fahrplan-karte .fk-badge{
  color:var(--gruen-hell); background:transparent;
  border:1px solid rgba(143,187,160,.32); font-weight:500;
}
/* Tacho im dunklen Hero-Karten-Glas: animierter Nadel-Sweep, starkes Logo-Grün (v18) */
.fahrplan-karte .tacho-wrap{ margin:24px 0 6px; place-items:center; }
.fahrplan-karte .tacho-wrap svg{ width:200px; height:112px; }
.fahrplan-karte .tacho-label{ color:rgba(242,246,241,.6); margin-top:0; }
.fahrplan-karte .tacho-label b{ color:var(--text-hell); }
/* Stationen: feine Marker an dünner Rail (kein Wizard-Haken) */
.fahrplan-karte .stationen::before{
  left:5px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(rgba(143,187,160,.5), rgba(255,255,255,.06));
}
.fahrplan-karte .stationen li{ gap:13px; padding:6px 0; font-size:.86rem; color:rgba(242,246,241,.6); }
.fahrplan-karte .stationen .dot{
  width:11px; height:11px; border-radius:50%; border:0; background:var(--tanne-2);
  box-shadow:0 0 0 3px var(--tanne); font-size:0;
}
.fahrplan-karte .stationen .dot::before{ display:none; }
.fahrplan-karte .stationen li.done .dot{ background:var(--gruen-hell); }
.fahrplan-karte .stationen li.now .dot{
  background:var(--tanne); border:1.5px solid var(--gruen-hell);
  box-shadow:0 0 0 3px var(--tanne), 0 0 12px rgba(143,187,160,.6);
}
.fahrplan-karte .stationen li.now{ color:var(--text-hell); font-weight:500; }

/* Danke-Seite: Premium-Erfolgs-Haken (statt Toy-Tacho), zeichnet sich per CSS */
.danke-mark{ display:flex; justify-content:center; margin-bottom:6px; }
.danke-mark svg{ width:88px; height:88px; }
.dm-arc{ stroke-dasharray:276.5; stroke-dashoffset:276.5; animation:dmRing 1s var(--ease) .1s forwards; }
.dm-check{ stroke-dasharray:60; stroke-dashoffset:60; animation:dmCheck .5s var(--ease) .9s forwards; }
@keyframes dmRing{ to{ stroke-dashoffset:0; } }
@keyframes dmCheck{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .dm-arc, .dm-check{ animation:none; stroke-dashoffset:0; } }

/* ============================================================
   v17b — USP-Block richtig gemacht (toter Fleck raus, Mini-Visuals neu)
   ============================================================ */
/* Vogel-Simulator-Karte: echtes Simulator-Foto schliesst die Karte ab (fixe Hoehe, damit
   die Spalte ~gleich hoch wie die 2 rechten Karten ist -> weder toter Fleck noch Streckung) */
.usp-grid{ align-items:start; }
.usp-feat{ display:flex; flex-direction:column; }
.uf-foto{ height:210px; margin-top:16px; width:100%; object-fit:cover; border:1px solid rgba(255,255,255,.09); }
/* DriversCam: premium Handy-Mockup (echter Body + Screen) statt Wireframe */
.usp-karte .uv-cam{ height:132px; width:100%; margin:0 auto 16px; }
/* Kompaktkurs: refined Tages-Chips auf einer Reihe, letzter = erledigt */
.uv-cal{ display:flex; gap:7px; align-items:stretch; }
.uv-cal span{
  flex:1; aspect-ratio:1; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(143,187,160,.15), rgba(143,187,160,.05));
  border:1px solid rgba(143,187,160,.22); border-radius:9px;
  font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--gruen-hell);
}
.uv-cal .cal-done{ position:relative; background:var(--gruen-hell); border-color:var(--gruen-hell); }
.uv-cal .cal-done::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231B2621' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/56% no-repeat;
}

/* ============================================================
   v18 — Grün stark + Detail-Fixes (Ruben-Feedback)
   ============================================================ */
/* Klassen-Gruppenfotos: ganzes Fahrzeug zeigen (contain), nichts anschneiden */
.kl-gruppe > .foto{ height:200px; object-fit:contain; background:linear-gradient(160deg, var(--salbei), var(--salbei-tief)); filter:none; }
/* Für Eltern: kräftige grüne Karte (Stärke statt pale) + solide grüne Haken */
.eltern-karte{ background:linear-gradient(155deg, #CDE8D3, #B4DABF); border:1px solid #9FD0AC; }
.eltern-liste .haken{ background:var(--gruen); border:0; }
.eltern-liste .haken::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 5.66L5.0 8.06L9.4 3.06' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* DriversCam: cleanes Handy + grüner Play (kein busy-gecodetes Kartenchaos mehr) */
.usp-karte .uv-cam{ height:118px; width:100%; margin:0 auto 18px; }
/* USP Vogel-Simulator-Karte: Foto etwas kleiner -> Container nicht zu gross */
.uf-foto{ height:180px; }
/* Reorder-Anpassung: Fahrplan braucht kein Overlap-Top-Padding mehr (nichts ragt rein);
   Klassen faengt jetzt die Simulator-Karten-Ueberlappung ab -> etwas mehr Luft oben */
.fahrplan{ padding-top:var(--pad-section); }
.klassen{ padding-top:calc(var(--pad-section) + 44px); }
/* Link von der Featured-PKW-Karte zur Unterseite */
.klf-link{ display:inline-block; align-self:flex-start; margin-top:16px; font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--gruen-hell); text-decoration:none; border-bottom:2px solid var(--gruen-hell); padding-bottom:2px; }
.klf-link:hover{ color:#fff; border-color:#fff; }

/* ============================================================
   Klassen-Unterseiten — klar/eckig/professionell, RESTRAINT
   NUR 3 Töne: Off-White + Dunkel + EIN Grün als Akzent (sparsam).
   Kein Salbei-Tint, keine Grün-Ränder, keine 2. Grün-Nuance.
   Rhythmus kommt aus Layout-Wechsel + dem dunklen Band – nicht aus Farbe.
   ============================================================ */
.klasse{ background:var(--canvas); --line:rgba(42,50,48,.14); }
.klasse .container{ max-width:1100px; }
.klasse section{ padding:clamp(56px,6.5vw,100px) 0; }
.klasse section:not(.k-dark) + section:not(.k-dark){ border-top:1px solid var(--line); }
.k-eyebrow{ font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen); display:block; }
.klasse h1{ font-family:var(--font-head); font-weight:700; font-size:clamp(2.3rem,4.4vw,3.6rem); letter-spacing:-.02em; line-height:1.06; margin:14px 0 16px; }
.klasse h1 em, .klasse h2 em{ font-style:normal; color:var(--gruen); }
.klasse h2{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.01em; margin-bottom:10px; }
.klasse .k-lead{ font-size:1.08rem; color:rgba(42,50,48,.9); max-width:60ch; }
.klasse .btn{ border-radius:2px; }
.k-crumb{ font-size:.85rem; color:rgba(42,50,48,.6); margin-bottom:4px; }
.k-crumb a{ color:rgba(42,50,48,.6); text-decoration:none; }
.k-crumb a:hover{ color:var(--gruen); }
.k-head{ max-width:640px; margin-bottom:38px; }

/* Dunkles Band (der EINE dunkle Ton, kein grüner Tint) */
.k-dark{ background:var(--tanne); background-image:var(--grain); background-size:120px 120px; background-blend-mode:soft-light; color:var(--text-hell); }
.k-dark .k-eyebrow{ color:var(--gruen); }
.k-dark h2{ color:var(--text-hell); }
.k-dark h2 em{ color:var(--gruen); }
.k-dark .k-lead{ color:rgba(242,246,241,.82); }

/* Hero */
.k-hero{ padding-bottom:clamp(48px,5vw,72px); }
.k-hero .container{ display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center; }
.k-hero .sub{ font-size:1.12rem; color:rgba(42,50,48,.9); max-width:44ch; margin:0 0 28px; }
.k-hero-foto{ width:100%; height:400px; object-fit:cover; border:1px solid var(--line); filter:saturate(.96); }

/* STANDOUT: Fakten-Stat-Band — grosse WEISSE Zahlen (kein Grün-Overkill) */
.k-stats-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.15); }
.k-stat{ padding:34px 30px 30px; border-bottom:1px solid rgba(255,255,255,.15); }
.k-stat + .k-stat{ border-left:1px solid rgba(255,255,255,.15); }
.k-stat b{ font-family:var(--font-head); font-weight:700; font-size:clamp(3.2rem,5.5vw,4.6rem); line-height:.95; letter-spacing:-.03em; color:var(--text-hell); display:block; }
.k-stat span{ font-family:var(--font-head); font-weight:600; font-size:1.04rem; color:var(--text-hell); display:block; margin:14px 0 4px; }
.k-stat small{ font-size:.9rem; color:rgba(242,246,241,.62); line-height:1.4; }
.k-stats-foot{ margin-top:26px; color:rgba(242,246,241,.78); font-size:1rem; max-width:72ch; }

/* Was du fahren darfst — 4-Spalten-Karten (neutrale Ränder) */
.k-fahren{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.k-fahren li{ background:#fff; border:1px solid var(--line); padding:26px 22px; }
.k-fahren .num{ font-family:var(--font-head); font-weight:700; color:rgba(42,50,48,.35); font-size:.86rem; letter-spacing:.08em; }
.k-fahren b{ font-family:var(--font-head); font-weight:600; font-size:1.08rem; display:block; margin:12px 0 6px; }
.k-fahren span{ color:rgba(42,50,48,.85); font-size:.94rem; line-height:1.5; }

/* Was du mitbringst — 4 Karten, grüner Haken (der Akzent) */
.k-bring{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.k-bring li{ background:#fff; border:1px solid var(--line); padding:24px 22px; }
.k-bring .hk{ width:34px; height:34px; background:var(--gruen); display:grid; place-items:center; margin-bottom:16px; }
.k-bring .hk::before{ content:""; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 5.66L5.0 8.06L9.4 3.06' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.k-bring b{ font-family:var(--font-head); font-weight:600; font-size:1.02rem; display:block; }
.k-bring small{ display:block; color:rgba(42,50,48,.62); font-size:.88rem; margin-top:5px; line-height:1.45; }

/* Ablauf — horizontale 5 Schritte, dunkle Nummern (neutral, kein Grün) */
.k-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:6px; }
.k-step{ position:relative; }
.k-step .n{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:#fff; background:var(--tanne); width:46px; height:46px; display:grid; place-items:center; margin-bottom:18px; position:relative; z-index:1; }
.k-step:not(:last-child)::after{ content:""; position:absolute; top:22px; left:58px; right:-8px; height:2px; background:var(--line); }
.k-step h3{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; margin-bottom:6px; }
.k-step p{ color:rgba(42,50,48,.82); font-size:.92rem; line-height:1.5; }

/* Varianten B / B197 / BF17 (neutrale Ränder, grünes Tag als einziger Akzent) */
.k-var-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.k-var{ background:#fff; border:1px solid var(--line); padding:30px 26px; }
.k-var .tag{ font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.06em; color:var(--gruen); }
.k-var h3{ font-family:var(--font-head); font-weight:600; font-size:1.25rem; margin:8px 0 10px; }
.k-var p{ color:rgba(42,50,48,.88); font-size:.96rem; line-height:1.55; }

/* CTA-Band (dunkel) */
.k-cta{ text-align:center; }
.k-cta h2{ margin-bottom:12px; }
.k-cta p{ color:rgba(242,246,241,.82); max-width:46ch; margin:0 auto 26px; }

@media (max-width:920px){
  .k-fahren, .k-bring{ grid-template-columns:1fr 1fr; }
  .k-steps{ grid-template-columns:1fr 1fr; gap:26px 20px; }
  .k-step:not(:last-child)::after{ display:none; }
  .k-var-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .k-hero .container{ grid-template-columns:1fr; gap:32px; }
  .k-hero-foto{ height:280px; order:-1; }
  .k-stats-row{ grid-template-columns:1fr; }
  .k-stat + .k-stat{ border-left:0; }
}
@media (max-width:560px){
  .k-fahren, .k-bring, .k-steps{ grid-template-columns:1fr; }
}