/* ===========================================================================
   kammerjaeger-bergstrasse.de — Gestaltung "Arkade"
   ---------------------------------------------------------------------------
   Die Formensprache kommt aus dem Logo und aus der Region, nicht aus einer
   Vorlage. Drei Gesten tragen die ganze Seite:

     1  RUNDBOGEN   Das Hero-Foto steckt in einem echten Rundbogen (oberer
                    Radius = halbe Breite, darum das feste Seitenverhaeltnis),
                    Sektionsmarken sind kleine Bogen, Bildkanten in Karten
                    greifen ihn flach wieder auf. Zitat der Lorscher
                    Koenigshalle — dem Welterbe des Landkreises.
     2  SCHICHTEN   Drei gestapelte Sandsteinlinien abnehmender Laenge als
                    Trenner. Buntsandstein liegt in Baenken; das ist das
                    Baumaterial des Odenwalds.
     3  KAEMPFER    Sektionsueberschriften sitzen auf einer durchlaufenden
                    Linie, aus der die Zeile ausgespart ist — die Kaempfer-
                    linie, auf der ein Bogen aufsetzt.

   KEIN Webfont, KEIN CDN, KEIN Tracking: die Datenschutzerklaerung sagt
   "keine externen Ressourcen" zu, und das muss wahr bleiben.

   Bei jeder Aenderung CSSV in scripts/build.py erhoehen — der Cache steht
   auf einem Jahr, ohne neuen Query-String sieht sie niemand.
   ======================================================================== */

/* ------------------------------------------------------------- Grundwerte */
:root {
  --stein:    #A8442A;   /* Odenwaelder Buntsandstein — Primaerakzent, CTA */
  --stein-d:  #8A3421;
  --stein-h:  #C4633F;   /* aufgehellt, fuer dunklen Grund */
  --wald:     #1E4634;   /* Odenwaldgruen — dunkle Baender */
  --wald-t:   #163325;
  --wald-h:   #7AA086;
  --sand:     #E3C489;
  --sand-t:   #C9A867;
  --papier:   #F6F1E7;   /* Grund */
  --karte:    #FCFAF5;   /* Karten, Formulare */
  --tinte:    #232624;
  --tinte-m:  #5B615C;
  --linie:    #E0D7C6;
  --linie-s:  #CFC3AC;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --rand: 1100px;        /* Textmass */
  --luft: 26px;          /* Seitenrand mobil */
  --r: 4px;              /* Grundradius: knapp, steinern */
  --schatten: 0 1px 2px rgba(35,38,36,.05), 0 6px 22px rgba(35,38,36,.06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
                           transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 17px/1.68 var(--schrift);
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

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

a { color: var(--stein-d); text-underline-offset: .18em;
    text-decoration-thickness: .08em; }
a:hover { color: var(--stein); }

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

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.16;
  letter-spacing: -.018em;
  font-weight: 800;
}
h1 { font-size: clamp(31px, 5.1vw, 52px); }
h2 { font-size: clamp(25px, 3.5vw, 36px); }
h3 { font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -.012em; }
h4 { font-size: 18px; letter-spacing: -.008em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--rand); margin-inline: auto;
        padding-inline: var(--luft); }
.wrap--weit { max-width: 1280px; }

/* Sektionsrhythmus zentral. :where() haelt die Spezifitaet bei 0, damit
   Hero, Baender und Widgets ihre engeren Eigenwerte behalten. */
