/* ══ ZukunftsKollektiv Weiselhof ════════════════════════════════════════════
   Farben aus dem offiziellen Farbblatt des Vereins (Stand 09.09.2026):
   Grün #8FBF88, Gelb #F2E41B, Türkis #309399, Sand #F9B876, Koralle #EF7F5A,
   Jade #63AB95. Grund #FBF8EA und Band #F3EBC4 sind Flächentöne aus dem
   Entwurf und stehen nicht auf dem Blatt — siehe Kommentar im Token-Block.

   Zwei bewusste Abweichungen vom Schwesterprojekt zukunfts.haus, aus dem
   dieses Gerüst stammt:
     1. Knöpfe sind volle Pillen (999px), nicht 0/20/20/20 — die asymmetrische
        Rundung ist die Markensignatur von ZukunftsHaus, nicht die des Vereins.
     2. Der Haupt-Handlungsknopf ist gelb mit dunkler Schrift, nicht petrol mit
        weißer. Gelb ist im Entwurf die Handlungsfarbe und trägt gegen #232323
        einen Kontrast von rund 14:1.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Die sechs Farben der Vereins-CI ─────────────────────────────────
     Quelle: „ZukunftsKollektiv Farben.jpg" aus
     Nextcloud.Weiselhof/Weiselhof e.V/Logo und Infomaterial/Farben und Schrift
     Werte zeichengenau von dort übernommen, nicht aus dem Entwurf geschätzt. */
  --gruen:       #8FBF88;
  --gelb:        #F2E41B;
  --tuerkis:     #309399;
  --sand:        #F9B876;
  --koralle:     #EF7F5A;
  --jade:        #63AB95;

  /* ── Abgeleitet, NICHT Teil der offiziellen sechs ────────────────────
     Türkis trägt auf dem hellen Grund nur rund 3,3:1 und ist damit für
     Fließtext und Links zu schwach (nötig sind 4,5:1). Petrol ist das
     abgedunkelte Türkis und übernimmt diese Rolle. Der Entwurf hatte dafür
     #256F73 gesetzt — praktisch derselbe Ton, hier aber abgeleitet, damit er
     mitwandert, wenn der Verein sein Türkis je ändert. */
  --petrol:      color-mix(in srgb, var(--tuerkis) 78%, #000);
  --petrol-dark: color-mix(in srgb, var(--tuerkis) 62%, #000);
  --petrol-tint: color-mix(in srgb, var(--tuerkis) 12%, #fff);
  --sand-tint:   color-mix(in srgb, var(--sand) 22%, #fff);
  --jade-tint:   color-mix(in srgb, var(--jade) 16%, #fff);

  /* Schriftfarben auf farbigem Grund. Bleiben in beiden Fassungen gleich:
     Gelb und Petrol sind Markenflächen, keine Themenflächen — ein gelber
     Knopf wird in der dunklen Fassung nicht dunkel. */
  --auf-gelb:   #232323;
  --auf-petrol: #FBF8EA;

  --ink:      #232323;
  --ink-nav:  #232323;
  --muted:    #5c5c54;
  --line:     #e2dcc4;
  /* Der Grund ist warm getoent, die Karten sind heller. Tiefe entsteht
     dadurch, dass der Grund zurueckgeht, nicht dadurch, dass die Karten
     dunkler werden. */
  --bg:       #FBF8EA;
  --band:     #F3EBC4;
  --card:     #ffffff;
  --shadow:   0 1px 2px rgb(35 35 35 / .06), 0 10px 28px rgb(35 35 35 / .10);

  --accent:      var(--petrol);
  --accent-tint: var(--petrol-tint);

  /* Richtung, in die Akzentfarben für Text/Buttons gemischt werden.
     Hell: nach Schwarz (dunkler, lesbar auf weiß). Dunkel: nach Weiß.
     Die lesbaren Varianten selbst stehen im body-Block, damit die
     Bereichsfarben (accent-*) automatisch mitgerechnet werden. */
  --accent-mix: #000;

  --radius:     8px;
  --radius-btn: 999px;
  --kopfhoehe: 5.4rem;   /* Hoehe der klebenden Kopfzeile — richtet sich nach
                            der Logohoehe (3,6rem) plus Luft */
  --wide:  74rem;
  /* Lesebreite. Wächst mit dem Bildschirm, statt fest bei 42rem zu stehen —
     auf einem großen Schirm endete der Text sonst mitten auf der Seite.
     Aber nicht bis zur vollen Breite: Über rund 110 Zeichen pro Zeile findet
     das Auge den Anfang der nächsten Zeile nicht mehr sicher. Frutiger
     Condensed ist schmal gelaufen und verträgt deshalb mehr als eine normale
     Schrift, aber nicht beliebig viel. */
  --text:  clamp(42rem, 58vw, 60rem);

  /* Schriften. Fallback-Stapel ist Absicht: Frutiger und Goodlife sind
     lizenzpflichtig, und bis die Webfont-Lizenz vorliegt darf die Seite
     nicht daran haengen. Siehe docs/schriften.md. */
  --font-text:  'Frutiger Condensed', 'Fira Sans Condensed', 'Roboto Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-titel: 'Goodlife Serif', Georgia, 'Times New Roman', serif;

  /* WO GOODLIFE HINGEHOERT UND WO NICHT:
     Goodlife ist eine Auszeichnungsschrift. Gross gesetzt traegt sie die
     Marke, klein wird sie unleserlich — in 0,72rem Versalien war die
     Datumsmarke auf den Terminkarten kaum noch zu entziffern, und die
     Fussleisten-Ueberschrift „SCHNELLZUGRIFF" ebenso.
     Faustregel: Goodlife ab etwa 1,3rem, darunter Frutiger fett. */
}

/* Bereichsfarben — die vier Nebenfarben der CI. Eine Seite bekommt über
   das Feld „Akzent" eine davon; Karten, Rahmen und aktive Zustände rechnen
   sich daraus. */
.accent-koralle { --accent: #EF7F5A; --accent-tint: #fdece5; }
.accent-gruen   { --accent: #8FBF88; --accent-tint: #ecf4ea; }
.accent-tuerkis { --accent: #309399; --accent-tint: #e5f2f2; }
.accent-sand    { --accent: #F9B876; --accent-tint: #fdf0dd; }

/* ── Dunkle Variante ─────────────────────────────────────────────────────
   Zwei Wege: ausdrückliche Wahl über data-theme, sonst Systemeinstellung. */
:root[data-theme="dark"] {
  --ink: #ece9dc;  --ink-nav: #ece9dc;  --muted: #a3a08f;
  --line: #33322a; --bg: #1a1a17;       --band: #21201b;
  --card: #262520; --petrol-tint: #1d3234; --koralle-tint: #33241f;
  --accent-tint: #1d3234;
  --accent-mix: #fff;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece9dc;  --ink-nav: #ece9dc;  --muted: #a3a08f;
    --line: #33322a; --bg: #1a1a17;       --band: #24231d;
    --card: #24231d; --petrol-tint: #1d3234; --koralle-tint: #33241f;
    --accent-tint: #1d3234;
    --accent-mix: #fff;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  }
}

/* ── Schriften ───────────────────────────────────────────────────────────
   ACHTUNG, offener Punkt: Frutiger Condensed und Goodlife Serif sind
   lizenzpflichtige Schriften. Die hier eingebundenen .otf stammen aus dem
   Entwurf und sind eine DESKTOP-Lizenz — als Webfont ausgeliefert ist das
   in aller Regel nicht gedeckt. Vor dem Livegang entweder Webfont-Lizenz
   besorgen oder auf den Fallback-Stapel wechseln (dann diesen Block
   löschen, sonst nichts). Siehe docs/schriften.md.

   font-display: swap sorgt dafür, dass Text sofort sichtbar ist — mit der
   Ersatzschrift, bis die eigentliche da ist.

   WOFF2 zuerst, OTF als Rückfall: Die vier Schnitte sind als OTF zusammen
   552 KB, als WOFF2 229 KB. Das ist bei jedem ersten Seitenaufruf spürbar,
   und WOFF2 ist das Format, für das Browser gebaut sind — OTF liefert man
   im Web nur aus, wenn man kein anderes hat. Erzeugt mit fontTools aus den
   Originalen des Vereins; die OTF-Dateien bleiben als Quelle liegen. */
@font-face { font-family: 'Goodlife Serif';     src: url('../fonts/GoodlifeSerifBold.woff2') format('woff2'), url('../fonts/GoodlifeSerifBold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Frutiger Condensed'; src: url('../fonts/FrutigerLightCn.woff2')   format('woff2'), url('../fonts/FrutigerLightCn.otf')   format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Frutiger Condensed'; src: url('../fonts/FrutigerCondensed.woff2') format('woff2'), url('../fonts/FrutigerCondensed.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Frutiger Condensed'; src: url('../fonts/FrutigerBoldCn.woff2')    format('woff2'), url('../fonts/FrutigerBoldCn.otf')    format('opentype'); font-weight: 700; font-display: swap; }

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;

  /* Lesbare Akzent-Varianten. Hier auf body, nicht auf :root, weil die
     Bereichsklassen (accent-koralle/gruen/tuerkis/sand) --accent am body setzen —
     so rechnen sich die Varianten je Bereich und je Fassung neu.
     --accent-strong: Text, Links, aktive Ränder (mind. 4,5:1).
     --accent-fill:   Button-/CTA-Flächen mit weißem Text (immer dunkel).
     --signal-text:   Hinweise und Merkpunkte. */
  --accent-strong: color-mix(in srgb, var(--accent) 66%, var(--accent-mix));
  --accent-fill:   color-mix(in srgb, var(--accent) 62%, #000);
  --signal-text:   color-mix(in srgb, var(--koralle) 62%, var(--accent-mix));
}
/* Überschriften in der Serifenschrift der Marke. Kein negatives
   letter-spacing wie im Schwesterprojekt: Goodlife ist bereits eng
   gesetzt, enger wird es klumpig. */
h1, h2, h3, h4 { font-family: var(--font-titel); line-height: 1.2; font-weight: 700; margin: 0; }

/* Auf großen Bildschirmen wird der Fließtext etwas größer. Zusammen mit der
   breiteren Lesebreite bleibt die Zeichenzahl pro Zeile damit ungefähr gleich,
   statt mit der Breite mitzuwachsen. */
@media (min-width: 90rem) { body { font-size: 19.5px; } }

/* Zwischenüberschriften in Bändern (etwa „Wie wir arbeiten") brauchen Luft
   nach oben und etwas nach unten — global haben h1 bis h4 margin: 0, und die
   Überschrift klebte dadurch am Absatz darunter. */
.band .wrap > h3, .band .wrap > h4 { margin: 2.25rem 0 .6rem; }
.band .wrap > h3:first-child, .band .wrap > h4:first-child { margin-top: 0; }
p { margin: 0 0 1rem; }
a { color: var(--accent-strong); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
img { height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--bg); padding: .6rem .9rem; border-radius: 6px; z-index: 60; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: 1.5rem; }
.wrap-text { max-width: var(--text); }

/* ── Scroll-Fortschritt ──────────────────────────────────────────────────
   Schmale Leiste ganz oben, füllt sich beim Scrollen. Liegt über der
   Kopfleiste, ist rein informativ (aria-hidden) und für Zeigegeräte wie
   Tastatur gleichermaßen sichtbar. */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent-strong); transition: width .08s linear; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.4rem; border: 0; border-radius: var(--radius-btn);
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background-color .18s, transform .18s, box-shadow .18s;
}
.btn svg { width: 1.05em; height: 1.05em; }
/* Der Haupt-Handlungsknopf ist gelb mit dunkler Schrift — im Entwurf trägt
   Gelb die Handlung („Werde Mitglied"). Die Fläche bleibt in beiden
   Fassungen gleich: Gelb auf Dunkel funktioniert genauso wie auf Hell,
   deshalb hier feste Werte statt Token. */
.btn-primary { background: var(--gelb); color: var(--auf-gelb); font-weight: 700; letter-spacing: .01em; }
.btn-primary:hover { background: color-mix(in srgb, var(--gelb) 88%, #000); transform: translateY(-1px); box-shadow: var(--shadow); }
/* Zweitrangige Handlung: petrol mit weißer Schrift. */
.btn-secondary { background: var(--accent-fill); color: #fff; }
.btn-secondary:hover { background: color-mix(in srgb, var(--accent-fill) 85%, #000); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.btn-invert { background: #fff; color: var(--petrol-dark); }
.btn-invert:hover { transform: translateY(-1px); }

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; min-height: var(--kopfhoehe); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink-nav); font-weight: 700; font-size: 1.15rem; }
/* Das Logo ist eine gestapelte Wort-Bild-Marke (1213 x 731, Verhaeltnis 1,66):
   Kreis oben, zwei Textzeilen darunter. Bei 2,1rem Hoehe waren die Textzeilen
   rund sechs Pixel hoch und damit unlesbar — die Marke sah aus wie ein Fleck.
   3,6rem gibt den Zeilen etwa elf Pixel.
   Wer die Hoehe aendert, aendert --kopfhoehe mit: Die Kopfzeile klebt, und die
   Brotkrumen setzen darunter an dieser Zahl an. */
.brand img { height: 3.6rem; width: auto; }
@media (max-width: 40rem) { .brand img { height: 3rem; } }
.nav { margin-left: auto; }
.theme-toggle { margin-left: .25rem; }
.nav ul, .langs ul, .legal ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--ink-nav); font-size: .95rem; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent-strong); }
.nav a[aria-current] { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
.langs { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.langs ul { gap: .6rem; }
.langs a { text-decoration: none; color: var(--muted); }
.langs a[aria-current="true"] { color: var(--ink-nav); font-weight: 700; }
.theme-toggle {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-nav); cursor: pointer;
}
.theme-toggle:hover { background: var(--accent-tint); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
:root[data-theme="dark"] .icon-mond, .icon-sonne { display: none; }
:root[data-theme="dark"] .icon-sonne { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-mond { display: none; }
  :root:not([data-theme="light"]) .icon-sonne { display: block; }
  :root[data-theme="light"] .icon-mond { display: block; }
  :root[data-theme="light"] .icon-sonne { display: none; }
}
@media (max-width: 60rem) {
  .nav { order: 3; margin: 0; width: 100%; border-top: 1px solid var(--line); padding: .5rem 0; }
  /* Die Leiste scrollt waagerecht statt umzubrechen. Ohne nowrap/flex:none
     bricht „Räume mieten" auf zwei Zeilen und die Kopfzeile wird doppelt
     so hoch — auf 375 px Breite ist genau das passiert. */
  .nav ul { gap: 1.2rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: none; white-space: nowrap; }
  .header-cta { margin-left: auto; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 3.5rem 0 3rem; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
/* Ohne Grafik: Textspalte auf Lesebreite begrenzen, aber die linke Kante der
   Bänder halten — zentrieren würde eine zweite Fluchtlinie erzeugen. */
.hero.no-figure .wrap { grid-template-columns: minmax(0, var(--text)); }
@media (max-width: 62rem) { .hero .wrap { grid-template-columns: 1fr; gap: 2rem; } }

.hero-eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin: 0 0 1.25rem; color: var(--ink-nav); }
.hero-entity { font-size: 1.22rem; font-weight: 600; margin: 0 0 1rem; }
.hero-answer { color: var(--muted); font-size: 1.05rem; }
.hero-answer p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-updated { font-size: .82rem; color: var(--muted); margin: 1.5rem 0 0; }
.hero-figure img { display: block; width: 100%; height: auto; }

/* ── Bänder ──────────────────────────────────────────────────────────────── */
.band { padding: 4rem 0; }
.band-tint { background: var(--band); }
.band > .wrap > h2:first-child,
.band-title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 2rem; color: var(--ink-nav); max-width: 40rem; }
/* Fließtext in Bändern läuft über die volle Inhaltsbreite und schließt damit
   bündig mit Bildern und Galerien ab. Auf Wunsch des Vereins (13.09.2026):
   Eine schmalere Lesebreite sah auf großen Bildschirmen aus wie eine
   Grenze mitten auf der Seite. Die längeren Zeilen werden dort über eine
   größere Schrift abgefangen (siehe body, min-width: 90rem). */
.band .prose { max-width: none; }

/* Produktbild in der Karte: feste Hoehe, damit ein Raster aus Karten mit und
   ohne Bild nicht ausfranst. */
.card-bild {
  width: 100%; height: 11rem; object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  background: var(--band);
  margin: 0 0 1rem;
}

/* ── Weiterfuehrende Seiten ─────────────────────────────────────────────── */
.weiterfuehrend { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.weiterfuehrend a {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.weiterfuehrend a:hover, .weiterfuehrend a:focus-visible { border-color: var(--accent); }
.wf-titel { font-weight: 600; }
.wf-text { color: var(--muted); font-size: .92rem; }

/* ── Brotkrumen ──────────────────────────────────────────────────────────
   Leise: Orientierung, kein Navigationsangebot. */
.brotkrumen {
  /* Klebt unter dem Kopf, damit die Orientierung beim Scrollen nicht verschwindet.
     Die Hoehe des Kopfes steht in --kopfhoehe, sonst ueberlappen beide. */
  position: sticky; top: var(--kopfhoehe, 4.5rem); z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.brotkrumen ol {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: .7rem 0;
  font-size: .86rem; color: var(--muted);
}
.brotkrumen li + li::before { content: "›"; margin-right: .4rem; color: var(--line); }
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover, .brotkrumen a:focus-visible { color: var(--accent); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--ink); }

/* ── Blaettern ───────────────────────────────────────────────────────────
   Drei Felder: zurueck, Uebersicht, weiter. Faellt auf schmalen Schirmen
   untereinander, die Uebersicht bleibt in der Mitte. */
.blaettern {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: 1fr auto 1fr;
}
.blaettern-ziel {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.blaettern-ziel:hover, .blaettern-ziel:focus-visible { border-color: var(--accent); }
.blaettern-nach { text-align: right; }
.blaettern-richtung { font-size: .82rem; color: var(--muted); }
.blaettern-titel { font-weight: 600; }
.blaettern-alle {
  align-self: center; padding: .6rem 1rem; white-space: nowrap;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line);
}
.blaettern-alle:hover, .blaettern-alle:focus-visible { color: var(--accent); }
@media (max-width: 42rem) {
  .blaettern { grid-template-columns: 1fr; }
  .blaettern-nach { text-align: left; }
}

/* ── Raster ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* .grid-3 fehlte im geerbten Stylesheet — Dreierraster fielen dadurch
   stillschweigend auf eine Spalte zurueck, weil `.grid` allein nur
   `display: grid` setzt. Genau das ist bei den Terminkarten passiert. */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 68rem) { .grid-5 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 56rem) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; transition: transform .2s, box-shadow .2s;
}
a.tile { text-decoration: none; color: inherit; display: block; }
a.tile:hover, .tile-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.badge {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong);
  margin-bottom: 1rem;
}
.badge svg { width: 1.4rem; height: 1.4rem; }
.badge-center { margin-inline: auto; }

/* ── Ablauf (nummerierte Folge) ──────────────────────────────────────────
   Kompakt und als Folge lesbar — kein Kasten pro Schritt. Waagerecht auf
   breiten Schirmen, mit Verbindungslinie zwischen den Nummern; auf schmalen
   ein senkrechter Zeitstrahl. */
.ablauf { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem 1rem; }
@media (min-width: 46rem) {
  .ablauf { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.25rem; }
}
.ablauf-step { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: start; position: relative; }
@media (min-width: 46rem) {
  .ablauf-step { grid-template-columns: 1fr; gap: .5rem; }
}
.ablauf-num {
  grid-row: span 2; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
  position: relative; z-index: 1;
}
@media (min-width: 46rem) { .ablauf-num { grid-row: auto; } }
.ablauf-num svg { width: 1.15rem; height: 1.15rem; }
/* Verbindungslinie: waagerecht auf Desktop, senkrecht auf Mobil */
.ablauf-step:not(:last-child) .ablauf-num::after {
  content: ""; position: absolute; background: var(--line); z-index: 0;
  left: 50%; top: 2.1rem; width: 2px; height: calc(100% + 1.5rem); transform: translateX(-50%);
}
@media (min-width: 46rem) {
  .ablauf-step:not(:last-child) .ablauf-num::after {
    left: 2.1rem; top: 50%; height: 2px; width: calc(100% + 1.25rem - 2.1rem); transform: translateY(-50%);
  }
}
.ablauf-body { display: grid; gap: .2rem; }
.ablauf-title { font-weight: 600; font-size: 1rem; color: var(--ink-nav); }
.ablauf-text { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* ── Aufzählungen (gleichwertige Punkte) ─────────────────────────────────
   Eine Liste, keine Kacheln.

   Vorher waren das Karten mit Rahmen und weißer Fläche. Eine Karte sieht aus
   wie ein Ziel — Besucher haben versucht, „Yoga & Bewegung" anzuklicken, und
   nichts passierte. Eine Aufzählung verspricht das nicht.

   Die Punkte nehmen die vier Nebenfarben der CI in der Reihenfolge des Logos
   auf. Sie sind reine Zeichensetzung: aria-hidden über `content: ""`, also für
   Screenreader unsichtbar, weil das <li> die Aufzählung schon trägt. */
.vorteile {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .55rem 2.5rem;
}
.vorteil {
  /* Feste Spalte für den Punkt (1rem), nicht `auto`: Die Punkte sind absichtlich
     unterschiedlich groß, und mit `auto` war die Spalte jeweils so breit wie der
     Punkt — die Texte begannen dadurch versetzt. So fluchten alle Texte. */
  display: grid; grid-template-columns: 1rem 1fr; gap: .75rem; align-items: baseline;
  padding: 0; border: 0; background: none;
}

/* Der Punkt. Nur wenn kein Icon gesetzt ist — sonst gäbe es beides
   nebeneinander, und die Zeile hätte zwei Anfänge. */
.vorteil:not(:has(.vorteil-icon))::before {
  content: "";
  justify-self: center;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--tuerkis);
  transform: translateY(.1em);   /* auf die Grundlinie der Zeile ziehen */
}

/* Fünf Farben in einem FÜNFER-Takt, nicht vier in einem Vierer-Takt.
   Bei vier Farben und zwei Spalten bekam jede Spalte immer dieselben zwei —
   das Raster wurde sichtbar und wirkte aufgereiht. Fünf ist ungerade, also
   verschiebt sich die Farbe von Zeile zu Zeile und das Muster verschwindet.

   Gelb ist bewusst nicht dabei: Auf dem sandfarbenen Band (#F3EBC4) wäre ein
   gelber Punkt praktisch unsichtbar. Es bleibt die Handlungsfarbe der Knöpfe. */
.vorteil:not(:has(.vorteil-icon)):nth-child(5n+2)::before { background: var(--sand); }
.vorteil:not(:has(.vorteil-icon)):nth-child(5n+3)::before { background: var(--jade); }
.vorteil:not(:has(.vorteil-icon)):nth-child(5n+4)::before { background: var(--koralle); }
.vorteil:not(:has(.vorteil-icon)):nth-child(5n+5)::before { background: var(--gruen); }

/* Leicht unterschiedliche Größen — im Logo sind die Punkte auch nicht alle
   gleich groß. Ohne das wirkt die Reihe wie eine Aufzählung aus dem
   Textverarbeitungsprogramm. */
.vorteil:nth-child(3n+2)::before { width: .7rem; height: .7rem; }
.vorteil:nth-child(4n+3)::before { width: .95rem; height: .95rem; }

.vorteil-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--accent-tint); color: var(--accent); flex: none; }
.vorteil-icon svg { width: 1.2rem; height: 1.2rem; }
.vorteil-body { display: grid; gap: .15rem; }
.vorteil-title { font-weight: 500; font-size: 1rem; }
.vorteil-text { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* Spaltenzahl ergibt sich aus dem Platz, nicht aus festen Stufen.

   Vorher: eine Spalte, ab 44rem zwei — und die zwei teilten sich die VOLLE
   Seitenbreite. Auf einem breiten Schirm lagen damit rund 900 Pixel zwischen
   linker und rechter Spalte, auf einem schmalen sah es richtig aus.

   Jetzt: jede Spalte mindestens 16rem breit, so viele wie hineinpassen
   (breiter Schirm vier, Laptop drei, Tablet zwei, Telefon eine). Der Abstand
   zwischen den Punkten bleibt dadurch auf jeder Breite ungefähr gleich.

   Die Rasterklassen am <ul> (.grid-2 bis .grid-5) kommen aus dem GEO-Kit und
   werden hier bewusst überschrieben. */
.vorteile.grid, .vorteile.grid-2, .vorteile.grid-3,
.vorteile.grid-4, .vorteile.grid-5 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  column-gap: 2rem;
}

/* Punkte mit Zusatztext (etwa Name und Rolle) brauchen mehr Luft zwischen
   den Zeilen als reine Schlagworte. */
.vorteil:has(.vorteil-text) { align-items: start; }

/* Luft nach der Liste. Die Liste hat unten keinen Rand, und der folgende
   Absatz auch nicht — auf Mitmachen klebte der Beitragssatz dadurch direkt
   am letzten Punkt und las sich wie dessen Fortsetzung. */
.vorteile + * { margin-top: 2.25rem; }

/* ── Angebote ────────────────────────────────────────────────────────────── */
.offering { display: flex; flex-direction: column; }
.offering-img { width: 3.4rem; height: 3.4rem; object-fit: contain; margin-bottom: 1rem; }
/* Foto oben über die ganze Kachel, wie bei den Terminkarten.
   Randlos per negativem Rand statt eines zweiten Wrappers: Die Kachel behält
   ihr Innenmaß, nur das Bild greift nach außen. Beschnitten (cover), weil
   Hoch- und Querformate sonst ein ausfransendes Raster ergeben. Für Grafiken
   mit Text ist diese Kachel nicht gedacht — die gehören in einen Bildbaustein. */
.offering.has-bild { overflow: hidden; }

/* Medienbeiträge (Baustein „medien"): dieselbe Kachel, darüber Sender und
   Datum als kleine Marke — wie die Datumsmarke der Termine die erste Zeile,
   weil man bei Presse zuerst wissen will, wer und wann. */
.medien { margin-top: 1.5rem; }
.medien-quelle {
  margin: 0 0 .4rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--accent-strong);
}
.offering-bild {
  display: block; width: calc(100% + 2.8rem); height: 12rem;
  margin: -1.6rem -1.4rem 1.25rem; max-width: none;
  object-fit: cover; background: var(--band);
}
/* Benanntes Icon in der Karte (aus 'plain'-steps) — getönte Scheibe wie .badge */
.offering-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong); margin-bottom: 1rem; }
.offering-icon svg { width: 1.4rem; height: 1.4rem; }
.offering-name { font-size: 1.2rem; margin: 0 0 .2rem; }
.offering-sub { font-size: .87rem; color: var(--muted); margin: 0 0 1rem; }
.offering-desc { font-size: .95rem; margin: 0 0 1rem; }
.offering-features { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .9rem; }
.offering-features li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .45rem; color: var(--muted); }
.offering-features svg { width: 1.05em; height: 1.05em; color: var(--accent-strong); flex: none; margin-top: .2em; }
.offering-foot { margin: auto 0 0; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.offering-price { font-weight: 700; color: var(--accent-strong); }

/* Ganze Karte klickbar, ohne die Angebots-Optik (Fußlink) aufzugeben.
   Der Fußlink wird über die gesamte Karte gespannt; die Tastaturmarke
   liegt dann auf der Karte, nicht nur auf dem kleinen Linktext. */
.offering.is-linked { position: relative; }
.offering.is-linked .offering-foot a::after { content: ''; position: absolute; inset: 0; }
.offering.is-linked:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.offering.is-linked .offering-foot a:focus-visible { outline: none; }

/* ── Zeitachse ───────────────────────────────────────────────────────────── */
.milestones { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.milestone { flex: 1 1 8rem; text-align: center; padding: 1.25rem .75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--line); }
.milestone.is-current { border-top-color: var(--muted); }
.milestone:last-child { border-top-color: var(--koralle); background: var(--koralle-tint); }
.milestone-year { display: block; font-weight: 700; font-size: 1.35rem; color: var(--ink-nav); }
.milestone-label { display: block; font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.milestone:last-child .milestone-label { color: var(--ink); font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--line); padding: 1.4rem 0; max-width: var(--text); }
.faq-q { font-size: 1.08rem; margin: 0 0 .6rem; }
.faq-a { color: var(--muted); }
.faq-a p:last-child { margin: 0; }

/* ── Belegte Zahl ────────────────────────────────────────────────────────── */
.fact { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--accent-tint); max-width: var(--text); }
.fact-value { font-size: 1.9rem; font-weight: 700; color: var(--accent-strong); line-height: 1.1; }
.fact-statement { display: block; margin-top: .3rem; }
.fact-meta { font-size: .82rem; color: var(--muted); display: block; margin-top: .5rem; }

.service { border-top: 1px solid var(--line); padding: 1.4rem 0; max-width: var(--text); }
.service-name { margin: 0 0 .4rem; }
.service-meta { font-size: .87rem; color: var(--muted); display: flex; gap: 1.25rem; margin: 0; }

/* ── Handlungsaufruf ─────────────────────────────────────────────────────── */
.cta { background: var(--accent-fill); color: #fff; border-radius: var(--radius); padding: 3rem 2rem; text-align: center; }
.cta-headline { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .75rem; color: #fff; }
.cta-text { margin: 0 auto 1.75rem; max-width: 34rem; opacity: .92; }

/* ── Bereichs-/Leistungskarten ───────────────────────────────────────────── */
.card-title { font-size: 1.2rem; margin: 0 0 .5rem; }
.card-text { color: var(--muted); font-size: .94rem; margin: 0; }
.card-price { font-weight: 700; color: var(--accent-strong); margin: .75rem 0 0; }

/* ── Formulare ───────────────────────────────────────────────────────────
   Gestaltet die Ausgabe von DreamForm. Das Plugin liefert bewusst nacktes,
   zugaengliches Markup: <label><span>Feld</span><em>*</em></label> plus
   Eingabe, Fehlermeldungen in [data-error]. Deshalb wird hier ueber
   Struktur gestylt, nicht ueber Klassen — die gibt es nicht.

   Gilt fuer BEIDE Einbauorte: die Kontaktseite und den Formular-Block, der
   sich in jede Seite setzen laesst. Vorher hing alles an .kontakt-formular,
   und das Antragsformular auf „Mitmachen" stand deshalb in der Rohdarstellung
   des Browsers. */
.zk-form form { max-width: var(--text); }

/* Der Formular-Block bekommt eine eigene Flaeche: Ein langes Formular mitten
   im Text braucht eine Kante, sonst franst die Seite aus. */
.formular-block {
  background: var(--card); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
  max-width: 46rem;
}
.formular-block > h3 { font-size: 1.35rem; margin: 0 0 .6rem; color: var(--accent-strong); }
.formular-einleitung { color: var(--muted); margin: 0 0 1.5rem; max-width: var(--text); }
.formular-block form { max-width: none; }

/* Aufklappbares Formular (Schalter „aufklappen" am Baustein).

   Der Knopf ist ein <summary>, kein <button> — so klappt es ohne JavaScript
   und ist per Tastatur bedienbar. Das Dreieck des Browsers wird ausgeblendet,
   der Knopf sieht aus wie jeder andere. Offen wird er zurückhaltend, damit
   nicht zwei gelbe Knöpfe (Öffnen und Absenden) um die Aufmerksamkeit
   konkurrieren. */
.formular-aufklapp > summary { list-style: none; cursor: pointer; display: inline-flex; }
.formular-aufklapp > summary::-webkit-details-marker { display: none; }
.formular-aufklapp .formular-zu { display: none; }
.formular-aufklapp[open] .formular-auf { display: none; }
.formular-aufklapp[open] .formular-zu { display: inline; }
.formular-aufklapp[open] > summary {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1.5px var(--line);
  margin-bottom: .5rem;
}

.zk-form label {
  display: block; margin: 1.25rem 0 .35rem;
  font-size: .9rem; font-weight: 600;
}
.zk-form label em { font-style: normal; color: var(--koralle); margin-left: .15rem; }
.zk-form input[type="text"],
.zk-form input[type="email"],
.zk-form input[type="tel"],
.zk-form input[type="number"],
.zk-form input[type="date"],
.zk-form select,
.zk-form textarea {
  width: 100%; padding: .7rem .85rem;
  border: 1.5px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--bg); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.zk-form textarea { min-height: 7rem; resize: vertical; }
.zk-form :is(input, select, textarea):focus {
  border-color: var(--accent-strong); outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Auswahlfelder bekommen einen eigenen Pfeil — das Systemdefault ist der
   groesste Einzelposten am „nach Formular von 2004" aussehenden Eindruck. */
.zk-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c5c54' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: .7rem;
  padding-right: 2.4rem;
}

/* Zweispaltig, sobald Platz da ist: Ein Antragsformular mit vierzehn Feldern
   untereinander wirkt laenger als es ist. Kurze, zusammengehoerige Angaben
   stehen nebeneinander — das Formularfeld selbst weiss davon nichts, die
   Aufteilung passiert allein hier ueber die Reihenfolge der Felder. */
@media (min-width: 44rem) {
  .formular-block form > div > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
  }
  /* Felder, die die volle Breite brauchen */
  .formular-block form > div > div:first-child > div:has(textarea),
  .formular-block form > div > div:first-child > div:has(input[type="checkbox"]),
  .formular-block form > div > div:first-child > div:has(button) {
    grid-column: 1 / -1;
  }
}

/* Kontrollkaestchen.

   ACHTUNG beim Aendern: DreamForm setzt Kaestchen und Beschriftung als
   GESCHWISTER in ein <div> — nicht das <label> um den <input>. Ein
   `label:has(input)` greift deshalb nie, und der Text landet unter dem
   Kaestchen statt daneben. Angesprochen wird die Zeile ueber den Wrapper. */
.zk-form input[type="checkbox"],
.zk-form input[type="radio"] {
  accent-color: var(--accent-strong); margin: .1rem .7rem 0 0; flex: none;
  width: 1.1rem; height: 1.1rem; cursor: pointer;
}
.zk-form div:has(> input[type="checkbox"]),
.zk-form div:has(> input[type="radio"]) {
  display: flex; align-items: flex-start;
  margin: .4rem 0 0;
  padding: .8rem .95rem; border-radius: 8px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  transition: background-color .15s, border-color .15s;
}
.zk-form div:has(> input[type="checkbox"]) > label,
.zk-form div:has(> input[type="radio"]) > label {
  display: inline; margin: 0;
  font-weight: 400; font-size: .92rem; line-height: 1.5; color: var(--muted);
  cursor: pointer;
}
.zk-form div:has(> input[type="checkbox"]):hover,
.zk-form div:has(> input[type="radio"]):hover { border-color: var(--accent-strong); }
.zk-form div:has(> input:checked) {
  border-color: var(--accent-strong); background: var(--accent-tint);
}
.zk-form div:has(> input:checked) > label { color: var(--ink); }

/* Die Ueberschrift einer Kaestchengruppe (z. B. „Datenschutz") ist eine
   Feldbeschriftung und soll nicht wie eine Option aussehen. */
.zk-form fieldset { border: 0; padding: 0; margin: 0; }
.zk-form legend { font-size: .9rem; font-weight: 600; padding: 0; margin: 1.25rem 0 0; }

.zk-form button[type="submit"] {
  margin-top: 1.75rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.8rem; border: 0; border-radius: var(--radius-btn);
  background: var(--gelb); color: var(--auf-gelb);
  font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: background-color .18s, transform .18s, box-shadow .18s;
}
.zk-form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--gelb) 88%, #000);
  transform: translateY(-1px); box-shadow: var(--shadow);
}

/* Fehler: leere [data-error]-Behaelter duerfen keinen Platz einnehmen,
   sonst reisst das Formular ohne Grund auseinander. */
.zk-form [data-error]:empty { display: none; }
.zk-form [data-error] {
  display: block; margin-top: .35rem;
  font-size: .85rem; color: var(--signal-text);
}
.zk-form [role="alert"][data-error]:not(:empty) {
  padding: .8rem 1rem; border-radius: 8px;
  background: var(--koralle-tint); border-left: 3px solid var(--koralle);
  margin-bottom: 1.5rem;
}

/* Danke-Meldung nach dem Absenden */
.zk-form .df-success, .zk-form [data-success] {
  padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--accent-tint); border-left: 3px solid var(--accent-strong);
}

/* ── Fußbereich ──────────────────────────────────────────────────────────
   Petrolfläche mit heller Schrift, wie im Entwurf. Feste Farben statt
   Token: Der Fuß sieht in beiden Fassungen gleich aus — er ist der
   Abschluss der Seite, nicht Teil der wechselnden Fläche. */
.site-footer {
  margin-top: 4rem; padding: 3.5rem 0 2rem;
  background: var(--petrol); color: var(--auf-petrol); font-size: .9rem;
}
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
@media (max-width: 52rem) { .site-footer .wrap { grid-template-columns: 1fr; gap: 2rem; } }
.nap p { margin: 0 0 .25rem; }
.nap-name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.site-footer a { color: #FBF8EA; }
.site-footer a:hover { color: var(--gelb); }
.fuss-titel {
  font-weight: 700; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
  margin: 0 0 .9rem; opacity: .85;
}
.fuss-spalte ul, .legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.legal { align-self: end; }
.legal a { text-decoration: underline; }

/* ── Rechtstexte ─────────────────────────────────────────────────────────
   Lange Fließtexte mit vielen Zwischenüberschriften. Enge Zeilenlänge und
   klare Absatzabstände, sonst wird das unlesbar. */
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 2rem; color: var(--ink-nav); }
.legal h2 { font-size: 1.45rem; margin: 2.75rem 0 .9rem; }
.legal h3 { font-size: 1.08rem; margin: 2rem 0 .6rem; }
.legal h4 { font-size: .98rem; margin: 1.5rem 0 .4rem; color: var(--muted); }
.legal p, .legal li { font-size: .97rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal a { word-break: break-word; }
.legal-updated { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* ── FAQ aufklappbar ─────────────────────────────────────────────────────
   <details> statt offener Absätze: halbiert die Seitenlänge, und der Text
   bleibt im DOM — Crawler lesen ihn mit. */
.faq-item { border: 0; border-top: 1px solid var(--line); padding: 0; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative; font-family: inherit; font-size: 1.02rem; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: .6rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.45rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.faq-item summary:hover { color: var(--accent-strong); }
.faq-item .faq-a { padding: 0 2.5rem 1.3rem 0; color: var(--muted); }
.faq-item .faq-a p:last-child { margin: 0; }

/* ── Bänder etwas dichter ────────────────────────────────────────────── */
.band { padding: 3rem 0; }
.band-title { margin-bottom: 1.5rem; }

/* ── Formulare: Optionen als anklickbare Flächen ─────────────────────────
   Voreingestellte Radios und Checkboxen sind winzig und schwer zu treffen.
   Die ganze Zeile ist die Schaltfläche. */
.jopts { display: grid; gap: .5rem; margin: 1.2rem 0 0; }
.jopts label {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0;
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card); cursor: pointer; font-weight: 400; font-size: .97rem;
  transition: border-color .15s, background-color .15s;
}
.jopts label:hover { border-color: var(--accent-strong); }
.jopts input { margin: .2rem 0 0; accent-color: var(--accent-strong); flex: none; }
.jopts label:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-tint); }
@media (min-width: 40rem) { .jopts-multi { grid-template-columns: 1fr 1fr; } }


/* ── Termine ─────────────────────────────────────────────────────────────
   Karte mit Bild oben, Datumsmarke darunter. Die Marke traegt die
   Akzentfarbe des Termins und ist bewusst die erste Zeile: Wer eine
   Terminliste ueberfliegt, sucht das Datum, nicht den Titel. */
.termin {
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.termin-bild { width: 100%; height: 12rem; display: block; background: var(--band); }

/* Zwei Darstellungen, gesteuert über das Feld „Darstellung des Bildes".
   Der Fachbegriff dahinter ist object-fit:

   fuellend      = object-fit: cover   — das Bild füllt die Fläche und wird
                                         dabei beschnitten. Für Fotos.
   vollstaendig  = object-fit: contain — das Bild bleibt vollständig sichtbar.
                                         Für Grafiken, Flyer und Logos, bei
                                         denen Beschneiden Text abschneidet.

   Bei „vollstaendig" bestimmt das Bild seine Höhe SELBST (height: auto).
   Vorher stand dort eine feste Höhe von 12rem, und ein breites Banner wie der
   Krauttag-Flyer (1414 x 500) saß als schmaler Streifen in einer hohen
   getönten Fläche — es sah gedrückt aus. Jetzt läuft es über die volle Breite
   der Karte, nur eben niedriger als ein hochformatiges Foto daneben. */
.termin-bild-fuellend { object-fit: cover; }
.termin-bild-vollstaendig {
  object-fit: contain;
  height: auto; max-height: 12rem;
  background: none;
}
.termin-text { padding: 1.25rem 1.5rem 1.75rem; display: flex; flex-direction: column; }
.termin-marke {
  align-self: flex-start; margin: 0 0 .75rem;
  background: var(--accent); color: var(--auf-gelb);
  font-weight: 700; font-size: .82rem;
  letter-spacing: .03em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 3px;
}
.termin-marke.gross { font-size: .85rem; padding: .35rem .8rem; margin-bottom: 1.25rem; }
.termin-titel { font-size: 1.15rem; line-height: 1.35; margin: 0 0 .5rem; }
.termin-titel a { color: var(--ink); text-decoration: none; }
.termin-titel a:hover { color: var(--accent-strong); }
.termin-zeit { font-size: .88rem; color: var(--muted); margin: 0 0 .6rem; }
.termin-text-kurz { font-size: .95rem; color: var(--muted); line-height: 1.55; margin: 0; }

.termin-kopf { max-width: var(--text); }
.termin-daten { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0 0; }
.termin-daten div { margin: 0; }
.termin-daten dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .2rem; }
.termin-daten dd { margin: 0; font-weight: 600; }
.termin-figur { margin: 2.5rem 0; }
.termin-figur img { width: 100%; border-radius: var(--radius); display: block; }
.termin-figur figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; }

