/* ============================================================
   Löscheinheit Lüttringhausen — Gestaltungssystem
   Schiefer, Kalk, Ladengrün, RAL 3000.
   Rot ist reserviert: es erscheint nur dort, wo es um einen
   echten Notfall geht. Nie als Dekoration.
   ============================================================ */

:root {
  /* Bergischer Schiefer — Nacht, Einsatz, Technik */
  --schiefer-900: #0F1216;
  --schiefer-800: #161A1F;
  --schiefer-700: #1F252B;
  --schiefer-600: #2C333B;
  --schiefer-500: #3D4650;

  /* Kalk — Tag, Information, Gemeinschaft */
  --kalk:      #ECEEEA;
  --kalk-tief: #DFE2DC;
  --kalk-rein: #F7F8F5;

  /* Schrift */
  --tinte:  #14181C;
  --kreide: #626C66;
  --nebel:  #9AA49E;

  /* Bergisches Fensterladengrün — Identität, Nachwuchs, Förderung */
  --gruen:        #2C4A3A;
  --gruen-hell:   #4C7A5E;
  /* Grün, das auf Schiefer lesbar bleibt (Kontrast 10,8:1) */
  --gruen-signal: #8FD3A6;
  --gruen-lasur: #E2E8E1;

  /* RAL 3000 Feuerrot — ausschließlich Notfall */
  --ral3000:      #AF2B1E;
  --ral3000-hell: #D9463A;

  --linie-dunkel: rgba(255, 255, 255, 0.13);
  --linie-hell:   rgba(20, 24, 28, 0.14);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --breite: 1180px;
  --rand: clamp(1.25rem, 5vw, 3.5rem);

  --t-mikro: 0.6875rem;
  --t-klein: 0.8125rem;
  --t-basis: 1.0625rem;
  --t-gross: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
  --t-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --t-h2: clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem);
  --t-h1: clamp(2.6rem, 1.3rem + 6vw, 5.75rem);

  --tempo: 0.5s cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--kalk);
  color: var(--tinte);
  font-family: var(--text);
  font-size: var(--t-basis);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: 68ch; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gruen-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

.dunkel :focus-visible { outline-color: var(--gruen-signal); }

/* Screenreader-Text */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--rand); top: -100px;
  z-index: 100; background: var(--kalk-rein); color: var(--tinte);
  padding: 0.7rem 1.1rem; font-family: var(--mono);
  font-size: var(--t-klein); text-decoration: none;
  transition: top 0.2s;
}
.sprungmarke:focus { top: 0.6rem; }

/* ---------- Bausteine ---------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
.band--schmal { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band--dunkel {
  background: var(--schiefer-800);
  color: var(--kalk);
}
.band--tiefdunkel {
  background: var(--schiefer-900);
  color: var(--kalk);
}
.band--rein { background: var(--kalk-rein); }
.band--gruen {
  background: var(--gruen);
  color: var(--kalk-rein);
}

/* Marke: kleine Versalzeile in Mono — die Sprache der Funkkennungen,
   Datumsangaben und technischen Daten der Feuerwehr. */
.marke {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kreide);
  margin: 0 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}
.marke::after {
  content: "";
  flex: 1 1 1.5rem;
  height: 1px;
  background: var(--linie-hell);
}
.dunkel .marke, .band--dunkel .marke, .band--tiefdunkel .marke,
.band--gruen .marke { color: var(--nebel); }
.dunkel .marke::after, .band--dunkel .marke::after,
.band--tiefdunkel .marke::after, .band--gruen .marke::after {
  background: var(--linie-dunkel);
}

.vorspann {
  font-size: var(--t-gross);
  line-height: 1.5;
  color: var(--kreide);
  max-width: 56ch;
}
.band--dunkel .vorspann, .band--tiefdunkel .vorspann { color: var(--nebel); }
.band--gruen .vorspann { color: rgba(247, 248, 245, 0.8); }

/* ---------- Schieferschuppen ----------
   Die Deckung bergischer Häuser: überlappende Schieferschuppen.
   Einziges dekoratives Motiv der Seite; nur an den Kanten der
   dunklen Bänder eingesetzt. */
