/* ==========================================================================
   Website Dietmar Fischer — Komponenten-CSS

   Die Blocknamen entsprechen 1:1 den Bausteinen aus dem Content-Modell
   (MANIFEST.md, Abschnitt 5): site-header, hero, wedge, supporters, events,
   quote, textblock, contact, site-footer. Keine Utility-Klassen — beim
   spaeteren CMS-Einbau wird jeder Block zu genau einem Template-Partial.
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------
   Lokal gehostet (DSGVO). Liegen die Dateien noch nicht vor, faellt der
   Stack sauber auf system-ui zurueck. Siehe assets/fonts/README.md. */

/* Montserrat als Variable Font (wght 100–900) — eine Datei je Subset deckt
   alle vier Schnitte ab. Zwei Dateien statt acht, 103 KB gesamt. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


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

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

html {
  scroll-behavior: smooth;
  /* Sticky Header darf Ankerziele nicht verdecken */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }


/* --- Layout-Primitive ---------------------------------------------------- */

/* --container ist die Inhaltsbreite, nicht die Aussenbreite: das Padding
   kommt oben drauf, damit der Text bei 1440 px genau auf der im Entwurf
   gemessenen Achse (189 px vom Rand) sitzt. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide { max-width: calc(var(--container-wide) + 2 * var(--container-pad)); }

.section { padding-block: var(--section-py); }
.section--grey  { background: var(--c-grey); }
.section--white { background: var(--c-white); }


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

.badge {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0.3em 0.46em 0.32em;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Der Strich sitzt direkt unter der Navy-Flaeche, ohne Abstand und ohne
   seitlichen Versatz. Den optischen Versatz erzeugt die Grafik selbst:
   sie laeuft an einem Ende auf null aus. */
.badge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--strich-h);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
}

.section__head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}

.subline {
  margin-top: 1.15em;
  color: var(--c-navy);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

/* --- prose: Fliesstext aus dem Editor -------------------------------------
   Traegt jeder Container, in den der Redakteur ueber TinyMCE schreibt. Der
   Reset weiter oben nimmt p, ul und den Ueberschriften jeden Abstand — ohne
   diese Regeln klebten die Absaetze aneinander.

   Die Abstaende entstehen ueber die Absatz-Tags, NICHT ueber <br>. Das ist
   der Grund, warum die Module den Text nicht mehr selbst in Absaetze
   zerlegen: REDAXO wuerde bei einem gewoehnlichen Textfeld von sich aus
   nl2br() anwenden (siehe rex_var_value), und dann stuenden <br> im
   Quelltext, wo Absaetze hingehoeren. */

.prose > * + * { margin-top: 1.1em; }

/* Knopfreihen bringen ihren eigenen, groesseren Abstand mit */
.prose .btn-row { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.prose ul,
.prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.3em; }

.prose h3,
.prose h4 {
  color: var(--c-navy);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-top: 1.6em;
}
.prose h3 { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.prose h4 { font-size: var(--fs-small); letter-spacing: var(--ls-caps); text-transform: uppercase; }

.prose a { text-underline-offset: 3px; }
.prose strong { font-weight: var(--fw-bold); }


/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.62em 1.35em;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--yellow {
  background: var(--grad-yellow);
  color: var(--c-navy);
}
.btn--yellow:hover { background: var(--grad-yellow-hover); }

.btn--navy {
  background: var(--c-navy);
  color: var(--c-white);
}
.btn--navy:hover { background: var(--c-navy-hover); }

.btn--outline {
  background: transparent;
  color: var(--c-white);
  border: 2px solid var(--c-white);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 0.6em 1.9em;
}
.btn--outline:hover {
  background: var(--c-white);
  color: var(--c-navy);
}

.btn__chevron { flex: none; width: 0.62em; height: auto; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}


/* ==========================================================================
   Baustein: site-header
   Sticky — offene Entscheidung 3 aus dem Manifest, hier bewusst so gesetzt:
   die Seite ist ueber 4000 px lang, ohne Sticky waere die Navigation nach
   dem ersten Bildschirm nicht mehr erreichbar.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  transition: box-shadow var(--duration) var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: 0 2px 14px rgb(17 21 57 / 0.13); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--header-h);
}

.wordmark {
  flex: none;
  padding: 0.5em 1.1em;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3.2vw, 3.1rem);
}

.site-nav__link {
  position: relative;
  color: var(--c-navy);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35em;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--grad-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}
/* aria-current="true" setzt die Scrollspy-Logik in main.js auf der
   Startseite, aria-current="page" steht fest im Markup der Unterseiten —
   beide sollen den Balken zeigen. */
.site-nav__link:hover::after,
.site-nav__link[aria-current]::after { transform: scaleX(1); }

.social {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  flex: none;
}
.social__link {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  color: var(--c-navy);
  transition: opacity var(--duration) var(--ease);
}
.social__link:hover { opacity: 0.65; }
.social__link svg { width: 1.45rem; height: 1.45rem; }

.nav-toggle { display: none; }


/* ==========================================================================
   >>> EINSTELLBEREICH: waagerechter Bildausschnitt in den Heros <<<
   Hier und nur hier wird der Bildausschnitt nachjustiert. Weiter unten in
   .hero__media img steht nur noch die Mechanik.

   WARUM DAS NICHT MIT object-position GEHT
   Der Hero ist auf jedem Desktop breiter als 16 : 9 — bei 1920 × 1080 rund
   2,4 : 1. object-fit: cover skaliert dann auf die BREITE und beschneidet
   oben und unten. Waagerecht bleibt kein Spielraum uebrig, und
   object-position: 58 % ist auf dem Desktop wirkungslos. Genau deshalb liess
   sich das Bild bisher nicht verschieben.
   Spielraum entsteht erst, wenn das Bild breiter ist als sein Rahmen. Das
   macht --hero-bild-reserve; --hero-bild-schub verschiebt es darin.

   DIE DREI STELLSCHRAUBEN
     --hero-bild-reserve   Wie viel breiter das Bild ist als der Rahmen,
                           je Seite. 0 % = kein Spielraum, kein Verschub
                           moeglich. Auf dem Desktop kostet Reserve
                           Vergroesserung: 14 % Reserve heisst, das Bild
                           wird 28 % groesser gezogen und oben und unten
                           entsprechend mehr beschnitten. Deshalb nur so
                           viel wie noetig — und nicht mehr als noetig,
                           damit das 2400er Bild scharf bleibt.
                           Auf dem Smartphone ist Reserve gratis: dort ist
                           das Bild ohnehin breiter als der Rahmen.
     --hero-bild-schub     negativ = nach LINKS, positiv = nach RECHTS.
                           Betrag hoechstens so gross wie die Reserve,
                           sonst entsteht am Rand ein weisser Streifen.
     --hero-bild-y         senkrechter Ausschnitt, 0 % = Oberkante.

   Die Werte unten sind ein Ausgangspunkt, kein Messergebnis — der Entwurf
   sagt zum Bildausschnitt nichts. Feineinstellung von Hand.
   ========================================================================== */

:root {
  /* Startseite — Zwischenaufloesungen: kein Verschub */
  --hero-bild-reserve: 0%;
  --hero-bild-schub:   0%;
  --hero-bild-y:      26%;

  /* Unterseiten — dieselben drei Schrauben fuer das Bildband */
  --hero-sub-reserve:  0%;
  --hero-sub-schub:    0%;
  --hero-sub-y:    center;
}

/* --- ab 1600 px: der Name rueckt ueber die Person, Bild nach links ------- */
@media (min-width: 100rem) {
  :root {
    --hero-bild-reserve: 12%;
    --hero-bild-schub:  -10%;

    --hero-sub-reserve:  10%;
    --hero-sub-schub:    -8%;
  }
}

/* --- ab 1920 px: deutlicher ---------------------------------------------- */
@media (min-width: 120rem) {
  :root {
    --hero-bild-reserve: 18%;
    --hero-bild-schub:  -16%;

    --hero-sub-reserve:  16%;
    --hero-sub-schub:   -14%;
  }
}

/* --- bis 768 px: Text steht links, Bild muss nach rechts ------------------ */
@media (max-width: 48rem) {
  :root {
    --hero-bild-reserve: 20%;
    --hero-bild-schub:   14%;
    --hero-bild-y:      22%;

    --hero-sub-reserve:  20%;
    --hero-sub-schub:    12%;
  }
}

/* --- bis 480 px: weiter nach rechts -------------------------------------- */
@media (max-width: 30rem) {
  :root {
    --hero-bild-reserve: 26%;
    --hero-bild-schub:   22%;

    --hero-sub-reserve:  26%;
    --hero-sub-schub:    20%;
  }
}

/* ======================= Ende Einstellbereich ============================= */


/* ==========================================================================
   Baustein: hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 46vw, 660px);
  display: flex;
  align-items: center;
}

/* Desktop: Header + Hero + gelbes Band fuellen beim Aufruf genau eine
   Bildschirmhoehe, das Band steht also immer am unteren Rand.
   Mobil bleibt es bei der inhaltsabhaengigen Hoehe. */
@media (min-width: 48.0625rem) {
  .hero {
    min-height: calc(100vh - var(--header-h) - var(--band-h));
  }
  @supports (height: 100dvh) {
    .hero { min-height: calc(100dvh - var(--header-h) - var(--band-h)); }
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;   /* haelt die seitliche Reserve im Rahmen */
}
/* Mechanik zum Einstellbereich oben — die Zahlen stehen dort, nicht hier. */
.hero__media img {
  width: calc(100% + 2 * var(--hero-bild-reserve));
  /* ohne dies kappt die Grundregel img { max-width: 100% } die Reserve
     wieder weg — und der Schub liefe ins Leere */
  max-width: none;
  height: 100%;
  margin-left: calc(var(--hero-bild-schub) - var(--hero-bild-reserve));
  object-fit: cover;
  object-position: center var(--hero-bild-y);
}

.hero__inner {
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__content {
  margin-left: auto;
  width: min(100%, 34rem);
  text-align: right;
}

.hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-regular);
  line-height: 1.06;
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(0.5rem, 1.2vw, 1.05rem);
}

/* Zwei Navy-Kaesten mit gelber Unterkante, der zweite eingerueckt */
.hero__name span {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.16em 0.1em;
  background: var(--c-navy);
  color: var(--c-white);
}
.hero__name span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--strich-h);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
}
/* "Fischer": Strich laeuft andersherum aus */
.hero__name span:last-child::after {
  background-image: url("../img/strich.svg");
}

