@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --nacht: #0a2440;
  --auriga: #2796d1;
  --tief: #03548b;
  --capella: #ffd98a;
  --stern: #e9a91c;
  --himmel: #eaf3fa;
  --tinte: #0b2540;
  --grau: #4a5f73;
  --linie: #c9d9e7;
  --weiss: #ffffff;

  /* Farben nach Aufgabe, hell und dunkel */
  --grund: #ffffff;
  --text: var(--tinte);
  --akzent: var(--tief);
  --flaeche-hoch: #ffffff;
  --knopf: var(--tief);
  --knopf-text: #ffffff;
  --knopf-hover: var(--nacht);
  --kopf-grund: rgb(255 255 255 / 0.97);
  color-scheme: light;

  --rand: clamp(16px, 4vw, 48px);
  --breite: 1240px;
  --radius-gross: 28px;
  --radius: 14px;
  /* Alles Kleine hat dieselbe Rundung: Knöpfe, Eingabefelder, Hinweise, Logo-Plaketten */
  --radius-knopf: 14px;
  /* Ein Verlauf für alle Bewegungen: sanfter Anlauf, zügig, weiches Ende */
  --weich: cubic-bezier(0.3, 0, 0.15, 1);
}

/* Dunkler Modus: nur, wenn der Besucher selbst umschaltet (data-farbe setzt das Skript im Kopf). Die Seite
   ist sonst immer hell, gleich wie das Gerät eingestellt ist. Kopf- und Kontaktbereich bleiben nachtblau. */
:root[data-farbe="dunkel"] {
    --stern: var(--capella);
    --grund: #07172b;
    --text: #e4edf5;
    --grau: #a7bacb;
    --linie: #2a4a6b;
    --himmel: #0e2440;
    --akzent: #8ccdf4;
    --flaeche-hoch: #173a60;
    --knopf: #8ccdf4;
    --knopf-text: #07172b;
    --knopf-hover: #b6e0f8;
    --kopf-grund: rgb(7 23 43 / 0.97);
    color-scheme: dark;
}
[data-farbe="dunkel"] .held, [data-farbe="dunkel"] .kontakt { box-shadow: inset 0 0 0 1px rgb(140 205 244 / 0.12); }
[data-farbe="dunkel"] .decke { box-shadow: 0 -30px 60px -20px rgb(0 0 0 / 0.5); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.0625rem/1.6 "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 1em; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.held :focus-visible, .kontakt :focus-visible { outline-color: var(--capella); }

/* Was der Browser sonst in seinen eigenen Farben und Regeln zeichnet */
::selection { background: var(--capella); color: var(--nacht); }
h1, h2, h3, h4, .aussage { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
input { caret-color: var(--akzent); accent-color: var(--akzent); }
time, .umkreis-km, a[href^="tel:"] { font-variant-numeric: tabular-nums; }

.sprung { position: absolute; left: -999px; top: 8px; background: var(--nacht); color: var(--weiss); padding: 8px 14px; border-radius: var(--radius-knopf); z-index: 10; }
.sprung:focus { left: 8px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* Hintergrund über die volle Breite, Logo und Menü bleiben auf der Inhaltsbreite */
  padding: 12px max(var(--rand), calc((100% - var(--breite)) / 2));
  background: var(--kopf-grund);
}
.marke { position: relative; display: block; }
.marke img { height: 46px; width: auto; display: block; }
.navigation { display: flex; align-items: center; gap: 30px; font-size: 0.975rem; }
.navigation a { text-decoration: none; }
.navigation a:not(.knopf) { color: var(--text); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.navigation a:not(.knopf):hover { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--auriga); }
.menue-knopf { display: none; }
.menue-knopf svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ---------- Knöpfe ---------- */
/* Eine Form für alle: leicht gerundete Ecken, klarer Rand. Gefüllt ist nur die eine Hauptaktion
   eines Bereichs, alles andere trägt den Umriss. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 20px; border-radius: var(--radius-knopf);
  background: var(--knopf); color: var(--knopf-text);
  font-weight: 500; text-decoration: none; line-height: 1.2;
  border: 1.5px solid var(--knopf);
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.knopf-klein { min-height: 40px; padding: 8px 16px; }
/* Umriss auf hellem Grund */
.knopf-umriss { background: transparent; color: var(--akzent); border-color: var(--akzent); }
.knopf-umriss:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); border-color: var(--akzent); }
/* Umriss auf dunklem Grund (Himmel, Kontakt) */
.knopf-hell, .knopf-rand { background: transparent; color: var(--weiss); border-color: rgb(255 255 255 / 0.7); }
.knopf-hell:hover, .knopf-rand:hover { background: rgb(255 255 255 / 0.12); border-color: var(--weiss); }
/* Hauptaktion auf dunklem Grund, in der Farbe der Sterne */
.knopf-stern { background: var(--capella); color: var(--nacht); border-color: var(--capella); }
.knopf-stern:hover { background: #ffe8b8; border-color: #ffe8b8; }

/* ---------- Held mit Sternkarte ---------- */
.held {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center;
  max-width: var(--breite);
  margin: 16px auto 0; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) clamp(28px, 4vw, 48px);
  border-radius: var(--radius-gross);
  background:
    radial-gradient(60% 75% at 78% 45%, rgb(39 150 209 / 0.45), transparent 72%),
    radial-gradient(50% 60% at 0% 100%, rgb(3 84 139 / 0.6), transparent 70%),
    var(--nacht);
  color: var(--weiss);
}
@media (min-width: 1289px) { .held { margin-inline: auto; } }
@media (max-width: 1288px) { .held { margin-inline: var(--rand); } }

