/* =============================================================
   WAZV Apfelstädt-Ohra — WordPress-/Elementor-Anpassungen
   Ergänzt das Design-System „Klarwasser" (main.css). Alle Werte
   kommen aus den Tokens, keine rohen Farben oder Sondergrößen.
   ============================================================= */

/* ---------- Elementor: randloser Canvas ----------
   Die Widgets bringen Sektion, Container und Abstände selbst mit.
   Der Elementor-Container braucht nur volle Breite, Lücke 0, Padding 0 —
   diese Regeln fangen die Standard-Abstände zusätzlich ab. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }
.e-con.e-parent:has(> .e-con-inner > .elementor-widget-wazv_hero),
.e-con.e-parent:has(> .elementor-widget[class*="wazv_"]) { --padding-block-start: 0; --padding-block-end: 0; }
.elementor-widget[class*="wazv_"] { width: 100%; }
.elementor-widget[class*="wazv_"] > .elementor-widget-container { width: 100%; }

/* ---------- Hero: Überschrift unabhängig vom Tag ----------
   Die H-Ebene ist frei wählbar (SEO); die Optik bleibt dieselbe. */
.hero .hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  max-width: 17ch;
  margin: 0 0 var(--sp-5);
}

/* ---------- Sektionskopf: wählbare H-Ebene ----------
   main.css stylt .section-head h2 — dieselbe Optik für jede Ebene. */
.section-head > div > h1,
.section-head > div > h3,
.section-head > div > h4,
.section-head > div > h5,
.section-head > div > h6,
.section-head > div > div,
.section-head > div > p:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 var(--sp-2);
}
.section-head > div > p:not(:first-child) { color: var(--ink-600); max-width: var(--w-prose); margin: 0; }

/* ---------- Titelrollen ----------
   Drei Rollen statt drei zufälliger H3-Fassungen. Die Rolle bestimmt die
   Optik, die HTML-Ebene bleibt frei wählbar und richtet sich nach der
   Dokumentgliederung. Das ersetzt die früheren Blöcke, die jede Ebene
   einzeln nachziehen mussten — H1, H5 und H6 fielen dort durchs Raster.

     .title-block  Blocktitel — Gruppenüberschriften, Zeitstrahl
     .title-card   Kartentitel — Karten, Kacheln, Schritte
     .title-row    Zeilentitel — Einträge in Listen                    */
.title-block,
.title-card,
.title-row {
  color: var(--ink-900);
}
.title-block {
  font-family: var(--font-display);
  font-size: var(--fs-block);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-3);
}
.title-card {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: normal;
  margin: 0 0 var(--sp-2);
}
/* Der Zeilentitel steht direkt neben Fließtext derselben Schrift. Damit
   der Unterschied nicht allein am Schnitt hängt, ist er zwei Stufen
   größer und bekommt Luft nach unten. */
.title-row {
  font-family: var(--font-text);
  font-size: var(--fs-row);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: normal;
  margin: 0 0 var(--sp-1);
}

/* ---------- Kennzahlen einzeln (außerhalb des Heros) ---------- */
.stats-standalone { border-top: 0; }

/* ---------- Sektionen mit wenig Inhalt ---------- */
.section-head-only { padding-block-end: 0; }
.section-head-only .section-head { margin-bottom: 0; }
.section-buttons { padding-block: var(--sp-8); }
.section-value-card .value-card { max-width: 420px; }

/* ---------- Link- & Downloadliste ----------
   Jede Zeile ist eine Karte in der Formensprache der Website:
   Kontur, Radius, Icon in getönter Kachel. Beim Zeigen reagieren
   Kontur und Schatten — wie bei den Service-Kacheln. */
.linklist { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
.linklist a {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-900); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.linklist a:hover {
  text-decoration: none;
  border-color: var(--blue-600);
  box-shadow: var(--shadow-1);
}
.linklist a:hover .linklist-text b,
.linklist a:hover .linklist-title { text-decoration: underline; text-underline-offset: 3px; }
.linklist a:hover .linklist-arrow { transform: translateX(4px); }
.tinted .linklist a { box-shadow: var(--shadow-1); }
.linklist .icon-tile {
  flex: none;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-50);
  border-radius: var(--r-sm);
  color: var(--blue-600);
}
.linklist .icon-tile svg { width: 24px; height: 24px; }
.linklist-text { flex: 1 1 auto; min-width: 0; }
.linklist-text b { display: block; font-weight: 600; }
.linklist-text .linklist-title { display: block; }
.linklist-text small { display: block; font-size: var(--fs-small); color: var(--ink-600); }
.linklist .linklist-arrow { flex: none; color: var(--blue-600); transition: transform .15s ease; }
.linklist .ext-icon { flex: none; width: 18px; height: 18px; color: var(--blue-600); }

/* ---------- Gebietskarte ----------
   Die Karte bekommt mehr Raum als der Text: Das 50/50-Raster aus
   main.css wird auf dem Desktop zugunsten der Karte verschoben.
   Gestapelt (unter dem Text) begrenzt eine großzügige feste Breite. */
.verband-grid .area-card { max-width: 100%; margin-inline: auto; }
@media (min-width: 1241px) {
  .verband-grid {
    /* Karte ~64 % der Breite statt 50 % — und die sehr große Lücke
       aus main.css (--sp-14) verkleinert, damit der gewonnene Platz
       in der Karte landet und nicht im Zwischenraum. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
    gap: var(--sp-10);
  }
}
@media (max-width: 1240px) {
  /* Ab hier steht die Karte unter dem Text (Umbruchpunkt aus main.css) —
     sie nutzt dann die volle Inhaltsbreite. Ein früherer 760px-Deckel
     ließ sie klein und mittig stehen — genau der „Platz drumherum". */
  .verband-grid .area-card { max-width: 100%; }
}

/* ---------- Fäkalschlamm: Ablauf + Termin-Karte ----------
   Links der nummerierte Ablauf (Kreis-Nummern mit Verbindungslinie —
   dieselbe Sprache wie die Spaltenlinien der Kennzahlenleiste), rechts
   die Termin-Karte in der Form der Kennwert-Karte. */
.fs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-14);
  /* Die Termin-Karte steht mittig zur Höhe der linken Spalte —
     wie in den übrigen Zweispaltern (water-grid, verband-grid). */
  align-items: center;
}
.fs-copy > p { max-width: var(--w-prose); }
.fs-steps {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  counter-reset: fs-step;
  display: grid;
  gap: var(--sp-6);
}
.fs-steps li {
  position: relative;
  padding-left: calc(40px + var(--sp-4));
  counter-increment: fs-step;
}
.fs-steps li::before {
  content: counter(fs-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  border: var(--bw) solid var(--blue-100);
  color: var(--blue-900);
  font-family: var(--font-display);
  font-weight: 700;
}
/* Verbindungslinie zwischen den Nummern — endet vor dem nächsten Kreis */
.fs-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: calc(-1 * var(--sp-6) + 6px);
  width: 2px;
  background: var(--line);
}
.fs-steps li > p { margin: 0; color: var(--ink-600); font-size: var(--fs-small); max-width: var(--w-prose); }
/* Die Rufnummer ist die Aktion der Karte — Zahl statt Knopf, ohne Linkfarbe.
   Eine ganze Rufnummer trägt die Kennwert-Größe nicht; sie bekommt die
   Stufe der Kennzahlenleiste. */