.hero__lead {
  margin-top: clamp(1.75rem, 3.4vw, 2.9rem);
  color: var(--c-navy);
  font-size: var(--fs-subline);
  /* Fett auf Wunsch des Auftraggebers (06.08.). Der Entwurf setzt hier
     halbfett; fett steht auf dem hellen Bildgrund ruhiger. */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.hero .btn-row { justify-content: flex-end; }


/* ==========================================================================
   Baustein: wedge — der 30°-Keil unter dem Hero
   Gelbes Band plus mitlaufender Navy-Splitter. Beides clip-path, kein Bild,
   damit es responsive nicht bricht.
   ========================================================================== */

.wedge {
  position: relative;
  z-index: 1;
  height: calc(var(--band-h) + var(--wedge-rise));
  margin-top: calc(-1 * var(--wedge-rise));
  pointer-events: none;
}

.wedge__band {
  position: absolute;
  inset: 0;
  background: var(--grad-yellow);
  clip-path: polygon(
    0 var(--wedge-rise),
    var(--wedge-start) var(--wedge-rise),
    100% 0,
    100% 100%,
    0 100%
  );
}

.wedge__sliver {
  position: absolute;
  inset: 0;
  background: var(--c-navy);
  transform: translateY(calc(-1 * (var(--sliver-gap) + var(--sliver-h))));
  clip-path: polygon(
    45% calc(var(--wedge-rise) + var(--sliver-h)),
    var(--wedge-start) calc(var(--wedge-rise) + var(--sliver-h)),
    100% calc(var(--sliver-h) * 0.3),
    100% 0,
    var(--wedge-start) var(--wedge-rise)
  );
}


/* ==========================================================================
   Baustein: supporters
   ========================================================================== */

/* Kein eigener Hintergrund mehr — der kommt ueber section--weiss / section--grey
   wie bei allen anderen Baendern auch.

   Vorher stand hier background: var(--c-white). Das liess sich im CMS nicht
   uebersteuern: .supporters und .section--grey haben dieselbe Spezifitaet
   (0,1,0), und .supporters steht weiter unten im Stylesheet — also gewann
   Weiss, egal was im Markup stand. Ohne die Zeile gibt es den Konflikt nicht.

   Ohne Modifier ist die Flaeche jetzt durchsichtig und zeigt den Seitengrund,
   und der ist weiss (--bg-page). Fuer die bestehende Startseite aendert sich
   dadurch nichts. */
.supporters { padding-block: clamp(2rem, 3.6vw, 3rem); }

.supporters__head {
  margin: 0 0 clamp(1.25rem, 2.6vw, 2rem);
  color: var(--c-navy);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  text-align: center;
  text-wrap: balance;
}

.supporters__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Optisch gleiches Gewicht, nicht gleiche Boxhoehe — die vier Logos haben
   sehr unterschiedliche Proportionen.

   Die Hoehe hier ist der RUECKFALL fuer ein Logo ohne eigene Klasse. Ohne sie
   zeigt der Browser das Bild in seiner Originalgroesse — bei gruene.png waeren
   das 292 px neben einem 42 px hohen CDU-Logo. Die Modifier weiter unten
   ueberschreiben den Wert; sie stehen spaeter in der Datei und gewinnen bei
   gleicher Spezifitaet.

   mix-blend-mode: darken laesst das WEISS der Logos verschwinden.
   Die gelieferten Dateien sind naemlich nicht freigestellt: drei sind zwar
   RGBA, haben aber ueberall Alpha 255, und uwg.png ist reines RGB. Auf
   weissem Grund faellt das nicht auf, auf grauem sofort.

   Warum darken und nicht multiply: darken nimmt je Kanal den KLEINEREN von
   Bild und Untergrund. Weiss (255) wird damit exakt zum Untergrund, und
   jeder Farbwert, der dunkler als der Untergrund ist, bleibt unveraendert —
   Bit fuer Bit. multiply wuerde dagegen ALLE Farben abdunkeln.
   Verfaelscht werden nur Stellen, die HELLER als der Untergrund sind: auf
   #F1EEEB betrifft das Kanalwerte ueber 241/238/235. Beim Sonnenblumengelb
   der Gruenen wird aus #FFED00 ein #F1ED00 — nicht wahrnehmbar.

   ZWEI GRENZEN, die man kennen muss:
   - Das funktioniert nur auf hellem Grund. Auf der Navy-Flaeche waeren die
     Logos danach unsichtbar. Der Baustein steht nur auf weiss oder grau.
   - Weiss INNERHALB eines Logos verschwindet ebenfalls. Bei diesen vier ist
     das unkritisch; bei einem neuen Logo mit weisser Schrift in einem
     farbigen Kasten waere es das nicht.

   Ein echter Ersatz fuer freigestellte Dateien ist das nicht. Sauber waeren
   PNGs mit echtem Alphakanal — siehe README, offener Punkt zu den Logos. */
.supporters__item img {
  width: auto;
  height: clamp(34px, 3.5vw, 50px);
  mix-blend-mode: darken;
}
.supporters__item--gruene img { height: clamp(52px, 5.4vw, 78px); }
.supporters__item--cdu    img { height: clamp(28px, 2.9vw, 42px); }
.supporters__item--fdp    img { height: clamp(34px, 3.5vw, 50px); }
.supporters__item--uwg    img { height: clamp(36px, 3.7vw, 53px); }


/* ==========================================================================
   Baustein: events (Aktuelle Termine)
   ========================================================================== */

.events { background: var(--c-grey); }

.events__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
}

.events__colhead {
  margin: 0;
  padding: 0.72em 1.1em;
  background: var(--grad-yellow);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-colhead);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.events__list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.65vw, 9px);
  margin-top: clamp(6px, 0.65vw, 9px);
}

.event {
  display: grid;
  grid-template-columns: clamp(88px, 8.2vw, 118px) minmax(0, 1fr);
  align-items: stretch;
  background: var(--c-row);
}

/* Datumskachel: Navy mit schraeger rechter Kante, dahinter ein gelber Keil */
.event__date {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.55em 0 0.6em 1em;
  background: var(--grad-yellow);
  color: var(--c-white);
  font-family: var(--font-display);
  line-height: 1.1;
}
.event__date::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.event__date > * { position: relative; }

