/* ==========================================================================
   FFWG v9 – Freiwillige Feuerwehr Weilrod-Gemünden
   Struktur: 1 Fonts · 2 Tokens · 3 Reset/Basis · 4 Layout · 5 Header
   6 Hero · 7 Schnellzugriffe · 8 Einsatzband · 9 Aktuelles/Termine
   10 Mitmachen · 11 Footer · 12 Archiv · 13 Einsatzdetail · 14 Inhaltsseiten
   15 Motion · 16 Responsive
   ========================================================================== */

/* 1 Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

/* 2 Tokens --------------------------------------------------------------- */
:root {
  /* Farbe */
  --red: #e52424;
  --red-deep: #b31717;
  --red-light: #ff6157;      /* Rot-Zustand auf dunklem Grund */
  --red-tint: #fdeded;
  --navy: #0a1219;
  --navy-2: #111e2a;
  --steel: #1d2c3b;
  --blue-signal: #3f7dff;    /* Blaulicht-Ambiente, nur im Hero */
  --kw-fire: #e52424;        /* Stichwort-Badge Brand */
  --kw-tech: #1a5fd6;        /* Stichwort-Badge Technische Hilfe */
  --kw-other: #5c6b7a;       /* Stichwort-Badge Sonstiges */
  --paper: #f1f3f5;
  --white: #fff;
  --text: #131c25;
  --text-2: #4c5a67;
  --text-inv-2: #b6c2cd;
  --line: #e3e7eb;
  --line-dark: rgba(255, 255, 255, .12);

  /* Typo */
  --ff-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --ff-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-display: clamp(2.4rem, 8.4vw, 5.4rem);
  --fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.55rem, 2.5vw, 2.25rem);
  --fs-h3: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .78rem;

  /* Maß */
  --wrap: 1340px;
  --gutter: clamp(18px, 4vw, 44px);
  --section: clamp(26px, 3.2vw, 46px);
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 9px;

  /* Tiefe */
  --shadow-card: 0 1px 2px rgba(10, 18, 25, .04), 0 24px 60px -32px rgba(10, 18, 25, .35);
  --shadow-hover: 0 1px 2px rgba(10, 18, 25, .05), 0 30px 60px -28px rgba(10, 18, 25, .42);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 180ms;
}

/* 3 Reset / Basis -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-header :focus-visible,
.mobile-nav :focus-visible,
.on-dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.incidents :focus-visible { outline-color: #fff; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 130px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--white);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: top var(--t) var(--ease);
}
.skip-link:focus-visible { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 4 Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.panel {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.section-head h2 { font-size: var(--fs-h2); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--red);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.text-link .icon { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }
.on-dark .text-link { color: var(--red-light); }

.icon { width: 1em; height: 1em; flex: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.btn-light { background: #fff; color: var(--red-deep); }
.btn-light:hover { background: #fff5f5; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
}
.chip-num {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* 5 Header --------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 25, .92);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  pointer-events: none;
}
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-stuck { box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .7); }

.header-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 32px);
}

/* Logo- und Notruf-Lasche hängen beide an der Oberkante */
.logo-plate,
.emergency {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  transition: padding var(--t) var(--ease);
}
.logo-plate {
  background: #fff;
  padding: 12px 16px 14px;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8);
}
.logo-plate img {
  width: clamp(64px, 6.4vw, 92px);
  height: auto;
  transition: width var(--t) var(--ease);
}
.is-stuck .logo-plate { padding: 8px 14px 10px; }
.is-stuck .logo-plate img { width: clamp(52px, 4.4vw, 62px); }

.emergency {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: var(--red);
  color: #fff;
  padding: 14px 22px 16px;
  text-align: right;
  line-height: 1;
}
.emergency small {
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: .92;
  letter-spacing: .02em;
}
.emergency strong {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.emergency:hover { background: var(--red-deep); }
.is-stuck .emergency { padding: 9px 18px 11px; }

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 26px);
  height: clamp(74px, 7vw, 92px);
  transition: height var(--t) var(--ease);
}
.is-stuck .main-nav { height: 64px; }
.main-nav a {
  position: relative;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(.9rem, 1.05vw, 1rem);
  color: #fff;
  padding: 8px 2px;
  transition: color var(--t) var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--red-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.main-nav a:hover { color: var(--red-light); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--red); height: 3px; }

.nav-toggle {
  display: none;
  align-self: center;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 600;
  cursor: pointer;
}
.emergency { align-self: flex-start; }
.nav-toggle .bars { display: grid; gap: 4px; }
.nav-toggle .bars span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Mobile Panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 18px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 260ms var(--ease), visibility 260ms;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.mobile-nav-close {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--line-dark); }
.mobile-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 8px 2px;
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
}
.mobile-nav li a .icon { width: 20px; height: 20px; color: var(--red-light); }
.mobile-nav li a[aria-current="page"] { color: var(--red-light); }
.mobile-nav .btn { margin-top: 24px; justify-content: center; width: 100%; }
body.nav-open { overflow: hidden; }

