/* Stilregler aus HUBIplan (Webseite › Gestaltung › Feinabstimmung, Konzept G1).
   Lädt nach dem Design und greift nur bei gesetzten data-st-… am <html> (seite/stil.py);
   ohne Regler bleibt jedes Design unverändert. Nutzer schreiben kein CSS, jede Stufe steht hier. */

/* ---------- Schrift ---------- */
/* Feste Paare, nur Schriften unter SIL OFL 1.1 aus schriften/ oder Systemschriften */
html[data-st-font="system"] body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-titel: inherit; }
html[data-st-font="modern"] body { font-family: "Open Sans", system-ui, sans-serif; --schrift-titel: "Roboto", "Open Sans", system-ui, sans-serif; }
html[data-st-font="festive"] body { font-family: "Open Sans", system-ui, sans-serif; --schrift-titel: Georgia, Cambria, "Times New Roman", serif; }
/* Ralf 14.11.2026: Source Sans 3 allein („klar“) oder mit Crimson Pro in Überschriften („elegant“) */
html[data-st-font="clear"] body { font-family: "Source Sans 3", system-ui, sans-serif; --schrift-titel: inherit; }
html[data-st-font="elegant"] body { font-family: "Source Sans 3", system-ui, sans-serif; --schrift-titel: "Crimson Pro", Georgia, Cambria, "Times New Roman", serif; }
/* Atkinson Hyperlegible: besonders gut unterscheidbare Buchstaben („gut lesbar“) */
html[data-st-font="readable"] body { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; --schrift-titel: inherit; }
html[data-st-font] .marke { font-family: var(--schrift-titel); }

html[data-st-size="large"] { font-size: 112.5%; }
html[data-st-size="large"] body { font-size: 19px; }
html[data-st-size="normal"] { font-size: 100%; }
html[data-st-size="normal"] body { font-size: 17px; }
html[data-st-size="xlarge"] { font-size: 125%; }
html[data-st-size="xlarge"] body { font-size: 21px; }

html[data-st-leading="tight"] body { line-height: 1.45; }
html[data-st-leading="normal"] body { line-height: 1.6; }
html[data-st-leading="airy"] body { line-height: 1.8; }

/* Überschriften im Inhalt */
html[data-st-headings] main h2 { border: 0; padding-bottom: 0; }
html[data-st-headings] main h2::after { content: none; }
html[data-st-headings="plain"] main h2 { color: inherit; }
html[data-st-headings="line"] main h2 { padding-bottom: .3rem; border-bottom: 2px solid var(--farbe-zier); }
html[data-st-headings="color"] main h2 { color: var(--link); }
html[data-st-headings="color"] main h2::after {
  content: ""; display: block; width: 3rem; height: 3px; margin-top: .4rem;
  background: var(--farbe-zier); border-radius: 2px;
}
html[data-st-heading-align="center"] main h1, html[data-st-heading-align="center"] main h2 { text-align: center; }
html[data-st-heading-align="center"] main h2::after { margin-left: auto; margin-right: auto; }
html[data-st-heading-align="left"] main h1, html[data-st-heading-align="left"] main h2 { text-align: left; }
html[data-st-heading-align="left"] main h2::after { margin-left: 0; }

/* Kurze Zierlinie (Webseite #89): 48 × 3 px unter der Überschrift, linksbündig oder mittig */
html[data-st-headings="short"] main h2 { position: relative; padding-bottom: .65rem; }
html[data-st-headings="short"] main h2::after {
  content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px;
  margin: 0; background: var(--farbe-zier); border-radius: 0;
}
html[data-st-headings="short"][data-st-heading-align="center"] main h2::after,
html[data-st-headings="short"]:not([data-st-heading-align="left"]) body.design-festive main > section > h2::after { left: calc(50% - 24px); }
/* Auf farbigen Abschnitten Linien in der Schriftfarbe des Abschnitts (Gold auf Loden hebt sich kaum ab) */
html main .abschnitt-farbig h2::after { background: currentColor; }
html main .abschnitt-farbig h2 { border-bottom-color: currentColor; }

/* Größere Überschriften (Webseite #89): Seitentitel und Abschnittstitel */
html[data-st-heading-size="large"] main h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
html[data-st-heading-size="large"] main h2:not(.aemter h2, .hinweis-kasten h2, .spalte-seite h2) { font-size: 1.65rem; }
/* Größe des Seitentitels allein (Webseite #96): geht vor „Größe der Überschriften“ und reicht
   auch nach unten, damit der Titel nicht größer wirkt als der Vereinsname im Kopf. Jede Stufe
   schrumpft in schmalen Fenstern mit; das Band (page_title) wird bei kleinem Titel flacher. */
html[data-st-title-size="small"] main h1 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); }
html[data-st-title-size="medium"] main h1 { font-size: clamp(1.3rem, 3.7vw, 1.75rem); }
html[data-st-title-size="normal"] main h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); }
html[data-st-title-size="large"] main h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
html[data-st-title-size="small"] { --st-band-polster: .7rem; }
html[data-st-title-size="medium"] { --st-band-polster: .85rem; }

/* Schmuckschrift für die Überschrift der Begrüßung (Great Vibes, SIL OFL 1.1) */
html[data-st-script-greeting="on"] .begruessung h1 {
  font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.3rem, 7vw, 3.4rem); color: var(--link);
}

