/* =====================================================================
   SGK Thüringen — Grundgerüst (Stufe 1, Staging)
   Reines statisches CSS, keine externen Requests. Schriften lokal.
   Farben/Anmutung aus unterlagen/analyse-wortmarke.md.
   ===================================================================== */

/* ---- Schriften: lokal eingebunden (Source Sans 3, Libre Franklin) ---- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/libre-franklin-700.woff2") format("woff2");
}

/* ---- Design-Tokens ---- */
:root {
  --rot: #E20A16;        /* Bundes-SGK-Rot; Akzent, siehe CLAUDE.md */
  --blau: #1E3F92;       /* Bundes-SGK-Blau; Überschriften, Links */
  --blau-hell: #65659A;  /* sekundär */
  --ink: #1C1C1C;        /* Fließtext */
  --grau: #595959;       /* Sekundärtext */
  --weiss: #FFFFFF;
  --off-white: #F4F4F6;
  --linie: #D9D9DE;

  --font-text: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-titel: "Libre Franklin", var(--font-text);

  --maxw: 68rem;
  --pad: clamp(1rem, 4vw, 2rem);
}

/* ---- Reset/Basis ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--weiss);
}
img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-titel); font-weight: 700; color: var(--blau); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
/* H3: deutlich kleiner als H2, klar als Unterabschnitt; etwas Luft nach oben */
h3 { font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin-top: 1.75rem; }
p { margin: 0 0 1em; max-width: 64ch; }

/* Inhaltsliste (z. B. „Was wir tun") — semantische ul, auf Mobil luftiger */
.textliste { max-width: 64ch; padding-left: 1.25rem; line-height: 1.55; }
.textliste li { margin-bottom: .55rem; }
@media (max-width: 48rem) { .textliste li { margin-bottom: 1rem; } }

/* Deutlich abgesetzter Handlungsaufruf */
.cta-block { margin-top: 1.75rem; }

/* Verweisblock (mehrere weiterführende Links, deutlich abgesetzt) */
.verweisblock { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }

/* Aktuelles: Nachrichtenliste (aus data/aktuelles.json) */
.aktuelles-liste { margin-top: 1.5rem; }
.beitrag { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--linie); }
.beitrag:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.beitrag h2, .beitrag h3 { margin-top: 0; margin-bottom: .15rem; }
.beitrag-datum { color: var(--grau); font-size: .95rem; margin: 0 0 .6rem; }
/* Wann/Wo — dieselben Felder (wannAnzeige/ort) wie im Termin-Banner
   (.termin-banner__wannwo), aber bewusst dezent statt der fetten
   Weiß-auf-Blau-Bannerkontrast: hier normaler Seitenhintergrund, daher
   var(--blau) (wie Überschriften/Links) statt var(--grau), etwas
   Gewicht per font-weight, aber kein Fließtext-Volumen wie der Titel.
   In der Startseiten-Teaser-Kürze (#startseite-aktuelles) kompakter,
   passend zur dortigen h3-Verkleinerung (siehe Kommentar weiter unten). */
.beitrag-wannwo { color: var(--blau); font-weight: 600; font-size: .95rem; margin: 0 0 .6rem; }
.beitrag-quelle { margin-top: .6rem; }

/* Dokument-Download / PDF-Vorschau */
.dok-meta { color: var(--grau); font-size: .95rem; margin-top: -.5rem; }
.pdf-embed { margin-top: 1.5rem; border: 1px solid var(--linie); border-radius: .5rem; overflow: hidden; }
.pdf-embed object { display: block; width: 100%; height: 75vh; min-height: 28rem; }
.pdf-embed p { margin: 0; padding: 1.25rem; }
@media (max-width: 48rem) { .pdf-embed { display: none; } } /* mobil nur Download-Button */
a { color: var(--blau); text-underline-offset: .15em; }
a:hover { text-decoration: none; }

/* ---- Vorstands-Raster: Karten aus data/vorstand.json ---- */
.vorstand-grid {
  display: grid;
  grid-template-columns: 1fr;         /* mobil: einspaltig */
  gap: 1.5rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
}
@media (min-width: 40rem) { .vorstand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .vorstand-grid { grid-template-columns: repeat(3, 1fr); } }

.vorstand-card { margin: 0; }
.vorstand-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;   /* verhindert minimales Verzerren durch den linken Rand unten */
  border-radius: .5rem;
  border-top-left-radius: 0;    /* links soll der Farbbalken nicht mit abgerundet werden */
  border-bottom-left-radius: 0;
  border-left: 2px solid var(--rot);   /* CI-Akzent, durchgängig, kein Farbwechsel je Person */
  background: var(--blau);
}
.vorstand-card figcaption { margin-top: .6rem; }
.vorstand-name {
  display: block;
  font-family: var(--font-titel);
  font-weight: 700;
  color: var(--blau);
  line-height: 1.25;
}
.vorstand-funktion { display: block; color: var(--ink); }
.vorstand-ort { display: block; color: var(--grau); font-size: .95rem; }
.vorstand-text { display: block; color: var(--ink); margin-top: .35rem; }