/* 6 Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(64vh, 560px);
  display: grid;
  align-items: center;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(1.04) contrast(1.04);
}
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(115% 85% at 50% 34%, rgba(6, 12, 18, .12), rgba(6, 12, 18, .82) 68%),
    linear-gradient(180deg, rgba(6, 12, 18, .78) 0%, rgba(6, 12, 18, .28) 34%, rgba(6, 12, 18, .94) 100%);
}
/* Blaulicht-Ambiente: nur Licht, kein Eingriff ins Fahrzeug */
.hero-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 52% at 14% -6%, rgba(63, 125, 255, .38), transparent 68%);
  mix-blend-mode: screen;
  animation: beacon 4.6s var(--ease) infinite;
}
@keyframes beacon {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.hero-inner {
  position: relative;
  padding: clamp(128px, 13vw, 176px) 0 clamp(56px, 6vw, 84px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 28px);
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.035em;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero p {
  max-width: 54ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: #dbe3ea;
}

/* 7 Schnellzugriffe ------------------------------------------------------ */
.shell {
  position: relative;
  z-index: 10;
  margin-top: clamp(-60px, -4vw, -40px);
}
.quick-access {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  overflow: hidden;
  border-radius: var(--r-xl);
}
.quick-tile {
  background: #fff;
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 8px;
  padding: clamp(20px, 1.9vw, 26px) clamp(12px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
  text-align: center;
  transition: background var(--t) var(--ease);
}
/* Icons, Überschriften, Texte und Pfeile liegen spaltenübergreifend auf einer Linie */
@media (min-width: 1181px) {
  .quick-access { grid-template-rows: auto auto 1fr auto; }
  .quick-tile { grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .quick-access { grid-template-rows: repeat(2, auto auto 1fr auto); }
  .quick-tile { grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
}
.quick-tile .icon-badge {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--red);
  transition: transform 260ms var(--ease);
}
.quick-tile .icon-badge svg { width: 34px; height: 34px; }
.quick-tile h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  transition: color var(--t) var(--ease);
}
.quick-tile p {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}
.quick-tile .icon-arrow {
  width: 18px; height: 18px;
  color: var(--red);
  align-self: end;
  transition: transform var(--t) var(--ease);
}
.quick-tile:hover { background: #fafbfc; }
.quick-tile:hover h3 { color: var(--red-deep); }
.quick-tile:hover .icon-badge { transform: translateY(-3px); }
.quick-tile:hover .icon-arrow { transform: translateX(4px); }

/* 8 Einsatzband ---------------------------------------------------------- */
.incidents {
  margin-top: var(--section);
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(30px, 3.4vw, 48px) clamp(20px, 2.6vw, 44px) clamp(34px, 3.6vw, 52px);
}
.incident-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}
.incident-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  color: #fff;
  transition: transform 220ms var(--ease), border-color var(--t) var(--ease);
}
.incident-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .3); }
.incident-figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #16232f; }
.incident-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.incident-card:hover .incident-figure img { transform: scale(1.05); }
.incident-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 25, .1), rgba(10, 18, 25, .72));
}
.incident-tags {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.incident-body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.incident-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.incident-meta {
  font-size: var(--fs-xs);
  color: var(--text-inv-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-variant-numeric: tabular-nums;
}
.incidents-footer { display: none; }

/* 9 Aktuelles + Termine -------------------------------------------------- */
.home-columns {
  margin-top: var(--section);
  padding: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: stretch;
}
.home-col { display: flex; flex-direction: column; min-width: 0; }
.home-col > .stack { flex: 1; display: flex; flex-direction: column; }

.news-list { display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: space-between; }
.news-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.news-list .news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-item figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.news-item figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.news-item:hover figure img { transform: scale(1.04); }
.news-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-bottom: 6px;
}
.news-kicker b { color: var(--red-deep); font-weight: 600; }
.news-kicker .sep { width: 1px; height: 12px; background: var(--line); }
.news-item h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; transition: color var(--t) var(--ease); }
.news-item:hover h3 { color: var(--red-deep); }
.news-item p { font-size: var(--fs-sm); color: var(--text-2); }