.fs-card .value { font-size: var(--fs-num-lg); }
.fs-card .value a { color: inherit; text-decoration: none; }
.fs-card .person-line { margin-top: var(--sp-2); }
.fs-card .hint { margin-top: var(--sp-5); }
/* Rückfragen-Zeile: zweiter Kontakt, mit Trennlinie abgesetzt */
.fs-card .fs-alt {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--line);
}
.fs-card .fs-alt-label {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-600);
}
@media (max-width: 1240px) {
  .fs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
}

/* ---------- Portal-Anleitung (z. B. Schachtgenehmigung) ----------
   Die Schritte stehen als nummerierte Karten im Raster — dieselbe
   Grundform wie die Service-Kacheln, aber ohne Hover: Sie sind
   Anleitung, kein Ziel. Darunter Hinweis-Box und Kontakt-Karte. */
.portal-steps {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  counter-reset: po-step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.portal-steps li {
  counter-increment: po-step;
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.portal-steps li::before {
  content: counter(po-step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--blue-50);
  border: var(--bw) solid var(--blue-100);
  color: var(--blue-900);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.portal-steps li > p { margin: 0; color: var(--ink-600); font-size: var(--fs-small); }
/* Auf getönter Fläche heben sich die Karten mit Schatten ab */
.tinted .portal-steps li,
.tinted .portal-contact { box-shadow: var(--shadow-1); }
.portal-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.portal-note {
  display: flex;
  gap: var(--sp-3);
  background: var(--blue-50);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.portal-note > .icon { width: 22px; height: 22px; color: var(--blue-600); flex: none; margin-top: 2px; }
.portal-note-title { margin: 0 0 var(--sp-1); font-weight: 600; color: var(--ink-900); }
.portal-note p:not(.portal-note-title) { margin: 0; color: var(--ink-600); font-size: var(--fs-small); }
.portal-contact {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.portal-contact-label,
.abschluss-label {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-600);
}
.portal-contact-name { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--ink-900); }
.portal-contact .person-line { margin-top: var(--sp-1); }
@media (max-width: 980px) {
  .portal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .portal-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Meldungen & Wasserbote (Einzel- und Archivseiten) ----------
   .prose steuert nur die Typografie. Die Breite kommt vom .container
   auf demselben Element — dieselbe Inhaltsbreite wie Header und Footer.
   Hier deshalb bewusst KEIN max-width: es würde die Container-Begrenzung
   überschreiben und den Text über die volle Viewport-Breite laufen lassen. */

/* ---------- Seiten-Hero ----------
   Dieselbe randlose dunkle Fläche wie der Start-Hero (.hero aus
   main.css trägt Farbe und Fokusring), nur flacher — für Meldungen
   und Wasserbote. Die Kopfzeile nutzt die volle Inhaltsbreite. */
.page-hero .hero-inner {
  padding-block: clamp(3.25rem, 6.5vw, 5rem) clamp(2.75rem, 5vw, 4rem);
  max-width: none;
}
.page-hero .news-meta {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: 0 0 var(--sp-4);
}
.page-hero .badge { color: var(--on-dark); }
/* Datums-Pill im dunklen Hero: gläserne Fläche in den Auf-dunkel-Tokens
   (wie btn-on-dark), Kalender-Icon im Aqua-Akzent. Die Kategorie-Eyebrow
   davor ist bewusst weg — die Karte im Archiv trägt sie bereits. */
.page-hero .news-date {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-4);
  background: var(--on-dark-fill);
  border: var(--bw) solid var(--on-dark-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-tiny); font-weight: 600;
  color: var(--on-dark-strong);
  line-height: 1.35;
}
.page-hero .news-date .icon { width: 15px; height: 15px; color: var(--aqua-400); }
/* Seitentitel: breiter als die 17ch des Start-Heros (.hero h1 in main.css
   gewinnt sonst über die Spezifität) — ein Wort wie
   „Barrierefreiheitserklärung" steht in einer Zeile. Reicht die Zeile auf
   dem Telefon trotzdem nicht, trennt der Browser mit Silbentrennung statt
   irgendwo im Wort. */
.hero .page-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-page);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-dark);
  max-width: 32ch;
  margin: 0;
  hyphens: auto;
}
.page-hero-lead {
  font-size: var(--fs-lead);
  color: var(--on-dark-strong);
  max-width: 56ch;
  margin: var(--sp-4) 0 0;
}
.page-hero .hero-actions { margin-top: var(--sp-7); }

/* Artikel-Typografie: Inhalte aus dem Editor im Design-System */
.prose h2, .prose h3 { margin-top: var(--sp-10); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--blue-600); }
/* Links im Fließtext immer unterstrichen — Farbe allein reicht nicht
   (WCAG 1.4.1). Das :not() hebt die Spezifität über „.elementor a" aus
   Elementors frontend.css: Das lädt nach dem Theme und nahm die Linie
   sonst wieder weg. Buttons und Linklisten-Karten bleiben ohne. */
.prose a:not(.btn, .linklist a) { text-decoration: underline; text-underline-offset: 3px; }
/* Lange Zeichenketten ohne Trennstelle (E-Mail-Adressen, URLs) brechen
   notfalls im Wort um, statt bei 320 px mit vergrößerten Textabständen
   (WCAG 1.4.10/1.4.12) seitlich herauszulaufen. „anywhere", nicht
   „break-word": Nur so schrumpft auch die Mindestbreite, und die zählt
   in Elementors Flex-Containern. Tabellenzellen behalten ganze Wörter —
   die Tabelle wischt auf dem Telefon für sich seitlich. */
.prose { overflow-wrap: anywhere; }
.prose :is(th, td) { overflow-wrap: break-word; }
.prose blockquote {
  margin: var(--sp-7) 0; padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--blue-600);
  background: var(--mist); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--sp-10) 0; }
.prose img { border-radius: var(--r-md); height: auto; }
.prose figure { margin: var(--sp-7) 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--ink-600); margin-top: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-7) 0; font-size: var(--fs-small); }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--line); text-align: left; }
.prose th { font-family: var(--font-display); font-weight: 700; }
.prose .wp-block-file a:first-child { font-weight: 600; }
.prose > .news-meta { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.prose .news-date { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-tiny); color: var(--ink-600); }
.prose .news-date .icon { width: 15px; height: 15px; }
.prose-media { margin: 0 0 var(--sp-6); }
.prose-media img { border-radius: var(--r-md); height: auto; }
.prose-back { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--bw) solid var(--line); }
.lead-copy { font-size: var(--fs-lead); color: var(--ink-600); max-width: var(--w-prose); }

