/* ==========================================================================
   odenwald-schaedlingsbekaempfer.de
   Design: "Fachwerk" — der Odenwald ist Fachwerkland; Michelstadts Rathaus
   von 1484 steht im Einzugsgebiet und ist das bekannteste Fachwerkhaus der
   Region. Leitbild ist deshalb das offen gezeigte Traggerueste: dunkle
   Balken, helle Gefache, das Kopfband als wiederkehrende Marke.

   Bewusst NICHT die Gesten der Schwesterseiten:
     Taunus       Hoehenlinien und Messstreifen (Kartenpapier)
     Wetterau     waagerechte Schichten und eine Horizontlinie
     Mittelrhein  eine gerade Linie mit Kilometermarken
     Bergstrasse  Rundbogen und Kaempferlinie
   Deshalb hier: senkrechte Staender statt waagerechter Lagen, ein
   L-Kopfband mit Strebe statt Balken/Nummer/Hoehenlinie, Gefache mit
   zweiseitigem Balken statt Passepartout mit Nadel.

   Bewusst NICHT die Palette der Nachbarseite kammerjaeger-bergstrasse.de:
   die fuehrt Sandsteinrot #A8442A mit Waldgruen und Sand. Zehn der 22
   Gemeinden hier liegen im Kreis Bergstrasse — waeren beide Seiten
   sandsteinrot, saehen sie im Ueberlappungsgebiet wie Klone aus. Deshalb
   Eichenbalken-Schwarz mit Flechtengruen.

   Typografie: die einzige Serif-gefuehrte Seite der Familie (alle vier
   Schwestern sind Sans + Mono). Georgia wird hier NICHT literarisch
   gesetzt, sondern gross, schwer und eng — steinmetzhaft, nicht
   feuilletonistisch. Das ist die bewusste Abgrenzung gegen den
   Creme-plus-Serif-Look, dem eine warme Serifenseite sonst zufaellt: der
   Grund ist gruenstichiger Kalkputz, kein Creme, und der Akzent ist
   Flechtengruen, kein Terrakotta.

   Alle Schriften aus dem System-Stack — kein Font-Download. Die
   Datenschutzerklaerung verspricht "keine Schriftarten von fremden
   Servern"; ein Google-Fonts-Link wuerde sie zur Falschaussage machen.

   Kontraste: alle 20 Paare der Palette sind gegen WCAG AA geprueft
   (scripts/gate.py kontrast). Niedrigster Wert 4.76 (Balkentext auf
   Flechte), Grossschrift-Ausnahmen bei 3:1 sind als solche markiert.

   EIN Stylesheet, kein @import, kein Framework.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
  /* Balken: warmes Fast-Schwarz wie geraeucherte Eiche. Traegt die Marke. */
  --brand:      #2A2521;
  --brand-900:  #17130F;   /* Balkenfuss: tiefste Zone, Baender */
  --nacht:      #1E1A16;   /* Hero-Buehne */
  --brand-800:  #332C26;
  --brand-600:  #5A5147;
  --brand-300:  #B6AB9C;   /* 8.2:1 auf brand-900 */
  --brand-200:  #D3CBBF;   /* 10.8:1 auf nacht */
  --brand-100:  #EAE5DC;

  /* Flechte auf Eiche. Gelbgruen, nicht das Blaugruen der Taunus-Seite. */
  --akzent:     #7E9B22;
  --akzent-700: #4F6212;   /* 5.9:1 auf Kalkputz — fuer Text */
  --akzent-300: #B4CC5E;   /* 9.7:1 auf nacht — fuer Text auf Balken */

  --ink:        #221E1A;
  --ink-600:    #4E463D;
  --ink-400:    #6A6157;   /* 5.3:1 auf Kalkputz */

  /* Kalkputz: gruenstichiges Off-White. Bewusst kein Creme (#F7F4EC ist
     der Grund der Taunus-Seite und zugleich der Allerweltston warmer
     Serifenlayouts). */
  --paper:      #EEF0EB;
  --paper-200:  #E3E5DE;
  --line:       #D5D6CB;
  --white:      #FFFFFF;
  --red:        #B4232A;
  --red-900:    #7C1319;

  /* Display-Schnitt. Georgia ist auf Windows und macOS gesetzt, Iowan Old
     Style auf iOS; die Palatino-Stufen fangen aeltere Systeme. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --wrap: 1180px;
  --gut: clamp(18px, 4vw, 34px);
  --r: 2px;                 /* Zimmermannskante: fast scharf */
  --balken: 3px;            /* Staerke eines Balkens am Bildrahmen */
  --balken-stark: 6px;      /* Gefach-Gitter: muss als Balken lesbar sein */
  --shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(34, 30, 26, .42);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-700); }

/* Ueberschriften in der Serif — gross, schwer, eng. Georgia hat eine
   hohe x-Hoehe, deshalb liegen die Stufen etwas unter denen einer
   Sans-Skala; sonst draengt die H1 auf Mobilgeraeten in drei Zeilen.
   ACHTUNG Mediaevalziffern: Georgia setzt Ziffern nicht linierend —
   3, 4, 5, 7 und 9 fallen unter die Grundlinie. In Ueberschriften ist
   das Charakter, in Kennzahlen und Rufnummern ein Fehler. Alles, was
   Zahlen ausrichtet, bleibt darum ausdruecklich im Sans-Stack. */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700; line-height: 1.12; letter-spacing: -.025em;
  margin: 0;
}
h1 { font-size: clamp(29px, 5.1vw, 50px); }
h2 { font-size: clamp(24px, 3.4vw, 35px); }
h3 { font-size: clamp(19px, 1.9vw, 22px); letter-spacing: -.015em; }
h4 { font-size: 17.5px; letter-spacing: -.005em; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* Staender-Textur — reines CSS, keine Bilddatei.
   SENKRECHTE Linien wie die Staender einer Fachwerkwand. Die Vorlage hatte
   hier waagerechte Lagen (Wetterau: Schichtung) und davor Diagonalen
   (Taunus: Hoehenlinien) — beide Achsen sind damit vergeben, die Senkrechte
   ist frei und traegt zugleich das Motiv.
   Die Abstaende 23px und 139px sind teilerfremd: dadurch fallen die zwei
   Lagen nie zusammen und die Wand liest sich als unregelmaessiges Gefuege
   statt als Streifenmuster. */
.furche {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(42, 37, 33, .045) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg,
      rgba(126, 155, 34, .060) 0 2px, transparent 2px 139px);
}
.furche--dark {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .034) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg,
      rgba(180, 204, 94, .075) 0 2px, transparent 2px 139px);
}