.event__weekday {
  font-size: var(--fs-week);
  font-weight: var(--fw-regular);
}
.event__day {
  font-size: var(--fs-date);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

/* Uhrzeit in der Datumskachel, unter dem Datum und deutlich kleiner.

   Der Platz ist knapper als er aussieht: die schraege Kante schneidet unten
   14 px weg, genau dort, wo die Uhrzeit steht. Bei 0,75 rem ist "19:00 Uhr"
   58 px breit und passt mit Reserve. Gelb auf Navy liegt bei 12 : 1 — gut
   lesbar, ohne dem Datum die Aufmerksamkeit zu nehmen. */
.event__time {
  margin-top: 0.25em;
  color: var(--c-yellow-2);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.event__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
  padding: 0.55em 1.1em 0.6em 1.35em;
  min-width: 0;
}

.event__title {
  margin: 0;
  color: var(--c-navy);
  font-size: var(--fs-item);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.event__title small {
  font-size: 0.8em;
  font-weight: var(--fw-bold);
}

.event__place {
  display: flex;
  align-items: baseline;
  gap: 0.42em;
  color: var(--c-text);
  font-size: var(--fs-item);
  line-height: 1.3;
}
.event__pin {
  flex: none;
  width: 0.72em;
  height: auto;
  align-self: center;
  color: var(--c-yellow);
}

.events__empty {
  padding: 1.1em 1.35em;
  background: var(--c-row);
  color: var(--c-text-muted);
  font-size: var(--fs-item);
}


/* ==========================================================================
   Baustein: quote — Zitatblock
   Ein Baustein mit zwei Ausrichtungen (data-align="bild-rechts|bild-links"),
   nicht zwei Templates. Das Foto ist freigestellt und ragt ueber die
   Sektionskante in den Folgeblock hinein.
   ========================================================================== */

.quote-group { position: relative; }

.quote {
  position: relative;
  background: var(--c-navy);
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
}

.quote__inner { position: relative; z-index: 2; }

.quote__text {
  margin: 0;
  width: min(100%, var(--quote-text-w));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55em;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: var(--fw-bold);
  line-height: 1.28;
}

/* Der Traeger des Verlaufs steht einmal je Seite ganz oben im <body>. Er darf
   nichts einnehmen und nichts anzeigen. */
.verlauf-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Die Zitatzeichen tragen den Verlauf aus der Grafik des Gestalters
   (anfuehrungsstriche.png, je Zeichen #FBCB27 → #FBE43E). Groesse und Form
   bleiben unveraendert. color dient als Rueckfall, falls der Verweis auf den
   Verlauf einmal ins Leere geht. */
/* height: auto ist hier Pflicht, nicht Kosmetik.
   Die Grafik traegt im Markup width="40" height="32" — ohne diese Attribute
   waere sie im REDAXO-Backend 300 px gross, weil dort kein Stylesheet laeuft
   und ein <svg> ohne Groessenangabe auf die Standardgroesse 300 x 150
   zurueckfaellt. Damit das Hoehenattribut die Grafik hier nicht in die Laenge
   zieht, muss die Hoehe wieder auf auto. Gilt genauso fuer .btn__chevron und
   .event__pin. */
.quote__mark {
  flex: none;
  width: 1.15em;
  height: auto;
  margin-top: 0.12em;
  color: var(--c-yellow);
  fill: url("#zitatverlauf");
}

/* Der Strich unter der Navy-Flaeche — hier in doppelter Hoehe, weil es ein
   Zitatblock ist. Sitzt direkt an der Unterkante, ohne Abstand. */
.quote__wedge {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--strich-h2);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

/* Bildbox: beginnt direkt neben dem Zitattext und laeuft von dort bis zum
   Bildschirmrand — in jeder Aufloesung. Weil der Textblock seine Breite
   behaelt, rueckt die Box auf breiten Schirmen weiter zur Mitte.
   Die Hoehe entspricht exakt der Zeile (Navy-Flaeche + Anschlussblock),
   das Bild kann also nicht nach unten herausragen. */
.quote-group {
  --quote-text-w: 33rem;
  /* Abstand zwischen Textblock und Bildkante. Er muss mindestens die halbe
     Personenbreite fassen, sonst laeuft der Freisteller in den Zitattext.
     Weil er nach oben gedeckelt ist, rueckt die Bildbox auf breiten
     Schirmen weiter zur Mitte. */
  --media-gap: clamp(9rem, 12vw, 12rem);
  --media-edge: calc(
    max(50% - var(--container) / 2, var(--container-pad))
    + var(--quote-text-w) + var(--media-gap)
  );
}

.quote__media {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Die Motive stehen bewusst hier und nicht als style-Attribut im Markup:
   die CSP in der .htaccess setzt style-src 'self' und verbietet damit
   Inline-Styles. Beim CMS-Einbau siehe README, Abschnitt 6. */
/* Zwei feste Motive der Startseite. Als CSS-Flaeche, weil ein style-Attribut
   an der CSP scheitert (style-src 'self'). */
.quote__media--zitat-1 { background-image: url("../img/zitat-1-bg.jpg"); }
.quote__media--zitat-2 { background-image: url("../img/zitat-2-bg.jpg"); }

/* Fuer das CMS: dasselbe Motiv als echtes <img> statt als CSS-Flaeche.
   Ohne das braeuchte jedes neue Zitat eine eigene Zeile im Stylesheet — im
   CMS kann der Redakteur keine Hintergrundgrafik setzen, weil dafuer ein
   style-Attribut noetig waere und die CSP genau das blockt.
   Die beiden Klassen darueber bleiben gueltig; die fertigen HTML-Seiten
   benutzen sie weiter. */
.quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Freigestellte Person: sitzt waagerecht mittig auf der Kante der Bildbox
   und steht auf der Unterkante der Zeile. */
.quote__person {
  position: absolute;
  bottom: 0;
  height: 92%;
  width: auto;
  max-width: none;
}

/* --- Ausrichtung: Bild rechts (Zitat 1) --- */
.quote-group[data-align="bild-rechts"] .quote__media { left: var(--media-edge); right: 0; }
.quote-group[data-align="bild-rechts"] .quote__person { left: 0; transform: translateX(-50%); }
.quote-group[data-align="bild-rechts"] .quote__inner { margin-right: auto; }

/* --- Ausrichtung: Bild links (Zitat 2), alles gespiegelt --- */
.quote-group[data-align="bild-links"] .quote__media { left: 0; right: var(--media-edge); }
.quote-group[data-align="bild-links"] .quote__person { right: 0; transform: translateX(50%); }
.quote-group[data-align="bild-links"] .quote__wedge {
  background-image: url("../img/strich.svg");
}
.quote-group[data-align="bild-links"] .quote__text { margin-left: auto; }


/* --- Anschlussblock unter einem Zitat ------------------------------------ */

.quote-follow { position: relative; }
.quote-follow .container { position: relative; z-index: 2; }

.quote-follow__body { width: min(100%, var(--quote-text-w)); }

.quote-group[data-align="bild-links"] .quote-follow__body { margin-left: auto; }


/* ==========================================================================
   Baustein: textblock (Denkansaetze & Ideen)
   ========================================================================== */

.textblock__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 0;
  align-items: start;
}

/* Der Button steht im Entwurf unter der rechten Spalte, nicht mittig */
.textblock__columns .btn-row { grid-column: 2; }

/* Zweispaltiger Fliesstext (Unterseiten). Anders als bei .textblock__columns
   laeuft der Text im Entwurf ueber die Spaltengrenze hinweg — deshalb echte
   CSS-Spalten und nicht zwei getrennte Textfelder. Blocksatz wie im Entwurf;
   ohne Silbentrennung reissen dabei die Wortabstaende auf, lang="de" steht
   im <html>. Spaltenabstand gemessen: 51 pt = 2,66 % der Breite. */
.textblock__fluss {
  column-count: 2;
  column-gap: clamp(1.5rem, 2.66vw, 2.4rem);
  text-align: justify;
  hyphens: auto;
}


/* ==========================================================================
   Baustein: hero-unterseite — Bildband mit ueberlagertem Zitat
   CMS: Hero-Feld je Unterseite (Bild + Zitat), nicht der Startseiten-Hero.
   ========================================================================== */

.hero-unterseite {
  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--hero-sub-h);
  overflow: hidden;
  background: var(--c-navy);
}

.hero-unterseite__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Dieselbe Mechanik wie auf der Startseite, eigene Werte. Eingestellt wird
   sie im Einstellbereich weiter oben (--hero-sub-*). Das Bildband ist mit
   3,19 : 1 noch flacher als der Startseiten-Hero — waagerechten Spielraum
   gibt es hier erst recht nur ueber die Reserve. */
.hero-unterseite__media img {
  width: calc(100% + 2 * var(--hero-sub-reserve));
  max-width: none;   /* siehe .hero__media img */
  height: 100%;
  margin-left: calc(var(--hero-sub-schub) - var(--hero-sub-reserve));
  object-fit: cover;
  object-position: center var(--hero-sub-y);
}

.hero-unterseite__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* --- Seitentitel im Hero -------------------------------------------------
   Loest das Zitat ab. Gestaltet nach dem Namen auf der Startseite
   (.hero__name): Navy-Kasten, weisse Schrift, darunter der schraege Strich.
   Nur kleiner — dort steht der Kandidat, hier der Seitenname.

   Der Kasten ist nicht nur Gestaltung: er loest den Kontrast auf allen
   Motiven, ohne Schatten und ohne Abdunkler. Weiss auf Navy sind 17,6 : 1.

   Rechtsbuendig, weil die Person auf allen sechs Hero-Motiven links steht. */

.hero-unterseite__titel {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  font-family: var(--font-display);
  /* Der Ersatzwert ist kein Zierrat. Stylesheet und Tokens werden getrennt
     hochgeladen; liegt auf dem Server eine tokens.css ohne diesen Token,
     ist das var() ungueltig und die Schrift faellt auf den geerbten Wert
     zurueck — 16 px, unveraendert bei jeder Fensterbreite. Genau das ist
     am 31.07. passiert und war von aussen schwer zu deuten, weil die
     Bandhoehe (--hero-sub-h, aelterer Token) weiter stimmte. */
  font-size: var(--fs-seitentitel, clamp(2rem, 4.1vw, 5.0625rem));
  font-weight: var(--fw-regular);
  line-height: 1.06;
  letter-spacing: -0.005em;
}

.hero-unterseite__titel span {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.22em 0.1em;
  background: var(--c-navy);
  color: var(--c-white);
}

.hero-unterseite__titel span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--strich-h);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
}


