/* =========================================================
   Freiwillige Feuerwehr Triefenried
   Stylesheet - Mobile First
   ========================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  --rot: #c8102e;
  --rot-dunkel: #9b0c23;
  /* Aufgehellt, damit Rot auf anthrazitem Grund 4.5:1 Kontrast erreicht. */
  --rot-hell: #f4626d;
  --rot-blass: #fdecef;

  --anthrazit: #1f2427;
  --grau-800: #2e353a;
  --grau-600: #4d565d;
  --grau-500: #6b7580;
  --grau-300: #cfd6dc;
  /* Nur für Sekundärtext auf dunklem Grund - --grau-500 wäre dort zu kontrastarm. */
  --grau-auf-dunkel: #8b95a1;
  --grau-100: #f2f4f6;
  --grau-50: #f8f9fa;
  --weiss: #ffffff;

  --gruen: #177044;
  --blau: #14568c;
  --orange: #994f00;
  --lila: #6b3fa0;

  /* Warnleuchten-Amber, angelehnt an die Rundumleuchte auf den Fahrzeugen.
     Bewusst sparsam einsetzen (Notruf-Icons) statt flächig. */
  --alarm: #f2a900;
  --alarm-dunkel: #b97e00;
  /* Wärmeres Off-White statt reinem Weiß für den Seitenhintergrund im
     Hellmodus - --weiss bleibt unverändert, da es an vielen Stellen als
     Kontrastfarbe auf Rot/Anthrazit dient und im Dark Mode umdefiniert wird. */
  --papier: #faf7f2;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 10px;

  --shadow-sm: 0 1px 3px rgb(31 36 39 / 0.08);
  --shadow: 0 4px 24px rgb(31 36 39 / 0.10);
  --shadow-lg: 0 12px 40px rgb(31 36 39 / 0.16);

  --container: 1200px;
  --container-schmal: 820px;
  --nav-h: 76px;
  --nav-h-klein: 62px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --t-schnell: 160ms ease;
  --t-normal: 280ms ease;
  --t-reveal: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* Filter und Tabs blenden Elemente über das hidden-Attribut aus. Eine eigene
   display-Regel (etwa .einsatz { display: grid }) schlägt die Standardregel des
   Browsers, sodass versteckte Elemente sichtbar blieben. Diese Regel stellt das
   erwartete Verhalten wieder her und muss vor allen Komponenten stehen. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--grau-800);
  background: var(--papier);
  /* Lange deutsche Komposita sollen auf schmalen Displays umbrechen
     statt die Seite breiter zu machen. */
  overflow-wrap: break-word;
  overflow-x: hidden;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--grau-100);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* ---------- 2b. Icon-Sprite ---------- */
/* Icons skalieren über die font-size des umgebenden Elements (1em),
   damit bestehende *__icon-Regeln (font-size) unverändert weitergelten. */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  /* Ohne das schrumpft das Icon in Flex-Reihen (z. B. Icon neben
     zweizeilig umbrechender Überschrift) auf Breite 0 - ein Emoji-Zeichen
     hatte durch seinen Text-Mindestinhalt automatisch einen Sicherheitsfloor,
     ein SVG-Element hat den nicht. */
  flex-shrink: 0;
}

body.nav-offen {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  color: var(--anthrazit);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}
h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}
h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: var(--rot);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--rot-dunkel);
}

ul,
ol {
  padding-left: 1.25rem;
}

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout-Helfer ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.container--schmal {
  max-width: var(--container-schmal);
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--grau {
  background: var(--grau-50);
}

.section--dunkel {
  background: var(--anthrazit);
  color: var(--grau-300);
}

.section--dunkel h2,
.section--dunkel h3 {
  color: var(--weiss);
}

.section-kopf {
  max-width: 700px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-kopf--zentriert {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--rot);
}

/* Auf dunklem Grund erreicht --rot nur 2.66:1, daher überall den
   aufgehellten Ton verwenden. */
.section--dunkel .eyebrow,
.cta .eyebrow,
.section--dunkel .person__funktion,
.section--dunkel .link-pfeil,
.cta .link-pfeil {
  color: var(--rot-hell);
}

.section--dunkel .eyebrow::before,
.cta .eyebrow::before {
  background: var(--rot-hell);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--grau-600);
}

.section--dunkel .lead {
  color: var(--grau-300);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-schnell), color var(--t-schnell),
    border-color var(--t-schnell), transform var(--t-schnell),
    box-shadow var(--t-schnell);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
  box-shadow: 0 6px 18px rgb(200 16 46 / 0.28);
}

.btn--primary:hover {
  background: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
  color: var(--weiss);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--anthrazit);
}

.btn--ghost:hover {
  background: var(--anthrazit);
  border-color: var(--anthrazit);
  color: var(--weiss);
}

.btn--hell {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--weiss);
  color: var(--weiss);
  backdrop-filter: blur(4px);
}

.btn--hell:hover {
  background: var(--weiss);
  color: var(--anthrazit);
}

