/*
 * Der geteilte Rahmen der Seiten ohne Logo-Leiste (Spec 2026-10-21,
 * „Stylesheets und Skripte“): Mindesthöhe der Seite, Breitenregel und
 * Randflächen des Kopfbilds, schmale Fußzeile. Jede Regel steht EINMAL als
 * Selektorliste aller Klassenfamilien, damit ein späterer Fix am Voting die
 * Spende nicht still verfehlt.
 *
 * Klassenfamilien: Voting (`voting-body`, `voting-hero`, `voting-footer`)
 * und Spende (`donation-body`, `donation-header`, `donation-footer`).
 *
 * Steht in `page-assets.ts` direkt nach `voting.css` (die Breitenregel muss
 * dessen `width: 100%` bei gleicher Spezifität schlagen) und vor den
 * Wertedateien `voting-frame.css` und `donation-frame.css`. Herkunft der Werte: Vorlage
 * `sources/voting-v7.template.html:162`, `:474–483`.
 */

/* --- Mindesthöhe (Vorlage :162) ---------------------------------------- */

/* Die Seite füllt das Fenster: auf einer kurzen Meldungsseite steht die
   Fußzeile am unteren Fensterrand statt mitten im Bild. `main` statt
   `.voting-page`, weil die Bedingungen-Seite ihr `main` `.voting-terms` nennt. */
body.voting-body,
body.donation-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.voting-body > main,
.donation-body > main {
  flex-grow: 1;
}

/* --- Breitenregel und Randflächen des Kopfbilds ------------------------- */

/* Bewusst abweichend von der Vorlage (:168 `width:100%`): breiter als die
   Datei wird das Bild hochskaliert und pixelig. Höchstens Originalbreite
   (aus den width/height-Attributen), mittig (Entscheidung des Auftraggebers
   16.10.2026). */
.voting-hero__image,
.donation-header__image {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Daneben trägt jede Hälfte die Farbe IHRES Bildrands; die Naht bei 50 %
   liegt hinter dem Bild. Die Farben sind Daten je Bild und stehen als
   Custom Properties in der Wertedatei der Seite (`voting-frame.css`,
   `donation-frame.css`). */
.voting-hero,
.donation-header {
  background:
    linear-gradient(var(--hero-edge-left-top), var(--hero-edge-left-bottom)) left / 50% 100% no-repeat,
    linear-gradient(var(--hero-edge-right-top), var(--hero-edge-right-bottom)) right / 50% 100% no-repeat;
}

/* --- Schmale Fußzeile (Vorlage :474–483) -------------------------------- */

/* :475 — rgb(20,55,45), 32px clamp(14px,4vw,20px); keine Trennlinie. */
.voting-footer,
.donation-footer {
  background: var(--gruen-tief);
  padding: 32px clamp(14px, 4vw, 20px);
  border-top: none;
}

/* :476 — 1170 px, Flexfluss linksbündig, gap 16px 60px. */
.voting-footer__inner,
.donation-footer__inner {
  max-width: 1170px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 60px;
  align-items: center;
  justify-content: flex-start;
}

/* :477–480 — 15 px, 500, Weiß, Links ohne Unterstreichung. */
.voting-footer__item,
.donation-footer__item {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--weiss);
}

.voting-footer__item a,
.donation-footer__item a {
  color: inherit;
  text-decoration: none;
}

/* Pink kommt auf dem tiefen Grün nur auf 2,8:1 — dieselbe Ausnahme wie bei
   `.site-footer :focus-visible` in styles.css (WCAG 1.4.11). */
.voting-footer :focus-visible,
.donation-footer :focus-visible {
  outline-color: var(--limette);
}