/* ==========================================================================
   Komponenten — Design-System "Die Unabhängigen-ABAE" (2026-08)
   Quelle: ui_kits/website/index.html + components/ aus dem Design-Bundle.
   Flache Optik: 1px-Ränder statt Schatten (Schatten nur Störer + Dialog),
   Radien 3/4/6px, Buttons NICHT pillenförmig.
   ========================================================================== */

/* ==========================================================================
   Core-Block-Kompatibilität (wp:button, wp:list …)
   ========================================================================== */

.wp-block-button__link {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-control);
  padding: 13px 22px;
  text-decoration: none;
  display: inline-block;
}

.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--abae-magenta);
  color: #fff;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--magenta-700);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--abae-blau);
  border: var(--border-width-control) solid var(--abae-blau);
}

.wp-block-buttons {
  gap: var(--space-4);
}

/* ==========================================================================
   Buttons — Varianten primaer / sekundaer / signal / auf-blau / text
   (Legacy-Aliase btn-accent/btn-outline/btn-outline-white bleiben gemappt,
   da sie in bestehenden Seiteninhalten vorkommen können.)
   ========================================================================== */

.btn {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 17px;
  line-height: 1.2;
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: var(--border-width-control) solid transparent;
  padding: 15px 26px;
  transition: background var(--transition-schnell), color var(--transition-schnell), border-color var(--transition-schnell);
}

.btn-mittel,
.btn-sm {
  padding: 13px 22px;
  font-size: 16px;
}

.btn-klein {
  padding: 10px 18px;
  font-size: 15px;
}

.btn-lg {
  padding: 15px 26px;
  font-size: 17px;
}

.btn-primaer {
  background: var(--abae-blau);
  color: #fff;
  border-color: var(--abae-blau);
}

.btn-primaer:hover {
  background: var(--blau-900);
  border-color: var(--blau-900);
  color: #fff;
}

.btn-sekundaer,
.btn-outline {
  background: transparent;
  color: var(--abae-blau);
  border-color: var(--abae-blau);
}

.btn-sekundaer:hover,
.btn-outline:hover {
  background: var(--surface-quiet);
  color: var(--abae-blau);
}

.btn-signal,
.btn-accent {
  background: var(--abae-magenta);
  color: #fff;
  border-color: var(--abae-magenta);
}

.btn-signal:hover,
.btn-accent:hover {
  background: var(--magenta-700);
  border-color: var(--magenta-700);
  color: #fff;
}

.btn-auf-blau,
.btn-outline-white {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: var(--border-on-dark);
}

.btn-auf-blau:hover,
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.btn-text {
  background: transparent;
  color: var(--abae-magenta);
  border: 0;
  padding: 0;
}

.btn-text:hover {
  color: var(--magenta-700);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn.ist-inaktiv {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Spezifitäts-Härtung gegen Elementor-Kit-Linkfarben (.elementor-kit-* a
   = 0-1-1 schlägt einfache Klassen-Selektoren): Button-/Chip-Farben als
   a.klasse.klasse deklarieren, damit sie auch mit aktivem Elementor gewinnen. */
a.btn.btn-primaer,
a.btn.btn-primaer:hover,
a.btn.btn-signal,
a.btn.btn-signal:hover,
a.btn.btn-accent,
a.btn.btn-accent:hover,
a.btn.btn-auf-blau,
a.btn.btn-auf-blau:hover,
a.btn.btn-outline-white,
a.btn.btn-outline-white:hover {
  color: #fff;
}

a.btn.btn-sekundaer,
a.btn.btn-sekundaer:hover,
a.btn.btn-outline,
a.btn.btn-outline:hover {
  color: var(--abae-blau);
}

/* Dasselbe für echte <button>-Elemente — und hier reicht die Textfarbe nicht.
   Das Elementor-Kit stylt nicht nur Links, sondern auch
   `.elementor-kit-<ID> button` (0-1-1) mit `background-color: <Accent>` und
   der Kit-Schrift. Das schlägt `.btn-primaer` (0-1-0), und zwar unabhängig
   von der Reihenfolge der Dateien. Aufgefallen ist es am Knopf „Plakat
   teilen" auf der Motivseite: als `<button class="btn btn-primaer">` kam er
   magenta statt navy. Die Ursache gehört ins Kit (siehe docs), das hier ist
   das Sicherheitsnetz — es muss deshalb Hintergrund, Rand UND Schrift
   zurückholen, nicht nur `color`. */
button.btn,
input.btn {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
}

button.btn.btn-primaer,
input.btn.btn-primaer {
  background: var(--abae-blau);
  border-color: var(--abae-blau);
  color: #fff;
}

button.btn.btn-primaer:hover,
input.btn.btn-primaer:hover {
  background: var(--blau-900);
  border-color: var(--blau-900);
}

button.btn.btn-signal,
button.btn.btn-accent,
input.btn.btn-signal,
input.btn.btn-accent {
  background: var(--abae-magenta);
  border-color: var(--abae-magenta);
  color: #fff;
}

button.btn.btn-signal:hover,
button.btn.btn-accent:hover,
input.btn.btn-signal:hover,
input.btn.btn-accent:hover {
  background: var(--magenta-700);
  border-color: var(--magenta-700);
}

button.btn.btn-sekundaer,
button.btn.btn-outline,
input.btn.btn-sekundaer,
input.btn.btn-outline {
  background: transparent;
  border-color: var(--abae-blau);
  color: var(--abae-blau);
}

button.btn.btn-sekundaer:hover,
button.btn.btn-outline:hover,
input.btn.btn-sekundaer:hover,
input.btn.btn-outline:hover {
  background: var(--surface-quiet);
}

button.btn.btn-auf-blau,
button.btn.btn-outline-white,
input.btn.btn-auf-blau,
input.btn.btn-outline-white {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-on-dark);
  color: #fff;
}

button.btn.btn-auf-blau:hover,
button.btn.btn-outline-white:hover,
input.btn.btn-auf-blau:hover,
input.btn.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.24);
}

button.btn.btn-text,
input.btn.btn-text {
  background: transparent;
  border: 0;
  color: var(--abae-magenta);
}

/* Muss hinter den Farbvarianten stehen: „Gesammelt" ist ein Zustand des
   Sammeln-Knopfes (btn-signal) und gewinnt hier nur über die Reihenfolge.
   Werte identisch mit `.btn.ist-gesammelt` weiter unten. */
button.btn.ist-gesammelt,
button.btn.ist-gesammelt:hover {
  background: var(--surface-quiet);
  border-color: var(--border-default);
  color: var(--text-headline);
}

.topbar a.topbar-login {
  color: var(--blau-200);
}

.topbar a.topbar-login:hover,
.topbar a.topbar-konto,
.topbar a.chip-social,
.fusszeile a.chip-social {
  color: #fff;
}

.fusszeile .fusszeile-spalte a:not(.chip-social) {
  color: var(--text-on-dark-muted);
}

.fusszeile .fusszeile-spalte a:not(.chip-social):hover {
  color: #fff;
}

/* ==========================================================================
   Tags & Prio-Badges
   ========================================================================== */

.tag {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  border-radius: var(--radius-control);
  padding: 4px 8px;
  display: inline-block;
}

.tag-neutral {
  color: var(--text-body-color);
  border: 1px solid var(--border-default);
}

.tag-signal {
  color: var(--abae-magenta);
  border: 1px solid var(--border-signal);
}

.tag-flaeche {
  color: var(--text-headline);
  background: var(--surface-quiet);
}

.prio-badge {
  font-size: var(--text-badge);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  border-radius: var(--radius-badge);
  padding: 3px 7px;
  white-space: nowrap;
  display: inline-block;
}

.prio-badge--kern {
  background: var(--abae-magenta);
  color: #fff;
}

.prio-badge--schwerpunkt {
  background: var(--surface-quiet);
  color: var(--text-headline);
}

/* Nur in der Legende: die dritte Stufe trägt im Programm selbst bewusst
   keine Kennzeichnung, hier braucht sie aber eine Beschriftung. */
.prio-badge--ohne {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

/* ==========================================================================
   Eyebrow / Label
   ========================================================================== */

/* 13px Versalien sind bereits schwer zu lesen — mit `--text-muted` (3,49:1)
   wäre das Label unter der AA-Schwelle. Auf dunklen Bändern setzen die
   jeweiligen Sektionen ohnehin eine eigene Farbe. */
.eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--neutral-700);
  display: block;
}

/* ==========================================================================
   TopBar — schmale blaue Leiste über der Kopfzeile
   ========================================================================== */

.topbar {
  background: var(--abae-blau);
  color: #fff;
  font-size: 15px;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.topbar-wahl {
  font-weight: var(--weight-semibold);
}

.topbar-rechts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-trenner {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.32);
  margin: 0 4px;
}

.topbar-login {
  font-weight: var(--weight-semibold);
  color: var(--blau-200);
}

.topbar-login:hover {
  color: #fff;
}

.topbar-konto {
  font-weight: var(--weight-semibold);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-control);
  padding: 4px 11px;
}