.btn--gross {
  min-height: 62px;
  padding: 1.05rem 2.5rem;
  font-size: 1.125rem;
}

.btn--block {
  width: 100%;
}

.btn-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn-gruppe--zentriert {
  justify-content: center;
}

/* ---------- 5. Demo-Kennzeichnung ---------- */
.demo-banner {
  background: var(--grau-800);
  color: var(--grau-100);
  font-size: 0.875rem;
  line-height: 1.45;
}

.demo-banner__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.6rem;
}

.demo-banner p {
  margin: 0;
}

.demo-banner strong {
  color: var(--weiss);
}

.demo-banner__schliessen {
  flex-shrink: 0;
  margin-left: auto;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.demo-banner__schliessen:hover {
  background: rgb(255 255 255 / 0.14);
}

.demo-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px dashed var(--grau-500);
  border-radius: var(--radius-pill);
  background: var(--grau-100);
  color: var(--grau-600);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.section--dunkel .demo-badge {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.35);
  color: var(--grau-300);
}

.hinweisbox {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-left: 5px solid var(--grau-500);
  border-radius: var(--radius-sm);
  background: var(--grau-100);
  color: var(--grau-600);
  font-size: 0.95rem;
}

.hinweisbox p:last-child {
  margin-bottom: 0;
}

.hinweisbox__icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

/* Grün ist die international übliche Kennfarbe für Defibrillatoren und
   Rettungsmittel – dadurch unterscheidet sich der Hinweis deutlich vom
   roten Notrufkasten. */
.hinweisbox--defi {
  border-left-color: var(--gruen);
  background: #eef6f1;
  color: var(--grau-800);
}

.hinweisbox--defi strong {
  color: var(--gruen);
}

.hinweisbox--defi .hinweisbox__icon {
  color: var(--gruen);
}

/* ---------- 6. Skip-Link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--rot);
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-schnell);
}

.skip-link:focus {
  top: 0;
  color: var(--weiss);
}

/* ---------- 7. Kopfzeile / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-300);
  transition: box-shadow var(--t-normal);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-h);
  transition: min-height var(--t-normal);
}

.site-header.is-scrolled .site-header__inner {
  min-height: var(--nav-h-klein);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--anthrazit);
}

.logo:hover {
  color: var(--anthrazit);
}

.logo__mark {
  flex-shrink: 0;
  /* Etwas größer als das frühere Flammensymbol: Das Wappen zeigt mehr Details
     und wirkt bei 42 px gedrängt. */
  width: 50px;
  height: 50px;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo__zeile1 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rot);
}

.logo__zeile2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-sm);
  background: var(--weiss);
  color: var(--anthrazit);
  cursor: pointer;
}

.nav-toggle__balken {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--t-schnell);
}

.nav-toggle__balken::before,
.nav-toggle__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-normal), top var(--t-normal);
}

.nav-toggle__balken::before {
  top: -7px;
}
.nav-toggle__balken::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__balken {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__balken::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__balken::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobil: Ausklappmenü direkt unter der Kopfzeile - dadurch immer korrekt
   positioniert, auch wenn darüber noch das Hinweisbanner steht. */
.hauptnav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  max-height: calc(100vh - var(--nav-h));
  padding: 1rem 20px 2rem;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-300);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: transform var(--t-normal), opacity var(--t-normal),
    visibility var(--t-normal);
}

.hauptnav.is-offen {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.hauptnav__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnav__link {
  display: block;
  padding: 0.95rem 0.5rem;
  border-bottom: 1px solid var(--grau-100);
  color: var(--anthrazit);
  font-size: 1.075rem;
  font-weight: 600;
  text-decoration: none;
}

.hauptnav__link:hover {
  color: var(--rot);
}

.hauptnav__link[aria-current="page"] {
  color: var(--rot);
  border-left: 4px solid var(--rot);
  padding-left: 0.8rem;
}

.hauptnav__notruf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--rot);
  color: var(--weiss);
  font-weight: 800;
  text-decoration: none;
}

.hauptnav__notruf:hover {
  background: var(--rot-dunkel);
  color: var(--weiss);
}

/* Amber statt Weiß fürs Alarm-Icon: zitiert die Rundumleuchte, bleibt aber
   auf einen einzelnen, dringlichen Ort beschränkt. */
.hauptnav__notruf .icon,
.footer-notruf .icon,
.notruf__icon .icon {
  color: var(--alarm);
}

/* Die Kopfzeile darf breiter werden als der Inhalt, damit die zehn
   Menüpunkte plus Notruf-Button in eine Zeile passen. */