/* Mono-Label ("Kartenbeschriftung") */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.label--akzent { color: var(--akzent-700); }
.label--light { color: var(--brand-300); }

/* Sektionskopf: das KOPFBAND. Am Fachwerk ist das Kopfband die kurze
   Schraege, die Staender und Rahm gegen Verschieben aussteift — die
   kleinste Einheit, an der man ein Fachwerk erkennt.
   Hier: ein L aus Balken (Rahm waagerecht, Staender senkrecht) mit der
   Strebe quer durch die Ecke. Ersetzt den Goldbalken der Wetterau-Vorlage
   und ist ausdruecklich KEINE Nummer — die Sektionen sind keine Reihenfolge.
   Die Strebe ist der eine Zierschnitt der Seite; er kommt genau hier vor
   und nirgends sonst. */
.kopf { position: relative; margin: 0 0 16px; padding-top: 20px; }
.kopf::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 58px; height: 15px;
  border-top: var(--balken) solid var(--brand);
  border-left: var(--balken) solid var(--brand);
}
.kopf::after {                 /* die Strebe quer durch die Ecke */
  content: ""; position: absolute; left: 1px; top: 13px;
  width: 19px; height: 2px; background: var(--akzent);
  transform: rotate(-45deg); transform-origin: left center;
}
.kopf span {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--akzent-700);
}
.furche--dark .kopf::before, .hero .kopf::before,
.check .kopf::before { border-color: var(--brand-200); }
.furche--dark .kopf::after, .hero .kopf::after,
.check .kopf::after { background: var(--akzent-300); }
.furche--dark .kopf span, .hero .kopf span,
.check .kopf span { color: var(--akzent-300); }

.sec-head { max-width: 68ch; margin-bottom: clamp(26px, 3.4vw, 42px);
            padding-bottom: clamp(18px, 2.2vw, 26px);
            border-bottom: 1px solid var(--line); }
.furche--dark .sec-head { border-bottom-color: rgba(255,255,255,.16); }
.sec-head h2, .sec-head h1 { margin-bottom: 14px; }
.sec-head p { color: var(--ink-600); font-size: clamp(17px, 1.4vw, 18.5px); }

/* ------------------------------------------------------------------ CTAs */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 800; font-size: 17px;
  padding: 14px 22px; border-radius: var(--r); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease,
    box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--tel {
  background: var(--akzent); color: var(--brand-900);
  box-shadow: 0 4px 0 var(--akzent-700);
}
.btn--tel:hover { background: #EE9A2C; color: var(--brand-900); }
.btn--tel:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--akzent-700); }
.btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand); color: var(--white); }
.btn--light { background: var(--white); color: var(--brand-900); box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.btn--light:hover { color: var(--brand-900); }
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- Header */
.topbar {
  background: var(--brand-900); color: var(--brand-300);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase;
}
.topbar .wrap { display: flex; align-items: center; gap: 14px;
                min-height: 34px; flex-wrap: wrap; }
.topbar b { color: var(--white); font-weight: 600; }
.topbar .dot { color: var(--brand-600); }
.topbar a { color: var(--akzent-300); text-decoration: none; margin-left: auto; }
.topbar a:hover { color: var(--white); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(238, 240, 235, .94);   /* kuehl — das Creme kam aus der Taunus-Vorlage */
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 14px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 50px; height: auto; }
.brand-words { display: flex; flex-direction: column; line-height: 1.02; }
.brand-words b { font-size: 17px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.brand-words span {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .3em; color: var(--akzent-700);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 15.5px; font-weight: 600; color: var(--ink-600);
  text-decoration: none; padding: 9px 11px; border-radius: var(--r);
}
.nav a:hover { color: var(--brand); background: var(--brand-100); }
.header-cta { display: none; }
.burger {
  margin-left: auto; display: inline-flex; flex-direction: column; gap: 4px;
  /* 44x44 ist die empfohlene Mindestgroesse einer Trefferflaeche;
     40px Hoehe lag knapp darunter. */
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--brand); border: 0; border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--white); }

/* ------------------------------------------------------------------ Hero
   Dunkle Erdzone ueber die volle Breite. Kein Passepartout, kein Marker,
   keine Bildunterschrift im Bild — die Schwesterseite rahmt ihr Motiv wie
   einen Kartendruck, hier ist es eine Kante. */