main > section > :where(.wrap, .wrap--weit) { padding-block: clamp(52px, 7vw, 88px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--wald); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------- Geste: Schichten
   Drei Sandsteinbaenke abnehmender Laenge. Als ::after an einem Element,
   das die Klasse traegt. */
.schichten { position: relative; }
.schichten::after {
  content: ""; display: block; margin-top: 18px;
  height: 8px; width: 96px;
  background:
    linear-gradient(var(--stein) 0 0) 0 0    / 96px 2px no-repeat,
    linear-gradient(var(--stein) 0 0) 0 3px  / 62px 2px no-repeat,
    linear-gradient(var(--stein) 0 0) 0 6px  / 34px 2px no-repeat;
}
.schichten--mitte::after { margin-inline: auto; }
.auf-dunkel .schichten::after,
.band--wald .schichten::after {
  background:
    linear-gradient(var(--sand) 0 0) 0 0   / 96px 2px no-repeat,
    linear-gradient(var(--sand) 0 0) 0 3px / 62px 2px no-repeat,
    linear-gradient(var(--sand) 0 0) 0 6px / 34px 2px no-repeat;
}

/* ------------------------------------------------------- Geste: Rundbogen */
/* Echter Halbkreis: der senkrechte Radius muss die halbe Breite treffen.
   Deshalb haengt er am Seitenverhaeltnis und wird ueber Prozente gesetzt —
   bei 3:4 sind 50% der Breite genau 37.5% der Hoehe. */
.bogen { aspect-ratio: 3 / 4;
         border-radius: 50% 50% var(--r) var(--r) / 37.5% 37.5% var(--r) var(--r); }

/* Alle Bildrahmen nach demselben Muster: Der Rahmen traegt das
   Seitenverhaeltnis, das Bild liegt absolut darin.

   Vorher stand das Bild auf `height:100%` im Fluss — in einer Box, deren
   Hoehe nur aus `aspect-ratio` kommt, ist die Prozenthoehe fuer den Browser
   nicht bestimmt genug, und das Bild wurde null Pixel hoch. Sichtbar war
   nur noch die Hintergrundfarbe des Rahmens: ein leerer gruener Bogen bei
   einer Bilddatei, die per HTTP einwandfrei ausgeliefert wurde. */
.bogen, .karte-bild, .beitrag-bild, .split-bild, .artikel-bild {
  position: relative; overflow: hidden; background: var(--wald-t);
}
.bogen > img, .karte-bild > img, .beitrag-bild > img,
.split-bild > img, .artikel-bild > img,
.beitrag-bild > a > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.beitrag-bild > a { position: absolute; inset: 0; display: block; }

/* --------------------------------------------------------- Kopf und Leiste */
.topbar {
  background: var(--wald-t); color: #DCE6DE;
  font-size: 14px; letter-spacing: .01em;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-block: 9px; min-height: 40px;
}
.topbar b { color: #fff; font-weight: 600; }
.topbar .punkt { color: var(--wald-h); }
.topbar a { color: var(--sand); font-weight: 700; text-decoration: none;
            margin-left: auto; white-space: nowrap; }
.topbar a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .topbar .nur-breit { display: none; } }

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,241,231,.94);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 74px; padding-block: 9px;
}
.marke { display: inline-flex; align-items: center; gap: 11px;
         text-decoration: none; color: inherit; flex: 0 0 auto; }
.marke img { width: 48px; height: 40px; }
.marke-wort { display: grid; line-height: 1.05; }
.marke-wort b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.marke-wort span {
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .2em; color: var(--stein);
}

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 9px 12px; border-radius: var(--r);
  font-size: 15.5px; font-weight: 600; color: var(--tinte);
  text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: rgba(168,68,42,.09); color: var(--stein-d); }
.nav a[aria-current] { color: var(--stein-d); box-shadow: inset 0 -2px 0 var(--stein); }

.burger {
  display: none; margin-left: auto; width: 46px; height: 42px;
  background: none; border: 1px solid var(--linie-s); border-radius: var(--r);
  cursor: pointer; padding: 11px 10px;
}
.burger span { display: block; height: 2px; background: var(--tinte);
               border-radius: 2px; }
.burger span + span { margin-top: 5px; }

@media (max-width: 1000px) {
  .burger { display: block; }
  .kopf-cta { display: none; }
  .nav {
    position: absolute; inset: 100% 0 auto; margin: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten); display: none;
  }
  .nav[data-offen] { display: block; }
  .nav ul { flex-direction: column; gap: 0;
            padding: 8px var(--luft) 16px; max-width: var(--rand);
            margin-inline: auto; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--linie); }
}