.date-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.date-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease);
}
.date-list li:last-child .date-row { border-bottom: 0; }
.date-row:hover { background: #fafbfc; }
.date-badge {
  text-align: center;
  border-radius: var(--r-sm);
  background: var(--red-tint);
  color: var(--red-deep);
  padding: 6px 0 7px;
  font-family: var(--ff-display);
  line-height: 1;
}
.date-badge b { display: block; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.date-badge span { font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.date-row h3 { font-size: 1rem; font-weight: 600; }
.date-row .sub { font-size: var(--fs-sm); color: var(--text-2); }
.list-cta { margin-top: 24px; align-self: flex-start; }

/* 10 Mitmachen (Action) -------------------------------------------------- */
.join {
  margin-top: var(--section);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--red-deep) 0%, #cf1d1d 55%, var(--red-deep) 100%);
  color: #fff;
  padding: clamp(36px, 4.6vw, 68px) clamp(22px, 3.4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.join h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  max-width: 17ch;
}
.join h2 .inline-shot {
  display: inline-block;
  width: clamp(74px, 8vw, 122px);
  height: clamp(34px, 3.6vw, 54px);
  border-radius: 999px;
  vertical-align: -.12em;
  margin: 0 .16em;
  object-fit: cover;
  object-position: 52% 52%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}
.join-lead {
  margin-top: 18px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 46ch;
}
.join .btn { margin-top: 26px; }
.join-graphic {
  align-self: end;
  margin: 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18));
}
.join-graphic svg { width: 100%; height: auto; }

/* 11 Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section);
  background: var(--navy);
  color: #fff;
  padding: clamp(40px, 5vw, 68px) 0 26px;
}
.footer-grid {
  display: grid;
  /* dritte Spalte bleibt für die späteren Social-Profile reserviert */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
}
.footer-brand { display: flex; align-items: flex-start; gap: 16px; }
.footer-logo {
  display: block;
  flex: none;
  background: #fff;
  border-radius: var(--r-md);
  padding: 9px;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .9);
}
.footer-logo img { width: 62px; height: 62px; }
.footer-grid h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 14px;
  color: #fff;
}
.footer-grid p, .footer-grid li { font-size: var(--fs-sm); color: var(--text-inv-2); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { transition: color var(--t) var(--ease); }
.footer-grid a:hover { color: var(--red-light); }
.footer-mark { font-family: var(--ff-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin-bottom: 10px; }
.footer-mark span { color: var(--red-light); }
.footer-bottom {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #8b98a4;
}
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* 12 Archiv (Split Sticky Index) ----------------------------------------- */
.subhero {
  position: relative;
  min-height: clamp(380px, 46vw, 520px);
  display: grid;
  align-items: end;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.subhero .hero-media img { object-position: 50% 52%; }
.subhero-inner { position: relative; padding: clamp(140px, 15vw, 190px) 0 clamp(76px, 8vw, 116px); }
.subhero h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; max-width: 18ch; }
.subhero p { margin-top: 14px; max-width: 56ch; color: #dbe3ea; }
.archive-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px);
}
.archive-side { align-self: start; position: sticky; top: 132px; display: grid; gap: 24px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; }
.field input[type="search"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
}
.field input[type="search"]:focus-visible { border-color: var(--red); }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.filter-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--ff-display);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.filter-btn .count { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.filter-btn:hover { background: var(--paper); }
.filter-btn[aria-pressed="true"] { background: var(--red); color: #fff; }
.filter-btn[aria-pressed="true"] .count { color: rgba(255, 255, 255, .8); }

.year-head {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--line);
}
/* Stichwort-Badge: Freitext, Farbe frei wählbar */
.kw {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--kw-other);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.kw-fire { background: var(--kw-fire); }
.kw-tech { background: var(--kw-tech); }
.kw-other { background: var(--kw-other); }

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-row {
  display: grid;
  grid-template-columns: 78px 112px 108px minmax(0, 1fr) 20px;
  gap: 18px;
  align-items: center;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease);
}
.archive-row:hover { background: #fafbfc; }
.archive-row .num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--red-deep);
}
.archive-row .when { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.archive-row .thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
}
.archive-row .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.archive-row:hover .thumb img { transform: scale(1.05); }
.archive-row .headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.archive-row h3 { font-size: 1.05rem; font-weight: 600; }
.archive-row .place { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.archive-row .icon { width: 18px; height: 18px; color: var(--text-2); transition: transform var(--t) var(--ease); }
.archive-row:hover .icon { transform: translateX(3px); color: var(--red); }
.archive-empty { padding: 40px 0; color: var(--text-2); }

/* 13 Einsatzdetail ------------------------------------------------------- */
.detail-hero {
  position: relative;
  min-height: clamp(430px, 54vw, 620px);
  display: grid;
  align-items: end;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.detail-hero-inner { position: relative; padding: clamp(150px, 16vw, 210px) 0 clamp(78px, 8vw, 118px); }
/* Rücksprung zur Einsatzliste */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: var(--fs-sm);
  color: var(--text-inv-2);
  transition: color var(--t) var(--ease);
}
.detail-back .icon {
  width: 16px;
  height: 16px;
  transform: scaleX(-1);
  transition: transform var(--t) var(--ease);
}
.detail-back:hover { color: var(--red-light); }
.detail-back:hover .icon { transform: scaleX(-1) translateX(3px); }

.archive-back { margin-top: 18px; text-align: center; }
.archive-back a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.archive-back a .icon {
  width: 17px;
  height: 17px;
  color: var(--red);
  transform: scaleX(-1);
  transition: transform var(--t) var(--ease);
}
.archive-back a:hover { background: var(--paper); border-color: #cfd6dd; }
.archive-back a:hover .icon { transform: scaleX(-1) translateX(3px); }

.detail-hero .tags { display: flex; gap: 8px; margin-bottom: 16px; }
.detail-hero h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; max-width: 20ch; }
.detail-hero .place { margin-top: 12px; color: #dbe3ea; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3.4vw, 52px);
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-facts > div { display: grid; gap: 2px; }
.hero-facts dt { font-size: var(--fs-xs); color: var(--text-inv-2); }
.hero-facts dd {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}

.detail-body { padding: clamp(26px, 3vw, 46px); }
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 3.2vw, 56px);
  align-items: start;
}
.report { max-width: 68ch; }
.report h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.report h3 { font-size: 1.2rem; margin: 30px 0 10px; }
.report p + p { margin-top: 14px; }
.report ul { padding-left: 20px; }
.report li + li { margin-top: 6px; }