.hero {
  position: relative; background: var(--nacht); color: var(--white);
  overflow: hidden;
  border-bottom: 1px solid var(--brand-800);
}
.hero::before {          /* Staender: senkrechte Linien, wie im Fliess */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.034) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg,
      rgba(180,204,94,.075) 0 2px, transparent 2px 139px);
}
.hero::after {
  /* Der SCHWELLBALKEN: ein kurzes, dickes Stueck Balken unter der
     Textspalte, nicht die durchlaufende Linie der Wetterau-Vorlage. Dort
     war sie der Horizont und musste die ganze Breite nehmen; hier ist sie
     ein Bauteil und endet dort, wo die Spalte endet. Die Unterkante selbst
     schliesst die 1px-Border des Heros. */
  content: ""; position: absolute; left: 0; bottom: 0;
  width: min(52%, 620px); height: 5px;
  background: var(--akzent);
}
.hero .wrap {
  position: relative; display: grid; gap: clamp(26px, 3.4vw, 44px);
  grid-template-columns: 1fr;
  padding-block: clamp(34px, 5vw, 66px) clamp(34px, 5vw, 62px);
}
.hero__copy { max-width: 44rem; }
/* Rechtstexte tragen keine Medienspalte; ihre Kopie darf breiter laufen. */
.hero:not(:has(.hero__media)) .hero__copy { max-width: 62rem; }
.hero__eyebrow { margin-bottom: 18px; }
.hero__eyebrow .label {
  color: var(--akzent-300); border-bottom: 1px solid rgba(180,204,94,.34);
  padding-bottom: 6px; display: inline-block;
}
.hero h1 {
  margin-bottom: 16px; color: var(--white);
  font-size: clamp(35px, 5.4vw, 62px); letter-spacing: -.032em; line-height: 1.04;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--akzent); }
.hero__lede {
  font-size: clamp(17.5px, 1.6vw, 20px); color: var(--brand-200); max-width: 46ch;
}

/* Zusagen als Streifen unter einer Kante statt als Icon-Raster */
.hero__bullets {
  list-style: none; margin: 26px 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.17);
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
.hero__bullets li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15.5px; font-weight: 600; color: var(--brand-200);
}
.hero__bullets svg {
  width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px;
  color: var(--akzent-300);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .btn--ghost { border-color: var(--brand-200); color: var(--white); }
.hero .btn--ghost:hover { background: var(--white); color: var(--nacht); }
.hero__note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-300); margin-top: 16px;
}

/* Bild ohne Rahmen. .frame bleibt als Huelle im Markup, wird hier zur Kante. */
.hero__media { position: relative; }
.hero .frame { position: relative; border: 0; background: none; padding: 0; box-shadow: none; }
.hero .frame img {
  border-radius: 0; width: 100%;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8);
}
.hero .frame__pin, .hero .frame__tag { display: none; }

/* Ausserhalb des Heros sitzt das Bild in einem GEFACH: der Balken liegt
   auf zwei benachbarten Seiten dick auf, die anderen beiden schliessen mit
   einer Haarlinie. Diese Asymmetrie ist der Unterschied zum umlaufenden
   Passepartout der Vorlage — dort ein gerahmter Kartendruck mit Nadel,
   hier eine Fuellung in einem Traggerueste. */
.frame {
  position: relative; background: var(--white);
  border: 1px solid var(--line);
  border-left: var(--balken) solid var(--brand);
  border-bottom: var(--balken) solid var(--brand);
  padding: 7px; box-shadow: none;
}
.frame img { border-radius: 0; }
.frame__tag {
  position: absolute; left: 0; bottom: 18px;
  background: var(--brand); color: var(--white); font-family: var(--mono);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 12px 6px;
}
/* Die Nadel war die Geste der Wetterau-Vorlage (angepinnter Kartendruck).
   Ein Gefach wird nicht angepinnt. */
.frame__pin { display: none; }

/* ------------------------------------------------------ Kennzahlen-GEFACHE
   Die Kacheln sind Gefache: helle Fuellungen, zwischen denen das dunkle
   Balkenwerk sichtbar bleibt. Umgesetzt als Gitter mit gap auf dunklem
   Grund — der gap IST der Balken, es gibt keine Rahmenlinien.
   Die Vorlage hatte hier einen flachen Streifen mit Haarlinien und
   Goldkante (Wetterau) und davor ein Vermessungs-Panel mit Massstab-
   Zaehnen (Taunus). Beides ersetzt. */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--balken-stark);
  background: var(--brand);
  padding: var(--balken-stark);
  margin-block: clamp(26px, 3.4vw, 40px) clamp(4px, 1vw, 10px);
}
.stats > div {
  background: var(--white);
  padding: 18px 16px 20px;
  border: 0;
}
.stats__ic { display: none; }
.stats b {
  /* Sans, NICHT die Serif: Georgia setzt Mediaevalziffern, die in einer
     Kennzahlenreihe unter die Grundlinie fallen. tabular-nums haelt die
     Spalten in Deckung, wenn mehrere Kacheln Zahlen tragen. */
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  display: block; font-size: clamp(24px, 2.6vw, 31px); font-weight: 800;
  letter-spacing: -.03em; color: var(--akzent-700); line-height: 1.05;
}
.stats span {
  display: block; margin-top: 8px; line-height: 1.35;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-400);
}

/* ---------------------------------------------------- Widget Schnellcheck */
.check { background: var(--brand-900); color: var(--white); }
.check .wrap { padding-block: clamp(46px, 4.8vw, 58px) clamp(34px, 4.6vw, 54px); }
.check h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
.check__intro { color: var(--brand-300); max-width: 56ch; margin-bottom: 22px; }
.check__grid { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); }
.check__btn {
  font-family: var(--sans); font-size: 15px; font-weight: 700; text-align: left;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; border-radius: var(--r); cursor: pointer;
  background: var(--brand-800); color: var(--white);
  border: 1px solid rgba(255,255,255,.14);
}
.check__btn:hover { background: var(--brand-600); }
.check__btn[aria-pressed="true"] { background: var(--akzent); color: var(--brand-900);
  border-color: var(--akzent); }
.check__btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.check__out {
  margin-top: 18px; border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--akzent);
  background: rgba(255,255,255,.06); padding: 18px 20px;
}
.check__out h3 { font-size: 18px; margin-bottom: 7px; }
.check__out p { color: var(--brand-200); font-size: 16px; }
.check__out ul { margin: 10px 0 16px; padding-left: 20px; color: var(--brand-200); font-size: 15.5px; }
.check__out li { margin-bottom: 5px; }
.check__out .btn { margin-top: 4px; }
.check__hint { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
               text-transform: uppercase; color: var(--brand-300); margin-top: 14px; }