.schuppen {
  height: 20px;
  background-repeat: repeat-x;
  background-size: 30px 20px;
  background-position: top center;
}
.schuppen--unten {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cpath d='M0 0h30v5c0 8.6-6.7 15-15 15S0 13.6 0 5z' fill='%23161A1F'/%3E%3C/svg%3E");
}
.schuppen--unten-tief {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cpath d='M0 0h30v5c0 8.6-6.7 15-15 15S0 13.6 0 5z' fill='%230F1216'/%3E%3C/svg%3E");
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--schiefer-900);
  color: var(--kalk);
  border-bottom: 1px solid var(--linie-dunkel);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.wortmarke {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.wortmarke svg { width: 34px; height: 40px; display: block; }
.wortmarke__zeilen { display: grid; gap: 0.14rem; }
.wortmarke__ober {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--nebel);
}
.wortmarke__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 82;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1;
}

/* Navigation */
.navi { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }

/* Notruf und Menütaste bleiben immer sichtbar. */
.kopf__aktionen { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.navi__punkt { position: relative; }

.navi__link {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kalk);
  padding: 0.65rem 0.8rem;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.navi__link:hover { border-bottom-color: var(--gruen-hell); }
.navi__link[aria-current="page"],
.navi__punkt--aktiv > .navi__link { border-bottom-color: var(--kalk); }

/* Die Notfall-Schaltfläche: der einzige rote Punkt in der Kopfzeile. */
.navi__notruf {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ral3000);
  padding: 0.62rem 1rem;
  white-space: nowrap;
  transition: background 0.2s;
}
.navi__notruf:hover { background: var(--ral3000-hell); }

/* Aufklappmenü */
.navi__fach {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 250px;
  background: var(--schiefer-800);
  border: 1px solid var(--linie-dunkel);
  border-top: 2px solid var(--gruen-hell);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  display: none;
}
.navi__punkt:hover .navi__fach,
.navi__punkt:focus-within .navi__fach { display: block; }

.navi__fach a {
  display: block;
  padding: 0.5rem 1.1rem;
  font-size: var(--t-klein);
  text-decoration: none;
  color: var(--kalk);
}
.navi__fach a:hover { background: var(--schiefer-600); }
.navi__fach .navi__hinweis {
  display: block;
  padding: 0.2rem 1.1rem 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nebel);
}

.navi__schalter {
  display: none;
  background: none;
  border: 1px solid var(--linie-dunkel);
  color: var(--kalk);
  font-family: var(--mono);
  font-size: var(--t-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

/* ---------- Bühne ---------- */

.buehne {
  position: relative;
  background: var(--schiefer-900);
  color: var(--kalk);
  overflow: hidden;
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  opacity: 0.58;
  filter: saturate(0.78) contrast(1.02);
}
.buehne__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, var(--schiefer-900) 4%, rgba(15,18,22,0.82) 38%, rgba(15,18,22,0.26) 100%),
    linear-gradient(to top, var(--schiefer-900) 1%, transparent 34%);
}
.buehne__inhalt {
  position: relative;
  padding-block: clamp(4rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem);
}

.buehne__ober {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--nebel);
  margin: 0 0 1.6rem;
}
.buehne__ober b { color: var(--kalk); font-weight: 500; }

.buehne h1 {
  font-size: var(--t-h1);
  font-variation-settings: "wdth" 84;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  max-width: 16ch;
  margin-bottom: 1.6rem;
}
.buehne h1 em {
  font-style: normal;
  display: block;
  color: var(--nebel);
  font-variation-settings: "wdth" 84;
}

.buehne__text {
  max-width: 46ch;
  font-size: var(--t-gross);
  line-height: 1.55;
  color: rgba(236, 238, 234, 0.86);
  margin-bottom: 2.4rem;
}

.buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

/* Stärkemeldung: die Aufstellung der Einheit, wie sie im
   Dienstbuch geführt wird — Bezeichnung, Punktlinie, Zahl. */