.detail-aside { position: sticky; top: 132px; display: grid; gap: 12px; align-content: start; }
.data-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.data-card h2 { font-size: .95rem; font-weight: 600; margin-bottom: 10px; }
.data-list { margin: 0; }
.data-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.data-list > div:first-child { border-top: 0; padding-top: 0; }
.data-list dt { font-size: var(--fs-sm); color: var(--text-2); }
.data-list dd {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.veh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.veh-list li {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.press-list { list-style: none; margin: 0; padding: 0; }
.press-list li + li { border-top: 1px solid var(--line); }
.press-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: color var(--t) var(--ease);
}
.press-list small {
  display: block;
  font-family: var(--ff-text);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 1px;
}
.press-list .icon { width: 16px; height: 16px; color: var(--red); transition: transform var(--t) var(--ease); }
.press-list a:hover { color: var(--red-deep); }
.press-list a:hover .icon { transform: translateX(3px); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--paper); }
.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 600ms var(--ease);
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery img:focus-visible { outline-offset: -3px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 12, 18, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease), visibility 200ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; }
.lightbox img {
  max-width: min(100%, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
.lightbox-close {
  position: absolute;
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .24); }
.lightbox-timer {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left;
  background: var(--red);
}
.lightbox-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 2vw, 22px);
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .6);
}
body.lightbox-open { overflow: hidden; }

.prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: clamp(30px, 3.4vw, 48px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prevnext a {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.prevnext a:hover { background: #fafbfc; border-color: #cfd6dd; }
.prevnext img { width: 76px; height: 57px; object-fit: cover; border-radius: var(--r-sm); }
.prevnext .label { font-size: var(--fs-xs); color: var(--text-2); }
.prevnext strong { font-family: var(--ff-display); font-weight: 600; display: block; margin-top: 2px; }
.prevnext .next { direction: rtl; }
.prevnext .next > * { direction: ltr; }
.prevnext .next div { text-align: right; }

/* 14 Inhaltsseiten (Gutenberg-Rahmen) ------------------------------------ */
.page-body { padding: clamp(28px, 3.4vw, 56px); }
.prose { max-width: 74ch; }
/* Inhaltsseiten: breite Fläche, darin ein Raster aus drei Spalten. Fließtext
   läuft in der mittleren Spalte und bleibt auf Lesebreite, alles Breite –
   Tabellen, Bilder, Spalten, Karten – greift über die gesamte Fläche. */
.wrap-content { --wrap: 1080px; }
.page-body > .prose {
  max-width: none;
  display: grid;
  grid-template-columns: min(80ch, 100%) minmax(0, 1fr);
}
/* Fließtext endet nach rund 80 Zeichen, beginnt aber an derselben linken Kante
   wie alles andere. Überschriften, Tabellen und Bilder nehmen die volle Breite
   und halten die weiße Fläche damit sichtbar zusammen. */
.page-body > .prose > * { grid-column: 1; min-width: 0; }
.page-body > .prose > h2,
.page-body > .prose > h3,
.page-body > .prose > hr,
.page-body > .prose > figure,
.page-body > .prose > table,
.page-body > .prose > .alignwide,
.page-body > .prose > .alignfull,
.page-body > .prose > .wp-block-image,
.page-body > .prose > .wp-block-table,
.page-body > .prose > .wp-block-columns,
.page-body > .prose > .wp-block-gallery,
.page-body > .prose > .wp-block-embed,
.page-body > .prose > .wp-block-media-text,
.page-body > .prose > .wp-block-cover,
.page-body > .prose > .wp-block-details,
.page-body > .prose > .ffwg-quote,
.page-body > .prose > .ffwg-notice,
.page-body > .prose > .ffwg-contact,
.page-body > .prose > .wp-block-separator,
.page-body > .prose > .pattern-cards,
.page-body > .prose > .ffwg-cta,
.page-body > .prose > .ffwg-stat,
.page-body > .prose > .ffwg-cards { grid-column: 1 / -1; }

.page-body > .prose > h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: var(--fs-h2); margin-top: 40px; }
.prose h3 { font-size: 1.25rem; margin-top: 30px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose figure { margin: 30px 0; }
.prose figure img { border-radius: var(--r-lg); width: 100%; }
.prose figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: 8px; }
.prose blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 500;
}
.pattern-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 34px;
  max-width: none;
}
.pattern-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  gap: 6px;
}
.pattern-card .icon-badge { color: var(--red); width: 34px; height: 34px; margin-bottom: 4px; }
.pattern-card h3 { font-size: 1.05rem; }
.pattern-card p { font-size: var(--fs-sm); color: var(--text-2); }