/* --------------------------------------------------------------- Karten  */
.cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
.card {
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.card h3 { margin-bottom: 7px; }
.card p { font-size: 16px; color: var(--ink-600); }
.card__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--akzent-700); margin-bottom: 9px; }
.card--plain { background: var(--brand-100); border-color: var(--brand-300); }
.card--plain ul { margin: 4px 0 0; padding-left: 19px; font-size: 16px; column-gap: 24px; }
.card--plain li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- Ablauf */
.steps { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: s; }
.step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  padding: 20px 20px 22px 20px;
}
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--white); background: var(--brand); padding: 3px 7px 2px;
  position: absolute; top: -12px; left: 18px;
}
.step h3 { font-size: 18px; margin: 6px 0 7px; }
.step p { font-size: 15.5px; color: var(--ink-600); }

/* ------------------------------------------------------------ Split-Text */
.split { display: grid; gap: clamp(22px, 3vw, 42px); grid-template-columns: 1fr; align-items: start; }
.split--rev .split__media { order: -1; }
.checklist { list-style: none; margin: 18px 0 0; padding: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 16.5px; }
.checklist svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; color: var(--brand); }
.checklist b { display: block; }
.checklist span { color: var(--ink-600); font-size: 15.5px; }

/* Do / Don't */
.dodont { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 6px; }
.dodont > div { border: 1px solid var(--line); background: var(--white); padding: 18px 20px 20px; }
.dodont--do { border-top: 4px solid var(--brand); }
.dodont--dont { border-top: 4px solid var(--red); }
.dodont h3 { font-size: 17px; margin-bottom: 10px; }
.dodont ul { margin: 0; padding-left: 19px; font-size: 16px; color: var(--ink-600); }
.dodont li { margin-bottom: 7px; }

/* --------------------------------------------------------- Notruf-Bänder */
.band { position: relative; overflow: hidden; }
.band--a { background: var(--nacht); color: var(--white); }
.band--b { background: var(--akzent); color: var(--brand-900); }
.band .wrap { position: relative; display: grid; gap: 20px; grid-template-columns: 1fr;
              align-items: center; padding-block: clamp(32px, 4.4vw, 52px); }
.band h2 { font-size: clamp(23px, 2.8vw, 32px); margin-bottom: 9px; }
.band p { max-width: 54ch; }
.band--a p { color: var(--brand-300); }
.band--b p { color: var(--brand-900); }   /* 5.2:1 auf Amber */
.band__tel {
  font-family: var(--mono); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -.01em; text-decoration: none; display: inline-block;
}
.band--a .band__tel { color: var(--akzent-300); }
.band--b .band__tel { color: var(--brand-900); }
.band__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Die Vorlage setzte hier eine Bergkamm-Silhouette ab. In der Wetterau ist
   die Kante waagerecht — eine Goldlinie als Horizont, wie unter dem Hero. */
.band__ridge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--akzent);
}

/* ------------------------------------------------------------ Städte-Hub */
.kreis { border: 1px solid var(--line); background: var(--white); padding: 20px 20px 22px; }
.kreis + .kreis { margin-top: 18px; }
.kreis h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.kreis h3 small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--ink-400); font-weight: 600; }
.kreis p { font-size: 15.5px; color: var(--ink-600); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips a {
  display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--brand); background: var(--brand-100); border: 1px solid transparent;
  padding: 7px 12px; border-radius: var(--r);
}
.chips a:hover { background: var(--brand); color: var(--white); }
.chips--muted a { background: var(--paper-200); color: var(--ink-600); }
.chips--muted a:hover { background: var(--brand); color: var(--white); }
.chips li[aria-current] span {
  display: inline-block; font-size: 15px; font-weight: 700; padding: 7px 12px;
  background: var(--akzent); color: var(--brand-900); border-radius: var(--r);
}
/* Chip ohne Link — z. B. Stadtteile, die keine eigene Seite haben */
.chips .chip-static {
  display: inline-block; font-size: 15px; font-weight: 600; padding: 7px 12px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 10px; }
details.q { border: 1px solid var(--line); background: var(--white); }
details.q > summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 18px;
  font-weight: 700; font-size: 16.5px; position: relative;
}
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 11px; height: 11px;
  margin-top: -6px; border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg); transition: transform .18s ease;
}
details.q[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
details.q[open] > summary { color: var(--brand); }
details.q .a { padding: 0 18px 18px; font-size: 16px; color: var(--ink-600); }
details.q .a p + p { margin-top: .8em; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--brand-900); color: var(--brand-300); margin-top: 0; }
.site-footer .wrap { padding-block: clamp(38px, 5vw, 58px) 22px; }
.f-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.f-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.f-brand img { width: 46px; height: auto; }
.f-brand b { color: var(--white); font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.f-brand span { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; color: var(--akzent-300); }
/* Im Footer erbt .brand-words sonst das dunkle amber-700 vom Header */
.f-brand .brand-words b { color: var(--white); }
.f-brand .brand-words span { color: var(--akzent-300); font-size: 10px; letter-spacing: .28em; }
.f-brand img { flex: 0 0 auto; }
.site-footer .f-head { color: var(--white); font-family: var(--mono); font-size: 11.5px;
                  font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
                  margin: 0 0 12px; }
.site-footer .f-head--gap { margin-top: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: var(--brand-300); text-decoration: none; font-size: 15.5px; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.f-tel { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--akzent-300) !important; }
/* Mail unter der Rufnummer: gleiche Mono-Linie, aber ruhiger — die
   Telefonnummer bleibt der erste Weg. */
.f-mail { font-family: var(--mono); font-size: 14.5px; font-weight: 600;
          color: var(--brand-300) !important; letter-spacing: .01em;
          display: inline-block; margin-top: 4px; }
.f-mail:hover { color: var(--white) !important; }
.f-cities { columns: 2; column-gap: 22px; }
.f-cities li { break-inside: avoid; }
.f-note { border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 18px;
          font-size: 14px; line-height: 1.6; }
.f-note p { max-width: 92ch; }
.f-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
           margin-top: 14px; font-family: var(--mono); font-size: 11px;
           letter-spacing: .1em; text-transform: uppercase; }