/* Kategorie-Filter im Meldungen-Archiv */
.filter-list {
  list-style: none; margin: 0 0 var(--sp-8); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.load-status {
  margin: var(--sp-7) 0 0; text-align: center;
  font-size: var(--fs-small); color: var(--ink-600);
}
#wazv-meldungen-sentinel { height: 1px; }

/* Jahres-Zwischentitel im Wasserbote-Archiv */
.linklist-year { margin: var(--sp-8) 0 var(--sp-4); }
.linklist + .linklist-year { margin-top: var(--sp-8); }

/* Blättern (the_posts_pagination) */
.navigation.pagination { margin-top: var(--sp-10); }
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center;
}
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--sp-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-900); text-decoration: none; font-weight: 600;
}
.navigation.pagination a.page-numbers:hover { border-color: var(--blue-600); color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.navigation.pagination .page-numbers.current { background: var(--blue-600); border-color: var(--blue-600); color: var(--on-dark); }
.navigation.pagination .page-numbers.dots { border: 0; }
.screen-reader-text + .nav-links { margin-inline: auto; }

/* ---------- Header-CTA: Symbole mittig zum Text ----------
   Das Extern-Symbol in der Beschriftung vergrößert deren Zeilenbox
   nach unten (vertical-align) — der Button zentriert dann eine schiefe
   Box und das vorangestellte Icon sitzt sichtbar zu hoch. Als
   Flex-Zeile liegen Text und Symbole auf einer Mittelachse. */
.btn .btn-label {
  display: inline-flex;
  align-items: center;
}
.btn .btn-label .ext-icon { vertical-align: 0; }

/* ---------- Navigation: aktueller Bereich ----------
   Der Hauptpunkt ist markiert, sobald die aktuelle Seite zu ihm gehört —
   dieselbe Behandlung wie der Hover-/Offen-Zustand aus main.css, nur
   dauerhaft. Im Mega-Menü ist zusätzlich der konkrete Link markiert. */
.nav-item > a.is-current,
.nav-item > button.is-current {
  background: var(--blue-50);
  color: var(--blue-700);
}
.mega ul a.is-current {
  background: var(--blue-50);
  color: var(--blue-700);
}
.mega ul a.is-current small { color: var(--blue-700); }

/* ---------- Links: was unterstrichen wird ----------
   Grundsatz steht in main.css: Textlinks sind dauerhaft unterstrichen.

   Hier stehen die Ausnahmen. Ein Link, der eine ganze Fläche umschließt
   — Karte, Kachel, Listeneintrag, Menüpunkt — enthält mehrere Elemente:
   Badge, Datum, Titel, Teaser, Pfeil. Eine Unterstreichung am <a> träfe
   alles davon; bei Flex-Flächen wirkt sie gar nicht, bei Block-Flächen
   (Mega-Menü) unterstrich sie auch die Beschreibungszeile. Diese Flächen
   sind über Rahmen, Hintergrund und Pfeil längst als klickbar erkennbar.
   Unterstrichen wird deshalb gezielt ihr Titel bzw. ihre Linkzeile — und
   zwar beim Überfahren wie beim Tastaturfokus. */
.btn,
.brand,
.skip-link,
.nav-item > a,
.mega ul a,
.news-card,
.tile,
.linklist a,
.spotlight-item,
.chat-quicklink,
.chat-tel,
.bereichsleiste a,
.notdienst-tel,
.footer-social a,
.navigation.pagination a.page-numbers,
.fs-card .value a,
.breadcrumb a,
.site-footer a {
  text-decoration: none;
}
/* Brotkrume und Footer: Auf Elementor-Seiten setzte das Kit die
   Unterstreichung ohnehin zurück, in den Archiv- und Einzelseiten-
   Templates stand sie — jetzt überall gleich: ohne, beim Zeigen mit. */

/* Bedienelemente ohne eigenen Titel: die Beschriftung selbst. */
.btn:hover,
.btn:focus-visible,
.chat-quicklink:hover,
.chat-quicklink:focus-visible,
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible,
.breadcrumb a:hover,
.breadcrumb a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Das Facebook-Symbol ist eine Fläche ohne Text — da gibt es nichts zu unterstreichen. */
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible { text-decoration: none; }
.notdienst-tel:hover,
.notdienst-tel:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Schaltflächen in Link-Optik: „Cookie-Einstellungen" im Footer
   (.link-btn) und im Fließtext der Datenschutzerklärung
   (.wbx-open-settings). Schaltflächen, weil sie einen Dialog öffnen
   statt irgendwohin zu führen — aussehen sollen sie wie die Links um
   sie herum. */
.link-btn,
.wbx-open-settings {
  display: inline;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  font: inherit; letter-spacing: inherit; text-align: inherit;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
  cursor: pointer;
}
.link-btn:hover,
.wbx-open-settings:hover { text-decoration-thickness: 2px; }
/* Im Footer wie die Links daneben: hell, Linie erst beim Zeigen. */
.site-footer :is(.link-btn, .wbx-open-settings) { color: var(--on-dark-strong); text-decoration: none; }
.site-footer :is(.link-btn, .wbx-open-settings):hover,
.site-footer :is(.link-btn, .wbx-open-settings):focus-visible {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Absicherung für Fließtext aus Elementor: manche Kits setzen
   text-decoration auf Links zurück. Bewusst eng gefasst auf Text- und
   Überschriften-Widgets — eine Regel auf „.elementor a" würde die
   Ausnahmen oben aushebeln, weil alle WAZV-Widgets darin liegen. */
.elementor-widget-text-editor a,
.elementor-widget-heading a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Flächen mit eigenem Titel: nur der Titel, nie der Fließtext daneben. */
.nav-item > a:hover .nav-link-title,
.nav-item > a:focus-visible .nav-link-title,
.mega ul a:hover .nav-link-title,
.mega ul a:focus-visible .nav-link-title,
.news-card:hover .link-arrow,
.news-card:focus-visible .link-arrow,
.tile:hover .link-arrow,
.tile:focus-visible .link-arrow,
.linklist a:focus-visible .linklist-text b,
.linklist a:focus-visible .linklist-title,
.spotlight-item:hover > span > b,
.spotlight-item:focus-visible > span > b,
.spotlight-item.is-active > span > b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Unterseiten-Widgets ----------
   Komponenten für den Relaunch der Unterseiten — alles aus den
   „Klarwasser"-Tokens, keine rohen Werte. */

/* Textabschnitt: optionale Lesebreite */
.prose-narrow { max-width: var(--w-prose); }

/* Ansprechpartner: Bereichs-Gruppen mit Personenkarten */
.team-group-title {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw) solid var(--line);
}
.team-group-title:first-of-type { margin-top: 0; }
.team-grid {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.person-card {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
/* Auf getönter Fläche wie die Kennwert-Karte: Kontur bleibt, dazu ein
   weicher Schatten — so heben sich die Karten sauber vom Grau ab. */
.tinted .person-card { box-shadow: var(--shadow-1); }
/* Der Kartenname trägt .title-card; hier bleibt nur die Feinjustierung
   im engen Kartenraster. */
.person-card .title-card { margin: 0 0 var(--sp-1); }

/* ---------- Porträtraster ----------
   Dieselbe Karte wie im Personenraster, sie trägt hier nur ein Bild
   statt Kontaktzeilen — deshalb steht hier ausschließlich, was das Bild
   betrifft. Doppelte Klasse, weil .team-grid weiter unten die volle
   Containerbreite setzt: Bei 1400 px wären die Hochformate über 400 px
   breit und je Karte gut 600 px hoch. Auf mittlerer Breite passen drei
   Porträts nebeneinander, ohne die Seite zu erschlagen. */
.team-grid.portraet-grid { max-width: var(--w-module); }
.portraet-card { padding: 0; gap: 0; overflow: hidden; }
.portraet-card picture { display: block; }
/* Fester Ausschnitt 3:4 für jede Karte — die Vorlagen sind
   unterschiedlich groß, das Raster darf davon nichts merken. Die Bilder
   liegen bereits schwarzweiß auf der Platte; kein CSS-Filter, sonst
   stünde ein später ersetztes Bild farbig daneben. */
.portraet-bild {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
  background: var(--mist);
}
.portraet-text {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
/* Mehrere Amtszeiten stehen untereinander in derselben Karte — wer
   zweimal im Amt war, taucht nicht zweimal im Raster auf. */
.portraet-zeiten {
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-small); color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
.portraet-zeiten li + li { margin-top: 2px; }
/* Die amtierende Person: nur Textfarbe und Gewicht. Kein Etikett, kein
   Rahmen, keine Farbfläche — sie soll auffindbar sein, nicht
   ausgezeichnet. */
.portraet-zeiten.is-amtierend { color: var(--ink-900); font-weight: 600; }
/* Eigene Stufen statt der des Personenrasters: Dort steht Text, hier
   stehen Hochformate. Bei den Stufen von .team-grid wären die Porträts
   auf dem Tablet 470 px breit, und einspaltig auf dem Telefon würde das
   Raster aus sechs Karten über 5000 px lang. Also länger bei drei
   Spalten bleiben und nie unter zwei fallen. */
@media (max-width: 1240px) {
  .team-grid.portraet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .team-grid.portraet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portraet-text { padding: var(--sp-4); }
}

/* Installateurverzeichnis & Ortsinstallateurausschuss */
.installer-badge {
  display: inline-flex; align-self: flex-start;
  padding: 2px 10px; margin-bottom: var(--sp-2);
  background: var(--blue-50); color: var(--blue-700);
  border-radius: 999px;
  font-size: var(--fs-tiny); font-weight: 700;
}
.installer-badge.is-vorsitz { background: var(--blue-600); color: var(--on-dark); }
.oia-intro { max-width: var(--w-prose); margin-bottom: var(--sp-6); }
.person-role { font-size: var(--fs-small); color: var(--ink-600); margin-bottom: var(--sp-2); }
.person-line {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small);
}
.person-line .icon { width: 15px; height: 15px; color: var(--blue-600); flex: none; }
.person-line a { overflow-wrap: anywhere; }
/* Explizit, nicht über die Basisregel: Elementors Kit-Styles überstimmen
   a:hover sonst mit höherer Spezifität. */
.person-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Akkordeon: natives details/summary */
.acc { display: grid; gap: var(--sp-3); }
.acc-item {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
}
.tinted .acc-item { box-shadow: var(--shadow-1); }
.acc-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  cursor: pointer; list-style: none;
}
.acc-summary::-webkit-details-marker { display: none; }
.acc-title { margin: 0; font-size: var(--fs-row); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; }
.acc-chev { flex: none; color: var(--blue-600); transition: transform var(--dur-base) var(--ease); }
.acc-item[open] > .acc-summary .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 0 var(--sp-5) var(--sp-5); }
.acc-body > :last-child { margin-bottom: 0; }

/* Zeitleiste: Linie mit Punkten */
/* ---------- Chronik: Zeitleiste, zweispaltig ----------
   Jahr links, Inhalt rechts. Damit nutzt die Chronik die mittlere
   Breite: Die Jahre stehen in einer eigenen Spalte untereinander und
   lassen sich abfahren, ohne jede Station zu lesen. Der Fließtext
   behält trotzdem die Lesebreite — breit ist der Rahmen, nicht die
   Zeile.
   Bis 6.7 lief der Strahl einspaltig auf Lesebreite. Das war für den
   reinen Textstrahl richtig; mit Bild und Kennzahl je Station ist es
   zu eng geworden. */
.timeline {
  --tl-col: 7rem;          /* Jahresspalte */
  --tl-gap: var(--sp-6);   /* Jahr → Linie → Inhalt */
  list-style: none; margin: 0; padding: 0;
  max-width: var(--w-module);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-col) minmax(0, 1fr);
  column-gap: calc(var(--tl-gap) * 2);
  padding-bottom: var(--sp-8);
  margin-left: var(--sp-2);
}
.timeline-item:last-child { padding-bottom: 0; }
/* Linie und Punkt sitzen auf der Spaltengrenze, nicht an der Kante des
   Elements — deshalb absolut gesetzt statt als border-left. */