/* Social-Wortmarken-Chips (auch in der Fußzeile) */
.chip-social {
  font-weight: var(--weight-bold);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-control);
  padding: 4px 11px;
  color: #fff;
  font-size: 15px;
}

.chip-social:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   Kopfzeile — weiß, blaues Logo, Hairline unten
   ========================================================================== */

/* Kopfzeile klebt oben und blendet sich beim Runterscrollen aus, beim
   Hochscrollen wieder ein (Klasse `is-hidden` kommt aus main.js — dasselbe
   Muster wie im Theme unabhaengige-lg). `position: sticky` steht hier fest im
   Stylesheet und nicht mehr nur im Customizer-Inline-Block; das Ausblenden
   ergibt ohne fixierte Kopfzeile keinen Sinn. Die TopBar darüber scrollt
   normal weg. */
.kopfzeile {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: 60;
  transition: transform 0.25s ease;
}

.kopfzeile.is-hidden {
  transform: translateY(-100%);
}

/* Eingeloggte Redaktion: die WordPress-Adminbar liegt fix über allem
   (32px, ≤782px 46px). Ohne diesen Versatz schöbe sich die fixierte
   Kopfzeile darunter. Unter 600px ist die Adminbar laut WP-Core selbst
   nicht mehr fixiert, scrollt also mit weg — dort wieder top: 0. */
body.admin-bar .kopfzeile {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .kopfzeile {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar .kopfzeile {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kopfzeile {
    transition: none;
  }
}

.kopfzeile .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Fluide Logo-Höhe: wächst mit der Viewport-Breite bis --logo-hoehe-max
   (Design: 77px, die Maßgabe der Plakate). Der zusätzliche 9vh-Deckel greift
   auf niedrigen Viewports (Landscape-Handy), damit die Kopfzeile dort keine
   Bildschirmhöhe frisst. Untergrenze 36px hält das Logo mobil lesbar. */
.kopfzeile .site-logo img {
  height: clamp(36px, min(19px + 4.4vw, 9vh), var(--logo-hoehe-max, 77px));
  width: auto;
}

.kopfzeile nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.kopfzeile nav a {
  color: var(--abae-blau);
}

.kopfzeile nav .current-menu-item > a,
.kopfzeile nav .current_page_item > a,
.kopfzeile nav a:hover {
  color: var(--abae-magenta);
}

.kopfzeile-aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--border-width-control) solid var(--abae-blau);
  border-radius: var(--radius-control);
  color: var(--abae-blau);
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .kopfzeile nav {
    display: none;
  }

  .kopfzeile nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    z-index: 50;
    padding: var(--space-4) var(--gutter-seite-mobil) var(--space-6);
  }

  .kopfzeile nav.is-open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .kopfzeile nav.is-open a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 17px;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 780px) {
  /* Der Mitmachen-Button bleibt auch mobil stehen — das Design-System sagt
     zur Kopfzeile ausdrücklich: „Unter 900px klappt die Navigation ins
     Burger-Menü, Logo und Mitmachen-Button bleiben sichtbar." Er wird nur
     kompakter, damit Logo + Button + Burger nebeneinander passen. */
  .kopfzeile-cta {
    padding: 9px 12px;
    font-size: 14px;
  }

  .kopfzeile .wrap {
    gap: 12px;
  }

  .kopfzeile-aktionen {
    gap: 8px;
  }

  /* TopBar mobil: Countdown-Text entfällt, die drei Kanäle bleiben
     (Design-System TopBar: „Auf Mobil entfällt der Countdown-Text, die drei
     Kanäle bleiben"). Umbruch erlaubt, damit bei sehr schmalen Geräten
     nichts über den Rand läuft. */
  .topbar .wrap {
    justify-content: center;
  }

  .topbar-wahl {
    display: none;
  }

  .topbar-rechts {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
}

@media (max-width: 400px) {
  .chip-social {
    font-size: 14px;
    padding: 3px 8px;
  }
}

/* ==========================================================================
   Fußzeile — blaues Band, 4 Spalten, Schlusszeile mit Countdown
   ========================================================================== */

.fusszeile {
  background: var(--abae-blau);
  color: #fff;
  padding: 48px 0 28px;
  margin-top: var(--abschnitt-y);
}

/* Endet die Seite mit einer Sektion, bringt diese ihren eigenen Fußabstand
   schon mit — der zusätzliche Rand über der Fußzeile stünde sonst als
   weißer Streifen zwischen Band und Fußzeile. */
main:has(.blockseite-content > .sektion:last-child) + .fusszeile {
  margin-top: 0;
}

.fusszeile-raster {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
}

.fusszeile-spalte {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fusszeile-spalte .site-logo img {
  height: 44px;
  width: auto;
  align-self: flex-start;
}

.fusszeile-tagline {
  margin: 0;
  font-size: 16px;
  line-height: var(--leading-body);
  color: #a9c0d6;
}

.fusszeile-spalte a {
  color: var(--text-on-dark-muted);
  font-size: 16px;
}

.fusszeile-spalte a:hover {
  color: #fff;
}

.fusszeile-titel {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blau-400);
}

.fusszeile-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fusszeile-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fusszeile-schluss {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: #8faec9;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .fusszeile-raster {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Sektionen & Sektionstitel
   ========================================================================== */

.sektion {
  padding-top: var(--abschnitt-y);
  padding-bottom: var(--abschnitt-y);
}

.sektion-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--space-6);
}

.sektion-kopf h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-m, 38px);
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--text-headline);
}

.sektion-kopf .sektion-aktion {
  font-size: 16px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* Dunkelblaues Band — max. zwei pro Seite, nie zwei hintereinander */
.band {
  background: var(--abae-blau);
  color: #fff;
}

.band .sektion-kopf h2 {
  color: #fff;
}

.band .sektion-kopf .sektion-aktion {
  color: #ffc2e0;
}

.band .sektion-kopf .sektion-aktion:hover {
  color: #fff;
}

/* Ruhige hellblaue Fläche */
.flaeche-quiet {
  background: var(--surface-quiet);
}

@media (max-width: 780px) {
  .sektion-kopf {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sektion-kopf h2 {
    font-size: 32px;
  }
}

/* ==========================================================================
   Hero — Bild mit Radius, Verlaufs-Overlay, Edo-Slogan, Störer
   ========================================================================== */

.hero-sektion .hero {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-8);
}

/* 78vh-Deckel: auf flachen Viewports (Handy quer, kleine Laptops) würde die
   feste Höhe sonst mehr als den sichtbaren Bereich einnehmen. */
.hero-sektion .hero-bild {
  width: 100%;
  height: min(560px, 78vh);
  object-fit: cover;
}

.hero-verlauf {
  position: absolute;
  inset: 0;
  background: var(--overlay-bild);
}

.hero-medien {
  position: relative;
}

/* Auf breiten Viewports liegt der Text im Bild, auf schmalen darunter. */
.hero-sektion .hero-text {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 32px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .hero-sektion-Präfix (0-2-0): der Slogan ist ein <h1>, und das Elementor-Kit
   färbt `.elementor-kit-<ID> h1` (0-1-1) blau ein — ohne die höhere Spezifität
   stünde der Slogan dunkelblau auf dem dunklen Foto und wäre unlesbar. */
.hero-sektion .hero-slogan {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-l, 46px);
  line-height: var(--leading-display);
  color: #fff;
  margin: 0;
}

/* Unterzeile bewusst in der Hausschrift (regular), nicht in Edo SZ —
   sie trägt die sachliche Einordnung unter dem Pinselschrift-Slogan. */
.hero-sektion .hero-subslogan {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-l);
  line-height: 1.45;
  color: #fff;
  margin: 0;
}

/* Störer — magenta Countdown-Kreis (einzige Komponente mit Schatten) */
.stoerer {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 168px;
  height: 168px;
  border-radius: var(--radius-rund);
  background: var(--abae-magenta);
  color: #fff;
  font-family: var(--font-plakat);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-stoerer);
}

.stoerer-zeile {
  font-size: 16px;
  font-weight: var(--weight-bold);
}

.stoerer-gross {
  font-size: 42px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.stoerer-aufruf {
  font-size: 20px;
  font-weight: var(--weight-bold);
}

.stoerer-datum {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  opacity: 0.92;
}

@media (max-width: 780px) {
  /* Originalformat des Fotos (3:2) beibehalten statt auf feste Höhe zu
     beschneiden — sonst schneidet der schmale Viewport die Gruppe an. */
  .hero-sektion .hero-bild {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  /* Der Verlauf trägt nur die Lesbarkeit von Text im Bild; hier steht der
     Text darunter, also verdunkelt er das Foto ohne Nutzen. */
  .hero-verlauf {
    display: none;
  }

  /* Text verlässt das Bild und bekommt eine eigene helle Fläche. */
  .hero-sektion .hero-text {
    position: static;
    max-width: none;
    background: var(--surface-quiet);
    padding: 20px;
  }

  /* Präfix muss zur Desktop-Regel oben passen, sonst gewinnt diese hier nicht. */
  .hero-sektion .hero-slogan {
    font-size: 32px;
    color: var(--text-headline);
  }

  .hero-sektion .hero-subslogan {
    font-size: var(--text-body);
    color: var(--text-body-color);
  }

  .stoerer {
    width: 120px;
    height: 120px;
    right: 16px;
    bottom: 16px;
  }

  .stoerer-zeile {
    font-size: 11px;
  }

  .stoerer-gross {
    font-size: 30px;
  }

  .stoerer-aufruf {
    font-size: 14px;
  }

  .stoerer-datum {
    font-size: 10px;
  }
}

/* ==========================================================================
   Intro + Termin-Karte (unter dem Hero)
   ========================================================================== */

.intro-sektion .intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-7);
  padding-bottom: var(--abschnitt-y);
}