/* ----------------------------------------------------- Sticky Mobile-CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: 8px; padding: 9px 12px;
  background: rgba(23, 19, 15, .96); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.14);
}
.sticky-cta .btn { flex: 1 1 auto; justify-content: center; padding: 13px 14px; font-size: 16px; }
.sticky-cta__hint { display: none; }

/* -------------------------------------------------------------- Breiter  */
@media (min-width: 560px) {
  .hero__bullets { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .check__grid { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .dodont { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  body { font-size: 17.5px; }
  /* Bildspalte ueber die GANZE Hoehe des Bands, rechts randabfallend. Kein
     angeschnittenes Rechteck mehr, das in der Flaeche steht — aber auch
     nicht ueber die volle Breite: die Motive sind enge Aufnahmen, und bei
     voller Breite lag der Kopf des Technikers unter dem Textverlauf.
     Damit .hero der Bezugsrahmen wird, gibt der Wrap seine Positionierung
     ab; der Stapel wird ueber .hero__copy gehalten. */
  .hero .wrap { position: static; grid-template-columns: 1fr; }
  .hero__copy { position: relative; z-index: 2; max-width: 40rem; }
  .hero__media { position: absolute; inset: 0 0 0 auto; width: 46%; margin: 0; }
  .hero .frame, .hero .frame img { height: 100%; }
  .hero .frame img {
    width: 100%; object-fit: cover; object-position: 42% 50%; box-shadow: none;
  }
  /* Weiche Kante nach links: eine harte Naht mitten im Band saehe nach
     Fehler aus, ein Verlauf nach Absicht.
     Der Ausschnitt steht bei 42 %: bei 58 % schnitt die Spalte in fuenf der
     26 Motive den Techniker an (Gedern, Buedingen, Echzell, Muenzenberg,
     Ortenberg), weil er dort links der Bildmitte kniet. Bei 42 % bleibt in
     allen Motiven die ganze Figur samt Kopf im Bild — geprueft, indem der
     Zuschnitt fuer alle 26 Dateien durchgerechnet wurde. */
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      var(--nacht) 0, rgba(30, 26, 22, .55) 18%, rgba(30, 26, 22, 0) 48%);
  }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1.02fr .98fr; }
  .band .wrap { grid-template-columns: 1.5fr auto; }
  .band__side { align-items: flex-end; }
  .f-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
  .header-cta { display: inline-flex; }
  .burger { display: none; }
  .sticky-cta { display: none; }
  .f-cities { columns: 2; }
}

@media (min-width: 1040px) {
  .nav a { padding: 9px 13px; font-size: 16px; }
}

/* --------------------------------------------- Mobile-Nav (JS-Toggle) */
@media (max-width: 859px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-block: 1px solid var(--line);
    padding: 6px var(--gut) 14px; display: none;
    box-shadow: 0 22px 40px -26px rgba(23,19,15,.5);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  body { padding-bottom: 70px; }   /* Platz für den Sticky-CTA */
}

@media (max-width: 400px) {
  .brand img { width: 42px; }
  .brand-words b { font-size: 15px; }
  .brand-words span { font-size: 9.5px; letter-spacing: .24em; }
}

/* ------------------------------------------------------------ Rücksicht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .topbar, .sticky-cta, .check, .band { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* ----------------------------------------------- Stadtseiten-Varianten */
/* Ablauf-Schritte auf Stadtseiten: gestapelt in einer Spalte, weil sie
   dort neben dem Protokoll-Bild stehen statt über die ganze Breite. */