.timeline-item::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--tl-col) + var(--tl-gap));
  width: 2px; background: var(--line);
}
.timeline-item::after {
  content: "";
  position: absolute; top: 6px;
  left: calc(var(--tl-col) + var(--tl-gap) - 5px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-600);
  border: 2px solid var(--paper);
}
/* Rechtsbündig an die Linie, Ziffern in fester Breite: So stehen 1992
   und 2014 exakt untereinander. Keine Versalien mehr — als eigene
   Spalte ist das Jahr eine Angabe, keine Rubrik, und ein „seit 2016"
   würde in Versalien schreien. */
.timeline-zeit {
  grid-column: 1;
  text-align: right;
  font-size: var(--fs-row); font-weight: 700; color: var(--blue-700);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-snug);
}
.timeline-body { grid-column: 2; min-width: 0; }
.timeline-titel { margin: 0 0 var(--sp-2); }
.timeline-body p { margin: 0; color: var(--ink-600); max-width: var(--w-prose); }
/* Die Zahl, die die Station trägt: kein Kasten, keine zweite Kontur
   neben der Strahllinie — nur eine Stufe größer und in der
   Auszeichnungsschrift. */
.timeline-body .timeline-kennzahl { margin-top: var(--sp-4); }
.timeline-kennzahl b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-block); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--blue-700);
}
.timeline-kennzahl span {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-small); color: var(--ink-600);
}
/* Das Stationsbild bleibt auf Lesebreite: In der breiten Inhaltsspalte
   würde ein Foto über die volle Weite die Station überstrahlen. */
.timeline-bild { margin: var(--sp-4) 0 0; max-width: var(--w-prose); }
.timeline-bild img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
}

/* Bild & Text */
.media-text {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-14); align-items: center;
}
.media-text.is-flipped .media-text-media { order: 2; }
.media-text-media { margin: 0; }
.media-text-media img { border-radius: var(--r-lg); height: auto; width: 100%; object-fit: cover; }
.media-text-copy .hero-actions { margin-top: var(--sp-6); }

/* Tabelle */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.data-table th, .data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw) solid var(--line);
  text-align: left; white-space: nowrap;
}
.data-table td:first-child, .data-table th:first-child { white-space: normal; }
.data-table thead th {
  font-family: var(--font-display); font-weight: 700;
  border-bottom-width: 2px; border-bottom-color: var(--ink-900);
}
.data-table tbody tr:hover { background: var(--mist); }
.tinted .data-table tbody tr:hover { background: var(--paper); }
.table-caption { font-size: var(--fs-tiny); color: var(--ink-600); margin: var(--sp-3) 0 0; }