@media (min-width: 1200px) {
  .site-header__inner {
    max-width: 1440px;
  }

  .nav-toggle {
    display: none;
  }

  .hauptnav {
    position: static;
    max-height: none;
    margin-left: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    visibility: visible;
    background: transparent;
  }

  .hauptnav__liste {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .hauptnav__link {
    position: relative;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .hauptnav__link::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--rot);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-schnell);
  }

  .hauptnav__link:hover::after,
  .hauptnav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .hauptnav__link[aria-current="page"] {
    border-left: 0;
    padding-left: 0.55rem;
  }

  .hauptnav__notruf {
    margin-top: 0;
    margin-left: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .hauptnav__link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
  }

  .hauptnav__link::after {
    left: 0.75rem;
    right: 0.75rem;
  }

  .hauptnav__link[aria-current="page"] {
    padding-left: 0.75rem;
  }

  .hauptnav__notruf {
    padding: 0.55rem 1.1rem;
    font-size: 0.9375rem;
  }
}

/* ---------- 7b. Untermenue (z. B. Chronik) ---------- */
/* Mobil: Der Elternpunkt bleibt ein normaler Link, der Pfeil-Button daneben
   klappt die Unterseiten auf. So bleibt das Menue kurz, auch wenn spaeter
   weitere Unterseiten dazukommen. */
.hauptnav__item--menu {
  position: relative;
}

.hauptnav__item--menu > .hauptnav__link {
  padding-right: 3rem;
}

.untermenue-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--anthrazit);
  cursor: pointer;
}

.untermenue-btn__icon {
  display: block;
  font-size: 0.75rem;
  line-height: 1;
  transition: transform var(--t-normal);
}

.untermenue-btn[aria-expanded="true"] .untermenue-btn__icon {
  transform: rotate(180deg);
}

.untermenue {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.hauptnav__item--menu.is-offen > .untermenue {
  display: block;
}

.untermenue__link {
  display: block;
  padding: 0.75rem 0.5rem 0.75rem 1.5rem;
  border-bottom: 1px solid var(--grau-100);
  color: var(--grau-600);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.untermenue__link:hover {
  color: var(--rot);
}

.untermenue__link[aria-current="page"] {
  color: var(--rot);
}

/* Elternpunkt hervorheben, wenn eine Unterseite offen ist */
.hauptnav__link--aktiv {
  color: var(--rot);
  border-left: 4px solid var(--rot);
  padding-left: 0.8rem;
}

@media (min-width: 1200px) {
  .hauptnav__item--menu > .hauptnav__link {
    padding-right: 1.5rem;
  }

  .untermenue-btn {
    width: 1.1rem;
    height: auto;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
  }

  .untermenue {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 95;
    display: block;
    min-width: 15rem;
    margin-top: 0.35rem;
    padding: 0.4rem;
    border: 1px solid var(--grau-300);
    border-radius: var(--radius);
    background: var(--weiss);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-schnell), transform var(--t-schnell),
      visibility var(--t-schnell);
  }

  .hauptnav__item--menu:hover > .untermenue,
  .hauptnav__item--menu:focus-within > .untermenue,
  .hauptnav__item--menu.is-offen > .untermenue {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .untermenue__link {
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--anthrazit);
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .untermenue__link:hover {
    background: var(--grau-50);
    color: var(--rot);
  }

  .hauptnav__link--aktiv {
    border-left: 0;
    padding-left: 0.55rem;
  }

  .hauptnav__link--aktiv::after {
    transform: scaleX(1);
  }
}

@media (min-width: 1400px) {
  .hauptnav__link--aktiv {
    padding-left: 0.75rem;
  }
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 680px);
  padding-block: clamp(4.5rem, 12vw, 8rem) clamp(2.5rem, 5vw, 3.5rem);
  background: var(--anthrazit);
  color: var(--weiss);
  overflow: hidden;
}

.hero--klein {
  min-height: min(42vh, 380px);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Von unten nach oben abgedunkelt. Die Abstufung endet knapp über der
   Textoberkante, damit Himmel und Dach des Gerätehauses sichtbar bleiben.
   Werte sind gegen die Kontrastgrenzen des Hero-Textes geprüft. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(16 19 21 / 0.93) 0%,
    rgb(16 19 21 / 0.86) 50%,
    rgb(16 19 21 / 0.68) 72%,
    rgb(16 19 21 / 0.25) 88%,
    rgb(16 19 21 / 0.05) 100%
  );
}

.hero__inhalt {
  position: relative;
  z-index: 2;
  max-width: 760px;
  /* Zusätzliche Absicherung, falls ein späteres Foto an einer Stelle
     heller ausfällt als das aktuelle. */
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

.hero h1 {
  /* Bewusst fest Weiß statt var(--weiss): der Text steht immer auf dem
     abgedunkelten Hero-Foto, unabhängig vom Farbschema. var(--weiss) wird
     im Dark Mode zu Fast-Schwarz umdefiniert und wäre dort unlesbar. */
  color: #fff;
  margin-bottom: 0.35em;
}

.hero__untertitel {
  margin: 0 0 0.9rem;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rot-hell);
}

.hero__text {
  max-width: 560px;
  margin-bottom: 2rem;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: rgb(255 255 255 / 0.88);
}

.hero__eyebrow {
  /* Gleicher Grund wie bei .hero h1: fest Weiß, da immer auf dem
     abgedunkelten Hero-Foto. */
  color: #fff;
}