/* Schrift der Überschriften unabhängig vom Text (Ralf 14.11.2026); steht nach „font“ und gewinnt */
html[data-st-heading-font="text"] body { --schrift-titel: inherit; }
html[data-st-heading-font="modern"] body { --schrift-titel: "Roboto", "Open Sans", system-ui, sans-serif; }
html[data-st-heading-font="festive"] body { --schrift-titel: Georgia, Cambria, "Times New Roman", serif; }
html[data-st-heading-font="clear"] body { --schrift-titel: "Source Sans 3", system-ui, sans-serif; }
html[data-st-heading-font="elegant"] body { --schrift-titel: "Crimson Pro", Georgia, Cambria, "Times New Roman", serif; }
/* Fraktur nur für Überschriften; sie hat nur einen Schnitt, fett gerechnet sähe sie verschmiert aus */
html[data-st-heading-font="fraktur"] body { --schrift-titel: "UnifrakturMaguntia", Georgia, serif; }
html[data-st-heading-font="strong"] body { --schrift-titel: "Oswald", "Arial Narrow", system-ui, sans-serif; }
html[data-st-heading-font] :is(h1, h2, h3, .marke) { font-family: var(--schrift-titel); }
html[data-st-heading-font="fraktur"] :is(h1, h2, h3, .marke) { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- Seite ---------- */
html[data-st-width="normal"] { --breite: 64rem; }
html[data-st-width="wide"] { --breite: 80rem; }
/* Schmal: die ganze Seite als Kasten auf dem Seitengrund */
html[data-st-width="narrow"] { --breite: 56rem; background: var(--grund); }
html[data-st-width="narrow"] body { max-width: 56rem; margin: 0 auto; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie), 0 10px 40px rgb(0 0 0 / .06); }
html[data-st-width="narrow"] .karte, html[data-st-width="narrow"] .termin, html[data-st-width="narrow"] .kacheln a { border-color: var(--linie); }
@media (min-width: 64rem) {
  html[data-st-width] body.design-sidebar main.breite, html[data-st-width] body.design-sidebar .fuss .breite { max-width: var(--breite); }
  html[data-st-width="narrow"] body.design-festive .menue-breit { width: 100%; }
  /* Farbige Menüleiste nur bis zum Rand des Kastens */
  html[data-st-width="narrow"] .menue-breit, html[data-st-width="narrow"][data-st-nav="bar"] .menue-breit { border-image-outset: 0 16px; }
}

html[data-st-spacing="compact"] main { padding-top: 1rem; padding-bottom: 2rem; }
html[data-st-spacing="compact"] main h2 { margin-top: 1.1em; }
html[data-st-spacing="compact"] body.design-stage main.start > section { padding-top: 1rem; padding-bottom: 1.2rem; }
html[data-st-spacing="generous"] main { padding-top: 2.2rem; padding-bottom: 4rem; }
html[data-st-spacing="generous"] main h2 { margin-top: 2.4em; }
html[data-st-spacing="generous"] body.design-stage main.start > section { padding-top: 2.5rem; padding-bottom: 3rem; }
html[data-st-spacing="generous"] .karten, html[data-st-spacing="generous"] .termine { gap: 1.4rem; }

html[data-st-corners="square"] { --rund: 0px; }
html[data-st-corners="slight"] { --rund: 4px; }
html[data-st-corners="round"] { --rund: 16px; }
html[data-st-corners] .karte, html[data-st-corners] .termin, html[data-st-corners] .kacheln a,
html[data-st-corners] .dokumente a, html[data-st-corners] .spalte-seite > section,
html[data-st-corners] .karussell-band, html[data-st-corners] .titelbild img { border-radius: var(--rund); }
html[data-st-corners] .termin-datum { border-radius: calc(var(--rund) * .7); }
/* Eckig heißt überall eckig (Webseite #89): Personen, Sozialsymbole, Sprungmarken und Punkte der Chronik */
html[data-st-corners="square"] :is(.person img, .ohne-foto, .mitglied img, .sozial-symbole a, .zeitleiste-sprung a) { border-radius: 0; }
html[data-st-corners="square"] .zeitleiste-eintrag::before, html[data-st-corners="square"] .zeitstrahl-liste li::before { border-radius: 0; }
/* Aufklappmenü folgt den Ecken, auch wenn ein Design eigene Rundungen setzt (#66) */
html[data-st-corners] .menue-breit .untermenue ul { border-radius: var(--rund); }
html[data-st-corners] .menue-breit .untermenue ul a { border-radius: calc(var(--rund) * .6); }
html[data-st-corners] .menue-breit a.menue-knopf, html[data-st-corners] .menue a.menue-knopf { border-radius: max(var(--rund), 4px); }
html[data-st-corners="round"] .menue-breit a.menue-knopf, html[data-st-corners="round"] .menue a.menue-knopf { border-radius: 999px; }
/* Eckig gilt auch im Kopf (Webseite #105): Menülinks, Untermenü-Überschriften, der hervorgehobene
   Menüknopf und die Suche haben keine Rundung, auch beim Darüberfahren, im Fokus und auf dem
   Handy. Die Markierung des aktiven Punkts (Schatten unten) wird so eine gerade Linie. Designs
   und Menüarten setzen eigene Rundungen mit höherer Spezifität, daher !important. */
html[data-st-corners="square"] :is(.menue-breit a, .menue-breit summary, .menue a, .menue summary, .menue nav, .kopf-suche) {
  border-radius: 0 !important;
}