/* Responsive für die neuen Komponenten */
@media (max-width: 1240px) {
  .media-text { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .media-text.is-flipped .media-text-media { order: 0; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ohri: formatierte KI-Antworten ----------
   Der Chat rendert eine kleine Markdown-Teilmenge (fett, Listen,
   Links, Absätze). Enge Abstände — es bleibt eine Sprechblase. */
.chat-msg.bot p { margin: 0 0 .55em; }
.chat-msg.bot p:last-child { margin-bottom: 0; }
.chat-msg.bot ul,
.chat-msg.bot ol { margin: .1em 0 .55em; padding-left: 1.25em; }
.chat-msg.bot ul:last-child,
.chat-msg.bot ol:last-child { margin-bottom: 0; }
.chat-msg.bot li { margin-bottom: .25em; }
.chat-msg.bot li:last-child { margin-bottom: 0; }
.chat-msg.bot li::marker { color: var(--blue-600); }
.chat-msg.bot strong { font-weight: 700; }
/* Lange URLs sprengen sonst die Sprechblase */
.chat-msg.bot a { overflow-wrap: anywhere; }

/* Schnelllinks: Links aus der KI-Antwort zusätzlich als Buttons
   unter dem Text — ein Tipp und man ist auf der Seite. */
.chat-msg.bot .chat-quicklinks {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.chat-quicklink {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 6px 12px;
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-tiny); font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
  overflow-wrap: normal;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.chat-quicklink:hover {
  border-color: var(--blue-600);
  background: var(--blue-50);
}
.chat-quicklink .icon { width: 14px; height: 14px; flex: none; color: var(--blue-600); }

/* ---------- Bildnachweis ----------
   Kleines Overlay unten rechts auf dem Bild — gepflegt am Bild in der
   Mediathek, angezeigt in Bild & Text, im Hero und bei Beitragsbildern. */
.media-text-media,
.timeline-bild,
.prose-media { position: relative; }
.img-credit {
  position: absolute; right: 8px; bottom: 8px;
  font-size: var(--fs-tiny); line-height: 1.3;
  color: var(--on-dark);
  background: rgba(10, 30, 70, .72);   /* blue-900, halbtransparent */
  padding: 3px 9px; border-radius: 999px;
  max-width: calc(100% - 16px);
  overflow-wrap: anywhere;
}
.img-credit a { color: var(--on-dark); }
.img-credit a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Im Foto-Hero sitzt der Nachweis oben rechts über dem Schleier —
   unten läge er auf der Kennzahlenleiste. */
.hero .img-credit { z-index: 2; right: 12px; top: 12px; bottom: auto; }

/* ---------- Footer-Spaltentitel ----------
   Als <span> statt <h4>: Die Footer-Navigation gehört nicht in die
   SEO-Überschriftenstruktur. Optik wie .site-footer h4 aus main.css. */
.site-footer .footer-title {
  display: block;
  font-family: var(--font-text); color: var(--on-dark);
  font-size: var(--fs-small); font-weight: 700;
  margin: 0 0 var(--sp-4);
}

/* ---------- Bilder: CI-Radius überall ----------
   Jedes Inhaltsbild trägt die Kartenrundung. Elementors frontend.css
   setzt auf .elementor img einen eigenen border-radius-0-Reset —
   deshalb steht die Regel hier zusätzlich mit höherer Spezifität
   (body .elementor img), unabhängig von der Ladereihenfolge.
   Ausnahmen: Logos, das randlose Hero-Foto, der Zeitungskopf und das
   Porträt in der Vorsitzenden-Karte (die Karte rundet dort selbst über
   overflow: hidden — sonst stünden unten im Bild Ecken, die im Weiß
   der Karte enden). */
img,
body .elementor img { border-radius: var(--r-md); }
.brand img,
.footer-brand img,
.hero-photo,
body .elementor .hero-photo,
.news-kopf,
body .elementor .news-kopf,
.portraet-bild,
body .elementor .portraet-bild { border-radius: 0; }

/* ---------- WordPress-Grundlagen ---------- */
.wp-block-image img, .attachment-full { height: auto; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================
   MOBIL
   Ergänzt die Umbrüche aus main.css: vollflächiges Menü,
   CTA-Korrektur und Feinschliff der Theme-Komponenten.
   ============================================================= */
@media (max-width: 1300px) {
  /* ---------- Vollflächiges Mobilmenü (Umschaltpunkt 1300 px, synchron
     zu main.css und main.js; die Seitenlayouts wechseln bei 1240 px) ----------
     Eine Schicht von der Header-Unterkante bis zum Bildschirmende.
     Bewusst absolut am Header verankert (top: 100 %) statt fixed —
     fixed kann von transformierten Vorfahren „eingefangen" werden.
     Die Höhe misst main.js beim Öffnen (--wazv-nav-top = Unterkante
     des Headers), weil sie variiert: mit Topbar, ohne, eingerastet.
     Die Seite dahinter ist über body.nav-locked gesperrt. */
  /* Anker des Menüs ist der Header selbst. Positioniert oder
     transformiert fremdes CSS (Builder, Plugin) die Kopfzeile, wird
     sonst die mittlere Rasterzelle zum Bezugsrahmen und das Menü
     klemmt als schmale Spalte zwischen Logo und Aktionen — deshalb
     werden Ankerkette und Rasterplatz hier hart zurückgesetzt. */
  .site-header .header-inner {
    position: static !important;
    transform: none !important;
    filter: none !important;
  }
  .site-header .main-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    grid-area: auto;
    justify-self: auto;
    z-index: 5;
    height: calc(100dvh - var(--wazv-nav-top, 112px));
    max-height: none;
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 0;
    box-shadow: none;
    margin: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-12);
  }

  /* Ruhige Zeilen mit großen Tippzielen */
  .nav-item > a,
  .nav-item > button {
    padding: var(--sp-5) var(--sp-1);
  }

  /* Der Pfeil zeigt den Zustand: offen = gedreht */
  .nav-item > button .chev {
    transition: transform var(--dur-base) var(--ease);
  }
  .nav-item.is-open > button .chev { transform: rotate(180deg); }

  /* Aufgeklappter Bereich: Links als eigene Tippflächen */
  .mega ul a { padding: var(--sp-3); }

  /* Aktueller Bereich: Akzentkante statt Fläche — passt zur Listenform */
  .nav-item > a.is-current,
  .nav-item > button.is-current {
    background: none;
    box-shadow: inset 3px 0 0 var(--blue-600);
    color: var(--blue-700);
    padding-left: var(--sp-4);
  }
}

@media (max-width: 640px) {
  /* Korrektur: main.css blendet die Beschriftung des Zählerstand-Knopfs
     hier aus (nur Symbol, 44 px). Die btn-label-Flexregel weiter oben
     hatte das überstimmt — der Text quetschte sich in den Knopf. */
  .header-cta .btn-label { display: none; }

  /* Die Suche steht nicht mehr im Menü — die Lupe bleibt deshalb auch
     auf dem Telefon im Header (main.css blendet sie dort sonst aus). */
  .header-actions .icon-btn[data-open-search] { display: inline-flex; }

  /* Kategorie-Filter: wischbare Zeile statt mehrzeiliger Knopf-Wolke */
  .filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-list .btn { white-space: nowrap; }

  /* Karten-Listen kompakter, bleiben aber gut tippbar */
  .linklist a { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .linklist .icon-tile { width: 40px; height: 40px; }
  .linklist .icon-tile svg { width: 20px; height: 20px; }

  /* Artikel-Tabellen wischen seitlich, statt die Seite zu sprengen */
  .prose table { display: block; overflow-x: auto; }

  /* Seiten-Hero der Unterseiten etwas flacher */
  .page-hero .hero-inner { padding-block: var(--sp-10) var(--sp-8); }

  /* Zeitleiste einspaltig: Jahr über den Inhalt, Linie zurück an den
     linken Rand. Für zwei Spalten ist hier kein Platz. */
  .timeline-item {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-left: var(--sp-6);
  }
  .timeline-zeit { grid-column: 1; text-align: left; margin-bottom: var(--sp-1); }
  .timeline-body { grid-column: 1; }
  .timeline-item::before { left: 0; }
  .timeline-item::after { left: -5px; }

  /* Akkordeon: Tippfläche über die volle Zeile, etwas kompakter */
  .acc-summary { padding: var(--sp-4); }
}

/* Adminbar: Sticky-Header darunter beginnen lassen */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
/* Unter 600 px scrollt WordPress die Adminleiste mit weg (position:
   absolute) — ein fester Abstand ließe beim Scrollen eine Lücke über
   dem Header. Gäste ohne Adminleiste sind davon nie betroffen. */
@media (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}


/* =============================================================
   Inhaltsbreiten und Sektionsabstände
   ============================================================= */

/* Strukturierte Bausteine teilen sich eine Breite, unabhängig von der
   Seite, auf der sie stehen. Vorher war dieselbe Schrittfolge einmal
   1321 px und einmal 727 px breit. Die Portal-Anleitung
   (Schachtgenehmigung) ist davon ausgenommen: Sie steht allein in der
   Sektion, und die drei Karten je Reihe füllen wie die Service-Kacheln
   die ganze Containerbreite — bei 960 px blieb rechts ein Drittel leer. */
.fs-steps,
.table-scroll {
  max-width: var(--w-module);
}

/* Raster und Listen nutzen die Containerbreite — das ist die Vorgabe,
   sie steht hier nur, damit die dritte Breite im Stylesheet auftaucht
   und niemand sie versehentlich beschneidet. */
.news-grid,
.tiles,
.linklist,
.team-grid {
  max-width: var(--w-full);
}

/* Seitentitel in kompakt: Auf Rechtstexten und Übersichten ist der Titel
   nicht das Ereignis der Seite. Dann eine Stufe kleiner und mit weniger
   Luft — der Inhalt beginnt früher. */
.page-hero.is-compact .page-hero-title {
  font-size: var(--fs-h2);
  max-width: 40ch;
}
.page-hero.is-compact .hero-inner {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 3.5vw, 2.75rem);
}

/* Stoßen zwei Abschnitte ohne Farbwechsel aneinander, addieren sich zwei
   volle Abstände zu einer Lücke von 192 px — unabhängig davon, ob dort
   ein Kartenraster oder drei Zeilen Text endet.

   Die Naht sitzt am zweiten Abschnitt: Er nimmt oben den engeren Wert
   und zieht sich um die Differenz nach oben, wodurch der überschüssige
   Abstand des ersten verschwindet. 104 + 48 − 56 = 96 px. Weil beide
   Abschnitte dieselbe Fläche haben, ist die Überlappung unsichtbar.

   Warum nicht über Geschwister-Selektoren: Elementor kapselt jedes
   Widget und schachtelt die Container je nach Seitenaufbau
   unterschiedlich tief — zwei untereinander stehende Abschnitte sind im
   DOM mal Geschwister und mal nicht. Welcher Abschnitt auf welchen
   folgt, weiß dagegen die Ausgabereihenfolge; die Klasse setzt deshalb
   section_open() in PHP. */
.section.has-seam {
  padding-block-start: var(--section-y-tight);
  margin-block-start: calc(var(--section-y-tight) - var(--section-y));
}

/* Direkt unter der Bereichsleiste: engerer Abstand, aber ohne den Zug
   nach oben. Die Leiste bringt keinen eigenen Abstand nach unten mit,
   über den sich der Abschnitt ziehen könnte — er läge sonst auf ihr. */
.section.has-bar-above {
  padding-block-start: var(--section-y-tight);
  margin-block-start: 0;
}


/* =============================================================
   Orientierung auf Unterseiten
   ============================================================= */

/* ---------- Brotkrume ----------
   Steht im dunklen Seitenkopf über der Überschrift. Die letzte Stufe
   ist kein Link — sie ist die Seite, auf der man steht. */
.breadcrumb { margin: 0 0 var(--sp-5); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-small); line-height: var(--lh-snug);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-300); }
.breadcrumb [aria-current] { font-weight: 600; color: var(--ink-900); }

/* Im dunklen Kopf gelten die Auf-dunkel-Token. */
.page-hero .breadcrumb a { color: var(--on-dark-strong); }
.page-hero .breadcrumb a:hover { color: var(--on-dark); }
.page-hero .breadcrumb li + li::before { color: var(--on-dark-muted); }
.page-hero .breadcrumb [aria-current] { color: var(--on-dark); }
/* Im kompakten Kopf rückt die Krume näher an den Titel. */
.page-hero.is-compact .breadcrumb { margin-bottom: var(--sp-4); }

/* ---------- Bereichsleiste ----------
   Schmales Band direkt unter dem Seitenkopf. Es klebt beim Scrollen
   unter dem Header — deshalb die Höhe der eingerasteten Leiste als
   Abstand und eine Ebene unterhalb des Headers. */
.bereichsleiste {
  position: sticky; top: var(--header-h-stuck); z-index: var(--z-mega);
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
  box-shadow: var(--shadow-bar);
}
/* Auf schmalen Bildschirmen wandert die Leiste seitlich — ohne
   sichtbaren Balken, der die schmale Zeile sonst halb ausfüllte. */
.bereichsleiste-inner {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bereichsleiste-inner::-webkit-scrollbar { display: none; }
.bereichsleiste ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--sp-1);
  white-space: nowrap;
}
.bereichsleiste a {
  display: inline-flex; align-items: center;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--ink-600);
  border-bottom: var(--bw-strong) solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.bereichsleiste a:hover { color: var(--blue-700); }