.held-vor { color: var(--capella); font-size: 1rem; margin-bottom: 20px; }
.held h1 { font-size: clamp(2.9rem, 6.6vw, 5.6rem); font-weight: 300; letter-spacing: -0.035em; line-height: 0.98; max-width: 9ch; }
.held-lead { margin-top: 28px; max-width: 44ch; font-size: 1.1875rem; color: rgb(255 255 255 / 0.82); }
.held-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.held-karte { margin: 0; position: relative; }
.held-karte figcaption { margin-top: 16px; font-size: 0.875rem; color: rgb(255 255 255 / 0.6); text-align: center; }
/* Rahmen in der Größe der Karte: die Schilder richten sich prozentual daran aus */
.karte-rahmen {
  position: relative; margin-inline: auto;
  width: min(100%, calc(72vh * var(--seitenverhaeltnis))); aspect-ratio: var(--seitenverhaeltnis);
}
.karte-ebene { position: absolute; inset: 0; will-change: transform; }
.karte, .karte-land { width: 100%; height: 100%; overflow: visible; display: block; }
.karte-land .umriss { fill: rgb(90 180 235 / 0.16); stroke: rgb(160 215 248 / 0.7); stroke-width: 1.2; }
.karte-land .feld { fill: #a6dbfa; }
.karte .bild { stroke: var(--capella); stroke-width: 1.4; stroke-opacity: 0.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.karte .stern { cursor: pointer; outline: none; }
.karte .kern { fill: var(--capella); transition: r .2s; }
.karte .halo { fill: url(#glimmen); }
.karte .treffer { fill: transparent; }
/* Überfahrener Stern bleibt gelb und leuchtet stärker */
.karte .stern:hover .kern, .karte .stern:focus-visible .kern { r: 5.6; }
.karte .stern:hover .halo, .karte .stern:focus-visible .halo { r: 20; }
.karte .stern:focus-visible .halo { stroke: var(--capella); stroke-width: 2.5; }

.karten-schilder { position: absolute; inset: 0; pointer-events: none; }
.karten-schild {
  position: absolute; z-index: 1; display: grid; gap: 1px; justify-items: start;
  width: max-content; max-width: 210px; padding: 10px 14px 11px;
  background: #fff; color: var(--nacht); border-radius: var(--radius-knopf);
  box-shadow: 0 12px 32px rgb(3 16 33 / 0.45);
  opacity: 0; transition: opacity .15s, translate .15s;
}
.karten-schild.rechts { transform: translate(18px, -50%); translate: -4px 0; }
.karten-schild.links { transform: translate(calc(-100% - 18px), -50%); translate: 4px 0; }
.karten-schild img { max-width: 100%; max-height: 38px; margin-bottom: 7px; object-fit: contain; }
.karten-schild .ort { font-size: 0.75rem; font-weight: 600; color: var(--tief); }
.karten-schild .apo { font-size: 0.9375rem; line-height: 1.25; }

/* Einmaliger Auftritt: Punkte, dann Sterne, dann Linien */
@media (prefers-reduced-motion: no-preference) {
  .karte-land .feld { animation: auftauchen .8s var(--weich) both; }
  .karte .stern { animation: aufleuchten .35s var(--weich) both; animation-delay: calc(0.3s + var(--i) * 0.04s); }
  .karte .bild { animation: zeichnen .4s var(--weich) both; animation-delay: calc(0.9s + var(--i) * 0.045s); }
}
@keyframes auftauchen { from { opacity: 0; } }
@keyframes aufleuchten { from { opacity: 0; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(80px, 11vw, 152px) var(--rand) 0; }
.verbund { padding-top: clamp(56px, 8vw, 104px); }
.abschnitt-titel { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 400; color: var(--akzent); max-width: 20ch; }

.aussage {
  margin: clamp(28px, 4vw, 48px) 0 0; max-width: 24ch;
  font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.03em;
}
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 7vw, 88px); }
.drei article { border-top: 1px solid var(--linie); padding-top: 22px; }
.drei h3, .reiter-feld h3 { font-size: 1.375rem; font-weight: 500; margin-bottom: 14px; }
.drei p, .drei li { color: var(--grau); }

.liste { list-style: none; margin: 0 0 1em; padding: 0; }
.liste li { position: relative; padding: 0 0 8px 22px; }
.liste li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--auriga); }

/* ---------- Leistungen ---------- */
.leistungen-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; }
.leistungen-kopf p { color: var(--grau); max-width: 36ch; margin: 0; }
.reiter {
  display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center;
  margin-top: clamp(32px, 4vw, 56px); border-radius: var(--radius-gross); background: var(--himmel);
  padding: clamp(20px, 3vw, 40px); gap: clamp(20px, 4vw, 64px);
}
.reiter-liste { display: flex; flex-direction: column; gap: 4px; }
.reiter-liste button {
  font: inherit; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; text-align: left; letter-spacing: -0.015em;
  padding: 14px 18px; border: 0; border-radius: var(--radius-knopf); background: transparent; color: var(--grau); cursor: pointer;
}
.reiter-liste button:hover { color: var(--text); }
.reiter-liste button[aria-selected="true"] { background: var(--flaeche-hoch); color: var(--akzent); box-shadow: 0 1px 0 var(--linie); }
.reiter-liste { display: none; }
.js .reiter-liste { display: flex; }
/* Pfeile und Zählpunkte gibt es nur in der schmalen Ansicht */
.reiter-pfeil, .reiter-punkte { display: none; }
.reiter-inhalt { display: grid; align-self: stretch; align-content: center; gap: 24px; }
.js .reiter-feld { grid-area: 1 / 1; }
.reiter-feld { align-self: center; padding: 14px 0; max-width: 62ch; transition: opacity .22s var(--weich), transform .22s var(--weich); }
.reiter-feld[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(12px); }
/* Leistungen als kleine Sternbilder: gelbe Sterne wie auf der Karte, blaue Linien */
.sternzeichen { width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; overflow: visible; }
.sternzeichen .hintergrund circle { fill: var(--auriga); opacity: 0.35; }
.sternzeichen .zeichen { opacity: 0; transition: opacity .2s; }
.sternzeichen .zeichen.an { opacity: 1; }
.sternzeichen line { stroke: var(--auriga); stroke-width: 1.3; stroke-opacity: 0.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sternzeichen .zeichen circle { fill: var(--stern); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--stern) 55%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .js .sternzeichen .zeichen line { stroke-dashoffset: 1; transition: stroke-dashoffset .32s var(--weich) calc(0.08s + var(--k) * 0.035s); }
  .js .sternzeichen .zeichen.an line { stroke-dashoffset: 0; }
  .js .sternzeichen .zeichen circle { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .25s var(--weich) calc(var(--k) * 0.025s); }
  .js .sternzeichen .zeichen.an circle { transform: scale(1); }
}
.reiter-feld p { color: var(--grau); }
.hinweis { display: inline-block; margin-top: 8px; padding: 10px 16px; background: var(--flaeche-hoch); border-radius: var(--radius-knopf); }
.hinweis strong { color: var(--akzent); }
.vorteile { margin: 0 0 1.4em; display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; }
.vorteile dt { font-weight: 600; color: var(--akzent); }
.vorteile dd { margin: 0; color: var(--grau); }