.intro-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--text-body-color);
  text-wrap: pretty;
}

.intro-aktionen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.karte-quiet {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.karte-quiet .eyebrow {
  color: var(--text-muted);
}

.termin-titel {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--text-headline);
}

.termin-wann {
  font-size: 16px;
  color: var(--text-body-color);
}

.hairline {
  height: 1px;
  background: var(--border-hairline);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   Termine — Startseiten-Sektion "Wo Du uns triffst"
   Design-System: hellblaue Fläche, weiße Zeilen mit Datums-Kachel links,
   Titel/Zeit·Ort in der Mitte, Art-Badge rechts.
   ========================================================================== */

.termine-sektion {
  background: var(--surface-quiet);
  padding-top: var(--abschnitt-y);
  padding-bottom: var(--abschnitt-y);
}

.termine-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.termin-zeile {
  background: var(--surface-page);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 24px;
  align-items: center;
}

.termin-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 10px 0;
}

.termin-monat {
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.termin-tag {
  font-size: 30px;
  font-weight: var(--weight-black);
  line-height: 1.1;
  color: var(--abae-blau);
}

.termin-wochentag {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.termin-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* .termin-titel/.termin-wann teilen sich die Definition mit der Termin-Karte
   unter dem Hero (siehe oben) — in der Liste eine Spur kleiner. */
.termin-zeile .termin-titel {
  font-size: 20px;
}

.termin-notiz {
  font-size: 15px;
  color: var(--text-muted);
}

.termin-aktion {
  display: flex;
  align-items: center;
  gap: 16px;
}

.termin-art {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-body-color);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 5px 9px;
  white-space: nowrap;
}

.termin-details {
  font-weight: var(--weight-bold);
  color: var(--abae-magenta);
  white-space: nowrap;
}

.termine-leer {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  /* Datums-Kachel und Text nebeneinander, Badge/Link darunter — sonst wird
     die mittlere Spalte auf Handys zu schmal für Titel und Ort. */
  .termin-zeile {
    grid-template-columns: 64px 1fr;
    gap: 16px;
    padding: 16px 18px;
    /* Kachel oben ausrichten: bei mehrzeiligen Titeln stünde sie sonst
       mittig neben dem Text und wirkte verrutscht. */
    align-items: start;
  }

  .termin-aktion {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .termin-tag {
    font-size: 24px;
  }

  .termin-zeile .termin-titel {
    font-size: 18px;
  }
}

.termin-link {
  font-size: 16px;
  font-weight: var(--weight-bold);
}

@media (max-width: 780px) {
  .intro-sektion .intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .intro-aktionen {
    flex-direction: column;
    align-items: stretch;
  }

  .intro-aktionen .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Themen-Kacheln
   ========================================================================== */

.raster-themen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raster-gap);
}

.kachel {
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 196px;
  transition: filter var(--transition-schnell);
}

.kachel:hover {
  filter: brightness(0.96);
}

.kachel-titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: var(--leading-headline);
}

.kachel p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.kachel-mehr {
  margin-top: auto;
  font-size: 15px;
  font-weight: var(--weight-bold);
}

.kachel--blau {
  background: var(--abae-blau);
}

.kachel--blau .kachel-titel {
  color: #fff;
}

.kachel--blau p {
  color: var(--text-on-dark-muted);
}

.kachel--blau .kachel-mehr {
  color: #ffc2e0;
}

.kachel--magenta {
  background: var(--abae-magenta);
}

.kachel--magenta .kachel-titel {
  color: #fff;
}

.kachel--magenta p {
  color: var(--magenta-100);
}

.kachel--magenta .kachel-mehr {
  color: #fff;
}

.kachel--hell {
  background: var(--neutral-100);
}

.kachel--hell .kachel-titel {
  color: var(--text-headline);
}

.kachel--hell p {
  color: var(--text-body-color);
}

.kachel--hell .kachel-mehr {
  color: var(--abae-magenta);
}

@media (max-width: 1000px) {
  .raster-themen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .raster-themen {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Kandidierende — Personen-Karten (3:4-Porträts)
   ========================================================================== */

.raster-personen {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.person {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Auf dunklem Band: kein Rand nötig */
.band .person {
  border: 0;
}

.person-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface-quiet);
}

.person-fuss {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.person-name {
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--text-headline);
}

.person-meta {
  font-size: 14px;
  color: var(--text-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.raster-personen--vier {
  grid-template-columns: repeat(4, 1fr);
}

/* Einheitlicher Anschnitt für alle 3:2-Profilbilder (Design-System:
   geschlossene Porträtserie, gleicher Ausschnitt für alle) — Fokus wie im
   Bundle-Fokuspunkt 0.5/0.35. Gilt in Übersicht, Karussell und Detail. */
.person-foto--anschnitt {
  object-position: 50% 35%;
}

/* ==========================================================================
   Kandidierenden-Karussell ("Weiter auf der Liste", Kandidat-Detail)
   ========================================================================== */

.karussell-pfeile {
  display: flex;
  gap: 8px;
}

/* .sektion-Präfix: gewinnt gegen Elementor-Kit-Button-Styles (0-1-1) */
.sektion .karussell-pfeil {
  width: 44px;
  height: 44px;
  border: var(--border-width-control) solid var(--border-on-dark);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-schnell);
}

.sektion .karussell-pfeil:hover {
  background: rgba(255, 255, 255, 0.24);
}

.sektion .karussell-pfeil[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.personen-karussell {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--space-4)) / 5);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.personen-karussell::-webkit-scrollbar {
  display: none;
}

.personen-karussell .person {
  scroll-snap-align: start;
}

@media (max-width: 1000px) {
  .personen-karussell {
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
  }
}

@media (max-width: 780px) {
  .personen-karussell {
    grid-auto-columns: calc((100% - var(--space-4)) / 2);
  }
}

@media (max-width: 1000px) {
  .raster-personen,
  .raster-personen--vier {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px) {
  .raster-personen {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Beitrags-Karten (Neuigkeiten)
   ========================================================================== */

.raster-beitraege {
  display: grid;
  grid-template-columns: repeat(var(--beitraege-columns, 3), 1fr);
  gap: var(--space-5);
}

.beitrag {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Vorschaubild: Querformat skaliert in die Box, Hochformat läuft nach unten
   durch statt beschnitten zu werden. `height: auto` ist dabei zwingend —
   WordPress schreibt width/height als HTML-Attribute ans Bildelement, und
   ohne diese Regel gewinnt die Attribut-Höhe. Das Bild wird dann vertikal
   verzerrt (gefunden 2026-08-08: 819×1024 gerendert als 660×1024). */
.beitrag-bild {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-quiet);
}

/* Querformat (breiter als 3:2) füllt die Vorschaubox mit minimalem Anschnitt.
   Die Klasse setzt beitrag-karte.php anhand der Bildmaße — CSS kann nicht
   nach dem Seitenverhältnis der Datei verzweigen. */
.beitrag-bild--quer {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Der Platzhalter hat kein Bild und braucht daher ein eigenes Format. */
.beitrag-bild--platzhalter {
  aspect-ratio: 3 / 2;
  background: var(--surface-platzhalter);
}

.beitrag-inhalt {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.beitrag-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.beitrag-titel {
  font-size: 20px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: normal;
  color: var(--text-headline);
  margin: 0;
}

.beitrag-titel a {
  color: inherit;
}

.beitrag-titel a:hover {
  color: var(--abae-magenta);
}

.beitrag-bild-link {
  display: block;
}

.beitrag-auszug {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body-color);
}

.beitrag-autor {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-caption);
}

.beitrag-autor img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-rund);
  object-fit: cover;
}

.beitrag-autor-name {
  font-weight: var(--weight-semibold);
  color: var(--text-body-color);
}

.beitrag-autor-datum {
  color: var(--text-faint);
}

@media (max-width: 1000px) {
  .raster-beitraege {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .raster-beitraege {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Karten-Grid — nummerierte Wege-Karten ("Drei Wege zum Mitmachen")
   ========================================================================== */

.raster-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--raster-gap);
}

.karte {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.karte-nummer {
  font-size: var(--text-label);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-label);
  color: var(--abae-magenta);
}

.karte-titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: var(--leading-headline);
  color: var(--text-headline);
  margin: 0;
}

.karte p {
  color: var(--text-body-color);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.karte-link {
  margin-top: auto;
  font-size: 15px;
  font-weight: var(--weight-bold);
  padding-top: var(--space-3);
}

/* ==========================================================================
   Info-Box — flächige blaue Karte (Spenden/Bankdaten/Promo)
   ========================================================================== */

.info-box {
  background: var(--surface-invers);
  color: #fff;
  padding: 28px;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-box h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-s);
  line-height: var(--leading-headline);
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  margin: 0;
}

.info-box p {
  margin: 0;
  color: var(--text-on-dark-muted);
  line-height: var(--leading-body);
}

.info-box a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.info-box .btn {
  align-self: flex-start;
}

/* ==========================================================================
   Formulare — Feld + Einwilligung (auch Contact Form 7)
   ========================================================================== */

/* Feld = Label über Eingabe (Design-System components/forms/Feld.jsx).
   Bewusst NICHT `.wpcf7 label` pauschal: die Einwilligung ist ebenfalls ein
   <label>, braucht aber Zeilen-Layout statt Block mit Abstand darunter. */
.feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.feld-label,
.wpcf7 .feld-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--text-headline);
  display: block;
  margin: 0;
}

/* `--text-muted` (#7C8B99) erreicht auf hellem Grund nur 3,49:1 und verfehlt
   damit die 4,5:1 für normalen Text. Feldhinweise wie „(optional)" sind echter
   Inhalt, kein Dekor — deshalb die kräftigere Neutralstufe (6,2:1). */
.feld-hinweis {
  font-weight: var(--weight-regular);
  color: var(--neutral-700);
}

/* Zweispaltige Zeile (Name + E-Mail) aus Muster 3i */
.formular-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .formular-raster {
    grid-template-columns: 1fr;
  }
}