.calendar-months { display: grid; gap: clamp(24px, 3vw, 40px); }
.month h2 { font-size: 1.3rem; margin-bottom: 8px; }
.cache-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 22px;
}
.cache-note::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35b37e;
}

/* 15 Motion -------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 16 Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .quick-access { grid-template-columns: repeat(3, 1fr); }
  .incident-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; justify-self: center; align-self: center; }
  .logo-plate { justify-self: start; }
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 10px;
  }
  .emergency { justify-self: end; }
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .join { grid-template-columns: minmax(0, 1fr); }
  .archive-layout { grid-template-columns: minmax(0, 1fr); }
  .archive-side { position: static; }
  .filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-btn { width: auto; border: 1px solid var(--line); }
}

@media (max-width: 720px) {
  :root { --r-xl: 20px; --r-lg: 16px; }

  .emergency { padding: 12px 15px 14px; }
  .emergency strong { font-size: 1.4rem; }
  .nav-toggle { padding: 0 14px; }

  .hero { min-height: 62vh; }
  .hero-media img { object-position: 58% 46%; }
  .hero-inner { padding: clamp(112px, 28vw, 150px) 0 40px; gap: 14px; }
  .hero h1 { letter-spacing: -.03em; }
  .hero p { font-size: 1rem; }

  /* Schnellzugriffe: 1 + 2 + 2 */
  .quick-access { grid-template-columns: 1fr 1fr; }
  .quick-tile { padding: 13px 10px 14px; row-gap: 6px; }

  /* Volle Kachel: Icon und Text nebeneinander, das spart Höhe */
  .quick-tile:first-child {
    grid-column: span 2;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    column-gap: 12px;
    padding: 11px 10px;
  }
  .quick-tile .icon-badge { width: 34px; height: 34px; }
  .quick-tile .icon-badge svg { width: 26px; height: 26px; }
  .quick-tile h3 { font-size: .92rem; line-height: 1.2; hyphens: auto; }
  .quick-tile:hover .icon-badge { transform: none; }
  .quick-tile p, .quick-tile .icon-arrow { display: none; }

  /* Einsätze: 2 x 2, reduzierte Karten */
  .incidents { padding: 24px 16px 28px; }
  .incident-grid { gap: 10px; }
  .incident-body { padding: 10px 12px 14px; gap: 4px; }
  .incident-body h3 { font-size: .92rem; }
  .incident-meta, .incident-tags .chip-red { display: none; }
  .incident-tags { left: 8px; bottom: 8px; }
  .incidents .section-head .text-link { display: none; }
  .incidents-footer { display: block; margin-top: 20px; text-align: center; }

  .home-columns { padding: 22px 16px 26px; gap: 30px; }
  .news-item { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
  .news-item h3 { font-size: 1rem; }
  .news-item p { display: none; }
  .news-item:nth-child(n+3) { display: none; }
  .date-list li:nth-child(n+5) { display: none; }
  .date-row { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 12px 4px 12px 0; }
  .date-badge b { font-size: 1.1rem; }

  .join { padding: 28px 18px 32px; gap: 26px; }
  .join h2 .inline-shot { width: 68px; height: 30px; }
  .join-graphic { max-width: 320px; margin-inline: auto; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-logo img { width: 54px; height: 54px; }
  .footer-bottom { flex-direction: column; }

  .archive-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; row-gap: 4px; padding: 12px 0; }
  .archive-row .thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .archive-row .num, .archive-row .when { grid-column: 2; font-size: var(--fs-xs); }
  .archive-row .num { color: var(--text-2); font-weight: 600; }
  .archive-row .body { grid-column: 2; }
  .archive-row h3 { font-size: .98rem; }
  .archive-row .icon { display: none; }

  .detail-body, .page-body { padding: 22px 16px 28px; }
  .prose table th, .prose table td { padding: 9px 10px; font-size: .94rem; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .next { direction: ltr; }
  .prevnext .next div { text-align: left; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:first-child { grid-row: span 1; }
  .gallery figure:first-child img { aspect-ratio: 16 / 10; }
  .hero-facts { gap: 8px 20px; }
}

@media (max-width: 380px) {
  .quick-tile h3 { font-size: .88rem; }
  .emergency small { display: none; }
}

/* 17 WordPress-Markup ---------------------------------------------------- */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li { position: relative; }
.main-nav .current-menu-item > a,
.main-nav .current-menu-parent > a { color: #fff; }

/* Untermenü: Pfeil am Elternpunkt, Klappfläche darunter */
.main-nav .menu-item-has-children > a { padding-right: 15px; }
.main-nav .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.main-nav .menu-item-has-children:hover > a::before,
.main-nav .menu-item-has-children:focus-within > a::before {
  transform: translateY(-30%) rotate(225deg);
}

.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 5;
  min-width: 232px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: grid;
  gap: 2px;
  background: rgba(13, 23, 32, .97);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
}
/* unsichtbare Brücke, damit der Mauszeiger die Lücke überqueren kann */
.main-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.main-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: rgba(255, 255, 255, .09); color: var(--red-light); }
.main-nav .sub-menu .current-menu-item > a { color: var(--red-light); }
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-parent > a::after { transform: scaleX(1); background: var(--red); height: 3px; }

.mobile-nav ul.mobile-nav-list { display: block; }
.mobile-nav li a::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--red-light);
  border-bottom: 2px solid var(--red-light);
  transform: rotate(-45deg);
  flex: none;
}
.mobile-nav .current-menu-item > a { color: var(--red-light); }