.staerke {
  border-top: 1px solid var(--linie-dunkel);
  max-width: 640px;
}
.staerke__zeile {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.52rem 0;
  border-bottom: 1px solid var(--linie-dunkel);
  font-family: var(--mono);
  font-size: var(--t-klein);
  letter-spacing: 0.04em;
}
.staerke__was { text-transform: uppercase; color: var(--nebel); }
.staerke__fuellung {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
  transform: translateY(-0.3em);
}
.staerke__zahl {
  font-family: var(--display);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--kalk);
  font-feature-settings: "tnum";
}

/* ---------- Schaltflächen ---------- */

.taste {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.taste--voll {
  background: var(--kalk);
  color: var(--schiefer-900);
}
.taste--voll:hover { background: #fff; }
.taste--rand {
  border-color: rgba(236, 238, 234, 0.4);
  color: var(--kalk);
}
.taste--rand:hover { border-color: var(--kalk); background: rgba(255,255,255,0.07); }
.taste--gruen { background: var(--gruen); color: var(--kalk-rein); }
.taste--gruen:hover { background: var(--gruen-hell); }
.taste--dunkel { background: var(--schiefer-800); color: var(--kalk); }
.taste--dunkel:hover { background: var(--schiefer-600); }
.taste--notruf { background: var(--ral3000); color: #fff; }
.taste--notruf:hover { background: var(--ral3000-hell); }
.taste__pfeil { transition: transform 0.25s; }
.taste:hover .taste__pfeil { transform: translateX(3px); }

/* ---------- Raster ---------- */

.raster { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Zweispaltig, solange jede Spalte mindestens 20rem breit bleibt —
   das richtet sich nach dem vorhandenen Platz, nicht nach einem Gerät. */
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 5rem); }
.raster--breitlinks { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }

@media (max-width: 1000px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
  .raster--text, .raster--breitlinks { grid-template-columns: 1fr; }
}
/* Bleibt bei genau drei Karten eine allein in der zweiten Reihe,
   nimmt sie die ganze Breite ein, statt als Rest dazustehen. */
@media (max-width: 900px) and (min-width: 561px) {
  .raster--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .raster--3, .raster--4 { grid-template-columns: 1fr; }
}

/* ---------- Karten ---------- */

.karte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--kalk-rein);
  border: 1px solid var(--linie-hell);
  padding: 1.6rem 1.5rem 1.5rem;
  transition: transform var(--tempo), border-color var(--tempo);
}
a.karte:hover { transform: translateY(-3px); border-color: var(--gruen); }
.karte h3 { font-size: 1.22rem; margin-bottom: 0.55rem; }
.karte p { font-size: 0.95rem; color: var(--kreide); margin-bottom: 0; }
.karte__mehr {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen);
}
.karte--dunkel {
  background: var(--schiefer-700);
  border-color: var(--linie-dunkel);
  color: var(--kalk);
}
.karte--dunkel p { color: var(--nebel); }
a.karte--dunkel:hover { border-color: var(--gruen-hell); }
.karte--dunkel .karte__mehr { color: var(--gruen-signal); }

/* Notfallkarte — hier ist Rot erlaubt. */
.karte--notfall { border-left: 3px solid var(--ral3000); }
.karte--notfall .karte__mehr { color: var(--ral3000); }
a.karte--notfall:hover { border-color: var(--linie-hell); border-left-color: var(--ral3000); }

/* ---------- Ausrichtungshilfen ---------- */
.zentriert { align-items: center; }
.unten { align-items: end; }

/* ---------- Fahrzeuge ----------
   Ein Stellplatz je Fahrzeug: oben die Kennzeichnung wie am Hallentor,
   darunter das Kürzel und daneben das Fahrzeug — beide stehen auf derselben
   Standlinie. Die Daten liegen unter der Linie.

   Die Fotos sind freigestellt (siehe bilder-freistellen.py) und brauchen
   hellen Grund: auf Schiefer bekämen die Kanten einen Lichtsaum. Deshalb
   stehen die Fahrzeugbänder auf Kalk, das Technikband dazwischen auf
   Schiefer. */