.hero__eyebrow::before {
  background: var(--rot-hell);
}

/* Breadcrumb */
.breadcrumb {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.75);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: rgb(255 255 255 / 0.5);
}

.breadcrumb a {
  color: rgb(255 255 255 / 0.85);
}

.breadcrumb a:hover {
  color: var(--weiss);
}

/* ---------- 9. Karten allgemein ---------- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal),
    border-color var(--t-normal);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--grau-300);
  box-shadow: var(--shadow-lg);
}

.card__bild {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--grau-100);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.card__body > p:last-of-type {
  margin-bottom: 1.25rem;
}

.card__body .btn,
.card__body .link-pfeil {
  margin-top: auto;
  align-self: flex-start;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  color: var(--grau-500);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--grau-600);
}

/* Info-Karten Startseite */
.infokarte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.infokarte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal);
}

.infokarte:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.infokarte:hover::before,
.infokarte:focus-visible::before {
  transform: scaleX(1);
}

.infokarte__icon {
  margin-bottom: 1rem;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--rot);
}

.infokarte h2,
.infokarte h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.infokarte p {
  margin-bottom: 1.5rem;
  color: var(--grau-600);
}

.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--rot);
  font-weight: 700;
  text-decoration: none;
}

.link-pfeil::after {
  content: "→";
  transition: transform var(--t-schnell);
}

.infokarte:hover .link-pfeil::after,
.link-pfeil:hover::after {
  transform: translateX(4px);
}

/* ---------- 10. Kategorie-Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--grau-100);
  color: var(--grau-600);
  white-space: nowrap;
}

.chip--brand {
  background: var(--rot-blass);
  color: var(--rot-dunkel);
}
.chip--hilfe {
  background: #e8f2fb;
  color: var(--blau);
}
.chip--verkehr {
  background: #fdf0e3;
  color: var(--orange);
}
.chip--unwetter {
  background: #e9f5ee;
  color: var(--gruen);
}
.chip--wache {
  background: #f0ebf8;
  color: var(--lila);
}
.chip--sonstiges {
  background: var(--grau-100);
  color: var(--grau-600);
}

/* ---------- 11. Filterleiste ---------- */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.filter-btn {
  min-height: 46px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-pill);
  background: var(--weiss);
  color: var(--grau-600);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-schnell), color var(--t-schnell),
    border-color var(--t-schnell);
}

.filter-btn:hover {
  border-color: var(--rot);
  color: var(--rot);
}

.filter-btn[aria-pressed="true"] {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
}

.filter-status {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--grau-500);
}

/* ---------- 12. Einsatzchronik ---------- */
.einsatz-liste {
  display: grid;
  gap: 1.1rem;
}

.einsatz {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--grau-300);
  border-left: 5px solid var(--grau-500);
  border-radius: var(--radius);
  background: var(--weiss);
  transition: box-shadow var(--t-normal);
}

.einsatz:hover {
  box-shadow: var(--shadow);
}

.einsatz[data-kategorie="brand"] {
  border-left-color: var(--rot);
}
.einsatz[data-kategorie="hilfe"] {
  border-left-color: var(--blau);
}
.einsatz[data-kategorie="verkehr"] {
  border-left-color: var(--orange);
}
.einsatz[data-kategorie="unwetter"] {
  border-left-color: var(--gruen);
}
.einsatz[data-kategorie="wache"] {
  border-left-color: var(--lila);
}

.einsatz__datum {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-weight: 800;
  color: var(--anthrazit);
}

.einsatz__tag {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.einsatz__uhrzeit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--grau-500);
}

.einsatz__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.einsatz h3 {
  margin: 0;
  font-size: 1.15rem;
}

.einsatz__ort {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--grau-500);
}

.einsatz p {
  margin-bottom: 0.9rem;
}

.einsatz__fahrzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.einsatz__fahrzeuge li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-sm);
  background: var(--grau-50);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grau-600);
}

@media (min-width: 720px) {
  .einsatz {
    grid-template-columns: 150px 1fr;
    align-items: start;
  }
  .einsatz__datum {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ---------- 12b. Brandeinsatz-Chronik (nach Jahren) ---------- */
.brandliste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.brandjahr {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--grau-300);
  border-left: 5px solid var(--rot);
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--shadow-sm);
}

.brandjahr__jahr {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rot);
}

.brandjahr__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.brandjahr__liste li {
  padding-left: 1.1rem;
  position: relative;
  color: var(--grau-800);
}

.brandjahr__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rot);
}

.brandjahr__datum {
  font-weight: 700;
  color: var(--anthrazit);
}

@media (min-width: 720px) {
  .brandjahr {
    grid-template-columns: 6.5rem 1fr;
    align-items: start;
  }

  .brandjahr__jahr {
    padding-top: 0.1rem;
  }
}