/* Archiv: eine Zeile je Termin, Datum in fester Spalte, damit die Titel
   untereinander fluchten. */
.termin-archiv { list-style: none; margin: 0; padding: 0; max-width: var(--text); }
.termin-archiv li {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.termin-archiv time { color: var(--muted); font-size: .9rem; }
@media (max-width: 32rem) { .termin-archiv li { grid-template-columns: 1fr; gap: .2rem; } }

.mehr { margin: 2rem 0 0; font-weight: 600; }
.leer { max-width: var(--text); color: var(--muted); }

/* ── Kontakt ─────────────────────────────────────────────────────────── */
.kontakt-raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3.5rem; align-items: start; }
@media (max-width: 60rem) { .kontakt-raster { grid-template-columns: 1fr; gap: 2.5rem; } }
.kontakt-adresse h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.kontakt-adresse address { font-style: normal; line-height: 1.7; margin: 0 0 1rem; }

/* ── Galerie & Einzelbild ────────────────────────────────────────────── */
.galerie { margin: 2rem 0; }
.galerie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.galerie-2 ul { grid-template-columns: repeat(2, 1fr); }
.galerie-3 ul { grid-template-columns: repeat(3, 1fr); }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; }
.galerie figcaption, .bild figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
@media (max-width: 62rem) { .galerie ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .galerie ul { grid-template-columns: 1fr; } }