.fahrzeug {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie-hell);
}
.fahrzeug:first-of-type { border-top: 0; padding-top: 0; }

/* Kennzeichnung des Stellplatzes: Aufgabe links, Kennzeichen rechts. */
.fahrzeug__marke {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kreide);
  margin: 0 0 clamp(1.2rem, 3vw, 2.2rem);
  max-width: none;
}

/* Kürzel und Fahrzeug stehen nebeneinander auf der Standlinie. */
.fahrzeug__stand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 2px solid rgba(20, 24, 28, 0.22);
}
.fahrzeug__kennung { padding-bottom: clamp(1rem, 2.5vw, 1.8rem); }
/* Die eigene Breite jedes Fotos steht als --foto am Element. So steht die
   Spalte schon fest, bevor das Bild da ist, und nichts springt beim Laden. */
.fahrzeug__foto {
  margin: 0;
  width: min(100%, var(--foto, 44rem));
}
.fahrzeug__foto img {
  width: 100%;
  /* Ohne Rundung, ohne Kasten: die Räder stehen auf der Standlinie, der
     ausgeblendete Bodenschatten legt sich darüber. */
  margin-bottom: -0.9rem;
}

.fahrzeug__kuerzel {
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.25rem);
  /* In der schmalen Archivo verschwindet sonst das Leerzeichen und aus
     "LF 20" wird "LF20". */
  letter-spacing: -0.018em;
  word-spacing: 0.16em;
  line-height: 0.9;
  margin-bottom: 0.55rem;
}
.fahrzeug__ruf {
  font-family: var(--mono);
  font-size: var(--t-klein);
  letter-spacing: 0.07em;
  color: var(--gruen);
  margin-bottom: 0;
  max-width: none;
}
.fahrzeug__ruf::before { content: "◂ "; color: var(--kreide); }

.fahrzeug__daten {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.fahrzeug__beschreibung p { margin: 0; max-width: 62ch; }

@media (max-width: 900px) {
  .fahrzeug__stand { grid-template-columns: 1fr; align-items: start; }
  .fahrzeug__kennung { padding-bottom: 0; }
  .fahrzeug__foto { justify-self: center; }
}
@media (max-width: 760px) {
  .fahrzeug__daten { grid-template-columns: 1fr; }
}

.daten {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--t-klein);
  margin-top: 0;
}
.daten th, .daten td {
  text-align: left;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linie-hell);
  vertical-align: baseline;
}
.daten th {
  font-weight: 400;
  color: var(--kreide);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--t-mikro);
  width: 44%;
}
.daten td { color: var(--tinte); font-feature-settings: "tnum"; overflow-wrap: anywhere; }

/* Auf schmalen Geräten stehen Bezeichnung und Wert untereinander. */
@media (max-width: 620px) {
  .daten th, .daten td { display: block; width: auto; }
  .daten th { border-bottom: 0; padding: 0.7rem 0 0.1rem; }
  .daten td { padding-top: 0; }
}

.hinweis-ausserdienst {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--kreide);
  border: 1px solid var(--linie-hell);
  padding: 0.22rem 0.55rem;
  margin: 0 0 0.9rem;
}

/* ---------- Ablauf (echte Reihenfolgen) ----------
   Nummerierung nur, wo die Reihenfolge tatsächlich zählt:
   beim Notruf und beim Verhalten im Brandfall. */
.ablauf { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.ablauf > li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 1.4rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--linie-hell);
}
.ablauf > li::before {
  content: counter(schritt);
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  font-size: 2rem;
  line-height: 0.9;
  color: var(--ral3000);
  font-feature-settings: "tnum";
}
.ablauf h3 { font-size: 1.18rem; margin-bottom: 0.4rem; }
.ablauf p { font-size: 0.99rem; color: var(--kreide); }
@media (max-width: 560px) {
  .ablauf > li { grid-template-columns: 2.6rem 1fr; gap: 0 1rem; }
  .ablauf > li::before { font-size: 1.5rem; }
}