/* ------------------------------------------------------------- Schaltflaechen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--r);
  font: 700 16.5px/1.15 var(--schrift); letter-spacing: -.005em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn--tel { background: var(--stein); color: #fff; }
.btn--tel:hover { background: var(--stein-d); color: #fff; }
.btn--rand { border-color: currentColor; color: var(--wald); background: none; }
.btn--rand:hover { background: rgba(30,70,52,.08); color: var(--wald); }
.btn--hell { background: var(--sand); color: var(--wald-t); }
.btn--hell:hover { background: #EFD5A4; color: var(--wald-t); }
.btn--rand-hell { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--rand-hell:hover { background: rgba(255,255,255,.12); color: #fff; }
.kopf-cta { padding: 11px 17px; font-size: 15.5px; }
/* Mobil: Unter 480 px passt die Nummer neben Marke und Burger nicht in die
   Kopfzeile (bei 320 px ragte sie 64 px aus dem Viewport). Dort bleibt der
   Anruf-Knopf als Symbol-Knopf stehen, die Nummer bleibt sein Linkname und
   steht ausgeschrieben in der Topbar direkt darueber. Der Burger behaelt
   seine 46 px statt vom Knopf zusammengedrueckt zu werden. */
.burger { flex: 0 0 auto; }
@media (max-width: 479px) {
  .kopf .wrap { gap: 10px; }
  .kopf-cta { flex: 0 0 auto; width: 46px; height: 42px; padding: 0;
              gap: 0; font-size: 0; }
  .kopf-cta svg { width: 21px; height: 21px; }
}
@media (max-width: 359px) {
  .kopf .wrap { gap: 8px; }
  .marke { gap: 8px; }
  .marke img { width: 42px; height: 35px; }
}

.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------------- Hero
   Eine Bogenoeffnung der Arkade, gefuellt mit dem Foto, auf einer Sandstein-
   Standlinie. Text links, Bogen rechts — der Bogen ist die Hauptfigur und
   darf deshalb aus dem Textraster ausbrechen. */
.hero { background: var(--papier); border-bottom: 1px solid var(--linie); }
.hero .wrap {
  display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: 1fr;
  padding-block: clamp(34px, 5vw, 62px) 0;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr);
                align-items: end; }
}
.hero-text { padding-bottom: clamp(30px, 4vw, 54px); }
.hero-marke {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 12px/1 var(--mono); letter-spacing: .17em;
  text-transform: uppercase; color: var(--stein);
  margin-bottom: 20px;
}
.hero-marke::before {
  content: ""; width: 15px; height: 17px; background: var(--stein);
  border-radius: 50% 50% 1px 1px / 46% 46% 1px 1px;
}
.hero h1 { margin-bottom: .42em; }
.hero h1 em { font-style: normal; color: var(--stein); }
.hero-lead { font-size: clamp(17.5px, 2vw, 19.5px); color: #3B403C;
             max-width: 54ch; margin-bottom: 26px; }
.hero .btn-reihe { margin-bottom: 18px; }
.hero-fein { font-size: 14.5px; color: var(--tinte-m); }
.hero-fein b { color: var(--tinte); }

.hero-bogen { position: relative; align-self: end; }
.hero-bogen .bogen { box-shadow: var(--schatten); }
.hero-bogen .bogen > img { object-position: 50% 42%; }
/* Standlinie: der Sockel, auf dem der Bogen aufsitzt */
.hero-bogen::after {
  content: ""; position: absolute; left: -14px; right: -14px; bottom: -1px;
  height: 9px; background: var(--stein);
}
@media (max-width: 899px) {
  .hero-bogen { max-width: 420px; margin-inline: auto; width: 100%; }
  .hero-bogen::after { left: -8px; right: -8px; }
}