/* ---- Startseite: Vorstands-Teaser (horizontal scrollbarer Streifen) ----
   Eine Quelle (data/vorstand.json) wie das Haupt-Grid auf /verein/vorstand/
   (.vorstand-grid/-card/-portrait/-name/-funktion/-ort oben), hier als
   kompakte Kachel-Reihe. CSS scroll-snap; automatischer Wechsel +
   Pause/Play-Knopf siehe js/vorstand.js (initTeaserRotation(), WCAG 2.2.2).
   min-height reserviert den Platz gegen CLS, da hier bewusst kein Skelett
   gerendert wird (horizontales Nachladen verschiebt nichts vertikal;
   min-height verhindert nur das kurze Zusammenklappen des leeren
   Containers vor dem Füllen). Reihenfolge in der Kachel (siehe
   teaserKachel() in js/vorstand.js): Funktion oben (jetzt mit fester
   min-height, siehe .vorstand-teaser-karte .vorstand-funktion unten —
   deshalb trägt die Funktion selbst nicht mehr zu Höhenunterschieden
   zwischen den Kacheln bei), Bild (fest 160×160px, ebenfalls unten),
   Name, Text (Hauptmandat, textKurz bevorzugt), Ort. Wert erneut im
   Browser nachgemessen (natürliche Kachelhöhe ohne min-height-Zwang,
   nach Einführung der festen Funktion-min-height und textKurz):
   Extremfall weiterhin ein Gleichstand zwischen Thomas Lenz (einzeilige
   Funktion "Beisitzer", aber zweizeiliger Text via textKurz "Vertreter
   Bundesvorstand") und Janine Merz (einzeilige Funktion via funktionKurz
   "Vertreterin LTF", aber zweizeiliger Text "SPD-Landtagsabgeordnete")
   bei je ≈331px Kachelhöhe + Bodenabstand (.5rem) — nahezu identisch zum
   vorherigen Extremfall, 21.5rem bleibt daher unverändert ausreichend
   (Puffer ≈5px, keine Kachel schneidet ab, siehe Messung). Bei Änderung
   von funktion/funktionKurz/text/textKurz in data/vorstand.json erneut im
   Browser nachmessen, nicht nur schätzen.
   Sichtbare Kachelanzahl responsive über max-width statt fester JS-
   Zählung: ~4 Kacheln als Grundeinstellung (10rem×4 + 1rem-Gap×3 = 43rem),
   ~5 Kacheln ab 75rem Viewportbreite (10rem×5 + 1rem×4 = 54rem). Auf
   schmalen/mobilen Viewports greift die Begrenzung ohnehin nicht (der
   Container ist dort schon schmaler als 43rem) — entsprechend weniger
   Kacheln passen von selbst, ohne eigene Regel. */
.vorstand-teaser {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  min-height: 21.5rem;
  max-width: 43rem;
  margin: 1.5rem 0 1rem;
  padding: 0 0 .5rem;   /* etwas Luft unter den Bildern */
  scrollbar-width: none;      /* Firefox: native Scrollleiste ausblenden */
  -ms-overflow-style: none;   /* alte Edge-Versionen: native Scrollleiste ausblenden */
}
@media (min-width: 75rem) { .vorstand-teaser { max-width: 54rem; } }
/* Chrome/Safari (WebKit): scrollbar-width wirkt dort nicht, eigener Selektor nötig.
   Nur optisch — Scrollen per Wischen/Ziehen/Pfeiltasten bleibt unverändert möglich,
   overflow-x:auto oben ist unberührt. */
.vorstand-teaser::-webkit-scrollbar { display: none; }
.vorstand-teaser-karte {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  width: 10rem;
  text-decoration: none;
  color: var(--ink);
}
.vorstand-teaser-portrait {
  display: block;
  /* Feste Breite UND Höhe in px (nicht rem, nicht aspect-ratio): das Bild
     darf sich unter keinen Umständen stauchen oder strecken, auch nicht
     minimal — Ursache eines früheren Höhenfehlers war genau das Fehlen
     einer festen Höhe. flex:0 0 auto zusätzlich, weil .vorstand-teaser-
     karte selbst ein Flex-Container ist (column) und das <img> darin ein
     Flex-Item — ohne "flex:none" könnte ein Flex-Layout das Bild trotz
     width/height noch stauchen. */
  width: 160px; height: 160px;
  flex: 0 0 auto;
  border-radius: .5rem;
  border-top-left-radius: 0;    /* links soll der Farbbalken nicht mit abgerundet werden */
  border-bottom-left-radius: 0;
  border-left: 2px solid var(--rot);   /* CI-Akzent, durchgängig, kein Farbwechsel je Person */
  background: var(--blau);
  object-fit: cover;
}
.vorstand-teaser-name {
  display: block;
  margin-top: .5rem;
  text-align: center;
  font-size: .95rem; font-weight: 600; line-height: 1.25;
  color: var(--blau);
}
.vorstand-teaser-karte:hover .vorstand-teaser-name { text-decoration: underline; }
/* Funktion/Text/Ort: dieselben Klassen wie im Haupt-Grid (.vorstand-
   funktion/-text/-ort weiter oben), nur hier zentriert — die Teaser-
   Kachel ist eine schmale, mittig ausgerichtete Spalte (align-items:
   center oben), im Haupt-Grid dagegen linksbündiger Fließtext.
   Typografie/Farbe bleiben unverändert dieselben. Die Funktion steht im
   Teaser als einzige der drei VOR dem Bild (siehe teaserKachel() in
   js/vorstand.js) — deshalb der eigene Bodenabstand hier, den sie im
   Haupt-Grid (nach dem Namen) nicht braucht. */