.steps--compact { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.steps--compact .step { padding: 16px 18px 18px; }
.steps--compact .step h3 { font-size: 17px; }
.steps--compact .step p { font-size: 15px; }

/* Verfahren-Liste zweispaltig, sobald Platz ist */
.checklist--cols { margin-top: 16px; }
@media (min-width: 700px) {
  .checklist--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
}

/* Ortsteil-Sektion */
.ortsteile-note { max-width: 62ch; margin-bottom: 18px; color: var(--ink-600); }

@media (min-width: 560px) {
  .steps--compact { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .steps--compact { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- Rechtstexte / Fließtext */
.legal { padding-top: clamp(10px, 2vw, 22px); }
.legal__body {
  max-width: 76ch; background: var(--white); border: 1px solid var(--line);
  padding: clamp(22px, 3.4vw, 42px);
}
.legal__body h2 {
  font-size: clamp(19px, 1.9vw, 23px); margin: 34px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 {
  font-size: 16.5px; font-weight: 700; letter-spacing: 0;
  margin: 20px 0 7px; color: var(--brand);
}
.legal__body p, .legal__body li { font-size: 16.5px; }
.legal__body ul { margin: 0 0 1.05em; padding-left: 21px; }
.legal__body li { margin-bottom: 6px; }
.legal__body address {
  font-style: normal; background: var(--paper); border-left: 3px solid var(--brand);
  padding: 14px 16px; margin: 0 0 1.05em; font-size: 16.5px;
}
.legal__table { width: 100%; border-collapse: collapse; margin: 0 0 1.05em;
                font-size: 16px; }
.legal__table th, .legal__table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.legal__table th {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-600); font-weight: 700;
}
.legal__table td:last-child { font-family: var(--mono); white-space: nowrap; }
.legal__stand {
  max-width: 76ch; margin-top: 16px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
}

/* ------------------------------------------ Bildspalte der Split-Sektionen
   Problem: die Textspalte ist 480–950 px hoch, das 3:2-Bild nur ~350 px —
   darunter klaffte eine Leerfläche von bis zu 572 px. Drei Maßnahmen:
   1. Auf Desktop wird das Bild quadratisch zugeschnitten (+160 px Höhe).
      Quadrat statt Hochformat, weil die Motive dabei nicht zerschnitten
      werden — ein 3:2-Foto auf 1:1,8 zu ziehen kappt halbe Bildinhalte.
   2. Darunter eine Datenkarte mit den Angaben, die ohnehin gesucht werden.
   3. Die verbleibende Differenz wird zentriert, also auf beide Seiten
      verteilt, statt komplett unten abgeworfen. */
@media (min-width: 860px) {
  .split__media { align-self: center; }
  .split__media .frame img { aspect-ratio: 1 / 1; object-fit: cover; }
}

.media-card {
  margin-top: 14px; background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); padding: 15px 17px 16px;
}
.media-card__head {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600);
  margin: 0 0 11px;
}
.media-card dl { margin: 0; display: grid; gap: 7px; }
.media-card dl > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px;
  align-items: baseline; font-size: 15px;
}
.media-card dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.media-card dd { margin: 0; color: var(--ink); }
.media-card__tel {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.media-card__tel svg { width: 17px; height: 17px; }
.media-card__tel:hover { color: var(--akzent-700); text-decoration: underline; }

/* Stadtteil-Chips unter der Datenkarte */
.media-chips { margin-top: 16px; }
.media-chips .label { display: block; margin-bottom: 9px; }

@media (max-width: 419px) {
  .media-card dl > div { grid-template-columns: 1fr; gap: 1px; }
}

/* ============================================ Einsatzgebiet-Seite ======= */

/* Kartenlegende im Hero — die Seite hat kein Hero-Bild, hier stehen
   stattdessen die Vergleichszahlen beider Landkreise. */
.legende {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 18px 20px 20px;
}
.legende__head {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand-600);
  margin: 0 0 14px;
}
.legende__grid { display: grid; gap: 0; }
.legende__row {
  display: grid; align-items: baseline;
  grid-template-columns: 14px 1fr auto auto auto;
  gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.legende__row:last-child { border-bottom: 0; }
.legende__row--head {
  padding-top: 0; padding-bottom: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.legende__row--head .legende__num { font-weight: 600; }
.legende__marker { width: 11px; height: 11px; border-radius: 2px; display: block; }
.legende__row--htk .legende__marker { background: var(--brand); }
.legende__row--mtk .legende__marker { background: var(--akzent); }
.legende__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.legende__num {
  font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums;
  min-width: 4.6rem; text-align: right; color: var(--ink);
}
.legende__row--head .legende__num { font-size: 9.5px; }
.legende__row--sum {
  border-top: 2px solid var(--brand); border-bottom: 0; margin-top: 2px;
}
.legende__row--sum .legende__name,
.legende__row--sum .legende__num { color: var(--brand); font-weight: 800; }
.legende__note {
  margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-600);
  border-left: 3px solid var(--akzent); padding-left: 12px;
}

/* Die zwei Landkreise NEBENEINANDER in einem Element */
.kreis-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.kreis-card {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  scroll-margin-top: 96px;   /* Sprungziel nicht unter den Sticky-Header */
}
.kreis-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 15px 20px 14px;
}
.kreis-card--htk .kreis-card__head { background: var(--brand); }
.kreis-card--htk .kreis-card__head h3 { color: var(--white); }
.kreis-card--htk .kreis-card__count { color: var(--brand-200); }
.kreis-card--mtk .kreis-card__head { background: var(--akzent); }
.kreis-card--mtk .kreis-card__head h3,
.kreis-card--mtk .kreis-card__count { color: var(--brand-900); }
.kreis-card__head h3 { font-size: clamp(19px, 2vw, 23px); }
.kreis-card__count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-left: auto;
}
.kreis-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.kreis-card__body p { font-size: 16px; color: var(--ink-600); }
.kreis-card__facts {
  margin: 0 0 16px; display: grid; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kreis-card__facts > div {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.kreis-card__facts > div:last-child { border-bottom: 0; }
.kreis-card__facts dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.kreis-card__facts dd {
  margin: 0; font-size: 15.5px; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* Kein margin-top:auto auf den Chips — das schob sie an den Kartenboden
   und riss in der kürzeren Karte eine Lücke zwischen Beschriftung und
   erster Chip-Zeile. Der Restplatz sitzt jetzt am Kartenende, wo er nicht
   auffällt. */
/* Städte in den Kreis-Karten als ausgerichteter Index statt ragged
   Flex-Umbruch — auf einer Übersichtsseite liest sich eine Spaltenliste
   besser als zwei ungleich lange Chips pro Zeile. */
@media (min-width: 560px) {
  .kreis-card__body .chips {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .kreis-card__body .chips a { display: block; }
}

@media (min-width: 900px) {
  .kreis-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 419px) {
  .legende__row { grid-template-columns: 12px 1fr auto; gap: 8px; }
  .legende__row > .legende__num:nth-last-child(2) { display: none; }
  .legende__row--head > span:nth-last-child(2) { display: none; }
  .kreis-card__facts > div { grid-template-columns: 1fr; gap: 1px; }
}

/* ============================================ Kreiskarte (Startseite) ===
   Echte Gemeindegrenzen aus OpenStreetMap, als Inline-SVG. Jede Fläche ist
   ein <a> zur Stadtseite — anklickbar, tastaturbedienbar, ohne JavaScript
   und ohne Kartendienst. */
.karte-feld {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: clamp(10px, 1.6vw, 18px);
}
.karte { width: 100%; height: auto; display: block; }
.karte__ort path {
  fill: var(--brand-100); stroke: var(--white); stroke-width: 1.5;
  transition: fill .13s ease;
}
.karte__ort--gross path { fill: var(--paper-200); }
.karte__ort:hover path { fill: var(--akzent); }
.karte__ort:focus-visible path {
  fill: var(--akzent); stroke: var(--brand-900); stroke-width: 3;
}
.karte__ort:focus:not(:focus-visible) { outline: none; }
.karte__label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  fill: var(--brand); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--white); stroke-width: 3.5px;
  stroke-linejoin: round;
}
.karte__label--gross { font-size: 13.5px; font-weight: 800; }
.karte-quelle {
  margin: 12px 2px 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink-400); line-height: 1.5;
}
.karte-hinweis {
  margin: 0 0 16px; font-size: 15.5px; color: var(--ink-600);
}

/* Unter ~620 px waeren 25 beschriftete Flaechen nicht mehr treffsicher zu
   tippen. Die Karte deshalb NICHT ausblenden — Ueberschrift und Button
   versprechen sie, und eine Seite darf nicht etwas anderes zeigen als sie
   ankuendigt. Stattdessen behaelt sie ihre Mindestbreite und scrollt
   waagerecht im eigenen Kasten; die Ortsliste darunter bleibt der
   bequemere Weg und steht auf jeder Breite. */
@media (max-width: 619px) {
  .karte-feld { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .karte { min-width: 560px; }
  .karte-feld::after {
    content: "Karte seitlich verschiebbar";
    display: block; margin-top: 8px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
    color: var(--ink-400);
  }
}

/* Ortsliste unter der Karte: Staedte und Gemeinden nebeneinander */
.ortsliste {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.4vw, 44px);
}
.ortsliste__spalte h3 {
  margin: 0 0 12px; font-size: clamp(19px, 1.5vw, 22px);
  display: flex; align-items: baseline; gap: 10px;
}
.ortsliste__spalte h3 small {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; color: var(--ink-400);
}
@media (max-width: 719px) { .ortsliste { grid-template-columns: 1fr; } }

/* ====================================================== Sektionsrhythmus
   Die Vorlage setzte gar keinen: die Abschnitte stießen mit 0 px
   aneinander. Auf der Startseite fiel das kaum auf, weil dort fast jeder
   Übergang ein Farbwechsel ist — sobald ein Abschnitt aber mit einem
   flächigen Objekt endet (Karten, Chips) und der nächste sofort mit seiner
   Goldlinie beginnt, sieht es nach Fehler aus.
   :where() hält die Spezifität bei 0, damit Hero, Soforthilfe-Widget und
   die Bänder ihre eigenen, engeren Werte behalten. */
main > section > :where(.wrap) { padding-block: clamp(40px, 5vw, 68px); }

/* ================================================================ Ratgeber
   Zwei Spalten: links die Beiträge, rechts eine mitlaufende Spalte mit
   Rufnummer, den passenden Ortsseiten und dem Weg zurück in die Rubrik.
   Die Beitragsliste ist eine Zeitreihe mit Vorschaubild — Datum und Thema
   stehen über der Überschrift, getrennt durch Haarlinien statt in Karten.
   Das passt zur Schichtung der übrigen Seite. */
.rat-layout { display: grid; gap: clamp(30px, 4vw, 54px); grid-template-columns: 1fr; }
.rat-haupt { min-width: 0; }

.rat-liste { list-style: none; margin: 0; padding: 0; }
.rat-eintrag {
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
.rat-eintrag:first-child { border-top: 0; padding-top: 0; }
.rat-eintrag__bild { display: block; overflow: hidden; background: var(--paper-200); }
.rat-eintrag__bild img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9;
  transition: transform .25s ease;
}
.rat-eintrag:hover .rat-eintrag__bild img { transform: scale(1.035); }
.rat-eintrag__text { min-width: 0; }
.rat-eintrag__meta {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.rat-eintrag__meta .dot { color: var(--akzent-700); }
.rat-eintrag h3 {
  margin: 0 0 8px; font-size: clamp(20px, 1.9vw, 25px); max-width: 32ch;
}
.rat-eintrag h3 a { color: var(--ink); text-decoration: none; }
.rat-eintrag h3 a:hover { color: var(--brand); text-decoration: underline; }
.rat-eintrag p { margin: 0; color: var(--ink-600); max-width: 62ch; }

/* Weiterlesen unter einem Beitrag: drei Karten nebeneinander */
.rat-liste--karten { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: 1fr; }
.rat-liste--karten .rat-eintrag {
  border-top: 0; padding: 0; display: block;
  background: var(--white); border: 1px solid var(--line);
}
.rat-liste--karten .rat-eintrag__text { padding: 16px 18px 20px; }
.rat-liste--karten .rat-eintrag h3 { font-size: clamp(18px, 1.5vw, 20px); max-width: none; }
/* Auf den Karten entfaellt der Anriss, das Datum bleibt: :not() ist
   noetig, weil die Meta-Zeile ebenfalls ein <p> ist. */
.rat-liste--karten .rat-eintrag__text p:not(.rat-eintrag__meta) { display: none; }

/* -------------------------------------------------------------- Sidebar */
.rat-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.side-box {
  background: var(--white); border: 1px solid var(--line);
  padding: 20px 20px 22px;
}
.side-box__kopf {
  margin: 0 0 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--akzent-700);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.side-box--tel { background: var(--nacht); border-color: var(--nacht); }
.side-box--tel .side-box__kopf {
  color: var(--akzent-300); border-bottom-color: rgba(255,255,255,.18);
}
.side-box__tel {
  display: block; font-family: var(--mono); font-size: clamp(22px, 2vw, 26px);
  font-weight: 700; letter-spacing: -.01em; color: var(--akzent-300);
  text-decoration: none; margin-bottom: 10px;
}
.side-box__tel:hover { color: var(--white); }
.side-box__note { margin: 0 0 16px; font-size: 13.5px; color: var(--brand-200); }
.side-box--tel .btn { width: 100%; justify-content: center; }

.side-liste { list-style: none; margin: 0; padding: 0; }
.side-liste li { border-top: 1px solid var(--line); }
.side-liste li:first-child { border-top: 0; }
.side-liste a {
  display: block; padding: 9px 0; font-size: 15.5px; font-weight: 600;
  color: var(--ink); text-decoration: none; line-height: 1.35;
}
.side-liste a:hover { color: var(--brand); text-decoration: underline; }
.side-liste--datiert li { padding-bottom: 8px; }
.side-liste--datiert a { padding-bottom: 2px; }
.side-liste--datiert span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
}
.side-box__mehr { margin: 14px 0 0; font-size: 14.5px; font-weight: 700; }

/* Datum und Rückweg im Hero eines Beitrags */
.rat-meta {
  margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--brand-300);
  display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline;
}
.rat-meta a { color: var(--akzent-300); text-decoration: none; }
.rat-meta a:hover { color: var(--white); text-decoration: underline; }

