/* ============================================================
   falschtank.de

   Hell, freundlich, modern. Blau traegt das Vertrauen, Amber
   traegt die Handlung.

   Warum Amber und nicht Rot fuer den Anrufknopf: Rot heisst
   Schaden, Amber heisst "jetzt handeln". Der Nutzer hat schon
   genug Panik, er braucht eine Richtung. Rot ist genau einem
   Element vorbehalten – dem Fall, in dem der Motor schon lief.

   Alle Klassennamen bleiben. An den Templates aendert sich
   nichts, nur das Aussehen.

   Durchgehend logische Eigenschaften (margin-inline statt
   margin-left), damit Arabisch spaeter allein ueber dir="rtl"
   kippt und kein zweites Stylesheet braucht.
   ============================================================ */

/* ============================================================
   Ersatzschrift mit angeglichenen Maßen

   font-display:swap zeigt zuerst eine Systemschrift und tauscht
   dann zu Manrope. Weil beide unterschiedlich breit und hoch
   sind, verschiebt sich beim Tausch der gesamte Text darunter –
   das war ein grosser Teil der 0,612 beim Layout-Sprung.

   Die Werte unten strecken Arial so, dass sie Manrope in der
   Zeilenhoehe und Laufweite entspricht. Der Tausch findet dann
   ohne Sprung statt.
   ============================================================ */
@font-face{
  font-family:"Manrope Ersatz";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:105%;
  ascent-override:98%;
  descent-override:26%;
  line-gap-override:0%;
}

@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  /* --- Blau: die Markenfarbe der bestehenden Seite ---------
     #00356D ist pixelgenau aus falschgetankt.info uebernommen –
     dort traegt es Kopfleiste, Ueberschriftenbalken und
     Schritt-Karten. Weisse Schrift darauf erreicht 12,1:1,
     die hoechste Kontraststufe.

     Anders als auf der alten Seite ist Navy hier NICHT die
     Handlungsfarbe. Dort war der Anrufknopf blau und ging
     neben blauen Balken und blauen Ueberschriften unter.
     Navy traegt jetzt die Marke, Amber traegt die Handlung. */
  --blau-900:#00234A;   /* Ueberschriften, Fussbereich       */
  --blau-800:#00356D;   /* MARKE – Balken, Flaechen          */
  --blau-600:#0A5AA8;   /* Links, Akzente auf Weiss          */
  --blau-100:#DDEAF8;
  --blau-50:#F1F6FC;

  /* --- Amber: Handlung ------------------------------------- */
  /* Handlungsfarbe. Dunkle Schrift darauf 5,8:1 – weisse waere
     mit 2,2:1 durchgefallen. */
  --amber:#F59E0B;
  --amber-stern:#FB8E28;   /* Sterne, wie auf der bisherigen Seite */
  --amber-tief:#C77C05;
  --amber-100:#FEF3DC;
  --amber-900:#4A2F02;

  /* --- Weitere Rollen -------------------------------------- */
  /* Gruen. Das Markengruen #25D366 erreicht mit weisser Schrift
     nur 2,0:1 und waere bei Sonnenlicht unlesbar – daher dieser
     dunklere Ton mit 5,4:1.

     EINE Abweichung von der urspruenglichen Fassung: Das Badge
     "Nein" hatte mit #12905A und weisser Schrift nur 4,1:1 und
     lag damit unter der Mindestanforderung. Es nutzt jetzt
     denselben Ton wie der WhatsApp-Knopf – optisch kaum
     unterscheidbar, aber lesbar. */
  --whatsapp:#0E7A3C;
  --whatsapp-tief:#0A5F2E;
  --gruen:#0E7A3C;          /* Badge-Flaechen, 5,4:1 mit Weiss   */
  --gruen-dunkel:#0B6B38;   /* Symbole auf heller Toenung        */
  --gruen-text:#FFFFFF;
  --gruen-100:#E2F5EC;
  --alarm:#D93A2B;          /* NUR: Motor lief bereits           */
  --alarm-100:#FDECEA;

  /* --- Flaechen und Text ----------------------------------- */
  --weiss:#FFFFFF;
  --papier:#F7FAFD;
  --kante:#E3E9F0;
  --text:#0F1E30;
  --text-leise:#5A6B7D;

  /* --- Kraftstoffsymbole nach EU-Richtlinie 2014/94 --------- */
  --benzin:#2E9C63;
  --diesel:#2A3947;
  --gas:#B8860B;
  --adblue:#1264C4;

  --schrift:"Manrope","Manrope Ersatz",system-ui,-apple-system,"Segoe UI",sans-serif;

  --bahn:70rem;
  /* Abstand zwischen den Abschnitten. Ueber die Einstellung
     "abstand" umschaltbar – die grosszuegige Fassung riss auf
     dem Desktop sichtbare Loecher zwischen den Bloecken. */
  --luft:clamp(2rem,4.5vw,3.5rem);
  --rund:12px;
  --rund-gross:18px;
  --schatten:0 1px 2px rgba(15,30,48,.04),0 4px 16px rgba(15,30,48,.06);
  --schatten-knopf:0 2px 8px rgba(245,158,11,.28);

  /* Hoehe der festen Anrufleiste – der Seitenfuss braucht
     denselben Wert als Abstand, sonst verdeckt sie die
     letzte Zeile. */
  --leiste:4.75rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--weiss);
  color:var(--text);
  font-family:var(--schrift);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-block-end:var(--leiste);
}

h1,h2,h3{
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--blau-900);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem,5.5vw,3.1rem)}
h2{font-size:clamp(1.45rem,3.4vw,2.1rem)}
h3{font-size:clamp(1.1rem,2vw,1.3rem)}

p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--blau-600)}
strong{font-weight:600}

/* Der Seitenrand waechst mit der Fensterbreite. Bei festen
   1,25rem klebten die Knoepfe im Kopfbereich auf mittelbreiten
   Fenstern fast am Rand – gefuellte Flaechen brauchen mehr Luft
   als Text. */
.ft-bahn{max-inline-size:var(--bahn);margin-inline:auto;
  padding-inline:clamp(1.25rem,3vw,2.5rem)}

.ft-nur-vorlesen{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(a,button,summary):focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}




/* ============================================================
   Kopfbereich der Seite
   ============================================================ */