/* --- Altbestand: Zitat im Hero -------------------------------------------
   Bleibt vorerst stehen. Das CMS traegt noch die alte Markup-Fassung, und
   Stylesheet und HTML werden getrennt uebertragen — ohne diese Regeln saehe
   die Live-Fassung bis zur Markup-Uebernahme kaputt aus. Kann weg, sobald
   der Seitentitel im CMS steht. */

.hero-unterseite__zitat {
  width: min(100%, 32rem);
  margin-left: auto;
  text-shadow: 0 1px 14px rgb(17 21 57 / 0.5);
}

/* Beide Abdunkler haengen am Zitat und schalten sich selbst ab, sobald im
   Hero keines mehr steht. */
.hero-unterseite--hell:has(.hero-unterseite__zitat) .hero-unterseite__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
              rgb(17 21 57 / 0.58) 0%,
              rgb(17 21 57 / 0.42) 45%,
              rgb(17 21 57 / 0) 78%);
}


/* ==========================================================================
   Baustein: quote, Variante ohne Bildbox
   Dieselbe Komponente wie auf der Startseite (CMS: derselbe Zitatblock,
   dritter Wert im Feld "ausrichtung"), nur ohne Foto: vollbreite
   Navy-Flaeche, Zitat mittig eingerueckt.
   Gemessen: Flaeche 449 pt hoch, Innenabstand 157 pt oben und unten,
   Textspalte 700 pt breit.
   ========================================================================== */

.quote--ohne-bild { padding-block: clamp(2.75rem, 8.2vw, 7.35rem); }

/* Auf "Erfahrung" und "Amtszeit" sind die Zitatflaechen flacher als auf
   "Ueber mich": rund 290 statt 449 pt. Bemerkenswert ist, dass sie dort
   290 pt hoch bleiben, ob das Zitat zwei oder drei Zeilen hat — der
   Gestalter arbeitet also mit einer festen Hoehe, nicht mit festem
   Innenabstand. Genau so ist es hier umgesetzt: Mindesthoehe plus mittiger
   Satz, der Innenabstand greift erst, wenn der Text laenger wird. */
.quote--kompakt {
  display: grid;
  align-content: center;
  min-height: clamp(9rem, 15.1vw, 13.6rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.quote--ohne-bild .quote__text {
  width: min(100%, 36rem);
  margin-inline: auto;
}

/* Unter der zweiten Flaeche laeuft der Strich in die andere Richtung:
   dick links, nach rechts auf null. Siehe Tabelle in README, Abschnitt 3. */
.quote[data-strich="dick-links"] .quote__wedge {
  background-image: url("../img/strich.svg");
}


/* ==========================================================================
   Baustein: textbild — Textspalte und Bild nebeneinander
   Ein Baustein mit zwei Ausrichtungen (data-align="bild-rechts|bild-links"),
   genau wie der Zitatblock — nicht zwei Templates.
   Gemessen im Entwurf: Textspalte 806 pt, Abstand 139 pt, Bild 455 pt;
   zusammen die Inhaltsbreite von 1400 pt.
   ========================================================================== */

/* Diese Reihen stehen im Entwurf enger als die Badge-Sektionen: gemessen
   49 pt ueber und 41 pt unter dem Bild, nicht der uebliche --section-py.
   Das Bild fuellt die Sektion fast aus. */
.textbild { padding-block: clamp(1.25rem, 2.4vw, 2.25rem); }

.textbild__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.77fr) minmax(0, 1fr);
  column-gap: var(--textbild-gap);
  align-items: center;
}

/* Gespiegelt. Die Reihenfolge im Markup entspricht der Leserichtung,
   deshalb genuegt der Tausch der Spaltenbreiten. */
.textbild[data-align="bild-links"] .textbild__raster {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.77fr);
}

.textbild__bild { margin: 0; }

.textbild__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 454 / 359;   /* im Entwurf gemessen */
  object-fit: cover;
}

.textbild__titel {
  margin: 0 0 0.85em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-titel);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Einleitungsabsatz unter dem Badge: mittig, ueber die Inhaltsbreite */
.einleitung {
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}


/* ==========================================================================
   Baustein: bildleiste — Bildreihe ueber die ganze Fensterbreite
   CMS: Bildreihe-Repeater mit zwei bis vier Bildern.

   Die Leiste laeuft absichtlich bis an beide Fensterraender, ihre Hoehe
   skaliert also mit der Fensterbreite. Damit die einzelnen Bilder auf
   kleinen Schirmen nicht zu klein werden, fallen sie von rechts nach links
   weg: ab 1000 px das vierte, ab 768 px auch das dritte. Uebrig bleiben die
   linken beiden. Dasselbe Verhalten wie in einem frueheren Projekt des
   Auftragnehmers, dort mit Bootstrap-Spalten geloest — hier mit Flexbox,
   weil kein Fremdgeruest eingebunden wird.
   ========================================================================== */

.bildleiste {
  display: flex;
  gap: var(--leiste-gap);
  background: var(--c-white);
}

.bildleiste__bild {
  flex: 1 1 0;
  min-width: 0;
}

.bildleiste__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 450 / 393;   /* im Entwurf gemessen */
  object-fit: cover;
}


/* ==========================================================================
   Untermenue in der Hauptnavigation
   Im Entwurf gibt es dafuer keine Vorlage. Gestaltet nach dem vorhandenen
   System: Navy-Flaeche wie die Zitatbloecke, darunter derselbe schraege
   Strich wie unter den Ueberschriften.

   Bewusst ohne JavaScript: :hover fuer die Maus, :focus-within fuer die
   Tastatur. Die Seite muss ohne JS vollstaendig benutzbar bleiben, und der
   Elternpunkt "Ueber mich" bleibt ein echter Link auf die Uebersichtsseite —
   auf dem Touchscreen fuehrt der Fingertipp also dorthin.
   ========================================================================== */

.site-nav__list > li { position: relative; }

.subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: max-content;
  padding-block: 0.35rem;
  background: var(--c-navy);
}

.site-nav__list > li:hover > .subnav,
.site-nav__list > li:focus-within > .subnav { display: block; }

/* Derselbe Strich wie unter den Navy-Flaechen, hier in einfacher Hoehe */
.subnav::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--strich-h);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
}

.subnav__link {
  display: block;
  padding: 0.62em 1.5em;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.subnav__link:hover { background: var(--c-navy-hover); }
.subnav__link[aria-current="page"] { background: var(--c-navy-hover); font-weight: var(--fw-bold); }


/* ==========================================================================
   Baustein: akkordeon  (CMS: Akkordeon-Repeater)
   <details>/<summary>, damit es ohne JavaScript auf- und zuklappt.
   Das Pluszeichen ist die Grafik des Gestalters; das Minus dazu gab es
   nicht, es ist aus derselben Datei erzeugt (siehe README).
   Gemessen: Balken 711 pt breit, 79 pt hoch, Navy-Kachel 78 pt.
   ========================================================================== */

/* Der Abstand nach oben ist bewusst gross: im Entwurf standen die Balken
   direkt unter dem Absatz und liefen optisch mit ihm zusammen. */
.akkordeons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.4vw, 2.6rem);
  align-items: start;
  margin-top: clamp(1.9rem, 4vw, 3.25rem);
}

.akkordeon { background: var(--c-white); }

.akkordeon__kopf {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.4rem);
  padding-right: clamp(0.85rem, 1.7vw, 1.4rem);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;              /* Firefox */
}
.akkordeon__kopf::-webkit-details-marker { display: none; }   /* Safari */

.akkordeon__zeichen {
  flex: none;
  width: var(--akkordeon-h);
  height: var(--akkordeon-h);
  background: url("../img/akkordeon_aufklappen.png") center / cover no-repeat;
}

.akkordeon[open] .akkordeon__zeichen {
  background-image: url("../img/akkordeon_zuklappen.png");
}

/* overflow: hidden ist die Voraussetzung fuer die Animation in main.js —
   dort wird die Hoehe samt Innenabstand von null auf den Sollwert gefahren.
   Ohne JavaScript klappt <details> weiterhin, nur eben ohne Bewegung. */
.akkordeon__inhalt {
  overflow: hidden;
  padding: 0 clamp(1rem, 2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.75rem);
  padding-left: calc(var(--akkordeon-h) + clamp(0.85rem, 1.7vw, 1.4rem));
}


/* ==========================================================================
   Baustein: zielkarten  (CMS: Ziel-Repeater mit Icon, Titel, Text)
   Gemessen: Karte 713 × 127 pt, Icon-Kachel 128 pt quadratisch,
   Spaltenabstand 43 pt, Zeilenabstand 37 pt.
   ========================================================================== */

.zielkarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.1vw, 1.75rem) clamp(1.4rem, 2.7vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zielkarte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--c-grey);
}

/* Das Icon bringt Navy-Flaeche und Gelbkeil schon mit — es ist die ganze
   Kachel, nicht nur das Piktogramm. */
.zielkarte__icon {
  align-self: stretch;
  width: var(--zielkarte-h);
  height: 100%;
  object-fit: cover;
}

.zielkarte__text {
  padding: clamp(0.7rem, 1.35vw, 1.05rem) clamp(0.85rem, 1.6vw, 1.25rem);
}

/* Bewusst nur wenig groesser als der Fliesstext: im Entwurf misst die
   Kartenueberschrift rund 19 px bei 1440. Groesser gesetzt bricht sie um,
   die Karte waechst und das quadratische Icon wird beschnitten. */
.zielkarte__titel {
  margin: 0 0 0.3em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.zielkarte p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}


/* ==========================================================================
   Baustein: listenbox  (CMS: Box mit Kopfzeile, Liste, Aufklapptext)
   Gemessen: Box 665 pt breit, gelber Kopf 76 pt, Knopf 55 pt,
   Spaltenabstand 102 pt.
   ========================================================================== */

/* Schlichte, mittige Ueberschrift ohne Badge — im Entwurf ueber den
   beiden Listenboxen ("Dazu gehoerten unter anderem:") */
.block-titel {
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.9rem);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
}

/* Beide Boxen sind im Entwurf gleich hoch, obwohl die Listen unterschiedlich
   lang sind — die Schalter stehen auf einer Linie. Deshalb stretch statt
   start, und der Schalter wird per margin-top:auto nach unten gedrueckt. */
.listenboxen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5.3vw, 4.25rem);
  align-items: stretch;
}

.listenbox {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
}

.listenbox__kopf {
  display: flex;
  align-items: center;
  min-height: var(--listenbox-kopf-h);
  margin: 0;
  padding: 0.4em var(--listenbox-pad);
  background: var(--grad-yellow);
  color: var(--fg-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-colhead);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  line-height: 1.25;
  text-transform: uppercase;
}

.listenbox__koerper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) var(--listenbox-pad) var(--listenbox-pad);
}

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

.listenbox__liste li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-body);
  line-height: 1.45;
}
.listenbox__liste li + li { margin-top: 0.85em; }

.listenbox__liste li::before {
  content: "\00B7";
  position: absolute;
  left: 0.15em;
  font-weight: var(--fw-bold);
}


/* --- Aufklapper "mehr lesen" --------------------------------------------- */
/* Wieder <details>/<summary>, damit es ohne JavaScript funktioniert. Der
   Schalter steht im Entwurf unter dem Text; per order kommt er visuell nach
   unten, obwohl <summary> im Markup zuerst stehen muss. */

.mehrlesen {
  display: flex;
  flex-direction: column;
  margin-top: auto;   /* haelt den Schalter am Fuss der Box */
  padding-top: clamp(1.1rem, 2.2vw, 1.9rem);
}

.mehrlesen__knopf {
  order: 2;
  display: block;
  padding: 0.72em 1.2em;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background var(--duration) var(--ease);
}
.mehrlesen__knopf::-webkit-details-marker { display: none; }
.mehrlesen__knopf:hover { background: var(--c-navy-hover); }

.mehrlesen__inhalt {
  order: 1;
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.mehrlesen__zu { display: none; }
.mehrlesen[open] .mehrlesen__auf { display: none; }
.mehrlesen[open] .mehrlesen__zu  { display: inline; }


/* ==========================================================================
   Baustein: projektstreifen  (CMS: Bildreihe mit Bildunterschrift)
   Wie die bildleiste ueber die volle Fensterbreite, aber mit zwei
   Unterschieden: jede Kachel traegt einen Navy-Balken mit Bildunterschrift,
   und der Umbruch laeuft anders. Statt Bilder wegzulassen bricht der
   Streifen um — auf zwei Spalten, sobald das Fenster die Inhaltsbreite
   erreicht, und auf eine, sobald auch die Listenboxen einspaltig stehen.
   Gemessen: Bild 462 × 392 pt, Balken 56 pt, Abstand 24 pt.
   ========================================================================== */

.projektstreifen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--streifen-gap);
  margin: 0;
  padding: 0;
  background: var(--c-white);
  list-style: none;
}

.projektstreifen__kachel { display: flex; flex-direction: column; }

.projektstreifen__kachel img {
  display: block;
  width: 100%;
  aspect-ratio: 462 / 392;   /* im Entwurf gemessen */
  object-fit: cover;
}

.projektstreifen__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  min-height: var(--streifen-text-h);
  padding: 0.4em 0.7em;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
}


/* ==========================================================================
   Baustein: zielblock  (CMS: Themenblock-Repeater mit Feld "ausrichtung")
   Kopfleiste aus Icon-Kachel und Titel, darunter der Text; daneben das Bild.
   Bild und Kopfleiste stehen oben auf gleicher Hoehe, deshalb start statt
   center. Gemessen: Textspalte 802 pt, Abstand 148 pt, Bild 454 × 427 pt,
   Kopfleiste 85 pt hoch.

   Die Leiste ist weiss — auf den grauen Sektionen hebt sie sich ab, auf den
   weissen verschwindet sie. Genau so steht es im Entwurf.
   ========================================================================== */

.zielblock__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.77fr) minmax(0, 1fr);
  column-gap: var(--textbild-gap);
  align-items: start;
}

.zielblock[data-align="bild-links"] .zielblock__raster {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.77fr);
}

.zielblock__kopf {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}

/* Das Icon bringt Navy-Flaeche und Gelbkeil mit — es ist die ganze Kachel. */
.zielblock__icon {
  flex: none;
  width: var(--zielblock-kopf-h);
  height: var(--zielblock-kopf-h);
  object-fit: cover;
}

.zielblock__titel {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.3em clamp(0.9rem, 1.8vw, 1.5rem);
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.zielblock__bild { margin: 0; }

.zielblock__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 454 / 427;   /* im Entwurf gemessen */
  object-fit: cover;
}


/* ==========================================================================
   Baustein: beitrag  (CMS: Collection "Aktuelles")
   Zentrierte Ueberschrift, zentrierter Text, darunter eine Bildreihe.

   Die Bildreihe ist das Besondere: im Entwurf stehen alle Fotos einer Reihe
   auf gleicher Hoehe, sind aber unterschiedlich breit — je nach Seiten-
   verhaeltnis. Genau das macht flex-grow proportional zum Seitenverhaeltnis
   bei flex-basis 0: die Breiten verhalten sich wie die Verhaeltnisse, also
   werden alle Hoehen gleich. Die Werte stecken in zwei Modifikatoren statt
   in style-Attributen — die waeren an der CSP gescheitert.
   ========================================================================== */

.beitrag__titel {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.9rem);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-titel);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-wrap: balance;
}

.beitrag__text {
  text-align: center;
  text-wrap: pretty;
}