/* ---------- Mitglieder ---------- */
.mitglieder-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.mitglieder-kopf p { max-width: 44ch; }
.mitglieder-kopf p { color: var(--grau); margin: 0; }
.mitglieder {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); align-items: start;
  border-bottom: 1px solid var(--linie);
}
.mitglieder > li { border-top: 1px solid var(--linie); }
.mitglied { scroll-margin-top: 120px; }

/* Logoband unter der Liste. Ruhig (ohne Skript oder bei reduzierter Bewegung) als zentrierte Reihe. */
.logoband { position: relative; margin-top: clamp(28px, 3.5vw, 44px); }
/* Unter dem Band kommt Aktuelles näher heran */
.mitglieder-abschnitt:has(.logoband) + .aktuelles { padding-top: clamp(56px, 7vw, 96px); }
/* Eigener Hintergrund an der laufenden Reihe: Bewegung und Maske isolieren sie, die Mischmodi
   brauchen darin etwas zum Verrechnen, sonst bleibt das Weiß der Logos als Kasten stehen */
.logoband-reihe { background: var(--grund); }
.logoband-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.logoband-reihe li { flex: none; padding: 6px clamp(18px, 2.6vw, 36px); }
.logoband-reihe li.kopie { display: none; }
.logoband-reihe a { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 60px; }
.logoband-reihe img { max-width: 100%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
/* Grau im Band, beim Überfahren blendet die farbige Fassung samt Grund als Ganzes darüber */
.logoband-reihe .grau { filter: grayscale(1); opacity: 0.55; transition: opacity .22s; }
.logoband-reihe .farbig {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: var(--radius-knopf); background: var(--grund); opacity: 0; transition: opacity .22s;
}
.logoband-reihe a:hover .farbig { opacity: 1; }
.logoband-reihe a:hover .grau { opacity: 0; }
/* Im Dunkeln: graues Logo umkehren, das Weiß des Bildes verschwindet im Hintergrund; farbig auf weißer Kachel */
[data-farbe="dunkel"] .logoband-reihe .grau { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: 0.6; }
[data-farbe="dunkel"] .logoband-reihe .farbig { background: #fff; }
.logoband-pause {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--radius-knopf); background: var(--grund); color: var(--grau); cursor: pointer;
}
.logoband-pause[hidden] { display: none; }
.logoband-pause:hover { color: var(--akzent); border-color: var(--akzent); }
.logoband-pause svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.logoband-pause .zeichen-weiter { display: none; fill: currentColor; }
.logoband.angehalten .zeichen-pause { display: none; }
.logoband.angehalten .zeichen-weiter { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .js .logoband-fenster {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .js .logoband-reihe { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: logoband var(--dauer, 60s) linear infinite; }
  .js .logoband-reihe li.kopie { display: block; }
}
@keyframes logoband { to { transform: translateX(-50%); } }
.mitglied summary {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 24px; gap: 16px; align-items: baseline;
  padding: 16px 16px; cursor: pointer; list-style: none;
}
.mitglied summary::-webkit-details-marker { display: none; }
.mitglied summary::after {
  content: "+" / ""; justify-self: end; font-size: 1.4rem; line-height: 1; color: var(--auriga);
  transition: transform .25s var(--weich);
}
.mitglied[open] summary::after { transform: rotate(45deg); }
.mitglied summary:hover .m-name { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--auriga); text-underline-offset: 4px; }
.m-ort { color: var(--akzent); font-weight: 600; }
.m-name { color: var(--text); transition: color .2s; }
.m-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px;
  padding: 0 16px 20px; font-size: 0.9375rem; color: var(--grau);
}
.m-details p { margin: 0; }
.m-details.mit-logo { grid-template-columns: 120px 1fr 1fr; align-items: start; }
/* Logos stehen auf einer weißen Plakette, auch im dunklen Modus: so wirken alle Logos wie vorgesehen */
.m-logo { display: grid; place-items: center; height: 64px; padding: 8px 10px; background: #fff; border-radius: var(--radius-knopf); box-shadow: 0 0 0 1px var(--linie); }
.m-logo img { max-width: 100%; max-height: 48px; object-fit: contain; }
.m-details a { text-decoration: none; overflow-wrap: anywhere; }
.m-details a { color: var(--akzent); }
.m-details a:hover { text-decoration: underline; }
.mitglied[open] { background: var(--himmel); border-radius: var(--radius-knopf); margin: 8px 0; }
@media (prefers-reduced-motion: no-preference) {
  .mitglied[open] .m-details { animation: aufklappen .2s var(--weich); }
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Suche nach Postleitzahl ---------- */
.plz-suche {
  margin: 0 0 clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-gross); background: var(--himmel); scroll-margin-top: 110px;
}
.plz-titel { font-size: 1.375rem; font-weight: 500; margin-bottom: 14px; }
/* Feld und Knopf als eine Leiste; der Fokusring umschließt die ganze Leiste */
.plz-leiste {
  display: flex; max-width: 420px; padding: 5px; border-radius: calc(var(--radius-knopf) + 4px);
  background: var(--grund); border: 1px solid var(--linie);
  transition: border-color .15s, box-shadow .15s;
}
/* Ring um die ganze Leiste nur beim Tippen, der Knopf hat seinen eigenen */
.plz-leiste:has(input:focus) { border-color: var(--akzent); box-shadow: 0 0 0 3px rgb(39 150 209 / 0.25); }
.plz-leiste input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.125rem; letter-spacing: 0.06em; padding: 8px 16px;
  border: 0; background: transparent; color: var(--text);
}
.plz-leiste input:focus-visible { outline: none; }
.plz-leiste input::placeholder { color: var(--grau); letter-spacing: 0; }
.plz-leiste button {
  font: inherit; font-weight: 500; padding: 10px 20px; border: 0; border-radius: var(--radius-knopf); cursor: pointer;
  background: var(--knopf); color: var(--knopf-text); transition: background-color .2s;
}
.plz-leiste button:focus-visible { outline-offset: 2px; border-radius: var(--radius-knopf); }
.plz-leiste button:hover { background: var(--knopf-hover); }
.plz-leiste button:disabled { opacity: 0.7; cursor: progress; }
.umkreis:empty { display: none; }
.umkreis { margin-top: 22px; }
.umkreis:focus { outline: none; }
.plz-fehler { margin: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--flaeche-hoch); color: var(--text); }
.umkreis-titel { font-size: 1.0625rem; font-weight: 600; margin-bottom: 12px; }
.umkreis-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.umkreis-liste li { padding: 18px; border-radius: var(--radius); background: var(--grund); }
@media (prefers-reduced-motion: no-preference) {
  .umkreis-liste li { animation: auftauchen .2s var(--weich) both; }
  .umkreis-liste li:nth-child(2) { animation-delay: .04s; }
  .umkreis-liste li:nth-child(3) { animation-delay: .08s; }
}
.umkreis-liste .m-logo { margin-bottom: 12px; }
.umkreis-liste p { margin: 0; }
.umkreis-name { font-size: 1.1875rem; font-weight: 500; }
.umkreis-km { color: var(--grau); margin: 2px 0 10px !important; }
.umkreis-kontakt { font-size: 0.9375rem; }
.umkreis-kontakt a { color: var(--akzent); text-decoration: none; overflow-wrap: anywhere; }
.umkreis-kontakt a:hover { text-decoration: underline; }