.ft-hero{
  background:linear-gradient(180deg,var(--blau-50) 0%,var(--weiss) 100%);
  padding-block:clamp(2rem,5vw,3.5rem) var(--luft);
}
.ft-hero-symbole{
  display:inline-flex;
  padding:.7rem 1.1rem;
  background:var(--weiss);
  border:1px solid var(--kante);
  border-radius:999px;
  box-shadow:var(--schatten);
  margin-block-end:1.5rem;
}
.ft-hero-titel{margin-block-end:.6rem}
.ft-hero-intro{
  font-size:clamp(1.05rem,2vw,1.2rem);
  color:var(--text-leise);
  max-inline-size:52ch;
  margin-block-end:2rem;
}
.ft-hero-aktion{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-end:1.5rem}

.ft-hero-fakten{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin:0;padding:0;list-style:none;
}
.ft-hero-fakten li{
  background:var(--weiss);
  border:1.5px solid var(--blau-100);
  border-radius:999px;
  padding:.5rem 1.1rem;
  font-size:.95rem;font-weight:600;
  color:var(--blau-800);
}
/* Der Preis bekommt die ganze Pille, nicht nur den Text darin.
   Vorher zog ein negativer Aussenabstand die amberfarbene
   Flaeche ueber den Rand hinaus – die Pille sah verzogen aus. */
.ft-hero-fakten li:has(strong){
  background:var(--amber-100);border-color:var(--amber);
}
.ft-hero-fakten strong{color:var(--amber-900);font-weight:800}

/* Rueckfalloesung fuer Browser ohne :has() */
.ft-hero-fakten li.ft-preis{background:var(--amber-100);border-color:var(--amber)}

.ft-hero-bild{margin-block-start:2.5rem}
.ft-hero-bild img{
  inline-size:100%;block-size:auto;display:block;
  border-radius:var(--rund-gross);box-shadow:var(--schatten);
}


/* ============================================================
   Knoepfe

   Mindestens 3.25rem hoch. Nicht aus Gefaelligkeit, sondern
   weil die Zielgruppe einhaendig, in schlechtem Licht und
   unter Stress tippt.
   ============================================================ */

.ft-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-block-size:3.4rem;padding-inline:1.75rem;
  border:2px solid transparent;border-radius:var(--rund);
  font-family:inherit;font-size:1.15rem;font-weight:600;
  text-decoration:none;
  transition:background-color .15s,transform .1s,box-shadow .15s;
}
.ft-knopf:active{transform:translateY(1px)}

.ft-knopf-notruf,.ft-knopf-leiste{
  background:var(--amber);color:var(--amber-900);
  font-size:1.4rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  box-shadow:var(--schatten-knopf);
}
.ft-knopf-notruf:hover,.ft-knopf-leiste:hover{background:var(--amber-tief)}

.ft-knopf-whatsapp{background:var(--whatsapp);color:var(--weiss);border-color:transparent}
.ft-knopf-whatsapp:hover{background:var(--whatsapp-tief)}

.ft-knopf-leer{border-color:var(--kante);color:var(--blau-800);background:var(--weiss)}
.ft-knopf-leer:hover{border-color:var(--blau-600)}

.ft-knopf-symbol{inline-size:1.25em;block-size:1.25em;flex:none}
.ft-knopf-text{white-space:nowrap}


/* ============================================================
   Feste Anrufleiste

   Unten, weil dort der Daumen ist. Wer nachts einhaendig am
   Handy steht, erreicht die obere Bildschirmhaelfte nicht ohne
   umzugreifen.
   ============================================================ */

.ft-notrufleiste{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:40;
  display:flex;gap:.6rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-block-start:1px solid var(--kante);
  box-shadow:0 -4px 20px rgba(15,30,48,.08);
}
.ft-notrufleiste .ft-knopf{min-block-size:3.25rem;padding-inline:1rem;font-size:1.25rem}
/* Die Nummer bekommt den Platz, WhatsApp nur so viel wie noetig.
   Vorher hatte WhatsApp feste Breite und "nowrap" – auf 390 px
   lief der Text rechts aus dem Bild ("Per Whats…"). */
/* Beide gleich breit. Der Anruf bleibt durch Farbe und
   Schriftgroesse trotzdem der auffaelligere. */
.ft-notrufleiste .ft-knopf{flex:1 1 0;min-inline-size:0}

/* Unter 26rem (iPhone SE und aehnlich) wird WhatsApp zum reinen
   Symbol. Lieber ein Zeichen ohne Beschriftung als ein
   abgeschnittenes Wort. */
/* Auf sehr schmalen Geraeten nur die Symbole – lieber ein
   Zeichen ohne Beschriftung als ein abgeschnittenes Wort. */
@media (max-width:24rem){
  .ft-notrufleiste .ft-knopf{padding-inline:.7rem;font-size:1.15rem}
  .ft-notrufleiste .ft-knopf-whatsapp .ft-knopf-text{
    position:absolute;inline-size:1px;block-size:1px;
    overflow:hidden;clip-path:inset(50%);
  }
}

/* Am Schreibtisch ist der Daumen kein Argument mehr – dort
   steht die Nummer ohnehin im Kopfbereich. */
@media (min-width:62rem){
  body{padding-block-end:0}
  .ft-notrufleiste{display:none}
}


/* ============================================================
   Die Weiche: Motor gestartet?

   Nach der Telefonnummer das wichtigste Element der Seite.
   ============================================================ */

.ft-weiche{padding-block:var(--luft);background:var(--papier)}
.ft-weiche-frage{text-align:center;margin-block-end:2rem}
.ft-weiche-raster{display:grid;gap:1.25rem}
@media (min-width:46rem){.ft-weiche-raster{grid-template-columns:1fr 1fr;align-items:start}}

.ft-fall{
  background:var(--weiss);
  border:1px solid var(--kante);
  border-radius:var(--rund-gross);
  box-shadow:var(--schatten);
  overflow:hidden;
}
.ft-fall>summary{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 1.4rem;cursor:pointer;list-style:none;
}
.ft-fall>summary::-webkit-details-marker{display:none}
.ft-fall-marke{
  flex:none;min-inline-size:3.6rem;padding:.35rem .8rem;
  border-radius:999px;text-align:center;
  font-size:.95rem;font-weight:800;
}
.ft-fall-titel{font-size:1.2rem;font-weight:800;color:var(--blau-900);line-height:1.25}