/* ---------- 12c. Amtszeiten-Tabelle (Kommandanten) ---------- */
/* Der Rahmen scrollt notfalls waagrecht, damit die Seite selbst nie
   ueber den Bildschirmrand hinauslaeuft. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--shadow-sm);
}

.amtszeiten {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.amtszeiten th,
.amtszeiten td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--grau-100);
}

.amtszeiten thead th {
  border-bottom: 2px solid var(--rot);
  background: var(--grau-50);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau-600);
  white-space: nowrap;
}

.amtszeiten tbody tr:last-child th,
.amtszeiten tbody tr:last-child td {
  border-bottom: 0;
}

.amtszeiten tbody tr:hover {
  background: var(--grau-50);
}

.amtszeiten__zeit {
  font-weight: 700;
  color: var(--anthrazit);
  white-space: nowrap;
}

.amtszeiten__name {
  font-weight: 600;
}

.amtszeiten__ort {
  color: var(--grau-600);
}

/* Aktuell im Amt */
.amtszeiten tr[data-aktuell] {
  background: color-mix(in srgb, var(--rot) 7%, transparent);
}

.amtszeiten tr[data-aktuell] .amtszeiten__zeit,
.amtszeiten tr[data-aktuell] .amtszeiten__name {
  color: var(--rot);
}

.amtszeiten__leer {
  color: var(--grau-500);
  font-style: italic;
}

/* Auf schmalen Bildschirmen enger setzen, damit die drei Spalten ohne
   seitliches Scrollen auf den Schirm passen. */
@media (max-width: 600px) {
  .amtszeiten {
    font-size: 0.85rem;
  }

  .amtszeiten th,
  .amtszeiten td {
    padding: 0.6rem 0.55rem;
  }

  .amtszeiten thead th {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
}

/* ---------- 13. Statistik ---------- */
.statistik {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .statistik {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  text-align: center;
}

/* Abgedunkelt statt aufgehellt: hält den Kontrast der roten Akzente
   auf den Karten über 4.5:1. */
.section--dunkel .stat {
  background: rgb(0 0 0 / 0.22);
  border-color: rgb(255 255 255 / 0.14);
}

.stat__zahl {
  display: block;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--rot);
}

.section--dunkel .stat__zahl {
  color: var(--rot-hell);
}

.stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--grau-500);
}

.section--dunkel .stat__label {
  color: var(--grau-300);
}

/* ---------- 14. Fahrzeugkarten ---------- */
.fahrzeug {
  display: grid;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  overflow: hidden;
  margin-bottom: 2rem;
}

.fahrzeug__bild {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--grau-100);
}

.fahrzeug__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.fahrzeug__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

/* Behälter für Fahrzeuge mit mehreren Aufnahmen. Ohne ihn wäre ein zweites
   Bild ein eigenes Rasterfeld und würde die zweispaltige Karte sprengen. */
.fahrzeug__bilder {
  display: grid;
  gap: 1px;
  background: var(--grau-300);
}

.fahrzeug__beladung {
  margin: 0 auto;
  background: var(--weiss);
  max-width: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .fahrzeug__beladung {
    max-width: 600px;
  }
}

/* Das Beladungsbild wird vollständig gezeigt statt beschnitten – sonst
   fehlten oben und unten Teile der ausgelegten Ausrüstung. */
.fahrzeug__beladung img {
  display: block;
  width: 100%;
  height: auto;
}

.fahrzeug__beladung figcaption {
  padding: 0.7rem 1rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--grau-600);
  text-align: center;
}

.fahrzeug h3 {
  margin: 0;
}

.fahrzeug__funkruf {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--anthrazit);
  color: var(--weiss);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.datenliste {
  display: grid;
  gap: 0.1rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--grau-300);
}

.datenliste > div {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--grau-100);
}

.datenliste dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau-500);
}

.datenliste dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: var(--anthrazit);
}

@media (min-width: 640px) {
  .datenliste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .fahrzeug {
    grid-template-columns: 45% 1fr;
  }
  /* Das Bild behält sein Seitenverhältnis und sitzt oben statt sich auf die
     volle Kartenhöhe zu strecken. Sonst schneidet object-fit bei einem
     Querformat-Foto fast das gesamte Fahrzeug weg. */
  .fahrzeug__bild {
    align-self: start;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  /* Der Bildbehälter darf ebenfalls nicht auf Kartenhöhe gestreckt werden. */
  .fahrzeug__bilder {
    align-self: start;
  }
}

.beladung {
  margin: 0;
  padding-left: 1.15rem;
  columns: 1;
}

@media (min-width: 640px) {
  .beladung {
    columns: 3;
    column-gap: 2rem;
  }
}

.beladung li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
  color: var(--grau-600);
}

/* ---------- 15. Mannschaft ---------- */
.person {
  padding: 1.5rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  text-align: center;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.person:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.person__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--grau-100);
  border: 3px solid var(--weiss);
  box-shadow: 0 0 0 2px var(--grau-300);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--rot);
  letter-spacing: 0.02em;
}

.person--fuehrung .person__avatar {
  background: var(--rot);
  color: var(--weiss);
  box-shadow: 0 0 0 2px var(--rot);
}