/* Die fünf W — die Struktur, nach der die Leitstelle fragt */
.fuenfw { border-top: 1px solid var(--linie-hell); margin: 0; }
.fuenfw__zeile {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 1.6rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie-hell);
  align-items: baseline;
}
.fuenfw__wort {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ral3000);
  margin: 0;
}
.fuenfw dd { margin: 0; font-size: 0.99rem; color: var(--kreide); }
.fuenfw dd b { color: var(--tinte); font-weight: 600; }
@media (max-width: 560px) {
  .fuenfw__zeile { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------- Rufnummern ---------- */
/* Die beiden Tabellen stehen erst nebeneinander, wenn wirklich Platz ist. */
.raster--tabellen { grid-template-columns: 1fr; }
@media (min-width: 860px) { .raster--tabellen { grid-template-columns: repeat(2, 1fr); } }

.nummern { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.nummern caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kreide);
  padding-bottom: 0.8rem;
}
.nummern th, .nummern td {
  text-align: left;
  padding: 0.75rem 0.9rem 0.75rem 0;
  border-bottom: 1px solid var(--linie-hell);
  vertical-align: baseline;
}
.nummern thead th {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--kreide);
}
.nummern td:last-child, .nummern th:last-child { padding-right: 0; }
.nummern .nr {
  font-family: var(--mono);
  font-weight: 500;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.nummern tr.notfall .nr { color: var(--ral3000); font-weight: 600; }
@media (max-width: 420px) {
  .nummern { font-size: 0.92rem; }
  .nummern .nr { white-space: normal; }
}

/* ---------- Notrufblock ---------- */
.notrufblock {
  background: var(--ral3000);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.notrufblock__zahl {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum";
}
.notrufblock h2 { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.notrufblock p { color: rgba(255,255,255,0.88); margin-bottom: 0; }
.notrufblock a { color: #fff; }
@media (max-width: 640px) {
  .notrufblock { grid-template-columns: 1fr; }
}

/* Notrufwahl — der bewusste zweite Schritt. Die Schaltfläche in der
   Kopfzeile führt nur hierher; gewählt wird erst hier, absichtlich.
   Sie steht im roten Block und ist deshalb hell gefüllt: ein roter Knopf
   auf rotem Grund wäre kein Knopf mehr, sondern ein Fortsatz des Blocks. */
.notrufwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: clamp(1.3rem, 2.5vw, 1.9rem);
}
.notrufblock .notrufwahl__hinweis {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}
/* Spezifität mit Absicht: .notrufblock a faerbt sonst alles im Block weiss. */
.notrufblock .taste--wahl {
  background: var(--kalk-rein);
  color: var(--ral3000);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}
.notrufblock .taste--wahl:hover { background: #fff; }

/* ---------- Personen ---------- */
.person {
  border-top: 2px solid var(--tinte);
  padding-top: 1rem;
}
.person__rolle {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kreide);
  margin-bottom: 0.35rem;
}
.person__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.person a {
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--gruen);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 74, 58, 0.35);
  overflow-wrap: anywhere;
}
.person a:hover { border-bottom-color: var(--gruen); }
.person__zeile { display: block; margin-top: 0.25rem; }
.band--dunkel .person, .band--tiefdunkel .person { border-top-color: var(--kalk); }
.band--dunkel .person a, .band--tiefdunkel .person a { color: var(--gruen-signal); border-bottom-color: rgba(143,211,166,0.35); }
.band--gruen .person { border-top-color: var(--kalk-rein); }
.band--gruen .person__rolle { color: rgba(247, 248, 245, 0.72); }
.band--gruen .person a { color: #CBE5D3; border-bottom-color: rgba(203, 229, 211, 0.4); }

/* ---------- Chronik ---------- */
.chronik { border-top: 1px solid var(--linie-hell); }
.chronik__eintrag {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 1.6rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie-hell);
}
.chronik__jahr {
  font-family: var(--display);
  font-variation-settings: "wdth" 82;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  color: var(--gruen);
}
.chronik p { margin: 0; font-size: 0.99rem; color: var(--kreide); }
@media (max-width: 560px) {
  .chronik__eintrag { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Bild mit Bildunterschrift ---------- */
.abbildung { margin: 0; }
.abbildung img { width: 100%; }
.abbildung figcaption {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  color: var(--kreide);
  padding-top: 0.7rem;
  line-height: 1.55;
}
.band--dunkel .abbildung figcaption,
.band--tiefdunkel .abbildung figcaption { color: var(--nebel); }

/* ---------- Zitat / Wahlspruch ---------- */
.wahlspruch {
  font-family: var(--display);
  font-variation-settings: "wdth" 86;
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 20ch;
  margin: 0;
}
.wahlspruch cite {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-top: 1.3rem;
}

/* ---------- Liste mit Häkchen ---------- */
.punkte { list-style: none; padding: 0; margin: 0; }
.punkte li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: 0.7rem;
  font-size: 0.99rem;
}
.punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--gruen);
}
.band--dunkel .punkte li::before,
.band--tiefdunkel .punkte li::before { background: var(--gruen-hell); }
.punkte--warnung li::before { background: var(--ral3000); }