.vorstand-teaser-karte .vorstand-funktion,
.vorstand-teaser-karte .vorstand-text,
.vorstand-teaser-karte .vorstand-ort { text-align: center; }
/* min-height reserviert immer den Platz für den zweizeiligen Fall (im
   Browser nachgemessen: 1.0625rem × 1.6 Zeilenhöhe × 2 Zeilen = 3.4rem),
   egal ob die aktuelle Funktion/funktionKurz nur eine Zeile braucht —
   das Bild darunter soll nicht je nach Person leicht auf/ab springen.
   display:flex + align-items:flex-end schiebt den Text an den UNTEREN
   Rand der reservierten Box (statt oben mit Leerraum darunter) — beim
   häufigeren einzeiligen Fall sitzt die Beschriftung dadurch spürbar
   näher am Foto, ohne die reservierte Höhe (und damit den CLS-Schutz)
   anzutasten. justify-content:center ersetzt hier das text-align:center
   von oben für die horizontale Zentrierung (Flex-Kontext). */
.vorstand-teaser-karte .vorstand-funktion {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 3.4rem; margin-bottom: .15rem;
  color: var(--grau);   /* dieselbe Variable wie .vorstand-ort oben — kein neuer Wert, weniger dominant als der Standard-Ink-Ton */
}

/* Steuerung unter dem Teaser: Zurück-/Pause-Play-/Weiter-Knopf in einer
   Reihe, von js/vorstand.js eingefügt (initTeaserRotation()). */
.vorstand-teaser-steuerung {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .5rem;
}
/* Pause/Play- und Vor-/Zurück-Knöpfe (WCAG 2.2.2). Mindestens 44×44 px
   Tastfläche wie die übrigen Bedienelemente im Header
   (.masthead__toggle). Die Pfeil-Knöpfe sind quadratisch, der Pause/
   Play-Knopf breiter wegen seines Textlabels. */
.vorstand-teaser-pause,
.vorstand-teaser-nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--linie); border-radius: .35rem;
  background: var(--weiss); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.vorstand-teaser-pause { padding: 0 1rem; }
.vorstand-teaser-nav { padding: 0; font-size: 1.25rem; line-height: 1; }
.vorstand-teaser-pause:hover, .vorstand-teaser-nav:hover { border-color: var(--blau-hell); color: var(--blau); }

/* Sanftes Scrollen nur, wenn keine reduzierte Bewegung gewünscht ist —
   erster Ort im Projekt mit dieser Media Query. Ohne sie (Standard:
   "reduce" oder System nicht abgefragt-fähig) bleibt es beim sofortigen
   Sprung ("auto"), das ist der CSS-Default und muss nicht extra gesetzt
   werden. */
@media (prefers-reduced-motion: no-preference) {
  .vorstand-teaser { scroll-behavior: smooth; }
}

/* ---- Kontaktseite: Anschrift + verschleierte E-Mail ---- */
.kontakt-adresse { font-style: normal; line-height: 1.55; margin: 0 0 .5rem; }
.kontakt-mail { margin: 0 0 1.25rem; }
.kontakt-telefon { margin: 0 0 1.25rem; }
.mail-hint { color: var(--grau); font-size: .95rem; }

/* Kontaktseite: „Du möchtest…“ als Kachel-Grid statt Liste. Vier gleich
   große, klickbare Kacheln — 2x2 ab ~30rem, mobil einspaltig. Reines CSS,
   kein JS, keine externen Requests. */
.kontakt-kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 0;
  max-width: 40rem;
  padding: 0;
}
@media (min-width: 30rem) { .kontakt-kacheln { grid-template-columns: repeat(2, 1fr); } }
.kontakt-kachel {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linie); border-radius: .5rem;
  background: var(--off-white); color: var(--blau);
  font-weight: 600; text-decoration: none;
}
.kontakt-kachel:hover { background: var(--weiss); border-color: var(--blau-hell); }

/* Mitglied kraft Amtes (§ 7 Abs. 1 Nr. 4) — leicht abgesetzte eigene Gruppe */
.vorstand-amt { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--linie); }
.vorstand-amt-titel { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: .25rem; }
.vorstand-amt-hinweis { color: var(--grau); font-size: .95rem; margin-top: 0; }
.vorstand-amt .vorstand-grid { margin-top: 1rem; }

/* Leitsatz / Pull-Quote — optischer Anker, bricht die Textmasse auf */
.leitsatz {
  margin: 2.25rem 0;
  padding: .4rem 0 .4rem 1.25rem;
  border-left: 5px solid var(--rot);
}
.leitsatz p {
  margin: 0;
  font-family: var(--font-titel);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--blau);
  max-width: 55ch;
}

/* Bild-Platzhalter (Layout vorgesehen, noch kein Bild eingebunden). Bleibt
   erhalten, auch wenn aktuell keine Seite mehr einen echten Platzhalter
   zeigt — für künftige Seiten mit noch fehlendem Foto weiter nutzbar. */
.bild-platzhalter { margin: 2rem 0; }
.bild-platzhalter__box {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; max-width: 32rem;
  border: 2px dashed var(--blau-hell); border-radius: .5rem;
  background: var(--off-white); color: var(--grau);
  font-weight: 600; text-align: center; padding: 1rem;
}
.bild-platzhalter figcaption { margin-top: .5rem; color: var(--grau); font-size: .95rem; max-width: 32rem; }