/* Fließtext in Lesebreite */
.rat-text { max-width: 68ch; }
.rat-text h2 { margin: clamp(30px, 3.4vw, 44px) 0 12px; font-size: clamp(23px, 2.2vw, 29px); }
.rat-text > h2:first-child { margin-top: 0; }
.rat-text p { margin: 0 0 15px; }

.rat-tipps {
  margin: clamp(30px, 3.4vw, 42px) 0 0;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--akzent);
}
.rat-tipps h3 { margin: 0 0 12px; font-size: clamp(18px, 1.7vw, 21px); }
.rat-tipps ul { margin: 0; padding-left: 20px; }
.rat-tipps li { margin-bottom: 9px; }
.rat-tipps li:last-child { margin-bottom: 0; }

.rat-cta {
  margin: clamp(26px, 3vw, 36px) 0 0; padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--ink-600);
  display: grid; gap: 16px; align-items: center;
}
.rat-cta p { margin: 0; max-width: 62ch; }
.rat-cta .btn { justify-self: start; }

@media (min-width: 620px) {
  .rat-eintrag { grid-template-columns: 232px minmax(0, 1fr); gap: 22px; }
  .rat-liste--karten { grid-template-columns: repeat(3, 1fr); }
  .rat-liste--karten .rat-eintrag { grid-template-columns: 1fr; }
}
@media (min-width: 860px) {
  .rat-tipps ul { columns: 2; column-gap: 34px; }
  .rat-tipps li { break-inside: avoid; }
  .rat-cta { grid-template-columns: 1fr auto; }
}
@media (min-width: 1000px) {
  /* Die Spalte läuft mit. 88 px sind der klebende Kopf plus etwas Luft. */
  .rat-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .rat-side { position: sticky; top: 88px; }
}

