/* ============ Gemeinsames Fundament (grau, sachlich) ============ */
:root{
  --ink:#23272d; --muted:#6b7178; --red:#c8102e; --red-d:#a20d24;
  --band:#e7e9ec; --band-2:#d7dbe0; --dark:#2b2f34; --dark-2:#22262b;
  --line:#e3e5e8; --paper:#fff; --soft:#f5f6f7; --gold:#e0a200;
  --surface:#fff; --ink-2:#40454b; --pill:#eef0f2; --pill-ink:#5a5f65;
}
*{box-sizing:border-box}
body{margin:0;background:#dfe1e4;color:var(--ink);
  font-family:"Inter","Helvetica Neue",-apple-system,system-ui,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;background:var(--paper);
  box-shadow:0 20px 60px rgba(20,22,25,.18)}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ---- Buttons ---- */
.btn{display:inline-block;font-weight:700;font-size:15px;padding:14px 26px;border-radius:8px;cursor:pointer;
  transition:.15s;border:2px solid transparent}
.btn.r{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(200,16,46,.25)}
.btn.r:hover{background:var(--red-d)}
.btn.o{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.o:hover{border-color:var(--ink)}
.btn.d{background:var(--dark);color:#fff}
.btn.big{font-size:16.5px;padding:17px 34px}

/* ---- Kopfband: grau, Logo links (dunkles Feld), Notruf dezent rechts ---- */
.top{background:var(--band);border-bottom:1px solid var(--band-2)}
.top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:13px 40px}
.brand{display:flex;align-items:center;gap:14px}
.brand .badge{background:var(--dark);border-radius:10px;padding:9px 15px;display:flex;align-items:center}
.brand .badge img{height:34px;width:auto;display:block}
.brand .txt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.brand .txt span{font-size:12.5px;color:var(--muted)}
.notruf{font-size:13.5px;color:var(--muted);text-align:right;line-height:1.35;white-space:nowrap}
.notruf b{display:block;font-size:19px;color:var(--red);font-weight:800;letter-spacing:.01em}

/* ---- Navigation: dunkel, mit präsentem Mitmachen-Button ---- */
.nav{background:var(--dark)}
.nav-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 40px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:15px 0;color:#d6dade;font-weight:600;font-size:15px}
.nav a:hover,.nav a.on{color:#fff}
.nav a.on{box-shadow:inset 0 -3px 0 var(--red)}
.nav .join{background:var(--red);color:#fff;font-weight:700;font-size:14.5px;padding:9px 20px;
  border-radius:7px;box-shadow:0 4px 14px rgba(200,16,46,.35)}
.nav .join:hover{background:var(--red-d);color:#fff}

/* ---- Hero mit langer Skyline ---- */
.hero{background:var(--paper);text-align:center;padding:34px 40px 44px}
.sky{width:100%;max-width:820px;height:auto;display:block;margin:0 auto 26px}
.ey{color:var(--red);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.hero h1{font-size:42px;line-height:1.1;margin:0 auto 16px;max-width:20ch;font-weight:800;letter-spacing:-.02em}
.hero .sub{color:var(--muted);font-size:17.5px;line-height:1.65;max-width:60ch;margin:0 auto 28px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Sektions-Basis ---- */
.sec{padding:48px 40px}
.sec-k{color:var(--red);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.sec h2{font-size:28px;font-weight:800;margin:0 0 6px;letter-spacing:-.015em}
.sec .lead{color:var(--muted);font-size:15.5px;margin:0 0 26px}
.sec.soft{background:var(--soft);border-block:1px solid var(--line)}
.center{text-align:center}
.center .lead{margin-inline:auto;max-width:52ch}

/* ---- Abteilungs-Karten ---- */
.abt{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ab{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;transition:.15s}
.ab:hover{border-color:var(--band-2);box-shadow:0 10px 26px rgba(20,22,25,.08);transform:translateY(-2px)}
.ab .age{display:inline-block;background:#fbe7ea;color:var(--red);font-weight:800;font-size:14px;
  padding:5px 12px;border-radius:999px;margin-bottom:12px}
.ab b{display:block;font-size:17px;margin-bottom:4px}
.ab span{font-size:14px;color:var(--muted);line-height:1.5}
.ab .when{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}

/* ---- Kennzahlen ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.fact .n{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.fact .l{font-size:13px;color:var(--muted);margin-top:5px}
.fact.r .n{color:var(--red)}
a.fact{display:block;transition:.15s}
a.fact:hover{border-color:var(--band-2);box-shadow:0 10px 26px rgba(20,22,25,.09);transform:translateY(-2px)}

/* ---- Einsatz-Liste ---- */
.elist{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.erow{display:grid;grid-template-columns:104px 92px 1fr;gap:16px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--line)}
.erow:first-child{border-top:none}
.erow .d{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* eigenständig, damit die Labels auch auf Unterseiten kompakt bleiben */
.tag{display:inline-block;justify-self:start;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-align:center;padding:4px 9px;border-radius:5px;background:var(--pill);color:var(--pill-ink);white-space:nowrap}
.tag.brand{background:#fbe7ea;color:var(--red)}
.tag.hilfe{background:#e8f0fb;color:#1f5fbf}
.tag.alarm{background:#fdf3dd;color:#96690a}
.erow .m{font-size:15px}

/* ---- Fahrzeug-Kacheln (Teaser) ---- */
.fleet{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.fz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 14px;text-align:center;transition:.15s}
.fz:hover{border-color:var(--band-2);transform:translateY(-2px)}
.fz .ic{font-size:26px;margin-bottom:8px}
.fz .rn{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fz b{display:block;font-size:14.5px;margin-top:3px}

/* ---- Mitmachen-Band (präsent) ---- */
.join-band{background:var(--dark);color:#e8eaed;padding:44px 40px}
.join-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:1040px;margin:0 auto}
.join-band h2{font-size:30px;margin:0 0 12px;color:#fff;font-weight:800;letter-spacing:-.02em}
.join-band p{color:#b7bcc2;font-size:16px;margin:0 0 18px}
.join-list{list-style:none;padding:0;margin:0}
.join-list li{display:flex;gap:14px;padding:11px 0;border-top:1px solid #3a3f45;font-size:15px;align-items:baseline}
.join-list li:first-child{border-top:none}
.join-list .w{color:var(--gold);font-weight:700;min-width:104px;font-size:13.5px}
.join-list .v{color:#dfe3e7}

/* ---- Historie-Teaser (schlank) ---- */
.hist{background:var(--soft);border-block:1px solid var(--line);padding:34px 40px}
.hist-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  max-width:1040px;margin:0 auto}
.hist .y{font-size:40px;font-weight:800;color:var(--red);letter-spacing:-.02em;line-height:1;flex:none}
.hist .t b{display:block;font-size:18px;margin-bottom:3px}
.hist .t p{margin:0;color:var(--muted);font-size:15px;max-width:62ch}
.hist a.lnk{color:var(--red);font-weight:700;font-size:14.5px;white-space:nowrap}

/* ---- Footer ---- */
.foot{background:var(--band);border-top:3px solid var(--red);padding:28px 40px}
.foot-in{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:14px;color:var(--pill-ink)}
.foot b{color:var(--ink)}
.foot .n{font-weight:700}.foot .n b{color:var(--red)}
.foot-links a:hover{color:var(--red)}
.foot-social{display:flex;gap:12px;align-items:center}
.foot-social a{display:inline-flex;color:var(--pill-ink);transition:color .15s,transform .15s}
.foot-social a:hover{color:var(--red);transform:translateY(-1px)}
.foot-social svg{width:22px;height:22px;fill:currentColor;display:block}
/* ============ Kleiderverwaltung: Eltern-Ansicht ============ */
.klk-tab{width:100%;border-collapse:collapse;margin:14px 0}
.klk-tab th,.klk-tab td{text-align:left;padding:9px 10px;border-bottom:1px solid #e3e3e6}
.klk-tab th{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:#777}
.klk-badge{display:inline-block;padding:2px 12px;border-radius:999px;font-size:13px;font-weight:600}
.klk-badge.ok{background:#e6f4ea;color:#137333}
.klk-badge.warn{background:#fbe7ea;color:#b32d2e}
.klk-badge.pln{background:#eee;color:#666}
.klk-flammen{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.klk-fl{padding:6px 13px;border-radius:999px;border:2px solid #e3e3e6;font-weight:600;color:#999;font-size:14px}
.klk-fl.on{border-color:var(--red);background:#fbe7ea;color:var(--red)}
.klk-form{background:#f7f7f8;border:1px solid #e3e3e6;border-radius:10px;padding:20px;margin-top:24px}
.klk-form label{display:block;font-weight:600;margin:12px 0 4px}
.klk-form input[type=text],.klk-form input[type=email],.klk-form select,.klk-form textarea{width:100%;max-width:480px;font-size:15px;padding:8px 10px}
.klk-tausch{margin-top:6px;font-size:12.5px;color:#b7791f;display:flex;flex-direction:column;gap:2px}
.klk-tausch .ok{color:#137333;font-weight:600}
/* Erstausstattung (neu angelegtes Kind): hervorgehobener Bestell-Block */
.klk-erst{background:#eef6ff;border:1px solid #cfe2ff;border-radius:12px;padding:20px 22px;margin:20px 0 6px}
.klk-erst h3{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
.klk-erst > p{margin:0 0 4px;color:var(--ink-2);line-height:1.6;max-width:62ch}
.klk-erst .klk-form{background:#fff;margin-top:16px}
.klk-erst-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 22px}
.klk-erst-sizes .fld label{margin-top:12px}
.klk-erst-sizes .fld select{max-width:100%}
.klk-erst .klk-auto{margin:14px 0 0;font-size:13.5px;color:#666}
.klk-erst-note{background:#eef6ff;border:1px solid #cfe2ff;border-radius:12px;padding:16px 20px;margin:20px 0 6px;color:#1c4e80}
.klk-erst-note b{display:block;font-size:16px;margin-bottom:3px}
:root[data-theme="dark"] .klk-erst,:root[data-theme="dark"] .klk-erst-note{background:#12233a;border-color:#26466e;color:#cfe2ff}
:root[data-theme="dark"] .klk-form{background:var(--soft);border-color:var(--line)}
:root[data-theme="dark"] .klk-form input[type=text],:root[data-theme="dark"] .klk-form input[type=email],:root[data-theme="dark"] .klk-form input[type=password],:root[data-theme="dark"] .klk-form select,:root[data-theme="dark"] .klk-form textarea{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
:root[data-theme="dark"] .klk-erst .klk-form{background:#1a1d22}
:root[data-theme="dark"] .klk-erst .klk-auto{color:#9fb4cf}
/* Spam-geschützte Mailadressen (antispambot): als Link erkennbar, mit Hover-Feedback,
   lange Adressen sauber umbrechen. */
.ffw-mail{overflow-wrap:anywhere;word-break:break-word;color:var(--red);text-decoration:none}
.ffw-mail:hover,.ffw-mail:focus-visible{text-decoration:underline;text-underline-offset:2px}
/* Fließtext-Links im Inhalt als Links erkennbar machen (Markenrot) + Hover-Unterstreichung.
   Global, aber gezielt: nur echte Textlinks (Absätze, Listen, Hinweisboxen) — NICHT
   Navigation, Buttons, Chips oder Karten, die ebenfalls <a> sind. */
.prose p a,.prose li a,.merke a,.achtung a,.sec p a,.sec li a,.it .bd p a{color:var(--red);text-decoration:none}
.prose p a:hover,.prose li a:hover,.merke a:hover,.achtung a:hover,.sec p a:hover,.sec li a:hover,.it .bd p a:hover,
.prose p a:focus-visible,.prose li a:focus-visible,.merke a:focus-visible,.achtung a:focus-visible,.sec p a:focus-visible,.sec li a:focus-visible,.it .bd p a:focus-visible{text-decoration:underline;text-underline-offset:2px}
/* Knoten-Foto pro Abschnitt (gemeinfreie Wikimedia-Fotos) */
.knotfig{margin:14px 0 20px;max-width:380px}
.knotfig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.knotfig figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
/* Mitglieder-Steckbriefe ("Wir stellen uns vor") */
.stbf-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:24px 0}
.stbf{flex:0 1 360px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:.15s}
.stbf:hover{border-color:var(--band-2);box-shadow:0 10px 26px rgba(20,22,25,.08);transform:translateY(-2px)}
.stbf-head{display:flex;gap:14px;align-items:center}
.stbf-av{flex:none;width:66px;height:66px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.stbf-av img{width:100%;height:100%;object-fit:cover}
.stbf-av svg{width:38px;height:38px;color:var(--muted)}
.stbf-name{font-weight:800;font-size:18px;line-height:1.15}
.stbf-role{font-size:13px;color:var(--red);font-weight:700;margin-top:3px}
.stbf-facts{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--ink-2);line-height:1.45}
.stbf-facts .k{color:var(--muted)}
.stbf-quote{background:var(--soft);border-left:3px solid var(--red);border-radius:8px;padding:12px 14px;font-size:15px;line-height:1.5}
.stbf-quote .ql{display:block;font-size:12px;letter-spacing:.02em;color:var(--red);margin-bottom:3px;text-transform:uppercase;font-weight:700}
.stbf-qas{display:flex;flex-direction:column;gap:13px}
.stbf-qa{display:flex;flex-direction:column;gap:2px}
.stbf-qa .q{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--red);line-height:1.3}
.stbf-qa .a{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.stbf-contact{margin-top:2px;font-size:14px;font-weight:700}
/* Kompakter Ansprechpartner klickbar → Steckbrief im Overlay */
.person-btn{width:100%;text-align:left;background:none;border:0;padding:8px 0;font:inherit;color:inherit;cursor:pointer;display:flex;gap:13px;align-items:center}
.person-btn:hover b,.person-btn:focus-visible b{color:var(--red)}
.person-btn .pmore{margin-left:auto;font-size:12px;font-weight:800;color:var(--red);white-space:nowrap}
.stbf-modal{position:fixed;inset:0;z-index:1000;background:rgba(12,14,17,.9);display:none;place-items:center;padding:22px;overflow:auto}
.stbf-modal.open{display:grid}
.stbf-modal-in{max-width:420px;width:100%}
.stbf-modal-in .stbf{max-width:none;flex:none;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.stbf-modal-x{position:fixed;top:14px;right:20px;background:none;border:0;color:#fff;font-size:36px;line-height:1;cursor:pointer;z-index:1}
/* Termine: feste Regeltermine (Karten) + kommende Termine (Liste) */
.rt-grid{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0}
.rt{flex:1 1 240px;max-width:340px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:16px 18px}
.rt b{display:block;font-size:16px;margin-bottom:3px}
.rt span{font-size:14px;color:var(--ink-2);line-height:1.5}
.termine{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.termin{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;align-items:flex-start}
.termin.oeff{border-color:var(--red);box-shadow:0 6px 18px rgba(200,16,46,.07)}
.tdate{flex:none;text-align:center;min-width:62px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 6px 7px}
.tdate .wd{font-size:11px;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.tdate .d{font-size:24px;font-weight:800;line-height:1.05}
.tdate .m{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tbody{flex:1;min-width:0}
.tbody h3{font-size:17px;margin:2px 0 4px}
.tmeta{font-size:14px;color:var(--muted);line-height:1.5}
.tcat{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-bottom:5px}
.tcat.einsatzdienst{background:#fbe7ea;color:var(--red)}
.tcat.jugend{background:#ffe6d3;color:#b5560f}
.tcat.kinder{background:#fff1c9;color:#8a6a00}
.tcat.verein{background:#e5e9ef;color:#3a4657}
.tcat.oeffentlich{background:#dff3e4;color:#1a7f37}
.tdesc{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
.tdesc p{margin:0}
.tempty{color:var(--muted)}
.gal.tplakat{display:block;max-width:200px;margin-top:12px}
.gal.tplakat a{cursor:zoom-in}
.gal.tplakat img{min-height:0;max-height:none;height:auto;object-fit:contain}
:root[data-theme="dark"] .tcat.jugend{background:#3a2a1c;color:#ffb37a}
:root[data-theme="dark"] .tcat.kinder{background:#3a331a;color:#e9c74a}
:root[data-theme="dark"] .tcat.verein{background:#2b3340;color:#b9c6d8}
:root[data-theme="dark"] .tcat.oeffentlich{background:#1e3325;color:#7fd79a}

/* ---- Unterseiten-Kopf ---- */
.phead{background:var(--band);border-bottom:1px solid var(--band-2);padding:30px 40px}
.phead-in{max-width:1040px;margin:0 auto}
.bc{font-size:13px;color:#7a7f85;font-weight:600;margin-bottom:10px}
.bc a:hover{color:var(--red)}
.phead h1{font-size:34px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.phead .lead{color:var(--pill-ink);font-size:16.5px;max-width:64ch;margin:0}

@media(max-width:880px){
  .abt,.facts,.fleet,.join-in{grid-template-columns:1fr 1fr}
  .nav ul{gap:16px;font-size:14px}
  .hero h1{font-size:30px}
  .erow{grid-template-columns:88px 80px 1fr;gap:10px}
}
@media(max-width:560px){
  .abt,.facts,.fleet{grid-template-columns:1fr}
  .top-in,.nav-in,.sec,.hero,.join-band,.hist,.phead{padding-inline:20px}
}

/* ============ Warnhinweis-Band (unter der Navigation) ============ */
.warn{display:flex;align-items:flex-start;gap:14px;padding:14px 40px;border-bottom:1px solid rgba(0,0,0,.08);
  background:#fdf3dd;color:#6b4e05}
.warn .ic{font-size:22px;line-height:1.2;flex:none}
.warn .bd{flex:1;min-width:0}
.warn .hl{font-weight:800;font-size:16px;letter-spacing:-.01em;margin:0 0 2px}
.warn p{margin:0;font-size:14.5px;line-height:1.5;opacity:.95}
.warn .meta{margin-top:6px;font-size:12.5px;opacity:.75;display:flex;gap:14px;flex-wrap:wrap}
.warn .more{align-self:center;flex:none;font-weight:700;font-size:14px;white-space:nowrap;
  border:2px solid currentColor;border-radius:7px;padding:9px 16px}
.warn .more:hover{background:rgba(0,0,0,.08)}
/* Stufen */
.warn.stufe2{background:#fdf3dd;color:#6b4e05}
.warn.stufe3{background:#fbe3d4;color:#8a3d0b}
.warn.stufe4{background:#c8102e;color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.warn.stufe4 .more:hover{background:rgba(255,255,255,.16)}
.warn.amtlich{background:#7a1020;color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.warn.amtlich .more:hover{background:rgba(255,255,255,.16)}
.warn.eigen{background:var(--dark);color:#e8eaed}
.warn.eigen .more:hover{background:rgba(255,255,255,.12)}
.warn.ok{background:var(--soft);color:var(--ink-2);border-bottom:1px solid var(--line)}
.warn.ok .hl{font-size:14.5px;font-weight:700}
@media(max-width:880px){.warn{padding:13px 20px;flex-wrap:wrap}.warn .more{width:100%;text-align:center}}

/* ============ Hero A1 (kompakt zentriert) ============ */
.hero.k1{padding:20px 40px 26px}
.hero.k1 .sky{max-width:520px;margin:0 auto 12px}
.hero.k1 .ey{font-size:11.5px;margin:0 0 7px}
.hero.k1 h1{font-size:32px;line-height:1.12;margin:0 auto 9px;max-width:26ch}
.hero.k1 .sub{font-size:16px;line-height:1.55;margin:0 auto 18px;max-width:64ch}
.hero.k1 .btn{padding:12px 22px;font-size:15px}
@media(max-width:880px){.hero.k1 h1{font-size:26px}}

/* ============ WP-Anpassungen ============ */
.nav ul li{margin:0}
.nav .current-menu-item > a,.nav .current_page_item > a{color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.page-content{padding:36px 40px;max-width:900px}
.page-content h2{font-size:24px;margin:28px 0 10px;letter-spacing:-.01em}
.page-content p{margin:0 0 14px;line-height:1.7}

/* ============ Unterseiten (Fahrzeuge, Einsätze, Geschichte) ============ */

.vlist{display:flex;flex-direction:column;gap:18px;padding:34px 40px 48px}
.vlist .v{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:190px 1fr}
.vlist .v .vi{background:var(--dark);color:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px 16px;text-align:center}
.vlist .v .vi .ic{font-size:40px;margin-bottom:10px}
.vlist .v .vi .rn{font-size:12px;color:#9aa1a8;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.vlist .v .vi .kz{font-size:16px;font-weight:800;margin-top:2px}
.vlist .v .vb{padding:22px 24px}
.vlist .v .vb h3{margin:0 0 3px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.vlist .v .vb .ty{color:var(--muted);font-size:14px;margin-bottom:14px}
.vspecs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.vs{background:var(--soft);border-radius:8px;padding:10px 12px}
.vs .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.vs .val{font-weight:700;font-size:14.5px;margin-top:2px}
.vlist .v .vb p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
@media(max-width:880px){.vlist .v{grid-template-columns:1fr}.vspecs{grid-template-columns:1fr 1fr}}

.years{display:flex;gap:9px;flex-wrap:wrap;padding:24px 40px 0}
.year{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  font-size:14px;font-weight:700;color:var(--muted)}
.year.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.ewrap{padding:20px 40px 48px}
.ebig{display:grid;grid-template-columns:96px 96px 1fr;gap:16px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line)}
.ebig:first-child{border-top:none}
.ebig .d{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ebig .d b{display:block;color:var(--ink);font-size:12px;font-weight:800}
.ebig .m b{font-size:16px}
.ebig .m p{margin:3px 0 0;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:880px){.ebig{grid-template-columns:84px 84px 1fr;gap:10px}}

.miles{background:var(--soft);border-bottom:1px solid var(--line);padding:36px 40px 40px}
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;max-width:960px;margin:0 auto}
.tl::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:3px;background:var(--band-2);border-radius:2px}
.tp{text-align:center;position:relative;padding:0 6px}
.tp .dot{width:24px;height:24px;border-radius:50%;background:var(--surface);border:3px solid var(--red);
  margin:0 auto 11px;position:relative;z-index:1}
.tp .y{font-size:17px;font-weight:800}
.tp .e{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.chron{padding:44px 40px 20px;max-width:900px;margin:0 auto}
.era{margin-bottom:38px}
.era-h{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.era-h .sp{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted);background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.era-h h2{font-size:22px;margin:0;font-weight:800;letter-spacing:-.01em}
.items{position:relative;padding-left:22px}
.items::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.it{position:relative;display:grid;grid-template-columns:82px 1fr;gap:18px;padding:12px 0;align-items:start}
.it::before{content:"";position:absolute;left:-22px;top:19px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:3px solid var(--red);box-shadow:0 0 0 3px #fff}
.it .yr{font-size:18px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;line-height:1.4}
.it .bd > b{display:block;font-size:16.5px;margin-bottom:2px}
.it .bd p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.6}
.it.hl .bd{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.it.hl .yr{color:var(--ink)}
@media(max-width:880px){.tl{grid-template-columns:1fr 1fr 1fr;gap:20px 0}.tl::before{display:none}
  .it{grid-template-columns:1fr;gap:2px}.era-h{flex-direction:column;align-items:flex-start;gap:8px}}
/* Chronik: Führungsreihe der Gründerjahre („die Menschen dahinter") */
.fuehrung{max-width:900px;margin:0 auto;padding:6px 40px 44px}
.fuehrung .lead-sm{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 20px;max-width:66ch}
.fuehrung .lead-sm .flow{font-weight:700;color:var(--ink);white-space:nowrap}
.fuehrung .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.fuehrung .card{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column}
.fuehrung .card .nm{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.fuehrung .card .ro{font-size:13px;font-weight:700;color:var(--red);margin-top:3px}
.fuehrung .card .de{font-size:14px;color:var(--ink-2);line-height:1.55;margin:9px 0 0}
.fuehrung .card .dt{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:9px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.fuehrung{padding:6px 18px 30px}}
/* Chronik: Fahrzeug-Historie (Tabelle) */
.fuhrpark{max-width:900px;margin:0 auto;padding:6px 40px 30px}
.fuhrpark .fzwrap{overflow-x:auto}
table.fzt{width:100%;border-collapse:collapse;margin-top:8px;font-size:14.5px;min-width:460px}
table.fzt th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 12px;border-bottom:2px solid var(--line)}
table.fzt td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.fzt td.jahr{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--red);font-weight:700}
table.fzt td.typ{font-weight:600}
table.fzt tbody tr:hover td,table.fzt tr:hover td{background:var(--soft)}
table.fzt .fznote{color:var(--muted);font-size:13px;margin:10px 0 0}
/* Chronik: Jugendfeuerwehr-Block */
.jfblock{max-width:900px;margin:0 auto;padding:6px 40px 40px}
.jfblock .lead-sm{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 14px;max-width:66ch}
.jf-mile{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:7px}
.jf-mile li{display:grid;grid-template-columns:64px 1fr;gap:12px;font-size:14.5px;color:var(--ink-2);align-items:baseline}
.jf-mile .y{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.jf-warte{color:var(--muted);font-size:13.5px;line-height:1.6;margin:14px 0 0}
.jf-cta{margin-top:18px}
@media(max-width:640px){.fuhrpark{padding:6px 18px 24px}.jfblock{padding:6px 18px 30px}}
/* Fahrzeug-Historie mobil: gestapelt statt horizontalem Scroll */
@media(max-width:560px){
  .fuhrpark .fzwrap{overflow-x:visible}
  table.fzt{min-width:0}
  table.fzt thead{display:none}
  table.fzt,table.fzt tbody,table.fzt tr,table.fzt td{display:block;width:auto}
  table.fzt tr{padding:9px 0;border-bottom:1px solid var(--line)}
  table.fzt tr:hover td{background:none}
  table.fzt td{border:none;padding:1px 0}
  table.fzt td.jahr{font-size:12.5px}
  table.fzt td.typ{font-size:15.5px}
  table.fzt td:last-child{color:var(--muted);font-size:13.5px}
}
/* Fahrzeug-Galerie (historische Fotos) */
.fzgh{max-width:900px;margin:22px auto 0;padding:0 40px}
.fzgh h3{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;margin:0 0 3px;letter-spacing:-.01em}
.fzgh .sub{color:var(--muted);font-size:13.5px;margin:0 0 12px}
.fzgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.fzgal figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.fzgal img{display:block;width:100%;height:140px;object-fit:cover;background:var(--soft)}
.fzgal figcaption{padding:8px 11px}
.fzgal figcaption b{display:block;font-size:14px;letter-spacing:-.01em}
.fzgal figcaption span{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.fzgh .fznote{margin-top:12px}
@media(max-width:640px){.fzgh{padding:0 18px}.fzgal{grid-template-columns:1fr 1fr;gap:10px}.fzgal img{height:110px}}


/* ============ Fahrzeug-Karten mit Foto ============ */
.vlist .v.mit-foto{grid-template-columns:260px 1fr}
.vlist .v.mit-foto{align-items:start}
.vlist .v .vi.foto{padding:0;position:relative;overflow:hidden;height:280px;align-self:start;background:#1a1d21}
.vlist .v .vi.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vlist .v .vi.foto .lbl{position:absolute;left:0;right:0;bottom:0;background:rgba(18,21,24,.8);padding:7px 12px;text-align:center}
.vlist .v .vi.foto .lbl .rn{display:block;font-size:11px;color:#c6ccd4;font-variant-numeric:tabular-nums}
.vlist .v .vi.foto .lbl .kz{display:block;font-size:15px;font-weight:800;color:#fff}
.foto-credit{font-size:11.5px;color:var(--muted);margin-top:6px}
@media(max-width:880px){.vlist .v.mit-foto{grid-template-columns:1fr}.vlist .v .vi.foto{height:210px}}

/* ============ Abteilungs-Seiten ============ */
.subnav{display:flex;gap:10px;flex-wrap:wrap;padding:16px 40px;background:var(--soft);border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink)}
.chip .n{color:var(--red);font-weight:800}
.chip:hover{border-color:var(--red)}
.chip.on{background:var(--red);color:#fff;border-color:var(--red)}
.chip.on .n{color:#fff}
.dlay{display:grid;grid-template-columns:1fr 320px;gap:36px;padding:40px}
.dlay.solo{grid-template-columns:minmax(0,760px);justify-content:center}
.infobox.inline{max-width:440px;margin:2px 0 20px}
.prose h2{font-size:22px;margin:0 0 12px;letter-spacing:-.01em}
.prose p{color:var(--ink-2);line-height:1.7;margin:0 0 14px;font-size:15.5px}
.prose>p:first-child{font-size:17px;color:var(--ink)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 8px}
.act{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:12px;padding:15px 18px}
.act .ic{font-size:22px;margin-bottom:8px}
.act b{display:block;font-size:15.5px;margin-bottom:4px;color:var(--ink);letter-spacing:-.01em}
.act span{font-size:13.5px;color:var(--muted);line-height:1.55}
.acts.drei{grid-template-columns:1fr 1fr 1fr}
.fd-graf{max-width:340px;margin:22px auto 10px;padding:0}
.fd-graf svg{display:block;width:100%;height:auto}
.diag{max-width:620px;margin:20px auto 6px}
.diag svg{display:block;width:100%;height:auto}
.diag figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.5}
.prose figure.foto{margin:20px 0}
.prose figure.foto img{width:100%;display:block;border-radius:12px;border:1px solid var(--line)}
.prose figure.foto figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.prose figure.foto.hoch{max-width:360px;margin-left:0}
/* Ablauf-/Flussdiagramm (z.B. Löschwasserweg) */
.flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:22px 0 10px}
.flow .fstep{flex:1 1 140px;min-width:128px;max-width:185px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.flow .fic{font-size:26px;display:block;margin-bottom:6px}
.flow .fstep b{display:block;font-size:15px}
.flow .fstep .ft{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.flow .farr{color:var(--red);font-size:22px;font-weight:800;flex:0 0 auto;line-height:1}
@media(max-width:560px){.flow{flex-direction:column}.flow .fstep{max-width:none;width:100%}.flow .farr{transform:rotate(90deg)}}
/* Download-Zeile (z.B. Beitrittserklärung PDF) */
.dl-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 8px}
.dl-meta{font-size:13px;color:var(--muted)}
.btn.pdf::before{content:"📄";margin-right:8px}
.hinweis-klein{font-size:13.5px;color:var(--muted);margin:6px 0 0}
/* Hydranten-Schild mit Legende */
.hydsign{display:grid;grid-template-columns:206px 1fr;gap:28px;align-items:center;margin:22px 0 8px}
.hydsign-img{margin:0}
.hydsign-img svg{width:100%;height:auto;display:block}
.hydsign-leg .hrow{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.hydsign-leg .hrow:first-child{border-top:none;padding-top:0}
.hydsign-leg .hk{flex:none;min-width:44px;font-weight:800;color:var(--red);font-size:16px}
@media(max-width:640px){.hydsign{grid-template-columns:1fr;gap:16px;justify-items:start}.hydsign-img{max-width:210px}}
/* Icon-Badges: selbst gezeichnete SVG-Icons im Markenlook statt Emoji */
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fbe7ea;color:var(--red);margin-bottom:10px}
.ico svg{width:26px;height:26px;display:block}
.lbadge{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;font-weight:800;font-size:19px;margin-bottom:10px}
.flow .fstep .ico{margin:0 auto 6px}
.hub .ab .ico{margin-bottom:12px}
/* kleine Icons in Chips, Warnboxen, Listen (folgen der Textfarbe) */
.chip .n{display:inline-flex;align-items:center}
.chip .n svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.achtung .ic{color:var(--red)}
.achtung .ic svg{width:26px;height:26px}
.mitweg .bd li .ic{color:var(--red);display:inline-flex}
.mitweg .bd li .ic svg{width:20px;height:20px}
/* Quiz des Monats */
.quiz{max-width:760px;margin:0 auto;padding:0 20px}
.quiz-kopf{text-align:center;margin-bottom:22px}
.quiz-sub{color:var(--muted);font-size:15px;margin:6px 0 0}
.quiz-monat{display:inline-block;margin-left:4px;font-weight:700;color:var(--ink)}
.quiz .q{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 14px}
.quiz .qf{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:16.5px;margin:0 0 14px;line-height:1.4}
.quiz .qn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:14px;display:grid;place-items:center}
.quiz .opts{display:flex;flex-direction:column;gap:10px}
.quiz .opt{text-align:left;font:inherit;font-size:15px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 15px;cursor:pointer;color:var(--ink);transition:background .12s,border-color .12s}
.quiz .opt:hover{border-color:#c7ccd2;background:var(--pill)}
.quiz .q.beantwortet .opt{cursor:default}
.quiz .q.beantwortet .opt:hover{background:var(--soft);border-color:var(--line)}
.quiz .opt.richtig{background:#e6f5ec;border-color:#9bd3b0;color:#1c6b3c;font-weight:600}
.quiz .opt.falsch{background:#fbe7ea;border-color:#f0c4cb;color:#a20d24;font-weight:600}
.quiz .qexpl{margin-top:12px;font-size:14.5px;color:var(--ink-2);line-height:1.6;background:var(--soft);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:11px 14px}
.quiz .qexpl a{color:var(--red);font-weight:600;white-space:nowrap}
.has-js .quiz .qexpl{display:none}
.has-js .quiz .q.zeig-aufloesung .qexpl{display:block}
.quiz-score{margin:6px 0 4px;text-align:center;font-size:19px;font-weight:800;color:var(--ink);background:#fdf8ea;border:1px solid #ecd9a0;border-radius:12px;padding:16px}
.quiz-again{display:none;text-align:center;margin:12px 0 0}
.has-js .quiz-again{display:block}
@media(max-width:560px){.quiz{padding:0 4px}.quiz .q{padding:16px 16px}}
.ytlite{margin:18px 0 6px}
.ytl-cover{position:relative;display:flex;align-items:center;gap:16px;aspect-ratio:16/9;overflow:hidden;
  text-decoration:none;border-radius:14px;padding:24px;border:1px solid #2b2f34;
  background:radial-gradient(130% 130% at 22% 18%,#33383f,#191c20)}
.ytl-cover::after{content:"🧯";position:absolute;right:-4px;bottom:-16px;font-size:150px;opacity:.10;pointer-events:none}
.ytl-play{flex:none;width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s ease,background .15s ease}
.ytl-play::before{content:"";border-style:solid;border-width:12px 0 12px 21px;border-color:transparent transparent transparent #fff;margin-left:5px}
.ytl-cover:hover .ytl-play,.ytl-cover:focus-visible .ytl-play{transform:scale(1.07);background:var(--red-d)}
.ytl-txt{position:relative;color:#fff}
.ytl-txt b{display:block;font-size:18px;line-height:1.3;margin-bottom:3px}
.ytl-txt span{font-size:13.5px;color:#c7ccd2}
.ytl-hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.ytlite iframe{width:100%;aspect-ratio:16/9;display:block;border:0;border-radius:14px}
@media(max-width:560px){.ytl-cover{padding:16px;gap:13px}.ytl-play{width:52px;height:52px}
  .ytl-play::before{border-width:10px 0 10px 17px}.ytl-txt b{font-size:15.5px}.ytl-cover::after{font-size:104px}}
.aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;align-self:start}
.infobox a.ilink{display:block;padding:9px 0;border-top:1px solid var(--line);color:var(--red);font-weight:600;font-size:14px;text-decoration:none}
.infobox a.ilink:first-of-type{border-top:none}
.infobox a.ilink:hover{color:var(--red-d)}
.infobox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;border-top:4px solid var(--red)}
.infobox.gold{border-top-color:var(--gold)}
.infobox .ih{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9aa0a7;margin-bottom:12px}
.irow{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.irow:first-of-type{border-top:none}
.irow .k{color:var(--muted);min-width:70px;font-size:12.5px;padding-top:1px}
.irow .iv{font-weight:600}
.irow .iv a{color:var(--red)}
.person{display:flex;gap:13px;align-items:center;padding:8px 0}
.avatar{width:44px;height:44px;border-radius:50%;background:#fbe7ea;color:var(--red);font-weight:800;font-size:15px;
  display:grid;place-items:center;flex:none;border:2px solid #f0c4cb;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.person b{display:block;font-size:15px}
.person span{display:block;font-size:12.5px;color:var(--muted)}
/* Gut-zu-wissen: gruppierte Themenliste (icon- und kastenfrei) */
.gzw{max-width:1040px;margin:0 auto;padding:34px 40px}
.gzw .gg{margin-bottom:26px}
.gzw .gg:last-child{margin-bottom:0}
.gzw .gh{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#9aa0a7;font-weight:800;margin:0 0 2px}
.gzw a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.gzw a:hover b{color:var(--red)}
.gzw a b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.gzw a .d{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5}
.gzw a .ar{flex:none;color:var(--red);font-weight:800;font-size:18px}
@media(max-width:640px){.gzw{padding:24px 18px}.gzw a b{font-size:16px}}
/* Warn-App-Empfehlungen (leicht, mit Store-Links) */
.apps{margin:16px 0 6px}
.app{padding:16px 0;border-top:1px solid var(--line)}
.app:first-child{border-top:none;padding-top:2px}
.app>b{font-size:17px}
.app .empf{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--red);background:#fbe7ea;padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:2px}
.app p{margin:5px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.applinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.applinks a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--band-2);border-radius:9px;padding:9px 15px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;background:var(--surface)}
.applinks a::before{content:"↓";color:var(--red);font-weight:800}
.applinks a:hover{border-color:var(--red);color:var(--red)}
/* Punkt-Liste (leicht, roter Punkt) */
.prose ul.plist{list-style:none;padding:0;margin:14px 0 6px}
.prose ul.plist li{position:relative;padding:9px 0 9px 24px;border-top:1px solid var(--line);font-size:14.8px;line-height:1.55;color:var(--ink-2)}
.prose ul.plist li:first-child{border-top:none}
.prose ul.plist li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.prose ul.plist li b{color:var(--ink)}
/* Wasserentnahme: Foto-Reihen (Foto + Text), Fotos in Naturformat */
.went{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.went:first-of-type{border-top:none;padding-top:4px}
.went-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.went-txt h3{font-size:18px;margin:0 0 6px}
.went-txt p{margin:0;color:var(--ink-2);font-size:14.8px;line-height:1.6}
.went-txt .cred{display:block;font-size:11.5px;color:var(--muted);margin-top:8px}
@media(max-width:640px){.went{grid-template-columns:1fr;gap:13px;align-items:start}.went-img{max-width:300px}}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:8px}
.gal a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.gal img{width:100%;height:100%;min-height:150px;max-height:340px;object-fit:cover;display:block}
.gal a:first-child{grid-row:span 2}
.gal a:first-child img{max-height:none;height:100%}
/* Abteilungs-Hub */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:40px}
.hub .ab .age{margin-bottom:10px}
@media(max-width:880px){.dlay{grid-template-columns:1fr}.aside{position:static}.acts,.acts.drei{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}.gal a:first-child{grid-row:auto;grid-column:span 2}
  .hub{grid-template-columns:1fr}.subnav{padding:14px 20px}}

/* ============ Gut zu wissen ============ */
.wsteps{counter-reset:ws;display:flex;flex-direction:column;gap:12px;margin:18px 0}
.wstep{display:flex;gap:16px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px}
.wstep::before{counter-increment:ws;content:counter(ws);flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.wstep b{display:block;font-size:16px;margin-bottom:2px}
.wstep span{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.achtung{display:flex;gap:14px;background:#fbe7ea;border:1px solid #f0c4cb;border-radius:12px;
  padding:16px 18px;margin:18px 0}
.achtung .ic{font-size:24px;flex:none}
.achtung b{color:var(--red)}
.achtung p{margin:2px 0 0;font-size:14.5px;color:#6b2830;line-height:1.55}
.merke{background:#fdf8ea;border:1px solid #ecd9a0;border-radius:12px;padding:16px 18px;margin:18px 0;
  font-size:14.5px;color:#6b5a1e;line-height:1.6}
.merke b{color:#8a6d12}
.bktab{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.bktab th{background:var(--dark);color:#fff;text-align:left;padding:10px 14px;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase}
.bktab td{border-bottom:1px solid var(--line);padding:11px 14px;vertical-align:top}
.bktab tr:nth-child(even) td{background:var(--soft)}
.bktab .bk{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;
  background:var(--red);color:#fff;font-weight:800;font-size:16px}
.bktab .ja{color:#1e7a3d;font-weight:700}
.bktab .nein{color:var(--red);font-weight:700}
.siren{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.sig{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;border-left:5px solid var(--red)}
.sig.gruen{border-left-color:#1e7a3d}
.sig.grau{border-left-color:var(--muted)}
.sig b{display:block;font-size:16.5px;margin-bottom:4px}
.sig .ton{display:block;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:8px}
.sig p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tonbar{display:flex;gap:4px;height:16px;margin:8px 0;align-items:flex-end}
.tonbar i{background:var(--red);border-radius:2px;flex:none}
@media(max-width:880px){.bktab{font-size:13px}.bktab th,.bktab td{padding:8px}}

/* ============================================================
   MOBIL-SCHICHT — steht bewusst am Dateiende und übersteuert
   damit alle früheren Regeln (Kaskade).
   ============================================================ */

/* Kontakt-Karten: 3 Spalten nur auf Desktop */
.abt.drei{grid-template-columns:1fr 1fr 1fr}

/* Hamburger: auf Desktop unsichtbar */
.menu-btn{display:none;background:none;border:1px solid #4a5058;color:#e6e9ec;font:inherit;
  font-size:15px;font-weight:700;padding:9px 16px;border-radius:8px;cursor:pointer}

@media(max-width:880px){
  /* --- Navigation: Hamburger-Menü, auf Mobil oben angeheftet --- */
  .nav{position:sticky;top:0;z-index:900}
  .menu-btn{display:inline-flex;align-items:center}
  .nav-in{flex-wrap:wrap;padding:10px 16px;gap:12px}
  .nav ul{display:none;flex-direction:column;gap:0;width:100%;order:3;
    border-top:1px solid #3a3f45;margin-top:10px;padding-top:4px}
  .nav.open ul{display:flex}
  .nav ul a{padding:13px 4px;font-size:16px}
  .nav a.on{box-shadow:inset 3px 0 0 var(--red);padding-left:12px}
  .nav .join{margin-left:auto;padding:10px 18px}

  /* --- Kopfband kompakt --- */
  .top-in{padding:10px 16px}
  .brand .badge{padding:7px 11px}
  .brand .badge img{height:28px}
  .notruf{font-size:12px}
  .notruf b{font-size:17px}

  /* --- überall stapeln, was noch mehrspaltig war --- */
  .join-in{grid-template-columns:1fr;gap:24px}
  .abt.drei{grid-template-columns:1fr}
  .subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 16px}
  .chip{flex:none}
  .bktab{display:block;overflow-x:auto}
}

@media(max-width:640px){
  body{font-size:16px}
  /* Abstände */
  .sec,.hero,.hero.k1{padding-inline:18px}
  .sec{padding-block:32px}
  .phead{padding:20px 18px}
  .phead h1{font-size:25px}
  .phead .lead{font-size:15px}
  .dlay{padding:28px 18px;gap:26px}
  .vlist{padding:22px 18px 34px;gap:14px}
  .ewrap{padding:16px 18px 36px}
  .years{padding:16px 18px 0}
  .join-band{padding:32px 18px}
  .hist{padding:24px 18px}
  .foot{padding:22px 18px}
  .warn{padding:12px 16px}
  .chron{padding:30px 18px 10px}
  .miles{padding:26px 18px 30px}
  .hub{padding:24px 18px;gap:12px}

  /* Hero */
  .hero.k1 h1{font-size:24px}
  .hero.k1 .sub{font-size:15px}
  .hero .cta{gap:10px}
  .hero .cta .btn{flex:1 1 auto;text-align:center}

  /* Kennzahlen: 2 Spalten, kompakt */
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .fact{padding:13px 10px}
  .fact .n{font-size:23px}
  .fact .l{font-size:11.5px}

  /* Fahrzeug-Kacheln: 3 + 2 */
  .fleet{grid-template-columns:repeat(3,1fr);gap:9px}
  .fz{padding:12px 8px}
  .fz .ic{font-size:21px;margin-bottom:5px}
  .fz .rn{font-size:10px}
  .fz b{font-size:12px}

  /* Einsatz-Zeilen: Datum + Kategorie oben, Text darunter */
  .erow{grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px}
  .erow .m{grid-column:1/-1;font-size:14.5px}
  .ebig{grid-template-columns:1fr auto;gap:4px 10px}
  .ebig .d{display:flex;gap:8px;align-items:baseline}
  .ebig .d b{display:inline}
  .ebig .m{grid-column:1/-1}

  /* Abteilungs-Detail */
  .acts{gap:10px}
  .gal{gap:8px}
  .gal img{min-height:110px;max-height:220px}
  .avatar{width:38px;height:38px;font-size:13px}

  /* Ratgeber */
  .wstep{gap:12px;padding:13px 14px}
  .wstep::before{width:28px;height:28px;font-size:14px}
  .sig{padding:14px}
  .bktab th,.bktab td{padding:8px 10px;font-size:13px}

  /* Historie-Band + Footer stapeln zentriert */
  .hist-in{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:6px}

  /* Sicherheitsnetz gegen Querscrollen */
  body{overflow-x:clip}
}

/* ============ Fahrzeug-Teaser mit Fotos (statt Emojis) ============ */
.fz{padding:0;overflow:hidden;display:flex;flex-direction:column}
.fz .fzimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fz .fzt{display:block;padding:10px 8px 13px}
.fz .fzt .rn{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fz .fzt b{display:block;font-size:14.5px;margin-top:2px}
.fz:hover{box-shadow:0 10px 24px rgba(20,22,25,.12)}
@media(max-width:640px){
  .fleet{grid-template-columns:1fr 1fr}
  .fz .fzt{padding:8px 6px 10px}
  .fz .fzt b{font-size:13px}
}

/* ============ Einsatzstichworte: Zerlegung ============ */
.stichw{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.stichw .part{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:14px 20px;text-align:center;min-width:92px}
.stichw .part .code{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums}
.stichw .part.brand .code{color:var(--red)}
.stichw .part.gefahr{border-color:#c8102e;background:#fbe7ea}
.stichw .part.gefahr .code{color:var(--red)}
.stichw .part .lbl{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.35}
/* Beispiel-Zeilen (Kürzel → Klartext) */
.bsp{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.bsp .row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:13px 16px}
.bsp .row .kuerzel{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;padding-top:2px}
.bsp .row .klartext{font-size:14.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:640px){.bsp .row{grid-template-columns:1fr;gap:4px}}

/* ============ Einsätze: Stichwort-Chip + Detailseite ============ */
.ehinweis{padding:14px 40px 0;margin:0;color:var(--muted);font-size:14px}
.ehinweis a{color:var(--red);font-weight:700}
.ebig .m .etitle{color:inherit}
.ebig .m .etitle:hover b{color:var(--red)}
.stw{display:inline-block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  color:var(--pill-ink);background:var(--pill);border-radius:5px;padding:2px 8px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.stw:hover{background:var(--band-2);color:var(--red)}
.ebig .m .mehr{color:var(--red);font-weight:700;white-space:nowrap}
/* Detailseite */
.edetail{max-width:820px;padding:34px 40px 46px}
.edetail .emeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px}
.edetail .emeta .datum{color:var(--muted);font-size:14px}
.edetail .emeta .stw{margin-left:0}
.edetail .bericht{font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.edetail .bericht p{margin:0 0 15px}
.estw-box{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:22px 0;font-size:14.5px}
.estw-box a{color:var(--red);font-weight:700}
.equelle{font-size:13px;color:var(--muted);margin:6px 0 0}
.efahrzeuge{font-size:14.5px;color:var(--ink-2);margin:12px 0 0}
.efahrzeuge strong{color:var(--ink)}
.efahrzeuge a{color:var(--red);text-decoration:none}
.efahrzeuge a:hover,.efahrzeuge a:focus-visible{text-decoration:underline;text-underline-offset:2px}
.eback{display:inline-block;margin-top:20px;color:var(--red);font-weight:700}
@media(max-width:640px){.edetail{padding:26px 18px 36px}.ehinweis{padding:12px 18px 0}}

/* ============ Mitmachen-Seite ============ */
.mitwege{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:36px 40px}
.mitweg{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;color:inherit}
.mitweg:hover{box-shadow:0 14px 32px rgba(20,22,25,.11);transform:translateY(-3px)}
.mitweg .pic{height:210px;position:relative;background:#1a1d21}
.mitweg .pic img{width:100%;height:100%;object-fit:cover;display:block}
.mitweg .pic .agebadge{position:absolute;left:14px;bottom:14px;background:var(--red);color:#fff;
  font-weight:800;font-size:13px;padding:6px 15px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.mitweg .bd{padding:22px;flex:1;display:flex;flex-direction:column}
.mitweg .bd h3{margin:0 0 8px;font-size:21px;letter-spacing:-.01em}
.mitweg .bd .intro{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.mitweg .bd ul{list-style:none;padding:0;margin:0 0 18px}
.mitweg .bd li{padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;display:flex;gap:10px;align-items:baseline}
.mitweg .bd li:first-child{border-top:none}
.mitweg .bd li .ic{flex:none}
.mitweg .bd .go{margin-top:auto;color:var(--red);font-weight:700;font-size:15px}

/* Häufige Fragen (Aufklapper, ohne JavaScript) */
.mitfaq{padding:6px 40px 44px}
.mitfaq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.mitfaq summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.mitfaq summary::-webkit-details-marker{display:none}
.mitfaq summary::after{content:"+";color:var(--red);font-weight:800;font-size:21px;line-height:1;flex:none}
.mitfaq details[open] summary::after{content:"–"}
.mitfaq details[open] summary{border-bottom:1px solid var(--line)}
.mitfaq .antw{padding:14px 18px;color:var(--ink-2);font-size:15px;line-height:1.65}
.mitfaq .antw p{margin:0 0 10px}
.mitfaq .antw p:last-child{margin:0}

/* Übungszeiten-Streifen */
.zeiten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 40px 44px}
.zeit{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.zeit .tag2{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.zeit b{display:block;font-size:17px;margin:5px 0 3px}
.zeit span{font-size:13.5px;color:var(--muted)}
@media(max-width:880px){
  .mitwege{grid-template-columns:1fr;padding:26px 18px}
  .mitfaq{padding:6px 18px 34px}
  .zeiten{grid-template-columns:1fr;padding:0 18px 34px}
}

/* Galerie-Variante für genau drei Bilder: gleich große Kacheln, keine Zeilen-Spanne */
.gal.g3{grid-template-columns:repeat(3,1fr)}
.gal.g3 a:first-child{grid-row:auto;grid-column:auto}
.gal.g3 img,
.gal.g3 a:first-child img{height:250px;min-height:0;max-height:none}
@media(max-width:640px){.gal.g3{grid-template-columns:1fr 1fr}.gal.g3 a:first-child{grid-column:span 2}
  .gal.g3 img,.gal.g3 a:first-child img{height:180px}}

/* ============ Startseiten-Hero: Panorama-Skyline + Einsatz-Ticker ============ */
.hero9{background:var(--paper);text-align:left;padding:26px 40px 36px}
/* Logo-Badge im Seitenkopf: Startseite im Hero, Unterseiten im .phead — konsistent */
.hero9 .hlogo,.phead-logo{display:inline-flex;align-items:center;background:var(--dark);border-radius:10px;padding:9px 16px;margin:0 0 16px}
.hero9 .hlogo img,.phead-logo img{height:40px;width:auto;display:block}
.hero9 h1,.hero9 .sub,.hero9 .ey{margin-inline:0}
.hero9 .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.hero9 .skyband{margin-bottom:24px}
.hero9 .skyband img{width:100%;display:block}
.hero9 .hrow{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero9 h1{font-size:38px;line-height:1.08;letter-spacing:-.028em;margin:0 0 14px;font-weight:800;max-width:16ch}
.hero9 .sub{font-size:16.5px;color:var(--muted);line-height:1.6;margin:0 0 22px;max-width:46ch}
/* Einsatz-Ticker */
.tkbox{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.tkzahl{display:flex;align-items:baseline;gap:10px}
.tkzahl .gross{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--red);line-height:1;
  font-variant-numeric:tabular-nums}
.tkzahl .txt{font-size:14px;color:var(--muted)}
.tkkopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 10px}
.tktitel{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tkalle{color:var(--red);font-weight:700;font-size:13.5px;white-space:nowrap}
.tkzeile{display:grid;grid-template-columns:78px auto 1fr;gap:12px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.tkzeile:first-of-type{border-top:none}
.tkdat{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.tkzeile a{color:inherit}
.tkzeile a:hover{color:var(--red)}
@media(max-width:880px){.hero9 .hrow{grid-template-columns:1fr;gap:26px}}
@media(max-width:640px){
  .hero9{padding:18px 18px 30px}
  .hero9 .hlogo,.phead-logo{padding:7px 12px;margin-bottom:12px}
  .hero9 .hlogo img,.phead-logo img{height:32px}
  .hero9 h1{font-size:27px}
  .hero9 .sub{font-size:15.5px}
  .hero9 .cta .btn{flex:1 1 auto;text-align:center}
  .tkzeile{grid-template-columns:68px auto 1fr;gap:8px;font-size:13.5px}
  .tkzahl .gross{font-size:32px}
}

/* ============ Bild-Großansicht (Overlay) ============ */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(12,14,17,.93);
  display:none;align-items:center;justify-content:center;padding:28px 20px}
.lightbox.auf{display:flex}
.lightbox .lb-inhalt{margin:0;max-width:1100px;width:100%;text-align:center}
.lightbox img{max-width:100%;max-height:82vh;border-radius:10px;display:block;margin:0 auto;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox figcaption{color:#d7dce1;font-size:14.5px;margin-top:14px;line-height:1.5}
.lightbox button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;cursor:pointer;
  border-radius:50%;line-height:1;transition:.15s}
.lightbox button:hover,.lightbox button:focus-visible{background:rgba(255,255,255,.3);outline:none}
.lightbox .lb-zu{top:16px;right:18px;width:46px;height:46px;font-size:28px}
.lightbox .lb-nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:30px}
.lightbox .lb-zurueck{left:18px}
.lightbox .lb-vor{right:18px}
.gal a{cursor:zoom-in}
@media(max-width:640px){
  .lightbox{padding:16px 10px}
  .lightbox .lb-nav{width:42px;height:42px;font-size:26px}
  .lightbox .lb-zurueck{left:8px}.lightbox .lb-vor{right:8px}
  .lightbox figcaption{font-size:13.5px}
}

/* ============ Gefahren erkennen (GHS + Gefahrgut) ============ */
.ghsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.ghs{display:flex;gap:14px;align-items:center;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.ghs img{width:56px;height:56px;flex:none}
.ghs b{display:block;font-size:15px;margin-bottom:2px}
.ghs span{font-size:13px;color:var(--muted);line-height:1.45}
/* Gefahrgut-Warntafel */
.tafel-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:16px 0}
.warntafel{background:#f5a623;border:3px solid #1a1a1a;border-radius:6px;width:150px;flex:none;
  font-variant-numeric:tabular-nums;box-shadow:0 4px 14px rgba(20,22,25,.15)}
.warntafel .kznum{font-size:30px;font-weight:800;text-align:center;color:#1a1a1a;padding:6px 0;letter-spacing:.05em}
.warntafel .kznum.oben{border-bottom:3px solid #1a1a1a}
.tafel-wrap .erkl{flex:1;min-width:220px}
.tafel-wrap .erkl p{margin:0 0 8px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tafel-wrap .erkl .badge{display:inline-block;background:#f5a623;color:#1a1a1a;font-weight:800;
  font-size:12px;padding:2px 8px;border-radius:4px;margin-right:4px}
.kztab{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.kztab td{border-bottom:1px solid var(--line);padding:9px 12px;vertical-align:top}
.kztab tr:nth-child(even) td{background:var(--soft)}
.kztab .ziff{font-weight:800;color:var(--red);width:44px;text-align:center;font-size:16px}
@media(max-width:640px){.ghsgrid{grid-template-columns:1fr}}

/* ============ Wer macht was: Einsatz-Organigramm ============ */
.eo{margin:20px 0}
.eo-stufe{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;position:relative}
.eo-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;text-align:center;
  max-width:340px}
.eo-card.fuehrung{border-top:4px solid var(--ink)}
.eo-card b{display:block;font-size:16px;margin-bottom:3px}
.eo-card span{font-size:13.5px;color:var(--muted);line-height:1.5}
.eo-trupps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.eo-trupp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;border-top:5px solid var(--red)}
.eo-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;margin-bottom:8px;background:#fbe7ea;color:var(--red)}
.eo-trupp p{margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.55}
.eo-pers{font-size:12.5px;font-weight:700;color:var(--muted)}
.eo-summe{background:var(--dark);color:#e8eaed;border-radius:12px;padding:16px 20px;margin-top:18px;
  display:flex;align-items:center;gap:16px}
.eo-summe .z{font-size:34px;font-weight:800;color:var(--gold);line-height:1;flex:none}
.eo-summe p{margin:0;font-size:14.5px;line-height:1.55;color:#dfe3e7}
@media(max-width:640px){.eo-trupps{grid-template-columns:1fr}}

/* ============ Persönliche Schutzausrüstung (Bildlegende) ============ */
.psa-lay{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:38px;padding:40px;align-items:start}
.psa-figur{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);line-height:0}
.psa-figur img{width:100%;display:block}
.psa-punkt{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:var(--red);color:#fff;border:2px solid #fff;font-weight:800;font-size:14px;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:.15s}
.psa-punkt.is-hot{background:var(--red-d);transform:translate(-50%,-50%) scale(1.28)}
.psa-legende{list-style:none;margin:0;padding:0}
.psa-legende li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:13px 10px;
  border-top:1px solid var(--line);align-items:start;border-radius:8px;transition:.15s}
.psa-legende li:first-child{border-top:none}
.psa-legende li.is-hot{background:var(--soft)}
.psa-legende .psa-nr{width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;
  display:grid;place-items:center;font-size:14px;flex:none}
.psa-legende b{display:block;font-size:15.5px;margin-bottom:2px}
.psa-legende span{font-size:14px;color:var(--ink-2);line-height:1.55}
@media(max-width:880px){.psa-lay{grid-template-columns:1fr;gap:24px}.psa-figur{max-width:400px;margin:0 auto}}

/* ============ Fettbrand-Medien (Feuerlöscher-Seite) ============ */
.fettmedia{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:20px 0;align-items:start}
.fettmedia figure{margin:0}
.fettmedia .fm-foto img{width:100%;display:block;border-radius:12px}
.fettmedia .fm-dia .dia{background:#14171c;border-radius:12px;padding:12px;display:flex;justify-content:center}
.fettmedia .fm-dia .dia img{width:auto;max-height:300px;display:block}
.fettmedia figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
@media(max-width:640px){.fettmedia{grid-template-columns:1fr}}

/* ============ Fahrzeuge: Luftbild-Banner ============ */
.fzbanner{margin:0;padding:26px 40px 0}
.fzbanner img{width:100%;display:block;border-radius:14px;border:1px solid var(--line)}
.fzbanner figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
@media(max-width:640px){.fzbanner{padding:18px 18px 0}}

/* ============ Chronik: Foto im Zeitstrahl-Eintrag ============ */
.it .bd .chron-foto{margin:12px 0 2px}
.it .bd .chron-foto img{width:100%;max-width:440px;display:block;border-radius:10px;border:1px solid var(--line)}
.it .bd .chron-foto figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ============ Online-Beitritt (Formular) ============ */
.bform{max-width:640px;margin:8px 0 0}
.bform .bf-legend{font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:24px 0 10px}
.bform .bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bform .bf-field{margin-bottom:14px}
.bform label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.bform input[type=text],.bform input[type=email],.bform input[type=tel],.bform input[type=date],.bform input[type=number]{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:15px;
  background:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none}
.bform input:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.bform .bf-opt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;cursor:pointer;font-size:14.5px;line-height:1.45;transition:border-color .12s}
.bform .bf-opt:hover{border-color:var(--red)}
.bform .bf-opt input{margin:2px 0 0;flex:none}
.bform .bf-opt:has(input:checked){border-color:var(--red);background:var(--soft)}
.bform .bf-check{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:14px;line-height:1.5}
.bform .bf-check input{margin:3px 0 0;flex:none}
.bform .bf-check a,.bform .bf-note a{color:var(--red);font-weight:600}
.bform .bf-note{font-size:13px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.bform .btn{margin-top:20px}
.bform .bf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bform-ok{background:#e6f5ec;border:1px solid #9bd3b0;border-radius:12px;padding:20px 22px;color:#1c6b3c}
.bform-ok b{font-size:18px}.bform-ok p{margin:6px 0 0;color:#20603c;line-height:1.6}
.bform-err{background:#fbe7ea;border:1px solid #f0c4cb;border-radius:10px;padding:12px 15px;color:#a20d24;
  font-size:14.5px;margin-bottom:18px}
:root[data-theme="dark"] .bform-ok{background:#16281d;border-color:#2f6b44;color:#9fe3ba}
:root[data-theme="dark"] .bform-ok p{color:#8fd6ab}
:root[data-theme="dark"] .bform-err{background:#2a161a;border-color:#6b2f39;color:#ff9aa6}
@media(max-width:560px){.bform .bf-grid{grid-template-columns:1fr}}

/* ============ Fahrzeug-Karte: aufklappbare technische Details ============ */
.vmore{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.vmore summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--red);list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.vmore summary::-webkit-details-marker{display:none}
.vmore summary::after{content:"▾";font-size:11px}
.vmore[open] summary::after{content:"▴"}
.vmore .vmore-in{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.6}
.vmore .vmore-in ul{list-style:none;padding:0;margin:6px 0 0}
.vmore .vmore-in li{padding:7px 0;border-top:1px solid var(--line)}
.vmore .vmore-in li:first-child{border-top:none}
.vmore .vmore-in b{color:var(--ink)}

/* ============ Kinder-Spiel: Feuerwehr-Memory ============ */
.mmem{max-width:440px;margin:0 auto}
.mmem-hud{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.mmem-stat{font-size:14px;color:var(--muted)}
.mmem-stat b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:4px}
.mmem-new{margin-left:auto;background:none;border:1px solid var(--band-2);color:var(--ink);border-radius:999px;
  padding:8px 16px;font:700 13px/1 "Inter",system-ui,sans-serif;cursor:pointer}
.mmem-new:hover{border-color:var(--red);color:var(--red)}
.mmem-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mmem-card{position:relative;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;perspective:700px}
.mmem-inner{position:absolute;inset:0;transition:transform .4s;transform-style:preserve-3d}
.mmem-card.flip .mmem-inner,.mmem-card.done .mmem-inner{transform:rotateY(180deg)}
.mmem-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mmem-back{background:#2b2f34 url(../images/wappen.png) center 47%/54% no-repeat;border:1px solid #1b1e22}
.mmem-front{background:var(--paper);border:1px solid var(--line);color:var(--red);transform:rotateY(180deg)}
.mmem-front svg{width:56%;height:56%}
.mmem-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
.mmem-card.done .mmem-front{background:#e6f5ec;border-color:#9bd3b0;color:#1a8a3b;outline:3px solid #1a8a3b;outline-offset:-3px}
.mmem-card.done{cursor:zoom-in}
.mmem-galwrap{margin-top:24px}
.mmem-galwrap h3{font-size:16px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
:root[data-theme="dark"] .mmem-card.done .mmem-front{background:#16281d;border-color:#2f6b44;color:#83dca3}
.mmem-win{margin-top:16px;text-align:center;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px}
.mmem-win b{display:block;font-size:18px;color:var(--ink);margin-bottom:3px}
.mmem-win span{color:var(--muted);font-size:15px;line-height:1.55}
.mmem-hidden{display:none}
@media(prefers-reduced-motion:reduce){.mmem-inner{transition:none}}

/* ============ Knoten & Stiche: Schema-Diagramme ============ */
.knotdia{max-width:330px;margin:16px auto 8px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:16px}
.knotdia svg{width:100%;height:auto;display:block}
.knotdia figcaption{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}

/* Präsenter Video-Link (führt zu YouTube, kein Embed) */
.vidlink{display:flex;align-items:center;gap:16px;margin:22px 0 6px;padding:16px 18px;text-decoration:none;
  color:inherit;background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:12px;transition:.15s}
.vidlink:hover{border-color:var(--red);box-shadow:0 10px 26px rgba(20,22,25,.10);transform:translateY(-1px)}
.vidlink:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.vidlink .play{flex:none;width:54px;height:54px;border-radius:50%;background:var(--red);display:grid;
  place-items:center;box-shadow:0 4px 14px rgba(200,16,46,.3)}
.vidlink .play::before{content:"";border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.vidlink .vt{min-width:0}
.vidlink .vt .k{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.vidlink .vt b{display:block;font-size:16.5px;margin:2px 0;letter-spacing:-.01em;line-height:1.3}
.vidlink .vt .src{font-size:13px;color:var(--muted)}
.vidlink .arr{margin-left:auto;flex:none;color:var(--red);font-weight:800;font-size:22px}
.vidlink:hover .play{background:var(--red-d)}
@media(max-width:560px){.vidlink{gap:13px;padding:14px}.vidlink .arr{display:none}.vidlink .play{width:46px;height:46px}}

/* ============ Beitritts-Formular: Intro ============ */
.bform .bf-intro{font-size:15px;color:var(--ink-2);margin:0 0 4px;line-height:1.6}

/* ============ Dienstplan (Self-Service) ============ */
.dplan{margin:8px 0 0}
.dp-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:22px}
.dp-frei{font-size:15px}
.dp-frei b{font-size:22px;color:var(--red);font-variant-numeric:tabular-nums;margin-right:4px}
.dp-badge{font-size:13.5px;font-weight:700;color:#1a8a3b}
.dp-unlock{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.dp-unlock label{font-size:12.5px;font-weight:600;display:flex;flex-direction:column;gap:4px}
.dp-unlock input{padding:8px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;
  background:var(--paper);color:var(--ink)}
.dp-station{margin-bottom:24px}
.dp-station h3{font-size:18px;margin:0 0 2px;letter-spacing:-.01em}
.dp-note{font-size:13px;color:var(--muted);margin:0 0 10px}
.dp-orga{font-size:14px;color:var(--muted);font-style:italic;background:var(--soft);
  border:1px dashed var(--band-2);border-radius:10px;padding:10px 14px;margin:0}
.dp-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dp-col{min-width:0}
.dp-sh{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  padding-bottom:6px;margin-bottom:8px;border-bottom:2px solid var(--line)}
.dp-slot{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:13.5px}
.dp-slot .dp-lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.dp-slot.besetzt{background:#e6f5ec;border-color:#9bd3b0}
.dp-slot.besetzt .dp-name{font-weight:700;color:#1c6b3c}
.dp-slot.frei{background:#fdf3dd;border-color:#ecd9a0}
.dp-slot.zu{background:var(--soft);color:var(--muted)}
.dp-slot.extern{background:var(--soft);border-color:var(--band-2);border-left:3px solid var(--band-2)}
.dp-slot.extern .dp-name{font-weight:600;color:var(--ink-2)}
.dp-freitag{font-weight:700;color:#96690a}
.dp-claim{display:flex;gap:6px;margin-top:6px}
.dp-claim input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--band-2);border-radius:7px;
  font:inherit;font-size:13px;background:var(--paper);color:var(--ink)}
.dp-claim .btn,.dp-unlock .btn{padding:8px 14px;font-size:13px}
.dp-release{margin-top:5px}
.dp-remove{background:none;border:0;color:var(--red);font:inherit;font-size:12px;cursor:pointer;
  padding:0;text-decoration:underline}
.dp-reset{margin-top:10px}
:root[data-theme="dark"] .dp-slot.besetzt{background:#16281d;border-color:#2f6b44}
:root[data-theme="dark"] .dp-slot.besetzt .dp-name{color:#83dca3}
:root[data-theme="dark"] .dp-slot.frei{background:#2a2717;border-color:#4a4324}
:root[data-theme="dark"] .dp-freitag{color:#e8c766}
:root[data-theme="dark"] .dp-badge{color:#83dca3}
@media(max-width:760px){.dp-cols{grid-template-columns:1fr}
  .dp-col{border-top:1px solid var(--line);padding-top:12px}}

/* ============ Jugendfeuerwehr-Logo (Aufmacher + Übersichtskarte) ============ */
.jfbanner{max-width:600px;margin:22px auto 4px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px}
.jfbanner img{width:100%;display:block}

/* ============================================================
   DARK-MODE — Evaluationsphase (hell/dunkel entscheiden).
   Aktiv via <html data-theme="dark">. Umschalter in functions.php
   hinter FFW_THEME_TOGGLE. Vor Livegang: Flag auf false.
   ============================================================ */
:root[data-theme="dark"]{
  --ink:#e8eaed; --ink-2:#b8bec6; --muted:#98a0a8; --pill-ink:#c4cad2;
  --red:#ff4d5d; --red-d:#e23644;
  --paper:#1e2127; --surface:#262a31; --soft:#22262c; --pill:#2d323b;
  --line:#343a43; --band:#1a1d22; --band-2:#3b424b;
  --dark:#15171c; --dark-2:#0f1114;
}
:root[data-theme="dark"] body{background:#131519}
:root[data-theme="dark"] .wrap{box-shadow:0 20px 60px rgba(0,0,0,.55)}
:root[data-theme="dark"] .bc{color:#8b929a}
:root[data-theme="dark"] .it::before{box-shadow:0 0 0 3px var(--paper)}
/* helle Callout-Kästen auf dunkle Tönung bringen */
:root[data-theme="dark"] .merke{background:#2a2717;border-color:#4a4324;color:#e9dcab}
:root[data-theme="dark"] .merke b{color:#f1d886}
:root[data-theme="dark"] .quiz-score{background:#2a2717;border-color:#4a4324;color:#f1d886}
:root[data-theme="dark"] .achtung{background:#311a1d;border-color:#5a2b31}
:root[data-theme="dark"] .achtung p{color:#f3c9cf}
:root[data-theme="dark"] .stichw .part.gefahr{background:#311a1d;border-color:#5a2b31}
:root[data-theme="dark"] .quiz .opt.richtig{background:#16281d;border-color:#2f6b44;color:#83dca3}
:root[data-theme="dark"] .quiz .opt.falsch{background:#2a161a;border-color:#6b2f39;color:#ff9aa6}
:root[data-theme="dark"] .tag.hilfe{background:#16233a;color:#9cc2f0}
:root[data-theme="dark"] .tag.alarm{background:#2f2712;color:#e6c266}
:root[data-theme="dark"] .tag.brand{background:#3a1b1f;color:#f0a6a0}
:root[data-theme="dark"] .bktab .ja{color:#5fcf88}
:root[data-theme="dark"] .sig.gruen{border-left-color:#3fae63}

/* Schwebender Hell/Dunkel-Umschalter (nur Evaluationsphase) */
.ffw-theme-switch{position:fixed;right:16px;bottom:16px;z-index:1200;display:inline-flex;align-items:center;
  gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--band-2);border-radius:999px;
  padding:10px 15px;font:700 14px/1 "Inter",system-ui,sans-serif;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.ffw-theme-switch:hover{border-color:var(--red)}
.ffw-theme-switch:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ffw-theme-switch .ic{font-size:16px;line-height:1}
@media(max-width:560px){.ffw-theme-switch{padding:9px 13px;font-size:13px}}

/* ============ Foto-Upload (Ansprechpartner reichen Bilder ein) ============ */
.ffw-foto-up{max-width:560px}
.ffw-foto-form input[type=file]{display:block;width:100%;padding:12px;border:1px dashed var(--line);
  border-radius:10px;background:var(--paper);font:inherit;color:var(--ink);cursor:pointer}
.ffw-foto-count{font-size:13px;color:var(--muted);margin:6px 0 0}
.ffw-foto-consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;font-size:14px;line-height:1.5;color:var(--ink);font-weight:400}
.ffw-foto-consent input{margin-top:3px;flex:0 0 auto;width:18px;height:18px}
.ffw-foto-hint{font-size:13px;color:var(--muted);line-height:1.55;margin:12px 0 0}

/* ============ Interner Bereich ============ */
.ffw-intern-block{margin:0 0 28px}
.ffw-intern-links{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ffw-intern-link{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ffw-intern-link .btn{flex:0 0 auto}
.ffw-intern-link input{flex:1 1 240px;min-width:0;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);color:var(--muted);font-size:13px}
.ffw-intern-hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.ffw-intern-logout{font-size:14px;color:var(--muted)}
.ffw-intern-logout:hover{color:var(--red)}

/* ============ Footer: dezente Webmaster-Zeile ============ */
.foot-tech{max-width:1040px;margin:14px auto 0;padding-top:12px;border-top:1px solid var(--band-2);
  font-size:12.5px;color:var(--muted);line-height:1.5}
.foot-tech a{color:var(--muted)}
.foot-tech a:hover{color:var(--red)}