/* Sockelband unter dem Hero: die drei Rufnummern, flach, ohne Karte */
.sockel { background: var(--wald); color: #E6EDE8; }
.sockel .wrap {
  display: grid; gap: 2px 30px; padding-block: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .sockel .wrap { grid-template-columns: repeat(3, 1fr); } }
.sockel-eintrag { padding-block: 10px; }
.sockel-eintrag + .sockel-eintrag { border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 720px) {
  .sockel-eintrag + .sockel-eintrag { border-top: 0;
    border-left: 1px solid rgba(255,255,255,.16); padding-left: 30px; }
}
.sockel-label {
  font: 700 11.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sand); margin-bottom: 7px;
}
/* Im Sockel steht auf Orts- und Startseite eine Rufnummer (Link), auf den
   Leistungsseiten eine Angabe ohne Ziel (span). Beide sehen gleich aus. */
.sockel a, .sockel-wert {
  display: inline-block; color: #fff; font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; text-decoration: none;
}
.sockel-wert { font-size: 20px; }
.sockel a:hover { color: var(--sand); }
.sockel small { display: block; color: #A9BCB0; font-size: 13.5px;
                margin-top: 3px; }

/* ------------------------------------------------------------ Sektionskopf
   Kaempferlinie: eine durchlaufende Linie, aus der das Label ausgespart ist. */