/* ---------- Karten, Bilder, Knöpfe ---------- */
html[data-st-cards] .karte, html[data-st-cards] .termin, html[data-st-cards] .dokumente a { box-shadow: none; }
html[data-st-cards="border"] .karte, html[data-st-cards="border"] .termin, html[data-st-cards="border"] .dokumente a { border: 1px solid var(--linie); }
html[data-st-cards="shadow"] .karte, html[data-st-cards="shadow"] .termin, html[data-st-cards="shadow"] .dokumente a {
  border: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .07), 0 6px 18px rgb(0 0 0 / .07);
}
html[data-st-cards="flat"] .karte, html[data-st-cards="flat"] .termin, html[data-st-cards="flat"] .dokumente a {
  border: 0; background: color-mix(in srgb, var(--text) 4%, var(--flaeche));
}
/* Weiß mit feiner Kante und Farbstreifen (Webseite #89): Termine links, Kacheln der Züge oben */
html[data-st-cards="accent"] { --st-karte: #fff; }
html[data-st-cards="accent"] :is(.karte, .termin, .dokumente a, .kacheln a, .bildkachel, .zeitleiste-karte) {
  background: var(--st-karte); border: 1px solid var(--linie); box-shadow: none;
}
/* Streifen spezifischer als die Kartenregel darüber (:is mit „.dokumente a“ zählt 0,2,2) und als
   der Kontrastregler, sonst überschreibt deren border den Streifen (Webseite #91) */
html[data-st-cards="accent"] ul.termine > .termin { border-left: 3px solid var(--primaer); }
html[data-st-cards="accent"] ul.kacheln a { border-left-width: 1px; border-top: 3px solid var(--primaer); }
html[data-st-cards="accent"] :is(.termin, .kacheln a):hover { border-color: var(--primaer); }
/* Aufklappmenü wie die Karten: ohne Schatten nur mit Linie (#66) */
html[data-st-cards="flat"] body:not(.design-sidebar) .menue-breit .untermenue ul,
html[data-st-cards="accent"] body:not(.design-sidebar) .menue-breit .untermenue ul,
html[data-st-cards="border"] body:not(.design-sidebar) .menue-breit .untermenue ul {
  box-shadow: none; border: 1px solid var(--linie);
}

html[data-st-images="square"] .titelbild img, html[data-st-images="square"] .karussell-band,
html[data-st-images="square"] .text img, html[data-st-images="square"] .majestaet img,
html[data-st-images="square"] .karte.homepage .homepage-bild img, html[data-st-images="square"] .beitrag-bild img { border-radius: 0; }
html[data-st-images="cards"] .titelbild img, html[data-st-images="cards"] .karussell-band,
html[data-st-images="cards"] .text img, html[data-st-images="cards"] .majestaet img { border-radius: var(--rund); }

/* Seitenverhältnis der Bilder in Kacheln: Startseite, Alben der Galerie, Beiträge */
html[data-st-tile-ratio="wide"] :is(.bildkachel img, .galerie-alben img, .galerie-ohne-bild, .beitrag-bild img) { aspect-ratio: 3 / 2; }
html[data-st-tile-ratio="classic"] :is(.bildkachel img, .galerie-alben img, .galerie-ohne-bild, .beitrag-bild img) { aspect-ratio: 4 / 3; }
html[data-st-tile-ratio="square"] :is(.bildkachel img, .galerie-alben img, .galerie-ohne-bild, .beitrag-bild img) { aspect-ratio: 1; }

/* Rahmen um Bilder im Text und um Fotos der Würdenträger (Titelbilder bleiben ohne) */
html[data-st-image-frame="on"] .text img, html[data-st-image-frame="on"] .majestaet img {
  border: 1px solid var(--linie); padding: 5px; background: var(--flaeche);
}
html[data-st-image-frame="off"] .text img, html[data-st-image-frame="off"] .majestaet img { border: 0; padding: 0; }

html[data-st-buttons="filled"] .knopf:not(.hell) { background: var(--primaer); color: var(--auf-primaer); border: 0; }
html[data-st-buttons="outline"] .knopf:not(.hell) {
  background: transparent; color: var(--link); border: 2px solid currentColor; padding: calc(.65rem - 2px) calc(1.1rem - 2px);
}
html[data-st-buttons="outline"] .knopf.klein-knopf:not(.hell) { padding: calc(.35rem - 2px) calc(.8rem - 2px); }
html[data-st-buttons="outline"] .knopf:not(.hell):hover { filter: none; background: color-mix(in srgb, currentColor 10%, transparent); }
/* Etikett (Webseite #89): Großbuchstaben, leicht gesperrt, etwas kleiner, mehr Polster */
html[data-st-buttons="label"] .knopf:not(.hell) {
  background: var(--primaer); color: var(--auf-primaer); border: 0;
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; padding: .8rem 1.4rem;
}
html[data-st-buttons="label"] .knopf.klein-knopf:not(.hell) { font-size: .78rem; padding: .45rem 1rem; }
html[data-st-buttons="label"] .suche .knopf { padding-top: 0; padding-bottom: 0; }
/* Auf farbigen Abschnitten: Knopf in der Schriftfarbe des Abschnitts, Schrift in seiner Farbe */
html[data-st-buttons] .abschnitt-farbig .knopf:not(.hell) { background: var(--abschnitt-auf); color: var(--abschnitt-farbe, var(--text)); border: 0; }
html[data-st-buttons="outline"] .abschnitt-farbig .knopf:not(.hell) { background: transparent; color: var(--abschnitt-auf); border: 2px solid currentColor; }

/* Datumsfeld als Streifen über dem Termin */
html[data-st-date="strip"] .termin { flex-direction: column; gap: .5rem; }
html[data-st-date="strip"] .termin-datum {
  width: auto; display: inline-flex; align-items: baseline; gap: .35rem; padding: .2rem .7rem; line-height: 1.3;
}
html[data-st-date="strip"] .termin-datum span { display: inline; font-size: 1.05rem; }
html[data-st-date="strip"] .termin-datum small, html[data-st-date="strip"] .termin-datum .termin-jahr { display: inline; font-size: .8rem; }

/* ---------- Kopf und Menü ---------- */
html[data-st-header-bg="white"] .kopf { background: var(--flaeche); color: var(--text); }
html[data-st-header-bg="white"] .kopf .marke, html[data-st-header-bg="white"] .kopf .menue summary,
html[data-st-header-bg="white"] .kopf-sozial .sozial-symbole a { color: var(--link); }
html[data-st-header-bg="white"] .kopf-sozial .sozial-symbole a { background: var(--grund); }
html[data-st-header-bg="white"] .kopf :focus-visible { outline-color: var(--link); }
html[data-st-header-bg="color"] .kopf { background: var(--farbe-kopf); color: var(--auf-kopf); }
html[data-st-header-bg="color"] body.design-newspaper .kopf { border-top-color: color-mix(in srgb, var(--auf-kopf) 25%, var(--farbe-kopf)); }
html[data-st-header-bg="color"] .kopf .marke, html[data-st-header-bg="color"] .kopf .menue summary,
html[data-st-header-bg="color"] .kopf-sozial .sozial-symbole a { color: var(--auf-kopf); }
html[data-st-header-bg="color"] .kopf-sozial .sozial-symbole a { background: color-mix(in srgb, var(--auf-kopf) 12%, transparent); }
html[data-st-header-bg="color"] .kopf :focus-visible { outline-color: var(--auf-kopf); }
html[data-st-header-bg="color"] .kopf .menue nav :focus-visible { outline-color: var(--link); }
@media (min-width: 64rem) {
  /* Menü im Kopf (nicht die Reiterleiste der Zeitung): Schrift passend zum Hintergrund */
  html[data-st-header-bg="white"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit > ul > li > a:not(.menue-knopf),
  html[data-st-header-bg="white"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit .untermenue summary { color: var(--link); }
  html[data-st-header-bg="white"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit { border-top-color: var(--linie); }
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit > ul > li > a:not(.menue-knopf),
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit .untermenue summary { color: var(--auf-kopf); }
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit { border-top-color: color-mix(in srgb, var(--auf-kopf) 18%, transparent); }
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit > ul > li > a:not(.menue-knopf):hover,
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit .untermenue summary:hover { background: color-mix(in srgb, var(--auf-kopf) 15%, transparent); }
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit a:focus-visible,
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit .untermenue summary:focus-visible { outline-color: var(--auf-kopf); }
  html[data-st-header-bg="color"]:not([data-st-nav="bar"]) body:not(.design-newspaper) .menue-breit .untermenue ul a:focus-visible { outline-color: var(--link); }
  /* Farbig hinterlegter aktiver Punkt im farbigen Kopf: Menüfarbe statt Kopffarbe */
  html[data-st-header-bg="color"] body.design-classic .menue-breit a[aria-current="page"]:not(.menue-knopf),
  html[data-st-header-bg="color"] body.design-classic .menue-breit .untermenue summary.aktiv { background: var(--farbe-menue); color: var(--auf-menue); }
  html[data-st-header-bg="color"] body.design-sidebar .menue-breit .untermenue ul a { color: var(--auf-kopf); }
  html[data-st-header-bg="white"] body.design-sidebar .menue-breit .untermenue ul a { color: var(--text); }
  html[data-st-header-bg="white"] body.design-sidebar .marke { border-bottom-color: var(--linie); }
}

/* Wappen und Name (nie beide aus, prüft seite/stil.py); ausgeblendeter Name bleibt für Screenreader */
html[data-st-logo="off"] .marke:not(.marke-bild) img { display: none; }
html[data-st-name="off"] .marke:not(.marke-bild) span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[data-st-logo-pos="left"] .marke { flex-direction: row; text-align: left; }
html[data-st-logo-pos="right"] .marke { flex-direction: row-reverse; text-align: right; }
html[data-st-logo-pos="center"] .marke { flex-direction: column; text-align: center; gap: .35rem; }
html[data-st-logo-pos="center"] body:not(.design-festive) .kopf-innen { justify-content: center; }
html[data-st-logo-pos="center"] body:not(.design-festive) .marke { flex: 1 1 auto; }
@media (max-width: 63.99rem) {
  html[data-st-logo-pos="center"] body:not(.design-festive) .marke { padding-left: 3.5rem; }
}
@media (min-width: 64rem) {
  html[data-st-logo-pos="center"] body:not(.design-festive) .marke { flex: 1 1 100%; }
  html[data-st-logo-pos="center"] body:not(.design-festive) .menue-breit ul { justify-content: center; margin-left: 0; }
  html[data-st-logo-pos="center"] body:not(.design-festive) .kopf-sozial { position: absolute; right: 16px; top: 1rem; }
  html[data-st-logo-pos="center"] body.design-newspaper .kopf-sozial { top: -2.2rem; }
  html[data-st-logo-pos="center"] body.design-stage .kopf-innen { flex-wrap: wrap; }
  html[data-st-logo-pos="center"] body.design-stage .menue-breit { order: 3; flex: 1 1 100%; }
}

html[data-st-header-height="low"] .kopf-innen { min-height: 3.4rem; }
html[data-st-header-height="low"] .marke { padding-top: .3rem; padding-bottom: .3rem; }
html[data-st-header-height="low"] .marke:not(.marke-bild) img { width: 40px; height: 40px; }
html[data-st-header-height="low"] .marke.marke-bild img { max-height: 5rem; }
/* Mittel (#68): zwischen niedrig und normal, z. B. für ein queres Kopfbild mit Unterzeile */
html[data-st-header-height="medium"] .kopf-innen { min-height: 4rem; }
html[data-st-header-height="medium"] .marke { padding-top: .35rem; padding-bottom: .35rem; }
html[data-st-header-height="medium"] .marke:not(.marke-bild) img { width: 48px; height: 48px; }
html[data-st-header-height="medium"] .marke.marke-bild img { max-height: 7.5rem; }
html[data-st-header-height="normal"] .marke:not(.marke-bild) img { width: 56px; height: 56px; }
html[data-st-header-height="high"] .kopf-innen { min-height: 7rem; }
html[data-st-header-height="high"] .marke { padding-top: 1.1rem; padding-bottom: 1.1rem; }
html[data-st-header-height="high"] .marke:not(.marke-bild) img { width: 88px; height: 88px; }
html[data-st-header-height="high"] .marke.marke-bild img { max-height: 14rem; }
@media (min-width: 64rem) {
  html[data-st-header-height="high"] .marke { font-size: 1.5rem; }
  html[data-st-header-height="high"] .marke:not(.marke-bild) img { width: 104px; height: 104px; }
}

/* Zierlinie unter dem Kopf in der Farbrolle „Zierlinie“ */
html[data-st-line="none"] .kopf { border-bottom: 0; box-shadow: none; }
html[data-st-line="none"] body.design-classic .kopf { border-top: 0; }
html[data-st-line="thin"] .kopf { border-bottom: 2px solid var(--farbe-zier); }
html[data-st-line="strong"] .kopf { border-bottom: 5px solid var(--farbe-zier); }

/* Menü am Bildschirm (das Handymenü bleibt gleich); Farben für den aktiven Punkt je Art */
@media (min-width: 64rem) {
  html[data-st-nav] .menue-breit, html[data-st-nav-active] .menue-breit {
    --st-strich: var(--farbe-menue); --st-aktiv: var(--farbe-menue); --st-auf-aktiv: var(--auf-menue);
  }
  /* Leiste: farbiges Band über die ganze Breite in der Menüfarbe */
  html[data-st-nav="bar"] .menue-breit {
    /* Band über die ganze Breite ohne clip-path, das sonst die Untermenüs abschneidet (#66) */
    background: var(--farbe-menue); box-shadow: none; border-image: linear-gradient(var(--farbe-menue), var(--farbe-menue)) fill 0 / 0 / 0 100vmax;
    border-top: 0; padding: .2rem 0;
    --st-strich: var(--auf-menue); --st-aktiv: var(--auf-menue); --st-auf-aktiv: var(--farbe-menue);
  }
  html[data-st-nav="bar"] .menue-breit > ul > li > a:not(.menue-knopf), html[data-st-nav="bar"] .menue-breit .untermenue summary {
    color: var(--auf-menue); border-radius: 6px; font-weight: 600; background: transparent;
  }
  html[data-st-nav="bar"] .menue-breit > ul > li > a:not(.menue-knopf):hover, html[data-st-nav="bar"] .menue-breit .untermenue summary:hover { background: color-mix(in srgb, var(--auf-menue) 15%, transparent); }
  html[data-st-nav="bar"] .menue-breit a:focus-visible, html[data-st-nav="bar"] .menue-breit .untermenue summary:focus-visible { outline-color: var(--auf-menue); }
  html[data-st-nav="bar"] .menue-breit .untermenue ul a:focus-visible { outline-color: var(--link); }
  html[data-st-nav="bar"] .menue-breit a.menue-knopf, html[data-st-nav="bar"] .menue-breit a.menue-knopf[aria-current="page"] { background: var(--auf-menue); color: var(--farbe-menue); }
  html[data-st-nav="bar"] body.design-festive .menue-breit { border-top: 0; border-bottom: 0; }
  /* Knöpfe: runde Felder, aktiver Punkt hinterlegt */
  html[data-st-nav="buttons"] .menue-breit > ul > li > a:not(.menue-knopf), html[data-st-nav="buttons"] .menue-breit .untermenue summary {
    color: inherit; font-weight: 600; border-radius: 999px; padding: .45rem .9rem;
  }
  html[data-st-nav="buttons"] .menue-breit > ul > li > a:not(.menue-knopf):hover, html[data-st-nav="buttons"] .menue-breit .untermenue summary:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  html[data-st-nav="buttons"] .menue-breit ul { margin-left: -.9rem; }
  /* Text: schlichte Wörter ohne Flächen */
  html[data-st-nav="text"] .menue-breit > ul > li > a:not(.menue-knopf), html[data-st-nav="text"] .menue-breit .untermenue summary {
    color: inherit; font-weight: 400; border-radius: 0; background: transparent;
  }
  html[data-st-nav="text"] .menue-breit > ul > li > a:not(.menue-knopf):hover, html[data-st-nav="text"] .menue-breit .untermenue summary:hover { background: transparent; opacity: .75; }
  html[data-st-nav="text"] .menue-breit a[aria-current="page"], html[data-st-nav="text"] .menue-breit .untermenue summary.aktiv { font-weight: 700; }
  html[data-st-nav="text"] .menue-breit a.menue-knopf { border-radius: 999px; }
  html[data-st-nav="text"] body.design-classic .menue-breit, html[data-st-nav="buttons"] body.design-classic .menue-breit { border-top: 0; }

  /* Aktiver Punkt */
  html[data-st-nav="buttons"]:not([data-st-nav-active]) .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav="buttons"]:not([data-st-nav-active]) .menue-breit .untermenue summary.aktiv,
  html[data-st-nav-active="filled"] .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav-active="filled"] .menue-breit .untermenue summary.aktiv {
    background: var(--st-aktiv); color: var(--st-auf-aktiv); box-shadow: none;
  }
  html[data-st-nav="bar"]:not([data-st-nav-active]) .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav="bar"]:not([data-st-nav-active]) .menue-breit .untermenue summary.aktiv,
  html[data-st-nav="text"]:not([data-st-nav-active]) .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav="text"]:not([data-st-nav-active]) .menue-breit .untermenue summary.aktiv,
  html[data-st-nav-active="underline"] .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav-active="underline"] .menue-breit .untermenue summary.aktiv {
    background: transparent; color: inherit; box-shadow: inset 0 -3px 0 var(--st-strich); font-weight: 700;
  }
  html[data-st-nav="bar"] .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav="bar"] .menue-breit .untermenue summary.aktiv { color: var(--auf-menue); }
  html[data-st-nav="bar"][data-st-nav-active="filled"] .menue-breit > ul > li > a[aria-current="page"]:not(.menue-knopf),
  html[data-st-nav="bar"][data-st-nav-active="filled"] .menue-breit .untermenue summary.aktiv { color: var(--st-auf-aktiv); }
  html[data-st-nav-active="underline"] body.design-sidebar .menue-breit a[aria-current="page"]:not(.menue-knopf) { box-shadow: inset 4px 0 0 var(--st-strich); }
  html[data-st-nav-active="underline"] body.design-newspaper .menue-breit a[aria-current="page"]:not(.menue-knopf) { color: var(--auf-menue); --st-strich: var(--auf-menue); }
  html[data-st-nav-active="filled"] body.design-newspaper .menue-breit a[aria-current="page"]:not(.menue-knopf) { background: var(--grund); color: var(--text); }
}