/* ---------- Kontakt ---------- */
.kontakt {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end;
  max-width: var(--breite); margin: clamp(96px, 12vw, 168px) auto 0;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  border-radius: var(--radius-gross); color: var(--weiss);
  background: radial-gradient(70% 90% at 100% 0%, rgb(39 150 209 / 0.3), transparent 70%), var(--nacht);
}
@media (max-width: 1288px) { .kontakt { margin-inline: var(--rand); } }
.kontakt h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 300; letter-spacing: -0.035em; max-width: 15ch; }
.kontakt-karte { border-top: 1px solid rgb(255 255 255 / 0.2); padding-top: 22px; }
.kontakt-rolle { color: var(--capella); margin-bottom: 8px; }
.kontakt-name { font-size: 1.375rem; line-height: 1.3; }
.kontakt-name span { font-size: 1rem; color: rgb(255 255 255 / 0.7); }
.kontakt address { color: rgb(255 255 255 / 0.8); }
.kontakt-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Fuß ---------- */
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px;
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--rand) 48px;
  font-size: 0.9375rem; color: var(--grau);
}
.fuss a { color: var(--akzent); text-underline-offset: 4px; }
.fuss img { height: 64px; width: auto; }
.fuss nav { display: flex; gap: 24px; margin-left: auto; }
.fuss p { margin: 0; }
/* Untere Zeile der Fußzeile: Copyright links, Cookie-Hinweis rechts, klein und gleich gesetzt */
.fuss-unten {
  flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 0.875rem;
}