.beitrag__bilder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--reihe-gap);
  margin: clamp(1.5rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Feste Kachelgroesse statt mitwachsender Spalten.

   Vorher zog eine Reihe die Bilder immer auf die volle Inhaltsbreite — bei
   nur einem oder zwei Bildern wurden sie dadurch riesig. Jetzt ist die Breite
   einer Sechserreihe das Mass fuer alle: eine Reihe fasst bis zu sechs
   Kacheln, der Rest bricht um, und eine halb volle Reihe bleibt eben halb
   voll. Ein, zwei oder drei Bilder allein in einer Reihe sind ausdruecklich
   in Ordnung.

   --reihe-spalten ist die Referenz, nicht die tatsaechliche Anzahl: auf
   schmalen Schirmen waeren sechs Kacheln nur noch 50 px breit. */
.beitrag__bilder { --reihe-spalten: 6; }

.beitrag__bild {
  flex: 0 0 auto;
  width: calc(
    (100% - (var(--reihe-spalten) - 1) * var(--reihe-gap)) / var(--reihe-spalten)
  );
  aspect-ratio: 3 / 4;
}

.beitrag__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aufklappbares Bild: der Knopf entsteht erst durch main.js. Ohne
   JavaScript bleibt das Bild einfach ein Bild. */
.beitrag__lupe {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}


/* ==========================================================================
   Baustein: blaetterung  (CMS: Seitennavigation der Beitragsliste)
   Steht ueber und unter den Eintraegen. Der Inhalt wird von main.js
   erzeugt; bei nur einer Seite bleibt das Band leer und verschwindet.
   ========================================================================== */

.blaetterung-band {
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  background: var(--c-white);
}
/* Kein leeres Band, solange es nichts zu blaettern gibt */
.blaetterung-band:not(:has(.blaetterung__liste)) { display: none; }

.blaetterung { display: flex; justify-content: center; }

.blaetterung__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.3rem, 0.7vw, 0.55rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blaetterung__link {
  display: grid;
  place-items: center;
  min-width: clamp(2.2rem, 3.1vw, 2.7rem);
  height: clamp(2.2rem, 3.1vw, 2.7rem);
  padding-inline: 0.45em;
  border: 2px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-item);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.blaetterung__link:hover {
  border-color: var(--c-navy);
  background: var(--grad-yellow);
}

/* Die aktuelle Seite ist kein Link, sondern ein <span> — sie fuehrt nirgends
   hin. Navy gefuellt, damit sie sich klar abhebt. */
.blaetterung__link--aktuell {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
  cursor: default;
}

.blaetterung__link--pfeil svg {
  width: 0.62em;
  height: 0.62em;
}

/* Ausgelassene Seitenzahlen zwischen den Spruengen */
.blaetterung__luecke {
  display: grid;
  place-items: center;
  min-width: clamp(1.4rem, 2vw, 1.8rem);
  height: clamp(2.2rem, 3.1vw, 2.7rem);
  color: var(--c-text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}


/* ==========================================================================
   Baustein: lightbox
   Je Beitrag eine Galerie. Der Dialog selbst wird von main.js erzeugt und
   steht nicht im Markup — im CMS ist damit nichts nachzupflegen. Ohne
   JavaScript passiert beim Klick nichts, die Bilder bleiben sichtbar.
   Grundlage ist <dialog>: Escape, Fokusfalle und Hintergrund kommen vom
   Browser, nicht von uns.
   ========================================================================== */

.lightbox {
  width: min(94vw, 1180px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-navy);
  color: var(--c-white);
  overflow: hidden;
}

.lightbox::backdrop { background: rgb(8 10 26 / 0.9); }

.lightbox__buehne {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--c-navy-deep);
}

.lightbox__bild {
  display: block;
  max-width: 100%;
  max-height: min(74vh, 780px);
  width: auto;
  height: auto;
}

/* Vor, zurueck, schliessen */
.lightbox__knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 4.4vw, 3.4rem);
  height: clamp(2.6rem, 4.4vw, 3.4rem);
  padding: 0;
  border: 0;
  background: rgb(17 21 57 / 0.78);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.lightbox__knopf:hover {
  background: var(--c-navy);
  color: var(--c-yellow-2);
}
.lightbox__knopf svg { width: 45%; height: 45%; }

.lightbox__knopf--zurueck { left: 0;  top: 50%; transform: translateY(-50%); }
.lightbox__knopf--vor     { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox__knopf--zu      { right: 0; top: 0; }

/* Bei nur einem Bild in der Galerie sind die Pfeile sinnlos */
.lightbox[data-einzeln="true"] .lightbox__knopf--zurueck,
.lightbox[data-einzeln="true"] .lightbox__knopf--vor { display: none; }

.lightbox__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.85rem, 1.8vw, 1.35rem);
}

