/* =============================================================
   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); }
.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: 22ch;
  margin: 0;
}
.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); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.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 {
  text-decoration: none;
}

/* 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 {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notdienst-tel:hover,
.notdienst-tel:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* 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 und der Zeitungskopf
   (die Karte rundet dort selbst über overflow: hidden). */
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 { 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: 1240px) {
  /* ---------- Vollflächiges Mobilmenü ----------
     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; }
}


/* =============================================================
   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. */
.fs-steps,
.portal-steps,
.portal-foot,
.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: 34ch;
}
.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); }
}