.feld-input,
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='url'],
.wpcf7 textarea,
input.feld-input,
textarea.feld-input {
  width: 100%;
  border: var(--border-width-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-input);
  padding: 13px 15px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-headline);
  margin: 0;
}

/* Abstände zwischen den Feldern kommen vom Formular, nicht von Feld-Rändern —
   sonst addieren sie sich mit dem gap in .feld/.formular-raster.
   Dieselbe Stufe wie `.formular-raster` (14px), damit die zweispaltige Zeile
   und die Zeilen darüber/darunter denselben Rhythmus haben. */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* CF7 wickelt Absätze um Absende-Knopf und Fußnote. Deren normaler
   Außenabstand addierte sich zum gap — dort standen 34px statt 14px, was das
   Formular unnötig auseinanderzog. */
.wpcf7-form > p {
  margin: 0;
}

/* Einzige Ausnahme: Der Absende-Knopf darf sich etwas absetzen. */
.wpcf7-form > p:has(input[type='submit']),
.wpcf7-form > p:has(button[type='submit']) {
  margin-top: 6px;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 textarea {
  min-height: 110px;
  resize: vertical;
}

.wpcf7 ::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.feld-input:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: 2px solid var(--blau-400);
  outline-offset: 1px;
}

.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-body-color);
}

.einwilligung input[type='checkbox'],
.wpcf7 input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--abae-blau);
  flex-shrink: 0;
  margin: 2px 0 0;
}

/* Einwilligung aus Contact Form 7: dessen verschachtelte Spans zu einer
   Checkbox-Text-Zeile flach ziehen (Design-System: Einwilligung.jsx). */
.feld-einwilligung .wpcf7-list-item {
  margin: 0;
}

.feld-einwilligung .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 0;
}

.feld-einwilligung .wpcf7-list-item-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--text-body-color);
}

/* Blau, nicht magenta: Das Design-System reserviert die Signalfarbe für den
   Kampagnen-CTA („Mitmachen“). Beide Formular-Muster zeigen #36557D. */
.wpcf7 input[type='submit'] {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 17px;
  border-radius: var(--radius-control);
  background: var(--abae-blau);
  color: #fff;
  border: var(--border-width-control) solid var(--abae-blau);
  padding: 15px 26px;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--transition-schnell);
}

.wpcf7 input[type='submit']:hover {
  background: var(--blau-900);
  border-color: var(--blau-900);
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin-left: 0;
}

/* Fußnote unter dem Absende-Button („Antwort in der Regel …“) */
.formular-fussnote {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   Galerie / Karussell
   ========================================================================== */

.galerie {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.galerie-track {
  display: flex;
  transition: transform 0.3s ease;
}

.galerie-slide {
  flex: 0 0 100%;
}

.galerie-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.galerie-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.galerie-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-rund);
  background: var(--border-strong);
  border: 0;
  cursor: pointer;
  padding: 0;
}

.galerie-dot.is-active {
  background: var(--abae-magenta);
}

/* ==========================================================================
   Lesespalten-Inhalt (page.php) & Seiten-Kopf
   ========================================================================== */

.content-page {
  padding: var(--abschnitt-y) 0;
}

.content-page .entry-content {
  max-width: var(--inhalt-max);
  font-size: var(--text-body);
  line-height: var(--leading-roomy);
}

.content-page .entry-content > * + * {
  margin-top: var(--space-4);
}

.page-head {
  padding: var(--space-8) 0 var(--space-6);
}

.page-head-title {
  font-size: var(--text-display-l);
}

.content-page h1.headline-display {
  font-size: var(--text-display-l);
  margin-bottom: var(--space-6);
}

.entry-content h2,
.entry-content h3 {
  margin-top: var(--space-7);
}

.entry-content blockquote {
  margin: var(--space-6) 0;
  padding: 4px 0 4px 18px;
  border-left: var(--border-akzent) solid var(--abae-magenta);
  font-style: italic;
  color: var(--text-headline);
  font-size: var(--text-body-l);
}

.entry-content li + li {
  margin-top: var(--space-2);
}

/* ==========================================================================
   Block-Seite (template-blockseite.php) — Lesebreite als Default,
   Sektions-Blöcke laufen volle Breite (bringen eigenes .wrap mit)
   ========================================================================== */

.blockseite-content {
  padding: 0 0 var(--abschnitt-y);
}

/* Endet die Seite mit einem randlosen Band (dunkelblau oder hellblau), würde
   der Innenabstand darunter als weißer Streifen vor der Fußzeile stehen. */
.blockseite-content:has(> .band:last-child),
.blockseite-content:has(> .flaeche-quiet:last-child),
.blockseite-content:has(> .sektion:last-child) {
  padding-bottom: 0;
}

.blockseite-content > * {
  max-width: var(--seite-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-seite);
  padding-right: var(--gutter-seite);
}

.blockseite-content > * + * {
  margin-top: var(--space-4);
}

/* Freier Text (Absätze, Überschriften, Listen) bleibt in Lesebreite */
.blockseite-content > p,
.blockseite-content > h1,
.blockseite-content > h2,
.blockseite-content > h3,
.blockseite-content > h4,
.blockseite-content > ul,
.blockseite-content > ol,
.blockseite-content > blockquote,
.blockseite-content > .wp-block-heading {
  max-width: calc(var(--inhalt-max) + 2 * var(--gutter-seite));
}

.blockseite-content > h2.headline-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-m);
  letter-spacing: normal;
  margin-top: var(--space-8);
}

.blockseite-content > .sektion,
.blockseite-content > .hero-sektion,
.blockseite-content > .intro-sektion,
.blockseite-content > .band,
.blockseite-content > .flaeche-quiet {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

@media (max-width: 780px) {
  .blockseite-content > * {
    padding-left: var(--gutter-seite-mobil);
    padding-right: var(--gutter-seite-mobil);
  }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  font-size: var(--text-caption);
  color: var(--text-muted);
  padding: var(--space-5) 0 0;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--abae-magenta);
}

.breadcrumb .aktuell {
  color: var(--text-headline);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   Einzelbeitrag (single.php) — Lesespalte + Seitenleiste
   ========================================================================== */

.beitrag-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--inhalt-max)) 1fr;
  gap: var(--space-9);
  padding: var(--space-6) 0 var(--abschnitt-y);
  align-items: start;
}

.beitrag-kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--space-6);
}

.beitrag-kopf h1 {
  font-size: var(--text-h2);
  margin: 0;
}

.beitrag-meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.beitrag-meta a {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}

/* Beitragsbild im Einzelbeitrag: ebenfalls unbeschnitten. Hochformat lief
   hier bisher vertikal verzerrt (aspect-ratio 16/9 wirkungslos, weil
   `height: auto` fehlte und WordPress' height-Attribut gewann). */
.beitrag-hauptbild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.beitrag-inhalt-spalte .entry-content {
  max-width: none;
}

.beitrag-inhalt-spalte .entry-content > p:first-child {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  color: var(--text-headline);
}

.beitrag-schlagworte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

.beitrag-teilen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-caption);
}

.beitrag-teilen a,
.beitrag-teilen button {
  font-weight: var(--weight-bold);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 6px 12px;
  color: var(--abae-blau);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-caption);
  font-family: var(--font-ui);
}

.beitrag-teilen a:hover,
.beitrag-teilen button:hover {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.autor-box {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.autor-box img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-rund);
  object-fit: cover;
}

.autor-box-name {
  font-weight: var(--weight-bold);
  color: var(--text-headline);
  font-size: 17px;
}