/* Mobil öffnet ein eigener Knopf das Untermenü, der Elternpunkt bleibt Link */
.mobile-nav li.menu-item-has-children {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
}
.mobile-nav li.menu-item-has-children > a::after { display: none; }
.mobile-nav .submenu-toggle {
  justify-self: end;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--red-light);
  cursor: pointer;
}
.mobile-nav .submenu-toggle span {
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms var(--ease);
}
.mobile-nav .submenu-toggle[aria-expanded="true"] span { transform: translateY(15%) rotate(225deg); }
.mobile-nav .sub-menu {
  grid-column: 1 / -1;
  display: none;
  margin: 0 0 14px;
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(255, 255, 255, .16);
}
.mobile-nav li.is-open > .sub-menu { display: block; }
.mobile-nav .sub-menu li { border-top: 0; }
.mobile-nav .sub-menu a {
  min-height: 50px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-inv-2);
}
.mobile-nav .sub-menu a::after { display: none; }

/* Untermenüs */
.sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--t) var(--ease);
}
.sub-toggle svg { width: 12px; height: 12px; }
.main-nav .menu-item-has-children { display: flex; align-items: center; gap: 3px; }
.main-nav .sub-toggle { color: #fff; }
.main-nav li.is-open > .sub-toggle,
.main-nav li:hover > .sub-toggle { transform: rotate(90deg); }

.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 224px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: block;
  background: rgba(10, 18, 25, .97);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  z-index: 70;
}
/* Unsichtbare Brücke, damit der Zeiger den Abstand zum Untermenü überqueren kann */
.main-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.main-nav .sub-menu li { display: block; }
.main-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 400;
  white-space: nowrap;
  color: #e8edf2;
}
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a[aria-current="page"] {
  background: rgba(255, 255, 255, .09);
  color: var(--red-light);
}

/* Untermenüs im mobilen Panel */
.mobile-nav li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mobile-nav li.menu-item-has-children > a { flex: 1; }
.mobile-nav li.menu-item-has-children > a::after { display: none; }
.mobile-nav .sub-toggle {
  width: 56px;
  height: 60px;
  color: #fff;
  border-radius: var(--r-sm);
}
.mobile-nav .sub-toggle svg { width: 16px; height: 16px; }
.mobile-nav li.is-open > .sub-toggle { transform: rotate(90deg); }
.mobile-nav .sub-menu {
  width: 100%;
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--line-dark);
  display: none;
}
.mobile-nav li.is-open > .sub-menu { display: block; }
.mobile-nav .sub-menu li { border-top: 0; }
.mobile-nav .sub-menu a {
  min-height: 50px;
  font-size: 1.05rem;
  font-weight: 400;
  color: #d3dbe3;
}