/* Menü beim Blättern oben angeheftet */
html[data-st-sticky="on"] .kopf { position: sticky; top: 0; z-index: 6; }
html[data-st-sticky="off"] .kopf { position: relative; }

/* Menü auf dem Handy als Leiste zum Wischen unter dem Kopf statt hinter „Menü“. Farben wie der
   Kopf (currentColor), Untermenüs klappen in voller Breite unter der Leiste auf. */
@media (max-width: 63.99rem) {
  html[data-st-nav-mobile="scroll"] .kopf .menue { display: none; }
  html[data-st-nav-mobile="scroll"] .kopf-innen { flex-wrap: wrap; row-gap: 0; }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit {
    display: block; flex: 1 0 100%; order: 3; margin: 0 -16px; padding: 0 16px .35rem;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit > ul { justify-content: flex-start; width: max-content; }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit > ul > li { scroll-snap-align: start; }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit > ul > li > a:not(.menue-knopf),
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit .untermenue summary { color: inherit; }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit .hat-unter { position: static; }
  html[data-st-nav-mobile="scroll"] .kopf .menue-breit .untermenue ul { left: 16px; right: 16px; min-width: 0; }
}

/* Menüschrift am Bildschirm und im Handymenü: Großbuchstaben, größer (Ralf 14.11.2026) */
html[data-st-nav-case="upper"] :is(.menue-breit > ul > li > a:not(.menue-knopf), .menue-breit .untermenue summary, .menue nav a:not(.menue-knopf)) {
  text-transform: uppercase; letter-spacing: .06em; font-size: .86rem;
}
html[data-st-nav-case="normal"] :is(.menue-breit > ul > li > a:not(.menue-knopf), .menue-breit .untermenue summary, .menue nav a:not(.menue-knopf)) { text-transform: none; letter-spacing: normal; }
html[data-st-nav-size="normal"] :is(.menue-breit > ul > li > a:not(.menue-knopf), .menue-breit .untermenue summary) { font-size: .95rem; }
html[data-st-nav-size="large"] :is(.menue-breit > ul > li > a:not(.menue-knopf), .menue-breit .untermenue summary) { font-size: 1.08rem; }
html[data-st-nav-size="large"] .menue nav a { font-size: 1.1rem; }

/* ---------- Startseite ---------- */
html[data-st-hero="low"] .karussell { --karussell-hoehe: min(18rem, 45vh); }
html[data-st-hero="low"] .titelbild img { max-height: 18rem; }
html[data-st-hero="medium"] .karussell { --karussell-hoehe: min(23rem, 52vh); }
html[data-st-hero="medium"] .titelbild img { max-height: 23rem; }
html[data-st-hero="normal"] .karussell { --karussell-hoehe: min(28rem, 60vh); }
html[data-st-hero="normal"] .titelbild img { max-height: 28rem; }
html[data-st-hero="high"] .karussell { --karussell-hoehe: min(40rem, 80vh); }
html[data-st-hero="high"] .titelbild img { max-height: 40rem; }
html[data-st-hero] .begruessung-bilder .titelbild img, html[data-st-hero] .buehne .titelbild img { width: 100%; object-fit: cover; }
html[data-st-hero="low"] .buehne .titelbild img { height: 18rem; }
html[data-st-hero="medium"] .buehne .titelbild img { height: min(23rem, 52vh); }
html[data-st-hero="high"] .buehne .titelbild img { height: min(40rem, 80vh); }

/* Name auf dem Titelbild (Bühne zeigt ihn ohnehin) */
.begruessung-bilder { position: relative; }
.titel-name {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; margin: 0; pointer-events: none;
  padding: 1.2rem 1.4rem 3rem; color: #fff; font-weight: 700; line-height: 1.15;
  font-family: var(--schrift-titel); font-size: clamp(1.4rem, 4.2vw, 2.4rem);
  background: linear-gradient(rgb(0 0 0 / .62), transparent); border-radius: var(--rund) var(--rund) 0 0;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}

/* Titelbild abdunkeln oder halb durchsichtig in Vereinsfarbe färben (Ralf 14.11.2026). Die
   Schicht liegt im selben Rasterfeld wie das Bild, eine Bildunterschrift bleibt frei. */
html[data-st-hero-shade] { --st-schleier: #000; }
html[data-st-hero-tint="primary"] { --st-schleier: var(--primaer); }
html[data-st-hero-tint="accent"] { --st-schleier: var(--akzent); }
html[data-st-hero-tint="dark"] { --st-schleier: #000; }
html[data-st-hero-shade="light"] { --st-deckung: .3; }
html[data-st-hero-shade="strong"] { --st-deckung: .55; }
html[data-st-hero-shade="none"] :is(.begruessung-bilder, .buehne) .titelbild::after { content: none; }
html:is([data-st-hero-shade="light"], [data-st-hero-shade="strong"]) :is(.begruessung-bilder, .buehne) .titelbild { display: grid; }
html:is([data-st-hero-shade="light"], [data-st-hero-shade="strong"]) :is(.begruessung-bilder, .buehne) .titelbild > img { grid-area: 1 / 1; }
html:is([data-st-hero-shade="light"], [data-st-hero-shade="strong"]) :is(.begruessung-bilder, .buehne) .titelbild::after {
  content: ""; grid-area: 1 / 1; background: var(--st-schleier); opacity: var(--st-deckung); pointer-events: none;
  border-radius: var(--rund);
}
html[data-st-images="square"] :is(.begruessung-bilder, .buehne) .titelbild::after,
html:is([data-st-hero-shade="light"], [data-st-hero-shade="strong"]) :is(.buehne, .karussell-bild) .titelbild::after { border-radius: 0; }

/* Bildausschnitt, wenn das Titelbild beschnitten wird */
html[data-st-hero-focus="top"] :is(.begruessung-bilder, .buehne) .titelbild img { object-position: center top; }
html[data-st-hero-focus="center"] :is(.begruessung-bilder, .buehne) .titelbild img { object-position: center; }
html[data-st-hero-focus="bottom"] :is(.begruessung-bilder, .buehne) .titelbild img { object-position: center bottom; }

/* Lage des Namens auf dem Titelbild (Name auf dem Titelbild, Bühne) */
html[data-st-hero-text="top"] .buehne:has(img) .buehne-name { top: 0; bottom: auto; background: linear-gradient(rgb(0 0 0 / .62), transparent); }
html[data-st-hero-text="center"] .titel-name,
html[data-st-hero-text="center"] .buehne:has(img) .buehne-name {
  inset: 0 0 1rem; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; background: none; text-shadow: 0 1px 4px rgb(0 0 0 / .6);
}
html[data-st-hero-text="center"] .buehne:has(img) .buehne-name { inset: 0; }
html[data-st-hero-text="band"] .titel-name {
  top: auto; bottom: 1rem; padding: .8rem 1.4rem; background: rgb(0 0 0 / .55); border-radius: 0 0 var(--rund) var(--rund);
}
html[data-st-hero-text="band"] .buehne:has(img) .buehne-name { padding-top: 1rem; padding-bottom: 1rem; background: rgb(0 0 0 / .55); }

/* Abschnitte der Startseite trennen: Linie oder abwechselnd getönt (Bühne: Bänder ein/aus) */
html[data-st-sections="line"] main.start > section + section:not(.begruessung-bilder) { border-top: 1px solid var(--linie); }
html[data-st-sections="line"] body:not(.design-stage) main.start > section + section:not(.begruessung-bilder) { padding-top: .4rem; }
html[data-st-sections="alternate"] body:not(.design-stage) main.start > section:nth-of-type(even):not(.begruessung-bilder, .abschnitt-farbig, [style]) {
  background: color-mix(in srgb, var(--primaer) 6%, var(--flaeche)); border-radius: var(--rund); padding: .2rem 1.2rem 1.2rem; margin: 1rem 0;
}
html:is([data-st-sections="none"], [data-st-sections="line"]) body.design-stage main.start > section:not([style]) { background: var(--flaeche); color: var(--text); }
html:is([data-st-sections="none"], [data-st-sections="line"]) body.design-stage main.start > section:not([style]) .knopf { background: var(--primaer); color: var(--auf-primaer); }
html:is([data-st-sections="none"], [data-st-sections="line"]) body.design-stage main.start > section:not([style]) :focus-visible { outline-color: var(--link); }

/* ---------- Unterseiten ---------- */
/* Überschrift der Unterseiten als farbiges Band oder Band mit dem Titelbild der Startseite
   (--st-seitenbild aus seite/site.py; ohne Bild bleibt das farbige Band).
   Das Band reicht von Rand zu Rand (wie .abschnitt-voll), der Text bleibt in der Inhaltsflucht.
   Es gilt auch für Textseiten (h1 in .textseite, #101: in derselben Flucht wie auf allen Seiten)
   und die Seite einer Einheit (.einheit-kopf). */
html[data-st-spacing="compact"] { --st-main-oben: 1rem; }
html[data-st-spacing="generous"] { --st-main-oben: 2.2rem; }
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) { overflow-x: clip; }
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > :is(h1, .einheit-kopf),
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .textseite > h1 {
  background: var(--farbe-band); color: var(--auf-band); border-radius: 0; max-width: none;
  margin: .3em calc(50% - 50vw) 1.1rem;
  padding: var(--st-band-polster, 1.1rem) max(16px, calc(50vw - var(--breite) / 2 + 16px));
}
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .einheit-kopf :is(h1, .klein) { color: inherit; }
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .einheit-kopf h1 { margin: 0; }
/* Schmale Seite (Kasten): Band nur bis zum Rand des Kastens */
html[data-st-width="narrow"]:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > :is(h1, .einheit-kopf),
html[data-st-width="narrow"]:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .textseite > h1 {
  margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
}
@media (min-width: 64rem) {
  /* Seitenleiste: Inhalt steht links neben der Leiste, das Band reicht von der Leiste bis zum rechten Rand */
  html:is([data-st-page-title="band"], [data-st-page-title="image"]) body.design-sidebar:not([data-seite="start"]) main > :is(h1, .einheit-kopf),
  html:is([data-st-page-title="band"], [data-st-page-title="image"]) body.design-sidebar:not([data-seite="start"]) main > .textseite > h1 {
    margin-left: -2.5rem; margin-right: calc(100% + 19.5rem - 100vw); padding-left: 2.5rem; padding-right: 2.5rem;
  }
  html[data-st-width="narrow"]:is([data-st-page-title="band"], [data-st-page-title="image"]) body.design-sidebar:not([data-seite="start"]) main > :is(h1, .einheit-kopf),
  html[data-st-width="narrow"]:is([data-st-page-title="band"], [data-st-page-title="image"]) body.design-sidebar:not([data-seite="start"]) main > .textseite > h1 {
    margin-right: -2.5rem;
  }
}
/* Band schließt ohne Lücke an den Kopf an, wenn nichts davor steht … */
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > h1:first-child,
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .textseite:first-child > h1:first-child {
  margin-top: calc(-1 * var(--st-main-oben, 1.5rem));
}
/* … und an einen farbigen Abschnitt in voller Breite direkt darunter */
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .textseite > h1:has(+ .abschnitt-voll.abschnitt-farbig) { margin-bottom: 0; }
html:is([data-st-page-title="band"], [data-st-page-title="image"]) body:not([data-seite="start"]) main > .textseite > h1 + .abschnitt-voll.abschnitt-farbig { margin-top: 0; }
html[data-st-page-title="image"] body:not([data-seite="start"]) main > :is(h1, .einheit-kopf),
html[data-st-page-title="image"] body:not([data-seite="start"]) main > .textseite > h1 {
  padding-top: 4rem; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .5);
  background: linear-gradient(color-mix(in srgb, var(--st-schleier, #000) 50%, transparent), color-mix(in srgb, var(--st-schleier, #000) 50%, transparent)), var(--st-seitenbild, none) center / cover no-repeat, var(--farbe-band);
}
html[data-st-page-title="plain"] body:not([data-seite="start"]) main > h1 { background: none; padding: 0; }

/* Tabellen abwechselnd hinterlegt; ohne Farbrolle „Flächen“ leicht getönt */
html[data-st-stripes="on"] table:not(.monatskalender) > tbody > tr:nth-child(even) > :is(td, th) { background: var(--zeile, color-mix(in srgb, var(--text) 5%, var(--flaeche))); }
html[data-st-stripes="off"] table:not(.monatskalender) > tbody > tr:nth-child(even) > :is(td, th) { background: transparent; }

/* Sanft einblenden: menue.js setzt .st-ein nur bei Teilen unterhalb des Bildschirms */
html[data-st-motion="subtle"] .st-ein { opacity: 0; transform: translateY(14px); }
html[data-st-motion="subtle"] :is(main > section, main .karten > *, main .termine > *, main .kacheln > *) { transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  html[data-st-motion="subtle"] .st-ein { opacity: 1; transform: none; }
  html[data-st-motion="subtle"] :is(main > section, main .karten > *, main .termine > *, main .kacheln > *) { transition: none; }
}

/* ---------- Fuß ---------- */
html[data-st-footer="dark"] .fuss { background: #1d2421; color: #fff; --farbe-fuss: #1d2421; --auf-fuss: #fff; }
html[data-st-footer="light"] .fuss { background: var(--flaeche); color: var(--text); border-top: 1px solid var(--linie); --farbe-fuss: var(--flaeche); --auf-fuss: var(--text); }
html[data-st-footer="light"] .fuss a { color: var(--link); }
html[data-st-footer="light"] .fuss :focus-visible { outline-color: var(--link); }
html[data-st-footer="color"] .fuss { background: var(--primaer); color: var(--auf-primaer); --farbe-fuss: var(--primaer); --auf-fuss: var(--auf-primaer); }
html[data-st-footer="dark"] .fuss a, html[data-st-footer="color"] .fuss a { color: var(--auf-fuss); }

html[data-st-footer-align] .fuss-innen > * { flex-basis: 100%; }
html[data-st-footer-align] .fuss .sozial, html[data-st-footer-align] .fuss .recht, html[data-st-footer-align] .fuss .sozial-symbole { display: flex; }
html[data-st-footer-align="left"] .fuss-innen { justify-content: flex-start; text-align: left; }
html[data-st-footer-align="left"] .fuss-innen ul { justify-content: flex-start; }
html[data-st-footer-align="center"] .fuss-innen { justify-content: center; text-align: center; }
html[data-st-footer-align="center"] .fuss-innen ul { justify-content: center; }
html[data-st-footer-align="right"] .fuss-innen { justify-content: flex-end; text-align: right; }
html[data-st-footer-align="right"] .fuss-innen ul { justify-content: flex-end; }

/* ---------- Helle Abschnittsflächen (Webseite #89) ---------- */
html[data-st-section-bg="tinted"] { --abschnitt-hell: color-mix(in srgb, var(--primaer) 7%, var(--flaeche)); }
html[data-st-section-bg="warm"] { --abschnitt-hell: #f4f1ea; }
html[data-st-section-bg="grey"] { --abschnitt-hell: #f0f1f0; }

/* ---------- Kontrast erhöht ---------- */
html[data-st-contrast="on"] { --text: #0b0f0d; --text-leise: #2c332f; --linie: #8b928e; }
html[data-st-contrast="on"] :is(.karte, .termin, .dokumente a, .kacheln a) { border-color: var(--linie); }
html[data-st-contrast="on"] :focus-visible { outline-width: 3px; }

/* ---------- Knopf „Nach oben“ (menue.js blendet ihn erst nach etwas Blättern ein) ---------- */
.nach-oben {
  position: fixed; right: 16px; bottom: 16px; z-index: 7; width: 2.9rem; height: 2.9rem;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--primaer); color: var(--auf-primaer); font-size: 1.3rem; text-decoration: none;
  box-shadow: 0 2px 10px rgb(0 0 0 / .25);
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover { opacity: .9; }
.nach-oben:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media print { .nach-oben { display: none; } }

/* ---------- Dunkle Darstellung nach Gerät (Dunkelmodus D2) ----------
   Nur Grundflächen, Schrift und Linien wechseln; Kopf, Menü, Fuß und farbige Abschnitte
   behalten ihre Vereinsfarben. --link-dunkel rechnet seite/site.py auf 4,5 : 1 hoch. */
@media (prefers-color-scheme: dark) {
  html[data-st-dark="auto"] {
    color-scheme: dark;
    --text: #e8ebe9; --text-leise: #b3bab6; --grund: #121514; --flaeche: #1c201e; --linie: #3a403d;
    --link: var(--link-dunkel, #9fd3ae); --zeile: #232826;
    --abschnitt-hell: color-mix(in srgb, var(--primaer) 18%, #1c201e);
  }
  html[data-st-dark="auto"][data-st-contrast="on"] { --text: #ffffff; --text-leise: #d4d9d6; --linie: #7d8580; }
  html[data-st-dark="auto"] body { background: var(--grund); color: var(--text); }
  html[data-st-dark="auto"] :is(input, select, textarea) { background: var(--flaeche); color: var(--text); border-color: #7d8580; }
  html[data-st-dark="auto"] :is(.meldung.fehler, .feld-fehler) { color: #ff9b9b; }
  html[data-st-dark="auto"] .formular [aria-invalid="true"] { border-color: #ff9b9b; }
  html[data-st-dark="auto"][data-st-cards="shadow"] :is(.karte, .termin, .dokumente a) { box-shadow: 0 0 0 1px var(--linie); }
  html[data-st-dark="auto"][data-st-cards="accent"] { --st-karte: var(--flaeche); }
}