/* Seite „Wespen & Insekten“ (nur dort geladen). Nutzt die Farben, Schriften und Abstände aus main.css – keine eigenen Schriften. */

/* Kopfbereich: Text links, roter Notruf-Kasten rechts */
.ff-wi-hero{background:var(--graphite);color:#fff;position:relative;overflow:hidden}
.ff-wi-hero__in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s7);align-items:stretch;padding-top:var(--s7);padding-bottom:var(--s7)}
.ff-wi-hero h1{font-size:clamp(2.25rem,5.2vw,3.75rem);font-weight:900;line-height:1.04;letter-spacing:-.03em;margin:0 0 var(--s5);text-wrap:balance}
.ff-wi-hero .ff-kicker{margin-bottom:var(--s4)}
.ff-wi-lead{font-size:clamp(1.125rem,1.8vw,1.25rem);line-height:1.55;color:#e4e8ec;max-width:36em;margin:0 0 var(--s5)}
.ff-wi-btns{display:flex;flex-wrap:wrap;gap:var(--s4)}
.ff-wi-alarm{background:var(--red);color:#fff;border-radius:var(--r-s);padding:var(--s6);display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}
.ff-wi-alarm__t{margin:0;font-size:1.0625rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.ff-wi-alarm__row{display:flex;flex-direction:column;gap:4px;border-top:2px solid #fff;padding-top:var(--s4)}
.ff-wi-alarm__row span{font-size:1rem;font-weight:600;line-height:1.35}
.ff-wi-alarm__nr{color:#fff;text-decoration:none;font-weight:900;font-size:3.75rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block;padding:2px 0}
.ff-wi-alarm__nr--gross{font-size:5rem}
.ff-wi-alarm__nr:hover,.ff-wi-alarm__nr:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:6px}
.ff-wi-alarm__nr:focus-visible{outline-color:#fff}

/* 01: zwei Karten */
.ff-wi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:var(--s6);margin-bottom:var(--s6)}
.ff-wi-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s6)}
.ff-wi-card h3{font-size:1.5rem;margin:0 0 var(--s4)}
.ff-wi-card--nein{background:transparent;border:2px dashed var(--steel)}
.ff-wi-card__lead{font-size:1.375rem;font-weight:700;line-height:1.35}
.ff-wi-card p:last-child{margin-bottom:0;color:var(--muted)}
.ff-wi-list{margin:0;padding:0;list-style:none}
.ff-wi-list li{padding:14px 0;border-top:1px solid var(--line)}
.ff-wi-list li:last-child{border-bottom:1px solid var(--line)}
.ff-wi-list--punkt li{display:flex;gap:var(--s4);align-items:baseline}
.ff-wi-list--punkt li::before{content:"";flex:none;width:10px;height:10px;background:var(--red)}
.ff-wi-big{font-size:clamp(1.1875rem,2.2vw,1.375rem);font-weight:600;line-height:1.5;max-width:40em;margin:0}

/* 02: vier Schritte */
.ff-wi-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--s6)}
.ff-wi-steps>li{border-top:4px solid var(--ink);padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.ff-wi-steps__nr{font-size:4rem;font-weight:900;line-height:.9;color:var(--red);letter-spacing:-.03em}
.ff-wi-steps h3{font-size:1.4375rem;margin:0}
.ff-wi-steps p{margin:0}
.ff-wi-tel{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.ff-wi-tel li{border-top:1px solid var(--ink);padding-top:var(--s2);display:flex;flex-direction:column}
.ff-wi-tel span{font-size:.9375rem;color:var(--muted);line-height:1.4}
.ff-wi-tel a{font-weight:800;color:var(--ink);text-decoration:none;display:inline-block;padding:6px 0;font-variant-numeric:tabular-nums}
.ff-wi-tel a:hover{color:var(--red)}

/* 03: zwei Spalten */
.ff-wi-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:var(--s7)}
.ff-wi-zwei h3{font-size:1.5rem;margin:0 0 var(--s4)}
.ff-wi-quelle{font-size:.9375rem;color:var(--muted);margin-top:var(--s3)}

/* 04: Balken (Höhe per Inline-Stil, höchstens 220 px; Jahre aus Feuerwehr → Insekteneinsätze) */
.ff-wi-bars{display:flex;align-items:flex-end;gap:var(--s6);margin-top:var(--s6);max-width:calc(var(--ff-wi-n,2) * 150px)}
.ff-wi-bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.ff-wi-bar__n{font-size:3.5rem;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ff-wi-bar__b{background:var(--ink);border-radius:4px 4px 0 0}
.ff-wi-bar__j{font-weight:800;border-top:4px solid var(--ink);padding-top:var(--s2)}
.ff-wi-bar--neu .ff-wi-bar__n{color:var(--red)}
.ff-wi-bar--neu .ff-wi-bar__b{background:var(--red)}
.ff-wi-bars--viele{gap:var(--s4)}
.ff-wi-bars--viele .ff-wi-bar__n{font-size:2rem}

/* Spendenhinweis */
.ff-wi-spende{background:var(--ink);color:#fff;padding:clamp(48px,6vw,72px) 0}
.ff-wi-spende h2{font-size:clamp(2.25rem,5.5vw,3.5rem);font-weight:900;margin:0 0 var(--s4);line-height:1.05;letter-spacing:-.03em}
.ff-wi-spende p{font-size:1.25rem;max-width:32em;margin:0;color:#e4e8ec}

@media (max-width:900px){
  .ff-wi-hero__in{grid-template-columns:1fr;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s6)}
  .ff-wi-alarm{padding:var(--s5)}
  .ff-wi-alarm__nr--gross{font-size:4.5rem}
  .ff-wi-alarm__nr{font-size:3.25rem}
  .ff-wi-btns .ff-btn{flex:1 1 100%;justify-content:center;text-align:center}
}
@media (max-width:520px){
  .ff-wi-card{padding:var(--s5)}
  .ff-wi-bars{gap:var(--s4)}
  .ff-wi-bar__n{font-size:2.5rem}
  .ff-wi-bars--viele{gap:var(--s2)}
  .ff-wi-bars--viele .ff-wi-bar__n{font-size:1.5rem}
}
@media (hover:hover){
  .ff-wi-card{transition:border-color .2s var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
  .ff-wi-card{transition:none}
}