.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-btn[aria-current="page"] { background: var(--red); color: #fff; }
/* Jahreszahlen brauchen weniger Platz, deshalb mehrspaltig */
.filter-list-years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.filter-list-years .filter-btn { padding: 8px 12px; font-variant-numeric: tabular-nums; }
.filter-btn[aria-current="page"] .count { color: rgba(255, 255, 255, .8); }
.archive-side form.field { display: block; }

/* Blockeditor-Inhalte innerhalb der weißen Fläche */
.prose > .wp-block-image,
.prose > figure { margin: 30px 0; }
.prose .wp-block-image img { border-radius: var(--r-lg); }
.prose .wp-block-quote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 500;
}
/* Links im Fließtext: Textfarbe bleibt, eine feine rote Unterlinie trägt die
   Kennzeichnung. Buttons und Kacheln sind ausgenommen. */
.prose a:not(.btn):not(.wp-block-button__link),
.report a:not(.btn),
.entry-content a:not(.btn):not(.wp-block-button__link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(229, 36, 36, .45);
  text-underline-offset: .18em;
  transition: color var(--t) var(--ease),
              text-decoration-color var(--t) var(--ease),
              text-decoration-thickness var(--t) var(--ease);
}
.prose a:not(.btn):not(.wp-block-button__link):hover,
.report a:not(.btn):hover,
.entry-content a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--red-deep);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* In Tabellen und Listen dieselbe Behandlung, nur ohne Sonderfall */
.prose table a { text-underline-offset: .16em; }

.prose .wp-block-quote p { margin: 0; }
.prose .wp-block-quote cite { display: block; margin-top: 10px; font-family: var(--ff-text); font-size: var(--fs-sm); font-style: normal; color: var(--text-2); }
.prose .wp-block-button__link { border-radius: 999px; padding: 14px 24px; font-family: var(--ff-display); font-weight: 600; }
.prose .wp-block-table { overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.prose table th,
.prose table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-color: var(--line);
}
.prose table th { font-family: var(--ff-display); font-weight: 600; }
.prose table tr:last-child td { border-bottom: 0; }
.prose table tbody tr:hover { background: #fafbfc; }
/* Schmale Wertetabellen sollen nicht über die ganze Breite auseinanderlaufen */
.prose table th:first-child, .prose table td:first-child { width: 42%; }
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.prose .alignwide, .prose .alignfull { max-width: none; }

.prose .ffwg-callout {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  border-left: 4px solid var(--red);
}
.prose .ffwg-cards { gap: 16px; }

/* Kennzahlenband: vier Werte nebeneinander, Haarlinien über das Raster */
.prose .ffwg-stats {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prose .ffwg-stats .wp-block-column {
  background: #fff;
  padding: 18px 14px 16px;
  text-align: center;
}
.prose .ffwg-stats .value {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--red-deep);
}
.prose .ffwg-stats p:not(.value) {
  margin: 7px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* Abteilungskarten */
.prose .ffwg-dept-card {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding-bottom: 20px;
}
.prose .ffwg-dept-card figure { margin: 0 0 16px; }
.prose .ffwg-dept-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}
.prose .ffwg-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--red-tint);
  color: var(--red-deep);
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.prose .ffwg-dept-card .ffwg-badge { margin: 0 22px 8px; }