/* Wo ein Porträt vorliegt, ersetzt es den Kreis mit den Initialen. Gleiche
   Größe und Umrandung, damit Karten mit und ohne Foto zusammenpassen. */
.person__foto {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid var(--weiss);
  box-shadow: 0 0 0 2px var(--grau-300);
  object-fit: cover;
}

.person--fuehrung .person__foto {
  box-shadow: 0 0 0 2px var(--rot);
}

.person h3 {
  margin-bottom: 0.2rem;
  font-size: 1.075rem;
}

.person__funktion {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rot);
}

.person__info {
  margin: 0;
  font-size: 0.9rem;
  color: var(--grau-500);
}

/* ---------- 16. Termine ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--grau-300);
}

.tab {
  position: relative;
  min-height: 50px;
  padding: 0.7rem 1.35rem;
  border: 0;
  background: transparent;
  color: var(--grau-500);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab:hover {
  color: var(--rot);
  background: var(--grau-50);
}

.tab[aria-selected="true"] {
  color: var(--rot);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--rot);
  border-radius: 2px;
}

.termin {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  transition: box-shadow var(--t-normal), border-color var(--t-normal);
}

.termin:hover {
  border-color: var(--rot);
  box-shadow: var(--shadow);
}

.termin--vergangen {
  background: var(--grau-50);
}

.termin__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  padding: 0.6rem 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--rot);
  color: var(--weiss);
  text-align: center;
  line-height: 1.1;
}

.termin--vergangen .termin__datum {
  background: var(--grau-500);
}

/* Abgesagte Termine bleiben stehen statt zu verschwinden - sonst sucht jemand
   die Einladung und wartet am Ende am Treffpunkt. Die komplette Einladung wird
   deshalb durchgestrichen und ausgegraut, der rote Rahmen samt Hinweisbox macht
   die Absage schon beim Überfliegen sichtbar. */
.termin--abgesagt {
  border-color: var(--rot);
  background: var(--grau-50);
}

.termin--abgesagt .termin__datum {
  background: var(--grau-500);
}

/* Nur die direkten Kinder streichen. text-decoration vererbt sich an alle
   Nachfahren und lässt sich dort nicht mehr abschalten - die Hinweisbox als
   eigenes Kind bleibt so vom Durchstreichen verschont und gut lesbar. */
.termin--abgesagt .termin__body > h3,
.termin--abgesagt .termin__body > h4,
.termin--abgesagt .termin__body > p,
.termin--abgesagt .termin__body > p:last-child,
.termin--abgesagt .termin__body > ul {
  color: var(--grau-500);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.termin--abgesagt .termin__body > * strong {
  color: inherit;
  font-weight: 600;
}

.chip--abgesagt {
  background: var(--rot);
  color: var(--weiss);
  text-decoration: none;
}

.hinweisbox--abgesagt {
  border-left-color: var(--rot);
  background: var(--rot-blass);
  color: var(--grau-800);
}

.hinweisbox--abgesagt strong {
  color: var(--rot-dunkel);
}

.termin__tag {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.termin__monat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.termin h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.termin__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--grau-600);
}

.termin p:last-child {
  margin-bottom: 0;
  color: var(--grau-600);
}

@media (min-width: 640px) {
  .termin {
    grid-template-columns: 78px 1fr auto;
  }
  .termin__body {
    min-width: 0;
  }
}

/* ---------- 17. Galerie ---------- */
.galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
  .galerie {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .galerie {
    grid-template-columns: repeat(4, 1fr);
  }
}

.galerie__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--grau-100);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
}

.galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-normal);
}

.galerie__item:hover img {
  transform: scale(1.06);
}

.galerie__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(20 24 26 / 0.75), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-normal);
}

.galerie__item:hover::after,
.galerie__item:focus-visible::after {
  opacity: 1;
}

.galerie__label {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.7rem;
  z-index: 2;
  color: var(--weiss);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-normal), transform var(--t-normal);
}

.galerie__item:hover .galerie__label,
.galerie__item:focus-visible .galerie__label {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(15 18 20 / 0.94);
}

.lightbox[open],
.lightbox.is-offen {
  display: flex;
}

.lightbox__figur {
  margin: 0;
  /* Feste Breite statt max-width: Als Flex-Element würde die Figur sonst auf
     Bildgrösse schrumpfen, womit sich prozentuale Angaben im Bild darauf
     beziehen und wirkungslos bleiben. */
  width: min(1100px, 100%);
  text-align: center;
}

.lightbox__bild {
  /* Mindestbreite, damit gering aufgelöste Aufnahmen nicht als Briefmarke
     mitten in der dunklen Fläche stehen. Grosse Bilder begrenzt max-width. */
  min-width: min(320px, 100%);
  max-width: 100%;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--anthrazit);
}

.lightbox__bildunterschrift {
  margin-top: 1rem;
  color: var(--grau-300);
  font-size: 0.95rem;
}

.lightbox__zaehler {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--grau-auf-dunkel);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--weiss);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-schnell);
}

.lightbox__btn:hover {
  background: rgb(255 255 255 / 0.25);
}