/* Echtes Content-Foto im Fließtext (z. B. /emil-boehme-preis/) — eigene
   Klasse statt .bild-platzhalter, weil dessen Name nach dem Einfügen
   eines echten Bildes nicht mehr zutrifft. max-width wie beim
   Platzhalter (32rem), aspect-ratio hier 4/3 (Originalseitenverhältnis
   des ersten eingefügten Fotos, 1109×832px, bewusst nicht auf 3/2
   zugeschnitten). figcaption-Stil 1:1 vom Platzhalter übernommen
   (gleiche Farbe/Größe), nur die Elternklasse ist eine andere. */
.content-bild { margin: 2rem 0; max-width: 32rem; }
.content-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; }
.content-bild figcaption { margin-top: .5rem; color: var(--grau); font-size: .95rem; max-width: 32rem; }

/* Content-Foto mit 3/2 statt 4/3 (z. B. /jet-foerderpreis/) — sonst identisch
   zu .content-bild oben, nur die Bildkante anders (Originalzuschnitt der
   Fotos). Erster Versuch war eine seitlich umfließende (float) Variante;
   die wurde wieder verworfen, weil nebenstehender Fließtext dadurch pro
   Abschnitt unterschiedlich breite Zeilen bekam und der Textblock beim
   Lesen "sprang", sobald der Float endete (z. B. eine Liste, die neben dem
   Bild schmal beginnt und dann plötzlich auf volle Breite springt). Jetzt
   wie .content-bild ein normaler Block ohne Float — ruhiger Lesefluss,
   volle Zeilenbreite durchgehend, aspect-ratio 3/2 = derselbe Wert wie
   .bild-platzhalter oben (keine neue Ratio eingeführt). */
.content-bild--seite { margin: 2rem 0; max-width: 32rem; }
.content-bild--seite img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
.content-bild--seite figcaption { margin-top: .5rem; color: var(--grau); font-size: .95rem; }

/* ---- JET-Düsenjet-Emblem (nur /jet-foerderpreis/) ----
   Bewusste, markierte CI-Ausnahme nur für diese eine Seite — siehe
   Kommentar in jet-foerderpreis/index.html. Transparentes PNG, deshalb kein
   eigener Hintergrund/Rahmen nötig (anders als .content-bild-Fotos). */
.jet-banner { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 0 1.5rem; }
.jet-icon-inline { display: inline-block; height: 1.3em; width: auto; vertical-align: -.2em; margin-left: .4rem; }

/* Entwurf-/Warnhinweis — nicht übersehbar (roter Rahmen, Off-White) */
.entwurf-box {
  border: 2px solid var(--rot); border-left-width: 6px; border-radius: .5rem;
  background: var(--off-white); color: var(--ink);
  padding: 1rem 1.25rem; margin: 0 0 2rem; max-width: 64ch;
}
.entwurf-box p { margin: 0; }
.entwurf-box strong { color: var(--ink); }

/* Neutraler, deutlich abgesetzter Hinweiskasten */
.hinweisbox {
  border-left: 5px solid var(--blau-hell); background: var(--off-white);
  padding: 1rem 1.25rem; border-radius: 0 .5rem .5rem 0;
  margin: 1.75rem 0; max-width: 64ch;
}
.hinweisbox p { margin: 0; }

/* Sichtbarer TODO-Marker im Fließtext — bewusst auffällig, nicht kaschiert */
.todo {
  font-weight: 600; color: var(--ink);
  background: var(--off-white); border: 1px dashed var(--rot); border-radius: .25rem;
  padding: .02rem .4rem;
}

/* Inhaltsverzeichnis mit Sprungmarken */
.toc { max-width: 64ch; margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; background: var(--off-white); border-radius: .5rem; }
.toc h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.4rem; line-height: 1.7; }

/* Sichtbarer Fokus (WCAG) */
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
main { display: block; }
section { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Skip-Link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--blau); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Roter Akzentbalken ganz oben (Rot = Akzent) */
.markenbalken { height: 6px; background: var(--rot); }

/* ---- Platz-Reservierung gegen Layout-Shift (CLS) --------------------
   Kopf und Fuß werden per include.js NACH dem ersten Paint eingefügt; ohne
   Reservierung schöben sie den Inhalt nach unten (CLS). Hier wird der Platz
   vorab reserviert. Werte = gemessene, gerenderte Höhe je Bruchstelle
   (lokal, 01.08.2026, nach Umbau auf einklappbare Mobil-Navigation), bewusst
   leicht AUFGERUNDET: die Reservierung ist damit >= der echten Höhe, sodass
   beim Einfügen höchstens minimaler Leerraum bleibt, aber NIE ein Sprung
   entsteht. Maßgeblich ist stets der EINGEKLAPPTE Zustand (aria-expanded
   ="false"), weil das die Höhe beim ersten Rendern ist — das Aufklappen
   selbst ist eine Nutzerinteraktion nach dem Laden und zählt nicht als CLS.
   ACHTUNG bei Änderungen am Kopf (Navigationseinträge, Logohöhe, CTA/Menü-
   Knopf-Größe): Höhen neu messen und die drei Werte anpassen. Siehe
   OFFENE-PUNKTE J (CLS). */