.bild { margin: 2rem 0; }
.bild img { width: 100%; border-radius: var(--radius); display: block; }

/* ── Kooperationspartner ─────────────────────────────────────────────
   Logos auf gleiche HOEHE, nicht gleiche Breite: Fremdlogos haben sehr
   verschiedene Seitenverhaeltnisse, gleiche Breite laesst ein breites
   Logo winzig und ein hohes riesig wirken. */
.partner-titel { font-size: 1.1rem; margin: 0 0 1.25rem; }
.partner-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem;
}
.partner-liste li {
  background: var(--card); border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center; box-shadow: var(--shadow);
}
.partner-liste a { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.partner-liste img { height: 3.5rem; width: auto; object-fit: contain; }
.partner-liste span { font-size: .85rem; line-height: 1.4; color: var(--muted); }

/* ── Dokumente zum Herunterladen ─────────────────────────────────────────
   Eine ruhige Liste, keine Kacheln: Wer eine Satzung sucht, will sie finden,
   nicht entdecken. Typ und Größe stehen rechts, damit man vor dem Antippen
   weiß, was kommt. */
.dokumente { margin: 2rem 0 0; max-width: var(--text); }
.dokumente-titel { font-family: var(--font-text); font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
.dokumente-text { color: var(--muted); margin: 0 0 .8rem; }
.dokumente-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dokumente-liste li { border-bottom: 1px solid var(--line); }
.dokumente-liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .75rem .25rem; text-decoration: none; color: var(--ink);
}
.dokumente-liste a::before {
  content: "↓"; color: var(--accent-strong); font-weight: 700; margin-right: .15rem;
}
.dokument-name { flex: 1; font-weight: 600; }
.dokumente-liste a:hover .dokument-name { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.dokument-info { font-size: .85rem; color: var(--muted); white-space: nowrap; }