.kopfzeile { margin-bottom: clamp(26px, 3vw, 40px); max-width: 62ch; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kaempfer {
  display: flex; align-items: center; gap: 14px;
  font: 700 11.5px/1 var(--mono); letter-spacing: .17em;
  text-transform: uppercase; color: var(--stein);
  margin-bottom: 16px;
}
.kaempfer::after {
  content: ""; flex: 1; height: 1px; background: var(--linie-s);
}
.kopfzeile--mitte .kaempfer::before {
  content: ""; flex: 1; height: 1px; background: var(--linie-s);
}
.kaempfer svg { width: 17px; height: 17px; flex: 0 0 auto; }
.kopfzeile p { color: var(--tinte-m); font-size: 17px; margin: 0; }
.kopfzeile h2 { margin-bottom: .38em; }

.band--wald .kaempfer, .auf-dunkel .kaempfer { color: var(--sand); }
.band--wald .kaempfer::after, .band--wald .kaempfer::before,
.auf-dunkel .kaempfer::after, .auf-dunkel .kaempfer::before {
  background: rgba(255,255,255,.22);
}
.band--wald .kopfzeile p, .auf-dunkel .kopfzeile p { color: #B9C8BE; }

/* ------------------------------------------------------------------ Baender */
.band--wald { background: var(--wald); color: #E9EFEB; }
/* `:where()` haelt diese Regeln bei Spezifitaet 0,1,0. Ohne das schlaegt
   `.band--wald h3` (0,2,0) jede Komponentenregel wie `.karte h3` (0,1,1) —
   eine helle Karte auf dem gruenen Band bekaeme dann weisse Ueberschriften
   auf weissem Grund. Genau so waren die FAQ-Fragen unlesbar. */
.band--wald :where(h2, h3, h4, b) { color: #fff; }
.band--wald :where(a) { color: var(--sand); }
.band--sand { background: #F0E7D5; }
.band--stein { background: var(--stein); color: #fff; }

/* -------------------------------------------------------------------- Raster */
.raster { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .raster--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 560px) { .raster--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .raster--3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 640px) { .raster--4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .raster--4 { grid-template-columns: repeat(4,1fr); } }

/* --------------------------------------------------------------------- Karte */
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 24px;
}
.karte h3 { margin-bottom: .45em; }
/* Der Kartentitel führt auf die Leistungsseite. Er soll als Überschrift
   lesbar bleiben und sich erst beim Überfahren als Link zu erkennen geben. */
.karte h3 a { color: inherit; text-decoration: none; }
.karte h3 a:hover, .karte h3 a:focus-visible { color: var(--stein-d);
                                               text-decoration: underline; }
.karte p { color: #43483F; font-size: 16.3px; }
.karte--schaedling { display: flex; flex-direction: column; padding: 0;
                     overflow: hidden; }
.karte--schaedling .karte-bild { aspect-ratio: 16 / 10; }
.karte--schaedling .karte-text { padding: 22px 22px 24px; flex: 1;
                                 display: flex; flex-direction: column; }
.karte-marke {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 700 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: var(--stein);
}
.karte-marke svg { width: 18px; height: 18px; }
.karte ul { margin: 14px 0 0; padding: 0; list-style: none; }
.karte ul li { position: relative; padding-left: 22px; margin-bottom: 7px;
               font-size: 15.6px; color: #43483F; }
.karte ul li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 10px; background: var(--sand-t);
  border-radius: 50% 50% 1px 1px / 55% 55% 1px 1px;
}

/* ---------------------------------------------------------------- Schritte */
.schritte { counter-reset: s; display: grid; gap: 22px; grid-template-columns: 1fr;
           list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px)  { .schritte { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .schritte { grid-template-columns: repeat(4,1fr); } }
.schritt { counter-increment: s; position: relative; padding-top: 54px; }
.schritt::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  width: 42px; height: 47px;
  display: grid; place-items: center;
  background: var(--sand); color: var(--wald-t);
  border-radius: 50% 50% 2px 2px / 45% 45% 2px 2px;
  font: 800 16px/1 var(--schrift);
}
.schritt h3 { font-size: 19px; }
.schritt p { font-size: 16px; color: #C3D0C7; margin: 0; }
.band--wald .schritt h3 { color: #fff; }

/* ------------------------------------------------------------ Einsatzgebiet */
.landschaft + .landschaft { margin-top: 34px; padding-top: 34px;
                            border-top: 1px solid var(--linie); }
.landschaft-kopf {
  display: grid; gap: 6px 26px; align-items: baseline; margin-bottom: 18px;
}
@media (min-width: 820px) {
  .landschaft-kopf { grid-template-columns: minmax(220px, 300px) 1fr; }
}
.landschaft-kopf h3 {
  display: flex; align-items: center; gap: 11px; margin: 0; font-size: 21px;
}
.landschaft-kopf h3::before {
  content: ""; flex: 0 0 auto; width: 13px; height: 15px;
  background: var(--stein); border-radius: 50% 50% 1px 1px / 46% 46% 1px 1px;
}
.landschaft-kopf p { margin: 0; font-size: 15.8px; color: var(--tinte-m); }

.orte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
        list-style: none; }
.orte a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; border-radius: var(--r);
  background: var(--karte); border: 1px solid var(--linie);
  font-size: 15.6px; font-weight: 600; color: var(--tinte);
  text-decoration: none;
}
.orte a:hover { border-color: var(--stein); color: var(--stein-d);
                background: #fff; }
.orte a[aria-current] { background: var(--stein); border-color: var(--stein);
                        color: #fff; }
.orte .typ { font: 400 12.5px/1 var(--mono); color: var(--tinte-m);
             letter-spacing: .04em; }
.orte a:hover .typ { color: var(--stein-d); }
.orte a[aria-current] .typ { color: rgba(255,255,255,.75); }

/* Ortsteil-Chips, schlanker als die Ortskacheln */
.teile { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0;
         list-style: none; }
.teile li {
  padding: 5px 11px; border-radius: 100px; font-size: 14.4px;
  background: rgba(168,68,42,.07); color: #59403A;
}
.band--wald .teile li { background: rgba(255,255,255,.1); color: #D6E0D9; }

/* ------------------------------------------------------------------- Split */
.split { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center;
         grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split--bild-links > :first-child { order: 2; }
}
.split-bild { aspect-ratio: 4 / 3;
              border-radius: 22px 22px var(--r) var(--r); }

/* ------------------------------------------------------------------ Merkmale */
.merkmale { display: grid; gap: 18px 30px; grid-template-columns: 1fr;
            margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .merkmale { grid-template-columns: repeat(2,1fr); } }
.merkmal { display: flex; gap: 13px; }
.merkmal svg { flex: 0 0 auto; width: 23px; height: 23px; margin-top: 2px;
               color: var(--stein); }
.band--wald .merkmal svg, .auf-dunkel .merkmal svg { color: var(--sand); }
.merkmal b { display: block; margin-bottom: 3px; font-size: 16.6px; }
.merkmal span { font-size: 15.7px; color: var(--tinte-m); }
.band--wald .merkmal span { color: #B9C8BE; }

/* -------------------------------------------------------------- Zahlenband */
.zahlen { display: grid; gap: 1px; grid-template-columns: repeat(2,1fr);
          background: var(--linie); border: 1px solid var(--linie);
          border-radius: var(--r); overflow: hidden; }
@media (min-width: 780px) { .zahlen { grid-template-columns: repeat(4,1fr); } }
.zahl { background: var(--karte); padding: 20px 18px; }
.zahl b { display: block; font-size: clamp(25px, 3.2vw, 33px); font-weight: 800;
          letter-spacing: -.03em; color: var(--stein-d); line-height: 1.1; }
.zahl span { display: block; margin-top: 4px; font-size: 14.6px;
             color: var(--tinte-m); }

/* ------------------------------------------- Bausteine mit eigener Fläche
   Jeder Baustein, der seinen EIGENEN hellen Grund mitbringt, setzt auch
   seine eigene Schriftfarbe. Sonst erbt er sie vom umgebenden Band — und
   auf `.band--wald` (dunkelgrün, Schrift hell) wurden die FAQ-Fragen dann
   hell auf weißer Karte gesetzt und waren praktisch unlesbar. Die
   Antworttexte fielen nicht auf, weil sie ihre Farbe schon selbst setzten.

   Regel für alles Neue: Wer `background` setzt, setzt auch `color` — aus
   demselben Tokensatz wie die Fläche hinter dem Text. */
.karte, .faq details, .beitrag, .orte a, .zahl {
  color: var(--tinte);
}

/* ---------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden;
}
.faq summary { color: var(--tinte); }
.faq details[open] { border-color: var(--linie-s); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 52px 17px 20px;
  font-weight: 700; font-size: 17px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2.2px solid var(--stein); border-bottom: 2.2px solid var(--stein);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq-a { padding: 0 20px 19px; color: #43483F; font-size: 16.3px; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Notrufband */
.notruf { background: var(--stein); color: #fff; position: relative;
          overflow: hidden; }
/* Sandsteinbaenke als Textur — waagerecht, wie die Schichtung im Bruch */
.notruf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14px);
}
.notruf .wrap { position: relative; display: grid; gap: 24px;
                padding-block: clamp(40px, 5vw, 62px); }
@media (min-width: 860px) {
  .notruf .wrap { grid-template-columns: 1fr auto; align-items: center; }
}
.notruf h2 { margin-bottom: .3em; color: #fff; }
.notruf p { margin: 0; color: rgba(255,255,255,.9); max-width: 58ch; }
.notruf .btn--hell { font-size: 19px; padding: 16px 28px; }

/* ------------------------------------------------------------------ Breadcrumb */
.krume { border-bottom: 1px solid var(--linie); background: var(--papier); }
.krume ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
            margin: 0; padding: 11px 0; font-size: 14.3px;
            color: var(--tinte-m); }
.krume li + li::before { content: "›"; margin-right: 8px; color: var(--linie-s); }
.krume a { color: var(--tinte-m); text-decoration: none; }
.krume a:hover { color: var(--stein-d); text-decoration: underline; }

/* ------------------------------------------------------------------ Ortslage
   Sektionskopf links, Fliesstext rechts. Steht der Text allein unter dem
   Kopf, haengt er wegen `.prosa { max-width: 68ch }` an der linken Kante und
   laesst die halbe Bandbreite leer — der zweispaltige Aufbau fuellt sie,
   ohne die Zeilenlaenge zu verschlechtern. */
.lage { display: grid; gap: clamp(18px, 3vw, 44px); }
@media (min-width: 900px) {
  .lage { grid-template-columns: minmax(230px, 32%) minmax(0, 1fr);
          align-items: start; }
  .lage > .kopfzeile { margin-bottom: 0; position: sticky; top: 96px; }
}

/* -------------------------------------------------------------------- Prosa */
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: 1.5em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.6em; }
.prosa ul, .prosa ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.prosa li { margin-bottom: .45em; }
.prosa table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
               font-size: 16px; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px;
                       border-bottom: 1px solid var(--linie); }
.prosa th { background: #EFE7D8; font-weight: 700; }
.tabelle-rollt { overflow-x: auto; margin-bottom: 1.4em; }

/* Hinweiskasten */
.hinweis {
  border-left: 4px solid var(--stein); background: #F1E8D9;
  padding: 18px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 1.4em;
}
.hinweis b { display: block; margin-bottom: 5px; }
.hinweis p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Ratgeber */
.beitraege { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .beitraege { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .beitraege { grid-template-columns: repeat(3,1fr); } }
.beitrag {
  display: flex; flex-direction: column; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden;
}
.beitrag-bild { aspect-ratio: 16 / 10; }
.beitrag-text { padding: 20px; display: flex; flex-direction: column; flex: 1; }
/* h2, nicht h3: auf der Übersicht folgen die Beitragstitel direkt auf die
   H1 der Seite, ein h3 wäre dort ein Gliederungssprung. */
.beitrag h2 { font-size: 19.5px; margin-bottom: .4em; letter-spacing: -.012em; }
.beitrag h2 a { color: var(--tinte); text-decoration: none; }
.beitrag h2 a:hover { color: var(--stein-d); }
.beitrag p { font-size: 15.8px; color: #4A4F4A; margin-bottom: 14px; }
.beitrag-fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px;
                align-items: center; font-size: 13.6px; color: var(--tinte-m); }
.beitrag-fuss time { font-family: var(--mono); }
.rubrik {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: rgba(168,68,42,.1); color: var(--stein-d);
  font: 700 11.5px/1.4 var(--mono); letter-spacing: .08em;
  text-transform: uppercase;
}
.artikel-kopf { border-bottom: 1px solid var(--linie); }
.artikel-kopf .wrap { padding-block: clamp(32px, 4vw, 54px); }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
                font-size: 14.4px; color: var(--tinte-m); margin-bottom: 18px; }
.artikel-bild { margin: 0 0 clamp(26px, 4vw, 40px); aspect-ratio: 16 / 9;
                border-radius: 22px 22px var(--r) var(--r); }
.weiter { border-top: 1px solid var(--linie); }

/* --------------------------------------------------------------------- Fuss */
.fuss { background: var(--wald-t); color: #B7C6BB; font-size: 15.5px; }
.fuss .wrap { padding-block: clamp(44px, 5vw, 64px) 0; }
.fuss-raster { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .fuss-raster { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.fuss-marke { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.fuss-marke img { width: 46px; height: 38px; }
.fuss-marke .marke-wort b { color: #fff; }
.fuss-marke .marke-wort span { color: var(--sand); }
.fuss h4 { color: #fff; font-size: 13px; font-family: var(--mono);
           letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
           font-weight: 700; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; }
.fuss a { color: #B7C6BB; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-tel { display: block; font-size: 21px; font-weight: 800; color: #fff !important;
            letter-spacing: -.02em; margin-bottom: 4px; }
.fuss-mail { color: var(--sand) !important; }
.fuss-orte { margin-top: 40px; padding-top: 26px;
             border-top: 1px solid rgba(255,255,255,.12); }
.fuss-orte ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fuss-orte li { margin: 0; font-size: 14.6px; }
.fuss-recht {
  margin-top: 30px; padding-block: 20px 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 13.8px; color: #92A398;
}
.fuss-recht .rechts { margin-left: auto; }

/* --------------------------------------------------------------- Rechtstexte */
.legal { max-width: 74ch; }
.legal h2 { font-size: 23px; margin-top: 1.9em; }
.legal h2:first-child { margin-top: 0; }
.legal address { font-style: normal; margin: 0 0 1.1em; line-height: 1.7; }
.legal__table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
                font-size: 16px; }
.legal__table th, .legal__table td { text-align: left; padding: 9px 12px;
                                     border-bottom: 1px solid var(--linie); }
.legal__table th { background: #EFE7D8; }

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