[data-include="header"] { min-height: 144px; }                /* mobil, Menü eingeklappt (<= 48rem); gemessen 139px über die ganze Breite 320–768px */
@media (min-width: 48.0625rem) {                              /* Desktop, CTA "Mitglied werden" bricht auf eigene
                                                                   Zeile unter Logo+Nav bzw. Logo (769–~920px, je nach
                                                                   Breite auch Logo/Nav/CTA je eigene Zeile) */
  [data-include="header"] { min-height: 190px; }               /* gemessen bis zu 188px (schlechtester Fall 3 Zeilen) */
}
@media (min-width: 59rem) {                                   /* Desktop, ab hier passen Logo+Nav auf eine Zeile,
                                                                   CTA bleibt eigene Zeile darunter (ab 944px) */
  [data-include="header"] { min-height: 134px; }               /* gemessen 131px */
}
/* Der Fuß sitzt am Seitenende — sein Nachladen verschiebt nichts darunter und
   trägt daher NICHTS zum CLS bei. Die Reservierung dient nur dazu, ein kurzes
   Aufblitzen am Seitenfuß zu vermeiden. 174px = kleinste gerenderte Fußhöhe
   (2-spaltig ab 40rem); mobil wächst der Fuß nur nach unten (kein Sprung). */
[data-include="footer"] { min-height: 174px; }

/* ---- Skelett-Platzhalter für die aus JSON gerenderten Bereiche ------
   /verein/vorstand/ (#vorstand-grid) und /aktuelles/ (#aktuelles-liste) werden
   clientseitig aus JSON gefüllt. Statische Skelett-Elemente reservieren den Platz
   in der EXAKT gleichen Geometrie (Porträt = quadratisch, skaliert mit der Breite),
   damit das Füllen keinen Layout-Shift auslöst. vorstand.js/aktuelles.js ersetzen
   sie (grid/liste.innerHTML=""). Ohne JavaScript werden sie ausgeblendet (siehe
   <noscript>-Regel je Seite); dann greift der statische Fallback-Text.
   ANZAHL an die JSON-Länge koppeln: bei mehr/weniger Einträgen Skelette anpassen. */
.vorstand-skeleton, .beitrag-skeleton { opacity: .55; }
.vorstand-skeleton .vorstand-name,
.vorstand-skeleton .vorstand-funktion {
  background: var(--linie); color: transparent; border-radius: .2rem;
}
.vorstand-skeleton .vorstand-name { width: 55%; }
.vorstand-skeleton .vorstand-funktion { width: 80%; margin-top: .35rem; }
.beitrag-skeleton h2,
.beitrag-skeleton h3,
.beitrag-skeleton .beitrag-datum,
.beitrag-skeleton .beitrag-text,
.beitrag-skeleton .beitrag-quelle {
  background: var(--linie); color: transparent; border-radius: .2rem;
}
.beitrag-skeleton .beitrag-datum { width: 8rem; }
.beitrag-skeleton .beitrag-quelle { width: 16rem; }

/* Startseite: kompakter Anriss der drei neuesten Beiträge (dieselbe JSON-Quelle
   wie /aktuelles/, siehe js/aktuelles.js renderHome()). Reine Wiederverwendung
   der .aktuelles-liste/.beitrag-Regeln oben, nur mit h3 statt h2. */
#startseite-aktuelles .aktuelles-liste { margin-top: 1.25rem; }
/* Wann/Wo in dieser Kürze noch kompakter als auf /aktuelles/ — passend zur
   dortigen h3-Verkleinerung, kein eigener Klassenname nötig. */
#startseite-aktuelles .beitrag-wannwo { font-size: .85rem; }

/* ---- Header / Masthead ---- */
.masthead { border-bottom: 1px solid var(--linie); background: var(--weiss); }
/* justify-content:space-between statt margin-left:auto am Button (siehe unten):
   verteilt die Restbreite auf ALLE Zeilen-Lücken statt nur auf eine einzige vor
   dem Button — dadurch rückt z. B. bei Zeilenumbruch (Button auf eigener Zeile)
   die Navigation bis an den rechten Rand heran, statt mit viel Leerraum vor dem
   Zeilenumbruch stehen zu bleiben. */
.masthead__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: .9rem; }
.masthead__logo { order: 1; display: inline-flex; align-items: center; }
.masthead__logo img { height: 42px; width: auto; }

/* CTA "Mitglied werden": eigenes Element neben Logo/Nav (nicht Teil der <ul>),
   damit es auf Mobil auch im eingeklappten Zustand sichtbar bleibt. */
.masthead__cta {
  /* margin-left:auto bleibt nötig: der Button steht (wegen des Zeilenumbruchs,
     siehe .masthead__inner) meist allein auf seiner Zeile — bei nur einem
     Flex-Element setzt justify-content:space-between es an den ZEILENANFANG,
     nicht ans Ende. Das auto-Margin verbraucht den Freiraum vor dem Button
     unabhängig davon zuerst und hält ihn so zuverlässig rechtsbündig. */
  order: 3; margin-left: auto;
  display: inline-block; background: var(--blau); color: #fff; text-decoration: none;
  font-weight: 600; border-radius: .35rem; padding: .5rem 1rem; white-space: nowrap;
}
.masthead__cta:hover { background: #162F6E; }
.masthead__cta[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--rot); }

/* Menü-Knopf (Hamburger): nur auf Mobil sichtbar (Regel unten). */
.masthead__toggle { order: 4; display: none; }