/* ---------- Unterseiten: Aktuelles, Meldung, Rechtstexte ---------- */
.seite { max-width: calc(760px + 2 * var(--rand)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand) 24px; }
.seite h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -0.03em; color: var(--akzent); margin-bottom: 32px; }
.seite h2 { font-size: 1.375rem; font-weight: 500; margin: 40px 0 12px; }
.seite h3 { font-size: 1.125rem; font-weight: 600; margin: 28px 0 8px; }
.seite p, .seite li { color: var(--grau); }
.seite a:not(.knopf) { color: var(--akzent); }
.rueckweg { display: inline-block; margin-bottom: 28px; text-decoration: none; }
.rueckweg:hover { text-decoration: underline; }
.hinweis-sprache { background: var(--himmel); border-radius: var(--radius); padding: 12px 16px; color: var(--text); }
.stand { margin-top: 40px; font-size: 0.9375rem; }
.artikel time { display: block; color: var(--grau); margin-bottom: 8px; }
.artikel h1 { margin-bottom: 20px; }
.artikel-lead { font-size: 1.25rem; line-height: 1.5; color: var(--text) !important; margin-bottom: 32px; }
.artikel-bild { margin: 0 0 32px; }
.artikel-bild img { border-radius: var(--radius); width: 100%; }

/* Fließtext aus dem Redaktionssystem */
.fliesstext ul { list-style: none; margin: 0 0 1em; padding: 0; }
.fliesstext ul li { position: relative; padding: 0 0 8px 22px; }
.fliesstext ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--auriga); }
.fliesstext ol { margin: 0 0 1em; padding-left: 1.4em; }
.fliesstext strong { color: var(--text); font-weight: 600; }
.fliesstext a { color: var(--akzent); }
.drei .fliesstext p, .drei .fliesstext li, .reiter-feld .fliesstext p, .reiter-feld .fliesstext li { color: var(--grau); }

/* Meldungen als Zeilen: Datum links, Titel und Kurztext rechts */
.meldungen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.meldungen li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--linie); }
.meldungen time { color: var(--grau); padding-top: 3px; }
.meldungen h2, .meldungen h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 6px; }
.meldungen h2 a, .meldungen h3 a { color: var(--text); text-decoration: none; }
.meldungen h2 a:hover, .meldungen h3 a:hover { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--auriga); text-underline-offset: 4px; }
.meldungen p { margin: 0; color: var(--grau); max-width: 62ch; }
.weitere { margin-top: 56px; }
.weitere h2 { margin-bottom: 8px; }
.mehr { color: var(--akzent); font-weight: 500; }

/* Sprachwahl in der Kopfzeile */
.sprachwahl { font-weight: 600; letter-spacing: 0.02em; }

/* Symbolknöpfe in der Kopfzeile: Sprache und heller/dunkler Modus */
.werkzeuge { display: flex; align-items: center; gap: 8px; }
/* Sprache, Modus und Kontakt stehen als eine Gruppe: gleicher Abstand zwischen allen dreien */
@media (min-width: 721px) { .navigation .werkzeuge + .knopf { margin-left: calc(8px - 30px); } }
.symbol-knopf {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: var(--radius-knopf); border: 1px solid var(--linie); background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none;
}
.symbol-knopf:hover { color: var(--akzent); border-color: var(--akzent); }
.symbol-knopf svg { width: 20px; height: 20px; }
.symbol-knopf .flagge { width: 22px; height: 22px; }
/* Beschriftung der Symbolknöpfe: am Computer nur für Vorleseprogramme, im Handy-Menü sichtbar */
.knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.farbwahl { display: none; }
.js .farbwahl { display: inline-grid; }
.farbwahl .sonne { display: none; }
[data-farbe="dunkel"] .farbwahl .sonne { display: block; }
[data-farbe="dunkel"] .farbwahl .mond { display: none; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .held { grid-template-columns: 1fr; }
  .held-karte { max-width: 520px; margin: 8px auto 0; width: 100%; }
  .karte-rahmen { width: 100%; }
  .drei { grid-template-columns: 1fr; }
  .reiter { grid-template-columns: 1fr; }
  .sternzeichen { max-width: 180px; order: -1; grid-row: 2; margin-bottom: -18px; }
  /* Schmale Ansicht: Text direkt unter dem Sternbild, nicht in der Höhe des längsten Reiters gemittelt */
  .reiter { gap: 12px; }
  .reiter-inhalt { align-content: start; }
  .reiter-feld { align-self: start; padding-top: 0; }
  /* Ein Reiter zwischen zwei Pfeilen. Die übrigen liegen unsichtbar an derselben Stelle und bleiben
     für Tastatur (Pfeiltasten) und Vorleseprogramme erreichbar. */
  .js .reiter-wahl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px 8px; }
  .js .reiter-liste { display: grid; }
  .reiter-liste button { grid-area: 1 / 1; text-align: center; font-size: 1.25rem; padding: 6px; transition: opacity .2s; }
  .reiter-liste button[aria-selected="true"] { background: none; box-shadow: none; font-weight: 500; }
  .reiter-liste button[aria-selected="false"] { opacity: 0; pointer-events: none; }
  .js .reiter-pfeil {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: var(--radius-knopf);
    border: 1px solid var(--linie); background: var(--flaeche-hoch); color: var(--akzent); cursor: pointer;
  }
  .reiter-pfeil svg { width: 22px; height: 22px; }
  .js .reiter-punkte { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; }
  .reiter-punkte i { width: 8px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--auriga) 30%, transparent); transition: width .2s, background-color .2s; }
  .reiter-punkte i.an { width: 22px; background: var(--auriga); }
  /* Der Kasten ist so hoch wie die gewählte Leistung, nicht wie die längste */
  .js .reiter-feld[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) { .js .reiter-feld { animation: aufklappen .22s var(--weich); } }
  .mitglieder { grid-template-columns: 1fr; }
  .mitglied summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 2px 12px; }
  .mitglied summary .m-name { grid-row: 2; }
  .mitglied summary::after { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .m-details, .m-details.mit-logo { grid-template-columns: 1fr; gap: 8px; }
  .m-logo { justify-self: start; width: 140px; }
  .meldungen li { grid-template-columns: 1fr; }
  .kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .marke img { height: 38px; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 9px; font: inherit; font-weight: 500; padding: 10px 16px; border-radius: var(--radius-knopf);
    border: 1px solid var(--linie); background: var(--grund); color: var(--text); cursor: pointer;
  }
  /* Das Menü klappt als Verlängerung der Kopfzeile auf: volle Breite, nur unten gerundet.
     Solange es offen ist, ist der Kopf hell (setzt das Skript), auch oben auf dem Himmel. */
  .navigation {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 2px calc(var(--rand) - 12px) 20px;
    background: var(--grund); border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    box-shadow: 0 22px 32px rgb(6 27 51 / 0.14);
  }
  .navigation.offen { display: flex; }
  .navigation a { padding: 10px 12px; }
  .navigation .knopf { justify-content: center; margin: 6px 12px 0; }
  /* Im Handy-Menü: Sprache und Modus als beschriftete Zeilen, bündig mit den übrigen Punkten */
  .werkzeuge { flex-direction: column; align-items: stretch; gap: 4px; margin: 4px 12px; padding-top: 6px; border-top: 1px solid var(--linie); }
  .werkzeuge > * { margin-inline: -12px; }
  .symbol-knopf, .js .farbwahl {
    display: flex; justify-content: flex-start; gap: 12px; width: auto; height: auto;
    padding: 10px 12px; border: 0; border-radius: var(--radius-knopf); font: inherit; text-align: left;
  }
  .symbol-knopf:hover { background: var(--himmel); }
  .knopf-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .vorteile { grid-template-columns: 1fr; gap: 4px; }
  .vorteile dd { margin-bottom: 12px; }
  .fuss nav { margin-left: 0; }
}

