/* Web/seite/kern.css - Design der eigenen KERN-Website (Farben: Gruen #207162, Dunkelgruen #103932, Salbei #689d97, Mint #7fb174)
   2. Runde (23.10.2026): Sprechblase als Markenzeichen, Seitenkoepfe mit Auto-Zeichnungen, Karten mit Symbolen, Rechner, ASF, Team, FAQ neu. */
:root { --gruen:#207162; --dunkel:#103932; --salbei:#689d97; --mint:#7fb174; --hell:#f2f6f4; --creme:#fbfaf3; --text:#1f2a28; --grau:#5d6b68; --linie:#e2e8e6; --gelb:#f6c945; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:#fff; line-height:1.6; font-size:17px; }
a { color:var(--gruen); }
img { max-width:100%; height:auto; }
.innen { max-width:1180px; margin:0 auto; padding:0 20px; }
.klein { font-size:.85rem; color:var(--grau); }
.mitte { text-align:center; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
h1, h2, h3 { line-height:1.25; color:var(--dunkel); }
h2 { font-size:1.9rem; margin:2.5rem 0 1.2rem; }
.ic { width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; flex-shrink:0; }
.kicon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, var(--gruen), var(--salbei)); color:#fff; }
.kicon .ic { width:26px; height:26px; }

/* Leiste ganz oben */
.leiste { background:var(--dunkel); color:#cfe3dd; font-size:.82rem; }
.leiste .innen { display:flex; gap:1.4rem; align-items:center; height:34px; }
.leiste a { color:#fff; text-decoration:none; }
.leiste .fs-link { margin-left:auto; background:rgba(255,255,255,.12); padding:.15rem .7rem; border-radius:999px; }

/* Kopf */
.kopf { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--linie); }
.kopf .innen { display:flex; align-items:center; gap:1rem; height:72px; }
.logo img { height:46px; width:auto; display:block; }
.kopf nav { margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.kopf nav ul { list-style:none; margin:0; padding:0; display:flex; gap:.1rem; }
.kopf nav li { position:relative; }
.kopf nav a { display:block; white-space:nowrap; padding:.5rem .7rem; color:var(--text); text-decoration:none; font-weight:600; font-size:.94rem; border-radius:10px; }
.kopf nav li.aktiv > a, .kopf nav a:hover { color:var(--gruen); background:var(--hell); }
.kopf nav li ul { display:none; position:absolute; top:100%; left:0; min-width:240px; background:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.14); padding:.4rem; flex-direction:column; }
.kopf nav li:hover > ul, .kopf nav li:focus-within > ul { display:flex; }
.kopf nav li ul a { font-weight:500; }
.nur-handy { display:none; }
.burger { display:none; margin-left:auto; font-size:1.8rem; cursor:pointer; }

/* Knoepfe */
.knopf { display:inline-flex; align-items:center; gap:.45rem; background:var(--gruen); color:#fff; padding:.8rem 1.4rem; border-radius:999px; font-weight:700; text-decoration:none; border:0; cursor:pointer; font-size:1rem; font-family:inherit; transition:transform .15s, background .15s; }
.knopf:hover { background:var(--dunkel); transform:translateY(-1px); color:#fff; }
.knopf.hell { background:#fff; color:var(--gruen); box-shadow:inset 0 0 0 2px var(--gruen); }
.knopf.hell:hover { background:var(--hell); color:var(--dunkel); }
.knopf.weiss { background:#fff; color:var(--dunkel); }
.knopf.weiss:hover { background:var(--creme); color:var(--dunkel); }
.knopf.gelb { background:var(--gelb); color:var(--dunkel); font-size:1.1rem; padding:1rem 1.8rem; }
.knopf.gelb:hover { background:#ffd966; color:var(--dunkel); }
.kopf .klein-knopf { padding:.55rem 1.1rem; color:#fff !important; background:var(--gruen) !important; }
.knoepfe { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.pille { display:inline-block; background:rgba(255,255,255,.16); color:#fff; border-radius:999px; padding:.2rem .8rem; font-size:.85rem; font-weight:600; }

/* Startseite: Video mit der Sprechblase */
.held { position:relative; min-height:min(72vh, 720px); padding:3rem 0 5rem; display:flex; align-items:center; overflow:hidden; color:#fff; }
.held video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.held::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,57,50,.88) 0%, rgba(16,57,50,.5) 55%, rgba(16,57,50,.12) 100%); }
.held-text { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 20px; width:100%; }
.held-text .warte { right:20px; bottom:0; }
.held-blase { width:min(400px, 86vw); display:block; transform:rotate(-4deg); filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); animation:schweben 5s ease-in-out infinite; margin:0 0 .6rem -10px; }
.held p { font-size:1.25rem; max-width:34rem; opacity:.96; margin:.4rem 0 0; }
.warte { position:absolute; z-index:3; display:flex; gap:.8rem; align-items:center; background:#fff; color:var(--dunkel); padding:1rem 1.3rem; border-radius:20px; max-width:300px; box-shadow:0 14px 36px rgba(0,0,0,.25); }
.warte strong { color:var(--gruen); font-size:1.15rem; }
.warte .kicon { width:44px; height:44px; background:var(--gelb); color:var(--dunkel); }
@keyframes schweben { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-10px) rotate(-2deg); } }

/* Vorteile */
.vorteile { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; margin-top:-60px; position:relative; z-index:5; }
.vorteile > div { background:#fff; border-radius:var(--radius); padding:1.5rem; box-shadow:0 10px 30px rgba(16,57,50,.12); }
.vorteile h3 { margin:.7rem 0 .3rem; }
.vorteile p { margin:0; color:var(--grau); }

/* Klassen-Karten */
.klassen { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; margin:1rem 0 2rem; }
.klassenkarte { display:flex; flex-direction:column; gap:.2rem; padding:1.2rem; border-radius:var(--radius); background:var(--hell); text-decoration:none; color:var(--text); border:2px solid transparent; transition:all .15s; }
.klassenkarte:hover { border-color:var(--gruen); background:#fff; transform:translateY(-3px); box-shadow:0 12px 26px rgba(16,57,50,.14); }
.kcode { font-size:1.7rem; font-weight:800; color:var(--gruen); }
.ktitel { font-weight:700; }
.ktext { font-size:.9rem; color:var(--grau); }
.kpreis { font-size:.85rem; color:var(--grau); }
.kfuss { display:flex; flex-direction:column; gap:.1rem; margin-top:auto; padding-top:.6rem; font-size:.8rem; color:var(--salbei); font-weight:700; }
.kgruppe { margin-bottom:1rem; }
.kg-titel { display:flex; align-items:center; gap:.5rem; font-size:1.4rem; margin:1.5rem 0 .2rem; }
.kg-titel .ic { color:var(--gruen); width:1.4em; height:1.4em; }

/* Auto-Band (Startseite) */
.band { padding:1.5rem 0 0; }
.band img { width:100%; max-width:1000px; display:block; margin:0 auto; }

/* ASF-Teaser */
.asf-teaser { background:linear-gradient(120deg, var(--dunkel), var(--gruen)); color:#fff; padding:2.4rem 0; margin:2rem 0; }
.asf-teaser .innen { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.asf-teaser h2 { color:#fff; margin:.6rem 0 .4rem; font-size:1.8rem; }
.asf-teaser .gross { color:var(--gelb); font-size:2.4rem; white-space:nowrap; }
.asf-teaser p { margin:0; opacity:.9; }

/* Team */
.team { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.4rem; margin:1rem 0; }
.person { text-align:center; background:#fff; border-radius:var(--radius); padding:1.4rem 1rem; box-shadow:0 8px 24px rgba(16,57,50,.09); }
.person img { width:132px; height:132px; border-radius:50%; object-fit:cover; border:5px solid var(--hell); box-shadow:0 0 0 3px var(--salbei); }
.person h3 { margin:.7rem 0 .1rem; }
.rolle { font-size:.85rem; color:var(--salbei); font-weight:700; }
.person details { margin-top:.6rem; text-align:left; font-size:.9rem; }
.person summary { cursor:pointer; color:var(--gruen); font-weight:600; text-align:center; }
.team-start .team { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }


/* Aktuelles (kompakt) */
.aktuelles { font-size:1.4rem; margin-top:2rem; }
.news-liste { display:grid; gap:.6rem; }
.news-kurz { display:flex; gap:.9rem; align-items:center; text-decoration:none; color:var(--text); background:var(--hell); border-radius:14px; padding:.55rem; }
.news-kurz:hover { background:#e6efeb; }
.news-kurz img, .news-kurz .kicon { width:64px; height:64px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.news-kurz strong { display:block; font-size:.95rem; line-height:1.3; }
.ndatum { font-size:.75rem; color:var(--salbei); font-weight:700; }

/* Zwei Spalten: FAQ-Auszug + Anmeldung */
.zwei { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; padding-bottom:3rem; }

/* Seitenkopf der Unterseiten */
.band-kopf { background:radial-gradient(circle at 85% 30%, #2d8a78 0%, var(--gruen) 35%, var(--dunkel) 100%); color:#fff; overflow:hidden; }
.band-kopf .innen { display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; min-height:330px; padding-top:2rem; padding-bottom:2rem; }
.band-kopf h1 { color:#fff; font-size:clamp(2rem, 4.4vw, 3.1rem); margin:0 0 .6rem; }
.bk-unter { font-size:1.2rem; opacity:.92; max-width:36rem; margin:0; }
.bk-bild { position:relative; text-align:center; }
.bk-bild > img:first-child { width:100%; max-width:470px; filter:drop-shadow(0 20px 26px rgba(0,0,0,.35)); }
.bk-bild > img.bk-blase-gross { width:auto; max-width:min(320px, 90%); max-height:210px; transform:rotate(-5deg); filter:drop-shadow(0 16px 24px rgba(0,0,0,.35)); animation:schweben 5s ease-in-out infinite; }
.band-kopf .fakten { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.band-kopf .fakten span { background:rgba(255,255,255,.14); border-radius:999px; padding:.3rem .8rem; font-size:.9rem; display:inline-flex; gap:.4rem; align-items:center; }
.band-kopf.asf { background:radial-gradient(circle at 80% 30%, #2d8a78 0%, var(--dunkel) 70%); }

/* Inhalt der Unterseiten */
.abschnitt { padding:2.6rem 0; }
.abschnitt:nth-of-type(even) { background:var(--hell); }
.abschnitt h2 { margin-top:0; }
.abschnitt .innen > p, .abschnitt .innen > ul, .abschnitt .innen > ol:not(.zeitleiste), .abschnitt .innen > h3, .abschnitt .innen > h4, .abschnitt .innen > .einzel { max-width:820px; }
.abschnitt ul { padding-left:0; list-style:none; }
.abschnitt ul li { position:relative; padding-left:1.8rem; margin:.35rem 0; }
.abschnitt ul li::before { content:""; position:absolute; left:0; top:.35em; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat; }
.abschnitt ul ul li::before { background:var(--salbei); }
p.unter { font-weight:700; color:var(--gruen); font-size:1.15rem; margin:1.6rem 0 .3rem; }
.einzel { margin:1.2rem 0; }
.einzel .karte { box-shadow:none; background:transparent; padding:0; border:0; }
.einzel .karte .kicon { float:left; margin:0 1rem .4rem 0; }
.einzel .karte h3 { margin-top:.6rem; }
.karten { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1.2rem; margin:1.2rem 0; }
.karten.n2 { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
.karte { position:relative; background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:0 8px 24px rgba(16,57,50,.08); border:1px solid var(--linie); }
.abschnitt:nth-of-type(even) .karte { border-color:transparent; }
.karte h3 { margin:.8rem 0 .35rem; font-size:1.15rem; }
.karte p { margin:.3rem 0; color:#3c4a47; }
.karte p.unter { font-size:.95rem; margin:.1rem 0 .3rem; color:var(--salbei); }
.karte.mit-link { transition:transform .15s, box-shadow .15s; }
.karte.mit-link:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,57,50,.15); }
.karte .mehr { display:inline-block; margin-top:.5rem; font-weight:700; text-decoration:none; color:var(--gruen); }
.karte .mehr::after { content:""; position:absolute; inset:0; }
a.karte { text-decoration:none; color:inherit; display:block; }
figure.foto { float:right; width:min(380px, 38%); margin:.3rem 0 1rem 2rem; }
figure.foto img { width:100%; max-height:260px; object-fit:cover; border-radius:var(--radius); box-shadow:0 12px 30px rgba(0,0,0,.12); transform:rotate(1.5deg); }
.abschnitt .innen::after { content:""; display:table; clear:both; }
.einzel.breit { max-width:820px; }
.seite table { border-collapse:collapse; width:100%; margin:1rem 0; }
.seite td, .seite th { border-bottom:1px solid var(--linie); padding:.5rem .4rem; text-align:left; vertical-align:top; }
.preisbox { background:#fff; border-radius:var(--radius); padding:1.4rem 1.6rem; margin:1.5rem 0; border:2px solid var(--gruen); max-width:820px; box-shadow:0 10px 30px rgba(16,57,50,.1); }
.preisbox h3 { margin-top:0; display:flex; gap:.5rem; align-items:center; }
table.preise td.preis, .r-tabelle td.preis { text-align:right; font-weight:700; white-space:nowrap; color:var(--dunkel); }

/* Zeitleiste (Ablauf) */
.zeitleiste { list-style:none; padding:0; margin:1.5rem 0; counter-reset:schritt; position:relative; max-width:900px; }
.zeitleiste::before { content:""; position:absolute; left:27px; top:10px; bottom:10px; width:3px; background:linear-gradient(var(--gruen), var(--mint)); border-radius:3px; }
.zeitleiste > li { counter-increment:schritt; position:relative; padding:0 0 1.6rem 78px; }
.zeitleiste > li::before { content:counter(schritt); position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%; background:#fff; border:3px solid var(--gruen); color:var(--gruen); font-weight:800; font-size:1.4rem; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(16,57,50,.15); }
.zeitleiste h4 { margin:.7rem 0 .3rem; font-size:1.2rem; color:var(--dunkel); }
.zeitleiste p { margin:.2rem 0; }
.app-bilder { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin:2rem 0 1rem; }
.app-bilder img { width:220px; border-radius:28px; border:8px solid #1b1f1e; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.app-bilder img:nth-child(2) { transform:translateY(-18px); }

/* Abschluss (Handlungsaufforderung) */
.cta { background:linear-gradient(120deg, var(--gruen), var(--salbei)); color:#fff; padding:2.4rem 0; }
.cta .innen { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cta h2 { color:#fff; margin:0 0 .3rem; }
.cta p { margin:0; opacity:.92; }
.cta .knoepfe { margin-top:0; }
.cta .knopf { background:var(--dunkel); } .cta .knopf.weiss { background:#fff; color:var(--dunkel); }

/* Preisrechner */
.rechner { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:start; margin:1rem 0; scroll-margin-top:110px; }
.r-schritt { display:flex; align-items:center; gap:.6rem; margin:1.4rem 0 .6rem; font-size:1.1rem; }
.r-schritt:first-child { margin-top:0; }
.r-nr { width:32px; height:32px; border-radius:50%; background:var(--gruen); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { border:2px solid var(--linie); background:#fff; border-radius:999px; padding:.45rem .95rem; font-weight:700; font-size:.95rem; cursor:pointer; color:var(--dunkel); font-family:inherit; }
.chip:hover { border-color:var(--salbei); }
.chip.an { background:var(--gruen); color:#fff; border-color:var(--gruen); }
.chip span { font-weight:500; opacity:.7; font-size:.8rem; }
.r-arten { display:grid; gap:.5rem; }
.r-art { text-align:left; border:2px solid var(--linie); background:#fff; border-radius:14px; padding:.75rem 1rem; font-size:.97rem; cursor:pointer; font-family:inherit; color:var(--text); }
.r-art.an { border-color:var(--gruen); background:var(--hell); font-weight:700; }
.r-ust { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.r-ust input[type=range] { flex:1; accent-color:var(--gruen); min-width:0; width:100%; height:28px; }
.r-ust output { font-size:2rem; font-weight:800; color:var(--gruen); min-width:3ch; text-align:center; }
.r-ust p { flex-basis:100%; margin:0; }
.r-ergebnis { background:#fff; border-radius:22px; padding:1.6rem; box-shadow:0 16px 40px rgba(16,57,50,.14); border:1px solid var(--linie); position:sticky; top:96px; }
.r-ergebnis h3 { margin-top:0; }
.r-tabelle { width:100%; border-collapse:collapse; font-size:.95rem; }
.r-tabelle td { border-bottom:1px solid var(--linie); padding:.5rem .2rem; vertical-align:top; }
.r-summe { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; background:var(--hell); border-radius:14px; padding:.9rem 1rem; margin:1rem 0 .5rem; }
.r-summe strong { font-size:1.8rem; color:var(--gruen); white-space:nowrap; }
.r-mail { margin-top:1rem; border-top:1px solid var(--linie); padding-top:1rem; }
.r-mail label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.7rem; }
.r-mail input { width:100%; margin-top:.25rem; padding:.65rem .8rem; border-radius:10px; border:1px solid #cbd6d2; font-size:16px; font-family:inherit; }
.r-mail .reihe { display:flex; gap:.8rem; } .r-mail .reihe > * { flex:1; } .r-mail .reihe .schmal { flex:0 0 38%; }
.r-mail .hp, .anmeldung .hp { position:absolute; left:-9999px; }
.r-mail .meldung.gut { background:#d9f2e3; } .r-mail .meldung { background:var(--hell); }

/* ASF */
.asf-kurse { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.2rem; margin:1rem 0; }
.asf-kurs { background:#fff; border-radius:var(--radius); padding:1.3rem; box-shadow:0 10px 28px rgba(16,57,50,.1); border-top:6px solid var(--gelb); }
.asf-start { display:flex; flex-direction:column; }
.asf-start strong { font-size:1.25rem; color:var(--dunkel); }
.asf-kurs ul { margin:.8rem 0; }
.asf-kurs ul li::before { display:none; }
.asf-kurs ul li { padding-left:0; font-size:.92rem; }
.asf-kurs ul li span { display:inline-block; min-width:5.5rem; color:var(--salbei); font-weight:700; }
.asf-plaetze { background:var(--hell); border-radius:10px; padding:.5rem .8rem; font-weight:600; }
.asf-plaetze.knapp { background:#fff3cd; color:#7a5a00; }
.preis-riesig { display:inline-block; background:var(--gelb); color:var(--dunkel); font-weight:900; font-size:clamp(2.6rem, 7vw, 4.2rem); line-height:1; padding:.6rem 1.2rem; border-radius:20px; transform:rotate(-2deg); box-shadow:0 14px 30px rgba(0,0,0,.25); margin:.6rem 0 .3rem; }
.preis-riesig small { font-size:.35em; font-weight:700; display:block; margin-top:.3rem; }

/* FAQ */
.faq-layout { display:grid; grid-template-columns:300px 1fr; gap:2rem; align-items:start; }
.faq-seite { position:sticky; top:96px; display:grid; gap:1rem; }
.faq-suche { width:100%; padding:.9rem 1.1rem; border:2px solid var(--gruen); border-radius:14px; font-size:16px; font-family:inherit; }
.faq-themen { flex-direction:column; align-items:stretch; }
.faq-themen .chip { text-align:left; display:flex; justify-content:space-between; }
.faq-hilfe { background:var(--dunkel); color:#fff; border-radius:var(--radius); padding:1.2rem; }
.faq-hilfe p { margin:.3rem 0 .8rem; opacity:.9; font-size:.92rem; }
.faq-hilfe .knopf { background:#25d366; }
.faq-kat { font-size:1.35rem; margin:0 0 .8rem; display:flex; align-items:center; gap:.5rem; }
.faq-kat .ic { color:var(--gruen); }
.faq-gruppe { margin-bottom:2rem; }
details.faq { background:#fff; border:1px solid var(--linie); border-radius:14px; margin-bottom:.6rem; transition:box-shadow .15s; }
details.faq summary { cursor:pointer; padding:1rem 2.8rem 1rem 1.1rem; font-weight:700; list-style:none; position:relative; display:flex; gap:.8rem; align-items:baseline; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:"+"; position:absolute; right:1.1rem; top:.7rem; font-size:1.5rem; color:var(--gruen); }
details.faq[open] summary::after { content:"–"; }
details.faq[open] { border-color:var(--salbei); box-shadow:0 8px 22px rgba(16,57,50,.1); }
.fnr { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--hell); color:var(--gruen); font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; }
.faq-antwort { padding:0 1.2rem 1rem 3.1rem; }
.faq-antwort ul { padding-left:0; list-style:none; }
.faq-antwort ul li { margin:.4rem 0; padding-left:1.1rem; position:relative; }
.abschnitt .faq-antwort ul li::before, .faq-antwort ul li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--gruen); }
.zwei details.faq .faq-antwort { padding-left:1.2rem; }

/* Kontakt */
.standorte-karten { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin:1rem 0 2rem; }
.standort { background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:0 10px 28px rgba(16,57,50,.1); }
.standort h3 { margin:.8rem 0 .3rem; font-size:1.3rem; }
.standort .zeiten { font-size:.92rem; color:var(--grau); display:flex; gap:.4rem; align-items:center; }
.standort .knoepfe { margin-top:.8rem; }
.standort .knopf { padding:.6rem 1rem; font-size:.92rem; }
.standort.wa { background:var(--dunkel); color:#fff; }
.standort.wa h3 { color:#fff; } .standort.wa .kicon { background:#25d366; } .standort.wa .knopf { background:#25d366; } .standort.wa .knopf.hell { background:#fff; color:var(--dunkel); box-shadow:none; }
.kontakt-zwei { display:grid; grid-template-columns:.8fr 1.2fr; gap:2.5rem; align-items:center; }
.buero-foto { position:relative; text-align:center; }
.buero-foto img { width:min(340px, 80vw); aspect-ratio:1; object-fit:cover; border-radius:50%; border:10px solid #fff; box-shadow:0 0 0 4px var(--salbei), 0 20px 40px rgba(0,0,0,.18); }
.foto-blase { position:absolute; top:2%; right:0; background:#fff; border:3px solid #111; border-radius:50% / 45%; padding:1rem 1.2rem; font-weight:800; font-size:1rem; transform:rotate(-6deg); box-shadow:0 10px 20px rgba(0,0,0,.18); color:#111; line-height:1.3; }
.foto-blase::after { content:""; position:absolute; left:22%; bottom:-16px; border:12px solid transparent; border-top:16px solid #111; border-bottom:0; transform:rotate(18deg); }

/* Formulare (Voranmeldung, ASF, Kontakt) */
.anmeldung { background:var(--dunkel); color:#fff; border-radius:24px; padding:1.8rem; position:relative; }
.anmeldung h2 { color:#fff; margin-top:0; font-size:1.6rem; }
.anmeldung .klein { color:#cfe3dd; }
.anmeldung a { color:#bfe9d9; }
.anmeldung label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.8rem; }
.anmeldung input, .anmeldung select, .anmeldung textarea { width:100%; margin-top:.25rem; padding:.7rem .8rem; border-radius:10px; border:0; font-size:16px; font-family:inherit; }
.anmeldung .reihe { display:flex; gap:.8rem; } .anmeldung .reihe > * { flex:1; } .anmeldung .reihe .schmal { flex:0 0 38%; }
.anmeldung label.check { display:flex; gap:.5rem; align-items:flex-start; font-weight:400; }
.anmeldung label.check input { width:auto; margin-top:.3rem; }
.anmeldung .knopf { width:100%; justify-content:center; background:var(--mint); font-size:1.05rem; margin-top:.4rem; }
.anmeldung .knopf:hover { background:#9aceb8; color:var(--dunkel); }
.anmeldung.asf .knopf { background:var(--gelb); color:var(--dunkel); }
.meldung { margin-top:.8rem; padding:.7rem .9rem; border-radius:10px; background:rgba(255,255,255,.15); }
.meldung.gut { background:#d9f2e3; color:#0d4d2c; } .meldung.schlecht { background:#fde2e0; color:#8a1c14; }
#voranmeldung, #reservieren { scroll-margin-top:110px; max-width:760px; }
.abschnitt #voranmeldung, .abschnitt #reservieren { margin:1rem 0; }

/* Fuss */
.fuss { background:var(--dunkel); color:#d8e6e2; padding:1.5rem 0 1.5rem; position:relative; }
.fuss a { color:#fff; }
.fuss-marke { position:relative; text-align:center; margin:0 auto 1.5rem; max-width:900px; padding-top:70px; }
.fuss .autos { display:block; width:100%; opacity:.95; }
.fuss-blase { position:absolute; z-index:2; width:min(190px, 34vw); left:0; top:-6px; transform:rotate(-8deg); }
.standorte { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; font-size:.95rem; }
.standorte .klein { color:#a9c4bd; }
.fuss-links { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; font-size:.85rem; border-top:1px solid rgba(255,255,255,.15); padding-top:1rem; margin-top:1.5rem; }
.fuss-links span { color:#8fb0a8; }

/* Einblenden */
.einblenden { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.einblenden.da { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .einblenden { opacity:1; transform:none; } .held-blase { animation:none; } }

/* Tablet / Handy */
@media (max-width: 1100px) {
  .burger { display:block; }
  .kopf nav { display:none; position:absolute; top:72px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:1rem 20px 1.4rem; box-shadow:0 12px 24px rgba(0,0,0,.12); max-height:calc(100vh - 72px); overflow:auto; }
  #menu-auf:checked ~ nav { display:flex; }
  .kopf nav ul { flex-direction:column; }
  .kopf nav li ul { display:flex; position:static; box-shadow:none; padding:0 0 0 1rem; }
  .nur-handy { display:block; }
  .rechner, .faq-layout { grid-template-columns:1fr; }
  .r-ergebnis, .faq-seite { position:static; }
  .faq-themen { flex-direction:row; }
  .standorte-karten { grid-template-columns:1fr 1fr; }
}
@media (max-width: 800px) {
  .leiste span { display:none; }
  .vorteile, .zwei, .standorte, .standorte-karten, .kontakt-zwei { grid-template-columns:1fr; }
  .vorteile { margin-top:1.5rem; }
  .held-text .warte { position:static; margin-top:1.4rem; max-width:300px; padding:.8rem 1rem; }
  .held { min-height:0; align-items:flex-start; padding:7vh 0 4.5rem; }
  .held-blase { width:min(340px, 84vw); }
  .band-kopf .innen { grid-template-columns:1fr; min-height:0; gap:1rem; }
  .bk-bild { order:-1; } .bk-bild > img:first-child { max-width:280px; } .bk-bild > img.bk-blase-gross { max-width:240px; }
  .anmeldung .reihe, .r-mail .reihe { flex-direction:column; gap:0; }
  .zeitleiste > li { padding-left:66px; } .zeitleiste > li::before { width:46px; height:46px; font-size:1.15rem; } .zeitleiste::before { left:22px; }
  figure.foto { float:none; width:100%; margin:1rem 0; }
  .app-bilder img { width:140px; border-width:6px; border-radius:20px; } .app-bilder img:nth-child(2) { transform:none; }
  h2 { font-size:1.6rem; }
  .asf-teaser .gross { font-size:2rem; }
  .faq-antwort { padding-left:1.2rem; }
  .cta .knopf { flex:1 1 auto; justify-content:center; }
}

/* Lernen: Vorschau aus dem Unterricht */
.u-bereich { margin:1.6rem 0 .2rem; color:var(--gruen); }
.u-karte .u-kuerzel { display:inline-block; background:var(--gruen); color:#fff; font-weight:800; border-radius:10px; padding:.2rem .6rem; font-size:.9rem; }
.u-karte .u-marke { float:right; background:var(--gelb); color:var(--dunkel); border-radius:999px; padding:.1rem .6rem; font-size:.75rem; font-weight:700; }
.u-karte ul { font-size:.9rem; margin:.4rem 0; }
.u-karte ul li::before { width:.9rem; height:.9rem; }
.u-zwei { display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:start; }
.u-login { background:var(--dunkel); color:#fff; border-radius:var(--radius); padding:1.5rem; }
.u-login h3 { color:#fff; margin:.8rem 0 .3rem; } .u-login p { opacity:.9; } .u-login a:not(.knopf) { color:#bfe9d9; }
.u-login .kicon { background:var(--gelb); color:var(--dunkel); }
.abschnitt h2 .ic { color:var(--gruen); }
.begriffe { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.7rem; }
.begriff { background:#fff; border-radius:14px; padding:.8rem 1rem; border-left:5px solid var(--gruen); box-shadow:0 4px 14px rgba(16,57,50,.07); }
.begriff strong { display:block; color:var(--dunkel); } .begriff span { font-size:.92rem; color:#3c4a47; }
.u-blaettern { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-top:2rem; }
@media (max-width: 800px) { .u-zwei { grid-template-columns:1fr; } }

/* Klassenseite: Preise oben rechts im Kopf */
.bk-rechts .preisbox { margin:0; color:var(--text); border:0; box-shadow:0 20px 40px rgba(0,0,0,.25); }
.bk-rechts .preisbox h3 { color:var(--dunkel); }
.bk-rechts table.preise { font-size:.92rem; width:100%; border-collapse:collapse; }
.bk-rechts table.preise td { padding:.4rem .2rem; border-bottom:1px solid var(--linie); vertical-align:top; }
.bk-rechts .preisbox .klein { font-size:.78rem; }
.band-kopf.klasse .innen { align-items:start; grid-template-columns:1fr 1fr; }
.band-kopf.klasse .bk-text { padding-top:1rem; }
@media (max-width: 800px) { .bk-rechts { order:2; } }
.zeitleiste ul { margin:.4rem 0 0; } .zeitleiste ul li { font-size:.95rem; margin:.2rem 0; }
.asf-weitere { background:#fff; border-radius:14px; padding:.8rem 1rem; box-shadow:0 4px 14px rgba(16,57,50,.07); font-size:.95rem; } .asf-weitere .ic { color:var(--gruen); }
.asf-kurse { grid-template-columns:repeat(3, 1fr); } .asf-plaetze.voll { background:#fde2e0; color:#8a1c14; } @media (max-width: 900px) { .asf-kurse { grid-template-columns:1fr; } }
/* Voranmeldung zweispaltig (Kontakt) */
.va-zwei { display:grid; grid-template-columns:.8fr 1.2fr; gap:2.5rem; align-items:center; }
.va-zwei #voranmeldung { max-width:none; }
.va-info img { width:100%; max-width:380px; display:block; margin:0 auto 1rem; filter:drop-shadow(0 16px 20px rgba(0,0,0,.18)); }
.va-schritte { counter-reset:va; list-style:none; padding:0; margin:.6rem 0 1rem; }
.va-schritte li { counter-increment:va; position:relative; padding:0 0 .9rem 2.8rem; }
.va-schritte li::before { content:counter(va); position:absolute; left:0; top:-.1rem; width:2rem; height:2rem; border-radius:50%; background:var(--gruen); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.buero-foto img { object-position:center 30%; }
@media (max-width: 800px) { .va-zwei { grid-template-columns:1fr; } }
.asf-teaser { overflow:hidden; } .asf-teaser .innen { flex-wrap:nowrap; } .asf-auto { width:min(380px, 34%); margin:-1.5rem 0 -2.5rem; filter:drop-shadow(0 18px 24px rgba(0,0,0,.35)); transform:rotate(-3deg); } @media (max-width: 800px) { .asf-teaser .innen { flex-wrap:wrap; } .asf-auto { width:70%; margin:0 auto -1rem; } }
.asf-plaetze { display:block; text-decoration:none; color:inherit; } a.asf-plaetze { transition:background .15s; } a.asf-plaetze:hover { background:var(--gelb); color:var(--dunkel); } a.asf-plaetze span { font-size:.85rem; font-weight:700; color:var(--gruen); }

/* Raster generell drei Spalten (Inhaber 23.10.2026) */
.karten, .karten.n4 { grid-template-columns:repeat(3, 1fr); }
@media (max-width: 1000px) { .karten, .karten.n4 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px) { .karten, .karten.n2, .karten.n4 { grid-template-columns:1fr; } }

/* Lernseiten: Grafiken, Blickfolgen, Pakete, AAA, Tipp-Kasten */
figure.grafik { margin:1.6rem 0; max-width:820px; }
figure.grafik img { width:100%; border-radius:var(--radius); box-shadow:0 12px 30px rgba(16,57,50,.12); background:#fff; }
.zwei-spalten { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin:1rem 0; }
.modul-box { background:#fff; border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:0 8px 24px rgba(16,57,50,.08); border-top:6px solid var(--gruen); }
.modul-box.a { border-top-color:#2f80ed; } .modul-box h3 { margin-top:0; }
.modul-box .etikett, .paket .etikett { display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.1rem .6rem; background:#e6f0fd; color:#1d5fb4; margin-bottom:.3rem; }
.modul-box.b .etikett, .paket .etikett.b { background:#e1f0ec; color:var(--gruen); }
.paket .etikett.c { background:#fff3cd; color:#7a5a00; }
.blickfolge { list-style:none; padding:0; margin:.6rem 0 .9rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.paket, .modul-box { counter-reset:blick; }
.abschnitt .blickfolge li, .blickfolge li { counter-increment:blick; position:relative; margin:0; padding:.55rem .85rem .55rem 4.1rem; min-height:46px; background:#fff no-repeat 2.3rem center / 22px; border-radius:14px; border:2px solid #d8e6e1; font-weight:700; color:var(--dunkel); display:flex; flex-direction:column; justify-content:center; line-height:1.25; }
.abschnitt .blickfolge li::before, .blickfolge li::before { content:counter(blick); position:absolute; left:.55rem; top:50%; transform:translateY(-50%); width:1.6rem; height:1.6rem; border-radius:50%; background:var(--gruen); color:#fff; font-size:.85rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.blickfolge li small { font-weight:500; color:var(--grau); font-size:.82rem; }
.blickfolge.modul-a li { border-color:#bcd6f7; } .blickfolge.modul-a li::before { background:#2f80ed; }
.blickfolge.modul-c li { border-color:#f1dc94; } .blickfolge.modul-c li::before { background:#d4a514; }
.blickfolge li.b-innen { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23207162' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='8' width='18' height='7' rx='3'/%3E%3Cpath d='M12 4v4'/%3E%3C/svg%3E"); }
.blickfolge li.b-aussen { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23207162' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9c0-2 2-3 4-3h7c2 0 3 2 3 4v2c0 2-1 4-3 4h-7c-2 0-4-1-4-3z'/%3E%3Cpath d='M2 11h4'/%3E%3C/svg%3E"); }
.blickfolge li.b-blinker { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a514' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h11M10 7l5 5-5 5'/%3E%3Cpath d='M19 6l2-2M19.5 12h2.5M19 18l2 2'/%3E%3C/svg%3E"); }
.blickfolge li.b-schulter { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e53935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3'/%3E%3Cpath d='M4 21c0-4 3-7 6-7 2 0 4 1 5 3'/%3E%3Cpath d='M15 7h6M18.5 4.5 21 7l-2.5 2.5'/%3E%3C/svg%3E"); }
.blickfolge li.b-seite { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23207162' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.jetzt { display:inline-flex; align-items:center; gap:.5rem; background:var(--dunkel); color:#fff !important; font-weight:800; letter-spacing:.03em; border-radius:999px; padding:.45rem 1.1rem .45rem .9rem; margin:.2rem 0 .9rem; }
.jetzt::before { content:"➜"; color:var(--gelb); font-size:1.1rem; }
.paket { background:#fff; border-radius:var(--radius); padding:1.3rem 1.5rem 1rem; margin:1.2rem 0; box-shadow:0 10px 28px rgba(16,57,50,.09); max-width:none !important; }
.paket-kopf { display:flex; gap:1rem; align-items:center; margin-bottom:.6rem; }
.paket-nr { flex-shrink:0; width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg, var(--gruen), var(--salbei)); color:#fff; font-weight:900; font-size:1.25rem; display:flex; align-items:center; justify-content:center; }
.paket-kopf strong { display:block; font-size:1.25rem; color:var(--dunkel); }
.paket-kopf small { color:var(--grau); font-size:.92rem; }
.paket .schritt-text { font-size:.92rem; color:var(--grau); font-style:italic; margin:.2rem 0 .4rem; }
.tipp { background:#fff8e1; border-left:6px solid var(--gelb); border-radius:14px; padding:1rem 1.2rem; margin:1.4rem 0; max-width:820px; }
.tipp.tu { background:#e8f3f0; border-left-color:var(--gruen); }
.tipp > strong:first-child { display:block; margin-bottom:.2rem; color:var(--dunkel); }
.tipp p { margin:.2rem 0; }
.aaa { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin:1.2rem 0; }
.aaa-karte { background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:0 10px 28px rgba(16,57,50,.09); position:relative; overflow:hidden; }
.aaa-a { position:absolute; right:-6px; top:-28px; font-size:7rem; font-weight:900; color:#e1f0ec; line-height:1; }
.aaa-karte h3 { position:relative; margin:.2rem 0 0; font-size:1.4rem; }
.aaa-karte .frage { position:relative; font-weight:800; color:var(--gruen); margin:.1rem 0 .6rem; }
.aaa-karte .beispiel { background:var(--hell); border-radius:10px; padding:.5rem .7rem; margin:.5rem 0; font-size:.93rem; }
.aaa-karte.alter { border-top:6px solid #e53935; } .aaa-karte.absicht { border-top:6px solid var(--gruen); } .aaa-karte.aufmerksam { border-top:6px solid #2f80ed; }
.ampel li { padding-left:1.6rem !important; } .ampel li::before { background:none !important; width:.8rem !important; height:.8rem !important; top:.45em !important; border-radius:50%; }
.ampel li.rot::before { background:#e53935 !important; } .ampel li.gelb::before { background:#f6c945 !important; } .ampel li.gruen::before { background:#2e9d5b !important; }
@media (max-width: 900px) { .zwei-spalten, .aaa { grid-template-columns:1fr; } .blickfolge li { flex:1 1 100%; } }

.asf-wartet { display:block; margin-top:.5rem; font-size:.85rem; font-weight:600; color:#7a5a00; background:#fff8e1; border-radius:10px; padding:.35rem .7rem; }
/* Blickschulung: Baukasten */
.baukasten { display:grid; gap:.6rem; margin:1rem 0 1.4rem; max-width:900px; }
.bk-zeile { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; background:#fff; border-radius:16px; padding:.7rem .9rem; box-shadow:0 6px 18px rgba(16,57,50,.07); }
.bk-nr { min-width:3.6rem; height:2.6rem; border-radius:12px; background:linear-gradient(135deg, var(--gruen), var(--salbei)); color:#fff; font-weight:900; display:inline-flex; align-items:center; justify-content:center; }
.bk-gleich, .bk-plus { font-weight:900; color:var(--salbei); font-size:1.2rem; }
.bk-m { border-radius:999px; padding:.3rem .8rem; font-weight:800; font-size:.92rem; }
.bk-m.a { background:#e6f0fd; color:#1d5fb4; } .bk-m.b { background:#e1f0ec; color:var(--gruen); } .bk-m.c { background:#fff3cd; color:#7a5a00; }
.bk-wofuer { flex-basis:100%; font-size:.9rem; color:var(--grau); padding-left:.2rem; }
@media (min-width: 801px) { .bk-wofuer { flex-basis:auto; margin-left:auto; } }
/* Lernseiten: Kaesten und Bilder nebeneinander */
.zwei-spalten.tipps { max-width:none; align-items:stretch; }
.zwei-spalten.tipps .tipp { margin:0; max-width:none; }
.bilder-zwei { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.6rem 0; }
.bilder-zwei figure { margin:0; }
.bilder-zwei img { width:100%; border-radius:var(--radius); box-shadow:0 12px 30px rgba(16,57,50,.12); background:#fff; display:block; }
.bilder-zwei figcaption { font-weight:700; color:var(--gruen); margin-top:.4rem; text-align:center; }
@media (max-width: 800px) { .bilder-zwei { grid-template-columns:1fr; } }
/* Blickfolgen: alle Bausteine gleich gross (Inhaber 23.10.2026) */
.blickfolge { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:stretch; }
.modul-box .blickfolge { grid-template-columns:1fr; }
.blickfolge li { min-height:58px; }
@media (max-width: 900px) { .blickfolge { grid-template-columns:1fr; } }

/* Lernseiten: Fliesstext ueber die volle Breite (Inhaber 23.10.2026) */
.abschnitt .innen > p, .abschnitt .innen > ul, .abschnitt .innen > ol:not(.zeitleiste), .abschnitt .innen > h3, .abschnitt .innen > h4, .abschnitt .innen > .einzel, .einzel.breit, .tipp { max-width:none; }
.bild-hinweis { display:inline-flex; gap:.5rem; align-items:center; background:#fff3e0; color:#7a4a00; border-radius:999px; padding:.35rem 1rem; font-weight:700; font-size:.92rem; margin:1rem 0 -.4rem; }
/* Text und Bild nebeneinander (AAA) */
.text-bild { display:grid; grid-template-columns:1fr 1.15fr; gap:2.2rem; align-items:center; margin:.5rem 0 1rem; }
.text-bild p { font-size:1.08rem; }
.text-bild figure { margin:0; }
.text-bild img { width:100%; border-radius:var(--radius); box-shadow:0 12px 30px rgba(16,57,50,.12); background:#fff; display:block; }
@media (max-width: 900px) { .text-bild { grid-template-columns:1fr; } }
/* Lernseiten: Bild-Karten und Merkformel (Geschwindigkeit) */
.bild-karten { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin:1.2rem 0; }
.bild-karte { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 28px rgba(16,57,50,.09); display:flex; flex-direction:column; }
.bild-karte img { width:100%; display:block; border-bottom:1px solid var(--linie); }
.bk-inhalt { padding:1rem 1.2rem 1.2rem; position:relative; }
.bk-inhalt h3 { margin:.1rem 0 .3rem; font-size:1.15rem; }
.bk-inhalt p { margin:.3rem 0; font-size:.95rem; }
.bk-zahl { float:left; width:30px; height:30px; border-radius:50%; background:var(--gruen); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 .6rem 0 0; }
.bk-tempo { display:inline-block; background:var(--hell); color:var(--gruen); font-weight:800; border-radius:999px; padding:.1rem .7rem; font-size:.85rem !important; }
.formel { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:1rem 0 1.2rem; }
.f-teil { background:#fff; border-radius:16px; padding:.8rem 1.2rem; font-size:1.25rem; font-weight:900; color:var(--dunkel); box-shadow:0 8px 22px rgba(16,57,50,.09); border:2px solid var(--linie); }
.f-teil small { display:block; font-size:.8rem; font-weight:600; color:var(--grau); }
.f-teil.blick { border-color:var(--dunkel); }
.f-teil.ziel { background:var(--gruen); color:#fff; border-color:var(--gruen); }
.f-op { font-size:2rem; font-weight:900; color:var(--salbei); }
@media (max-width: 1000px) { .bild-karten { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px) { .bild-karten { grid-template-columns:1fr; } .f-teil { flex:1 1 100%; text-align:center; } .f-op { flex:1 1 100%; text-align:center; } }
/* Parken: Schritt-Listen in Bild-Karten, Korrektur-Liste */
.bk-liste { margin:.5rem 0 0; padding:0; }
.abschnitt .bk-liste li { font-size:.93rem; padding-left:1.5rem; }
.abschnitt .bk-liste li::before { width:.9rem; height:.9rem; top:.3em; }
ol.korrektur { padding-left:1.3rem; } ol.korrektur li { margin:.35rem 0; }
.text-bild h3 { margin-top:0; }
.bk-nr + .bk-wofuer { margin-left:.5rem !important; flex:1 1 0 !important; font-size:.98rem; color:var(--text); }
h2[id], h3[id] { scroll-margin-top:110px; }

/* Fuehrerschein-Uebersicht: Gruppen im 5-Spalten-Raster (Auto + Anhaenger nebeneinander) */
.kgruppen { display:grid; grid-template-columns:repeat(5, 1fr); column-gap:1rem; }
.kgruppen .kgruppe { grid-column:span var(--n, 5); margin-bottom:.5rem; }
.kgruppen .klassen { grid-template-columns:repeat(var(--n, 5), 1fr); margin-bottom:1rem; }
@media (max-width: 1000px) { .kgruppen { grid-template-columns:1fr; } .kgruppen .kgruppe { grid-column:auto; } .kgruppen .klassen { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } }
/* Autobahn-Abfahrt: Liste links, Hochformat-Bild rechts */
.abfahrt { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; margin:1rem 0; }
.abfahrt figure { margin:0; position:sticky; top:96px; }
.abfahrt img { width:100%; border-radius:var(--radius); box-shadow:0 12px 30px rgba(16,57,50,.12); display:block; }
.abfahrt .baukasten { max-width:none; }
.abfahrt h4 { margin:1.2rem 0 .2rem; font-size:1.1rem; color:var(--dunkel); }
.bk-nr { min-width:4.6rem; padding:0 .5rem; }
@media (max-width: 900px) { .abfahrt { grid-template-columns:1fr; } .abfahrt figure { position:static; max-width:340px; margin:0 auto; } }
/* Sicherheitskontrolle: Sprung-Kacheln und aufklappbare Pruefpunkte */
.sk-kacheln { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.4rem; }
.sk-kachel { display:flex; align-items:center; gap:.6rem; background:#fff; border:2px solid var(--linie); border-radius:16px; padding:.5rem .9rem .5rem .5rem; text-decoration:none; color:var(--dunkel); font-weight:700; transition:all .15s; }
.sk-kachel span { width:2.4rem; height:2.4rem; border-radius:12px; background:linear-gradient(135deg, var(--gruen), var(--salbei)); color:#fff; font-weight:900; font-size:1.25rem; display:flex; align-items:center; justify-content:center; }
.sk-kachel:hover { border-color:var(--gruen); transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,57,50,.12); }
details.sk { background:#fff; border:1px solid var(--linie); border-radius:16px; margin:0 0 .8rem; box-shadow:0 6px 18px rgba(16,57,50,.06); scroll-margin-top:110px; }
details.sk summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem; font-size:1.15rem; font-weight:800; color:var(--dunkel); position:relative; padding-right:3rem; }
details.sk summary::-webkit-details-marker { display:none; }
details.sk summary::after { content:"+"; position:absolute; right:1.2rem; font-size:1.6rem; color:var(--gruen); }
details.sk[open] summary::after { content:"–"; }
details.sk[open] { border-color:var(--salbei); }
.sk-b { flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:12px; background:linear-gradient(135deg, var(--gruen), var(--salbei)); color:#fff; font-weight:900; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.sk-inhalt { padding:0 1.2rem 1rem 4.5rem; }
.sk-frage { font-weight:800; color:var(--gruen); margin:1rem 0 .3rem; }
@media (max-width: 640px) { .sk-inhalt { padding-left:1.2rem; } }