/* Navigation */
.hauptnav { order: 2; }
.hauptnav > ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0; padding: 0; }
.hauptnav a { display: inline-block; padding: .35rem .1rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.hauptnav a:hover { color: var(--blau); }
.hauptnav a[aria-current="page"], .hauptnav a.is-active { color: var(--blau); font-weight: 600; border-bottom-color: var(--rot); }

/* Untermenü „Verein": Link + separater Pfeil-Knopf (Disclosure, per include.js). */
.hasmenu { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.hauptnav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; color: var(--ink); background: none;
  border: 0; border-bottom: 3px solid transparent;
  padding: .35rem .35rem; cursor: pointer;
}
.hauptnav__toggle:hover { color: var(--blau); }
.hauptnav__toggle .caret {
  width: .45rem; height: .45rem; margin-top: -.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.hauptnav__toggle[aria-expanded="true"] .caret { transform: rotate(-135deg); margin-top: .1em; }
.hauptnav__sub {
  display: none;   /* Standard: geschlossen. Sichtbarkeit steuert allein aria-expanded (Regel unten). */
  list-style: none; margin: 0; padding: .35rem 0;
  position: absolute; top: 100%; left: 0; min-width: 13rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: .4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 60;
}
/* Einzige Quelle der Wahrheit für die Sichtbarkeit: aria-expanded am Auslöser. */
.hauptnav__toggle[aria-expanded="true"] + .hauptnav__sub { display: block; }
.hauptnav__sub a { display: block; padding: .55rem .9rem; color: var(--ink); text-decoration: none; border-bottom: 0; }
.hauptnav__sub a:hover { background: var(--off-white); color: var(--blau); }
.hauptnav__sub a[aria-current="page"] { color: var(--blau); font-weight: 600; }

/* Schmale Viewports: Navigation einklappbar (no-JS-fähig als Vollseiten-Link-Leiste im
   <noscript>-Fallback der Partial-Einbindung, ab 320px nutzbar). Sichtbar bleiben immer
   Wortmarke, "Mitglied werden" und der Menü-Knopf; die Link-Liste (#hauptnav-panel)
   klappt erst nach Klick auf den Menü-Knopf auf. Einzige Quelle der Wahrheit für die
   Sichtbarkeit ist — wie beim Verein-Untermenü — aria-expanded am Menü-Knopf; das CSS
   darunter steuert allein darüber (kein hidden/inline-style/Klasse). */
@media (max-width: 48rem) {
  /* Reihe 1: Wortmarke + Menü-Knopf. Reihe 2: CTA "Mitglied werden" als voller,
     hervorgehobener Block darunter (Logo + CTA + Menü-Knopf passen bei 216px
     Logobreite nicht auf eine Zeile — zwei kompakte Zeilen statt gequetscht).
     Kleinerer Spaltenabstand als auf Desktop, sonst passen Logo (216px) und
     Menü-Knopf (44px) ab 320px nicht mehr nebeneinander in Zeile 1. */
  .masthead__inner { gap: .6rem; }
  .masthead__toggle {
    order: 2; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    background: none; border: 1px solid var(--linie); border-radius: .35rem;
    padding: 0; cursor: pointer; color: var(--ink);
  }
  .masthead__cta { order: 3; flex-basis: 100%; margin-left: 0; text-align: center; padding: .6rem 1rem; }
  .masthead__toggle:hover { color: var(--blau); border-color: var(--blau-hell); }
  .masthead__toggle-icon,
  .masthead__toggle-icon::before,
  .masthead__toggle-icon::after {
    content: ""; display: block; position: absolute;
    width: 20px; height: 2px; background: currentColor; border-radius: 1px;
    transition: transform .15s;
  }
  .masthead__toggle-icon { position: relative; }
  .masthead__toggle-icon::before { top: -6px; left: 0; }
  .masthead__toggle-icon::after { top: 6px; left: 0; }
  .masthead__toggle[aria-expanded="true"] .masthead__toggle-icon { background: transparent; }
  .masthead__toggle[aria-expanded="true"] .masthead__toggle-icon::before { top: 0; transform: rotate(45deg); }
  .masthead__toggle[aria-expanded="true"] .masthead__toggle-icon::after { top: 0; transform: rotate(-45deg); }

  /* Nav-Panel: standardmäßig eingeklappt (0 Höhe), erst bei aria-expanded="true" am
     Menü-Knopf sichtbar UND auf volle Breite gesetzt (eigene Zeile unter Logo/CTA/Knopf). */
  .hauptnav { order: 4; }
  .hauptnav > ul { display: none; flex-direction: column; gap: 0; }
  .masthead__toggle[aria-expanded="true"] ~ .hauptnav { flex-basis: 100%; }
  .masthead__toggle[aria-expanded="true"] ~ .hauptnav > ul { display: flex; }

  .hauptnav a { display: block; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
  .hauptnav a[aria-current="page"], .hauptnav a.is-active { border-bottom-color: var(--rot); border-bottom-width: 2px; }
  /* Link + Pfeil-Knopf in einer Zeile; Pfeil mind. 44x44 px Tap-Fläche */
  .hasmenu { align-items: stretch; }
  .hauptnav__link { flex: 1 1 auto; }
  .hauptnav__toggle { min-width: 44px; min-height: 44px; padding: 0 .6rem; border-bottom: 1px solid var(--linie); }
  /* Untermenü als voller Block unter Link+Pfeil */
  .hauptnav__sub { position: static; box-shadow: none; border: 0; border-radius: 0; min-width: 0; width: 100%; padding: .25rem 0 .25rem 1rem; }
}

/* ---- Hero (Startseite) ---- */
.hero { background: var(--off-white); }   /* kein border-bottom: der Farbwechsel zu Weiß
                                              trennt bereits ausreichend, passend zum
                                              Muster der uebrigen Abschnittsuebergaenge
                                              auf der Seite (keiner davon hat eine
                                              Trennlinie) */
/* Echte Text-Überschrift statt Wortmarken-Bild (siehe index.html) — die einzige
   Headline im Hero, deshalb deutlich größer als ein normaler Content-H1
   (dort clamp(1.7rem, 4vw, 2.5rem), siehe Basis-Regel oben). Font-Family/
   Farbe kommen zwar schon von der globalen h1-Regel, hier trotzdem explizit
   wiederholt, damit die Hero-Überschrift unabhängig davon feststeht.
   Größe kalibriert gegen die H2 "Der Vorstand" (per getComputedStyle
   nachgemessen, nicht nur behauptet): bei 1280px 43,5px vs. 30,4px = Faktor
   1,43 (Ziel 1,4–1,6×); bei 375/320px 25,6px vs. 21,6px = Faktor 1,19
   (Ziel: mindestens gleich groß, eher etwas größer). Bei Änderung der
   Basis-h2-Regel oder dieser Regel erneut so nachmessen, nicht nur den
   Zahlenwert anpassen und hoffen. */
.hero__title {
  margin: 0;
  font-family: var(--font-titel);
  font-weight: 700;
  color: var(--blau);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  max-width: 46rem;
}
/* .hero__logo: verwaist seit der Umstellung auf Text-Überschrift oben — keine
   Seite bindet die Wortmarke im Hero mehr ein. Nicht entfernt (siehe
   Bericht), falls sie andernorts noch gebraucht wird. */
.hero__logo { display: block; width: 100%; max-width: 30rem; height: auto; margin-bottom: 1.25rem; }
.hero p.lead { font-size: 1.2rem; color: var(--grau); }

/* CTA-Button */
.btn { display: inline-block; background: var(--blau); color: #fff; text-decoration: none; padding: .7rem 1.2rem; border-radius: .4rem; font-weight: 600; }
.btn:hover { background: #162F6E; }

/* ---- Termin-Banner (Startseite, nach dem Hero) ----
   data/aktuelles.json, gerendert von js/aktuelles.js (renderTerminBanner()).
   Flächenfarbe var(--blau) statt nur Button — optische Anlehnung an den
   "Mitglied werden"-Button (.btn oben), aber als ganzer Abschnittshintergrund.
   Keine neuen Farben, nur bestehende Tokens (--blau/--weiss/--off-white). */
.termin-banner { background: var(--blau); color: var(--weiss); }
.termin-banner h2.termin-banner__titel { color: var(--weiss); margin: 0 0 .35rem; }
.termin-banner__datum { color: var(--weiss); opacity: .85; font-size: .95rem; margin: 0 0 .35rem; }
/* Wann/Wo — Redaktionsregel: bei jeder Veranstaltungs-Ankündigung müssen Was/Wann/Wo
   auf den ersten Blick erkennbar sein, als eigenes Element, nicht im Fließtext
   versteckt. Deutlich größer/fetter als .termin-banner__text (1.0625rem/400,
   siehe Basis-Regel body), aber kleiner als .termin-banner__titel (h2,
   clamp(1.35rem, 3vw, 1.9rem)/700). rgba(255,255,255,.92) statt vollem Weiß —
   dezent abgesetzt vom Titel, Kontrast gegen --blau im Browser real gemessen
   (Composite-Farbe gegen den Bannerhintergrund, nicht nur die Alpha-Zahl):
   8,42:1 — weit über WCAG-AA für Fließtext (4,5:1), nicht nur für den
   Großtext-Schwellwert (3:1). */
.termin-banner__wannwo {
  display: block;
  margin: 0 0 .5rem;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .92);
}
.termin-banner__text { color: var(--weiss); max-width: 56ch; }
.termin-banner__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0 0; }
/* Normaler .btn (blau/weiß) verschwindet auf blauem Grund — invertierte Variante
   für Banner/dunkle Flächen, dieselben Tokens, nur vertauscht. */
.btn--invers { background: var(--weiss); color: var(--blau); }
.btn--invers:hover { background: var(--off-white); }
.termin-banner__mehr { color: var(--weiss); text-decoration: underline; text-underline-offset: .15em; }
.termin-banner__mehr:hover { text-decoration: none; }
/* Globaler Fokus-Rahmen (:focus-visible weiter unten) ist var(--blau) — auf dem
   blauen Bannerhintergrund kaum sichtbar. Hier auf Weiß umgestellt, sonst
   identische Regel, nur die Rahmenfarbe getauscht. */
.termin-banner a:focus-visible,
.termin-banner .btn--invers:focus-visible { outline-color: var(--weiss); }

/* Skelett-Platzhalter im Banner: dieselbe Technik wie .beitrag-skeleton weiter
   unten (Text unsichtbar, Balken in Formfarbe), nur an den dunklen Hintergrund
   angepasst (halbtransparentes Weiß statt --linie). */
.termin-skeleton { background: rgba(255, 255, 255, .25); color: transparent; border-radius: .25rem; }
.termin-banner__datum.termin-skeleton { width: 8rem; }
.termin-banner__titel.termin-skeleton { width: min(28rem, 80%); }
.termin-banner__wannwo.termin-skeleton { width: min(18rem, 70%); }
.termin-banner__text.termin-skeleton { width: min(32rem, 95%); }
.btn--invers.termin-skeleton { width: 10rem; }

/* ---- JET-Band (Startseite, unter dem Termin-Banner) ----
   data/jet.json, gerendert von js/aktuelles.js (renderJetBand()). Bewusst
   anders als der blaue Termin-Banner: helle Fläche (--off-white), roter
   Balken links (--rot nur als Akzent), dunkler Text (--ink/--blau). */
.jet-band { background: var(--off-white); border-left: 8px solid var(--rot); }
.jet-band .container { padding-block: 1.25rem; }
.jet-band h2.jet-band__titel { color: var(--blau); font-size: clamp(1.25rem, 3vw, 1.7rem); margin: 0 0 .5rem; }
.jet-band__wannwo { margin: 0 0 .25rem; font-family: var(--font-titel); font-weight: 700; font-size: 1.15rem; color: var(--ink); max-width: none; }
.jet-band__preise { margin: .5rem 0 0; font-size: .95rem; color: var(--grau); }
.jet-band__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: .9rem 0 0; }
.jet-band__aktionen a:not(.btn) { color: var(--blau); text-decoration: underline; text-underline-offset: .15em; }
.jet-band__aktionen a:not(.btn):hover { text-decoration: none; }
/* Mobil: Preiszeile ausblenden, Band bleibt kompakt */
@media (max-width: 48rem) { .jet-band__preise { display: none; } }
/* Symbolbild im Band: mobil ausgeblendet (Band bleibt kompakt), ab 48 rem
   rechts neben dem Text. Feste Spaltenbreite + width/height am Bild: kein
   Layout-Sprung. Ecken wie .content-bild. */
.jet-band__bild { display: none; margin: 0; }
@media (min-width: 48.0625rem) {
  .jet-band__layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem 2rem; align-items: center; }
  .jet-band__bild { display: block; }
  .jet-band__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
  .jet-band__bild figcaption { margin-top: .35rem; color: var(--grau); font-size: .85rem; }
}
.jet-skeleton { background: var(--linie); color: transparent; border-radius: .25rem; }
.jet-band__titel.jet-skeleton { width: min(30rem, 90%); }
.jet-band__wannwo.jet-skeleton { width: min(24rem, 85%); }
.jet-band .btn.jet-skeleton { width: 9rem; }
.jet-band__text { margin: 0 0 .25rem; max-width: none; }

/* JET-Band Phase 4 (Preisträger): Symbolbild entfällt, Karten statt Text.
   Mobil einspaltig und kompakt (Kurztext und Bildnachweis ausgeblendet),
   ab 48 rem Raster. Bildfläche mit festem Seitenverhältnis: kein Layout-Sprung,
   auch wenn das Foto später lädt. Farben nur aus den Variablen. */
.jet-band--preistraeger .jet-band__layout { display: block; }
.jet-band--preistraeger .jet-band__bild { display: none; }
.jet-preistraeger { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.jet-preis { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: .5rem; overflow: hidden; }
.jet-preis__bild { aspect-ratio: 1 / 1; background: var(--off-white); display: flex; align-items: center; justify-content: center; }
.jet-preis__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jet-preis__bild--platzhalter img { width: 3.5rem; height: auto; object-fit: contain; }
.jet-preis__text { padding: .5rem .75rem .5rem 0; }
.jet-preis__platz { margin: 0; font-family: var(--font-titel); font-weight: 700; font-size: .95rem; color: var(--blau); }
.jet-preis h3.jet-preis__name { margin: .1rem 0 0; font-size: 1.1rem; color: var(--ink); }
.jet-preis__ort { margin: 0; color: var(--grau); font-size: .95rem; }
.jet-preis__kurz { display: none; margin: .35rem 0 0; font-size: .95rem; }
.jet-preis__credit { display: none; margin: .35rem 0 0; color: var(--grau); font-size: .8rem; }
@media (min-width: 48.0625rem) {
  .jet-preistraeger { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .jet-preis { display: block; }
  .jet-preis__bild { aspect-ratio: 3 / 2; }
  .jet-preis__text { padding: .75rem 1rem 1rem; }
  .jet-preis__kurz, .jet-preis__credit { display: block; }
}

/* JET-Seite: Abschnitt „Preisträger“ (js/jet.js, aus data/jet.json) */
#preistraeger { margin: 2rem 0; }
#preistraeger .preistraeger__eintrag { margin: 0 0 2rem; }
#preistraeger h3 { margin-bottom: .25rem; }
#preistraeger .preistraeger__ort { margin: 0 0 .5rem; color: var(--grau); }

/* Karten-Raster für Übersicht */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.karte { border: 1px solid var(--linie); border-radius: .5rem; padding: 1.25rem; background: var(--weiss); }
.karte h3 { margin-top: 0; }

/* ---- Platzhalter (Gerüst, sichtbar markiert — KEIN erfundener Inhalt) ---- */
.platzhalter {
  border: 2px dashed var(--blau-hell); border-radius: .5rem;
  background: var(--off-white); color: var(--grau);
  padding: 1.25rem 1.5rem; font-style: italic;
}
.platzhalter::before { content: "Platzhalter · "; font-weight: 600; font-style: normal; color: var(--blau); }

/* ---- Footer ---- */
.footer { margin-top: 2rem; border-top: 6px solid var(--rot); background: var(--off-white); }
.footer__inner { padding-block: 2rem; display: grid; gap: 1.25rem; }
.footer h2 { font-size: 1.15rem; }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer a { color: var(--blau); }
.footer .meta { color: var(--grau); font-size: .95rem; }

/* No-JS-Hinweis für per fetch eingefügte Partials */
.include-fallback { padding: .5rem 0; }

@media (min-width: 40rem) {
  .footer__inner { grid-template-columns: 1fr auto; align-items: start; }
}