/* ============================================================
   CARFOIL. Academy — Mitgliederbereich. Gleiche Sprache wie carfoil.ch (cfhome):
   Inter selbst gehostet · Tinte #1a1a1a · Papier #f6f6f6 · Bedienfläche #333e4d · Gold #c4a265 nur Akzent
   Radien 12 (Karten) / 8 (Knöpfe, Felder) · Abstände 8/12/16/24 · Kopf und Fuss dunkel #0e0e0e.
   ============================================================ */
@font-face{font-family:"Inter CF";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter CF";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter CF";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Inter CF";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/inter-900.woff2) format("woff2")}

:root{--tinte:#1a1a1a;--grund:#fff;--papier:#f6f6f6;--linie:#e0e0e0;--linie-k:#c9cdd2;--leise:#5f6773;--gedaempft:#333;
  --akzent:#333e4d;--akzent-dunkel:#26303c;--akzent-hell:#eef1f4;--gold:#c4a265;--gold-dunkel:#a88b50;--gold-hell:#f7f0e1;
  --gruen:#15803d;--gruen-hell:#e6f4ea;--fehler:#b91c1c;--fehler-hell:#fdecec;--dunkel:#0e0e0e;--dunkel-karte:#161616;
  --r-karte:12px;--r-knopf:8px;--schatten:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Inter CF",Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15.5px;line-height:1.55;color:var(--tinte);background:var(--papier);display:flex;flex-direction:column;min-height:100vh}
body.gast{background:var(--dunkel)}
a{color:var(--akzent);text-decoration:none}
a:hover{color:var(--akzent-dunkel);text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em}
h1{font-size:32px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h2{font-size:22px;font-weight:700}
h3{font-size:16px;font-weight:700}
p{margin:0 0 12px}
.innen{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
.schmal{max-width:640px}
.haupt{flex:1;padding-block:28px 56px;min-width:0;width:100%}
.ueberzeile{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:0 0 8px}
.ueberzeile a{color:inherit}
.leise{color:var(--leise)}
.klein{font-size:13px;color:var(--leise)}
.gross{font-size:17px}
.meta{color:var(--leise);font-size:13.5px;margin:6px 0}
.inline{display:inline}
.ic{width:1.1em;height:1.1em;fill:currentColor;vertical-align:-.2em;flex:none}
.ic-fertig{color:var(--gruen)}
.ic-gesperrt{color:var(--leise)}
.ic-pruefung{color:var(--gold-dunkel)}

/* Kopf */
.kopf{background:var(--dunkel);color:#fff;position:sticky;top:0;z-index:20}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:6px}
.marke{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.marke:hover{color:#fff;text-decoration:none}
.marke img{height:22px;width:auto;display:block}
.marke span{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-left:12px;border-left:1px solid rgba(255,255,255,.25);line-height:1}
.kopf-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.kopf-nav a,.linkknopf{color:#cfcfcf;text-decoration:none;font-weight:500;font-size:14.5px;padding:8px 0;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.kopf-nav a:hover,.linkknopf:hover{color:#fff;text-decoration:none}
.kopf-nav a.aktiv{color:#fff;border-bottom-color:var(--gold)}
.sprachen{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.sprachen a{padding:5px 9px;font-size:12px;font-weight:700;border:0;letter-spacing:.06em}
.sprachen a.aktiv{background:#fff;color:var(--dunkel)}

/* Fuss */
.fuss{background:var(--dunkel);color:#9a9a9a;font-size:13px;padding:22px 0}
.fuss .innen{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Karten, Hinweise, Chips */
.karte{background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-karte);padding:24px;margin-bottom:20px;box-shadow:var(--schatten)}
.karte h2{margin-bottom:12px}
.karte.leer{text-align:center;padding:48px 24px}
.hinweis{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:10px;margin:0 0 16px;border:1px solid var(--linie);background:#fff;font-size:14.5px}
.hinweis p{margin:0 0 8px}
.hinweis-ok{background:var(--gruen-hell);border-color:#c8e6c9;color:#14532d}
.hinweis-warn{background:#fff8e1;border-color:#f3e2a6;color:#6d4c00}
.hinweis-fehler{background:var(--fehler-hell);border-color:#f5c2c2;color:#7f1d1d}
.hinweis-info{background:var(--akzent-hell);border-color:#d5dbe3;color:var(--akzent-dunkel)}
.hinweis-sperre{background:var(--gold-hell);border-color:#e6d9a8;color:#5a4a12;align-items:center}
.hinweis-icon{display:inline-flex;width:40px;height:40px;border-radius:50%;background:#fff;align-items:center;justify-content:center;flex:none;color:var(--gold-dunkel);font-size:18px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--papier);color:var(--gedaempft);white-space:nowrap}
.chip-gruen{background:var(--gruen-hell);color:var(--gruen)}
.abzeichen{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:6px;background:var(--gold);color:var(--dunkel)}
.abzeichen-gold{font-size:14px;text-transform:none;letter-spacing:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-knopf);font:inherit;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;background:var(--akzent);color:#fff;border:1px solid var(--akzent);transition:background .15s,border-color .15s}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:#fff;text-decoration:none}
.knopf-gold{background:var(--gold);border-color:var(--gold);color:var(--dunkel)}
.knopf-gold:hover{background:var(--gold-dunkel);border-color:var(--gold-dunkel);color:var(--dunkel)}
.knopf-leise{background:#fff;border-color:var(--linie-k);color:var(--tinte)}
.knopf-leise:hover{background:var(--papier);border-color:var(--linie-k);color:var(--tinte)}
.knopf-leise.aktiv{border-color:var(--gold);color:var(--gold-dunkel)}
.knopf-klein{min-height:36px;padding:0 12px;font-size:13.5px}
.knopf-breit{width:100%;margin-top:6px}
.knopf:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.aktionen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
p.aktionen{margin-bottom:0}

/* Fortschritt */
.balken-huelle{height:6px;background:#e6e6e3;border-radius:3px;overflow:hidden;margin:10px 0}
.balken{height:100%;background:var(--gold);border-radius:3px;transition:width .4s}
.balken-dunkel{background:rgba(255,255,255,.18)}

/* Seitenkopf, Formulare */
.seitenkopf{margin:6px 0 22px}
.form label{display:block;margin:0 0 14px}
.form label span{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--gedaempft)}
.form input,.form select{display:block;width:100%;padding:12px 14px;border:1px solid var(--linie-k);border-radius:var(--r-knopf);font:inherit;font-size:15px;background:#fff;color:var(--tinte)}
.form input:focus,.form select:focus{outline:2px solid var(--akzent);outline-offset:0;border-color:var(--akzent)}
.form input:disabled{background:var(--papier);color:var(--leise)}
.form .klein{margin:12px 0 0;text-align:center}

/* Gast (Login, Passwort) */
.gast-buehne{min-height:calc(100vh - 64px - 62px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.gast-karte{background:#fff;border-radius:16px;padding:36px 32px 28px;width:100%;max-width:440px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.gast-logo{display:block;width:150px;height:auto;margin:0 0 22px}
.gast-karte h1{font-size:26px;margin-bottom:6px}
.gast-karte .leise{margin-bottom:20px}
.gast .fuss{color:#777}

/* Kurskarten */
.kurskarten{display:grid;grid-template-columns:1fr;gap:22px}
.kurskarte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--schatten);display:grid;grid-template-columns:1fr}
.kurskarte-bild{display:block;position:relative;background:var(--dunkel);aspect-ratio:16/9;overflow:hidden}
.kurskarte-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.kurskarte-bild:hover img{transform:scale(1.03)}
.kurskarte-platzhalter{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.kurskarte-platzhalter img{width:40%;height:auto;object-fit:contain;opacity:.6}
.kurskarte-bild .abzeichen{position:absolute;top:14px;left:14px}
.kurskarte-text{padding:22px 24px 20px}
.kurskarte-text h2{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 6px}
.kurskarte-text h2 a{color:var(--tinte)}
.kurskarte-text h2 a:hover{text-decoration:none;color:var(--akzent)}
@media (min-width:800px){.kurskarte{grid-template-columns:minmax(280px,42%) 1fr}.kurskarte-bild{aspect-ratio:auto;min-height:240px}}

/* Kursseite: Bühne */
.held{position:relative;background:var(--dunkel);color:#fff;overflow:hidden;margin:-28px 0 26px;padding:52px 0 44px;isolation:isolate}
.held::before{content:"";position:absolute;inset:-40px;background:var(--held-bild,none) center/cover no-repeat;filter:blur(22px) saturate(.9);opacity:.38;z-index:-2}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,14,.92) 0%,rgba(14,14,14,.75) 55%,rgba(14,14,14,.55) 100%);z-index:-1}
.held-innen{max-width:1180px}
.held .ueberzeile{color:var(--gold)}
.held .ueberzeile a{color:#ddd}
.held h1{font-size:38px;color:#fff;margin-bottom:14px;max-width:18em}
.held-meta{color:#cfcfcf;font-size:14px;margin:6px 0}
.held .balken-huelle{max-width:560px}
.held-aktion{margin:20px 0 0}

/* So funktioniert der Kurs */
.so h2{font-size:18px}
.so-liste{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:12px}
.so-liste li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.so-nr{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--dunkel);font-weight:900;align-items:center;justify-content:center;font-size:14px}
.so .leise{margin:12px 0 0;font-size:13.5px}
@media (min-width:800px){.so-liste{grid-template-columns:1fr 1fr 1fr;gap:20px}}

/* Module und Schritte */
.modul{margin:0 0 28px}
.modul-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:0 4px}
.modul-kopf h2{font-size:19px}
.modul-stand{font-size:13px;font-weight:700;color:var(--leise);white-space:nowrap}
.modul-stand.fertig{color:var(--gruen)}
.schritte{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten);overflow:hidden}
.schritt{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--linie)}
.schritt:last-child{border-bottom:0}
.schritt.pruefung{background:#fdfbf6}
.schritt-icon{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--papier);color:var(--akzent);align-items:center;justify-content:center;font-size:17px;flex:none}
.schritt.fertig .schritt-icon{background:var(--gruen-hell);color:var(--gruen)}
.schritt.gesperrt .schritt-icon{background:#f0f0ee;color:var(--leise)}
.schritt.pruefung:not(.fertig):not(.gesperrt) .schritt-icon{background:var(--gold-hell);color:var(--gold-dunkel)}
.schritt-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.schritt-art{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.schritt-titel{font-weight:600;font-size:16px;color:var(--tinte)}
a.schritt-titel:hover{color:var(--akzent);text-decoration:none}
.schritt.gesperrt .schritt-titel{color:var(--leise)}
.schritt-unter{font-size:13.5px;color:var(--leise)}
.schritt-sperre{font-size:13px;color:var(--leise);margin-top:4px}
.schritt-sperre a{font-weight:700;color:var(--akzent);margin-left:6px;white-space:nowrap}
.schritt-rechts{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.dauer{font-size:13px;color:var(--leise);white-space:nowrap}
.stern{color:var(--gold)}
@media (max-width:640px){.schritt{grid-template-columns:40px 1fr;padding:12px 14px}.schritt-rechts{grid-column:2;justify-content:flex-start}}

/* Lernansicht: Seitenleiste + Inhalt */
.lern{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:1024px){.lern{grid-template-columns:340px minmax(0,1fr);gap:32px;align-items:start}.seite{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;scrollbar-width:thin}}
.gliederung{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:16px 16px 12px;box-shadow:var(--schatten)}
.gliederung summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:700}
.gliederung summary::-webkit-details-marker{display:none}
.gliederung-titel{display:inline-flex;align-items:center;gap:8px}
.gliederung-stand{font-size:12.5px;color:var(--leise);font-weight:700}
.gliederung-kurs{font-size:13.5px;margin:8px 0 6px}
.gliederung-kurs a{display:inline-flex;align-items:center;gap:4px}
.gliederung-abschnitt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--leise);margin:16px 0 6px;display:flex;justify-content:space-between;gap:8px}
.gliederung-abschnitt span{font-weight:500;letter-spacing:0}
.seite-liste{list-style:none;padding:0;margin:0}
.seite-liste li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:7px 10px;border-radius:8px;font-size:14px;line-height:1.35}
.seite-liste li a{color:var(--tinte)}
.seite-liste li a:hover{color:var(--akzent);text-decoration:none}
.seite-liste li.aktuell{background:var(--gold-hell);font-weight:700}
.seite-liste li.gesperrt{color:var(--leise)}
.seite-liste li.gesperrt .titel small{display:block;font-size:12px;font-weight:400}
.seite-liste li .schritt-icon{width:22px;height:22px;background:none;font-size:15px;color:var(--leise)}
.seite-liste li.fertig .schritt-icon{color:var(--gruen)}
.seite-liste li.pruefung:not(.fertig):not(.gesperrt) .schritt-icon{color:var(--gold-dunkel)}
.lern-inhalt{min-width:0}
.brotkrumen{font-size:13.5px;color:var(--leise);margin:0 0 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.brotkrumen .ic{width:.9em;height:.9em}
.buehne{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-karte);overflow:hidden;margin:0 0 20px;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.buehne-leer{display:flex;align-items:center;justify-content:center;color:#bbb;border:1px dashed #444;font-size:14.5px}
.buehne-leer span{display:inline-flex;gap:10px;align-items:center;padding:20px}
.lektion-kopf{margin:0 0 18px}
.lektion-kopf h1{font-size:28px;margin:0 0 6px}
.untertitel{color:var(--gedaempft);font-size:16px;margin:0 0 8px}
.text{font-size:16.5px;line-height:1.7;padding:8px 28px}
.text p{margin:14px 0}
.text img{display:block;border-radius:8px;margin:18px 0}
.text h2,.text h3{margin:22px 0 8px}
.text ul,.text ol{padding-left:22px}
.anhaenge{list-style:none;padding:0;margin:0}
.anhaenge li{padding:6px 0;display:flex;gap:8px;align-items:center}
.naechster{border-left:4px solid var(--gold)}
.naechster.bestanden{border-left-color:var(--gruen)}
.naechster-zeile{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.naechster-icon{display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--gold-hell);color:var(--gold-dunkel);align-items:center;justify-content:center;font-size:22px}
.bestanden .naechster-icon{background:var(--gruen-hell);color:var(--gruen)}
.naechster h2{margin:4px 0 4px;font-size:20px}
.vorzurueck{display:flex;justify-content:space-between;gap:16px;margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--linie)}
.vorzurueck a{display:inline-flex;align-items:center;gap:10px;max-width:48%;color:var(--tinte);font-weight:600;font-size:14.5px;line-height:1.3}
.vorzurueck a:hover{text-decoration:none;color:var(--akzent)}
.vorzurueck a small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.vorzurueck a small.sperre{text-transform:none;letter-spacing:0;font-weight:500}
.vorzurueck a.gesperrt{color:var(--leise);pointer-events:none}
.vorzurueck .nach{margin-left:auto;text-align:right}

/* Prüfung */
.pf-kopf{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.pf-stand{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);white-space:nowrap}
.pf-kopf .balken-huelle{flex:1;margin:0}
.fragen{list-style:none;padding:0;margin:0}
.frage[hidden]{display:none}
.frage{margin:0 0 26px}
.frage-text{font-size:18px;font-weight:600;line-height:1.45;margin:0 0 14px;display:flex;gap:12px;align-items:flex-start}
.frage-nr{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--akzent);color:#fff;font-size:13px;font-weight:700;align-items:center;justify-content:center;flex:none;margin-top:1px}
.optionen{display:grid;gap:10px}
.option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--linie-k);border-radius:10px;cursor:pointer;background:#fff;font-size:15.5px;transition:border-color .15s,background .15s}
.option:hover{background:var(--papier)}
.option input{accent-color:var(--akzent);width:18px;height:18px;margin:0;flex:none}
.option:has(input:checked){border-color:var(--akzent);background:var(--akzent-hell);font-weight:600}
.pf-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--linie)}
.pf-platz{flex:1}
.pf-fehlt{margin:0 0 14px}
.ergebnis-kopf{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:center;margin:0 0 22px}
.ergebnis-ring{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--gruen) calc(var(--wert) * 1%),#e6e6e3 0);display:flex;align-items:center;justify-content:center;position:relative}
.ergebnis-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
.ergebnis-ring span{position:relative;font-size:24px;font-weight:900;letter-spacing:-.02em}
.ergebnis.nicht .ergebnis-ring{background:conic-gradient(var(--gold) calc(var(--wert) * 1%),#e6e6e3 0)}
.ergebnis h2{font-size:26px;text-transform:uppercase;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
.ergebnis.bestanden h2{color:var(--gruen)}
.ergebnis.nicht h2{color:var(--gold-dunkel)}
.auswertung{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.auswertung>li{padding:18px 0;border-bottom:1px solid var(--linie)}
.auswertung .frage-text{font-size:16px}
.auswertung li.richtig .frage-nr{background:var(--gruen)}
.auswertung li.falsch .frage-nr{background:var(--fehler)}
.auswertung ul{list-style:none;padding:0 0 0 42px;margin:0;display:grid;gap:6px}
.auswertung ul li{font-size:14.5px;color:var(--leise);padding:6px 10px;border-radius:6px}
.auswertung ul li.gewaehlt{background:var(--papier);color:var(--tinte);font-weight:600}
.auswertung ul li.korrekt{color:var(--gruen);font-weight:600}
.auswertung ul li.gewaehlt.korrekt{background:var(--gruen-hell)}
.auswertung ul li small{font-size:12px;font-weight:700;margin-left:8px;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:560px){.ergebnis-kopf{grid-template-columns:1fr;justify-items:start}}

/* Gesperrt */
.gesperrt-karte{text-align:center;padding:44px 28px}
.gesperrt-icon{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--gold-hell);color:var(--gold-dunkel);align-items:center;justify-content:center;font-size:28px;margin:0 0 14px}
.gesperrt-karte h1{font-size:26px;margin:0 0 10px}
.gesperrt-karte .aktionen{justify-content:center}
.fehler-karte{padding:40px 28px}

@media (max-width:640px){h1{font-size:26px}.held{padding:36px 0 30px}.held h1{font-size:28px}.karte{padding:18px}.text{padding:4px 18px}.kopf-nav{gap:14px}.marke span{display:none}}

/* Backoffice */
.nav-admin{color:var(--gold)!important}
.bo-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.bo-titel{font-size:26px}
.bo-tabs{display:flex;gap:4px;flex-wrap:wrap}
.bo-tabs a{padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px;color:var(--gedaempft)}
.bo-tabs a:hover{background:#fff;text-decoration:none}
.bo-tabs a.aktiv{background:var(--dunkel);color:#fff}
.bo-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px}
.bo-zahl{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:16px 18px;display:flex;flex-direction:column;gap:2px;color:var(--tinte);text-decoration:none;box-shadow:var(--schatten)}
.bo-zahl:hover{text-decoration:none;border-color:var(--linie-k)}
.bo-zahl strong{font-size:26px;font-weight:900;letter-spacing:-.02em}
.bo-zahl span{font-size:12.5px;color:var(--leise)}
.bo-spalten{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:960px){.bo-spalten{grid-template-columns:1fr 1fr}}
.bo-zeile{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;align-items:center}
.bo-suche{display:flex;gap:8px;flex:1;max-width:560px}
.bo-suche input,.bo-suche select{flex:1;padding:11px 14px;border:1px solid var(--linie-k);border-radius:var(--r-knopf);font:inherit;background:#fff}
.bo-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bo-haken{display:flex!important;align-items:center;gap:8px;font-weight:500!important}
.bo-haken input{width:auto!important;display:inline!important;margin:0}
.form textarea{display:block;width:100%;padding:10px 14px;border:1px solid var(--linie-k);border-radius:var(--r-knopf);font:inherit;font-size:15px}
.bo-form-zeile{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
.bo-form-zeile label{margin:0}
@media (max-width:900px){.bo-form-zeile{grid-template-columns:1fr 1fr}}
.tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.tabelle th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);padding:8px 10px;border-bottom:1px solid var(--linie)}
.tabelle td{padding:10px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle .r{text-align:right}
.tabelle-klein{font-size:13.5px}
.tabelle-klein td{padding:7px 8px}
.nowrap{white-space:nowrap}
.chip-rot{background:var(--fehler-hell);color:var(--fehler)}
.knopf-rot{color:var(--fehler)}
.knopf-rot:hover{background:var(--fehler-hell);color:var(--fehler)}
.bo-zugang{padding:14px 0;border-bottom:1px solid var(--linie)}
.bo-zugang.inaktiv{opacity:.65}
.bo-zugang-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.bo-zugang-aktionen{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}
.bo-inline{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gedaempft)}
.bo-inline select,.bo-inline input{padding:6px 8px;border:1px solid var(--linie-k);border-radius:6px;font:inherit;font-size:13.5px;background:#fff}
.bo-kurz{width:72px}
.bo-info{display:inline-block;position:relative;vertical-align:middle;margin-left:2px}
.bo-info summary{list-style:none;cursor:pointer;display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid var(--linie-k);color:var(--leise);font-size:11px;font-weight:700;line-height:16px;text-align:center;user-select:none;font-family:Georgia,serif;font-style:italic}
.bo-info summary::-webkit-details-marker{display:none}
.bo-info summary:hover,.bo-info[open] summary{background:var(--dunkel);border-color:var(--dunkel);color:#fff}
.bo-info-text{position:absolute;z-index:30;left:0;top:24px;width:320px;max-width:min(80vw,320px);padding:10px 12px;background:#fff;border:1px solid var(--linie-k);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:13px;line-height:1.45;font-weight:400;font-style:normal;font-family:inherit;color:var(--gedaempft);text-align:left;white-space:normal;text-transform:none;letter-spacing:0}
h2 .bo-info,h3 .bo-info{margin-left:6px}
.bo-balken{max-width:160px;margin:0 0 4px}
.bo-code{display:block;font-size:12.5px;word-break:break-all;margin-top:6px;background:#fff;padding:8px;border-radius:6px}
.tabelle-scroll{overflow-x:auto}
.bo-gefahr{border-color:#f5c2c2}
.bo-gefahr h2{color:var(--fehler)}
.knopf-rot-voll{background:var(--fehler);border-color:var(--fehler);color:#fff}
.knopf-rot-voll:hover{background:#991b1b;border-color:#991b1b;color:#fff}
.bo-form-inline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.bo-form-inline label{margin:0;flex:1;max-width:360px}

/* Kurseditor */
.ed-abschnitt-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ed-abschnitt-kopf h2{margin:0}
.ed-knoepfe{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ed-knoepfe .knopf[disabled]{opacity:.35;cursor:default}
.ed-details{margin:8px 0 12px}
.ed-details summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--akzent)}
.ed-zeile{display:grid;grid-template-columns:2fr 2fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}
.ed-zeile label{margin:0}
@media (max-width:900px){.ed-zeile{grid-template-columns:1fr 1fr}}
.ed-lektionen{list-style:none;padding:0;margin:10px 0 0;border-top:1px solid var(--linie)}
.ed-lektion{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--linie)}
.ed-lektion.versteckt{opacity:.6}
.ed-lektion-text{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (max-width:700px){.ed-lektion{grid-template-columns:36px 1fr}.ed-lektion .ed-knoepfe{grid-column:2}}
.ed-neu{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ed-neu input[type=text]{flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--linie-k);border-radius:8px;font:inherit}
.ed-neu select{padding:10px;border:1px solid var(--linie-k);border-radius:8px;font:inherit;background:#fff}
.ed-vier{display:grid;grid-template-columns:1fr 1.4fr 1fr 1.4fr;gap:12px;align-items:end}
@media (max-width:900px){.ed-vier{grid-template-columns:1fr 1fr}}
.ed-haken{display:flex;flex-direction:column;gap:6px;padding-bottom:12px}
.editor{border:1px solid var(--linie-k);border-radius:8px;overflow:hidden;margin:0 0 16px;background:#fff}
.editor-leiste{display:flex;gap:2px;flex-wrap:wrap;padding:6px;background:var(--papier);border-bottom:1px solid var(--linie)}
.editor-leiste button{font:inherit;font-size:13px;padding:6px 10px;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;color:var(--tinte)}
.editor-leiste button:hover,.editor-leiste button.aktiv{background:#fff;border-color:var(--linie-k)}
.editor-trenner{width:1px;background:var(--linie-k);margin:4px 6px}
.editor-feld{min-height:280px;padding:16px 22px;outline:none;font-size:16px;line-height:1.65}
.editor-feld:focus{background:#fffefa}
.editor-feld img{max-width:100%;height:auto;border-radius:6px;display:block;margin:12px 0}
.editor-quelle{display:block;width:100%;min-height:280px;padding:14px;border:0;font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.5;resize:vertical}
.ed-buehne{max-width:520px;margin-bottom:12px}
.ed-upload{display:grid;gap:8px;margin-bottom:12px}
.ed-upload input[type=file]{font:inherit}
.ed-upload-stand .balken-huelle{margin:4px 0}
.ed-bunny-liste{margin:10px 0;max-height:360px;overflow:auto}
.ed-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.ed-bilder figure{margin:0;border:1px solid var(--linie);border-radius:8px;overflow:hidden;background:var(--papier)}
.ed-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ed-bilder figcaption{padding:6px 8px;display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:12px}
.linkknopf-rot{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--fehler);cursor:pointer;text-decoration:underline}
.ed-fragen{list-style:none;padding:0;margin:14px 0}
.ed-frage{border:1px solid var(--linie);border-radius:10px;padding:14px 16px;margin:0 0 12px;background:#fcfcfb}
.ed-frage-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ed-optionen{display:grid;gap:6px;margin:6px 0 10px}
.ed-option{display:grid;grid-template-columns:34px 1fr 1fr auto;gap:8px;align-items:center}
.ed-option input[type=text]{padding:9px 12px;border:1px solid var(--linie-k);border-radius:8px;font:inherit;font-size:14px;width:100%}
.ed-option .bo-haken input{width:18px!important;height:18px;accent-color:var(--gruen)}
@media (max-width:700px){.ed-option{grid-template-columns:34px 1fr auto}.ed-option input[placeholder^="Answer"]{grid-column:2}}
.ed-kurz{max-width:360px}
.ed-quiz .aktionen{margin-top:6px}
.form.ed-neu input[type=text],.form.ed-neu select{display:inline-block;width:auto;margin:0}
.form.ed-neu input[type=text]{flex:1}
.ed-auffrischen{display:block;margin:-6px 0 14px}
.ed-sprung{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.ed-sprung .ueberzeile{margin:0 6px 0 0}
.ed-sprung a{padding:6px 12px;border:1px solid var(--linie-k);border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;text-decoration:none}
.ed-sprung a:hover{background:var(--papier)}

/* ---------- Öffentliche Seiten (Schaufenster) ---------- */
.seite-kopf{background:var(--dunkel);color:#fff;padding:56px 0 48px}
.seite-kopf .ueberzeile{color:var(--gold)}
.seite-kopf h1{color:#fff;font-size:clamp(28px,4vw,42px);margin:0 0 10px;max-width:900px;line-height:1.15}
.seite-kopf .untertitel{color:#cfcfcf;font-size:18px;max-width:760px;margin:0}
.seite-inhalt{padding:36px 0 56px}
.seite .text{padding:0;max-width:none}
.seite .text>*:first-child{margin-top:0}
.seite .text h2{font-size:28px;margin:44px 0 12px;line-height:1.2}
.seite .text h3{font-size:20px;margin:28px 0 8px}
.seite .text p{font-size:17px;line-height:1.65}
.seite .text li{font-size:16.5px;line-height:1.55;margin:4px 0}
.seite .text img{max-width:100%;height:auto}
.schmal{max-width:820px}
.mitte{text-align:center}
.mitte .knopf{margin:8px 6px}
.knopf-gross{min-height:54px;padding:0 28px;font-size:16.5px}
.band{padding:36px;border-radius:var(--r-karte);margin:32px 0;background:var(--papier)}
.band-dunkel{background:var(--dunkel);color:#e8e8e8}
.band-dunkel h2,.band-dunkel h3,.band-dunkel h4{color:#fff}
.band-dunkel .ueberzeile{color:var(--gold)}
.band-gold{background:var(--gold-hell)}
.band-hell{background:#fff;border:1px solid var(--linie)}
.raster-2,.raster-3,.raster-4{display:grid;gap:20px;margin:24px 0}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
.raster-2>*,.raster-3>*,.raster-4>*{min-width:0;margin:0}
.seite .karte{margin-bottom:0}
.seite .karte h3{margin-top:0}
.seite .karte img{margin:0 0 12px}
.preis{display:flex;flex-direction:column;gap:10px;border:1px solid var(--linie);border-radius:var(--r-karte);padding:28px;background:#fff;box-shadow:var(--schatten)}
.preis-titel{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent);font-size:14px;margin:0}
.preis-zahl{font-size:34px;font-weight:800;color:var(--tinte);line-height:1.1;margin:0}
.preis-hinweis{font-size:14px;color:var(--leise);margin:0}
.preis ul{padding-left:20px;margin:6px 0;flex:1}
.preis .knopf{margin-top:auto}
.haken-liste{list-style:none;padding:0}
.haken-liste li{padding-left:28px;position:relative}
.haken-liste li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--gold)}
.zitat{border-left:4px solid var(--gold);padding:8px 18px;margin:20px 0;font-size:17px;font-style:italic}
.zitat-autor{font-style:normal;font-weight:700;font-size:14px;color:var(--leise);display:block;margin-top:6px}
.kachel{border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;background:#fff;margin:0}
.kachel img{margin:0;border-radius:0;width:100%;aspect-ratio:16/10;object-fit:cover}
.kachel-text{padding:18px}
.kachel-text h3{margin-top:0}
.bild-rund{border-radius:50%!important;width:120px;height:120px;object-fit:cover;margin:0 auto 12px!important}
.bild-breit{width:100%}
.bild-klein{max-width:320px}
.zahl{text-align:center}
.zahl-wert{font-size:40px;font-weight:800;color:var(--gold-dunkel);display:block;line-height:1.1}
.faq details{border:1px solid var(--linie);border-radius:10px;padding:14px 18px;margin:10px 0;background:#fff}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:10px 0 0}
.kalender{height:900px}.kalender iframe{width:100%;height:100%;border:0;border-radius:var(--r-karte);background:#fff}
.karte-box iframe{width:100%;height:360px;border:0;border-radius:var(--r-karte)}
.formular-karte{max-width:820px;margin:8px auto 40px}
.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.formular .fehlertext{color:var(--fehler);font-size:13px;margin:-8px 0 12px}
.formular .fehler input,.formular .fehler select,.formular .fehler textarea{border-color:var(--fehler)}
.formular .haken-feld{display:flex;gap:10px;align-items:flex-start;margin:8px 0 16px;font-size:15px}
.formular .haken-feld input{width:auto;margin-top:3px}
.formular fieldset{border:0;padding:0;margin:0 0 14px}
.formular fieldset legend{font-size:13px;font-weight:700;margin-bottom:6px;color:var(--gedaempft)}
.formular .radio{display:flex;gap:10px;align-items:center;margin:6px 0}
.formular .radio input{width:auto}
.formular .links{text-align:left}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.fuss-links{display:flex;gap:16px;flex-wrap:wrap}
.fuss-links a{color:#cfcfcf}
.tabelle-scroll{overflow-x:auto}
@media(max-width:900px){.raster-3,.raster-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.raster-2,.raster-3,.raster-4{grid-template-columns:1fr}.formular .zwei{grid-template-columns:1fr}.band{padding:22px}.kalender iframe{height:900px}.seite-kopf{padding:36px 0 30px}}
.editor-roh{display:block;width:100%;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px;border:1px solid var(--linie-k);border-radius:var(--r-knopf)}
.seite .text .roh{all:revert}
/* Öffentliche Seiten: helle Fläche, dunkle Bänder als Akzent */
body.oeffentlich{background:var(--grund)}
.oeffentlich .fuss{color:#9a9a9a}
.band-dunkel .karte,.band-dunkel .preis,.band-dunkel .kachel,.band-dunkel details{color:var(--tinte)}
.band-dunkel .karte h2,.band-dunkel .karte h3,.band-dunkel .karte h4,.band-dunkel .preis h3,.band-dunkel .preis h4,.band-dunkel .kachel h3,.band-dunkel details summary{color:var(--tinte)}
.band-dunkel .preis-titel{color:var(--akzent)}
.band-dunkel a:not(.knopf){color:#fff;text-decoration:underline}
.band-dunkel .karte a:not(.knopf),.band-dunkel .preis a:not(.knopf),.band-dunkel .kachel a:not(.knopf){color:var(--akzent)}
.seite .text h4,.lead{font-size:18px;font-weight:500;line-height:1.5;color:var(--gedaempft);margin:14px 0}
.band-dunkel h4{color:#d6d6d6}
.logos{align-items:center}
.logos img{max-height:90px;width:auto;margin:0 auto;object-fit:contain;background:#fff;border-radius:8px;padding:8px}
.seite .band>*:first-child{margin-top:0}
.seite .band>*:last-child{margin-bottom:0}
.seite .band .raster-2,.seite .band .raster-3,.seite .band .raster-4{margin-bottom:0}
.seite .text .band-dunkel h4,.band-dunkel .lead{color:#d6d6d6}
.oeffentlich .haupt{padding-block:0 56px}
.ed-texte .ed-textstelle{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start;margin:0 0 8px}
.ed-texte .ed-textstelle span{font-size:12px;color:var(--leise);padding-top:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ed-texte textarea{display:block;width:100%;padding:8px 12px;border:1px solid var(--linie-k);border-radius:var(--r-knopf);font:inherit;font-size:14.5px;line-height:1.4}
@media(max-width:600px){.ed-texte .ed-textstelle{grid-template-columns:1fr}}

/* Öffentliche Seiten im neuen Aufbau (17.09.2026): lange Titel in Satzschrift statt Versalien, Vergleichstabellen mit Rand */
.oeffentlich .seite-kopf h1{text-transform:none;letter-spacing:-.01em;font-weight:800}
.oeffentlich .text .tabelle td{padding:9px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.oeffentlich .text figure{margin:0}
.oeffentlich .text figcaption{font-size:13px;color:var(--gedaempft);margin-top:6px}
.oeffentlich .text details>ol{columns:2;column-gap:32px;margin:10px 0 0}
@media (max-width:700px){.oeffentlich .text details>ol{columns:1}}

/* ---- Handy-Menü (19.09.2026): ab 641 px unsichtbar; darunter klappt der Knopf die Navigation auf. Ohne JS bleibt die Navigation sichtbar. */
.menue-knopf{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:transparent;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.menue-knopf span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
body.menue-offen .menue-knopf span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menue-offen .menue-knopf span:nth-child(2){opacity:0}
body.menue-offen .menue-knopf span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:640px){
  html.js .menue-knopf{display:inline-flex}
  html.js .kopf-nav{display:none;flex-direction:column;align-items:stretch;width:100%;gap:0;padding:6px 0 12px;border-top:1px solid rgba(255,255,255,.12);margin-top:6px}
  html.js body.menue-offen .kopf-nav{display:flex}
  html.js .kopf-nav a,html.js .kopf-nav .linkknopf{padding:12px 4px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08);width:100%;text-align:left}
  html.js .kopf-nav a.aktiv{border-bottom-color:var(--gold)}
  html.js .kopf-nav .sprachen{margin:10px 0 0}
}