/* ---------- Linkliste ---------- */
.linkliste { list-style: none; padding: 0; margin: 0; }
.linkliste li { border-bottom: 1px solid var(--linie-hell); }
/* Die Zusatzangabe rutscht in eine eigene Zeile, sobald es eng wird —
   das hängt an der tatsächlichen Spaltenbreite, nicht an einem Umbruchpunkt. */
.linkliste a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding: 0.72rem 0;
  text-decoration: none;
  font-size: 0.99rem;
}
.linkliste a:hover { color: var(--gruen); }
.band--dunkel .linkliste li, .band--tiefdunkel .linkliste li,
.band--gruen .linkliste li { border-bottom-color: var(--linie-dunkel); }
.band--dunkel .linkliste span, .band--tiefdunkel .linkliste span,
.band--gruen .linkliste span { color: var(--nebel); }
.band--dunkel .linkliste a:hover, .band--tiefdunkel .linkliste a:hover,
.band--gruen .linkliste a:hover { color: var(--gruen-signal); }
.linkliste span {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kreide);
}

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--schiefer-900);
  color: var(--kalk);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (max-width: 860px) { .fuss__oben { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fuss__oben { grid-template-columns: 1fr; } }

.fuss h2 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.5rem; }
.fuss a { color: var(--kalk); text-decoration: none; font-size: 0.95rem; }
.fuss a:hover { color: var(--gruen-signal); }
.fuss address { font-style: normal; font-size: 0.95rem; color: var(--nebel); line-height: 1.7; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nebel);
}
.fuss__unten nav { display: flex; gap: 1.5rem; }
.fuss__unten a { font-size: var(--t-mikro); color: var(--nebel); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf {
  background: var(--schiefer-900);
  color: var(--kalk);
  padding-block: clamp(2.8rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}
.seitenkopf h1 {
  font-size: var(--t-h2);
  font-variation-settings: "wdth" 84;
  font-weight: 800;
  max-width: 18ch;
  margin-bottom: 1.2rem;
}
.seitenkopf .vorspann { color: rgba(236,238,234,0.8); }

.brotkrumen {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nebel);
  margin: 0 0 1.5rem;
}
.brotkrumen a { color: var(--nebel); text-decoration: none; }
.brotkrumen a:hover { color: var(--kalk); }

/* ---------- Sprungliste auf Unterseiten ---------- */
.sprungliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}
.sprungliste a {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--linie-dunkel);
  color: var(--kalk);
}
.sprungliste a:hover { border-color: var(--kalk); }

/* ---------- Einblenden beim Scrollen ----------
   Versteckt wird nur, wenn JavaScript läuft — sonst stünde die Seite ohne
   Skript leer da. Das `js` setzt ein Einzeiler im Seitenkopf. */
.js .auftritt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.js .auftritt.da { opacity: 1; transform: none; }

/* Bühnenauftritt beim Laden */
.buehne__ober, .buehne h1, .buehne__text, .buehne__aktionen, .staerke {
  animation: heben 0.85s cubic-bezier(0.2, 0.7, 0.25, 1) backwards;
}
.buehne h1 { animation-delay: 0.08s; }
.buehne__text { animation-delay: 0.18s; }
.buehne__aktionen { animation-delay: 0.26s; }
.staerke { animation-delay: 0.34s; }