/* ---------- Bewegung (nur mit JavaScript und ohne reduzierte Bewegung) ---------- */
.decke { position: relative; z-index: 2; background: var(--grund); margin-top: clamp(40px, 6vw, 72px); }
.kopf { transition: box-shadow .2s; }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--linie), 0 8px 24px rgb(6 27 51 / 0.06); }
/* Offenes Handy-Menü: Kopf und Menü bilden eine Fläche, die Trennlinie entfällt */
.kopf.menue-offen { box-shadow: none; background: var(--grund); }

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-woerter] .wort { opacity: 0.22; transition: opacity .24s var(--weich); }
[data-woerter] .wort.an { opacity: 1; }

.kontakt { position: relative; overflow: hidden; isolation: isolate; }
.kontakt::before {
  content: ""; position: absolute; inset: -40% 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #ffe4a8, transparent),
    radial-gradient(1.2px 1.2px at 32% 64%, #a6dbfa, transparent),
    radial-gradient(1.8px 1.8px at 58% 30%, #ffe4a8, transparent),
    radial-gradient(1.2px 1.2px at 74% 78%, #a6dbfa, transparent),
    radial-gradient(1.4px 1.4px at 88% 12%, #a6dbfa, transparent),
    radial-gradient(1.2px 1.2px at 46% 90%, #ffe4a8, transparent);
  background-size: 340px 260px;
  opacity: 0.7; will-change: transform;
  transform: translateY(var(--sternversatz, 0px));
}

.reiter-liste { position: relative; }

@media (min-width: 901px) {
  .held-klebt .held { position: sticky; top: 88px; z-index: 1; transform-origin: 50% 0; }
  .held-klebt .decke { border-radius: var(--decke-rundung) var(--decke-rundung) 0 0; box-shadow: 0 -30px 60px -20px rgb(6 27 51 / 0.25); }
  .leistung-klebt .reiter-bahn { height: 280vh; }
  /* --ueberstand setzt das Skript auf niedrigen Bildschirmen: Dann hält der Kasten weiter oben an, die Überschrift scrollt weg */
  .leistung-klebt .reiter-halter { position: sticky; top: calc(max(96px, 50vh - 360px) - var(--ueberstand, 0px)); }
  .leistung-klebt .reiter { min-height: var(--kastenhoehe, 520px); }
  .leistung-klebt .reiter-liste { padding-left: 18px; }
  .leistung-klebt .reiter-liste::before, .leistung-klebt .reiter-liste::after {
    content: ""; position: absolute; left: 0; top: 8px; width: 2px; border-radius: 2px;
  }
  .leistung-klebt .reiter-liste::before { bottom: 8px; background: var(--linie); }
  .leistung-klebt .reiter-liste::after { height: calc((100% - 16px) * var(--fortschritt, 0)); background: var(--auriga); }
}

/* ---------- Himmel über die ganze Breite, der Kopf liegt darauf ---------- */
:root { --kopf-hoehe: 70px; }
.held {
  max-width: none; margin: calc(-1 * var(--kopf-hoehe)) 0 0; border-radius: 0;
  padding: calc(var(--kopf-hoehe) + clamp(40px, 6vw, 88px)) max(var(--rand), calc((100% - var(--breite)) / 2)) calc(clamp(40px, 5vw, 64px) + var(--decke-rundung));
}
@media (max-width: 1288px) { .held { margin-inline: 0; } }
[data-farbe="dunkel"] .held { box-shadow: none; }
/* Die weiße Fläche liegt um ihre Rundung auf dem Himmel, damit in den Ecken Blau erscheint */
:root { --decke-rundung: 36px; }
.decke { margin-top: calc(-1 * var(--decke-rundung)); }
.held-klebt .held { top: 0; }

.marke .marke-weiss { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.marke img:not(.marke-weiss) { transition: opacity .2s; }
.kopf { transition: background-color .2s, box-shadow .2s; }
.kopf.auf-himmel:not(.gescrollt) { background: transparent; backdrop-filter: none; }
.kopf.auf-himmel:not(.gescrollt) .marke .marke-weiss { opacity: 1; }
.kopf.auf-himmel:not(.gescrollt) .marke img:not(.marke-weiss) { opacity: 0; }
.kopf.auf-himmel:not(.gescrollt) .menue-knopf { background: transparent; color: var(--weiss); border-color: rgb(255 255 255 / 0.4); }
@media (min-width: 721px) {
  .kopf.auf-himmel:not(.gescrollt) .navigation a:not(.knopf) { color: var(--weiss); }
  .kopf.auf-himmel:not(.gescrollt) .navigation a:not(.knopf):hover { text-decoration-color: var(--capella); }
  .kopf.auf-himmel:not(.gescrollt) .symbol-knopf { color: var(--weiss); border-color: rgb(255 255 255 / 0.35); }
  .kopf.auf-himmel:not(.gescrollt) .knopf { background: transparent; color: var(--weiss); border-color: rgb(255 255 255 / 0.7); }
  .kopf.auf-himmel:not(.gescrollt) .knopf:hover { background: rgb(255 255 255 / 0.12); border-color: var(--weiss); }
}

/* ====================== Flächen, Überschriften, Regionen (seit 1.6.0) ====================== */

/* ---------- Rubriken als Flächen, die sich übereinander schieben ---------- */
/* Jede Rubrik ist eine eigene Fläche über die volle Breite, oben gerundet wie die erste über dem Himmel.
   Sie liegt um ihre Rundung auf der vorigen, in den Ecken erscheint deren Farbe. */
.anker { display: block; height: 0; scroll-margin-top: calc(var(--kopf-hoehe) - 96px); }
.decke > .abschnitt, .schluss > .abschnitt {
  position: relative; max-width: none; margin: calc(-1 * var(--decke-rundung)) 0 0;
  padding: clamp(72px, 9vw, 128px) max(var(--rand), calc((100% - var(--breite)) / 2)) calc(var(--decke-rundung) + clamp(72px, 9vw, 128px));
  background: var(--grund);
  border-radius: var(--decke-rundung) var(--decke-rundung) 0 0;
  box-shadow: 0 -10px 28px -20px rgb(6 27 51 / 0.12);
}
/* Die erste Rubrik bringt keine eigene Fläche mit: Weiß und Rundung über dem Himmel kommen von .decke.
   Zwei gleich geformte weiße Flächen übereinander lagen beim Scrollen um Bruchteile eines Pixels versetzt,
   an den runden Ecken blieben dann einzelne dunkle Pixel des Himmels stehen (1.6.0 und 1.6.1). */
.decke > .verbund { margin-top: 0; box-shadow: none; background: none; border-radius: 0; }
.decke { border-radius: var(--decke-rundung) var(--decke-rundung) 0 0; }
/* Der Kopfbereich bleibt auch stehen, wenn er höher ist als der Bildschirm (Handy, kleines Fenster): und zwar
   sobald sein Ende mit der Karte unten ankommt. Passt er ganz ins Bild, ergibt die Rechnung null (oben fest). */
.stapel .held { position: sticky; top: min(0px, calc(100svh - var(--hoehe, 100svh))); z-index: 1; }
.decke > .leistungen { background: var(--himmel); }
.reiter { background: none; border-radius: 0; padding: 0; margin-top: clamp(32px, 4vw, 56px); }

/* Mit Skript bleibt eine Rubrik stehen, sobald ihr Ende erreicht ist, und die nächste gleitet darüber.
   Die Höhe misst das Skript (--hoehe). Ohne Skript und bei reduzierter Bewegung folgen sie einfach aufeinander. */
.stapel .decke > .abschnitt { position: sticky; top: min(0px, calc(var(--halt, 100svh) - var(--hoehe, 100svh))); }
/* Schmal hält die Rubrik schon an, wenn ihr Ende auf etwa drei Vierteln der Höhe steht: So lässt sich der
   letzte Absatz in Ruhe lesen, bevor die nächste Rubrik ihn überdeckt. */
@media (max-width: 900px) { .stapel .decke > .abschnitt { --halt: 74svh; } }
/* Dasselbe überall dort, wo die überdeckte Rubrik nicht mitläuft (Handy, Tablet, langsame Rechner) */
.stapel:not(.mitlauf) .decke > .abschnitt { --halt: 74svh; }
/* Eigene Ebene nur, wenn das Skript die Fläche wirklich bewegt: Sie kostet Speicher */
.mitlauf.stapel .decke > .abschnitt { will-change: transform; }

/* Schluss: Mitglieder und Aktuelles bilden zusammen die letzte helle Fläche, unten gerundet. Sie gleitet vom
   Nachthimmel weg. Der Himmel darf erst unterhalb ihrer oberen Rundung festliegen, sonst schaut er oben in
   den Ecken hervor: Deshalb beginnt der Bereich, in dem er sich halten kann, um die Rundung tiefer. */
.schluss { position: relative; isolation: isolate; margin-top: calc(-1 * var(--decke-rundung)); padding-top: var(--decke-rundung); }
.schluss > .abschnitt { z-index: 1; margin: 0; border-radius: 0; box-shadow: none; padding-bottom: 0; }
.schluss > .abschnitt:first-of-type {
  margin-top: calc(-1 * var(--decke-rundung)); border-radius: var(--decke-rundung) var(--decke-rundung) 0 0;
  box-shadow: 0 -10px 28px -20px rgb(6 27 51 / 0.12);
}
/* Aktuelles ist der hellblaue Abschluss der hellen Fläche, rundum gerundet. Die Fläche der Mitglieder reicht
   um die Rundung unter Aktuelles: So liegt hinter dessen oberen Ecken echtes Weiß. Ein Schatten an dieser
   Stelle ließ je nach Scrollstand den Nachthimmel als feinen dunklen Saum durchscheinen (bis 1.6.0). */
.schluss > .mitglieder-abschnitt:not(.letzte) {
  margin-bottom: calc(-1 * var(--decke-rundung));
  padding-bottom: calc(var(--decke-rundung) + clamp(40px, 5vw, 72px));
}
.schluss > .aktuelles { background: var(--himmel); border-radius: var(--decke-rundung); padding-top: clamp(56px, 7vw, 96px); }
.schluss > .letzte {
  margin-bottom: calc(-1 * var(--decke-rundung)); padding-bottom: clamp(72px, 9vw, 128px);
  border-bottom-left-radius: var(--decke-rundung); border-bottom-right-radius: var(--decke-rundung);
}
.schluss > .kontakt { margin-top: 0; }
.schluss-klebt .schluss > .kontakt { position: sticky; bottom: 0; }

/* Suche nach Postleitzahl: ohne Kasten, rechts neben der Überschrift der Mitglieder */
.mitglieder-kopf.mit-suche > div:first-child p { margin-top: 18px; }
.plz-suche { flex: 0 1 420px; margin: 0; padding: 0; background: none; border-radius: 0; }
.plz-titel { font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.umkreis:not(:empty) { margin-bottom: clamp(32px, 4vw, 48px); }
.umkreis-liste li { background: var(--himmel); }
@media (max-width: 720px) {
  .plz-suche { flex-basis: 100%; }
  .plz-leiste { max-width: none; }
}

/* Kontakt: der Nachthimmel über die volle Breite. Die Seite beginnt und endet im Himmel. */
.kontakt {
  z-index: 0; max-width: none; margin: calc(-1 * var(--decke-rundung)) 0 0; border-radius: 0;
  padding: calc(var(--decke-rundung) + clamp(64px, 9vw, 128px)) max(var(--rand), calc((100% - var(--breite)) / 2)) clamp(56px, 8vw, 112px);
  background: radial-gradient(60% 85% at 85% 25%, rgb(39 150 209 / 0.38), transparent 72%), var(--nacht);
}
@media (max-width: 1288px) { .kontakt { margin-inline: 0; } }
[data-farbe="dunkel"] .kontakt { box-shadow: none; }
.fuss {
  position: relative; z-index: 2;
  max-width: none; margin: 0; padding: clamp(32px, 4vw, 56px) max(var(--rand), calc((100% - var(--breite)) / 2)) 40px;
  background: var(--nacht); color: rgb(255 255 255 / 0.72);
}
.fuss a { color: var(--weiss); }
.fuss img { height: 52px; }
.fuss-unten { border-top-color: rgb(255 255 255 / 0.18); }
/* Die Links stehen unten in ihrer Zeile, bündig mit der Unterkante des Logos */
.fuss { align-items: flex-end; }
/* Keine helle Linie zwischen Kontakt und Fuß: Beide stoßen oft auf einer halben Pixelzeile aneinander, und
   beim Scrollen liegt der Kontakt kurz auf einer eigenen Ebene. Dann schien der helle Grund dahinter durch.
   Deshalb liegt der Fuß acht Pixel über dem Kontakt, und der Grund ist an dieser Kante selbst nachtblau. */
.fuss { margin-top: -8px; padding-top: calc(8px + clamp(32px, 4vw, 56px)); }
.decke { background: linear-gradient(to top, var(--nacht) 0, var(--nacht) 6px, var(--grund) 6px); }
.fuss nav { flex-wrap: wrap; gap: 10px 22px; }

/* ---------- Überschriften der Abschnitte ---------- */
/* Größer und in der leichten Schrift von Titel und Kontakt. Jeder Abschnitt ist anders gebaut. */
.abschnitt-titel { font-size: clamp(2.2rem, 4.8vw, 3.75rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.04; }
/* Verbund: die Überschrift ist nur der Auftakt, der große Satz darunter trägt */
.verbund .abschnitt-titel { font-size: clamp(1.4rem, 2.2vw, 1.875rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
/* Leistungen: Unterzeile unter der Überschrift statt rechts daneben */
.leistungen-kopf { display: block; }
.leistungen-kopf p { margin-top: 16px; max-width: 48ch; font-size: 1.1875rem; }
/* Aktuelles: Überschrift links, Meldungen rechts */
.aktuelles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.aktuelles .mitglieder-kopf { display: block; margin: 0; }
.aktuelles .mitglieder-kopf p { margin-top: 16px; }
@media (max-width: 900px) { .aktuelles { grid-template-columns: 1fr; } }

/* ---------- Mitglieder nach Himmelsrichtung (nur Handy) ---------- */
.regionen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 10px;
  border: 1px solid var(--linie); border-radius: calc(var(--radius-knopf) + 4px);
}
.regionen[hidden] { display: none; }
.regionen button {
  font: inherit; font-weight: 500; min-height: 44px; padding: 0 4px; border: 0; border-radius: var(--radius-knopf);
  background: transparent; color: var(--grau); cursor: pointer; transition: background-color .15s, color .15s;
}
.regionen button[aria-pressed="true"] { background: var(--himmel); color: var(--akzent); }
.regionen button:disabled { opacity: 0.4; cursor: default; }