.lightbox__text {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.lightbox__zaehler {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-yellow-2);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Baustein: contact
   ========================================================================== */

.contact {
  background: var(--c-navy);
  color: var(--c-white);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__title {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-size: var(--fs-subline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.contact__intro { line-height: 1.55; }

.form__field { margin-bottom: clamp(0.6rem, 1vw, 0.85rem); }

.form__hint {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  opacity: 0.8;
}

.form__control {
  width: 100%;
  padding: 0.72em 0.85em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.form__control::placeholder { color: var(--c-text-muted); opacity: 1; }
.form__control:hover { border-color: var(--c-yellow-1); }
textarea.form__control { min-height: 5.5em; resize: vertical; }

.form__control[aria-invalid="true"] { border-color: #E4572E; }

.form__error {
  display: block;
  margin-top: 0.3em;
  color: var(--c-yellow-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.form__error:empty { display: none; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(0.9rem, 1.8vw, 1.4rem);
}

.form__consent {
  flex: 1 1 15rem;   /* darf schrumpfen, damit Checkbox und Button eine Zeile bleiben */
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  cursor: pointer;
}
.form__consent input {
  flex: none;
  width: 1.35em; height: 1.35em;
  margin: 0.05em 0 0;
  accent-color: var(--c-yellow-1);
}
.form__consent a { color: var(--c-white); text-underline-offset: 3px; }

.form__required { color: var(--c-yellow-2); }

/* Honeypot — fuer Menschen unsichtbar, fuer Bots ein Koeder */
.form__pot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  margin-top: 1rem;
  padding: 0.85em 1em;
  border-left: 4px solid var(--c-yellow-1);
  background: rgb(255 255 255 / 0.08);
  font-size: var(--fs-small);
}
.form__status:empty { display: none; }


/* ==========================================================================
   Baustein: site-footer
   ========================================================================== */

.site-footer {
  background: var(--grad-yellow);
  color: var(--c-navy);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  min-height: clamp(48px, 4vw, 58px);
  padding-block: 0.6rem;
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-nav);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 3vw, 2.6rem);
}
.site-footer__links a {
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   Baustein: hinweis — Popup beim Seitenaufruf

   <dialog> mit showModal(): der Browser bringt Overlay, Fokusfalle,
   Esc-Taste und die Sperre der Seite dahinter selbst mit. Nachgebaut werden
   muss nur das Aussehen.

   Die var()-Ersatzwerte sind Absicht. Stylesheet und Tokens werden getrennt
   hochgeladen; liegt auf dem Server noch die alte tokens.css, faellt sonst
   die halbe Gestaltung aus — genau so ist der Seitentitel im Hero am 31.07.
   auf 16 px zusammengefallen.
   ========================================================================== */

.hinweis {
  width: min(100% - 2 * var(--container-pad), var(--hinweis-breite, 46rem));
  max-height: min(86vh, 50rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: 0 18px 60px rgb(17 21 57 / 0.35);
}

/* Flex erst im geoeffneten Zustand — sonst waere der Kasten ohne
   JavaScript sichtbar. Der UA-Stil dialog:not([open]) { display:none }
   bleibt so unangetastet. */
.hinweis[open] {
  display: flex;
  flex-direction: column;
}

.hinweis::backdrop {
  background: var(--hinweis-overlay, rgb(17 21 57 / 0.74));
}

/* Die Seite dahinter darf nicht mitscrollen */
body:has(.hinweis[open]) { overflow: hidden; }

/* --- Schliesskreuz --------------------------------------------------------
   Eigene Zeile ganz oben, damit es beim Scrollen langer Texte stehen bleibt.
   Navy auf Weiss, 44 px — die Groesse ist die uebliche Mindestfl. fuer den
   Finger, und der Kasten soll sich auch am Handy sicher schliessen lassen. */

.hinweis__schliessen {
  flex: none;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0.75rem 0.75rem 0 0;
  padding: 0;
  border: 0;
  background: var(--c-navy);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.hinweis__schliessen:hover { background: var(--c-navy-hover); }
.hinweis__schliessen svg { width: 1.15rem; height: 1.15rem; }

/* --- Inhalt ---------------------------------------------------------------
   Die Textgestaltung ab hier gilt DOPPELT: im Popup (.hinweis__inhalt) und
   auf einer Mitteilungsseite (.mitteilung, siehe naechster Abschnitt). Beide
   stehen deshalb in jedem Selektor nebeneinander statt in zwei Regelsaetzen.

   Das ist Absicht und kein Versehen: der Auftrag lautete, derselbe Text solle
   auf der Seite "genau so" aussehen wie im Popup. Zwei getrennte Regelsaetze
   waeren beim naechsten Eingriff auseinandergelaufen — hier kann das nicht
   passieren, weil es nur einen Satz Werte gibt.

   Nur der Kasten selbst (Scrollen, Innenabstand) bleibt beim Popup. */

.hinweis__inhalt {
  overflow-y: auto;
  /* Oben weniger, weil das Schliesskreuz schon Luft schafft */
  padding: 0.25rem var(--hinweis-pad, 2rem) var(--hinweis-pad, 2rem);
}

.hinweis__inhalt,
.mitteilung { line-height: var(--lh-body); }

.hinweis__titel,
.mitteilung__titel {
  margin: 0 0 0.5em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-hinweis-1, clamp(1.5rem, 2.6vw, 2.125rem));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.hinweis__inhalt h3,
.mitteilung h3 {
  margin: 1.6em 0 0.45em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-hinweis-2, clamp(1.1875rem, 1.9vw, 1.5rem));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.hinweis__inhalt h4,
.mitteilung h4 {
  margin: 1.5em 0 0.4em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-hinweis-3, clamp(1.0625rem, 1.45vw, 1.1875rem));
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.hinweis__inhalt p,
.mitteilung p { margin: 0 0 0.9em; }
.hinweis__inhalt p:last-child,
.mitteilung p:last-child { margin-bottom: 0; }

/* Der Vorspann steht etwas groesser und in Navy — er traegt die Kernaussage */
.hinweis__vorspann,
.mitteilung__vorspann {
  color: var(--c-navy);
  font-size: var(--fs-subline);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.hinweis__inhalt ul,
.mitteilung ul {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.hinweis__inhalt li,
.mitteilung li {
  position: relative;
  margin-bottom: 0.45em;
  padding-left: 1.5em;
}
/* Kein disc, sondern ein gelbes Quadrat — der Entwurf kennt keine Kreise */
.hinweis__inhalt li::before,
.mitteilung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  background: var(--grad-yellow);
}

.hinweis__inhalt a,
.mitteilung a {
  color: var(--c-navy);
  font-weight: var(--fw-medium);
  text-underline-offset: 3px;
}

/* --- Auftritt ------------------------------------------------------------
   Als CSS-Animation, nicht ueber style-Zuweisungen — die scheitern an der
   CSP. Wer weniger Bewegung eingestellt hat, bekommt den Kasten sofort. */

@keyframes hinweis-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hinweis-blende {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hinweis[open]           { animation: hinweis-auf    260ms var(--ease) both; }
.hinweis[open]::backdrop { animation: hinweis-blende 260ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .hinweis[open], .hinweis[open]::backdrop { animation: none; }
}


/* ==========================================================================
   Baustein: videoreihe — Vorschaukacheln, die eine Lightbox oeffnen

   Vier Videos im Hochformat (9 : 16). Gezeigt wird der erste Frame als
   Standbild; ein Klick oeffnet das Video gross in einer Lightbox.

   Die Kachel ist ein echter <a> auf die Videodatei. Ohne JavaScript oeffnet
   der Browser sie damit direkt — die Seite bleibt also benutzbar, nur ohne
   Lightbox. Das JavaScript faengt den Klick ab.
   ========================================================================== */

.videoreihe__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.videoreihe__eintrag { min-width: 0; }

/* Die Kachel selbst */
.videoreihe__knopf {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-navy);
  text-decoration: none;
  cursor: pointer;
}

.videoreihe__knopf img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.videoreihe__knopf:hover img { transform: scale(1.03); opacity: 0.9; }

/* Abspielzeichen. Kein Bild, sondern ein Kreis mit CSS-Dreieck — so bleibt es
   in jeder Groesse scharf und braucht keine zusaetzliche Datei. */
.videoreihe__zeichen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(44px, 22%, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(17 21 57 / 0.72);
  transition: background var(--duration) var(--ease);
}
.videoreihe__knopf:hover .videoreihe__zeichen { background: var(--c-navy); }

.videoreihe__zeichen::before {
  content: "";
  /* Dreieck nach rechts, leicht eingerueckt — optisch mittig wirkt es erst
     dann, wenn es geometrisch etwas rechts steht. */
  margin-left: 18%;
  border-style: solid;
  border-width: 0.55em 0 0.55em 0.9em;
  border-color: transparent transparent transparent var(--c-white);
  font-size: clamp(14px, 6vw, 20px);
}

.videoreihe__titel {
  margin: 0.75em 0 0;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-wrap: balance;
}


/* --- Die Lightbox dazu ----------------------------------------------------
   Wird komplett aus main.js erzeugt und steht nicht im Markup — im CMS ist
   dafuer nichts nachzupflegen. */

.videolightbox {
  width: min(100% - 2rem, 46rem);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.videolightbox::backdrop { background: rgb(17 21 57 / 0.86); }

.videolightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.videolightbox video {
  /* Hochformat: die Hoehe ist der begrenzende Wert, nicht die Breite. */
  max-height: 92vh;
  max-width: 100%;
  width: auto;
  height: auto;
  background: #000;
}

/* Schliesskreuz sitzt am Dialog, nicht am Video — sonst wandert es bei
   jedem Seitenverhaeltnis woanders hin.

   Es steht INNERHALB des Dialogs. Der erste Entwurf setzte es mit
   top: -3.25rem darueber; weil der Dialog aber 92 vh hoch werden darf, lag
   das Kreuz dann 16 px oberhalb des Fensterrands und war nicht erreichbar.
   Gemessen bei 1280 x 900. */
.videolightbox__schliessen {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: var(--c-navy);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.videolightbox__schliessen:hover { background: var(--c-navy-hover); }
.videolightbox__schliessen svg { width: 1.15rem; height: 1.15rem; }

body:has(.videolightbox[open]) { overflow: hidden; }


/* ==========================================================================
   Baustein: mitteilung — Mitteilungsseite mit Hero

   Ein laengerer Text, der aussieht wie der Inhalt des Hinweis-Popups, aber
   als eigene Seite steht: mit Hero-Bildband oben, in der schmalen Textspalte
   der Rechtstextseiten. Verwendet auf: Richtigstellung.

   Die Textgestaltung steht NICHT hier, sondern oben beim Baustein hinweis —
   dort tragen alle Regeln beide Selektoren. Hier bleibt nur, was die Seite
   vom Kasten unterscheidet: Breite und Abstaende.

   Die Ueberschrift des Textes ist eine H2, keine H1: die H1 der Seite steht
   schon im Hero. Gestaltet ist sie ueber .mitteilung__titel trotzdem wie die
   Popup-Ueberschrift.
   ========================================================================== */

.mitteilung {
  --container: var(--container-text, 760px);
  color: var(--c-text);
}

/* Die Anlagenliste am Fuss soll sich vom Text loesen */
.mitteilung__anlagen { margin-top: clamp(2rem, 4vw, 3rem); }

.mitteilung .btn-row { margin-top: clamp(2rem, 4vw, 3rem); }


/* ==========================================================================
   Inhaltsseiten (Impressum, Datenschutz, Transparenz, Danke)

   Diese Seiten haben kein Hero-Bild. Die Anbindung an den Rest der Website
   leistet allein die H1: derselbe Navy-Kasten mit dem schraegen Strich wie
   der Seitentitel im Hero der Unterseiten. Die uebrigen Ueberschriften
   bleiben bewusst schlicht — ein Rechtstext hat oft ein Dutzend davon, und
   ein Dutzend Navy-Kaesten waere Krach statt Gliederung.

   Es reicht, den vorhandenen Inhaltsblock in
     <main class="page"><div class="container"> … </div></main>
   zu stellen. Die Regeln greifen auf die nackten Elemente h1 bis h4, p, ul
   und ol, verlangen also keine Klassen im Text selbst. Genaueres in
   Pflegemodule/15-rechtstext.txt.
   ========================================================================== */

.page {
  /* Schmaler als die 1060 px der uebrigen Seiten: durchlaufender Fliesstext
     wird ab etwa 90 Zeichen je Zeile muehsam zu lesen. Derselbe Wert wie bei
     .mitteilung — er steht deshalb in tokens.css. */
  --container: var(--container-text, 760px);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  color: var(--c-text);
  line-height: var(--lh-body);
}

/* --- H1 im Navy-Kasten ----------------------------------------------------
   Kein <span> noetig — der Kasten sitzt direkt auf der Ueberschrift. Das ist
   Absicht: im CMS steht dort eine blanke H1, und die soll nicht angefasst
   werden muessen. inline-block, damit der Kasten so breit wird wie das Wort
   und nicht wie die Spalte. */

.page h1 {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  padding: 0.06em 0.22em 0.1em;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-seitentitel-klein, clamp(1.75rem, 3.4vw, 3rem));
  font-weight: var(--fw-regular);
  line-height: 1.06;
  letter-spacing: -0.005em;
}
.page h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--strich-h);
  background: url("../img/strich_2.svg") no-repeat;
  background-size: 100% 100%;
}

/* --- Zwischenueberschriften ----------------------------------------------
   Drei Stufen, damit auch eine tief gegliederte Datenschutzerklaerung
   auskommt. Der grosse Abstand nach oben trennt die Abschnitte, der kleine
   nach unten bindet die Ueberschrift an ihren Text. */

.page h2 {
  margin: 2.2em 0 0.5em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.page h3 {
  margin: 1.8em 0 0.4em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.page h4 {
  margin: 1.5em 0 0.35em;
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Die erste Ueberschrift nach der H1 braucht den grossen Vorlauf nicht */
.page h1 + h2,
.page h1 + h3 { margin-top: 0; }

.page p { margin: 0 0 1em; }
.page p + p { margin-top: 0; }

.page ul,
.page ol { margin: 0.6em 0 1.2em; padding-left: 1.35em; }
.page ul { list-style: disc; }
.page ol { list-style: decimal; }
.page li { margin-bottom: 0.35em; }

.page a { color: var(--c-navy); text-underline-offset: 3px; }

/* Der Knopf am Seitenende soll sich vom letzten Absatz loesen */
.page .btn-row { margin-top: clamp(2rem, 4vw, 3rem); }

.notice {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border-left: 4px solid var(--c-yellow-1);
  background: var(--c-grey);
  font-size: var(--fs-small);
}


/* ==========================================================================
   Responsive
   Der Entwurf zeigt keine mobile Variante — die folgenden Regeln sind
   gestaltet, nicht abgeleitet. Siehe README.md, Abschnitt "Entscheidungen".
   ========================================================================== */

/* --- bis 1100 px: der Projektstreifen bricht auf zwei Spalten -------------
   Der Streifen laeuft ueber die volle Fensterbreite und skaliert nach oben
   mit. Nach unten schrumpfen die Kacheln so lange mit, bis das Fenster die
   Inhaltsbreite erreicht (--container 1060 px plus Aussenabstand) — dann
   waeren vier Kacheln zu schmal, und er bricht um. */
@media (max-width: 68.75rem) {
  .projektstreifen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- bis 1000 px: Zitatfotos werden schmaler, Kontakt einspaltig --------- */
@media (max-width: 62.5rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  /* Schmalerer Textblock — die Bildbox rueckt automatisch mit, weil sie
     ihre Kante aus --quote-text-w berechnet. */
  .quote-group { --quote-text-w: 24rem; }

  /* Bildleiste: das rechte Bild faellt weg, sonst werden alle vier zu klein */
  .bildleiste__bild--weg-unter-1000 { display: none; }
}

/* --- bis 1200 px: die Hauptnavigation rueckt enger zusammen ---------------
   Mit fuenf Punkten (seit "Richtigstellung") stossen Schriftzug, Navigation
   und Social-Icons hier aneinander. Der Abstand faellt deshalb frueher ab,
   als die Grundregel es taete. Ueber 1200 px bleibt alles wie gemessen. */
@media (max-width: 75rem) {
  .site-nav__list { gap: clamp(1.1rem, 2.2vw, 2.2rem); }
}

/* --- bis 1000 px: Kopfzeile auf das Burger-Menue --------------------------
   Frueher als der uebrige Umbruch bei 768 px, und das mit Absicht: die
   Kopfzeile ist eine einzige nicht schrumpfbare Reihe aus Schriftzug,
   fuenf Navigationspunkten und zwei Icons. Bei 900 px lief sie um 48 px
   ueber den rechten Fensterrand hinaus — die Seite liess sich seitlich
   schieben. Mit vier Punkten ging es gerade noch auf; der fuenfte hat das
   Fass zum Ueberlaufen gebracht.

   Nur die Kopfzeile wechselt hier. Alles andere bleibt bis 768 px
   mehrspaltig — deshalb steht dieser Block getrennt und nicht im
   48rem-Block weiter unten.

   Wer einen sechsten Punkt ergaenzt oder einen umbenennt: bitte danach
   zwischen 1000 und 1200 px nachsehen, ob die Reihe noch passt. */
@media (max-width: 62.5rem) {

  /* Burger-Menue */
  .nav-toggle {
    display: grid;
    place-items: center;
    order: 3;
    margin-left: auto;
    width: 2.75rem; height: 2.75rem;
    padding: 0;
    border: 0;
    background: var(--c-navy);
    color: var(--c-white);
    cursor: pointer;
  }
  .nav-toggle svg { width: 1.35rem; height: 1.35rem; }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

  .site-header__inner { flex-wrap: wrap; }

  .site-nav {
    order: 4;
    width: 100%;
    margin-left: 0;
    display: none;
    border-top: 1px solid var(--c-border);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.5rem;
  }
  .site-nav__link {
    display: block;
    padding: 0.85em 0;
  }
  .site-nav__link::after { display: none; }

  .social { order: 2; }

  /* Untermenue: im Burger-Menue keine schwebende Flaeche, sondern
     eingerueckte Eintraege unter dem Elternpunkt */
  .subnav {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    padding-block: 0 0.4rem;
    background: transparent;
  }
  .subnav::after { display: none; }
  .subnav__link {
    padding: 0.6em 0 0.6em 1.5em;
    color: var(--c-navy);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
  }
  .subnav__link::before { content: "\2013\00A0"; }
  .subnav__link:hover,
  .subnav__link[aria-current="page"] { background: transparent; text-decoration: underline; }
}

/* --- bis 768 px: alles einspaltig --------------------------------------- */
@media (max-width: 48rem) {

  /* Hero: Text linksbuendig, Button volle Breite.
     Der Bildausschnitt steht im Einstellbereich ganz oben. */
  .hero { min-height: 0; }
  .hero__inner { padding-block: clamp(2rem, 9vw, 3.5rem); }
  .hero__content { width: 100%; text-align: left; }
  .hero__name { align-items: flex-start; }
  .hero .btn-row { justify-content: stretch; }
  .hero .btn-row .btn { flex: 1 1 100%; justify-content: center; }

  /* Termine untereinander */
  .events__columns { grid-template-columns: minmax(0, 1fr); }
  .events__column + .events__column { margin-top: clamp(1.75rem, 5vw, 2.5rem); }

  /* Zitate: Foto oben als Banner, Zitat darunter, keine Ueberlappung */
  .quote-group { display: flex; flex-direction: column; }
  .quote-group[data-align="bild-rechts"] .quote__media,
  .quote-group[data-align="bild-links"]  .quote__media {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    order: -1;
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  .quote-group[data-align="bild-rechts"] .quote__person,
  .quote-group[data-align="bild-links"]  .quote__person {
    top: 0;
    bottom: 0;
    height: 100%;
    left: auto;
    right: 8%;
    transform: none;
  }
  .quote-group[data-align="bild-links"] .quote__person { left: 8%; right: auto; }

  .quote { padding-top: clamp(1.5rem, 4vw, 2rem); }
  .quote__text, .quote-follow__body { width: 100%; margin: 0; }
  .quote__wedge { display: none; }

  /* einspaltig: der Zeilenabstand muss wieder her, sonst kleben die
     Absaetze aneinander */
  .textblock__columns { grid-template-columns: minmax(0, 1fr); row-gap: 1.1em; }
  .textblock__columns .btn-row { grid-column: 1; }

  .supporters__list { justify-content: center; gap: 1.5rem 2rem; }
  .supporters__item { flex: 0 0 calc(50% - 1rem); display: grid; place-items: center; }

  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { justify-content: center; }

  .site-footer__inner { justify-content: center; text-align: center; }
  .site-footer__links { justify-content: center; }

  /* --- Unterseiten ------------------------------------------------------- */

  /* Bildleiste: auch das zweite von rechts faellt weg, es bleiben die
     linken beiden */
  .bildleiste__bild--weg-unter-768 { display: none; }

  /* Hero: das Zitat nimmt die ganze Breite ein. Der Abdunkler kommt hinzu,
     weil der Text hier ueber hellere Bildpartien rutscht und der Kontrast
     sonst unter 4,5 : 1 faellt. Beides gilt nur fuer die alte Zitatfassung —
     der Seitentitel bringt seinen Kontrast im Navy-Kasten mit. */
  .hero-unterseite__zitat { width: 100%; margin-left: 0; }
  .hero-unterseite:has(.hero-unterseite__zitat) .hero-unterseite__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgb(17 21 57 / 0.62), rgb(17 21 57 / 0.18));
  }

  /* Text-Bild-Reihen einspaltig, Bild immer oben */
  .textbild__raster,
  .textbild[data-align="bild-links"] .textbild__raster {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 5vw, 2.25rem);
  }
  .textbild[data-align="bild-rechts"] .textbild__bild { order: -1; }

  /* Blocksatz in einer Spalte reisst auf — wieder linksbuendig */
  .textblock__fluss {
    column-count: 1;
    text-align: left;
  }

  .quote--ohne-bild .quote__text { width: 100%; }

  /* Das Untermenue steht jetzt im 1000er-Block weiter oben — es gehoert
     zum Burger-Menue und muss mit ihm zusammen umschalten. */

  /* Akkordeons, Zielkarten und Listenboxen untereinander */
  .akkordeons,
  .zielkarten,
  .listenboxen { grid-template-columns: minmax(0, 1fr); }

  /* Sobald die Listenboxen einspaltig stehen, auch der Projektstreifen */
  .projektstreifen { grid-template-columns: minmax(0, 1fr); }

  /* Themenbloecke einspaltig, Bild immer oben */
  .zielblock__raster,
  .zielblock[data-align="bild-links"] .zielblock__raster {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.25rem, 4vw, 1.9rem);
  }
  .zielblock[data-align="bild-rechts"] .zielblock__bild { order: -1; }

  /* Sechs Kacheln waeren hier nur noch rund 100 px breit */
  .beitrag__bilder { --reihe-spalten: 4; }

  /* Videoreihe: zwei statt vier. Eine einzige Spalte waere zu viel des
     Guten — eine Hochkantkachel ueber die ganze Breite waere auf einem
     375-px-Telefon 667 px hoch, man saehe nur noch ein Video je Bildschirm. */
  .videoreihe__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- bis 30 rem: engere Termin-Kacheln ---------------------------------- */
@media (max-width: 30rem) {
  /* Etwas breiter als frueher (78 px), damit die Uhrzeit neben der schraegen
     Kante Platz hat */
  .event { grid-template-columns: 96px minmax(0, 1fr); }
  .event__date { padding-left: 0.7em; }
  .event__body { padding-inline: 0.85em 0.8em; }

  .beitrag__bilder { --reihe-spalten: 3; }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .site-header, .wedge, .quote__media, .nav-toggle, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .quote, .contact { background: #fff !important; color: #000 !important; }
}