/* Abteilung als Medien-und-Text-Block: Text links, Bild rechts */
.prose .ffwg-dept-media {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  align-items: stretch;
}
.prose .ffwg-dept-media .wp-block-media-text__content {
  padding: clamp(20px, 2.4vw, 32px);
  align-self: center;
}
.prose .ffwg-dept-media .wp-block-media-text__media { height: 100%; }
.prose .ffwg-dept-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.prose .ffwg-dept-media h3 { margin: 0 0 6px; font-size: 1.15rem; }
.prose .ffwg-dept-media p:not(.ffwg-badge) {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
@media (max-width: 600px) {
  .prose .ffwg-dept-media img { aspect-ratio: 16 / 10; height: auto; }
}
.prose .ffwg-dept-card h3 { margin: 0 22px 5px; font-size: 1.1rem; }
.prose .ffwg-dept-card p:not(.ffwg-badge) {
  margin: 0 22px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* Fahrzeuge */
.prose .ffwg-vehicles img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.prose .ffwg-vehicles figure { margin: 0 0 12px; }
.prose .ffwg-vehicles h3 { margin: 0 0 3px; font-size: 1.05rem; }
.prose .ffwg-vehicles p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

/* Notrufhinweis */
.prose .ffwg-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 16px 22px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.prose .ffwg-notice .ffwg-112 {
  margin: 0;
  flex: none;
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--red-deep);
}
.prose .ffwg-notice p:not(.ffwg-112) {
  margin: 0;
  flex: 1;
  min-width: 260px;
  font-size: var(--fs-sm);
}

/* Kontaktkarten */
.prose .ffwg-contact {
  height: 100%;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.prose .ffwg-contact h3 { margin: 0 0 6px; font-size: 1.1rem; }
.prose .ffwg-contact p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.prose .ffwg-contact .ffwg-contact-data {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.prose .ffwg-contact-wide { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; }
.prose .ffwg-contact-wide h3 { margin: 0; }
.prose .ffwg-contact-wide p { flex: 1; min-width: 240px; }
.prose .ffwg-contact-wide .ffwg-contact-data {
  margin: 0;
  padding: 0;
  border: 0;
  flex: none;
}

/* Infokacheln */
.prose .ffwg-tile {
  height: 100%;
  padding: 18px 22px 20px;
  background: var(--paper);
  border-radius: var(--r-lg);
}
.prose .ffwg-tile .label { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.prose .ffwg-tile p:not(.label) { margin: 7px 0 0; }

/* Hervorgehobenes Zitat */
.prose .ffwg-quote {
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px);
  background: var(--paper);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.prose .ffwg-quote p {
  margin: 0;
  max-width: 52ch;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--text);
}

/* Zwei Wege: gleichwertige Karten mit unterschiedlicher Gewichtung */
.prose .ffwg-path {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--r-lg);
}
.prose .ffwg-path-primary { border-top-color: var(--red); }
.prose .ffwg-path-secondary { border-top-color: #5c6b7a; }
.prose .ffwg-path h3 { margin: 0 0 8px; font-size: 1.2rem; }
.prose .ffwg-path p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.prose .ffwg-path .ffwg-checklist { margin-top: 14px; font-size: var(--fs-sm); }
.prose .ffwg-path-secondary .ffwg-checklist li::before { border-color: #5c6b7a; }
.prose .ffwg-path .wp-block-buttons { margin-top: auto; padding-top: 18px; }

/* Buttons im Inhalt */
.prose .wp-block-button__link { background: var(--red); color: #fff; }
.prose .wp-block-button__link:hover { background: var(--red-deep); }
.prose .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line);
}
.prose .is-style-outline .wp-block-button__link:hover {
  background: var(--paper);
  border-color: #cfd6dd;
  color: var(--text);
}

/* Ausklappbare Fragen */
.prose .wp-block-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  background: #fff;
}
.prose .wp-block-details + .wp-block-details { margin-top: 8px; }
.prose .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-weight: 600;
}
.prose .wp-block-details summary::-webkit-details-marker { display: none; }
.prose .wp-block-details summary::after {
  content: "+";
  flex: none;
  color: var(--red);
  font-size: 1.3rem;
  line-height: 1;
}
.prose .wp-block-details[open] summary::after { content: "−"; }
.prose .wp-block-details summary:hover { color: var(--red-deep); }
.prose .wp-block-details p {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: 64ch;
}

/* Dienstzeit in den Abteilungskarten */
.prose .ffwg-dept-card .ffwg-time,
.prose .ffwg-dept-media .ffwg-time {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* Ablauf in Schritten */
.prose .ffwg-step {
  height: 100%;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.prose .ffwg-step .label {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--red-deep);
}
.prose .ffwg-step p:not(.label) { margin: 5px 0 0; font-size: var(--fs-sm); }

/* Kennzahl */
.prose .ffwg-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  padding: 24px 28px;
  background: var(--paper);
  border-radius: var(--r-lg);
}
.prose .ffwg-stat .value {
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--red-deep);
}
.prose .ffwg-stat p { margin: 0; }

/* Liste mit Haken */
.prose .ffwg-checklist {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 10px;
}
.prose .ffwg-checklist li {
  position: relative;
  margin: 0;
  padding-left: 32px;
}
.prose .ffwg-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}

/* Handlungsaufruf */
.prose .ffwg-cta {
  background: linear-gradient(135deg, var(--red-deep) 0%, #cf1d1d 55%, var(--red-deep) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.2vw, 42px);
}
.prose .ffwg-cta h2 {
  color: #fff;
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.prose .ffwg-cta p { margin-top: 10px; max-width: 54ch; }
.prose .ffwg-cta .wp-block-buttons { margin-top: 22px; }
.prose .ffwg-cta .wp-block-button__link {
  background: #fff;
  color: var(--red-deep);
  font-family: var(--ff-display);
  font-weight: 600;
}
.prose .ffwg-cta .wp-block-button__link:hover { background: #fff5f5; }
.prose .ffwg-cta a { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.prose .ffwg-cards .wp-block-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}

/* Blätterfunktion */
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 600;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pagination .page-numbers:hover { background: var(--paper); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}