@keyframes heben {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .auftritt { opacity: 1; transform: none; }
}

/* ---------- Navigation: drei Stufen ----------
   Ab 1280 px steht die Navigation in voller Breite, darunter rückt sie
   zusammen, und unterhalb von 1080 px klappt sie hinter die Menütaste.
   Die Werte sind an der tatsächlich benötigten Breite gemessen. */

@media (min-width: 1080px) and (max-width: 1279px) {
  .kopf__reihe { gap: 1rem; }
  .wortmarke { gap: 0.6rem; }
  .wortmarke svg { width: 30px; height: 35px; }
  .wortmarke__name { font-size: 0.92rem; }
  .wortmarke__ober { font-size: 0.52rem; }
  .navi__link { font-size: 0.75rem; letter-spacing: 0.035em; padding: 0.65rem 0.55rem; }
  .navi__notruf { font-size: 0.75rem; letter-spacing: 0.06em; padding: 0.62rem 0.8rem; }
}

@media (max-width: 1079px) {
  .navi__schalter { display: inline-block; }
  .navi {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--schiefer-900);
    border-bottom: 1px solid var(--linie-dunkel);
    padding: 0.75rem var(--rand) 1.5rem;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .navi.offen { display: flex; }
  .kopf__reihe { position: relative; }
  .navi__link {
    width: 100%;
    text-align: left;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--linie-dunkel);
    font-size: 0.9rem;
  }
  .navi__fach {
    display: block;
    position: static;
    border: 0;
    background: none;
    padding: 0.35rem 0 0.9rem 1rem;
    min-width: 0;
  }
  .navi__fach a { padding: 0.4rem 0; }
  .navi__fach a:hover { background: none; color: var(--gruen-signal); }
  .navi__fach .navi__hinweis { display: none; }
}

.schalter__zeichen { display: none; }

@media (max-width: 560px) {
  .navi__notruf .notruf__wort { display: none; }
  .navi__notruf { padding: 0.62rem 0.8rem; }
  .wortmarke__name { font-size: 0.82rem; }
  .wortmarke__ober { font-size: 0.5rem; letter-spacing: 0.16em; }
  .wortmarke svg { width: 28px; height: 33px; }
  .wortmarke { gap: 0.6rem; }
  .kopf__reihe { gap: 0.7rem; min-height: 64px; }
  .schalter__wort { display: none; }
  .schalter__zeichen { display: inline; font-size: 1.05rem; line-height: 1; }
  .navi__schalter { padding: 0.5rem 0.7rem; }
  .navi { top: 100%; max-height: calc(100vh - 64px); }
}

/* Auf sehr schmalen Geräten bricht der Name um, statt zu schrumpfen. */
@media (max-width: 420px) {
  :root { --rand: 1rem; }
  .wortmarke { gap: 0.55rem; }
  .wortmarke svg { width: 26px; height: 31px; }
  .wortmarke__zeilen { max-width: 9.5rem; }
  .wortmarke__name { font-size: 0.8rem; white-space: normal; line-height: 1.08; }
  .navi__notruf { padding: 0.55rem 0.7rem; }
  .navi__schalter { padding: 0.45rem 0.65rem; }
}

/* ============================================================
   Ergänzungen: wiederkehrende Bausteine
   ============================================================ */