.lightbox__schliessen {
  top: 1rem;
  right: 1rem;
}
.lightbox__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- 18. Notruf-Banner ---------- */
.notruf {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--rot);
  color: var(--weiss);
  box-shadow: 0 10px 34px rgb(200 16 46 / 0.3);
}

.notruf__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.notruf__icon {
  flex-shrink: 0;
  font-size: 2.5rem;
  line-height: 1;
}

.notruf__text {
  flex: 1 1 260px;
}

.notruf h2 {
  margin: 0 0 0.3rem;
  color: var(--weiss);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.notruf p {
  margin: 0;
  color: rgb(255 255 255 / 0.92);
}

.notruf .btn {
  flex-shrink: 0;
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--rot);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.notruf .btn:hover {
  background: var(--anthrazit);
  border-color: var(--anthrazit);
  color: var(--weiss);
}

/* ---------- 19. CTA-Banner ---------- */
.cta {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--anthrazit);
  color: var(--weiss);
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 55%;
  height: 160%;
  background: radial-gradient(
    circle at center,
    rgb(200 16 46 / 0.35),
    transparent 65%
  );
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.cta h2 {
  color: var(--weiss);
}

.cta p {
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  color: rgb(255 255 255 / 0.85);
  margin-bottom: 1.75rem;
}

/* ---------- 20. Jugendfeuerwehr ---------- */
.jugend-hero {
  background: linear-gradient(135deg, var(--rot) 0%, var(--rot-dunkel) 100%);
  color: var(--weiss);
}

.jugend-hero h1,
.jugend-hero h2 {
  color: var(--weiss);
}

.jugend-hero p,
.jugend-hero li {
  color: rgb(255 255 255 / 0.92);
}

.jugend-hero .eyebrow {
  color: var(--weiss);
}

.jugend-hero .eyebrow::before {
  background: var(--weiss);
}

.merkmal {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  height: 100%;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.merkmal:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.merkmal__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--rot-blass);
  color: var(--rot);
  font-size: 1.6rem;
  line-height: 1;
}

.merkmal h3 {
  margin-bottom: 0.35rem;
  font-size: 1.075rem;
}

.merkmal p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--grau-600);
}

/* ---------- 21. Textbereiche / Prosa ---------- */
.prosa {
  max-width: 70ch;
}

.prosa h2 {
  margin-top: 2.5rem;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa h3 {
  margin-top: 1.75rem;
}

.prosa ul li,
.prosa ol li {
  margin-bottom: 0.4rem;
}

.textblock {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  height: 100%;
}

.textblock h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Ohne das kann das Icon-Span bei zweizeilig umbrechenden Überschriften auf
   Breite 0 schrumpfen - der Flex-Algorithmus gibt einem SVG-Icon anders als
   einem Text-Zeichen keinen automatischen Mindestinhalt. */
.textblock h3 > span {
  flex-shrink: 0;
}

.textblock p:last-child,
.textblock ul:last-child {
  margin-bottom: 0;
}

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--bild-rechts .split__bild {
    order: 2;
  }
}

.split__bild img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Hochformate würden die Textspalte daneben sonst deutlich überragen.
     Der Zuschnitt nimmt oben und unten gleich viel weg, das Motiv in der
     Bildmitte bleibt erhalten. */
  max-height: 560px;
  object-fit: cover;
}

/* ---------- 22. Kontakt ---------- */
.kontakt-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .kontakt-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}

.kontakt-block {
  margin-bottom: 2rem;
}

.kontakt-block h3 {
  margin-bottom: 0.6rem;
}

.kontakt-block address {
  font-style: normal;
  color: var(--grau-600);
}

.formular {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--shadow-sm);
}

.feld {
  margin-bottom: 1.25rem;
}

.feld label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--anthrazit);
}

.feld .pflicht {
  color: var(--rot);
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-sm);
  background: var(--weiss);
  font: inherit;
  font-size: 1rem;
  color: var(--anthrazit);
  transition: border-color var(--t-schnell), box-shadow var(--t-schnell);
}

.feld textarea {
  min-height: 150px;
  resize: vertical;
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--rot);
  box-shadow: 0 0 0 3px rgb(200 16 46 / 0.14);
  outline: none;
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--rot);
  background: var(--rot-blass);
}

.feld__fehler {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rot-dunkel);
}

.feld--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.feld--checkbox input {
  width: 22px;
  min-height: 22px;
  height: 22px;
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--rot);
}

.feld--checkbox label {
  margin: 0;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--grau-600);
}

.formular__hinweis {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--grau-500);
}

.form-status {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status--fehler {
  background: var(--rot-blass);
  color: var(--rot-dunkel);
  border-left: 4px solid var(--rot);
}

.form-status--ok {
  background: #e9f5ee;
  color: var(--gruen);
  border-left: 4px solid var(--gruen);
}

/* Karte */
.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 340px;
  padding: 2rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--grau-100);
  text-align: center;
  overflow: hidden;
}