.autor-box-rolle {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.seitenleiste-box {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 22px;
}

.seitenleiste-box .fusszeile-titel {
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.verwandte-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.verwandte-liste li + li {
  margin-top: 0;
  border-top: 1px solid var(--border-hairline);
}

.verwandte-liste a {
  display: block;
  padding: 10px 0;
  font-weight: var(--weight-semibold);
  color: var(--text-headline);
  font-size: var(--text-body-s);
  line-height: 1.4;
}

.verwandte-liste a:hover {
  color: var(--abae-magenta);
}

@media (max-width: 1000px) {
  .beitrag-layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ==========================================================================
   Kandidierenden-Detailseite (Kategorie team-2026)
   ========================================================================== */

.kandidat-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-9);
  padding: var(--space-6) 0 var(--abschnitt-y);
  align-items: start;
}

.kandidat-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.kandidat-kurzprofil {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 22px;
  margin-top: var(--space-4);
}

.kandidat-detail h1 {
  font-size: var(--text-h1);
  margin: 0;
}

.kandidat-slogan {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-s);
  line-height: var(--leading-headline);
  color: var(--abae-magenta);
  margin: var(--space-3) 0 var(--space-5);
}

.kandidat-detail .entry-content {
  max-width: none;
}

.kandidat-schwerpunkte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: var(--space-5) 0;
}

.kandidat-aktionen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

@media (max-width: 1000px) {
  .kandidat-layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ==========================================================================
   Beitragsübersicht / Archiv (3c) — Liste + Seitenleiste
   ========================================================================== */

.archiv-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--space-8);
  padding: var(--space-6) 0 var(--abschnitt-y);
  align-items: start;
}

.archiv-kopf {
  padding-top: var(--space-8);
}

.archiv-kopf h1 {
  font-size: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
}

.archiv-anzahl {
  color: var(--text-muted);
  font-size: var(--text-body-s);
  margin-top: 6px;
}

.archiv-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.archiv-filter a {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 6px 12px;
  color: var(--text-body-color);
}

.archiv-filter a.aktiv,
.archiv-filter a:hover {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

.archiv-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.beitrag-zeile {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* In der Zeile sitzt das Bild oben in seiner Spalte und behält sein
   Seitenverhältnis — vorher zog `height: 100%` es auf die Zeilenhöhe und
   verzerrte den Ausschnitt. */
.beitrag-zeile .beitrag-bild {
  align-self: start;
  height: auto;
}

.beitrag-zeile .beitrag-inhalt {
  padding: 20px;
}

@media (max-width: 600px) {
  .beitrag-zeile {
    grid-template-columns: 1fr;
  }

  .beitrag-zeile .beitrag-bild {
    height: auto;
  }
}

.pagination {
  display: flex;
  gap: 6px;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  color: var(--abae-blau);
  padding: 0 10px;
}

.pagination .page-numbers.current {
  background: var(--abae-blau);
  border-color: var(--abae-blau);
  color: #fff;
}

.pagination .page-numbers:hover:not(.current) {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

/* Seitenleisten-Widgets (Suche, Zeitraum, Themen, Autorinnen und Autoren) */
.suche-form {
  display: flex;
  gap: 8px;
}

.suche-form input[type='search'] {
  flex: 1;
  border: var(--border-width-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-input);
  padding: 10px 13px;
  font-family: var(--font-ui);
  font-size: 16px;
  margin: 0;
  min-width: 0;
}

.suche-form button {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 15px;
  border-radius: var(--radius-control);
  background: var(--abae-blau);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
}

.seitenleiste-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-body-s);
}

.seitenleiste-liste li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.seitenleiste-liste li:last-child {
  border-bottom: 0;
}

.seitenleiste-liste .anzahl {
  color: var(--text-faint);
}

.themenwolke {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.themenwolke a {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 4px 10px;
  color: var(--text-body-color);
  line-height: 1.4;
}

/* Vier Gewichtsstufen nach Häufigkeit des Schlagworts (Stufe 1 = selten).
   Feste Stufen statt stufenloser Größe, damit die Wolke im Typo-Raster
   bleibt und nicht beliebig aussieht. */
.themenwolke a.themenwolke-1 {
  font-size: var(--text-label);
}

.themenwolke a.themenwolke-2 {
  font-size: var(--text-caption);
}

.themenwolke a.themenwolke-3 {
  font-size: var(--text-body-s);
  color: var(--text-headline);
}

.themenwolke a.themenwolke-4 {
  font-size: var(--text-body);
  color: var(--text-headline);
  border-color: var(--border-strong);
}

.themenwolke a:hover {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

.autor-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.autor-zeile img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-rund);
  object-fit: cover;
}

@media (max-width: 1000px) {
  .archiv-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Programm-Seite (3a) — Kernforderungen, Kapitel, Programmpunkte, Dialog
   ========================================================================== */

.programm-hero {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-8);
}

.programm-hero h1,
.programm-hero h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  margin: var(--space-2) 0 var(--space-4);
}

.programm-hero .intro-lead {
  margin-bottom: var(--space-5);
}

.programm-sprungliste {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 22px;
}

.programm-sprungliste .fusszeile-titel {
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.programm-sprungliste ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: kapitel;
}

.programm-sprungliste a {
  display: flex;
  gap: 10px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-s);
  color: var(--text-headline);
  counter-increment: kapitel;
}

.programm-sprungliste a::before {
  content: counter(kapitel);
  color: var(--text-faint);
  font-weight: var(--weight-black);
  min-width: 18px;
}

.programm-sprungliste a:hover {
  color: var(--abae-magenta);
}

.programm-legende-intro {
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--text-headline);
}

/* Legende: dieselben Zeilen wie die Programmpunkte, nur nebeneinander und
   ohne Nummer — so ist die Zuordnung Farbe → Stufe unmittelbar. */
.programm-legende {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.programm-punkt--legende {
  grid-template-columns: 10px 1fr;
  cursor: default;
  padding-right: 16px;
}

.programm-punkt--legende .programm-punkt-nr {
  padding: 0;
}

.programm-punkt--legende .programm-punkt-satz {
  font-size: var(--text-body-s);
}

@media (max-width: 900px) {
  .programm-legende {
    grid-template-columns: 1fr;
  }
}

/* Kapitelname über den Kernforderungen. Die Forderungen selbst nutzen
   dieselben .programm-punkt-Zeilen wie der Rest des Programms (früher waren
   sie ein abweichendes zweispaltiges Kartenraster) — so wie in der
   gedruckten Fassung, wo sie ebenfalls unter Kapitelnamen als dieselben
   farbigen Zeilen stehen. */
.programm-kern-gruppe {
  font-size: var(--text-h4);
  color: var(--text-headline);
  margin: var(--space-5) 0 var(--space-2);
}

.programm-kern-gruppe:first-of-type {
  margin-top: 0;
}

.programm-kern-gruppe a {
  color: inherit;
}

.programm-kern-gruppe a:hover {
  color: var(--abae-magenta);
}

@media (max-width: 780px) {
  .programm-hero {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }

  /* „HANDLUNGSFÄHIG" ist in 48px Edo SZ rund 360px breit und lässt sich als
     ein Wort nicht umbrechen — auf 390px-Geräten schob das die ganze Seite
     seitlich über den Rand. Kleinere Display-Größe plus Trennung als
     Sicherheitsnetz für weitere lange Wörter. */
  .programm-hero h1,
.programm-hero h2 {
    font-size: var(--text-display-s);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Fließtext-Blöcke des Programms (Vorwort, Wer wir sind, Leitmotiv).
   Überschrift über dem Text, Text über die volle Breite des Kastens.
   Bewusste Abweichung von der 660px-Lesebreite (--inhalt-max), die im
   Design-System für Beitragsseiten gilt: Auf der Programmseite wirkte die
   halb leere Fläche neben dem Text wie ein Fehler — Entscheidung des
   Auftraggebers 2026-08-08. Falls die Zeilen auf sehr breiten Monitoren zu
   lang werden, genügt hier ein max-width auf .programm-textblock. */
.programm-textblock {
  margin-top: var(--abschnitt-y);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.programm-textblock-inhalt > :last-child {
  margin-bottom: 0;
}

.programm-textblock--quiet {
  background: var(--surface-quiet);
}

.programm-textblock h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-headline);
  margin: 0 0 var(--space-3);
}

.programm-textblock p:last-child {
  margin-bottom: 0;
}

/* Leitsatz — der eine Satz, auf den das ganze Programm einzahlt. Größer,
   fett, auf ruhiger Fläche mit Signalkante; bewusst kein Edo SZ, das ist im
   Design-System Slogans und Sektionstiteln vorbehalten. */
.leitsatz {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-quiet);
  border-left: var(--border-akzent) solid var(--abae-magenta);
  border-radius: var(--radius-card);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--text-headline);
}

/* Begriffserklärungen zum Leitsatz als Anstriche mit fettem Begriff. */
.leitmotiv-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.leitmotiv-liste li {
  position: relative;
  padding-left: 22px;
  line-height: var(--leading-body);
}

.leitmotiv-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--abae-magenta);
}

.leitmotiv-liste strong {
  color: var(--text-headline);
}

.programm-werte-label {
  font-weight: var(--weight-bold);
  color: var(--text-headline);
  margin-bottom: var(--space-2);
}

.programm-werte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.programm-werte li {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  padding: 6px 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-headline);
}

/* Info-Kasten im Kapitel (z.B. Strabs-Erklärung nach Kapitel 4) — wie die
   Textblöcke: Überschrift oben, Text über die volle Breite. */
.programm-infobox {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-left: var(--border-akzent) solid var(--abae-blau);
  border-radius: var(--radius-card);
  background: var(--surface-quiet);
}

.programm-infobox h4 {
  font-size: var(--text-h4);
  color: var(--text-headline);
  margin: 0 0 var(--space-3);
}

.programm-infobox p:last-child {
  margin-bottom: 0;
}

.programm-infobox-link a {
  font-weight: var(--weight-bold);
}

/* Schlusswort */
.programm-schluss {
  margin-top: var(--abschnitt-y);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--abae-blau);
  color: var(--text-on-dark);
}

.programm-schluss h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-headline);
  color: #fff;
  margin: 0 0 var(--space-3);
}

.programm-schluss p {
  color: var(--text-on-dark-muted);
}

.programm-schluss-aktion {
  margin: var(--space-5) 0 var(--space-6);
}

.programm-signatur {
  font-weight: var(--weight-bold);
  color: #fff !important;
  margin-bottom: var(--space-2);
}

/* Zusatz unter der Signatur: gleiche Zeilen wie die Hero-Unterzeile der
   Startseite, bewusst in normaler Stärke — die Signatur soll fett bleiben. */
.programm-signatur-zusatz {
  color: var(--text-on-dark-muted);
  margin-bottom: 0;
}

.programm-kapitel {
  padding-top: var(--abschnitt-y);
}

/* Kapitel-Einstieg: Nummer, Titel und Leadzeile über dem Einleitungstext,
   der Text läuft wie die Punktzeilen darunter über die volle Breite. */
.programm-kapitel-einstieg {
  margin-bottom: var(--space-5);
}

.programm-kapitel-kopf {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: var(--space-2);
}

.programm-kapitel-nr {
  font-family: var(--font-plakat);
  font-weight: var(--weight-bold);
  font-size: 40px;
  color: var(--blau-200);
  line-height: 1;
}

.programm-kapitel-kopf h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-headline);
  letter-spacing: normal;
  margin: 0;
}

.programm-kapitel-lead {
  color: var(--abae-magenta);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
}

.programm-punkte {
  display: flex;
  flex-direction: column;
}

/* Programmpunkte: Rand IMMER sichtbar (nicht erst bei Hover) und Farbstufe
   nach Priorität — dasselbe Prinzip wie im gedruckten Programm (dort rot /
   blau / dunkelblau mit farbig hinterlegten Zeilen), nur in der
   Markenpalette: Kernforderung magenta, Schwerpunkt blau, Rest neutral.
   Die Nummer sitzt wie im PDF auf einer farbigen Kachel links. */
.programm-punkte {
  gap: 10px;
}

.programm-punkt {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: stretch;
  padding: 0 16px 0 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-schnell), background var(--transition-schnell);
}

.programm-punkt-nr {
  font-size: 16px;
  font-weight: var(--weight-black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  align-self: stretch;
}

.programm-punkt-text,
.programm-punkt-frage {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Kernforderung — Signalstufe */
.programm-punkt--kern {
  background: var(--magenta-100);
  border-color: var(--magenta-200);
}

.programm-punkt--kern .programm-punkt-nr {
  background: var(--abae-magenta);
}

.programm-punkt--kern:hover {
  border-color: var(--abae-magenta);
}

/* Schwerpunkt — Markenblau */
.programm-punkt--schwer {
  background: var(--blau-100);
  border-color: var(--blau-200);
}

.programm-punkt--schwer .programm-punkt-nr {
  background: var(--blau-700);
}

/* Das Schwerpunkt-Badge nutzt sonst dieselbe helle Blaufläche wie die Zeile
   und verschwindet darin — auf blauem Grund weiß mit Kontur. */
.programm-punkt--schwer .prio-badge--schwerpunkt {
  background: var(--surface-card);
  border: 1px solid var(--blau-200);
}

.programm-punkt--schwer:hover {
  border-color: var(--blau-700);
}

/* Einzelmaßnahme — neutral, aber ebenfalls mit sichtbarer Kontur */
.programm-punkt--basis {
  background: var(--neutral-50);
}

/* Hellblaue Kachel mit blauer Nummer statt weißer Schrift auf Dunkelblau:
   Die leichteste Stufe darf optisch nicht am schwersten wiegen. --blau-400
   wäre noch heller, trägt aber weder weiße (2,7:1) noch blaue Schrift
   (2,8:1) — --blau-200 mit --abae-blau kommt auf 4,8:1 und erfüllt damit
   WCAG AA für normalen Text. */
.programm-punkt--basis .programm-punkt-nr {
  background: var(--blau-200);
  color: var(--abae-blau);
}

.programm-punkt--basis:hover {
  border-color: var(--border-strong);
}

.programm-punkt-text {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--text-body-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.programm-punkt-frage {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-faint);
  white-space: nowrap;
  align-self: center;
}

.programm-punkt:hover .programm-punkt-frage {
  color: var(--abae-magenta);
}

@media (max-width: 780px) {
  .programm-punkt {
    grid-template-columns: 44px 1fr;
  }

  .programm-punkt-frage {
    display: none;
  }
}

/* Frage-Dialog (Modal) — einzige Komponente mit Dialog-Schatten */
.programm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-dialog);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.programm-dialog-overlay.is-open {
  display: flex;
}

.programm-dialog {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dialog);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 26px;
  position: relative;
}

.programm-dialog h4 {
  font-size: var(--text-h4);
  margin: 4px 0 12px;
}

.programm-dialog-zitat {
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  font-size: var(--text-caption);
  color: var(--text-headline);
  margin-bottom: var(--space-4);
}

.programm-dialog-schliessen {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: transparent;
  font-size: 18px;
  color: var(--neutral-700);
  cursor: pointer;
}

.programm-dialog-schliessen:hover {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

/* ==========================================================================
   Login-Karte (page-templates/template-login.php)
   ========================================================================== */

.login-sektion {
  background: var(--surface-quiet);
  padding: var(--space-10) 0;
}

.login-karte {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
  max-width: 440px;
  margin: 0 auto;
  padding: 34px;
}

.login-karte h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: normal;
  margin: 0 0 8px;
}

.login-karte .login-hinweis {
  color: var(--text-muted);
  font-size: var(--text-body-s);
  margin: 0 0 var(--space-5);
}

/* Felder: `wp_login_form()` liefert Label und Eingabe nebeneinander in einem
   <p> und die Eingabe ohne jede Klasse außer `.input` — ohne diese Regeln
   rendert der Browser seine Standardfelder (schmal, grauer 2px-Rahmen), was
   im Muster 3g als einzige Stelle der Seite sichtbar aus dem Rahmen fiel.
   Werte identisch zu `.feld-input` und zu assets/css/login.css, damit
   /login/ und wp-login.php dieselbe Karte zeigen. */
.login-karte .login-username,
.login-karte .login-password {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 var(--space-4);
}

.login-karte .login-username label,
.login-karte .login-password label {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--text-headline);
  line-height: 1.3;
}

.login-karte input[type='text'],
.login-karte input[type='email'],
.login-karte input[type='password'] {
  width: 100%;
  margin: 0;
  border: var(--border-width-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-input);
  padding: 13px 15px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-headline);
}

.login-karte input[type='text']:focus,
.login-karte input[type='email']:focus,
.login-karte input[type='password']:focus {
  border-color: var(--abae-magenta);
  outline: 2px solid var(--magenta-200);
  outline-offset: 1px;
}

.login-karte .login-remember {
  font-size: var(--text-caption);
  margin: 0 0 var(--space-5);
}

/* Das <label> umschließt die Checkbox — die Zeile entsteht deshalb im Label,
   nicht im <p> darum. */
.login-karte .login-remember label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-body-color);
}

.login-karte input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--abae-blau);
}

.login-karte .login-submit {
  margin: 0;
}

.login-karte .button-primary,
.login-karte input[type='submit'] {
  width: 100%;
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 17px;
  border-radius: var(--radius-control);
  background: var(--abae-blau);
  color: #fff;
  border: 0;
  padding: 15px 24px;
  cursor: pointer;
}

.login-karte .button-primary:hover,
.login-karte input[type='submit']:hover {
  background: var(--blau-900);
}

.login-fuss {
  border-top: 1px solid var(--border-hairline);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* ==========================================================================
   Wahlplakate (Plugin abae-wahlplakate) — Galerie, Detail, Sammelalbum
   ========================================================================== */

.plakat-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.plakat-filter a,
.plakat-filter button {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 6px 12px;
  color: var(--text-body-color);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
}

.plakat-filter .aktiv,
.plakat-filter a:hover,
.plakat-filter button:hover {
  color: var(--abae-magenta);
  border-color: var(--border-signal);
}

.raster-plakate {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raster-gap);
}

.plakat-karte {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Seitenverhältnis der echten A1-Plakate (1413 × 2000 px). Bewusst nicht 2/3:
   Bei exakt dem Verhältnis der Vorlagen füllt das Motiv den Rahmen ohne jeden
   Anschnitt. */
.plakat-karte-bild {
  width: 100%;
  aspect-ratio: 1413 / 2000;
  background: var(--surface-quiet);
  overflow: hidden;
}

/* Pflicht, nicht Kür: Der Rahmen oben ist ein Wrapper-Element, das Bild darin
   ein eigenes. Ohne diese Regel behält es seine natürliche Höhe, während die
   Breite auf die Spalte gestaucht wird — das Motiv erscheint dann extrem in
   die Länge gezogen (gemessen 150 × 1087 statt 295 × 417). */
.plakat-karte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alles, was kein A1-Hochformat ist (Beachflags, Bauzaunbanner im Querformat),
   wird eingepasst statt angeschnitten. */
.plakat-karte--passgenau .plakat-karte-bild {
  background: #fff;
}

.plakat-karte--passgenau .plakat-karte-bild img {
  object-fit: contain;
}

.plakat-karte-fuss {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plakat-karte-titel {
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--text-headline);
}

.plakat-karte-meta {
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 1000px) {
  .raster-plakate {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px) {
  .raster-plakate {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sammelalbum: Fortschritt + gesperrte Karten */
.album-fortschritt {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.album-fortschritt-balken {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  overflow: hidden;
}

.album-fortschritt-balken > span {
  display: block;
  height: 100%;
  background: var(--abae-magenta);
  border-radius: var(--radius-pill);
}

.album-karte-gesperrt {
  aspect-ratio: 1413 / 2000;
  background: var(--surface-platzhalter);
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-karte-frage {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-rund);
  background: var(--neutral-0);
  color: var(--text-faint);
  font-weight: var(--weight-black);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Galerie (Muster 3e) — flaches Raster, Filter nach Programmkapitel.
   Die Seitenüberschrift kommt vom Seitenkopf; hier steht nur die Unterzeile,
   damit es keine Dopplung gibt.
   -------------------------------------------------------------------------- */

.plakat-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.plakat-kopf-lead {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-muted);
}

.plakat-filter {
  margin-bottom: 0;
}

.plakat-karte-fuss .prio-badge {
  align-self: flex-start;
  margin-bottom: 2px;
}

.plakat-filter-leer {
  margin: var(--space-6) 0;
  color: var(--text-muted);
}

.plakat-meldeband {
  margin-top: var(--space-7);
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.plakat-meldeband p {
  margin: 0;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Motivseite (Muster 3h) — das Thema führt, die Person steht darunter.
   -------------------------------------------------------------------------- */

.plakat-detail {
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
}

.plakat-detail-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: start;
  margin-top: var(--space-4);
}

.plakat-detail-bild img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-quiet);
}

.plakat-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.plakat-detail-titel {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.08;
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  color: var(--text-headline);
  text-wrap: balance;
}

.plakat-detail-person {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  color: var(--text-muted);
}

.plakat-detail-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-5);
}

/* Sammeln ist die einzige Sammel-Berührung außerhalb des Albums — und eine
   bewusste Handlung. Nach dem Klick bleibt der Knopf als Quittung stehen. */
.btn.ist-gesammelt,
.btn.ist-gesammelt:hover {
  background: var(--surface-quiet);
  border-color: var(--border-default);
  color: var(--text-headline);
  cursor: default;
}

.plakat-detail-sammelhinweis {
  margin: 12px 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Steht anstelle des Sammeln-Knopfes, wenn dieses Motiv nicht gescannt wurde.
   `--neutral-700` statt `--text-muted`: Der Satz erklärt die Spielregel, ist
   also echter Inhalt und muss die 4,5:1 halten (siehe .feld-hinweis). */
.plakat-detail-scanhinweis {
  margin: var(--space-5) 0 0;
  padding: 12px 14px;
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--neutral-700);
}

/* „Das steht dahinter" — die zugeordneten Programmpunkte, nach Kapitel
   gruppiert. Berührt ein Motiv mehrere Kapitel, stehen sie nebeneinander,
   statt dass sich das Motiv für eines entscheiden müsste. */
.plakat-dahinter {
  background: var(--surface-quiet);
  color: inherit;
}

.plakat-dahinter h2 {
  color: var(--text-headline);
  margin: 0 0 var(--space-5);
}

.plakat-dahinter-gruppe + .plakat-dahinter-gruppe {
  margin-top: var(--space-6);
}

.plakat-dahinter-kapitel {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--abae-magenta);
}

.plakat-dahinter-punkte {
  display: grid;
  gap: 12px;
}

/* Auf der Programmseite öffnet ein Punkt den Rückfrage-Dialog; hier ist er
   reine Information und darf nicht anklickbar wirken. */
.plakat-dahinter .programm-punkt {
  cursor: default;
  background: var(--surface-card);
}

.plakat-dahinter .programm-punkt:hover {
  border-color: var(--border-default);
}

.plakat-upload {
  margin: var(--space-7) 0 0;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.plakat-upload h2 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--text-headline);
}

.plakat-upload-status {
  font-weight: var(--weight-bold);
  color: var(--text-headline);
}

.plakat-login-hinweis {
  margin: var(--space-6) 0 0;
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: 12px 16px;
}

/* Kein Sonderabstand: „Weitere Motive" folgt direkt auf das blaue Band und
   nutzt denselben Sektionsrhythmus wie alle anderen Abschnitte. */

/* --------------------------------------------------------------------------
   Sammelalbum (Muster 3f) — eigene Grundgesamtheit: alles mit QR-Code,
   nach Objektart gruppiert. Bewusst KEINE Kopie der Galerie.
   -------------------------------------------------------------------------- */

.album-hero {
  background: var(--abae-blau);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.album-hero h2 {
  margin: 6px 0 12px;
  color: #fff;
  font-size: var(--text-display-m);
  line-height: 1.05;
}

.album-hero .eyebrow {
  color: var(--magenta-200);
}

/* Nur die Textspalte auf dem blauen Band — NICHT die weiße Fortschrittskarte
   daneben. Vorher traf die Regel jedes <p> im Hero und färbte den Hinweis
   „Der Code steht neben dem QR-Code." hellblau auf Weiß (Kontrast 1,26:1). */
.album-hero-text p {
  margin: 0;
  color: var(--text-on-dark-muted);
  max-width: 52ch;
}

.album-fortschritt-label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--neutral-700);
}

.album-fortschritt-zahl {
  font-size: 22px;
  font-weight: var(--weight-black);
  color: var(--text-headline);
}

.album-einloesen {
  margin-top: 4px;
}

.album-einloesen-zeile {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.album-einloesen-zeile .feld-input {
  flex: 1;
  letter-spacing: 0.14em;
}

.album-hinweis {
  margin: var(--space-5) 0 0;
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: 12px 16px;
}

.album-sektion {
  margin-top: var(--space-7);
}

.album-sektion-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.album-sektion-kopf h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-s);
  color: var(--text-headline);
}

.album-sektion-stand {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  white-space: nowrap;
}

.album-sektion-hinweis {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.raster-album {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.album-karte-frei {
  display: none;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

/* Dasselbe Verhältnis wie die gesperrte Karte, sonst springt das Raster beim
   Freischalten. */
.album-karte-frei img {
  width: 100%;
  aspect-ratio: 1413 / 2000;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  background: var(--surface-quiet);
}

.album-karte-name {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text-headline);
}

/* Freigeschaltet = Server kennt die Karte ODER sie wurde lokal gesammelt.
   Beides zählt; früher schlossen sich die Wege gegenseitig aus. */
.album-karte.ist-frei .album-karte-gesperrt {
  display: none;
}

.album-karte.ist-frei .album-karte-frei {
  display: flex;
}

.album-karte-gesperrt {
  border-radius: var(--radius-card);
}

/* Kandidierenden-Detailseite: „Wofür X steht" — Themen-Chips ins Programm,
   darunter die Motive der Person. */
.kandidat-motive {
  padding-top: var(--space-7);
}

.kandidat-themen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-5);
}

/* Melde-Panel steht auf der Motivseite abgesetzt unter dem Hauptteil — ein
   nackter Knopf „Plakat melden" neben „Teilen" las sich wie eine Beschwerde
   über das Plakat statt wie ein Hinweis für uns. */
.plakat-detail .plakat-meldeband {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Melde-Dialog — kleines Formular, Muster wie der Rückfrage-Dialog im Programm
   -------------------------------------------------------------------------- */

.melde-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: none;
  border-radius: var(--radius-card);
  padding: 0;
  background: var(--surface-card);
  color: var(--text-body-color);
  box-shadow: 0 24px 60px rgba(35, 56, 79, 0.28);
}

.melde-dialog::backdrop {
  background: rgba(35, 56, 79, 0.5);
}

.melde-dialog-inhalt {
  position: relative;
  padding: 28px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.melde-dialog-inhalt h2 {
  margin: 0;
  font-size: var(--text-display-s);
  line-height: 1.15;
  color: var(--text-headline);
}

.melde-dialog-lead {
  margin: 0;
  color: var(--text-muted);
}

.melde-dialog-schliessen {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--neutral-700);
  padding: 4px 8px;
}

.melde-dialog-angemeldet {
  margin: 0;
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  font-size: var(--text-caption);
}

.melde-dialog-aktionen {
  margin: 4px 0 0;
}

.melde-dialog-ergebnis {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.melde-dialog-ergebnis.ist-erfolg {
  color: var(--text-headline);
  font-weight: var(--weight-bold);
}

.melde-dialog-ergebnis.ist-fehler {
  color: var(--abae-magenta);
  font-weight: var(--weight-bold);
}

/* Honigtopf: für Menschen unsichtbar, für Bots ein Feld wie jedes andere.
   Bewusst kein display:none — manche Bots überspringen versteckte Felder. */
.melde-dialog-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sammel-Dialog — Ziel der QR-Codes von Objekten ohne eigene Motivseite.
   Ohne JavaScript bleibt er als offenes Panel stehen und ist voll bedienbar.
   -------------------------------------------------------------------------- */

.sammel-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: none;
  border-radius: var(--radius-card);
  padding: 0;
  background: var(--surface-card);
  color: var(--text-body-color);
  box-shadow: 0 24px 60px rgba(35, 56, 79, 0.28);
  z-index: 1000;
}

.sammel-dialog::backdrop {
  background: rgba(35, 56, 79, 0.5);
}

.sammel-dialog-inhalt {
  padding: 28px 30px 24px;
}

.sammel-dialog-titel {
  margin: 6px 0 14px;
  font-size: var(--text-display-s);
  line-height: 1.1;
  color: var(--text-headline);
}

.sammel-dialog-stand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.sammel-dialog-stand strong {
  color: var(--text-headline);
}

.sammel-dialog-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}

.sammel-dialog-schliessen {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

@media (max-width: 1000px) {
  .raster-album {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 860px) {
  .plakat-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .plakat-detail-titel {
    font-size: var(--text-display-s);
  }

  .album-hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: 28px 24px;
  }
}

@media (max-width: 780px) {
  .raster-album {
    grid-template-columns: repeat(3, 1fr);
  }

  .plakat-kopf {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .raster-album {
    grid-template-columns: repeat(2, 1fr);
  }

  .plakat-detail-aktionen .btn,
  .sammel-dialog-aktionen .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ==========================================================================
   404 / Leerzustände
   ========================================================================== */

.leerzustand {
  text-align: center;
  padding: var(--space-10) 0;
}

.leerzustand h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-m);
  letter-spacing: normal;
}

.leerzustand .btn {
  margin-top: var(--space-5);
}

/* ==========================================================================
   Mitmachen-Seite — Design-System-Muster 3i
   ========================================================================== */

/* Magenta-Variante des Eyebrows (Muster 3i: Label über der Edo-Headline) */
.eyebrow--signal {
  color: var(--text-signal);
}

.button-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: var(--space-1);
}

.hinweis-klein {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* ── Intro-Band: Text + Fakten-Karte ──────────────────────────────── */

.mitmachen-intro-raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.mitmachen-intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mitmachen-intro-text h2,
.mitmachen-intro-text p {
  margin: 0;
}

.fakten-karte {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fakten-liste {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fakten-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: 10px;
  border-bottom: var(--border-width) solid var(--border-hairline);
}

.fakten-zeile:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fakten-zeile dt {
  font-size: var(--text-body);
  color: var(--text-body-color);
}

.fakten-wert {
  margin: 0;
  font-size: 22px;
  font-weight: var(--weight-black);
  color: var(--text-headline);
  white-space: nowrap;
}

/* Der letzte Fakt ist ein Satz, keine Zahl — kleiner und magenta. */
.fakten-wert--signal {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-signal);
}

/* ── Mitglied & Spenden: zwei ruhige Flächen ──────────────────────── */

.mitmachen-details-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.mitmachen-karte {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mitmachen-karte > h3 {
  margin: 0;
  font-size: var(--text-display-s);
}

.mitmachen-karte > p {
  margin: 0;
}

.schritt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.schritt {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}

.schritt-nummer {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-rund);
  background: var(--abae-blau);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.schritt p {
  margin: 0;
  line-height: 1.55;
}

.bank-karte {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bank-daten {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-headline);
}

.spenden-cta {
  align-self: flex-start;
}

/* ── Dunkles Band: Unterstützung + Formular ─────────────────────── */

.mitmachen-kontakt-raster {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: start;
}

.mitmachen-kontakt-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mitmachen-kontakt-text h3 {
  margin: 0;
  font-size: 34px;
  color: #fff;
}

.mitmachen-kontakt-text p {
  margin: 0;
  font-size: var(--text-body-l);
  line-height: var(--leading-body);
  color: var(--text-on-dark-muted);
}

.chip-reihe {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Wortmarken-Chips statt Icons (Design-Regel: kein Icon-Set) */
.chip-aufgabe {
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-control);
  padding: 8px 13px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: #fff;
}

/* Weiße Formular-Karte im dunklen Band. Die Formular-Innereien kommen von
   Contact Form 7 und werden über die Formular-Styles weiter oben gestaltet. */
/* Formular-Panel — Formulare stehen IMMER auf einer eigenen Fläche, nie direkt
   auf dem Seitenhintergrund. Auf hellen Seiten die ruhige Fläche, auf einem
   dunklen Band die weiße Karte (Muster 3i).

   `color` ist hier Pflicht, keine Kosmetik: Ohne eigene Textfarbe erbt die
   weiße Karte im blauen Band dessen weiße Schrift — auf /mitmachen/ stand die
   Einwilligung dadurch weiß auf weiß (Kontrast 1:1, faktisch unsichtbar). */
.formular-karte,
.kontakt-formular {
  background: var(--surface-quiet);
  border-radius: var(--radius-card);
  padding: 26px;
  color: var(--text-body-color);
}

.band .formular-karte,
.band .kontakt-formular {
  background: var(--surface-card);
}

.formular-karte h2,
.formular-karte h3,
.kontakt-formular h2,
.kontakt-formular h3 {
  color: var(--text-headline);
}

/* Antwortzeit-Fußnote: gleiche Begründung wie bei .feld-hinweis. */
.formular-fussnote {
  color: var(--neutral-700);
}

.formular-karte .wpcf7 input[type='submit'],
.kontakt-formular .wpcf7 input[type='submit'] {
  width: auto;
}

/* ── Responsiv ────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .mitmachen-intro-raster,
  .mitmachen-details-raster,
  .mitmachen-kontakt-raster {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

@media (max-width: 780px) {
  .mitmachen-karte,
  .fakten-karte,
  .formular-karte {
    padding: 20px;
  }

  .mitmachen-kontakt-text h3 {
    font-size: 28px;
  }
}

/* ==========================================================================
   Kontakt-Sektion (Muster 2a) — Text links, Formular rechts
   ========================================================================== */

.kontakt-sektion {
  border-top: var(--border-width) solid var(--border-default);
}

.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: start;
}

.kontakt-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kontakt-text h2 {
  margin: 0;
  font-size: var(--text-display-m);
}

.kontakt-text p {
  margin: 0;
  font-size: var(--text-body-l);
  line-height: var(--leading-body);
}

@media (max-width: 1000px) {
  .kontakt-raster {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ==========================================================================
   Formulare für Angemeldete — Kontaktdaten sind aus dem Konto bekannt
   ========================================================================== */

.formular-angemeldet {
  background: var(--surface-quiet);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
}

/* Die vorbelegten Felder bleiben im Formular (CF7 braucht sie für die
   Benachrichtigungs-Mail), werden aber nicht mehr gezeigt. Über :has() am
   Feld-Wrapper statt über die Zeile: So verschwinden genau Name und E-Mail,
   auch wenn in derselben Zeile später ein weiteres Feld steht.

   Drei Aufhänger, weil die Regel sonst am Markup des jeweiligen Formulars
   hängt: `.feld` ist unser eigener Wrapper aus seed-formulare.php, `label`
   und `p` fangen Formulare ab, die noch (oder wieder) im CF7-Standardmuster
   `<label>Text [feld]</label>` gepflegt sind. Genau daran ist das Ausblenden
   auf abae.eu unbemerkt vorbeigelaufen, solange dort der Altstand der
   Formulare lief — sichtbar wurde es erst im Rückfrage-Dialog des
   Programms. */
.abae-formular--angemeldet .feld:has(.wpcf7-form-control-wrap[data-name='your-name']),
.abae-formular--angemeldet .feld:has(.wpcf7-form-control-wrap[data-name='your-email']),
.abae-formular--angemeldet label:has(> .wpcf7-form-control-wrap[data-name='your-name']),
.abae-formular--angemeldet label:has(> .wpcf7-form-control-wrap[data-name='your-email']),
.abae-formular--angemeldet > p:has(> label > .wpcf7-form-control-wrap[data-name='your-name']),
.abae-formular--angemeldet > p:has(> label > .wpcf7-form-control-wrap[data-name='your-email']) {
  display: none;
}