/* Genau ein Eintrag ist markiert: Die Zuordnung läuft über exakten
   Pfadvergleich, nicht über ein Präfix. */
.bereichsleiste a.is-current {
  color: var(--blue-700);
  border-bottom-color: var(--blue-600);
}


/* ---------- Abschlussblock ----------
   Letzter Abschnitt einer Unterseite: links die Frage samt Antwort und
   Aktionen, rechts die Ansprechperson. Das Raster folgt den übrigen
   Zweispaltern, die Karte ist die vorhandene Kontaktkarte. */
.abschluss-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-14);
  align-items: center;
}
.abschluss-copy > p { max-width: var(--w-prose); color: var(--ink-600); margin: 0; }
.abschluss-copy .hero-actions { margin-top: var(--sp-7); }
.abschluss-person { display: flex; flex-direction: column; gap: var(--sp-2); }
.abschluss-person .title-card { margin: 0; }
.abschluss-person .person-role { margin: 0; }
.abschluss-note { margin: var(--sp-1) 0 var(--sp-2); color: var(--ink-600); font-size: var(--fs-small); }

@media (max-width: 1240px) {
  .abschluss-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
}

/* ---------- Bekanntmachungen im Header ----------
   Der hervorgehobene Punkt steht nicht in der Navigationsleiste, sondern
   als Primär-Knopf rechts neben „Zählerstand melden" (sekundär) — gleiche
   Höhe, gleiche Ecken, Megafon davor. Die Zahl dahinter nennt, wie viele
   Bekanntmachungen in den letzten zwei Wochen dazukamen. Auf dem Telefon
   bleibt wie beim Zählerstand nur das Symbol (Name per aria-label). */