.karte iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  border-radius: var(--radius);
}

.karte__icon {
  font-size: 2.5rem;
}

.karte p {
  max-width: 46ch;
  margin: 0;
  font-size: 0.92rem;
  color: var(--grau-600);
}

/* Textlink als Ausweg, falls die Karte bewusst nicht geladen wird. */
.karte__alternative {
  font-size: 0.86rem;
}

/* ---------- 23. Footer ---------- */
.site-footer {
  padding-block: clamp(2.75rem, 6vw, 4rem) 0;
  background: var(--anthrazit);
  color: var(--grau-300);
  font-size: 0.95rem;
}

.site-footer h3 {
  margin-bottom: 1rem;
  color: var(--weiss);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--grau-300);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--weiss);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

.footer-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-liste li {
  margin-bottom: 0.55rem;
}

.footer-marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.footer-marke__text {
  color: var(--weiss);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
}

.footer-notruf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--rot);
  color: var(--weiss) !important;
  font-weight: 800;
  text-decoration: none !important;
}

.footer-notruf:hover {
  background: var(--rot-dunkel);
}

.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  transition: background-color var(--t-schnell), border-color var(--t-schnell);
}

.social a:hover {
  background: var(--rot);
  border-color: var(--rot);
  text-decoration: none;
}

.footer-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.875rem;
  color: var(--grau-auf-dunkel);
}

.footer-unten__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 23a. Bild mit Unterschrift (Chronik) ---------- */
.chronik-bild {
  margin: 0;
}

.chronik-bild img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.chronik-bild figcaption {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--grau-600);
  text-align: center;
}

/* ---------- 23b. Zeitleiste (Chronik) ---------- */
.zeitleiste {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.25rem;
  list-style: none;
}

/* Durchgehende Linie. Sie endet auf Höhe des letzten Punktes, damit sie
   nicht ins Leere läuft. */
.zeitleiste::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 7px;
  width: 2px;
  background: var(--grau-300);
}

.zeitleiste__eintrag {
  position: relative;
  padding-bottom: 1.75rem;
}

.zeitleiste__eintrag:last-child {
  padding-bottom: 0;
}

.zeitleiste__eintrag::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: -2.25rem;
  width: 16px;
  height: 16px;
  border: 3px solid var(--weiss);
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 0 2px var(--rot);
}

.zeitleiste__jahr {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rot);
}

.zeitleiste__text {
  margin: 0.15rem 0 0;
  color: var(--grau-600);
}

/* Auf dunklem Grund die aufgehellten Töne verwenden. */
.section--dunkel .zeitleiste::before {
  background: var(--grau-600);
}

.section--dunkel .zeitleiste__eintrag::before {
  border-color: var(--anthrazit);
  background: var(--rot-hell);
  box-shadow: 0 0 0 2px var(--rot-hell);
}

.section--dunkel .zeitleiste__jahr {
  color: var(--rot-hell);
}

.section--dunkel .zeitleiste__text {
  color: var(--grau-300);
}

@media (min-width: 720px) {
  .zeitleiste__eintrag {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }
  .zeitleiste__text {
    margin-top: 0;
  }
}

/* ---------- 24. Scroll-Reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffelte Verzögerung innerhalb einer Gruppe */
.js [data-reveal][style*="--delay"] {
  transition-delay: var(--delay);
}

/* ---------- 25. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card:hover,
  .infokarte:hover,
  .person:hover,
  .merkmal:hover {
    transform: none;
  }
}

/* ---------- 26. Druck ---------- */
@media print {
  .site-header,
  .site-footer,
  .demo-banner,
  .skip-link,
  .filterleiste,
  .lightbox,
  .btn {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .hero::after {
    display: none;
  }
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --anthrazit: #f8f9fa;
  --grau-800: #e8ecf0;
  --grau-600: #b2bcc6;
  --grau-500: #94a1aa;
  --grau-300: #505a63;
  --grau-auf-dunkel: #747e88;
  --grau-100: #2e353a;
  --grau-50: #1f2427;
  --weiss: #0a0d10;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.32);
  --shadow: 0 4px 24px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.56);
}

[data-theme="dark"] body {
  background: var(--weiss);
  color: var(--grau-800);
}

[data-theme="dark"] code {
  background: var(--grau-100);
  color: var(--grau-800);
}

/* Der Defi-Hinweiskasten bleibt bewusst in beiden Modi hellgrün (Kennfarbe
   für Defibrillatoren). var(--grau-800) wird im Dark Mode zu Fast-Weiß und
   wäre auf dem hellen Kasten unlesbar - Text bleibt daher fest dunkel. */
[data-theme="dark"] .hinweisbox--defi {
  color: #1f2427;
}

/* Theme-Toggle Button Styling */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--t-schnell), transform var(--t-schnell);
}

.theme-toggle:hover {
  background-color: var(--grau-100);
  transform: scale(1.1);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: var(--grau-100);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Navigation Actions Layout */
.hauptnav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .hauptnav__actions {
    margin-top: 0;
  }
}