/* Abschnittskopf: Marke, Überschrift, Vorspann */
.kopfblock { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 62ch; }
.kopfblock h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.kopfblock--eng h2 { max-width: 15ch; }
.kopfblock--knapp { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

h2.titel { font-size: var(--t-h2); }
h3.titel { font-size: var(--t-h3); }

.abstand-oben { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.abstand-oben-klein { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.leise { color: var(--kreide); }
.band--dunkel .leise, .band--tiefdunkel .leise { color: rgba(236, 238, 234, 0.72); }
.band--gruen .leise { color: rgba(247, 248, 245, 0.78); }

/* Betriebsabläufe (kein Notfall): Ziffern in Ladengrün statt RAL 3000 */
.ablauf--betrieb > li::before { color: var(--gruen-hell); }
.ablauf--betrieb > li { border-top-color: var(--linie-dunkel); }
.ablauf--betrieb p { color: rgba(236, 238, 234, 0.72); }

/* Stärkemeldung auf hellem Grund */
.staerke--hell { border-top-color: var(--linie-hell); }
.staerke--hell .staerke__zeile { border-bottom-color: var(--linie-hell); }
.staerke--hell .staerke__was { color: var(--kreide); }
.staerke--hell .staerke__fuellung { border-bottom-color: rgba(20, 24, 28, 0.24); }
.staerke--hell .staerke__zahl { color: var(--tinte); }

/* Fahrzeugkarte in der Übersicht */
.fzkarte { padding: 0; overflow: hidden; }
/* Das freigestellte Foto steht auf einem Kalkfeld — dem hellen Grund, den
   die Freistellung braucht — und schließt bündig mit der Karte ab. */
.fzkarte img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center bottom;
  background: var(--kalk-rein);
  padding: 0.9rem 0.9rem 0;
}
.fzkarte__text {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fzkarte .karte__mehr { padding-top: 1.2rem; }
.fzkarte .fahrzeug__kuerzel {
  font-size: 1.9rem;
  font-variation-settings: "wdth" 78;
  display: block;
  margin-bottom: 0.3rem;
}
/* Eine Zeile Platz: "12-LF20KatS-1" bricht sonst um. */
.fzkarte .fahrzeug__ruf {
  display: block;
  font-size: var(--t-mikro);
  margin-bottom: 0.9rem;
}
.fzkarte p { color: var(--nebel); font-size: 0.95rem; }

/* Zweispaltiger Fließtext für längere Erklärungen */
.zweispaltig { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.zweispaltig p { max-width: none; break-inside: avoid; }
@media (max-width: 720px) { .zweispaltig { columns: 1; } }

/* Merksatz-Kasten */
.merksatz {
  border-left: 3px solid var(--gruen);
  padding: 0.15rem 0 0.15rem 1.3rem;
  margin: 1.6rem 0;
  font-size: var(--t-gross);
  line-height: 1.5;
}
.merksatz--warnung { border-left-color: var(--ral3000); }
.merksatz strong { font-weight: 600; }

/* ---------- Formular ---------- */
.formular { max-width: 780px; }
/* Der senkrechte Abstand kommt allein von den Feldern, damit er gleich
   bleibt, ob die Felder neben- oder untereinander stehen. */
.formular .raster { gap: 0 clamp(1rem, 2vw, 1.5rem); }
.feld { display: grid; gap: 0.4rem; margin-bottom: 1.2rem; max-width: none; }
.feld label {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--kreide);
}
.feld input, .feld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--kalk);
  border: 1px solid var(--linie-hell);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--gruen); }
/* Hinweistext unter dem Formular — bewusst kein .feld, sonst würde das
   Grid Text, Link und Satzpunkt in eigene Zeilen legen. */
.formular__hinweis {
  font-size: 0.9rem;
  color: var(--kreide);
  margin-bottom: 1.4rem;
  max-width: 60ch;
}
.formular__hinweis a { color: var(--gruen); }


/* ---------- Feinheiten ---------- */
.klein { font-size: 0.95rem; }
.kleiner { font-size: 0.9rem; }
h3.unterpunkt { font-size: 1.2rem; margin-bottom: 0.6rem; }
h2.unterpunkt { font-size: 1.4rem; margin-bottom: 1rem; }
.merksatz--bitte { border-left-color: var(--gruen-hell); }
.anschrift { font-style: normal; line-height: 1.8; color: var(--kreide); }
.band--dunkel .anschrift, .band--tiefdunkel .anschrift { color: rgba(236, 238, 234, 0.78); }
.staerke__wert { font-family: var(--text); font-size: 0.98rem; color: var(--kalk); }
.staerke--hell .staerke__wert { color: var(--tinte); }
.eng { max-width: 420px; }