.header-highlight { gap: var(--sp-2); }
.header-highlight .icon { width: 18px; height: 18px; flex: none; }
/* Auf der Bekanntmachungsseite selbst: die dunklere Stufe des Primärblaus. */
.header-highlight[aria-current] { background: var(--blue-700); }
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--blue-600); color: var(--on-dark);
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* Auf dem blauen Primärknopf wäre die blaue Zahl unsichtbar — umgekehrt. */
.btn-primary .nav-count { background: var(--paper); color: var(--blue-700); }
/* ---------- Header bei knapper Breite: zuerst weicht der Schriftzug ----------
   Logo (227 px), Navigation (rund 700 px), Suche und die beiden
   ausgeschriebenen Knöpfe (rund 500 px) brauchen 1535 px. Reihenfolge
   des Nachgebens, damit die Knöpfe so lange wie möglich und immer
   ausgeschrieben stehen:
   1. ab 1540 px abwärts zeigt das Logo nur das runde Siegel,
   2. ab 1400 px abwärts rücken Navigation und Knöpfe enger zusammen,
   3. ab 1300 px übernimmt das Mobilmenü (Knöpfe in voller Breite).
   Die Knöpfe werden weder gekürzt noch auf ein Symbol reduziert. */
.brand .logo-mark-only { display: none; height: calc(var(--logo-row-h) + 6px); width: auto; }
/* Unter 1540 px — Desktop mit engem Header wie Tablet und Telefon —
   steht nur die Bildmarke, nie ein Schriftzug. */
@media (max-width: 1540px) {
  .brand .logo-row,
  .brand .logo-row-compact,
  .site-header.is-stuck .brand .logo-row,
  .site-header.is-stuck .brand .logo-row-compact { display: none; }
  .brand .logo-mark-only,
  .site-header.is-stuck .brand .logo-mark-only { display: block; }
}
@media (min-width: 1301px) and (max-width: 1400px) {
  .header-inner { gap: var(--sp-4); }
  .nav-item > a, .nav-item > button { padding-inline: 6px; }
  .header-cta, .header-highlight { --btn-px: 12px; }
}
/* Die große Querfassung (54 px ab 1440 px) passt neben drei Knöpfen nicht
   mehr — auf dem Desktop bleibt der Schriftzug bei 48 px. */
@media (min-width: 1440px) { :root { --logo-row-h: 48px; } }

/* Mobilmenü (bis 1300 px): Zählerstand und Bekanntmachungen stehen als
   Knöpfe am Ende der Liste, die Knöpfe im Header verschwinden. Auf dem
   Desktop ist es umgekehrt. */
@media (max-width: 1300px) {
  .header-cta, .header-highlight { display: none; }
}
@media (min-width: 1301px) {
  .nav-item.is-mobile-only { display: none; }
}
/* Im Mobilmenü sind es echte Knöpfe in voller Breite — die Listenregeln
   für Menüzeilen (Trennlinie, linksbündig, kein Hintergrund beim Zeigen)
   gelten für sie nicht; deshalb die höhere Spezifität. */
@media (max-width: 1300px) {
  .nav-item.is-mobile-only { border-bottom: 0; padding: var(--sp-4) 0 0; }
  .nav-item.is-mobile-only + .nav-item.is-mobile-only { padding-top: var(--sp-3); }
  /* Die Menüzeilen-Regel „border: 0" (main.css) schlug die Knopf-Kontur —
     deshalb hier der Rahmen ausdrücklich, nicht nur seine Farbe. */
  .main-nav .nav-item.is-mobile-only > a.btn {
    display: flex; width: 100%; height: var(--btn-h); justify-content: center; gap: var(--sp-2);
    padding: 0 var(--btn-px); border-radius: var(--r-sm);
    border: var(--bw-strong) solid transparent;
    font-size: var(--fs-small); box-shadow: none;
  }
  .main-nav .nav-item.is-mobile-only > a.btn-primary,
  .main-nav .nav-item.is-mobile-only > a.btn-primary:hover { background: var(--blue-600); border-color: var(--blue-600); color: var(--on-dark); }
  .main-nav .nav-item.is-mobile-only > a.btn-secondary,
  .main-nav .nav-item.is-mobile-only > a.btn-secondary:hover { background: var(--paper); color: var(--blue-600); border-color: var(--blue-600); }
  .main-nav .nav-item.is-mobile-only > a.btn-primary[aria-current] { background: var(--blue-700); border-color: var(--blue-700); }
}

/* Dateizahl am Fuß der Bekanntmachungs-Karte */
.news-files {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-tiny); color: var(--ink-600);
}
.news-files .icon { width: 14px; height: 14px; }

/* Downloadliste unter dem Text einer Bekanntmachung. Die Linkliste
   steht hier im Fließtext-Container — dessen Listen- und Linkregeln
   (Aufzählungspunkte, Unterstreichung, Überschriftenabstand) gelten
   für sie nicht. */
.doc-section {
  margin-top: var(--sp-10); padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}
.doc-section h2 { margin-top: 0; }
.prose .linklist { list-style: none; padding-left: 0; margin: 0; }
.prose .linklist li { margin-bottom: 0; }
.prose .linklist li::marker { content: none; }
.prose .linklist a { text-decoration: none; }
.prose .linklist-title { margin: 0; }
.prose .linklist small { display: block; color: var(--ink-600); font-size: var(--fs-tiny); }

/* E-Mail-Schutz: bis das Skript den mailto:-Link setzt, ist das <a>
   ohne href — es soll trotzdem wie die Zeile daneben aussehen. */
.email-guard:not([href]) { color: var(--blue-600); cursor: default; }
.email-guard .eg-at { font-size: .85em; }
/* Kopf einer Bekanntmachung: die Kategorie-Pille auf der dunklen Fläche
   in Markenblau — wie die Karte, nur eine Stufe heller als der Grund. */
.page-hero .news-meta .badge { background: var(--blue-600); }

/* ---------- Telefon: Gebietskarte und Footer ----------
   Die Ortsschilder der Karte sind HTML mit fester Schriftgröße, die
   Karte darunter schrumpft mit der Spalte — bei 390 px lagen Gräfenhain
   und Wölfis übereinander. Kleinere Schrift und kleinere Punkte lassen
   die neun Schilder nebeneinander Platz finden. */
@media (max-width: 640px) {
  .area-pin { width: 10px; height: 10px; border-width: 2px; }
  .area-pin b { font-size: 11px; padding: 1px var(--sp-2); }

  /* Der Ohri-Knopf (68 px) sitzt fest unten rechts. Ohne diesen Abstand
     lag er genau über dem letzten Link der Rechtsleiste. */
  .footer-bottom-inner { padding-bottom: 6.5rem; }
}
/* 320 px mit vergrößerten Textabständen (WCAG 1.4.12): Das Schild von
   Crawinkel ganz rechts stand einen halben Pixel über den Rand und machte
   die Seite seitlich scrollbar. Schmalere Polster geben genug Luft. */