/* ================================================== Gebietsplatten (Home)
   Die Startseite ist die Regionsseite; ihr Kern sind die zwei Gebiete.
   Jede Platte ist ein GEFACH: helle Fuellung, Balken auf zwei benachbarten
   Seiten, Haarlinie auf den anderen. Dieselbe Geste wie beim Bildrahmen,
   damit die Seite EIN Gefuege ergibt und nicht zwei Ideen zeigt.
   Die Reihenfolge traegt Information: erst der Kreis, der die Region im
   Namen fuehrt, dann der Teil des Nachbarkreises. Bewusst KEINE Nummern
   davor - die beiden Gebiete sind keine Reihenfolge, sondern eine Teilung. */
.gebiete {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 30px);
}
.gebiet {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: var(--balken) solid var(--brand);
  border-bottom: var(--balken) solid var(--brand);
  padding: clamp(22px, 2.6vw, 32px);
}
.gebiet h3 { margin-bottom: 12px; }
.gebiet p { color: var(--ink-600); }
.gebiet p:last-of-type { margin-bottom: 22px; }

/* Kennung: die Zahl im Sans (Georgia setzt Mediaevalziffern), das Label
   im Mono. Die Grundlinie beider sitzt auf einer Hoehe. */
.gebiet__kennung {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.gebiet__kennung b {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  color: var(--akzent-700); line-height: 1;
}
.gebiet__kennung span {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
}

@media (min-width: 900px) {
  .gebiete { grid-template-columns: 1fr 1fr; }
}


/* ============================== Jahreslauf und Register (Ratgeber-Index)
   Die Uebersicht bestand fast nur aus den Ledes ihrer eigenen Beitraege.
   Diese zwei Bloecke sind ihr eigener Teil: was wann ansteht, und
   dieselben Beitraege nach Sachgruppe statt nach Datum.
   Gestaltung wie die Gebietsplatten der Startseite - dieselbe
   Gefach-Geste, damit die Seite EIN Gefuege bleibt. */
.jahr-raster {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 26px);
}
.jahr {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: var(--balken) solid var(--brand);
  border-bottom: var(--balken) solid var(--brand);
  padding: clamp(20px, 2.4vw, 28px);
}
.jahr p { color: var(--ink-600); }

.jahr__kennung {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.jahr__kennung b {
  font-family: var(--serif); font-size: clamp(20px, 2vw, 24px);
  font-weight: 700; letter-spacing: -.02em; color: var(--brand);
  line-height: 1;
}
.jahr__kennung span {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400);
}

/* Die Verweise als eigene Zeile unter dem Absatz. Kein Aufzaehlungspunkt:
   Es ist eine Reihe von Wegen, keine Liste von Aussagen. */
.jahr__links {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.jahr__links a {
  font-size: 15px; font-weight: 600; color: var(--akzent-700);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

.register {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 32px);
}
.reg-gruppe h3 { margin-bottom: 6px; }
.reg-gruppe > p {
  color: var(--ink-400); font-size: 15.5px; margin-bottom: 12px;
  max-width: 52ch;
}
.reg-liste {
  list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--brand);
}
.reg-liste li { border-bottom: 1px solid var(--line); }
.reg-liste a {
  display: block; padding: 11px 0; color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.reg-liste a:hover { color: var(--akzent-700); text-decoration: underline; }

@media (min-width: 900px) {
  .jahr-raster { grid-template-columns: 1fr 1fr; }
  .register { grid-template-columns: 1fr 1fr; }
}