.ft-fall-gut{border-color:#B9E3CD}
.ft-fall-gut>summary{background:var(--gruen-100)}
.ft-fall-gut .ft-fall-marke{background:var(--gruen);color:var(--weiss)}

.ft-fall-ernst{border-color:#F6C7C1}
.ft-fall-ernst>summary{background:var(--alarm-100)}
.ft-fall-ernst .ft-fall-marke{background:var(--alarm);color:var(--weiss)}

.ft-fall-text{padding:1.25rem 1.4rem;color:var(--text-leise)}
.ft-fall-text p:last-child{margin-block-end:0}


/* ============================================================
   Vertrauensleiste
   ============================================================ */

.ft-vertrauen{padding-block:2.5rem;background:var(--blau-900)}
.ft-vertrauen-liste{
  display:grid;gap:1.25rem;margin:0;padding:0;list-style:none;
}
@media (min-width:46rem){
  .ft-vertrauen-liste{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
}
.ft-vertrauen-punkt strong{
  display:block;font-size:1.05rem;font-weight:800;color:var(--weiss);
}
.ft-vertrauen-punkt span{color:#9FBBDA;font-size:.95rem}
.ft-vertrauen-efb{
  padding-inline-start:1rem;
  border-inline-start:3px solid var(--amber);
  border-radius:0;
}


/* ============================================================
   Karten: Einsatzberichte und Stimmen
   ============================================================ */

.ft-einsaetze,.ft-gebiet{padding-block:var(--luft)}
.ft-stimmen{padding-block:var(--luft);background:var(--papier)}

.ft-karten{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none}
@media (min-width:46rem){
  .ft-karten{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
}

.ft-karte{
  padding:1.4rem;
  background:var(--weiss);
  border:1px solid var(--kante);
  border-radius:var(--rund-gross);
  box-shadow:var(--schatten);
}
.ft-karte-kopf{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.875rem;color:var(--text-leise);margin-block-end:.6rem;
}
.ft-karte-ort{font-weight:600;color:var(--blau-800)}
.ft-karte h3{margin-block-end:.9rem}
.ft-karte h3 a{color:inherit;text-decoration:none}
.ft-karte h3 a:hover{color:var(--blau-600)}

.ft-karte-daten{margin:0 0 .9rem;font-size:.92rem}
.ft-karte-daten>div{
  display:flex;justify-content:space-between;gap:1rem;padding-block:.4rem;
  border-block-end:1px solid var(--kante);
}
.ft-karte-daten>div:last-child{border-block-end:0}
.ft-karte-daten dt{color:var(--text-leise)}
.ft-karte-daten dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.ft-karte-text{margin:0;font-size:.95rem;color:var(--text-leise)}

.ft-stimme blockquote{margin:0 0 1rem;font-size:1.05rem;color:var(--text)}
.ft-stimme blockquote::before{content:"„"}
.ft-stimme blockquote::after{content:"\201C"}
.ft-stimme footer{
  display:flex;flex-wrap:wrap;gap:.25rem .75rem;
  font-size:.9rem;color:var(--text-leise);
}
.ft-stimme-name{font-weight:600;color:var(--blau-900)}
.ft-stimme-ort,.ft-stimme-auto{font-variant-numeric:tabular-nums}

.ft-stimmen-kopf{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:1rem;margin-block-end:2rem;
}
.ft-stimmen-kopf h2{margin:0}
.ft-bewertung{
  display:flex;align-items:center;gap:.6rem;margin:0;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:999px;padding:.5rem 1.1rem;
  font-size:.92rem;color:var(--text-leise);
}
.ft-bewertung strong{font-size:1.6rem;font-weight:800;color:var(--blau-900);line-height:1}


/* ============================================================
   Einsatzgebiet
   ============================================================ */

.ft-gebiet-karte{margin:0 0 1.5rem}
.ft-gebiet-karte img{
  inline-size:100%;block-size:auto;display:block;
  border-radius:var(--rund-gross);box-shadow:var(--schatten);
}
.ft-gebiet-karte figcaption{margin-block-start:.75rem;font-size:.9rem;color:var(--text-leise)}


/* ============================================================
   Kopfzeile und Navigation
   ============================================================ */

.ft-sprung{
  position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:100;
  padding:.75rem 1.25rem;background:var(--amber);color:var(--amber-900);
  font-weight:600;border-radius:0 0 var(--rund) var(--rund);
}
.ft-sprung:focus{inset-block-start:0}

.ft-kopf{background:var(--weiss);border-block-end:1px solid var(--kante)}

/* Bleibt beim Scrollen oben. Bei einem Notdienst sinnvoll: Die
   Nummer soll erreichbar bleiben, egal wie weit jemand gelesen
   hat. Ueber die Einstellung "header_sticky" abschaltbar. */
.ft-kopf-klebt{position:sticky;inset-block-start:0;z-index:45;
  box-shadow:0 1px 0 var(--kante),0 4px 16px rgba(0,53,109,.05)}

/* padding-block statt reiner Mindesthoehe: So bekommen die
   Knoepfe oben und unten echte Luft, statt in einer knappen
   Zeile zu kleben. */
.ft-kopf-innen{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:1rem;
}

.ft-logo{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  text-decoration:none;margin-inline-end:auto;
}
.ft-logo img{block-size:3.1rem;inline-size:auto;display:block}
.ft-logo-text{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--blau-900)}
/* Der Nachweis direkt unter dem Logo, wie auf der bisherigen
   Seite. Erscheint nur mit hinterlegter Zertifikatsnummer. */
/* Steht unter dem SCHRIFTZUG, nicht unter dem ganzen Logo.
   Das Zeichen links nimmt im Logo rund 3,2rem Breite ein –
   um diesen Betrag wird die Zeile eingerueckt, damit sie
   buendig unter "falschtank.de" beginnt.
   Ohne Bildlogo entfaellt die Einrueckung. */
.ft-logo-efb{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--blau-600);
}
.ft-logo-mitbild .ft-logo-efb{margin-inline-start:3.2rem}
/* Beide Knoepfe gleich breit und gleich hoch. Der Anruf bleibt
   durch die Farbe trotzdem der auffaelligere. */
.ft-kopf-aktion{display:flex;gap:.5rem;align-items:stretch}
/* Feiner als die Knoepfe im Kopfbereich der Seite: Dort sind
   sie die Hauptaufforderung, hier begleiten sie nur. */
.ft-kopf-aktion .ft-knopf{
  min-block-size:2.75rem;padding-inline:1rem;
  font-size:.98rem;border-radius:10px;
  flex:1 1 0;min-inline-size:0;white-space:nowrap;
}
.ft-kopf-aktion .ft-knopf-symbol{inline-size:1.1em;block-size:1.1em}
@media (min-width:62rem){.ft-kopf-aktion .ft-knopf{min-inline-size:11.5rem}}

/* Im Kopf erst ab Tablet. Auf dem Handy uebernimmt die feste
   Leiste unten – zwei Knoepfe fuer dieselbe Sache verwirren. */
.ft-knopf-kopf{
  display:none;background:var(--amber);color:var(--amber-900);
  font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:none;
}
.ft-knopf-kopf:hover{background:var(--amber-tief)}
/* Auf dem Handy uebernimmt die feste Leiste unten – zwei
   Knopfpaare fuer dieselbe Sache verwirren. */
.ft-kopf-aktion{display:none}
@media (min-width:48rem){
  .ft-kopf-aktion{display:flex}
  .ft-knopf-kopf{display:inline-flex}
}

.ft-menuschalter{
  display:inline-flex;align-items:center;gap:.5rem;
  min-block-size:2.9rem;padding-inline:1rem;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);color:var(--blau-900);
  font:inherit;font-weight:600;cursor:pointer;
}
.ft-balken{
  inline-size:1.1rem;block-size:2px;background:currentColor;border-radius:2px;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
}

/* Das JavaScript steuert das Menue ueber das hidden-Attribut
   (menu.hidden = true/false). Vorher stand hier fest
   "display:none" und eine Regel fuer ein data-Attribut, das
   niemand setzt – der Menueschalter tat deshalb nichts.

   Ohne JavaScript bleibt das Menue sichtbar. Ein offenes Menue
   ist besser als ein Schalter, der nicht reagiert. */
.ft-nav{list-style:none;margin:0;padding:0}
.ft-nav[hidden]{display:none!important}

/* Auf schmalen Bildschirmen muss das Menue selbst scrollen
   koennen.
   Grund: Der Kopfbereich klebt am oberen Rand. Ein aufgeklapptes
   Menue waechst dadurch ueber den Bildschirmrand hinaus – und
   weil ein klebendes Element mitwandert statt wegzuscrollen,
   sind die unteren Punkte unerreichbar.
   overscroll-behavior verhindert, dass die Seite dahinter
   mitrutscht, sobald das Menue zu Ende gescrollt ist. */
@media (max-width:61.99rem){
  .ft-nav{
    max-block-size:calc(100dvh - 11rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-block-end:.5rem;
  }
}
.ft-nav a{
  display:block;padding:.9rem 0;font-weight:600;
  color:var(--blau-900);text-decoration:none;
}
.ft-nav a[aria-current="page"]{color:var(--blau-600)}
.ft-nav-pfeil{
  display:inline-block;inline-size:.4rem;block-size:.4rem;margin-inline-start:.4rem;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.6;
}
.ft-untermenu{list-style:none;margin:0;padding-inline-start:1rem}
.ft-untermenu a{font-weight:400;color:var(--text-leise);padding-block:.5rem}



@media (min-width:62rem){
  .ft-menuschalter{display:none}
  .ft-kopf-innen nav{order:3;flex-basis:100%}
  .ft-nav{display:flex;gap:1.75rem;border-block-start:1px solid var(--kante)}
  .ft-nav>li{position:relative}
  .ft-nav>li>a{padding-block:1rem}
  .ft-untermenu{
    position:absolute;inset-block-start:calc(100% - 1px);inset-inline-start:-1rem;z-index:30;
    min-inline-size:15rem;padding:.6rem .75rem;
    background:var(--weiss);border:1px solid var(--kante);
    border-radius:0 0 var(--rund) var(--rund);
    box-shadow:0 8px 24px rgba(0,53,109,.12);
    opacity:0;visibility:hidden;transition:opacity .12s;
  }
  .ft-untermenu a{padding:.55rem .75rem;border-radius:8px}
  .ft-untermenu a:hover{background:var(--blau-50);color:var(--blau-800)}
  .ft-nav-auf:hover .ft-untermenu,.ft-nav-auf:focus-within .ft-untermenu{opacity:1;visibility:visible}
}


/* ============================================================
   Fussbereich
   ============================================================ */

.ft-fuss{
  background:var(--blau-900);color:#9FBBDA;
  padding-block:var(--luft) 2rem;font-size:.95rem;
}
.ft-fuss-raster{display:grid;gap:2rem}
@media (min-width:46rem){
  .ft-fuss-raster{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
}
.ft-fuss h3{
  color:var(--weiss);font-size:.9rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;margin-block-end:1rem;
}
.ft-fuss ul{list-style:none;margin:0 0 1rem;padding:0}
.ft-fuss li{padding-block:.3rem}
.ft-fuss a{color:inherit;text-decoration:none}
.ft-fuss a:hover{color:var(--amber)}

.ft-fuss-marke{font-size:1.35rem;font-weight:800;color:var(--weiss);margin-block-end:1rem}
.ft-fuss-marke img{block-size:2.4rem;inline-size:auto}
.ft-fuss-kontakt a{font-size:1.25rem;font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums}
.ft-fuss-gebiet{font-size:.85rem;line-height:1.6}
.ft-fuss-nachweis p{line-height:1.8}

.ft-fuss-schluss{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-block-start:2.5rem;padding-block-start:1.5rem;
  border-block-start:1px solid rgba(255,255,255,.15);
  font-size:.875rem;
}
.ft-fuss-schluss ul{display:flex;gap:1.5rem;margin:0}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   Standard-Blöcke aus dem Basissystem

   Textabschnitt, Fragen und Antworten, Häkchenliste,
   Aktionsbanner und die uebrigen 20 Blocktypen tragen noch die
   Klassennamen des urspruenglichen Systems. Sie hier
   mitzugestalten ist deutlich weniger Aufwand, als 20
   Templates umzuschreiben – und sie bleiben damit updatefaehig.
   ============================================================ */

.bahn{max-inline-size:var(--bahn);margin-inline:auto;padding-inline:1.25rem}
.visuell-versteckt{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}

[class^="abschnitt-"],[class*=" abschnitt-"]{padding-block:var(--luft)}
.abschnitt-faq,.abschnitt-vorteile{background:var(--papier)}

/* Zwei Abschnitte ohne eigene Flaeche stossen mit ihren
   Innenabstaenden aneinander – aus einmal --luft werden zweimal.
   Bei 80px eingestellt sind das 160px Luecke statt 80.

   Deshalb: Folgt ein Abschnitt direkt auf den Kopfbereich oder
   auf einen anderen weissen Abschnitt, entfaellt sein oberer
   Innenabstand. Abschnitte MIT eigener Flaeche behalten ihn –
   dort trennt die Farbe ohnehin. */
.ft-hero + [class^="abschnitt-"],
.ft-hero + .ft-szenarien,
[class^="abschnitt-"] + [class^="abschnitt-"]{padding-block-start:0}

.abschnitt-faq,.abschnitt-vorteile,.abschnitt-aktion,
.abschnitt-formular,.abschnitt-formseite{padding-block-start:var(--luft)!important}

.etikett{
  display:inline-block;margin-block-end:.75rem;
  background:var(--blau-100);color:var(--blau-800);
  font-size:.85rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:.35rem 1rem;border-radius:999px;
}

.inhalt{max-inline-size:70ch}
.inhalt-schmal{max-inline-size:58ch}
.inhalt-breit{max-inline-size:none}
.abschnitt-text.mitte .inhalt{margin-inline:auto;text-align:center}
.inhalt h2,.inhalt h3{margin-block-start:1.75rem}
.inhalt h2:first-child,.inhalt h3:first-child{margin-block-start:0}
.inhalt ul,.inhalt ol{padding-inline-start:1.4rem}
.inhalt li{margin-block-end:.5rem}
.vorspann{font-size:1.15rem;color:var(--text-leise)}

/* Fragen und Antworten */
.faq{display:grid;gap:.85rem;margin-block-start:2rem}
.faq details{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);box-shadow:var(--schatten);overflow:hidden;
}
.faq summary{
  padding:1.1rem 1.3rem;cursor:pointer;list-style:none;
  font-weight:600;color:var(--blau-900);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-size:1.4rem;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq-text{padding:0 1.3rem 1.3rem;color:var(--text-leise)}
.faq-text p:last-child{margin-block-end:0}

/* Häkchenliste und Vorteile */
.hakenliste,.zusicherung{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem}
.hakenliste.zwei{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.hakenliste li,.zusicherung li{
  display:flex;gap:.85rem;align-items:center;
  font-size:1.05rem;font-weight:600;color:var(--blau-900);
}
.hakenliste svg,.zusicherung svg{
  flex:none;inline-size:1.5rem;block-size:1.5rem;padding:.28rem;
  background:var(--gruen-100);border-radius:50%;
  color:var(--gruen-dunkel);stroke-width:3;
}

.vorteile{display:grid;gap:1.25rem;list-style:none;margin:2rem 0 0;padding:0}
/* Hoechstens drei Spalten. Bei vier blieben je Karte rund 200 px
   fuer den Text – die Woerter brachen nach jedem zweiten um. */
@media (min-width:46rem){.vorteile{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.vorteile{grid-template-columns:repeat(3,1fr)}}
.vorteil{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);padding:1.4rem;
  /* Flex statt Raster mit fester erster Spalte.
     Grund: Fehlt das Symbol – etwa weil ein Icon-Name nicht
     aufloest – rutschte die Ueberschrift vorher in die 2,75rem
     schmale Symbolspalte und ueberlappte den Text.
     Mit Flex nimmt die Ueberschrift dann einfach die volle
     Breite. Das Layout darf an einem fehlenden Symbol nicht
     zerbrechen. */
  display:flex;flex-wrap:wrap;gap:0 1rem;align-items:center;
}
/* Symbol links neben dem Text, nicht darueber.
   Vorher fuellte jedes Symbol auf dem Handy den halben
   Bildschirm – der Leistungsueberblick frass damit ein Drittel
   der Seitenlaenge fuer den unwichtigsten Abschnitt. */
.vorteil-symbol{
  flex:none;
  inline-size:2.75rem;block-size:2.75rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--blau-50);border-radius:10px;
  color:var(--blau-600);
}
.vorteil-symbol svg{
  inline-size:1.5rem;block-size:1.5rem;flex:none;
  /* Ohne feste Verhaeltniswahrung zieht das Flexbox-Layout die
     Zeichnung in die Breite – die Lieferwagen waren verzerrt. */
  aspect-ratio:1;
}
.vorteil h3{flex:1;min-inline-size:0;margin:0;font-size:1.05rem}
.vorteil p{flex-basis:100%;margin:.6rem 0 0;color:var(--text-leise);font-size:.93rem}

/* Nummerierte Schritte */
.schritte{display:grid;gap:1.25rem;counter-reset:s;list-style:none;margin:2rem 0 0;padding:0}
@media (min-width:46rem){.schritte{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.schritt{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);padding:1.4rem;
  counter-increment:s;
}
.schritt::before{
  content:counter(s);display:flex;align-items:center;justify-content:center;
  inline-size:2.4rem;block-size:2.4rem;border-radius:50%;
  background:var(--amber-100);color:var(--amber-900);
  font-weight:800;margin-block-end:.85rem;
}
.schritt h3{margin-block-end:.4rem}
.schritt p{margin:0;color:var(--text-leise);font-size:.95rem}

/* Aktionsbanner, Knöpfe der Standardblöcke */
.abschnitt-aktion{background:var(--blau-900);color:var(--weiss)}
.abschnitt-aktion h2{color:var(--weiss)}
.abschnitt-aktion p{color:#9FBBDA}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.5rem}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-block-size:3.25rem;padding-inline:1.6rem;
  border:2px solid transparent;border-radius:var(--rund);
  font-weight:600;font-size:1.05rem;text-decoration:none;
  transition:background-color .15s;
}
.knopf-zest{background:var(--amber);color:var(--amber-900)}
.knopf-zest:hover{background:var(--amber-tief)}
.knopf-leer{border-color:currentColor;color:inherit}

/* Bilder, Galerie, Video */
.bildblock img,.videoblock iframe,.beitragsbild img{
  inline-size:100%;block-size:auto;display:block;
  border-radius:var(--rund-gross);box-shadow:var(--schatten);
}
.abschnitt-galerie .bahn>div{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}

/* Zweispalter */
.abschnitt-zwei .bahn{display:grid;gap:2rem}
@media (min-width:52rem){.abschnitt-zwei .bahn{grid-template-columns:1fr 1fr;align-items:center}}

/* Beitragsliste */
.beitragskarte{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);overflow:hidden;
}
.beitragstext{padding:1.3rem}
.weiterlesen{color:var(--blau-600);font-weight:600;text-decoration:none}

/* Liefergebiete */
.gebiete{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.gebiet{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:999px;padding:.4rem 1rem;font-size:.95rem;
}
.gebiethinweis{color:var(--text-leise);font-size:.9rem;margin-block-start:1rem}

/* Technische Daten */
.datenblatt{inline-size:100%;border-collapse:collapse;margin-block-start:1.5rem}
.datenblatt td,.datenblatt th{padding:.75rem 0;border-block-end:1px solid var(--kante);text-align:start}
.datenblatt th{color:var(--text-leise);font-weight:400}

/* Downloads */
.download{
  display:flex;gap:1rem;align-items:center;padding:1rem;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);margin-block-end:.75rem;text-decoration:none;
}
.download-titel{font-weight:600;color:var(--blau-900)}
.download-text{color:var(--text-leise);font-size:.9rem}

/* Formulare */
.abschnitt-formular,.abschnitt-formseite{background:var(--papier)}
.formseite{display:grid;gap:2rem}
@media (min-width:52rem){.formseite{grid-template-columns:1fr 1fr}}
.direktkontakt{
  background:var(--blau-900);color:var(--weiss);
  border-radius:var(--rund-gross);padding:1.5rem;
}
.dk-frage{color:#9FBBDA;font-size:.95rem;margin-block-end:.4rem}
.dk-nummer{font-size:1.6rem;font-weight:800;color:var(--amber);
  font-variant-numeric:tabular-nums;text-decoration:none;display:block}
.dk-zusatz{color:#9FBBDA;font-size:.9rem;margin-block-start:.5rem}
.hinttext{color:var(--text-leise);font-size:.9rem}

/* Suche */
.suchfeld{inline-size:100%;padding:.9rem 1.1rem;font:inherit;
  border:1px solid var(--kante);border-radius:var(--rund);background:var(--weiss)}
.suchergebnisse{list-style:none;margin:1rem 0 0;padding:0}
.suchhinweis{color:var(--text-leise);font-size:.9rem}

/* Fehlerseite */
.fehlerseite{padding-block:var(--luft);text-align:center}
.fehlerzahl{font-size:4rem;font-weight:800;color:var(--amber);margin:0}

/* ---- Formulare ---------------------------------------------
   honigtopf ist ein Fangfeld gegen Spam-Roboter. Es MUSS
   unsichtbar bleiben: Sieht ein Mensch es, fuellt er es aus –
   und seine Anfrage wird als Spam verworfen. */
.honigtopf{position:absolute!important;inline-size:1px;block-size:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.formular{background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);padding:1.5rem}
.formgitter{display:grid;gap:1rem}
@media (min-width:40rem){.formgitter{grid-template-columns:1fr 1fr}}
.formgitter .voll,.formgitter>.voll{grid-column:1/-1}
.formular label{display:block;font-weight:600;font-size:.95rem;margin-block-end:.35rem}
.formular input,.formular textarea,.formular select{
  inline-size:100%;padding:.8rem 1rem;font:inherit;color:var(--text);
  background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);
}
.formular input:focus,.formular textarea:focus,.formular select:focus{
  outline:none;border-color:var(--blau-600);box-shadow:0 0 0 3px var(--blau-100)}
.formular textarea{min-block-size:7rem;resize:vertical}
.formular button{
  min-block-size:3.25rem;padding-inline:1.75rem;border:0;border-radius:var(--rund);
  background:var(--amber);color:var(--amber-900);
  font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;
}
.formular button:hover{background:var(--amber-tief)}
.pflicht{color:var(--alarm)}
.formhinweis,.hinttext{color:var(--text-leise);font-size:.9rem}
.formfehler{background:var(--alarm-100);color:#8A1F14;
  border-radius:var(--rund);padding:.9rem 1.1rem;margin-block-end:1rem}
.dankmeldung{background:var(--gruen-100);color:#0A5F3B;
  border-radius:var(--rund);padding:1.1rem 1.3rem}
.formcheck,.datenschutzcheck{display:flex;gap:.7rem;align-items:flex-start}
.formcheck input,.datenschutzcheck input{inline-size:auto;margin-block-start:.35rem}
.formseite-form,.formseite-text{min-inline-size:0}

/* ---- Meldungsleiste ---------------------------------------- */
.meldung-inner{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  justify-content:center;padding:.7rem 1rem;background:var(--amber-100);color:var(--amber-900)}
.meldung-text{font-size:.95rem}
.meldung-link{color:inherit;font-weight:600}
.meldung-zu{background:none;border:0;color:inherit;font-size:1.2rem;cursor:pointer;line-height:1}

/* ---- Cookie-Hinweis ---------------------------------------- */
.cookiebox{position:fixed;inset-block-end:calc(var(--leiste) + .5rem);
  inset-inline:1rem;z-index:50;max-inline-size:32rem;margin-inline:auto}
@media (min-width:62rem){.cookiebox{inset-block-end:1rem}}
.cookiebox-inner{background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:0 8px 30px rgba(15,30,48,.16);padding:1.25rem}
.cookiebox-text{font-size:.92rem;color:var(--text-leise);margin-block-end:1rem}
.cookiebox-knoepfe{display:flex;gap:.6rem;flex-wrap:wrap}
.cookieknopf{flex:1;min-block-size:2.9rem;padding-inline:1.1rem;
  border:1px solid var(--kante);border-radius:var(--rund);background:var(--weiss);
  font:inherit;font-weight:600;cursor:pointer}
.cookieknopf-ja{background:var(--amber);color:var(--amber-900);border-color:transparent}

/* ---- Restliche Altklassen ---------------------------------- */
.hero{background:linear-gradient(180deg,var(--blau-50),var(--weiss));padding-block:var(--luft)}
.hero-latten{display:none}
.rahmen{border:1px solid var(--kante);border-radius:var(--rund-gross);padding:1.4rem;background:var(--weiss)}
.zeile{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.zwei-text{min-inline-size:0}
.groesse,.kennung{color:var(--text-leise);font-size:.9rem}
.download-bild img{inline-size:3.5rem;block-size:auto;border-radius:6px}

/* ---- Szenario-Karten ---------------------------------------
   Ersetzt die drei Bildkarten der alten Seite. Zieht die
   Szenarien automatisch aus der Datenbank – wer ein Szenario
   ergaenzt, bekommt die Karte ohne Zutun.

   Ohne Foto erscheint das Kraftstoff-Symbolpaar. Die Karte
   funktioniert also sofort und wird besser, sobald Bilder da
   sind. */
.ft-szenarien{padding-block:var(--luft)}
.ft-szenarien-raster{display:grid;gap:1.25rem;margin:2rem 0 0;padding:0;list-style:none}
@media (min-width:40rem){.ft-szenarien-raster{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}

.ft-szenario{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .15s,transform .1s;
}
.ft-szenario:hover{box-shadow:0 6px 24px rgba(0,53,109,.14);transform:translateY(-2px)}
/* Feste Hoehe war ein Fehler: Bei 347 px Kartenbreite ergab
   9rem einen Zuschnitt von 2,4:1, auf dem Handy sogar 3,1:1.
   Ein 16:9-Foto waere stark beschnitten worden – und auf jedem
   Geraet anders.

   Mit aspect-ratio ist der Zuschnitt ueberall gleich: 16:10.
   Damit gibt es genau EIN Seitenverhaeltnis, in dem Fotos
   angelegt werden muessen. */
.ft-szenario img{aspect-ratio:16/10;inline-size:100%;display:block;block-size:auto;object-fit:cover}
.ft-szenario-text{padding:1.1rem 1.25rem 1.35rem;flex:1;display:flex;flex-direction:column}
.ft-szenario-text h3{margin-block-end:.4rem;font-size:1.1rem}
.ft-szenario-text h3 a{color:var(--blau-900);text-decoration:none}
.ft-szenario:hover h3 a{color:var(--blau-600)}
.ft-szenario-text p{margin:0 0 .9rem;font-size:.93rem;color:var(--text-leise)}
.ft-szenario-mehr{
  margin-block-start:auto;font-weight:600;font-size:.93rem;
  color:var(--blau-600);text-decoration:none;
}
.ft-dringend-kritisch{border-color:#F6C7C1}
.ft-dringend-kritisch 
/* Sterne in der Bewertung: die Sternenfarbe der alten Seite */
.ft-bewertung strong{color:var(--blau-900)}
.ft-bewertung::before{content:"★★★★★";color:var(--amber-stern);letter-spacing:-.05em;font-size:1.05rem}

/* ============================================================
   Suche im Kopfbereich

   Ein Lupensymbol, das ein Feld aufklappt. Ich hatte diesen
   Teil beim Neuschreiben der Navigation entfernt – das
   JavaScript und der Blocktyp waren die ganze Zeit da, nur die
   Bedienung fehlte.
   ============================================================ */

.ft-suchsymbol{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.9rem;block-size:2.9rem;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);color:var(--blau-800);cursor:pointer;
  flex:none;
}
.ft-suchsymbol svg{inline-size:1.25rem;block-size:1.25rem}
.ft-suchsymbol:hover{border-color:var(--blau-600);color:var(--blau-600)}
.ft-suchsymbol.offen{background:var(--blau-800);border-color:var(--blau-800);color:var(--weiss)}

.kopfsuche{
  background:var(--blau-50);
  border-block-start:1px solid var(--kante);
  padding-block:1.25rem;
}
.kopfsuche[hidden]{display:none}
.kopfsuche input[type="search"]{
  inline-size:100%;padding:.9rem 1.1rem;font:inherit;font-size:1.05rem;
  background:var(--weiss);border:2px solid var(--kante);border-radius:var(--rund);
}
.kopfsuche input[type="search"]:focus{
  outline:none;border-color:var(--blau-600);box-shadow:0 0 0 3px var(--blau-100);
}
.suchergebnisse{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.suchergebnisse li a{
  display:block;padding:.85rem 1.1rem;text-decoration:none;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);color:var(--blau-900);font-weight:600;
}
.suchergebnisse li a:hover{border-color:var(--blau-600);color:var(--blau-600)}
.suchergebnisse small{display:block;font-weight:400;color:var(--text-leise);font-size:.88rem}
.suchhinweis{margin:.75rem 0 0;color:var(--text-leise);font-size:.92rem}

/* ============================================================
   Einsatzgebiet einer Stadt

   Der Block, der eine Stadtseite unverwechselbar macht.
   Autobahnen als Plaketten, weil sie so auch auf Schildern
   aussehen – und weil man sie dadurch beim Ueberfliegen
   erkennt.
   ============================================================ */

.ft-gebiet-stadt{padding-block:var(--luft);background:var(--papier)}
.ft-gebiet-stadt h3{font-size:.95rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-leise);margin-block-end:.75rem}

.ft-gebiet-raster{display:grid;gap:1.25rem;margin-block-start:1.5rem}
@media (min-width:46rem){
  .ft-gebiet-raster{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
}
.ft-gebiet-feld{
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);padding:1.25rem;
}
.ft-gebiet-zahl{
  font-size:1.5rem;font-weight:800;color:var(--blau-900);
  margin:0;font-variant-numeric:tabular-nums;
}
.ft-gebiet-klein{margin:.4rem 0 0;font-size:.85rem;color:var(--text-leise)}

/* Autobahnnummern in der Anmutung von Verkehrsschildern:
   blaue Flaeche, weisse Schrift, leicht gerundet. */
.ft-autobahnen{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.ft-autobahnen li{
  background:var(--blau-800);color:var(--weiss);
  font-weight:800;font-size:.95rem;
  padding:.3rem .7rem;border-radius:5px;
  font-variant-numeric:tabular-nums;
}

.ft-gebiet-knoten{
  margin-block-start:1.5rem;padding:1.25rem;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund-gross);box-shadow:var(--schatten);
}
.ft-gebiet-knoten p{margin:0;color:var(--text-leise)}

.ft-gebiet-nachbarn{margin-block-start:1.5rem}
.ft-gebiet-nachbarn .gebiet{padding:0}
.ft-gebiet-nachbarn .gebiet a{
  display:block;padding:.45rem 1.1rem;
  color:var(--blau-600);text-decoration:none;font-weight:600;
}
.ft-gebiet-nachbarn .gebiet:hover{border-color:var(--blau-600)}

/* ============================================================
   Kennzahlen der Einsatzberichte

   Blendet sich unterhalb einer Mindestzahl selbst aus –
   "3 Einsätze" waere keine Referenz, sondern ein Eingestaendnis.
   ============================================================ */

.ft-zahlen{padding-block:calc(var(--luft) * .6);background:var(--blau-900)}
.ft-zahlen-liste{
  display:grid;gap:1.5rem;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.ft-zahl{
  display:block;font-size:2.4rem;font-weight:800;line-height:1;
  color:var(--amber);font-variant-numeric:tabular-nums;
}
.ft-zahl-wort{
  display:block;font-size:1.15rem;font-weight:800;line-height:1.25;
  color:var(--amber);
}
.ft-zahl-text{display:block;margin-block-start:.5rem;font-size:.92rem;color:#9FBBDA}

/* ============================================================
   Monatsbilanz

   Entsteht aus den erfassten Einsaetzen. Der Wettbewerb tippt
   dasselbe von Hand ab und bettet die Detailtabelle als
   Google-Tabelle ein – die zaehlt fuer sein Ranking aber nicht,
   weil der Inhalt in einem fremden Rahmen liegt.
   ============================================================ */

.ft-bilanz{padding-block:var(--luft)}
.ft-bilanz-teil{margin-block-start:2.5rem}
.ft-bilanz-teil h3{
  font-size:.95rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-leise);margin-block-end:1rem;
}

.ft-bilanz-zahlen{
  display:grid;gap:1.25rem;list-style:none;margin:2rem 0 0;padding:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  background:var(--blau-900);border-radius:var(--rund-gross);
}
.ft-bilanz-zahlen .ft-zahl{color:var(--amber)}
.ft-bilanz-zahlen .ft-zahl-text{color:#9FBBDA}

/* Verteilung als liegende Balken – auf einen Blick erfassbar,
   ohne dass man Zahlen vergleichen muss. */
.ft-verteilung{margin:0;display:grid;gap:.6rem}
.ft-verteilung>div{display:grid;grid-template-columns:14rem 1fr;gap:1rem;align-items:center}
@media (max-width:46rem){.ft-verteilung>div{grid-template-columns:1fr;gap:.2rem}}
.ft-verteilung dt{font-weight:600;color:var(--blau-900);font-size:.95rem}
.ft-verteilung dd{margin:0;display:flex;align-items:center;gap:.6rem}
.ft-balken{
  display:block;block-size:1.1rem;border-radius:4px;
  background:var(--blau-600);min-inline-size:.5rem;
}
.ft-balken-zahl{font-weight:800;color:var(--blau-900);font-variant-numeric:tabular-nums}

.ft-karte-fall{
  margin:0 0 .6rem;font-size:.88rem;font-weight:600;
  color:var(--blau-600);
}
.ft-karte h4{margin:0 0 .3rem;font-size:1.05rem;color:var(--blau-900)}

/* ---- Archiv der Monatsseiten ------------------------------- */
.ft-archiv{padding-block:var(--luft);background:var(--papier)}
.ft-archiv-jahr + .ft-archiv-jahr{margin-block-start:1.5rem}
.ft-archiv-jahr h3{
  font-size:.9rem;font-weight:800;letter-spacing:.06em;
  color:var(--text-leise);margin-block-end:.75rem;
}
.ft-archiv .gebiet{padding:0}
.ft-archiv .gebiet a{
  display:block;padding:.45rem 1.1rem;
  color:var(--blau-600);text-decoration:none;font-weight:600;
}
.ft-archiv .gebiet:hover{border-color:var(--blau-600)}

/* Foto eines Einsatzes auf der Karte */
.ft-karte-bild{
  inline-size:calc(100% + 2.8rem);margin:-1.4rem -1.4rem 1rem;
  aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:var(--rund-gross) var(--rund-gross) 0 0;
}
.ft-zahl-text small{display:block;opacity:.7;font-size:.85em;margin-block-start:.15rem}

/* Vor und zurück zwischen den Monatsseiten */
.ft-monatsnav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;
  margin-block-start:2.5rem;padding-block-start:1.5rem;
  border-block-start:1px solid var(--kante);
}
.ft-monatsnav a{color:var(--blau-600);text-decoration:none;font-weight:600;font-size:.95rem}
.ft-monatsnav a:hover{text-decoration:underline}
.ft-monatsnav>*:last-child{text-align:end}
.ft-monatsnav>*:nth-child(2){text-align:center;color:var(--text-leise)}
@media (max-width:34rem){
  .ft-monatsnav{grid-template-columns:1fr;text-align:center;gap:.6rem}
  .ft-monatsnav>*:last-child{text-align:center}
}

/* ---- Besondere Einsätze ------------------------------------ */
.abschnitt-highlights{padding-block:var(--luft)}
.ft-karte-fakten{
  margin:.9rem 0 0;padding-block-start:.8rem;
  border-block-start:1px solid var(--kante);
  font-size:.85rem;color:var(--text-leise);
  font-variant-numeric:tabular-nums;
}
.ft-karte-ort a{color:inherit;text-decoration:none}
.ft-karte-ort a:hover{text-decoration:underline}
.ft-karte-fall a{color:var(--blau-600);text-decoration:none}
.ft-karte-fall a:hover{text-decoration:underline}

/* ---- Kundenstimmen: Sterne und Quelle ---------------------- */
.ft-sterne{margin:0 0 .7rem;font-size:1.05rem;color:var(--amber-700,#B45309);letter-spacing:.08em}
.ft-stimme-quelle{color:var(--text-leise);font-size:.85rem}
.ft-stimme-quelle a{color:var(--blau-600);text-decoration:none}
.ft-stimme-quelle a:hover{text-decoration:underline}

/* ============================================================
   Kennzahlen aus dem laufenden Betrieb

   Der Streifen unter den Knöpfen. Bewusst zurückhaltend: Er
   soll belegen, nicht schreien. Die Zahlen tun die Arbeit.
   ============================================================ */

/* Der aeussere Rahmen bleibt unsichtbar und traegt nur die
   Bahn – sonst saesse der Streifen am Bildschirmrand statt in
   der Textspalte. Die Pille sitzt auf der Zeile INNEN. */
.ft-betrieb{margin-block-start:1rem}

.ft-betrieb-zeile{
  margin:0;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  font-size:.92rem;color:var(--text-leise);
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:999px;padding:.55rem 1.1rem;
  box-shadow:var(--schatten);
}
.ft-betrieb-symbol{display:inline-flex;flex:none;color:var(--amber-900)}
.ft-betrieb-symbol svg{inline-size:1rem;block-size:1rem}
.ft-betrieb-teil strong{color:var(--blau-900);font-variant-numeric:tabular-nums}
.ft-betrieb-punkt{opacity:.45}

@media (max-width:34rem){
  .ft-betrieb-zeile{
    display:flex;border-radius:var(--rund-gross);
    font-size:.87rem;padding:.7rem .9rem;
  }
}