@media (max-width: 400px) {
  .area-pin b { padding-inline: var(--sp-1); }
}

/* ---------- Textlinks in Widgets: Unterstreichung beim Zeigen ----------
   Elementor-Kits setzen die Unterstreichung von Links zurück; die
   Grundregel aus main.css (Textlinks dauerhaft unterstrichen) kommt in
   den Widgets deshalb nicht an. Telefon- und E-Mail-Zeilen, Listen und
   Absätze bekommen sie hier zumindest beim Zeigen und per Tastatur —
   Flächen-Links (Karten, Kacheln, Linklisten, Buttons) haben ihre eigene
   Regelung oben und bleiben ausgenommen. */
.elementor :is(p, li, dd, td, .person-line, .portal-contact, .checklist) a:not(.btn, .news-card, .tile, .linklist a, .chat-quicklink):hover,
.elementor :is(p, li, dd, td, .person-line, .portal-contact, .checklist) a:not(.btn, .news-card, .tile, .linklist a, .chat-quicklink):focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Portal-Anleitung: der Knopf ins Portal — in der blauen Hinweis-Box
   unter dem Text, sonst für sich unter den Schritten. */
.portal-actions { margin: 0 0 var(--sp-7); }
.portal-note .portal-actions { margin: var(--sp-4) 0 0; }

/* ---------- Reflow bei 320 px (WCAG 1.4.10) ----------
   Lange deutsche Wörter („Niederschlagswassergebühr") setzen die
   Mindestbreite von Listeneinträgen und Karten — bei 320 px liefen sie
   aus dem Bild. Gitter-Kinder dürfen schmaler als ihr Inhalt werden,
   und Titel brechen notfalls im Wort um (nur dann; sonst bleiben die
   Wörter ganz). */
.linklist > li, .news-grid > *, .tiles > *, .team-grid > li, .contact-grid > * { min-width: 0; }
.linklist-text b, .linklist-text .linklist-title, .linklist-text small,
.title-card, .page-hero-title, .hero-title, .section-head h2, .section-head h3 {
  overflow-wrap: anywhere;
}
/* Kennzahlen-Beschriftungen („Trinkwasserleitungen") sind breiter als
   eine Spalte des zweispaltigen Bands auf dem Telefon: erst Silbentrennung,
   im Notfall Umbruch im Wort. */
.stat span { hyphens: auto; overflow-wrap: anywhere; }

/* ---------- Telefon: nur die Bildmarke ----------
   Die Umschaltung auf die Bildmarke gilt schon ab 1540 px (siehe oben);
   hier nur noch ihre Größe auf dem Telefon, im Ruhezustand wie eingerastet. */
@media (max-width: 640px) {
  .brand .logo-mark-only,
  .site-header.is-stuck .brand .logo-mark-only { height: 40px; }
}

/* ---------- Telefon: Hero, Mobilmenü-Knöpfe und Footer zentriert ----------
   Auf einer Spalte liest sich Mittigkeit ruhiger als der linksbündige
   Desktop-Satz. Hero: Brotkrume, Überschrift, Vorspann, Knöpfe und
   Kennzahlen mittig. Footer: Logo, Adresse, Spaltentitel, Links und
   Rechtsleiste mittig. Die Knöpfe im Mobilmenü sind ohnehin zentriert
   (siehe oben), hier nur die Absicherung für Text und Marke. */
@media (max-width: 640px) {
  .hero .hero-inner, .page-hero .hero-inner { text-align: center; margin-inline: auto; }
  .hero .hero-title, .page-hero-title, .hero-lead, .page-hero-lead,
  .hero .hero-inner > p, .page-hero .hero-inner > p { margin-inline: auto; }
  .breadcrumb ol, .hero .news-meta, .page-hero .news-meta { justify-content: center; }
  .hero-actions { align-items: stretch; justify-content: center; }
  .stats-grid { text-align: center; }
  .stat { align-items: center; }

  .main-nav .nav-item.is-mobile-only > a.btn { text-align: center; }

  /* Sektionsköpfe („Was können wir für Sie tun?"): Überschrift und
     Unterzeile mittig, der Knopf in voller Breite wie im Hero — statt
     linksbündig mit einem kleinen Knopf darunter. */
  .section-head { align-items: center; text-align: center; gap: var(--sp-5); }
  .section-head > div { width: 100%; }
  .section-head p { margin-inline: auto; }
  .section-head .btn { width: 100%; justify-content: center; }

  /* Widgets mit eigener Überschrift (Wasser, Verband, Bild & Text,
     Fäkalschlamm, Abschluss, OIA-Einleitung, Vorspänne): Überschrift und
     Text mittig, die Textbreite bleibt, der Block steht in der Mitte.
     Artikeltexte (.prose) bleiben linksbündig — zentrierter Fließtext
     liest sich schlecht. */
  .water-copy, .verband-grid > div:first-child, .media-text-copy, .fs-copy,
  .abschluss-copy, .oia-intro, .lead-copy, .area-scope { text-align: center; }
  .water-copy > p, .fs-copy > p, .abschluss-copy > p,
  .oia-intro, .lead-copy { margin-inline: auto; }
  /* Checklisten bleiben linksbündig — Haken und Zeilen gehören an eine Kante. */
  .checklist, .checklist li { text-align: left; }
  .water-copy .hero-actions, .media-text-copy .hero-actions, .abschluss-copy .hero-actions,
  .fs-copy .hero-actions, .verband-grid .hero-actions { justify-content: center; }

  .site-footer { text-align: center; }
  .footer-grid > div { justify-items: center; }
  .footer-brand img { margin-inline: auto; }
  .site-footer ul { justify-items: center; }
  .footer-social { justify-content: center; }
  .footer-bottom ul { justify-content: center; }
  .footer-bottom-inner { flex-direction: column; align-items: center; gap: var(--sp-3); }
}

/* ---------- Telefon: keine Bereichsleiste ----------
   Die Unternavigation („Übersicht · Formulare & Anträge · …") ist auf
   dem Telefon eine scrollende Zeile unter dem Hero, die mehr Platz
   kostet als sie nützt — die Unterseiten stehen im Mobilmenü. */
@media (max-width: 640px) {
  .bereichsleiste { display: none; }
}

/* ---------- Leichte Sprache ----------
   Verlinkt im Footer neben der Erklärung zur Barrierefreiheit
   (inc/leichte-sprache.php hängt den Link an das Rechtsmenü).
   Die Seite selbst: große Schrift, weiter Zeilenabstand, kurze Zeilen,
   linksbündig, keine Silbentrennung — so verlangen es die Regeln für
   Leichte Sprache. Überschriften deutlich, Listen mit Luft. */
.ls-text { font-size: var(--fs-lead); line-height: 1.8; max-width: 46rem; hyphens: manual; text-align: left; }
.ls-text p { margin-bottom: 1.4em; }
.ls-text h2 { margin-top: var(--sp-12); font-size: var(--fs-card); }
.ls-text ul { padding-left: 1.2em; }
.ls-text li { margin-bottom: .6em; }
.ls-text a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }