/* ============================================================
   Daniel Schütz · Samtgemeindebürgermeister-Kandidat Elbtalaue
   ------------------------------------------------------------
   Designsystem v2 — abgeleitet aus den Druckmaterialien
   (Blau-Verlauf, kursive Bold-Typo, Gold-Badge) und den
   Referenz-Analysen in /Inspiration:
   · colinallred.com  → warmes Creme-Canvas (#F9F8F4), Foto-Hero,
     Pill-Buttons, Navy-Agenda-Karten, „Paid for by“-Box
   · gallegoforarizona.com → Serif-Fließtext (PT Serif),
     Versal-Index mit Hairlines, dokumentarische Split-Sektionen
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  --creme: #F9F8F4;          /* Seiten-Canvas, wirkt weiß (Allred) */
  --creme-tief: #F9F8F4;     /* vereinheitlicht: keine Beige-Flächen mehr */
  --nacht: #0C1B3E;          /* tiefes Navy: Text, Footer */
  --navy: #16255C;           /* Karten, Panels */
  --royal: #24346E;          /* Plakat-Verlauf oben */
  --blau: #2C4390;           /* Plakat-Verlauf Mitte */
  --azur: #3E6CB4;           /* Plakat-Verlauf unten */
  --gold: #FFD35E;           /* parteilos-Badge */
  --gold-tief: #8A6400;      /* Gold-Ton für Text auf hellem Grund */
  --linie: rgba(12, 27, 62, 0.16);
  --linie-hell: rgba(255, 255, 255, 0.25);
  --verlauf: linear-gradient(126deg, var(--royal) 0%, var(--blau) 46%, var(--azur) 100%);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --grotesk: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --serif: "PT Serif", Georgia, serif;
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 18px 40px rgba(12, 27, 62, 0.16);
}

/* ---------- Grundlagen ---------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--nacht);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nacht); }

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

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--nacht);
  padding: 0.6rem 1rem;
  font-family: var(--grotesk);
  font-weight: 700;
  z-index: 100;
}
.skiplink:focus { left: 0.5rem; top: 0.5rem; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }
.wrap-schmal { max-width: 860px; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { line-height: 1.05; margin: 0 0 0.5em; }

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--nacht);
  text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 4.5vw, 3.4rem); }

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--navy);
}

p { margin: 0 0 1.15em; }

.vorspann {
  font-size: 1.22rem;
  line-height: 1.7;
}

.klein {
  font-family: var(--grotesk);
  font-size: 0.88rem;
  color: rgba(12, 27, 62, 0.72);
}

/* Gold markiertes Wort in Überschriften (Allred: Pinsel-Highlight) */
.gz { font-style: inherit; color: var(--gold-tief); }
h1 .gz, .auf-dunkel .gz { color: var(--gold); }

/* Versal-Kicker (Allred „AGENDA“, Gallego Issue-Index) */
.kicker {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0 0 1.1rem;
}
.auf-dunkel .kicker { color: var(--gold); }

/* Der eine Gold-Badge aus dem Plakat — nur im Hero */
.badge-parteilos {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-style: italic;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.3rem 1.2rem;
  transform: skewX(-12deg);
  margin-bottom: 1.4rem;
}
.badge-parteilos > span { display: inline-block; transform: skewX(12deg); }

/* ---------- Buttons: Pills wie bei Allred ---------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 2.1em;
  border-radius: 999px;
  border: 2px solid var(--gold);
  box-shadow: 0 3px 10px rgba(12, 27, 62, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn:hover {
  background: var(--azur);
  border-color: var(--azur);
  color: #fff;
  box-shadow: 0 8px 20px rgba(12, 27, 62, 0.18);
  transform: translateY(-1px);
}

.btn-ghost { background: transparent; border-color: var(--linie-hell); color: #fff; box-shadow: none; }

.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 3px 10px rgba(12, 27, 62, 0.2); }

.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); box-shadow: none; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* Pfeil-Textlink (Allred „Colin's Story →“) */
.pfeil-link {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 0.3em;
}
.pfeil-link::after { content: " →"; }
.pfeil-link:hover { color: var(--gold-tief); }
.auf-dunkel .pfeil-link { color: #fff; }
.auf-dunkel .pfeil-link:hover { color: var(--gold); }

/* ---------- Kopfleiste ---------- */

.termin-leiste {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1rem;
}
.termin-leiste strong { color: var(--gold); font-weight: 700; }
/* Die Leiste führt seit der Wahl auf das Statement zur Stichwahl und ist
   deshalb vollflächig klickbar. */
.termin-leiste a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.termin-leiste a:hover,
.termin-leiste a:focus-visible { color: #fff; border-bottom-color: var(--gold); }

/* ---------- Navigation ---------- */

.kopf {
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.kopf.ist-gescrollt {
  border-bottom-color: transparent;
  box-shadow: 0 4px 18px rgba(12, 27, 62, 0.09);
}

.kopf-innen {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.4rem clamp(0.9rem, 2.5vw, 1.6rem) 0.75rem clamp(1.1rem, 3vw, 2rem);
  min-height: 160px;
  max-width: 1240px;
  margin: 0 auto;
}
/* Nav-Zeile etwas weiter vom rechten Rand weg, nur auf Desktop:
   Mobil bleibt beim ursprünglichen (engeren) Innenabstand. */
@media (min-width: 901px) {
  .kopf-innen { padding-right: clamp(1.0125rem, 2.8125vw, 1.8rem); }
}
@media (max-width: 780px) {
  .kopf-innen { min-height: 120px; }
}
@media (max-width: 400px) {
  .kopf-innen { min-height: 92px; gap: 0.5rem 0.9rem; }
}

/* Logo agiert unabhängig von der Nav-Leiste: frei positioniert,
   beeinflusst deren Höhe/Ausrichtung nicht (und umgekehrt). */
.marke {
  position: absolute;
  left: clamp(0.8rem, 2.5vw, 1.5rem);
  top: 8px;
  line-height: 1;
}
/* Logo etwas höher nur auf Desktop, Mobil bleibt beim ursprünglichen
   Versatz (kleinerer Header, engerer Platz nach oben). */
@media (min-width: 901px) {
  .marke { top: -14px; }
}
.marke img {
  display: block;
  height: 130px;
  width: auto;
}
@media (max-width: 780px) {
  .marke img { height: 92px; }
}
@media (max-width: 400px) {
  .marke img { height: 68px; }
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 1.6rem;
}
.nav a {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--nacht);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s ease;
}
.nav a:hover { border-bottom-color: rgba(12, 27, 62, 0.38); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--navy); }

/* Spenden-Button oben rechts (Gallego/Allred-Muster): bewusst groß und
   dominant, der klare Haupt-CTA der ganzen Navigation. */
.btn-spenden {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75em 1.9em;
  border-radius: 999px;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(12, 27, 62, 0.22);
}
/* Zieht Spenden-Button (Anker der flex-end-Zeile) und damit die ganze
   Nav-Zeile sichtbar näher an den rechten Rand, ohne Logo oder
   Kopf-Innen-Box anzufassen. */
@media (min-width: 901px) {
  .btn-spenden { margin-right: -40px; margin-top: -3px; }
}
.deck-kopf .btn-spenden { color: var(--nacht); }
@media (max-width: 780px) {
  .btn-spenden { font-size: 0.92rem; padding: 0.65em 1.5em; }
}
@media (max-width: 400px) {
  .btn-spenden { font-size: 0.74rem; padding: 0.5em 1rem; letter-spacing: 0.03em; }
}

@media (max-width: 900px) {
  .kopf-innen { justify-content: center; text-align: center; }
  .nav { justify-content: center; }
}

/* ---------- Mobile: Hamburger-Menü (greift nur mit JavaScript) ---------- */

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem;
  margin: -0.6rem;
  border-radius: 8px;
}
.nav-burger .linie {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger .linie + .linie { margin-top: 6px; }

@media (max-width: 780px) {
  /* Drei-Spalten-Raster (Logo / Spenden / Menü) statt Flex-Zentrierung:
     Die mittlere Spalte nimmt genau den Platz zwischen Logo und Menü-
     Knopf ein, der Spenden-Button sitzt darin mittig, unabhängig von
     der Bildschirmbreite. */
  .js .kopf-innen {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    text-align: left;
  }
  .js .marke { position: static; grid-column: 1; grid-row: 1; }
  .js .btn-spenden { grid-column: 2; grid-row: 1; justify-self: center; }
  .js .nav-burger { display: block; grid-column: 3; grid-row: 1; }
  .js .nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.8rem;
  }
  .js .kopf.offen .nav { display: flex; }
  .js .nav a {
    font-size: 1.08rem;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid var(--linie);
  }
  .js .nav a:last-child { border-bottom-color: transparent; }
  .js .nav a[aria-current="page"] {
    color: var(--gold-tief);
    font-weight: 700;
    border-bottom: 1px solid var(--linie);
  }
  .js .nav a:hover { border-bottom-color: var(--linie); }
  /* Burger wird zum X */
  .js .kopf.offen .nav-burger .linie:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .js .kopf.offen .nav-burger .linie:nth-child(2) { opacity: 0; }
  .js .kopf.offen .nav-burger .linie:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* ---------- Hero: Navy-Panel auf Creme (Allred-Rahmen) ---------- */

/* Hero mit dokumentarischem Hintergrundvideo (Gallego-Muster):
   randlos, Video läuft bis unter die Kopfzeile, Übergänge per Verlauf. */
.hero-panel {
  position: relative;
  margin: 0;
  border-radius: 0;
  background: var(--nacht);
  color: #fff;
  overflow: hidden;
}

/* Umschließt Video + Play-Knopf. Auf Desktop deckungsgleich mit dem
   Hero-Panel (randloser Hintergrund); auf Mobil eigene Sektion mit
   fester Aspect-Ratio, siehe Media-Query weiter unten. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Drei Verläufe: oben dunkel für die transparente Kopfzeile,
   links für die Lesbarkeit des Textes, unten Übergang in die
   nahtlos anschließende blaue Sektion. */
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Rein dekorativ: darf Klicks auf darunterliegende Elemente (z. B.
     den Video-Knopf, der wegen des eigenen Stacking-Contexts von
     .hero-media sonst hier hängen bleiben) nicht abfangen. */
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 27, 62, 0.92) 0%, rgba(12, 27, 62, 0.45) 16%, rgba(12, 27, 62, 0) 34%),
    linear-gradient(to bottom, rgba(12, 27, 62, 0) 62%, var(--nacht) 100%),
    linear-gradient(100deg, rgba(15, 30, 70, 0.78) 0%, rgba(15, 30, 70, 0.38) 55%, rgba(15, 30, 70, 0.25) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* Verlängert den Verlauf vom Hero in die nächste Sektion um eine feste,
   bildschirmunabhängige Strecke, statt ihn abrupt im Video enden zu lassen. */
.hero-uebergang {
  height: 1cm;
  background: var(--nacht);
}

/* Transparente Kopfzeile über dem Video (nur Startseite) */
.deck-kopf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.deck-kopf .termin-leiste { background: transparent; }
.deck-kopf .kopf {
  position: static;
  background: transparent;
  /* Die Hairline war für den soliden Creme-Kopf anderer Seiten gedacht;
     über dem Hero-Video schwebend blieb nur ein irritierender dünner
     Strich ohne echte Trennfunktion übrig. */
  border-bottom: none;
}
.deck-kopf .nav a { color: #fff; }
.deck-kopf .nav a:hover { border-bottom-color: rgba(255, 255, 255, 0.4); }
.deck-kopf .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.deck-kopf .nav-burger .linie { background: #fff; }
.deck-kopf .kopf.offen { background: var(--nacht); }

.hero-innen {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  min-height: max(600px, 94svh);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(14rem, 20vh, 16rem) clamp(1.4rem, 4vw, 3.5rem) clamp(4rem, 9vh, 6rem);
  /* Der Container selbst bleibt auf der rechten Seite leer (nur der
     Text-Block links füllt ihn), lag damit aber als Klickfläche über
     dem Video-Knopf im .hero-media darunter. Nur der Inhalt soll
     Klicks fangen, nicht die leere Box drumherum. */
  pointer-events: none;
}
.hero-innen > div { max-width: 640px; pointer-events: auto; }

/* „Video ansehen“-Auslöser (Gallego-Muster: Kreis mit Play + Label).
   Sitzt frei im Hero, dort wo zuvor das rotierende Stimme-Badge lag. */
.video-knopf {
  position: absolute;
  right: clamp(2rem, 6vw, 5rem);
  bottom: clamp(2.4rem, 5vw, 4.2rem);
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--grotesk);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem;
}
.video-knopf .video-kreis {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid #fff;
  /* Halbtransparent mit Weichzeichner statt Vollton: bleibt auch dann
     sichtbar, wenn der Video-Verlauf an dieser Stelle zufällig ebenfalls
     dunkles Navy zeigt und der Knopf sonst darin verschwimmt. */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(6, 12, 30, 0.6), 0 0 0 8px rgba(6, 12, 30, 0.28);
  display: grid;
  place-items: center;
}
.video-knopf .video-kreis::after {
  content: "";
  display: block;
  margin-left: 6px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.video-knopf .video-text {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* Video-Overlay (Lightbox) */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.5rem);
}
.video-modal[hidden] { display: none; }
.video-modal-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 24, 0.88);
}
.video-modal-inhalt {
  position: relative;
  width: min(960px, 100%);
  background: #000;
  border-radius: var(--radius-klein);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.video-modal-inhalt video {
  display: block;
  width: 100%;
  height: auto;
}
/* Unter 900px bekommt das Video eine eigene Sektion mit fester
   Aspect-Ratio (statt als randloser, auf 94svh gestreckter Hintergrund
   zu wirken, was Hochformat-Ausschnitte zur Folge hatte). Der Text
   folgt darunter im normalen Fluss, die Kopfzeile wird wieder solide
   (wie auf allen anderen Seiten), damit sie das Video nicht überlagert. */
@media (max-width: 900px) {
  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Video beginnt erst im unteren Drittel der Nav-Bar (Button/Logo/
       Menü, ca. 93px), nicht am Seitenanfang: darüber bleibt die Fläche
       durchgehend Navy (Hero-Panel-Hintergrund), wie beim Vorbild. */
    margin-top: 123px;
  }
  .hero-panel::before { display: none; }
  /* Ersetzt den (auf Mobil ausgeblendeten) Verlauf über dem ganzen
     Panel durch zwei Verläufe direkt am Video-Kasten: oben ein kurzer
     Übergang aus dem Navy der Kopfzeile (nur die letzten ~10% seiner
     eigenen Höhe, da die Überlappung mit der Nav-Bar jetzt klein ist),
     unten weich ins Navy der folgenden Sektion. */
  .hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 27, 62, 0.95) 0%, rgba(12, 27, 62, 0.5) 15%, rgba(12, 27, 62, 0) 30%);
  }
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 27, 62, 0) 60%, var(--nacht) 100%);
  }
  .hero-innen {
    min-height: auto;
    padding: 2.2rem clamp(1.4rem, 4vw, 2rem) 2.8rem;
  }
  .video-knopf {
    right: 1rem;
    bottom: 1rem;
  }
  .video-knopf .video-kreis { width: 56px; height: 56px; }
  .video-knopf .video-kreis::after { border-width: 9px 0 9px 15px; margin-left: 4px; }
  .video-knopf .video-text { font-size: 0.8rem; }
  /* Kopfzeile bleibt wie auf Desktop transparent und schwebt über dem
     Video (siehe .hero-media::before oben für die Lesbarkeit). */
}

.hero-panel .kicker { color: var(--gold); }

.hero-panel h1 {
  font-size: clamp(3.6rem, 8.5vw, 6.4rem);
  color: #fff;
  margin-bottom: 0.1em;
}
.hero-panel h1::after {
  content: "";
  display: block;
  width: 82%;
  height: 7px;
  margin-top: 0.13em;
  background: #fff;
}

/* Slogan wie der Film-Abbinder: weiß + gold */
.hero-slogan {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0.5em 0 0.6em;
  color: #fff;
}
.hero-slogan .gz { color: var(--gold); }

.hero-text {
  font-size: 1.14rem;
  max-width: 33em;
  color: rgba(255, 255, 255, 0.94);
}

.hero-termin {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1.6rem;
}
.hero-termin strong { color: var(--gold); }

/* Freigestelltes Portrait auf Gold-Kreis, nirgends beschnitten */
.hero-foto {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  align-self: end;
}
.hero-foto::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 94%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--gold);
  border-radius: 50%;
}
.hero-foto img {
  position: relative;
  width: 88%;
  margin: 0 auto;
  filter: drop-shadow(0 16px 32px rgba(8, 14, 34, 0.35));
  /* Schnittkanten des Freistellers (unten + seitlich) weich auslaufen lassen */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 98%),
                      linear-gradient(to right, transparent 1%, #000 12%, #000 88%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 84%, transparent 98%),
              linear-gradient(to right, transparent 1%, #000 12%, #000 88%, transparent 99%);
  mask-composite: intersect;
}


/* ---------- Seitenköpfe der Unterseiten: Typo auf Creme ---------- */

.seiten-kopf {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--linie);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.seiten-kopf h1 {
  font-size: clamp(2.9rem, 6.5vw, 4.8rem);
  color: var(--navy);
}
.seiten-kopf .vorspann { max-width: 42em; margin-bottom: 0.4em; }

/* Navy-Variante des Seitenkopfs (Gallego-Muster: jede Unterseite
   beginnt mit einem dunklen Band aus Kicker, Titel und Intro).
   Startet im selben tiefen Navy wie der Hero auf der Startseite
   (var(--nacht)), statt gleich mit dem helleren Plakat-Verlauf. */
.seiten-kopf-navy {
  background: linear-gradient(120deg, var(--nacht) 0%, var(--navy) 42%, var(--blau) 78%, var(--azur) 100%);
  border-bottom: none;
  color: #fff;
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
@media (min-width: 721px) {
  /* Alle Unterseiten-Banner gleich hoch, unabhängig von Textlänge. Das
     eigene Padding der Section entfällt hier zugunsten von Padding auf
     dem Textblock, damit die Zeile (und damit das Foto) exakt die volle
     Banner-Höhe einnimmt statt nur den Bereich zwischen den Paddings.
     Foto und Text bleiben normale Flex-Geschwister mit fester Foto-Breite,
     sodass sie sich per Flexbox-Garantie nie überlappen können (keine
     aspect-ratio- oder Positions-Rechnerei mehr, die bei einzelnen
     Viewport-Breiten danebenliegen kann). */
  .seiten-kopf-navy {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: clamp(300px, 32vw, 360px);
  }
  .seiten-kopf-navy .seiten-kopf-inner {
    flex: 1 1 auto;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  .seiten-kopf-navy .seiten-kopf-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.6rem, 5vw, 4rem);
    box-sizing: border-box;
  }
  .seiten-kopf-navy .seiten-kopf-foto:not(.foto-echt) {
    align-self: flex-end;
    margin-bottom: clamp(2.6rem, 5vw, 4rem);
  }
  .seiten-kopf-navy .seiten-kopf-foto.foto-echt {
    flex: 0 0 auto;
    align-self: stretch;
    width: clamp(200px, 28vw, 340px);
    height: auto;
    aspect-ratio: auto;
  }
}
.seiten-kopf-navy h1 { color: #fff; }
.seiten-kopf-navy .kicker { color: var(--gold); }
.seiten-kopf-navy .vorspann { color: rgba(255, 255, 255, 0.94); }

/* Foto-Frame im Banner: derselbe weich auslaufende Freisteller-Schnitt
   wie beim Hero-Portrait auf der Startseite (.hero-foto), damit das
   Bild ohne harte Kante in den Verlauf übergeht. Auf allen Unterseiten
   mit .seiten-kopf-navy identisch eingesetzt. */
.seiten-kopf-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2.5rem;
  flex-wrap: wrap;
}
.seiten-kopf-inner .seiten-kopf-text { flex: 1 1 380px; max-width: 640px; }
.seiten-kopf-foto {
  flex: 0 0 auto;
  width: clamp(140px, 15vw, 220px);
  align-self: flex-end;
}
.seiten-kopf-foto img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(6, 12, 30, 0.35));
  mask-image: linear-gradient(to bottom, #000 82%, transparent 98%),
              linear-gradient(to right, transparent 1%, #000 14%, #000 86%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 98%),
                      linear-gradient(to right, transparent 1%, #000 14%, #000 86%, transparent 99%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
/* Variante für echte Fotos (statt des freigestellten Wahlplakat-Portraits):
   kein Freisteller-Maskeneffekt, stattdessen Bildkarte mit Rundung. */
.seiten-kopf-foto.foto-echt {
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: 1 / 1;
  align-self: center;
}
.seiten-kopf-foto.foto-echt img {
  height: 100%;
  object-fit: cover;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}
@media (max-width: 720px) {
  .seiten-kopf-inner { justify-content: center; text-align: center; }
  .seiten-kopf-inner .seiten-kopf-text { flex-basis: 100%; }
  .seiten-kopf-foto { width: 118px; align-self: center; }
  /* Echte Fotos (statt des freigestellten Portraits) sollen auf Mobil
     nicht auf ein 118px-Vorschaubild schrumpfen, sondern wie auf dem
     Desktop als volle Bildfläche wirken: breites Banner über dem Text.
     Keine feste Aspect-Ratio, damit das Foto nie angeschnitten wird. */
  .seiten-kopf-foto.foto-echt {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .seiten-kopf-foto.foto-echt img {
    height: auto;
    object-fit: contain;
  }
}

/* Sprung-Index im Gallego-Stil: große Zeilen mit Pfeil */
.sprung-liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.sprung-liste li { border-top: 1px solid var(--linie); }
.sprung-liste li:last-child { border-bottom: 1px solid var(--linie); }
.sprung-liste a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--navy);
  padding: 1rem 0.3rem;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.sprung-liste a::after {
  content: "›";
  font-size: 1.2em;
  color: var(--gold-tief);
  transition: transform 0.15s ease;
}
.sprung-liste a:hover { color: var(--gold-tief); padding-left: 0.7rem; }
.sprung-liste a:hover::after { transform: translateX(4px); }

/* Kapitel-Chips (Sprungnavigation über den Fragen) */
.kapitel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2.2rem;
}
.kapitel-chips a {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kapitel-chips a:hover { border-color: var(--gold); background: rgba(255, 211, 94, 0.15); }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: clamp(3rem, 6.5vw, 5.5rem) 0; }
/* Einheitliche Flächen: Abschnitte trennen sich über Hairlines, nicht über Farbwechsel */
.abschnitt-tief { background: none; border-top: 1px solid var(--linie); }

/* Blaue Sektion direkt nach dem Video-Hero: nahtloser Übergang,
   danach harter Schnitt zurück zu Hell (Gallego-Muster) */
.abschnitt-nacht {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.94);
  border-top: none;
}
.abschnitt-nacht h2 { color: #fff; }
.abschnitt-nacht .gz { color: var(--gold); }
.abschnitt-nacht .kicker { color: var(--gold); }
.abschnitt-nacht .pfeil-link { color: #fff; }
.abschnitt-nacht .pfeil-link:hover { color: var(--gold); }
.abschnitt-nacht .fakten-stapel { border-color: rgba(255, 255, 255, 0.22); }
.abschnitt-nacht .fakten-stapel .fakt { border-color: rgba(255, 255, 255, 0.22); }
.abschnitt-nacht .fakt .zahl { color: #fff; }
.abschnitt-nacht .fakt .zahl .einheit { color: var(--gold); }
.abschnitt-nacht .fakt .fakt-titel { color: var(--gold); }

.navy-panel {
  /* Dasselbe dunkle Navy wie die Karten darüber (var(--navy)) soll den
     Großteil der Fläche tragen statt nach 10% schon zu Blau/Azur
     aufzuhellen: hier deutlich länger stehen lassen, erst im letzten
     Drittel zu Blau und ganz am Rand zu Azur übergehen. */
  background: linear-gradient(126deg, var(--navy) 0%, var(--navy) 48%, var(--blau) 82%, var(--azur) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.navy-panel h2 { color: #fff; }
/* Umriss der Samtgemeinde Elbtalaue als dezentes Wasserzeichen mittig
   im Hintergrund (Allred-Muster: Bundesstaat-Silhouette hinter dem
   Spenden-Block). */
.navy-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/elbtalaue-umriss.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(60%, 620px) auto;
  opacity: 0.3;
  pointer-events: none;
}
.navy-panel-innen {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  /* Deutlich großzügiger als vormals (Vorbild: Allred-Spenden-Panel ist
     rund 20% höher und die Betrags-Buttons rund 20% breiter, bei
     gleicher Button-Höhe) – Innenabstand entsprechend vergrößert. */
  padding: calc(clamp(4.5rem, 9vw, 7.5rem) + clamp(1.35rem, 3vw, 2.4rem)) clamp(1.4rem, 9vw, 8.4rem);
}

/* Spenden-Widget: kurzer, zentrierter Kopf über einem vollbreiten
   Betrags-Raster (Allred/Gallego-Muster), statt Text neben den Buttons. */
.spenden-kopf {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* Titel immer einzeilig, auch auf schmalen Viewports. */
#spenden-h {
  white-space: nowrap;
  font-size: clamp(1.25rem, 5.6vw, 3.4rem);
}
.vorspann-klein {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.7rem;
}
.vorspann-klein strong { color: var(--gold); font-weight: 700; }

/* ---------- Split-Sektionen (Gallego) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Foto-Collage ist kürzer als der Fließtext daneben: auf mittlerer
   Höhe der Sektion zentrieren statt oben ausgerichtet. */
.warum-split { align-items: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* Nur in "Warum ich antrete": auf Mobil erst die Fotos, dann der
     Text (Desktop-Nebeneinander bleibt unverändert, Text links). */
  .warum-split .foto-platzhalter-collage { order: -1; }
}

/* Versal-Index mit Hairlines (Gallego Issue-Liste) */
.index-liste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.index-liste li { border-top: 1px solid var(--linie); }
.index-liste li:last-child { border-bottom: 1px solid var(--linie); }
.index-liste a, .index-liste span {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 0.95rem 0.2rem;
}
.index-liste a::after { content: " →"; color: var(--gold-tief); }
.index-liste a:hover { color: var(--gold-tief); }
.auf-dunkel .index-liste li { border-color: var(--linie-hell); }
.auf-dunkel .index-liste a, .auf-dunkel .index-liste span { color: #fff; }
.auf-dunkel .index-liste a::after { color: var(--gold); }
.auf-dunkel .index-liste a:hover { color: var(--gold); }
.auf-dunkel .rahmen-box { border-color: var(--linie-hell); }

/* Richtwerte für die Spenden-Überweisung (Gallego-Muster: Betrags-Raster).
   Jeder Betrag ist ein Link zur Spenden-Seite. */
.spenden-betraege {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}
/* Handgezeichneter Pfeil (Allred-Muster), zeigt auf den 56-€-Betrag
   oben rechts im Raster. Nur auf der Desktop-3-Spalten-Anordnung
   sinnvoll platziert, deshalb unter 620px ausgeblendet. */
.spenden-pfeil {
  position: absolute;
  top: -6.2rem;
  right: 0.4rem;
  width: 140px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 620px) {
  .spenden-pfeil { display: none; }
}
.spenden-betraege .betrag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1rem;
  border-radius: 999px;
  background: var(--azur);
  border: 1.5px solid var(--azur);
  box-shadow: 0 3px 10px rgba(6, 12, 30, 0.18);
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.spenden-betraege .betrag:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--nacht);
  box-shadow: 0 8px 20px rgba(12, 27, 62, 0.18);
}
.spenden-betraege .betrag:active { transform: scale(0.97); }
.spenden-betraege .betrag.ist-gewaehlt {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--nacht);
}
.spenden-betraege .betrag-frei { font-size: 1.05rem; }
@media (max-width: 620px) {
  .spenden-betraege { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .spenden-betraege .betrag { padding: 1.2rem 0.8rem; font-size: 1.1rem; }
}

/* ---------- Agenda-Karten (Allred) ---------- */

/* Immer 3 nebeneinander oder sauber untereinander, nie 2+1 */
.karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.4rem;
}
@media (min-width: 840px) {
  .karten { grid-template-columns: repeat(3, 1fr); }
}

/* Große Agenda-Fläche (Allred): Karten fast in voller Breite,
   große Titel, ruhig und fest im Raster verankert */
.wrap-breit {
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 6vw, 7rem);
}
.agenda-gross h2 { font-size: clamp(2.7rem, 5vw, 4.3rem); }
/* Leitsatz über den Agenda-Karten: groß, aber bewusst schlanker Schnitt */
.agenda-titel {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2.3rem, 4.4vw, 4rem) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: center;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.4em;
  text-wrap: balance;
}
/* Gepinselter Gold-Schwung unter dem Schlüsselwort (Allred-Muster) */
.schwung {
  position: relative;
  white-space: nowrap;
}
.schwung::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -0.18em;
  height: 0.26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 28 5, 55 4.5, 84 6 C 98 6.8, 110 7.6, 117 8.6' stroke='%23FFD35E' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.agenda-gross { padding: clamp(2.4rem, 5vw, 4.5rem) 0; }
/* Größen/Abstände 1:1 vom Allred-Vorbild abgemessen (Karte 427x314px bei
   1512px Viewport): Karten eng nebeneinander, Titel bewusst zurückhaltend,
   der volle Breite füllende Button trägt die visuelle Hauptlast. */
.agenda-gross .karten {
  gap: clamp(0.75rem, 1vw, 1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.agenda-gross .karte {
  padding: clamp(2.4rem, 3.4vw, 2.8rem) clamp(2.2rem, 3.2vw, 2.8rem) clamp(2.8rem, 3.8vw, 3.4rem);
  gap: 1.25rem;
}
/* Titelzone (Kicker „Agenda“ + Titel) 1:1 zentriert in fester Höhe wie im
   Vorbild (132px bei 427px Kartenbreite), damit die Kartenhöhe unabhängig
   von der Wortlänge stimmt. */
.agenda-gross .karte-titelzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(6.5rem, 9vw, 8.25rem);
}
.agenda-gross .karte .kicker {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  margin: 0 0 0.5em;
}
.agenda-gross .karte h3 {
  font-size: clamp(2.2rem, 2.9vw, 2.7rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}
.agenda-gross .karte .btn {
  width: 100%;
  max-width: none;
  padding: 1em 1.5em;
  font-size: 1.15rem;
  line-height: 1.15;
}

/* Agenda-Karten nach Allred: zentriert, ein starkes Wort, Button */
.karte {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-klein);
  padding: clamp(2.2rem, 4vw, 3rem) 1.8rem clamp(2rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.karte .kicker { color: var(--gold); margin-bottom: 0.4rem; }
.karte h3 {
  color: #fff;
  font-size: clamp(2.4rem, 4vw, 3rem);
  margin-bottom: 1.4rem;
}
.karte .btn {
  margin-top: auto;
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* Kreuz-Liste (Stimmkreuz als Marker) */
.kreuzliste {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  font-family: var(--grotesk);
  font-size: 0.98rem;
}
.kreuzliste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
}
.kreuzliste li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--gold-tief);
}
.karte .kreuzliste li::before, .auf-dunkel .kreuzliste li::before { color: var(--gold); }
.karte .kreuzliste a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.karte .kreuzliste a:hover { color: var(--gold); text-decoration: underline; }

/* Positionen-Liste (Kreuzliste als Dropdown mit Kurzerklärung) */
.positionen-liste { margin: 0 0 1.6rem; }
.positionen-liste details { border-top: 1px solid var(--linie); }
.positionen-liste details:last-of-type { border-bottom: 1px solid var(--linie); }
.positionen-liste summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 0.85rem 2.3rem 0.85rem 1.6rem;
  font-family: var(--grotesk);
  font-size: 0.98rem;
  color: var(--navy);
}
.positionen-liste summary::-webkit-details-marker { display: none; }
.positionen-liste summary::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-weight: 700;
  color: var(--gold-tief);
}
.positionen-liste summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--gold-tief);
}
.positionen-liste details[open] summary::after { content: "–"; }
.positionen-liste summary:hover { color: var(--blau); }
.positionen-liste details > div {
  padding: 0 1.6rem 1rem 1.6rem;
}
.positionen-liste details > div p {
  margin: 0;
  font-family: var(--grotesk);
  font-size: 0.95rem;
  color: rgba(12, 27, 62, 0.78);
}

/* ---------- Schwarzes Band (Film-Abbinder) ---------- */

.band {
  background: var(--nacht);
  color: #fff;
  text-align: center;
  padding: clamp(3.4rem, 7vw, 5.5rem) 1.25rem;
}
.band .band-slogan {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.08;
  margin: 0 0 0.35em;
}
.band .band-slogan .gz { color: var(--gold); }
.band p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 40em;
  margin: 0 auto 1.2em;
}

/* ---------- Collage (Über-Teaser): Freisteller auf Navy-Kachel ---------- */

.collage {
  position: relative;
  max-width: 430px;
  margin: 0 auto 1rem;
}
.collage .foto-haupt {
  position: relative;
  border-radius: var(--radius);
  background: var(--verlauf);
  padding: 2rem 2rem 0;
  overflow: hidden;
}
.collage .foto-haupt img {
  width: 100%;
  filter: drop-shadow(0 12px 24px rgba(8, 14, 34, 0.35));
}
.collage .foto-klein {
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 38%;
  border-radius: var(--radius-klein);
  box-shadow: 0 12px 28px rgba(12, 27, 62, 0.3);
  transform: rotate(2.5deg);
  border: 5px solid #fff;
}

/* Foto-Collage: Positionen 1:1 aus dem Gallego-Vorbild „Meet Ruben“
   abgemessen (Bounding-Box aller drei Fotos = 1190 x 952, jede Kachel
   als Prozentanteil davon). Großes Foto oben links, ein hochformatiges
   Foto rechts über die volle Höhe, ein breites Foto unten links. */
.foto-platzhalter-collage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1190 / 952;
}
.foto-collage-haupt,
.foto-collage-rechts,
.foto-collage-unten {
  position: absolute;
  overflow: hidden;
}
.foto-collage-haupt {
  left: 10%;
  top: 0;
  width: 60%;
  height: 49.8%;
  z-index: 1;
}
.foto-collage-rechts {
  left: 63.7%;
  top: 10.4%;
  width: 36.3%;
  height: 58.3%;
  z-index: 2;
}
.foto-collage-unten {
  left: 0;
  top: 46%;
  width: 65%;
  height: 54%;
  z-index: 2;
}
.foto-collage-haupt img,
.foto-collage-rechts img,
.foto-collage-unten img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .collage { margin-bottom: 3rem; }
  .collage .foto-klein { right: 0; }
}

/* ---------- Fakten-Band (drei große Zahlen) ---------- */

.fakten-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.fakt {
  padding: 1.8rem 1.8rem 1.8rem 0;
}
@media (min-width: 820px) {
  .fakt { border-right: 1px solid var(--linie); padding-left: 1.8rem; }
  .fakt:first-child { padding-left: 0; }
  .fakt:last-child { border-right: none; }
}
@media (max-width: 819px) {
  .fakt { border-bottom: 1px solid var(--linie); }
  .fakt:last-child { border-bottom: none; }
}
/* Vertikale Variante: Fakten als seitliches Widget neben Text */
.fakten-stapel {
  border-top: 1px solid var(--linie);
}
.fakten-stapel .fakt {
  border-right: none !important;
  border-bottom: 1px solid var(--linie);
  padding: 1.4rem 0.2rem;
}
.fakten-stapel .fakt:last-child { border-bottom: 1px solid var(--linie); }

.fakt .zahl {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--navy);
}
.fakt .zahl .einheit { color: var(--gold-tief); }
.fakt .fakt-titel {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0.5rem 0 0.4rem;
}
.fakt p { font-size: 0.98rem; margin: 0; }

/* ---------- Termin-Karten (Kennenlern-Tour) ---------- */

.termine { display: grid; gap: 1.2rem; margin: 1.8rem 0; }

.termin-karte {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.2rem 1.5rem 1.2rem 1.2rem;
  box-shadow: 0 2px 10px rgba(12, 27, 62, 0.05);
}
@media (max-width: 700px) {
  .termin-karte {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1.3rem;
  }
  .termin-karte .termin-datum {
    display: inline-flex;
    width: auto;
    justify-self: start;
  }
  .termin-karte .termin-aktion { grid-column: auto; justify-self: start; }
}

.termin-datum {
  background: var(--verlauf);
  color: #fff;
  border-radius: var(--radius-klein);
  text-align: center;
  padding: 0.75rem 0.4rem 0.85rem;
  font-family: var(--grotesk);
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.termin-datum .tag {
  display: block;
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 800;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.termin-datum .monat {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.3rem;
}
.termin-datum .wochentag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.2rem;
}
@media (max-width: 700px) {
  .termin-datum {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
  }
  .termin-datum .tag,
  .termin-datum .monat,
  .termin-datum .wochentag { display: inline; margin-top: 0; }
  .termin-datum .tag { font-size: 1rem; }
  .termin-datum .monat,
  .termin-datum .wochentag {
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
}

.termin-info h3 {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.termin-info .termin-meta {
  font-family: var(--grotesk);
  font-size: 0.95rem;
  color: var(--grau, #4C5875);
  margin: 0;
}
.termin-info .termin-meta strong { color: var(--navy); font-weight: 600; }

.termin-aktion { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
@media (max-width: 700px) { .termin-aktion { flex-direction: row; align-items: center; } }
.termin-aktion .btn {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 0.55em 1.4em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  box-shadow: none;
}
.termin-aktion .btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: none;
}

.termin-karte.geplant { opacity: 0.92; }
.termin-karte.geplant .termin-datum {
  background: none;
  border: 2px dashed var(--linie);
  color: var(--navy);
}
.termin-karte.geplant .termin-datum .monat { color: var(--gold-tief); }
.termin-karte.geplant .termin-datum .wochentag { color: rgba(12, 27, 62, 0.55); }
.termin-karte.geplant .termin-datum .tag { font-size: 1.5rem; padding: 0.55rem 0; }
@media (max-width: 700px) {
  .termin-karte.geplant .termin-datum .tag { font-size: 0.85rem; padding: 0; }
  .termin-karte.geplant .termin-datum .monat,
  .termin-karte.geplant .termin-datum .wochentag { border-left-color: rgba(12, 27, 62, 0.2); }
}

.termine-status {
  font-family: var(--grotesk);
  font-size: 0.88rem;
  color: rgba(12, 27, 62, 0.65);
}

/* Kennenlern-Tour: Übersichtskarte der Stationen (Leaflet). */
.tour-karte-wrap {
  position: relative;
  isolation: isolate;
  margin: 1.4rem 0 2.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.tour-karte {
  height: clamp(320px, 42vw, 460px);
  width: 100%;
}
.tour-karte .leaflet-popup-content-wrapper {
  border-radius: var(--radius-klein);
  box-shadow: 0 12px 30px rgba(12, 27, 62, 0.2);
}
.tour-karte .leaflet-popup-content {
  font-family: var(--grotesk);
  font-size: 0.92rem;
  color: var(--grau, #4C5875);
  line-height: 1.55;
  margin: 0.95rem 1.1rem;
}
.tour-karte .leaflet-popup-content strong {
  display: block;
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.tour-karte .leaflet-popup-content .pfeil-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.tour-karte .leaflet-popup-tip-container { filter: drop-shadow(0 6px 6px rgba(12, 27, 62, 0.08)); }
.tour-karte .leaflet-popup-close-button {
  color: rgba(12, 27, 62, 0.4);
  font-size: 1.3rem;
  top: 10px;
  right: 10px;
}
.tour-karte .leaflet-popup-close-button:hover { color: var(--navy); }

/* ---------- Zeitleiste ---------- */

.zeitleiste {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.zeitleiste li {
  position: relative;
  padding: 0 0 1.3rem 1.7rem;
  border-left: 2px solid var(--linie);
  margin-left: 6px;
}
.zeitleiste li:last-child { padding-bottom: 0.2rem; }
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy);
}
.zeitleiste .jahr {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.15rem;
}

/* ---------- Themen-Seite: Vorhaben-Karten im Raster ---------- */

/* Vorhaben-Raster: feste Spaltenzahlen statt auto-fit,
   damit nie eine Karte einzeln unter zwei anderen hängt */
.themen-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin: 1.8rem 0 0;
  align-items: stretch;
}
@media (min-width: 760px) {
  .themen-raster { grid-template-columns: repeat(2, 1fr); }
  .themen-raster.dreier { grid-template-columns: repeat(3, 1fr); }
}

.thema {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.8rem 1.8rem 1.3rem;
  scroll-margin-top: 130px;
  box-shadow: 0 2px 10px rgba(12, 27, 62, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.thema:hover { transform: translateY(-3px); box-shadow: var(--schatten); }

.thema-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.nummer-disc {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
}
.thema h3 { font-size: 1.5rem; margin: 0; }
.thema p:last-child { margin-bottom: 0.4rem; }

/* Fundament-Karte: volle Breite, Navy wie die Agenda-Karten */
.thema-fundament {
  grid-column: 1 / -1;
  background: var(--navy);
  color: #fff;
  border: none;
}
.thema-fundament h3 { color: #fff; }
.thema-fundament .kicker { color: var(--gold); margin-bottom: 0.8rem; }
.thema-fundament .nummer-disc { background: var(--gold); }

.saeule-kopf { margin: 3.6rem 0 0; }
.saeule-kopf:first-of-type { margin-top: 0; }
.saeule-kopf h2 { color: var(--navy); }
.saeule-kopf p { max-width: 46em; }

/* ---------- Plan-Seiten (Muster: Allred-Themenpläne) ---------- */

.plan-untertitel {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--gold);
  margin: -0.3rem 0 1.2rem;
}

.plan-punkt { margin: 2.8rem 0; scroll-margin-top: 130px; }
.plan-punkt h3 {
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  color: var(--gold-tief);
  margin-bottom: 0.7rem;
}
.plan-punkt p { margin-bottom: 0.9em; }
.plan-punkt p strong {
  font-family: var(--grotesk);
  color: var(--navy);
}

.plan-abschnitt-titel {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  color: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 0.35em;
  margin: 2.8rem 0 1rem;
}

/* Kapitelwechsel: weiter zum nächsten Plan */
.plan-weiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 3rem 0 0;
}
.plan-weiter a {
  display: block;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.2rem 1.5rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-weiter a:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.plan-weiter .richtung {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.3rem;
}
.plan-weiter .titel {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--navy);
}

/* Themen-Übersicht: Karten mit Mini-Voranschau */
.karte .kreuzliste {
  text-align: left;
  margin: 0 auto 1.6rem;
  font-size: 0.95rem;
}
.karte .kreuzliste li::before { color: var(--gold); }
.karte .kreuzliste li { color: rgba(255, 255, 255, 0.92); }

/* ---------- Tour-Tabelle ---------- */

.tour-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.tour-tabelle th, .tour-tabelle td {
  text-align: left;
  padding: 0.85rem 0.9rem 0.85rem 0.2rem;
  border-bottom: 1px solid var(--linie);
}
.tour-tabelle th {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tief);
  border-bottom: 2px solid var(--navy);
}
.tour-tabelle td { font-size: 1rem; }
.tabelle-scroll { overflow-x: auto; }

/* ---------- Wiki-Infobox (Über-Seite) ---------- */

/* Artikel + Infobox: nebeneinander, Seitenleiste passt sich fließend an.
   Erst auf schmalen Bildschirmen (Handy/kleines Tablet hochkant) stapeln. */
.mit-seitenleiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 28vw, 330px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) {
  .mit-seitenleiste { grid-template-columns: 1fr; }
  .infobox { order: -1; max-width: 480px; }
}

.infobox {
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 6px solid var(--gold);
  border-radius: var(--radius-klein);
  padding: 1.5rem 1.5rem 1.1rem;
  font-size: 0.92rem;
  position: static;
  z-index: 1;
}
/* sticky nur auf großen Bildschirmen; dazwischen normal mitscrollend,
   damit auf Tablet-Breiten nichts überlappt */
@media (min-width: 1081px) {
  .infobox { position: sticky; top: 130px; }
}
.infobox h2 {
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.infobox img { border-radius: 6px; margin-bottom: 1rem; }
.infobox .portrait-kachel {
  background: var(--verlauf);
  border-radius: 6px;
  padding: 1rem 1rem 0;
  margin-bottom: 1rem;
}
.infobox .portrait-kachel img { margin-bottom: 0; border-radius: 0; }
.infobox table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.infobox td { overflow-wrap: break-word; }
.infobox th, .infobox td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie);
}
.infobox tr:last-child th, .infobox tr:last-child td { border-bottom: none; }
.infobox th {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-tief);
  padding-right: 0.8rem;
  width: 40%;
}

.artikel h2 { margin-top: 2em; font-size: clamp(1.9rem, 3.4vw, 2.4rem); color: var(--navy); }
.artikel h2:first-of-type { margin-top: 0.6em; }
.artikel h1 { color: var(--navy); }

/* ---------- FAQ: Hairline-Accordion ---------- */

.faq details {
  border-top: 1px solid var(--linie);
}
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 0.1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--navy);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--gold-tief);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0.1rem 1.2rem; }
.faq summary:hover { color: var(--blau); }
.faq h2 { margin-top: 1.8em; text-align: center; }
.faq h2:first-of-type { margin-top: 0; }
.faq > p { text-align: center; }

/* ---------- Mitmachen: Bildframe + Karten (Gallego „Take Action“) ---------- */

.mitmachen-sektion { background: var(--creme); }

.mitmachen-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Füllt die ganze Spalte: weißer Hintergrund als Fallback/Letterboxing,
   das Foto liegt komplett unbeschnitten darüber (object-fit: contain). */
.mitmachen-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.mitmachen-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 901px) {
  /* Seitenverhältnis exakt wie das Originalfoto (1307×1600): die Spalte
     wird dadurch automatisch so hoch, dass das Foto sie randlos füllt,
     bei jeder Bildschirmbreite, ohne weißen Rand oben/unten. */
  .mitmachen-bild { aspect-ratio: 1307 / 1600; }
}

/* Zwei Marken-Buttons im Allred-„Volunteer/Donate“-Look. Kein Kind mehr
   von .mitmachen-bild, sondern eigenständig über dem ganzen Grid
   positioniert, damit der Block mittig auf der Seite sitzen kann statt
   nur unter der linken Bildspalte zu kleben. Auf breiten Bildschirmen
   sitzt er mittig auf der Kante zur nächsten Sektion, halb im Bild,
   halb in der folgenden Sektion (siehe Media-Query unten). */
.mitmachen-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  border-radius: var(--radius-klein);
  overflow: hidden;
}
@media (min-width: 901px) {
  .mitmachen-social {
    left: 50%;
    right: auto;
    width: 50%;
    transform: translate(-50%, 50%);
  }
}
.mitmachen-social-btn {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 1rem;
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff;
  transition: filter 0.15s ease;
}
.mitmachen-social-btn svg { flex-shrink: 0; }
.mitmachen-social-btn:hover { filter: brightness(1.1); }
.mitmachen-social-fb { background: #1877F2; }
.mitmachen-social-ig { background: linear-gradient(45deg, #9407A3 0%, #C9146B 30%, #E13940 50%, #F17F1D 70%, #F8D80A 100%); }

.mitmachen-social-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mitmachen-social-avatar {
  width: clamp(1.7rem, 3vw, 2.3rem);
  height: clamp(1.7rem, 3vw, 2.3rem);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mitmachen-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(clamp(2.6rem, 5vw, 4.2rem) + 1.5cm) clamp(1.4rem, 4vw, 3rem);
}
.mitmachen-inhalt .kicker,
.mitmachen-inhalt h2,
.mitmachen-inhalt .vorspann-klein-dunkel {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.mitmachen-inhalt h2 {
  max-width: 10em;
}
.vorspann-klein-dunkel {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(12, 27, 62, 0.75);
  margin-top: 0.35rem;
  max-width: 30em;
}
/* Beschreibung hier bewusst kürzer und größer als die Standardgröße:
   trägt in dieser Sektion mehr visuelles Gewicht. */
.mitmachen-inhalt .vorspann-klein-dunkel {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.45;
}

.mitmachen-karten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  max-width: 20em;
}

/* Die ganze Karte IST der Button (Gallego-„Take-Action”-Muster):
   kein weißes Feld mit separatem Button mehr, sondern ein einziger
   Block mit Titel + Aktionswort. Ohne Hover-Animation. Aufrechte
   (nicht kursive) Titelzeile für ruhigere, klarere Wirkung. Breite
   1:1 an der Kartenbreite des Gallego-Vorbilds ausgerichtet (deren
   Button nimmt nur ~49% der Textspalte ein, nicht deren volle
   Breite); Innenabstand an deren 366x102px-Button übertragen.
   Jede Karte bekommt wie im Vorbild eine eigene Farbe. */
.mitmachen-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  border-radius: var(--radius-klein);
  padding: clamp(1.4rem, 2.4vw, 1.8rem) clamp(1.25rem, 2.3vw, 1.6rem);
  text-decoration: none;
  text-align: center;
}
.mitmachen-karte-gold { background: var(--gold); color: var(--nacht); }
.mitmachen-karte-navy { background: var(--navy); color: var(--creme); }
.mitmachen-karte-azur { background: var(--azur); color: var(--creme); }
.mitmachen-karte-gold:hover { color: var(--nacht); }
.mitmachen-karte-navy:hover,
.mitmachen-karte-azur:hover { color: var(--creme); }
.mitmachen-karte-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Titel immer einzeilig, auch der längste („Weitersagen & mithelfen“):
   Schriftgröße bewusst kleiner gehalten und nowrap statt umbrechen. */
.mitmachen-karte-text h3 {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(0.95rem, 3.4vw, 1.2rem);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  color: inherit;
  margin: 0;
}
.mitmachen-btn {
  display: block;
  width: 100%;
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.3vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
}

@media (max-width: 900px) {
  .mitmachen-grid { grid-template-columns: 1fr; }
  /* Seitenverhältnis exakt wie das Originalfoto (1307×1600, wie auf
     Desktop), statt 4:3: sonst bleiben bei object-fit:contain links
     und rechts weiße Balken, weil das Foto hochkant ist. So füllt das
     einzelne Foto die Spalte randlos, ohne beschnitten zu werden. */
  .mitmachen-bild { width: 100%; aspect-ratio: 1307 / 1600; }
  .mitmachen-inhalt { padding: clamp(1.8rem, 5vw, 2.4rem) clamp(1.1rem, 3vw, 1.8rem); }
  /* Auf Mobil kein freischwebender, zentrierter Block: die Buttons
     fließen normal, aber ganz ans Ende der Sektion (nach den drei
     Karten, direkt vor dem FAQ-Bereich), volle Breite, ohne Rundung. */
  .mitmachen-social {
    position: static;
    order: 1;
    width: 100%;
    transform: none;
    border-radius: 0;
  }
}

/* Umrandete Box (Allred „Paid for by“) */
.rahmen-box {
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.1rem 1.6rem;
  margin: 2.2rem 0 0;
  font-size: 0.98rem;
}
.rahmen-box strong { font-family: var(--grotesk); }

.hinweis {
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-klein);
  padding: 1rem 1.4rem;
  margin: 1.6rem 0;
  font-size: 0.99rem;
}

/* Pull-Quote: eine Zeile aus dem Fließtext herausgegriffen und groß
   gesetzt, um lange Textblöcke aufzulockern. Sparsam einsetzen,
   höchstens ein Zitat je Seite. */
.pull-zitat {
  margin: 2.6rem 0;
  padding: 0.2rem 0 0.2rem 1.6rem;
  border-left: 4px solid var(--gold);
}
.pull-zitat p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.32;
  color: var(--navy);
  max-width: 34em;
}
@media (min-width: 640px) {
  .pull-zitat {
    margin: 3rem 1.5rem;
    padding-left: 2rem;
  }
}

/* ---------- Kontakt-Karten ---------- */

.kontakt-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.kontakt-karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.7rem 1.6rem;
}
.kontakt-karte h3 { font-size: 1.45rem; }
.kontakt-karte .gross {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--navy);
  text-decoration: none;
}
.kontakt-karte .gross:hover { color: var(--azur); }

/* ---------- Fakten-Listen ---------- */

dl.fakten { margin: 1rem 0; }
dl.fakten dt {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-top: 1rem;
}
dl.fakten dd { margin: 0.1rem 0 0; }

/* Presse-Echo: reverse-chronologische Liste externer Berichterstattung.
   Bewusst schlicht, ohne Karten-Optik, da es meist nur wenige Einträge sind.
   Aufbau je Eintrag: Datum + Titel oben als klarer Kopf, Beschreibung darunter
   als eigener Absatz. Bewusst großzügig gesetzt, damit es auch für ältere
   Leserinnen und Leser gut lesbar bleibt (keine durchlaufende Zeile mit
   Mittelpunkt-Trennern). */
.presse-echo {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.presse-echo li {
  position: relative;
  padding: 1.4rem 3.2rem 2.6rem 0;
  border-bottom: 1px solid var(--linie);
  scroll-margin-top: 180px;
}
.presse-echo li:first-child { border-top: 1px solid var(--linie); }
.presse-echo-teilen {
  position: absolute;
  right: 0;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--navy);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.presse-echo-teilen:hover { border-color: var(--azur); color: var(--azur); }
.presse-echo-teilen svg { width: 15px; height: 15px; flex-shrink: 0; }
.presse-echo-teilen-hinweis {
  position: absolute;
  right: 0;
  bottom: 2.4rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.presse-echo-teilen-hinweis.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}
.presse-echo-datum {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.35rem;
}
.presse-echo-titel {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.presse-echo-text {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.75;
}
.presse-echo-text + .presse-echo-text {
  margin-top: 1.2rem;
}
.presse-echo-bilder + .presse-echo-text {
  margin-top: 1.3rem;
}
.presse-echo-text a {
  font-weight: 700;
  color: var(--azur);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.presse-echo-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.presse-echo-bilder img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(12, 27, 62, 0.16);
}
.presse-echo-bilder--schmal {
  grid-template-columns: minmax(0, 340px);
  justify-content: start;
}

/* Blog: Übersichtsliste und einzelner Beitrag. */
.blog-liste {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1.3rem;
}
.blog-karte {
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 1.7rem 1.9rem;
}
.blog-karte-datum {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.35rem;
}
.blog-karte-titel {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
}
.blog-karte-titel a {
  color: var(--navy);
  text-decoration: none;
}
.blog-karte-titel a:hover { text-decoration: underline; }
.blog-karte-text {
  margin: 0 0 0.8rem;
  font-size: 1.08rem;
  line-height: 1.75;
}
.blog-karte-weiter {
  font-weight: 700;
  color: var(--azur);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.artikel-zurueck {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-family: var(--grotesk);
  font-weight: 700;
  color: var(--azur);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.artikel-bild {
  margin: 1.8rem 0;
}
.artikel-bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(12, 27, 62, 0.16);
}
/* Bildnachweis unter Artikelbildern (Pflicht bei CC-Lizenzen). */
.artikel-bild figcaption {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(12, 27, 62, 0.6);
  margin-top: 0.6rem;
}
.artikel-bild figcaption a { color: inherit; }

/* Kapitelüberschrift in der Blog-Liste. */
.blog-kapitel {
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 2.8rem 0 0.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.blog-kapitel:first-of-type { margin-top: 0; }

.zuletzt {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: rgba(12, 27, 62, 0.6);
  margin-top: 2.6rem;
}

/* ---------- Fußbereich ---------- */

.fuss {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.85);
  padding: 4.4rem 0 2.4rem;
  font-size: 0.98rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fuss a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); }
.fuss a:hover { color: var(--gold); }

/* Kopf: Logo links, Social-Icons rechts (Gallego-Muster) */
.fuss-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 3.6rem;
}
.fuss-marke { display: block; line-height: 1; }
.fuss-marke img { display: block; height: 72px; width: auto; }
.fuss-social { display: flex; gap: 0.8rem; }
.fuss-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}
.fuss-social a:hover { color: #fff; }
.fuss-social a:nth-child(1):hover { background: #1877F2; }
.fuss-social a:nth-child(2):hover { background: linear-gradient(45deg, #9407A3 0%, #C9146B 30%, #E13940 50%, #F17F1D 70%, #F8D80A 100%); }

/* Artikel-Social: gleiche Marken-Buttons wie .mitmachen-social-btn auf der
   Startseite, aber statisch statt absolut positioniert, für den Einsatz
   innerhalb von Fließtext-Abschnitten (z. B. "Weblinks"). */
.artikel-social { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0; }
.artikel-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-klein);
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff;
  transition: filter 0.15s ease;
}
.artikel-social-btn svg { flex-shrink: 0; }
.artikel-social-btn:hover { filter: brightness(1.1); }
.artikel-social-fb { background: #1877F2; }
.artikel-social-ig { background: linear-gradient(45deg, #9407A3 0%, #C9146B 30%, #E13940 50%, #F17F1D 70%, #F8D80A 100%); }

/* Eine einzelne Nav-Zeile statt Spalten mit Listen */
.fuss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2.2rem;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 3.6rem;
}
.fuss-nav a { text-decoration: none; }

/* Zeile im Gallego-Muster: Spendenkonto links, V.i.S.d.P.-Box rechts */
.fuss-spenden-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.6rem;
}
.fuss-spenden {
  font-family: var(--grotesk);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.fuss-spenden strong { color: #fff; font-weight: 700; }
.fuss-visdp {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-klein);
  padding: 0.8rem 1.4rem;
  text-align: center;
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.fuss-ende {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-family: var(--grotesk);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
  /* Auf Mobil stapeln sich Logo, Nav, Spendenzeile und Schlusszeile ohnehin
     einspaltig: die für die breite Desktop-Reihe gedachten großen Abstände
     wirken dann nur noch wie Leerlauf. Deutlich enger, plus eine echte
     einspaltige Nav-Liste statt des unruhigen Zeilenumbruchs. */
  .fuss { padding: 2.8rem 0 2rem; }
  .fuss-kopf { justify-content: center; text-align: center; margin-bottom: 2.2rem; }
  .fuss-nav {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 2.2rem;
  }
  .fuss-spenden-reihe { justify-content: center; text-align: center; margin-bottom: 2rem; }
  .fuss-ende { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  /* Auf Mobil zwingt das rechts reservierte Platzhalter-Padding für den
     Teilen-Button (sonst absolut positioniert) jede Textzeile schmaler,
     nicht nur die letzte Zeile über dem Button. Der Button wandert daher
     unter den Text und der Text bekommt die volle Breite plus etwas
     großzügigere Ränder. */
  .wrap-schmal { padding: 0 1.25rem; }
  .presse-echo li { padding: 1.5rem 0 1.7rem; }
  .presse-echo-titel { font-size: 1.2rem; }
  .presse-echo-text { font-size: 1.02rem; line-height: 1.65; }
  .presse-echo-teilen {
    position: static;
    margin-top: 1.1rem;
  }
  .presse-echo-teilen-hinweis {
    position: static;
    display: inline-block;
    margin-top: 0.6rem;
  }
}

@media print {
  .kopf, .termin-leiste, .fuss, .btn, .btn-reihe { display: none; }
}

/* Kalender-Hinweis-Popup: erscheint nur auf iPhone vor dem Öffnen eines
   Termins, weil iOS Safari .ics-Links sonst teils als stillen Download
   statt als Kalender-Eintrag behandelt. Siehe assets/js/kalender-popup.js */
.kalender-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 6vw, 2.5rem);
}
.kalender-modal[hidden] { display: none; }
.kalender-modal-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 24, 0.72);
}
.kalender-modal-inhalt {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: var(--radius-klein);
  padding: 2rem 1.8rem 1.8rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.kalender-modal-titel {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0 0 0.7rem;
}
.kalender-modal-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(12, 27, 62, 0.85);
  margin: 0 0 1.6rem;
}
.kalender-modal-reihe {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.kalender-modal-oeffnen {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9em 1.5em;
  border-radius: 999px;
  border: 2px solid var(--gold);
  cursor: pointer;
}
.kalender-modal-oeffnen:hover { background: var(--azur); border-color: var(--azur); color: #fff; }
.kalender-modal-abbrechen {
  display: inline-block;
  background: transparent;
  border: none;
  color: rgba(12, 27, 62, 0.65);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.4em;
}

/* Cookie-Hinweis: kleines Popup, keine volle Breite */
#cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  max-width: 360px;
  background: var(--navy);
  color: #fff;
  padding: 1.2rem 1.3rem;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
#cookie-banner[hidden] { display: none; }
.cookie-banner-innen {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cookie-banner-text { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.cookie-banner-text a { color: var(--gold); text-decoration: underline; }
.cookie-banner-optionen { display: flex; flex-direction: column; gap: 0.55rem; }
.cookie-banner-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.4;
}
.cookie-banner-option input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }
.cookie-banner-aktionen { display: flex; flex-direction: column; gap: 0.5rem; }
.cookie-banner-aktionen .btn { display: block; width: 100%; text-align: center; padding: 0.6em 1.2em; font-size: 0.92rem; }
.cookie-banner-aktionen .btn-sekundaer {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.cookie-banner-aktionen .btn-sekundaer:hover { border-color: #fff; }
@media (min-width: 560px) {
  #cookie-banner { left: auto; right: 1.5rem; bottom: 1.5rem; }
}

/* Briefwahl-Hinweis (Popup) */
.wahl-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wahl-popup[hidden] { display: none; }
.wahl-popup-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 24, 0.72);
}
.wahl-popup-karte {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 720px);
  overscroll-behavior: contain;
  overflow-y: auto;
  background: #fff;
  color: var(--nacht);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
.wahl-popup-scroll-hinweis {
  display: none;
}
@media (max-width: 700px) {
  .wahl-popup-scroll-hinweis {
    display: flex;
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .wahl-popup-scroll-hinweis[hidden] { display: none; }
  .wahl-popup-scroll-hinweis .scroll-hinweis-kreis {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 6px 16px rgba(12, 27, 62, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scroll-hinweis-huepfen 1.6s ease-in-out infinite;
  }
  .wahl-popup-scroll-hinweis .scroll-hinweis-kreis svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke: var(--nacht);
  }
}
.wahl-popup-bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px 18px 0 0;
  display: block;
}
/* Ab Tablet/Desktop-Breite: Bild links, Text rechts in großzügigerem
   Layout, damit nichts gedrängt wirkt und trotzdem kein Scrollen
   nötig ist. */
@media (min-width: 700px) {
  .wahl-popup-karte {
    flex-direction: row;
    align-items: stretch;
    width: min(820px, 94vw);
    max-height: min(88vh, 780px);
    overflow: hidden;
  }
  .wahl-popup-bild {
    width: 40%;
    flex-shrink: 0;
    height: auto;
    aspect-ratio: auto;
    border-radius: 18px 0 0 18px;
  }
}
.wahl-popup-schliessen {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.wahl-popup-schliessen:hover { background: #fff; }
.wahl-popup-inhalt {
  padding: 1.5rem 1.6rem 1.7rem;
}
.wahl-popup-inhalt h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  color: var(--royal);
}
.wahl-popup-inhalt p {
  margin: 0 0 0.85rem;
  line-height: 1.5;
  font-size: 0.98rem;
}
.wahl-popup-inhalt p:last-of-type { margin-bottom: 0; }
.wahl-popup-aktionen {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wahl-popup-aktionen .btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.85em 1.2em;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.wahl-popup-kleingedrucktes {
  margin: 0.6rem 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: rgba(12, 27, 62, 0.6);
  text-align: center;
}
.wahl-popup-kleingedrucktes a { color: inherit; }
@media (max-width: 480px) {
  .wahl-popup-bild { aspect-ratio: 4 / 3; }
  .wahl-popup-inhalt { padding: 1.25rem 1.1rem 1.4rem; }
}
@media (min-width: 700px) {
  .wahl-popup-inhalt {
    flex: 1;
    min-width: 0;
    padding: 2.1rem 2.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    /* "safe center" zentriert nur, solange der Text hineinpasst. Wird er
       laenger als die Karte, rueckt er nach oben und bleibt vollstaendig
       scrollbar, statt oben und unten abgeschnitten zu werden. */
    justify-content: flex-start;
    justify-content: safe center;
  }
  .wahl-popup-inhalt h2 { font-size: 1.5rem; margin-bottom: 0.85rem; }
  .wahl-popup-inhalt p { font-size: 0.96rem; line-height: 1.55; margin-bottom: 0.7rem; }
  .wahl-popup-aktionen { margin-top: 1.1rem; gap: 0.7rem; flex-shrink: 0; }
  .wahl-popup-aktionen .btn { padding: 0.8em 1.5em; font-size: 0.94rem; }
}
@media (min-width: 700px) and (max-height: 820px) {
  .wahl-popup-karte { max-height: 92vh; }
  .wahl-popup-inhalt {
    padding: 1.6rem 1.9rem;
    justify-content: flex-start;
  }
  .wahl-popup-inhalt h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
  .wahl-popup-inhalt p { font-size: 0.92rem; margin-bottom: 0.5rem; line-height: 1.45; }
  .wahl-popup-aktionen { margin-top: 0.8rem; gap: 0.5rem; }
  .wahl-popup-aktionen .btn { padding: 0.7em 1.4em; font-size: 0.9rem; }
}
@media (min-width: 700px) and (max-height: 620px) {
  .wahl-popup-inhalt { padding: 1.2rem 1.5rem; }
  .wahl-popup-inhalt p { font-size: 0.88rem; line-height: 1.4; margin-bottom: 0.4rem; }
}

/* Scroll-Hinweis (nur mobil): zeigt neuen Besucherinnen und Besuchern,
   dass es unterhalb des sichtbaren Bereichs weitergeht. */
.scroll-hinweis {
  display: none;
}
@media (max-width: 700px) {
  .scroll-hinweis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: fixed;
    right: 0.9rem;
    bottom: 1.4rem;
    z-index: 120;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.35s ease;
  }
  .scroll-hinweis[hidden] { display: none; }
  .scroll-hinweis-kreis {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 8px 22px rgba(12, 27, 62, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scroll-hinweis-huepfen 1.6s ease-in-out infinite;
  }
  .scroll-hinweis-kreis svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke: var(--nacht);
  }
  .scroll-hinweis-text {
    font-family: var(--grotesk);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(12, 27, 62, 0.75);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
  }
}
@keyframes scroll-hinweis-huepfen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hinweis-kreis { animation: none; }
}