/* ===== tokens.css ===== */
/* Design-Tokens – einzige Quelle für Farben, Typo, Maße (Konzept §6).
   Komponenten-CSS nutzt ausschließlich var(...) – keine neuen Hex-Werte dort! */

:root {
  /* Basisfarben */
  --mvb-gelb: #FDC300;
  --mvb-anthrazit: #384045;
  --weiss: #ffffff;
  --schwarz: #000000;
  --linie: rgba(56, 64, 69, 0.15);
  --linie-stark: rgba(56, 64, 69, 0.3);
  --linie-dunkel: rgba(56, 64, 69, 0.5); /* Trennlinie Startkachel (Entwurf 545:535: #9b9fa2) */
  --schatten: rgba(0, 0, 0, 0.15);
  --schatten-stark: rgba(0, 0, 0, 0.25);
  --flaeche-hell: rgba(56, 64, 69, 0.10);  /* helle Hintergrundstreifen (Podcast, Design #ebecec) */
  --abdunkeln: rgba(56, 64, 69, 0.5);      /* Seiten-Dimmer bei offenem Menü */

  /* Typografie */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  /* Skala aus dem Design vermessen (JSON size-Werte + SVG-Renderings,
     Review 21.07.2026): 12 / 16 / 20 / 22 / 32 / 50 / 105.
     Der Dev-Handoff nutzte kleinere Werte – SVG/JSON gewinnen. */
  --fs-xs: 12px;      /* Captions, Meta, Footer, Badges */
  --fs-s: 14px;       /* (ohne Design-Beleg, nur Fallbacks) */
  --fs-m: 16px;       /* UI, Teaser, Buttons, Breadcrumb */
  --fs-text: 20px;    /* Fließtext (Inter 400, Zeile 30px) */
  --fs-lead: 20px;    /* Lead/Intro (Zeile 28px via lokalem lh) */
  --fs-start-intro: 25px; /* Startkachel: Intro + Jahreszahl (Entwurf 545:535) */
  --fs-l: 22px;       /* Zwischenüberschrift, Kasten-/Sektionstitel, Header-Titel */
  --fs-xl: 32px;      /* Zitat, Fakten-Kasten-Titel */
  --fs-zitat: 32px;
  --fs-h1: 50px;
  --fs-initial: 105px;
  --lh-text: 1.5;
  /* Zeilenhöhen der Titel, aus dem finalen Entwurf ausgezählt (Figma 508:3,
     06.08.2026): Poppins 50px = 1.2 (H1) · 22/32px Block- und Kastentitel = 1.5
     (6x 22px + 1x 32px) · Sektions-/Header-Titel = 1.4 (2x 22px). */
  --lh-titel: 1.2;          /* H1 */
  --lh-titel-block: 1.5;    /* Zwischenüberschrift, Infokasten-/Fakten-Titel */
  --lh-titel-sektion: 1.4;  /* Related-Sektion, Header-Titel */
  --lh-kompakt: 1.2;        /* enger gesetzte Fließtexte (Infokasten) */

  /* Layout (Design vermessen: Textspalte 816, breite Blöcke 1028, Seite 1240) */
  --content-width: 816px;   /* Textspalte */
  --wide-width: 1028px;     /* Bilder, Kästen, Player */
  --page-width: 1240px;     /* Header, Related, Footer, Galerie */
  --gutter: 24px;

  /* Abstands-Skala */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;   /* Standardabstand zwischen Blöcken */
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;   /* Sektionsabstand */

  /* Sonstiges */
  --radius: 20px;
  --akzent-kante: 10px;   /* gelber Versatz an Infokästen */
  --unterstrich-hover: 3px;   /* Link-Unterstrich bei Hover (Grundzustand 2px) */

  /* Theme-Defaults (werden unten pro Thema überschrieben) */
  --thema: var(--mvb-gelb);
  --thema-kontrast: var(--mvb-anthrazit);
  --thema-akzent: var(--mvb-anthrazit);
}

/* ---- Themenfarben-System (Konzept §6) ----------------------------------
   data-thema traegt den FARBNAMEN (site.yaml: themen[].farbe). Färbt: Themenbalken, Initial, H2,
   Zitat-Hervorhebungen, Infokasten (Variante thema).
   --thema          Flächen-/Auszeichnungsfarbe des Themas
   --thema-kontrast Textfarbe AUF der Themenfarbe
   --thema-akzent   Akzentfarbe AUF der Themenfarbe (Kastentitel, Marker)   */

[data-thema="gelb"] {
  --thema: var(--mvb-gelb);
  --thema-kontrast: var(--mvb-anthrazit);
  --thema-akzent: var(--mvb-anthrazit);
}
[data-thema="blau"] {
  --thema: #2F528E; /* bestätigt (Design-Handoff) */
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
/* Die folgenden Werte wurden aus den Content-Streams des Screen-PDFs
   (251002_MVB_Jahresbericht_SCREEN-1.pdf) extrahiert – Referenzfarben
   (Gelb, Anthrazit, Europa-Blau) stimmten dabei exakt. Trotzdem:
   von Agentur als verbindliche CD-Werte bestätigen lassen. */
[data-thema="rot"] {
  --thema: #E54740;
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
[data-thema="petrol"] {
  --thema: #4F6B6E;
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
[data-thema="gruen"] {
  --thema: #3B7F4C;
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
[data-thema="koralle"] {
  --thema: #EB5E46;
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
[data-thema="lila"] {
  --thema: #59467F;
  --thema-kontrast: var(--weiss);
  --thema-akzent: var(--mvb-gelb);
}
[data-thema="grau"] {
  /* "MVB Grau 1 (Text in MVB Gelb)" lt. Agentur-Anmerkung. PDF-Sampling fand
     #ECEBEA (helle Flächen) und #7E8386 (Sekundärtext) – beide zu hell für
     gelben Text. Bis zur Klärung: Anthrazit als Themenfläche, Gelb als Text. */
  --thema: var(--mvb-anthrazit);
  --thema-kontrast: var(--mvb-gelb);
  --thema-akzent: var(--mvb-gelb);
}


/* ===== fonts.css ===== */
/* Webfonts self-hosted (DSGVO, Konzept §12) – keine externen Requests.
   Poppins 700 + Inter 400/700 als woff2, Latin-Subset (Quelle: Google Fonts
   via gwfh.mranftl.com; Umlaute/ß im Subset verifiziert).
   Pfade relativ zur fertigen dist/assets/css/styles.css → ../fonts/. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

/* Inter als Variable Font aus der vom Auftraggeber gelieferten Quelle
   (assets/Inter.ttf, v4.001): Latin-Subset, Gewichtsachse auf 400-700
   begrenzt, opsz auf Default (14) fixiert – erzeugt via fontTools. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}


/* ===== base.css ===== */
/* Basis: Reset, Grundtypografie, globale Utilities */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Sprungziele (anker: am Block, person-<schluessel> an den Karten) duerfen
   nicht unter dem eingeblendeten Sticky-Balken landen. Der besteht aus zwei
   Baendern a 57px (components/header.css, Entwurf 508:155) – also 114px,
   dazu etwas Luft, damit das Ziel nicht am Balken klebt. */
[id] {
  scroll-margin-top: calc(114px + var(--sp-3));
}

/* mobil ist der Sticky-Balken flacher: 48 + 40 = 88px */
@media (max-width: 640px) {
  [id] {
    scroll-margin-top: calc(88px + var(--sp-3));
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--mvb-anthrazit);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  /* Überlange Wörter/URLs brechen um, statt die Seite zu verbreitern –
     greift nur dort, wo ein Wort sonst überstünde (Mobil-Check 23.09.2026). */
  overflow-wrap: break-word;
  /* Unterstriche durchgehend, auch unter g/p/y (Entwurf: skip-ink none) –
     sonst reißt der kräftigere Hover-Unterstrich an den Unterlängen ab. */
  text-decoration-skip-ink: none;
}

/* Mobil Silbentrennung (lang="de") nur im Fließtext und in Zitaten – NICHT
   in Überschriften und Kacheltiteln (Wunsch Agentur 30.09.: kein
   "Mar-kenverband"). Dort sorgen die mobilen Schriftgrößen (layout.css) dafür,
   dass auch lange Komposita in eine Zeile passen. Mailadressen/Links bleiben
   ungetrennt. Ebenso kurze Zeilen wie Unterzeile der Startseite, Funktionen
   und Positionen (Agentur 07.10.: "Verbraucherpoli-tik", "Geschäftsfüh-rend"). */
@media (max-width: 640px) {
  p, li, blockquote {
    hyphens: auto;
  }

  h1, h2, h3,
  .teaser-karte__titel, .related-card__text, .kachel__titel,
  .start-hero__intro, .hero__autor, .pull-quote__author,
  .author-outro__name, .author-outro__role, .person__name, .person__rolle,
  .liste__inhalt p,
  a[href^="mailto:"], a[href^="http"] {
    hyphens: manual;
  }
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-titel);
  margin: 0;
  /* kein einzelnes Wort allein in der letzten Zeile ("…denn / je") – Browser
     ohne Unterstützung umbrechen wie bisher */
  text-wrap: pretty;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

/* Sichtbarer Fokus – Pflicht auf allen Interaktionselementen (Konzept §12) */
:focus-visible {
  outline: 3px solid var(--mvb-gelb);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mvb-anthrazit);
  color: var(--weiss);
  padding: var(--sp-1) var(--sp-2);
}

.skip-link:focus-visible {
  left: 0;
}

/* Kurze Trennlinie (Handoff .rule--short) */
.rule {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 0;
}

.rule--kurz {
  width: 96px;   /* Design: 95-98px, 2px (z.B. Namens-Unterstreichungen) */
  border-top-width: 2px;
  border-color: var(--mvb-gelb);
}

/* Platzhalter für fehlende Bilder (nur im Dev sichtbar) */
.bild-fehlt {
  overflow-wrap: anywhere;   /* langer Dateiname im Platzhalter */
  background: var(--linie);
  color: var(--mvb-anthrazit);
  font-size: var(--fs-s);
  padding: var(--sp-5);
  text-align: center;
}

/* Animations-Grundlage (Option B, per data-animiert aktiviert) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nur für Screenreader: unsichtbar, bleibt aber im Vorlesefluss (z. B. H1 bei
   hero.titel_ausblenden) */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ===== layout.css ===== */
/* Layout: Breiten-Utilities und Block-Rhythmus (Konzept §6).
   Drei Breiten: Text (780) – Breit (1040) – Seite (1240), je + Gutter. */

.breite-text,
.breite-breit,
.breite-seite {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.breite-text {
  max-width: calc(var(--content-width) + 2 * var(--gutter));
}

.breite-breit {
  max-width: calc(var(--wide-width) + 2 * var(--gutter));
}

.breite-seite {
  max-width: calc(var(--page-width) + 2 * var(--gutter));
}

/* Blätterpfeile (50px, am Viewportrand fixiert, ab 641px sichtbar, hero.css):
   Seitenrand so breit, dass sie nie über Text, Bildern oder Kacheln liegen.
   Ab 1356px (1240 + 2 × 58) ist neben der Seite ohnehin Platz. --rand-frei hält
   Überhänge (personen.css) aus dem Pfeilstreifen heraus. */
@media (min-width: 641px) {
  body:has(.pfeile) {
    --rand-frei: 58px;
  }
}

@media (min-width: 641px) and (max-width: 1355px) {
  body:has(.pfeile) {
    --gutter: 58px;
  }
}

/* Randabfallend – echte Viewportbreite */
.breite-voll {
  width: 100%;
}

/* Vertikaler Rhythmus des Artikels: Textblöcke 32px, große Medien-/
   Kastenblöcke und Zitate 64px (Design: ~64-75px Luft um diese Blöcke) */
.artikel {
  padding: var(--sp-8) 0;
}

.artikel > * + * {
  margin-top: var(--sp-4);
}

.artikel > .breite-breit,
.artikel > .breite-voll,
.artikel > .breite-seite,
.artikel > .podcast,
.artikel > .breite-breit + *,
.artikel > .breite-voll + *,
.artikel > .breite-seite + *,
.artikel > .podcast + *,
.artikel > .galerie__titel {
  margin-top: var(--sp-8);
}

.artikel > .pull-quote,
.artikel > .pull-quote + * {
  margin-top: var(--sp-8);
}

.artikel > *:first-child {
  margin-top: 0;
}

/* Block-Feld abstand_danach: doppelt (artikel.html) – nach den Regeln oben,
   damit es auch nach breiten Blöcken und Zitaten greift */
.artikel > .abstand-doppelt[hidden] + * {
  margin-top: calc(2 * var(--sp-8));
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --fs-text: 16px;
    /* Überschriften skalieren mit der Breite (Wunsch Agentur 30.09.: mobil
       kleiner, ohne Worttrennung). Grenzen per Messung aller Seiten bei
       320/360/390px: lange Komposita wie "Wettbewerbsfähigkeit" (Titel) oder
       "Gebrauchsgüterausschuss" (Zwischenüberschrift) passen in eine Zeile. */
    --fs-zitat: 20px;
    --fs-h1: clamp(20px, 6.4vw, 30px);
    --fs-xl: clamp(22px, 6vw, 28px);
    --fs-l: clamp(18px, 5vw, 22px);
    --fs-start-intro: 20px;   /* bleibt im Verhältnis zum kleineren Titel */
    --fs-initial: 64px;
  }

  .artikel > .breite-breit,
  .artikel > .breite-voll,
  .artikel > .breite-seite,
  .artikel > .podcast,
  .artikel > .breite-breit + *,
  .artikel > .breite-voll + *,
  .artikel > .breite-seite + *,
  .artikel > .podcast + *,
  .artikel > .galerie__titel,
  .artikel > .pull-quote,
  .artikel > .pull-quote + * {
    margin-top: var(--sp-5);
  }

  .artikel {
    padding: var(--sp-5) 0;
  }
}


/* ===== autor.css ===== */
/* Baustein ansprechpartner (blocks/ansprechpartner.html, Handoff .author-outro).
   Maße aus design/beispiel1.json + Rendering "abschlu-":
   Trennlinie 1px Anthrazit (Vollton), 20px darunter das 100x100-Porträt
   (eckig) mit gelbem L-Versatz +10px/+12px.
   Kontrastfix Konzept §15.6: Name in Anthrazit statt Gelb auf Weiß wie im
   Design. Unterstrichen nur, wenn er auf die Ansprechpartner-Karte verlinkt
   (Abstimmung 23.09.2026: statt "zum Profil"-Button). */

/* Der Kasten schließt einen Abschnitt ab (Gremien): die folgende
   Zwischenüberschrift deutlich absetzen, sonst wirkt er wie der Auftakt des
   nächsten Abschnitts (Wunsch Agentur 30.09.). Seit 07.10. steht dort
   danach noch "Zurück zur Übersicht" – dann gilt der Abstand nach dem Button. */
.artikel > .author-outro + .content-block__title,
.artikel > .author-outro + .button-block + .content-block__title {
  margin-top: var(--sp-8);
}

@media (max-width: 640px) {
  .artikel > .author-outro + .content-block__title,
  .artikel > .author-outro + .button-block + .content-block__title {
    margin-top: var(--sp-6);
  }
}

.author-outro__inner {
  display: flex;
  align-items: flex-start;
  gap: 36px;                    /* Design: Porträtkante x412 -> Textblock x448 */
  padding: 20px 0;              /* Design: Linie -> Porträt 20px */
  border-top: 1px solid var(--mvb-anthrazit);  /* Design: 1px Vollton-Anthrazit */
}

.author-outro__badge {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: var(--mvb-gelb);
  /* L-förmiger gelber Versatz rechts/unten (Design: +10px/+12px) */
  box-shadow: 10px 12px 0 0 var(--mvb-gelb);
}

.author-outro__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-outro__info {
  flex: 1;
  min-width: 0;
}

.author-outro__name {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: var(--fs-m);
  color: var(--mvb-anthrazit);
}

/* Immer gelb (nicht Themenfarbe) – passend zum gelben Foto-Versatz
   (Abstimmung 24.09.2026). Der Hero-Autor bleibt in Themenfarbe. */
.author-outro__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.author-outro__link:focus-visible {
  text-decoration-thickness: var(--unterstrich-hover);
}

@media (hover: hover) {
  .author-outro__link:hover {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

.author-outro__role {
  margin: 0;
  font-size: var(--fs-m);
}

/* Gelber Button 140x40 (Design group-65 "zum Profil", Text Schwarz lt. JSON) –
   heute nur noch vom Baustein button genutzt. */
.btn--profile {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 10px;             /* Design: Buttonkante 10px unter Porträtkante */
  min-width: 140px;
  padding: 8px 16px;            /* 24px Zeile + 2x8 = 40px Höhe */
  /* Im Entwurf sind die gelben Buttons volle Pillen: rounded-[25px] bei 40px
     Höhe (Figma 759:33 "zur Bildergalerie", ebenso die Header-Pille). 20px =
     halbe Höhe reicht dafür und ist derselbe Wert wie bei .pill. */
  border-radius: var(--radius);
  text-align: center;
  background: var(--mvb-gelb);
  color: var(--schwarz);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-m);
  text-decoration: none;
}

@media (hover: hover) {
  .btn--profile:hover {
    background: var(--mvb-anthrazit);
    color: var(--mvb-gelb);
  }
}

.btn--profile:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

@media (max-width: 640px) {
  .author-outro__inner {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .author-outro__badge {
    width: 80px;
    height: 80px;
  }
}


/* ===== bild.css ===== */
/* Bild-Bausteine (blocks/bild.html)
   .wide-image  – variante "breit": 1040px (via .breite-breit), mit Bildunterschrift
   .full-image  – variante "voll":  randabfallend (via .breite-voll), ohne BU */

/* figure-UA-Margins neutralisieren – :where() bleibt spezifitätsfrei und
   überstimmt weder .breite-* noch den Block-Rhythmus aus layout.css */
:where(.wide-image, .full-image) {
  margin: 0;
}

.wide-image img,
.full-image img {
  width: 100%;
}

/* Hochformat in der Variante "breit": die Klasse setzt build.py, sobald ein
   Bild höher als breit ist – im CSS lässt sich das Seitenverhältnis des
   Bildinhalts nicht abfragen. Statt das Bild auf die 1028px-Spalte zu zerren
   (ein 2:3-Foto würde dort 1542px hoch), begrenzen wir die Höhe und stellen es
   mittig. Beschnitten wird nichts – bei einem Porträt wäre genau das fatal.
   Zwei Selektoren, damit die Regel die Breitenangabe oben sicher überstimmt. */
/* Die figure schrumpft auf die Bildbreite und wird zentriert. Nur so steht das
   Hochformat mittig UND die Bildunterschrift bündig unter seiner linken Kante –
   sie beginnt ja an der Innenkante der figure. Damit das aufgeht, braucht das
   Bild ein definites Maß; sonst trüge es seine volle Eigenbreite zur figure bei
   und die bliebe spaltenbreit.

   Festgelegt wird die BREITE, nicht die Höhe. Eine feste Höhe wäre der
   naheliegende Weg (das Bild soll ja nicht zu hoch werden), kann aber mit
   max-width zusammen das Seitenverhältnis nicht halten: auf einem 375px-Display
   käme ein 2:3-Foto auf einen 327x650-Kasten bei nur 490px Bildhöhe – 159px
   Totraum. Über die Breite bleibt height: auto und das Verhältnis stimmt immer.

   --bild-breite und --bild-ar liefert build.py; 80vh mal Seitenverhältnis ist
   die Breite, die der Höhendeckelung für flache Fenster entspricht. */
.wide-image:has(img.ist-hochformat) {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.wide-image img.ist-hochformat {
  width: min(var(--bild-breite), calc(80vh * var(--bild-ar)));
  max-width: 100%;
  height: auto;
}

/* Sonst bestimmt die Bildunterschrift die Breite der geschrumpften figure:
   ihre einzeilige Textbreite ist die größte Kindbreite, und das Bild stünde
   in einem zu breiten Kasten links statt mittig. width: 0 nimmt sie aus der
   Breitenberechnung, min-width holt sie danach auf die Bildbreite zurück. */
.wide-image:has(img.ist-hochformat) .wide-image__bu {
  width: 0;
  min-width: 100%;
}

.wide-image__bu {
  /* Bündig zur linken Bildkante (Wunsch Redaktion 01.09.2026).
     Der Entwurf beispiel1.svg setzte die BU auf die Textspalte (x=313 statt
     x=206 der Bildkante) – das wirkte eingerückt und wurde verworfen.
     figure und BU teilen sich denselben Innenabstand, deshalb genügt es,
     die zentrierende max-width/auto-Kombination zu entfernen. */
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  opacity: 0.75; /* Handoff: 0.5 – wegen Kontrast angehoben, s. offene Punkte */
}

.wide-image__bu p {
  margin: 0;
}

.full-image img {
  /* Design bild---trenner: 1440x400 – fester 400px-Streifen (Handoff ebenso:
     max-height 400px); 70vh bleibt als Schutz für sehr flache Viewports */
  max-height: min(400px, 70vh);
  object-fit: cover;
}


/* ===== button-block.css ===== */
/* Baustein "button": eigenständiger Verweis im Textfluss.
   Nutzt die .btn--profile-Optik der Autorenkarte.
   Kein margin-Shorthand: würde die auto-Zentrierung von .breite-text kippen. */

.button-block {
  margin-bottom: 0;
}

/* Variante mit Icon (Design 759:33 "zur Bildergalerie", 202x40):
   Icon 24px bei x=+18, Text ab x=+52 -> 18px Innenabstand, 10px Lücke. */
.btn--mit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-left: 18px;
}

.btn__icon {
  display: flex;
  flex-shrink: 0;
}

.btn__icon svg {
  width: 24px;
  height: 24px;
}


/* ===== footer.css ===== */
/* Footer (Handoff .site-footer): gelbe Fläche, Adresse, LinkedIn, Rechtliches.
   Maße aus design/beispiel1.json + Rendering: 10px Anthrazit-Streifen oben,
   gelbe Fläche 130 hoch (29px Padding, Inhalt 72 = 4 Zeilen à 18px).
   Spalten: Adresse (x100) | "Folgen Sie uns" mit Icon darunter (x306) |
   Impressum/Datenschutz + Copyright rechtsbündig. Icon 22x22. */

.site-footer {
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  border-top: 10px solid var(--mvb-anthrazit);  /* "dunkler Streifen zur Abgrenzung" */
  padding: 29px 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 206px 1fr auto;  /* Social-Spalte beginnt bei x306 (Design) */
  align-items: start;
  font-size: var(--fs-xs);
  line-height: 1.5;                       /* 18px-Zeilenraster lt. Design */
}

/* Gelber Fokusring aus base.css ist auf Gelb unsichtbar -> Anthrazit */
.site-footer a:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

.site-footer__address {
  grid-row: 1 / 3;
  font-style: normal;
}

.site-footer__address a,
.site-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .site-footer__address a:hover,
  .site-footer__legal a:hover {
    text-decoration-thickness: 2px;
  }
}

.site-footer__social {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__social p {
  margin: 0;
}

.site-footer__linkedin {
  display: inline-flex;
  margin-top: 9px;              /* Design: Text -> Icon 9px, Icon unter dem Text */
  color: var(--mvb-anthrazit);
}

.site-footer__linkedin svg {
  width: 22px;                  /* Design: 22x22 */
  height: 22px;
  display: block;
  fill: currentColor;
}

@media (hover: hover) {
  .site-footer__linkedin:hover {
    background: var(--mvb-anthrazit);
    color: var(--mvb-gelb);
  }
}

.site-footer__legal {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.site-footer__copyright {
  grid-column: 3;
  grid-row: 2;
  margin: 18px 0 0;             /* Design: eine Leerzeile (18px) unter Datenschutz */
  text-align: right;
}

/* Mobil kompakt (Abstimmung 23.09.2026, vorher sechs lose gestapelte
   Blöcke): Adresse | LinkedIn nebeneinander, darunter Impressum ·
   Datenschutz in einer Zeile, dann das Copyright. */
@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    gap: var(--sp-3) var(--sp-2);
  }

  .site-footer__address {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer__social {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    gap: var(--sp-3);
    text-align: left;
  }

  .site-footer__copyright {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    margin-top: 0;
  }
}


/* ===== galerie.css ===== */
/* Galerie-Baustein (blocks/galerie.html) + Übersicht + Lightbox (js/lightbox.js).
   Im Artikel: Collage, Button oder Vorschaureihe; Klick → Übersicht
   (.galerie-uebersicht, <dialog> im Markup) → Klick → Lightbox (<dialog> aus
   der <template>-Vorlage). */

.image-grid {
  display: grid;
  /* Spaltenzahl pro Block konfigurierbar (blocks/galerie.html setzt
     --galerie-spalten aus block.spalten; Standard 4 = Design-Raster) */
  grid-template-columns: repeat(var(--galerie-spalten, 4), 1fr);
  /* Design bild---4-bilder: Kacheln 286x408 bei 1240 Gesamtbreite,
     x = 100/418/736/1054 => Gap exakt 32px (Handoff-16px unterliegt SVG/JSON) */
  gap: var(--sp-4);
}

.image-grid__trigger {
  display: block;
  width: 100%;
}

/* Titel (block.titel) gehört zum Raster: Abstand darunter wie Überschrift →
   Text statt der 64px vor breiten Blöcken (layout.css) */
.artikel > .galerie__titel + * {
  margin-top: var(--sp-4);
}

.image-grid__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 286 / 408; /* wie Handoff .image-grid img */
  object-fit: cover;
  transition: opacity 0.2s ease;
}

/* Interaktion erst mit aktivem JS (Klasse setzt lightbox.js) */
.galerie--aktiv .image-grid__trigger,
.galerie--aktiv .galerie-collage__oeffner {
  cursor: pointer;
}

.galerie--aktiv .image-grid__trigger:focus-visible .image-grid__bild,
.galerie--aktiv .galerie-collage__oeffner:focus-visible .galerie-collage__bild {
  opacity: 0.85;
}

/* Hover nur mit Maus: auf Touch-Geräten bliebe der Zustand nach dem Antippen
   stehen (z. B. Lightbox-Pfeil bleibt dunkel). Gilt für alle :hover hier. */
@media (hover: hover) {
  .galerie--aktiv .image-grid__trigger:hover .image-grid__bild,
  .galerie--aktiv .galerie-collage__oeffner:hover .galerie-collage__bild {
    opacity: 0.85;
  }
}

/* ---------- Collage (block.collage): ein Bild in Breite "breit" ---------- */

.galerie-collage__oeffner {
  position: relative;
  display: block;
  width: 100%;
}

.galerie-collage__bild {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}

/* gelber Hinweis unten rechts auf dem Bild – sagt, dass es eine Galerie ist */
.galerie-collage__hinweis {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  margin: 0;
  box-shadow: 0 4px 4px var(--schatten-stark);
}

@media (hover: hover) {
  .galerie--aktiv .galerie-collage__oeffner:hover .galerie-collage__hinweis {
    background: var(--mvb-anthrazit);
    color: var(--mvb-gelb);
  }
}

/* ---------- Übersicht: alle Bilder klein, Vollbild-Dialog ---------- */

.galerie-uebersicht {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 0 var(--sp-6);
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--weiss);
  color: var(--mvb-anthrazit);
}

.galerie-uebersicht[open] {
  animation: lightbox-einblenden 0.2s ease;
}

.galerie-uebersicht::backdrop {
  background: var(--weiss);
}

/* Kopf wie die Sticky-Leiste beim Runterscrollen (header.css .sticky-nav__kopf):
   57px, Bildmarke links, Titel mittig, Schließen-Kreuz rechts statt der Pille;
   bleibt beim Scrollen der Übersicht stehen */
.galerie-uebersicht__kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: var(--sp-4);
  background: var(--weiss);
  box-shadow: 0 4px 4px var(--schatten-stark);
}

/* Raster mit gleich breiten Außenspalten (1fr | Titel | 1fr): der Titel steht
   genau in der Mitte, auch wenn rechts Anzahl + Kreuz breiter sind als links
   die Bildmarke */
.galerie-uebersicht__kopf-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  min-height: 57px;
}

/* rechts: Anzahl klein vor dem Kreuz */
.galerie-uebersicht__rechts {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Bildmarke 31x27 wie .sticky-nav__logo (doppelte Klasse schlägt .site-header__logo) */
.galerie-uebersicht__kopf .galerie-uebersicht__logo {
  margin-bottom: 0;
}

.galerie-uebersicht__kopf .galerie-uebersicht__logo svg {
  height: 27px;
}

.galerie-uebersicht__titel {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-l);
  line-height: var(--lh-titel-sektion);
}

.galerie-uebersicht__anzahl {
  margin: 0;
  font-size: var(--fs-s);
  white-space: nowrap;
}

/* -14px: das Kreuz (Striche bis 4px vor dem Rand des 24px-Symbols, mittig in
   44px) steht so bündig mit der rechten Bildkante darunter */
.galerie-uebersicht__schliessen {
  margin-right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--mvb-anthrazit);
}

.galerie-uebersicht__schliessen svg {
  width: 24px;
  height: 24px;
}

.galerie-uebersicht__schliessen:focus-visible {
  color: var(--mvb-gelb);
}

@media (hover: hover) {
  .galerie-uebersicht__schliessen:hover {
    color: var(--mvb-gelb);
  }
}

.galerie-uebersicht__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-1);
}

/* ganz heller Platzhalter, bis das Bild da ist */
.galerie-uebersicht__bild {
  display: block;
  width: 100%;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--mvb-anthrazit) 6%, transparent);
}

/* Bild blendet ein, sobald es geladen ist (.ist-geladen setzt lightbox.js);
   color: transparent – kein Alt-Text im Platzhalter während des Ladens */
.galerie-uebersicht__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  color: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.galerie-uebersicht__img.ist-geladen {
  opacity: 1;
}

.galerie-uebersicht__bild:focus-visible .galerie-uebersicht__img.ist-geladen {
  opacity: 0.85;
}

@media (hover: hover) {
  .galerie-uebersicht__bild:hover .galerie-uebersicht__img.ist-geladen {
    opacity: 0.85;
  }
}

/* ---------- Lightbox-Dialog ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  /* hell wie die Seite (Wunsch 05.10.2026, vorher fast schwarz) */
  background: var(--weiss);
  color: var(--mvb-anthrazit);
  font-family: var(--font-body);
}

.lightbox::backdrop {
  background: var(--weiss);
}

.lightbox[open] {
  animation: lightbox-einblenden 0.2s ease;
  /* bei prefers-reduced-motion neutralisiert base.css alle Animationen */
}

@keyframes lightbox-einblenden {
  from { opacity: 0; }
}

/* per JS gesetztes [hidden] (Pfeile/Zähler bei Einzelbild) darf display nicht verlieren */
.lightbox [hidden] {
  display: none;
}

/* Vollbild (Abstimmung 23.09.2026): das Bild füllt die ganze Fläche
   zwischen den Pfeilen und über der BU – auch kleinere Originale werden
   hochskaliert (contain, nichts wird beschnitten). */
.lightbox__figur {
  height: 100%;
  margin: 0;
  padding: var(--sp-2) calc(48px + 2 * var(--sp-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* drop-shadow statt box-shadow: folgt dem sichtbaren Bild, nicht der ganzen
   (per contain teils leeren) Fläche des <img> */
.lightbox__bild {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px var(--schatten-stark));
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* .ist-geladen setzt lightbox.js, sobald das (neue) Bild da ist */
.lightbox__bild.ist-geladen {
  opacity: 1;
}

.lightbox__bu {
  flex: none;
  max-width: 60ch;
  font-size: var(--fs-s);
  text-align: center;
  opacity: 0.8;
}

.lightbox__zaehler {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  margin: 0;
  line-height: 48px; /* optisch bündig zum Schließen-Button */
  font-size: var(--fs-s);
  opacity: 0.8;
}

.lightbox__schliessen,
.lightbox__pfeil {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--mvb-anthrazit);
  /* heller Kreis: mobil liegen die Pfeile über dem Bild */
  background: color-mix(in srgb, var(--weiss) 85%, transparent);
  transition: background-color 0.2s ease;
}

.lightbox__schliessen svg,
.lightbox__pfeil svg {
  width: 28px;
  height: 28px;
}

.lightbox__schliessen {
  top: var(--sp-2);
  right: var(--sp-2);
}

/* Pfeile wie die Blätterpfeile der Seite (hero.css .pfeile__link): gelbe
   Quadrate 50x50 mit Schatten, bündig am Rand, Hover anthrazit/gelb */
.lightbox__pfeil {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 0;
  background: var(--mvb-gelb);
  box-shadow: 0 4px 4px var(--schatten-stark);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lightbox__pfeil svg {
  width: 20px;
  height: 20px;
}

.lightbox__pfeil--zurueck { left: 0; }
.lightbox__pfeil--vor { right: 0; }

.lightbox__pfeil:focus-visible {
  background: var(--mvb-anthrazit);
  color: var(--mvb-gelb);
}

@media (hover: hover) {
  .lightbox__pfeil:hover {
    background: var(--mvb-anthrazit);
    color: var(--mvb-gelb);
  }
}

/* gelbes Symbol wäre auf Weiß zu blass – gelber Kreis wie bei den Buttons */
.lightbox__schliessen:focus-visible {
  background: var(--mvb-gelb);
}

@media (hover: hover) {
  .lightbox__schliessen:hover {
    background: var(--mvb-gelb);
  }
}

/* Body-Scroll bei offener Lightbox sperren (Klasse setzt lightbox.js) */
.lightbox-offen {
  overflow: hidden;
}

@media (max-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2); /* wie bisher/Handoff – Design liefert keine Tablet-Referenz */
  }
}

@media (max-width: 640px) {
  .image-grid {
    gap: var(--sp-1);
  }

  /* kompakt, damit er die (mobil flache) Collage nicht verdeckt */
  .galerie-collage__hinweis {
    right: var(--sp-1);
    bottom: var(--sp-1);
    min-width: 0;
    padding: 4px 12px;
    font-size: var(--fs-xs);
  }

  .galerie-collage__hinweis .btn__icon svg {
    width: 18px;
    height: 18px;
  }

  .galerie-uebersicht__raster {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  /* wie die mobile Sticky-Leiste: 48px, Titel klein und notfalls zweizeilig;
     die Anzahl entfällt mobil (zu wenig Höhe) */
  .galerie-uebersicht__kopf-inner {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 48px;
  }

  .galerie-uebersicht__titel {
    font-size: var(--fs-s);
    line-height: 1.3;
  }

  .galerie-uebersicht__anzahl {
    display: none;
  }

  /* Pfeile liegen mobil über dem Bild, Bild nutzt die volle Breite;
     oben Platz für Zähler und Schließen */
  .lightbox__figur {
    padding: var(--sp-8) 0 var(--sp-3);
  }

  .lightbox__schliessen,
  .lightbox__pfeil {
    width: 40px;
    height: 40px;
  }

  .lightbox__zaehler {
    line-height: 40px;
  }

  .lightbox__schliessen svg {
    width: 22px;
    height: 22px;
  }

  .lightbox__pfeil svg {
    width: 18px;
    height: 18px;
  }
}


/* ===== header.css ===== */
/* Header, Themenbalken, Sticky-Nav und "Alle Themen"-Panel (Konzept §5).
   Klassennamen aus dem Design-Handoff (.site-header/.site-nav/.sticky-nav/.pill). */

/* ---- Weißer Kopfbereich ---- */
.site-header {
  background: var(--weiss);
  padding-top: var(--sp-3);
}

.site-header__inner {
  /* Luft zwischen Logo und Themenbalken hier (nicht am .site-header –
     der umschließt auch den Balken und würde Weißraum DARUNTER erzeugen).
     Maße aus dem Entwurf (beispiel1-3): Kopf gesamt 120px = 24px oben
     + 96px Zeile (inkl. 21px Luft unter der Pill, Pill-Unterkante y=99). */
  padding-bottom: 21px;
  position: relative;
  display: flex;
  /* Entwurf: Titel und Pill sitzen unten (Pill bündig auf y=99),
     nicht mittig – der absolute Titel erbt die Ausrichtung über seine
     statische Position im Flex-Container. */
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 96px;
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
  /* Entwurf: Logo-Unterkante (y=92) liegt 7px über der Pill-Unterkante (y=99) */
  margin-bottom: 7px;
}

.site-header__logo svg {
  display: block;
  height: 67px; /* Entwurf ebene_1: 149x67 */
  width: auto;
}

@media (hover: hover) {
  .site-header__logo:hover {
    opacity: 0.75;
  }
}

.site-header__logo:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

.site-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-l); /* Entwurf: Poppins 22px (Textknoten 252x31) */
  line-height: var(--lh-titel-sektion);   /* Entwurf final 508:3: leading 1.4 */
  white-space: nowrap;
}

/* Burger – erst unter 640px sichtbar */
.site-header__menu {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: var(--mvb-anthrazit);
  flex-shrink: 0;
}

.site-header__menu svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .site-header__menu:hover {
    background: var(--linie);
  }
}

.site-header__menu:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

/* ---- Gelber Pill-Button (Entwurf group-91: 165x40, Inter 16px/700,
        10px Lücke zwischen Chevron und Text, ~23px Innenabstand) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .pill:hover {
    box-shadow: 0 2px 8px var(--schatten);
  }
}

.pill:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

.pill__chevron {
  display: inline-flex;
}

.pill__chevron svg {
  display: block;
  width: 10px;
  height: auto;
}

.pill--nav {
  flex-shrink: 0;
}

/* ---- Themenbalken: volle Breite, bündig an Header und Hero ----
   Entwurf (beispiel1-3): 57px hoch, Schatten 0 4px 4px rgba(0,0,0,0.25)
   fällt sichtbar auf Hero bzw. weiße Fläche darunter. */
.site-nav {
  margin: 0;
  padding: var(--sp-1) var(--gutter);
  min-height: 57px;
  position: relative; /* Schatten über dem nachfolgenden Hero halten */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--thema);
  color: var(--thema-kontrast);
  box-shadow: 0 4px 4px var(--schatten-stark);
}

/* Startseite: statt des gelben Balkens ein weißer Streifen (Entwurf 545:535:
   Kopf 136px weiß). Er trägt denselben Schatten wie die Farbbalken – bei
   0px Höhe wäre der Schatten unsichtbar. */
.site-nav--leer {
  padding: 0;
  min-height: 0;
  height: var(--sp-2);
  background: var(--weiss);
}

.site-nav__crumb {
  margin: 0;
  font-size: var(--fs-m);
}

/* ---- Sticky-Variante (Handoff .sticky-nav) ----
   Höhe 0 im Fluss (kein Layout-Sprung); der Balken selbst liegt absolut
   darüber und wird per JS-Klasse .is-visible eingeblendet (sticky-nav.js). */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 0;
}

.sticky-nav__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Entwurf final 508:155: zwei Bänder à 57px (= 114px), Schatten wie am
     Themenbalken. Früher: einzeiliger Anthrazit-Streifen (Handoff-Variante). */
  box-shadow: 0 4px 4px var(--schatten-stark);
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Band 1: weiße Leiste, Logo links / Pill rechts auf der Seitenbreite
   (Entwurf: Logo x=100, Pill-Rechtskante x=1340 – beides = .breite-seite) */
.sticky-nav__kopf {
  display: flex;
  align-items: center;
  height: 57px;
  background: var(--weiss);
}

.sticky-nav__kopf-inner {
  position: relative;   /* Bezug für den mittigen Titel */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
}

/* Titel mittig wie im Start-Header (.site-header__title, absolut zentriert);
   hier auf die Leistenmitte statt auf die Unterkante gesetzt. */
.sticky-nav__titel {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Bildmarke statt vollem Logo: Entwurf 508:168 misst 30.954x26.803 –
   das ist exakt die viewBox von icons/logo-marke.svg. */
.sticky-nav__logo {
  margin-bottom: 0;
}

.sticky-nav__logo svg {
  height: 27px;
  width: auto;
}

/* Band 2: Themenbalken mit der Krume, Text in Themenkontrastfarbe
   (Entwurf: weiß auf Europa-Blau) */
.sticky-nav__balken {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  padding: 0 var(--gutter);
  background: var(--thema);
  color: var(--thema-kontrast);
}

.sticky-nav.is-visible .sticky-nav__inner {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.sticky-nav .site-nav__crumb {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Entwurf header-sticky group-84/rectangle-42: kleinere Pill 124x26,
   Inter 12px/700 (Chevron unverändert 10x5) */
.pill--nav-sticky {
  height: 26px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
}

.pill--nav-sticky:focus-visible {
  outline-color: var(--weiss);
}

/* ---- "Alle Themen"-Panel (Design nav.svg: vollbreites Dropdown) ----
   Fixierter Layer: oben helle Header-Kopie + Themenlinie + 4 Rubriken-Spalten,
   Rest des Viewports abgedunkelt (--abdunkeln).
   Ohne JS: :target öffnet, Link auf "#" schließt. Mit JS: .ist-offen (menu.js).
   Öffnen/Schließen als Überblendung statt Sprung (Abstimmung 23.09.2026):
   Deckkraft statt display, visibility schaltet erst nach dem Ausblenden ab
   (hält das geschlossene Panel aus Tab-Reihenfolge und Screenreader). */
.themen-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  background: var(--abdunkeln);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.themen-panel:target,
.themen-panel.ist-offen {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

.themen-panel__inhalt {
  background: var(--weiss);
  color: var(--mvb-anthrazit);
  box-shadow: 0 12px 24px var(--schatten);
}

/* Rubriken gleiten beim Öffnen leicht nach unten ein; die Kopfzeile steht
   still und blendet nur über (liegt deckungsgleich auf dem Header). */
.themen-panel__nav {
  transform: translateY(-12px);
  transition: transform 0.3s ease;
}

.themen-panel:target .themen-panel__nav,
.themen-panel.ist-offen .themen-panel__nav {
  transform: none;
}

/* gleiche Kopfhöhe wie der echte .site-header */
.themen-panel__kopf {
  padding-top: var(--sp-3);
}

/* Header-Kopie: nutzt die .site-header__*-Stile, nur die Trennlinie ist Thema */
.themen-panel__linie {
  height: 8px;
  background: var(--thema);
}

/* Chevron im offenen Zustand nach oben (Design: Pfeil zeigt aufwärts) */
.pill--nav-offen .pill__chevron svg {
  transform: rotate(180deg);
}

.themen-panel__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}

.themen-panel__rubrik {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-m);
}

.themen-panel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.themen-panel__eintrag + .themen-panel__eintrag {
  margin-top: var(--sp-1);
}

.themen-panel__link {
  display: inline-block;
  padding: 2px 0;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--mvb-anthrazit);
  text-decoration: none;
}

/* Hover/Fokus: nur Unterstreichung (kein Fett – vermeidet Layout-Springen);
   aktive Seite wie im Entwurf fett + gelb unterstrichen */
.themen-panel__link:focus-visible,
.themen-panel__link.ist-aktiv {
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .themen-panel__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--mvb-gelb);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

.themen-panel__link.ist-aktiv {
  font-weight: 700;
}

.themen-panel__link:focus-visible {
  outline-color: var(--mvb-anthrazit);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .themen-panel__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-top: var(--sp-2);
  }

  .site-header__inner {
    /* mobil wieder mittig und kompakt (kein Entwurfs-Beleg für <640px) */
    align-items: center;
    padding-bottom: var(--sp-2);
    min-height: 44px;
  }

  .site-header__logo {
    margin-bottom: 0;
  }

  .site-header__logo svg {
    height: 40px;
  }

  /* Die Sticky-Bildmarke bleibt kompakt – sie teilt sich die Klasse
     .site-header__logo, würde sonst hier auf 40px hochgezogen. */
  .sticky-nav__logo svg {
    height: 27px;
  }

  /* Sticky mobil flacher (Wunsch 01.10.): 48 + 40 = 88px statt 2 x 57px.
     Bei Änderung auch scroll-margin-top in base.css anpassen. */
  .sticky-nav__kopf {
    height: 48px;
  }

  .sticky-nav__balken {
    height: 40px;
  }

  .site-header__title {
    font-size: var(--fs-s);
  }

  .site-header__menu {
    display: grid;
  }

  /* Pille weicht mobil dem Burger – auch in der Sticky-Leiste, damit der
     Titel in der Mitte Platz hat (Abstimmung 23.09.2026) */
  .pill--nav {
    display: none;
  }

  .site-nav__crumb {
    font-size: var(--fs-s);
  }

  /* Panel bildschirmfüllend, eine Spalte */
  .themen-panel__inhalt {
    min-height: 100%;
  }

  .themen-panel__nav {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
  }
}


/* ===== hero.css ===== */
/* Hero-Bühne (partials/hero.html) + Blätterpfeile (partials/pfeile.html).
   Varianten: buehne (Bild + weiße Titelkarte), video (Standbild + Play-Verweis),
   schlicht (Bild, darunter zentrierter Titelbereich). Referenz: Handoff .hero */

.hero {
  position: relative;
}

/* ---- buehne / video: vollflächiges Medium hinter der Titelkarte ---- */

.hero--buehne {
  display: flex;
  align-items: flex-start;
  /* Design beispiel1: Hero endet an der Faltlinie des 900er-Viewports
     (Bild 1440x900, oben vom Header überdeckt) → 100svh minus
     Header-Höhe (120px Kopf + 57px Themenbalken = 177px). */
  min-height: calc(100vh - 177px);
  min-height: calc(100svh - 177px);
  overflow: hidden;
}

.hero__medien {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Echtes <img> statt CSS-Background (LCP); kein Overlay-Abdunkeln –
   Design beispiel1 (SVG/JSON) legt das Bild ohne Abdunklung an */
.hero__medien .hero__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Parallax (Abstimmung 23.09.2026): das Bild steht still, Titelkarte und
   Folgeinhalt scrollen darüber. Ohne JS: das Bild ist am Viewport fixiert,
   clip-path schneidet es auf die Hero-Fläche zu – sobald der Hero
   hinausgescrollt ist, ist es unsichtbar. Voraussetzung: kein Vorfahre mit
   transform/filter/contain (sonst wäre fixed nicht mehr viewport-bezogen).
   Nicht beim abspielbaren Video-Hero, nicht mobil (ein bildschirmhohes Bild
   im 40vh-Hero wäre zu stark beschnitten), nicht bei reduzierter Bewegung. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .hero--buehne:not([data-video]) {
    clip-path: inset(0);
  }

  /* Höhe = großer Viewport statt inset:0 – sonst wächst die Fläche, wenn
     Firefox (Android) beim Scrollen seine Leiste einklappt, und das Bild
     (object-fit: cover) springt neu skaliert an eine andere Stelle */
  .hero--buehne:not([data-video]) .hero__medien {
    position: fixed;
    bottom: auto;
    height: 100vh;
    height: 100lvh;
  }
}

.hero__flaeche {
  position: relative;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* Karte sitzt im oberen Hero-Drittel (Design: Kartenoberkante 126px
   unter dem Themenbalken, bündig mit den Blätterpfeilen) */
.hero--buehne:not(.hero--video) .hero__flaeche {
  padding-top: 126px;
}

/* Weiße Titelkarte, horizontal zentriert (Design beispiel1: Introkasten
   880px mittig, Innenabstand 32px, Schatten 0/4/4 25 %) */
.hero__karte {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-4);
  background: var(--weiss);
  box-shadow: 0 4px 4px var(--schatten-stark);
}

.hero__titel {
  font-size: var(--fs-h1);
  margin: 0 0 var(--sp-4);
}

/* *Hervorhebung* im Titel → Gelb (Design beispiel2/3: einzelne Wörter gelb) */
.hero__titel em {
  font-style: normal;
  color: var(--mvb-gelb);
}

.hero__intro {
  font-size: var(--fs-lead);
  line-height: 1.4; /* Design beispiel1/3: 28px Zeilenpitch bei 20px */
  margin: 0 0 var(--sp-2);
}

/* Entwurf final 508:3: die ganze Zeile ist Inter Bold 12px – auch das Label
   "Autorin:", nicht nur der verlinkte Name. */
.hero__autor {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: 0;
}

/* Autorenname: Anthrazit, unterstrichen in der Themenfarbe (Abstimmung
   23.09.2026; Kontrast Konzept §15.6). Nur ein Link, wenn es eine
   Ansprechpartner-Karte der Person gibt. */
.hero__autor-link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--thema);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .hero__autor-link:hover {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

.hero__autor-link:focus-visible {
  outline: 3px solid var(--thema);
  outline-offset: 2px;
}

/* ---- Variante video: Karte unten, zentrierter Play-Verweis ---- */

.hero--video {
  align-items: flex-end;
  min-height: 70vh;
}

.hero__play {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
}

.hero__play-kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--mvb-anthrazit);
  box-shadow: 0 4px 20px var(--schatten-stark);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.hero__play-kreis svg {
  width: 30px;
  height: 30px;
  margin-left: 3px; /* optischer Ausgleich des Play-Dreiecks */
}

.hero__play-text {
  font-weight: 700;
  font-size: var(--fs-s);
  color: var(--weiss);
  text-shadow: 0 1px 4px var(--schatten-stark);
}

@media (hover: hover) {
  .hero__play:hover .hero__play-kreis {
    background: var(--mvb-gelb);
    transform: scale(1.05);
  }
}

.hero__play:focus-visible {
  outline: 3px solid var(--mvb-gelb);
  outline-offset: 4px;
}

/* Abspielbarer Video-Hero (data-video): Video muss klickbar sein */
.hero--video[data-video] .hero__flaeche {
  pointer-events: none;
}

.hero--video[data-video] .hero__karte {
  pointer-events: auto;
}

/* ---- Variante bild (Design beispiel2, Vorwort): eingerücktes Bild
        1028x643 unter dem Balken, H1 darunter linksbündig in der Textspalte ---- */

.hero--bild {
  padding-top: var(--sp-6);   /* Design: ~51px zwischen Balken und Bild */
}

.hero__bild--eingerueckt,
.hero--bild .video-block__medium {
  width: 100%;
  aspect-ratio: 1028 / 643;
  object-fit: cover;
}

/* doppelte Klasse: gewinnt gegen das text-align:center der schlicht-Basis,
   die später in der Datei folgt */
.hero__kopf.hero__kopf--links {
  text-align: left;
}

/* kein geerbter schlicht-Abstand – der Abstand kommt aus .hero--bild padding.
   Doppelte Klasse: gewinnt gegen die spätere .hero__bildzeile-Regel (schlicht) */
.hero__bildzeile.hero__bildzeile--bild {
  margin-top: 0;
}

/* Video-Vorwort: die figure des Video-Bausteins ohne UA-Margins, damit es
   exakt dort steht, wo sonst das Bild steht */
.hero--bild .video-block {
  margin-top: 0;
  margin-bottom: 0;
}

.hero--bild .hero__titel {
  margin: 0;
}

/* ---- Variante schlicht (Design beispiel3): zentrierter Titelbereich,
        DARUNTER Bild in Seitenbreite (1240px) mit linksbündiger BU ---- */

.hero__bildzeile {
  position: relative;
  margin: var(--sp-6) auto 0;   /* Design: ~48px unter der Autorzeile */
}

/* Bildunterschrift zum Startbild: linksbündig an der Bildkante */
.hero__bu {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-text);
  color: var(--schwarz); /* Design beispiel3: BU in Schwarz */
}

/* Design: Startbild 1240x700 (Seitenbreite), Ausschnitt mittig */
.hero__bild--schlicht {
  width: 100%;
  height: auto;
  aspect-ratio: 1240 / 700;
  object-fit: cover;
}

.hero__kopf {
  padding-top: var(--sp-8);
  text-align: center;
}

.hero--schlicht .hero__titel {
  margin: 0 0 var(--sp-4);
}

/* hero.titel_ausblenden: kein Leerraum für die unsichtbare H1 */
.hero__kopf.hero__kopf--ohne-titel {
  padding-top: 0;
}

/* Hervorgehobener Teaser zwischen zwei feinen Linien (Design beispiel3:
   816px, 1px durchgezogen in Anthrazit) */
.hero__teaserkasten {
  border-top: 1px solid var(--mvb-anthrazit);
  border-bottom: 1px solid var(--mvb-anthrazit);
  padding: var(--sp-3) 0;
}

.hero__teaser {
  font-size: var(--fs-lead);
  line-height: 1.4; /* Design: 28px Zeilenpitch bei 20px */
  margin: 0;
}

/* Autorzeile steht im Design UNTER der unteren Linie */
.hero--schlicht .hero__autor {
  margin: var(--sp-3) 0 0;
}

/* ---- Blätterpfeile: gelbe Quadrate an den Viewporträndern ---- */

.pfeile__link {
  /* Am Viewport fixiert: die Pfeile scrollen nicht mit (Agentur-Vorgabe
     06.08.2026), stehen aber exakt auf der Entwurfshöhe – Entwurf final
     508:213/508:216: 50x50 an den Rändern, Oberkante y=303px im Frame.
     Bezugspunkt ist hier der Viewport, nicht mehr der Hero-Container:
     303px absolut = die früheren 126px unter dem 177px hohen Kopf
     (120px Kopfzeile + 57px Themenbalken).
     z-index bleibt unter Sticky-Nav (50) und Themen-Panel, damit beide
     die Pfeile überdecken. */
  position: fixed;
  top: 303px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  box-shadow: 0 4px 4px var(--schatten-stark);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pfeile__link--zurueck {
  left: 0;
}

.pfeile__link--weiter {
  right: 0;
}

.pfeile__link svg {
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .pfeile__link:hover {
    background-color: var(--mvb-anthrazit); /* nicht "background": setzte mobil den Zuschnitt (background-clip) zurück */
    color: var(--mvb-gelb);
  }
}

.pfeile__link:focus-visible {
  outline: 3px solid var(--mvb-anthrazit);
  outline-offset: 2px;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .hero__karte {
    padding: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .hero--buehne {
    align-items: center;
    min-height: 40vh;
  }

  .hero--video {
    align-items: flex-end;
    min-height: 55vh;
  }

  .hero__flaeche,
  .hero--buehne:not(.hero--video) .hero__flaeche {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  /* seitlich 16px: sonst passt "Wettbewerbsfähigkeit" bei 320–360px nicht
     ohne Umbruch mitten im Wort in die Karte */
  .hero__karte {
    padding: var(--sp-3) var(--sp-2);
  }

  .hero__intro,
  .hero__teaser {
    font-size: var(--fs-m);
  }

  .hero__play-kreis {
    width: 64px;
    height: 64px;
  }

  .hero__play-kreis svg {
    width: 22px;
    height: 22px;
  }

  .hero__kopf {
    padding-top: var(--sp-5);
  }

  /* Mobil (Agentur/Kunde 07.10.2026, vorher ausgeblendet): Randpfeile wie
     am Desktop, aber das sichtbare Quadrat nur ~2/3 so groß (34 statt 50px),
     damit es weniger Text verdeckt. Die Tippfläche bleibt 50x50: 16px
     transparenter Rand zur Bildschirmmitte und je 8px oben/unten, Gelb nur im
     Inhaltsbereich (background-clip), Schatten folgt per drop-shadow der
     sichtbaren Fläche. Höhe: sichtbare Oberkante = Titelkarte (165px, wie am
     Desktop), bleibt beim Scrollen unter der 88px-Sticky-Leiste. */
  .pfeile__link {
    top: 157px;
    padding: 8px 0;
    background-clip: content-box;
    box-shadow: none;
    filter: drop-shadow(0 3px 3px var(--schatten-stark));
  }

  .pfeile__link--zurueck {
    padding-right: 16px;
  }

  .pfeile__link--weiter {
    padding-left: 16px;
  }

  .pfeile__link svg {
    width: 14px;
    height: 14px;
  }
}


/* ===== infokasten.css ===== */
/* Infokasten (Konzept §5) – Handoff .info-box--blue / --facts.
   Gelber Versatz-Akzent lt. Design-Render/JSON: gleich großes gelbes Rechteck,
   um 10px nach rechts UND unten versetzt -> box-shadow, nicht border-right
   (das Handoff-CSS der Agentur weicht hier vom SVG-Render ab).
   Außenbreite: Wrapper .breite-breit im Template; Variante thema begrenzt sich
   zusätzlich auf die Textspalte (Design: Kasten = Textspaltenbreite 816/1440,
   Variante fakten füllt die breite Spalte 1028/1440). */

.info-box {
  /* Design infokasten-1: vertikal (342-282)/2 = 30px, horizontal 42px Ink ≈ 40px Box */
  padding: 30px var(--sp-5);
  box-shadow: var(--akzent-kante) var(--akzent-kante) 0 var(--mvb-gelb);
}

.info-box__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-l);
  line-height: var(--lh-titel-block);   /* Entwurf final 508:3: leading 1.5 */
}

/* ---- Variante thema: Fläche in Themenfarbe ---- */

.info-box--thema {
  /* Design: Kasten exakt so breit wie die Textspalte (816px im 1440er-Layout) */
  max-width: var(--content-width);
  margin-inline: auto;
  background: var(--thema);
  color: var(--thema-kontrast);
}

.info-box--thema .info-box__title {
  color: var(--thema-akzent);
}

.info-box__list {
  margin: 0;
  padding-left: var(--sp-3);
  font-size: var(--fs-text);
  line-height: var(--lh-kompakt);
}

.info-box__list li + li {
  margin-top: 20px;  
}

.info-box__list li::marker {
  color: var(--thema-akzent);
}

/* ---- Variante fakten: anthrazit, gelbe Akzente ---- */

.info-box--fakten {
  background: var(--mvb-anthrazit);
  color: var(--weiss);
  /* Design: Inhalt liegt auf der Textspalte -> seitlich (1028-816)/2 = 106px,
     bei uns (wide - content)/2 = 130px; 12.5% hält es unterhalb 1040px proportional.
     Vertikal aus dem Render vermessen: 56px oben, 68px unten. */
  padding: 56px min(calc((var(--wide-width) - var(--content-width)) / 2), 12.5%) 68px;
}

.info-box--fakten .info-box__title {
  color: var(--mvb-gelb);
  font-size: var(--fs-xl);      /* Design: Poppins 32px wie Zitat */
  margin-bottom: var(--sp-5);   /* Design: ~40px bis zum ersten Fakt */
}

.facts-list {
  display: grid;
  gap: 20px;   /* Design misst 20px – auf Wunsch der Redaktion enger */
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts-list li {
  min-width: 0;   /* Grid-Item: sonst wächst die Spalte aufs längste Wort */
  display: flex;
  gap: var(--sp-3);   /* Design: ~24px zwischen Chevron und Text */
  align-items: flex-start;
}

.facts-list__icon {
  flex-shrink: 0;
  margin-top: 2px;   /* optische Ausrichtung an der ersten Textzeile */
  color: var(--mvb-gelb);
}

.facts-list__icon svg {
  display: block;
  width: 21px;
  height: 23px;
}

.facts-list p {
  min-width: 0;   /* Flex-Item: sonst setzt das längste Wort/die URL die Breite */
  margin: 0;
  font-size: var(--fs-text);
  line-height: var(--lh-kompakt);
}

.facts-list strong {
  color: var(--mvb-gelb);
}

@media (max-width: 640px) {
  .info-box {
    padding: var(--sp-3);
  }

  .info-box--fakten {
    padding: var(--sp-3);
  }

  .info-box__title {
    font-size: var(--fs-lead);
  }
}


/* ===== kacheln.css ===== */
/* Bildkacheln auf Anthrazit (blocks/kacheln.html) – Figma 844:106 ff. "Gremien".
   Fläche über volle Breite: 93px über der ersten Kachel, 104px unter dem
   letzten Versatz. Kachel 286 breit, weiß, 10px Innenrand, Bild 266x183,
   gelber Versatz 10/10 (wie --akzent-kante am Infokasten). Titel Inter Bold
   16px/1.4 schwarz, zentriert, 17px unter dem Bild. Raster 4x286 + 3x32 = 1240,
   Zeilen im 313px-Takt -> 36px Zeilenabstand. */

.kacheln {
  background: var(--mvb-anthrazit);
  padding: 93px 0 104px;
}

.kacheln__raster {
  display: grid;
  grid-template-columns: repeat(var(--kacheln-spalten, 4), minmax(0, 1fr));
  gap: 36px 32px;
  margin: 0 auto;
  list-style: none;
}

.kachel {
  container-type: inline-size;   /* für die Titelgröße (.kachel__titel) */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  /* Versatz ragt wie im Entwurf in den Spaltenabstand */
  padding: 10px 10px 20px;
  background: var(--weiss);
  box-shadow: var(--akzent-kante) var(--akzent-kante) 0 var(--mvb-gelb);
  color: var(--schwarz);
  text-decoration: none;
}

.kachel__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 266 / 183;
  object-fit: cover;
}

.kachel__titel {
  margin-top: 17px;
  padding: 0 var(--sp-1);
  /* Schmale 4er-Kacheln (ca. 900–1100px, Tablet quer): Schrift schrumpft mit
     der Kachel, damit lange Wörter wie "Gebrauchsgüterausschuss" ohne
     Trennung hineinpassen (100cqi = Kachelbreite, 36px = Innenränder) */
  font-size: min(var(--fs-m), calc((100cqi - 36px) / 11.8));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* wie "jetzt lesen" der Startseiten-Teaser (start.css .teaser-karte__mehr) */
.kachel__mehr {
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--mvb-anthrazit);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a.kachel:focus-visible .kachel__mehr {
  text-decoration-thickness: var(--unterstrich-hover);
}

@media (hover: hover) {
  a.kachel:hover .kachel__mehr {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

a.kachel:focus-visible .kachel__titel {
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  a.kachel:hover .kachel__titel {
    text-decoration: underline;
    text-decoration-color: var(--mvb-gelb);
    text-decoration-thickness: 2px;
  }
}

@media (max-width: 900px) {
  .kacheln__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kacheln {
    padding: var(--sp-6) 0;
  }

  .kacheln__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  /* einspaltig: Versatz innerhalb der Spalte, sonst frisst er den Seitenrand */
  .kachel {
    width: calc(100% - var(--akzent-kante));
  }
}


/* ===== liste.css ===== */
/* Abschnittsliste (blocks/liste.html) – Design 646:713.
   Titel Poppins Bold 22px/1.2 (Design 666:938), Linie darunter über die volle
   Seitenbreite. Einträge: Name Inter Bold 16px/2, Zusatztext Inter 16px/1.5.

   .sektion-kopf / .sektion-titel nutzt auch blocks/logos.html – dort steht im
   Entwurf nur die Linie ohne Titel. */

.sektion-kopf {
  padding-bottom: 4px;   /* Design: Linie 4px unter der Titel-Unterkante */
  border-bottom: 1px solid var(--linie-stark);
}

.sektion-titel {
  margin: 0;
  max-width: var(--content-width);   /* Design: Titel auf Textspaltenbreite */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-l);
  line-height: var(--lh-titel);
}

.liste__eintraege {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Design: Eintragsraster 72px bei 52px Inhalt -> 20px Zeilenabstand */
  gap: 20px var(--sp-6);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--content-width);   /* Design: Einträge 816px breit */
}

/* Abstimmung 23.09.2026: auf breiten Screens zweispaltig. Drei Spalten
   ließen neben dem Porträt nur ~250px für die Firmenzeilen. */
@media (min-width: 900px) {
  .liste__eintraege {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

.liste__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-m);
  /* einzeilig 32px hoch wie im Entwurf (24 + 2×4); mehrzeilige Namen
     (mobil, z. B. Mitgliedschaften) bleiben eng zusammen statt im 32er-Takt */
  line-height: 1.5;
  padding: 4px 0;
}

.liste__text {
  font-size: var(--fs-m);
  line-height: 1.5;
}

.liste__text p {
  margin: 0;
}

/* Mehrere Absätze im Zusatztext (Leerzeile im YAML) sollen nicht verkleben */
.liste__text p + p {
  margin-top: 0.5em;
}

/* ---- Einträge mit Porträt (Präsidium, Weitere Vorstandsmitglieder) --------
   Design 792:246 / 792:351: Bild 100x100 bei x=100, gelber Versatz 10px nach
   rechts unten (Gruppe damit 110 breit), Text ab x=230 -> 20px Abstand.
   Zeilenraster 130px bei 110px Inhalt -> die 20px von .liste__eintrag stimmen
   schon. Der Text steht im Entwurf mittig zur Bildhöhe (je 29px Luft). */

.liste__eintrag--bild {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 110px;
}

.liste__figur {
  width: 100px;
  box-shadow: 10px 10px 0 var(--mvb-gelb);
}

.liste__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 480px) {
  /* Auf schmalen Displays bliebe neben dem Bild zu wenig für die Firmenzeile */
  .liste__eintrag--bild {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}


/* ===== logos.css ===== */
/* Logo-Raster der Förderkreis-Partner (blocks/logos.html) – Design 759:33.
   Kacheln 230x150 bei x=100/437/774/1111 und Zeilenraster 200px
   -> 107px Spalten-, 50px Zeilenabstand. Logos werden eingepasst, nicht
   beschnitten: unterschiedliche Seitenverhältnisse sind hier die Regel. */

/* Anders als bei "liste" steht der Titel hier mittig über der Linie
   (Design 759:128: "Wir danken unseren Partnern und Unterstützern:",
   Poppins Bold 22px, zentriert über der vollen Seitenbreite). */
.logos .sektion-titel {
  max-width: none;
  text-align: center;
  line-height: var(--lh-titel-block);
}

.logos__raster {
  display: grid;
  grid-template-columns: repeat(var(--logos-spalten, 4), minmax(0, 1fr));
  gap: 50px clamp(16px, 8.6%, 107px);   /* 107/1240 = 8.6%, siehe personen.css */
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.logos__zelle {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 230 / 150;
}

.logos__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logos__bild {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .logos__raster {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5) var(--sp-6);
  }
}

@media (max-width: 640px) {
  .logos__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
}


/* ===== personen.css ===== */
/* Ansprechpartner-Raster (blocks/personen.html) – Design 695:995, Karte 695:1042.
   Porträt 266x266 mit gelbem 20px-Versatz (gleiche Idee wie beim Infokasten,
   dort 10px). Schriftwerte direkt aus dem Entwurf:
   Name Inter Bold 20px/1.5 in MVB-Gelb, Rolle Inter Bold 16px/2,
   Telefon Inter 16px/2, Mail Inter 16px unterstrichen mit gelber Linie.
   Abstimmung 23.09.2026: drei Gruppen (Name | Position | Kontakt) – innerhalb
   einer Gruppe enger Zeilenabstand (auch bei Umbruch), Abstand nur zwischen
   den Gruppen; Name weiter weg vom Bild. */

.personen {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst setzt die Mindestbreite der langen
     Mailadresse die Spalte breiter als den Platz und das Raster läuft rechts raus. */
  grid-template-columns: repeat(var(--personen-spalten, 3), minmax(0, 1fr));
  /* Design: Spalten bei x=100/577/1054, Karte 286 breit -> 191px Spaltenabstand.
     Zeilenraster 507px bei 443px Karteninhalt -> 64px Zeilenabstand.
     Unter 1240px schrumpft zuerst der Spaltenabstand (bis 64px), die Karten
     behalten ihre 286px – so passen Positionen wie "Leiter Wettbewerbs- &
     Vertriebspolitik" auch auf kleineren Laptops in eine Zeile (Wunsch 30.09.). */
  row-gap: var(--sp-8);
  column-gap: clamp(var(--sp-8),
    calc((100% - var(--personen-spalten, 3) * 286px) / (var(--personen-spalten, 3) - 1)),
    191px);
}

.person__figur {
  /* Der Versatz zählt zur Kartenbreite: 266 Bild + 20 Versatz = 286 */
  width: calc(100% - 20px);
  /* 20px Versatz + Luft bis zum Namen (Design hatte 0 unter der Versatzkante) */
  margin-bottom: calc(20px + var(--sp-3));
  box-shadow: 20px 20px 0 var(--mvb-gelb);
}

/* Profil-Link auf dem Porträt (Kunde 07.10.2026: "mehr erfahren" unter der
   Mail sah aus wie die Mail). Etikett wie der Video-Badge (video.css). */
.person__profil {
  position: relative;
  display: block;
  color: var(--mvb-anthrazit);
  text-decoration: none;
}

.person__profil .person__mehr {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  max-width: calc(100% - 2 * var(--sp-2));
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--mvb-gelb);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.person__profil:focus-visible {
  outline: 3px solid var(--mvb-anthrazit);
  outline-offset: 3px;
}

.person__profil:focus-visible .person__mehr {
  background: var(--weiss);
}

@media (hover: hover) {
  .person__profil:hover .person__mehr {
    background: var(--weiss);
  }
}

.person__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.person__name {
  margin: 0 0 var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-text);
  line-height: 1.3;
  color: var(--mvb-gelb);
}

.person__rolle {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.4;
}

.person__zeile {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.6;
  /* Mailadressen brechen bevorzugt vor dem @ um (<wbr> in personen.html);
     anywhere bleibt nur Notnagel, falls ein Teil allein nicht passt */
  overflow-wrap: anywhere;
}

.person__zeile a {
  color: inherit;
  text-decoration: none;
}

/* Nur die Linie einschalten, nicht die Kurzform "text-decoration": die
   setzte die Linienfarbe zurück und machte den gelben Mail-Unterstrich beim
   Hover schwarz (diese Regel ist spezifischer als .person__mail). */
.person__zeile a:focus-visible {
  text-decoration-line: underline;
}

@media (hover: hover) {
  .person__zeile a:hover {
    text-decoration-line: underline;
  }
}

/* Muss spezifischer sein als ".person__zeile a" darüber, sonst gewinnt dort
   text-decoration: none und die Mail bliebe entgegen dem Entwurf ohne Linie.
   Hover: Unterstrich kräftiger (--unterstrich-hover), wie "jetzt lesen". */
.person__zeile .person__mail {
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Mailadresse und Position dürfen bis 48px in den freien Platz rechts daneben
   laufen, statt umzubrechen (Wunsch 30.09.). "Assistentin External Affairs /
   Büro Brüssel" bleibt so einzeilig, "Geschäftsführer Mitgliederservice &
   Verbandsentwicklung" bricht um. Zwischen den Spalten bleiben mind. 16px frei
   (Spaltenabstand mind. 64px). Rechte Spalte: --luft-rand = Seiten- plus
   Außenrand bis --rand-frei vor den Fensterrand (8px, neben den Blätterpfeilen
   58px, layout.css).
   Fensterbreite nicht per 100vw: das zählt den Scrollbalken je nach System mit
   (klassisch ~15px) oder nicht (Overlay, Windows 11) – sondern als Breite des
   Artikels (Container). Registrierte Länge: wird an .personen in px berechnet,
   dort bezieht sich 100cqi noch auf .artikel; in .person dann auf .personen. */
@property --artikelbreite {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.artikel:has(> .personen),
.personen {
  container-type: inline-size;
}

.personen {
  --artikelbreite: 100cqi;
}

.person {
  --luft-rand: max(0px, min(var(--sp-6), calc((var(--artikelbreite) - 100cqi) / 2 - var(--rand-frei, 8px))));
  --luft-rechts: var(--sp-6);
}

.person--rechts {
  --luft-rechts: var(--luft-rand);
}

.person__zeile--mail,
.person__rolle {
  margin-right: calc(-1 * var(--luft-rechts));
}

/* Externer Kontakt-Link (personen-Eintrag link) als eigene Zeile unter den Kontaktdaten */
.person__zeile--extern {
  margin-top: var(--sp-2);
}

/* "mehr erfahren" hebt sich von der Mail ab (Kunde 07.10.2026): klein und
   fett wie "mehr erfahren" der Kacheln (kacheln.css .kachel__mehr) */
.person__zeile .person__mehr {
  color: var(--mvb-anthrazit);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.person__zeile .person__mail:focus-visible,
.person__zeile .person__mehr:focus-visible {
  text-decoration-thickness: var(--unterstrich-hover);
}

@media (hover: hover) {
  .person__zeile .person__mail:hover,
  .person__zeile .person__mehr:hover {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

@media (max-width: 900px) {
  .personen {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6) var(--sp-6);
  }

  /* zwei Spalten, 48px Abstand: nur halb hineinlaufen */
  .person,
  .person--rechts {
    --luft-rechts: var(--sp-3);
  }

  .person:nth-child(2n) {
    --luft-rechts: var(--luft-rand);
  }
}

@media (max-width: 640px) {
  .personen {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* eine Spalte: kein Überhang bis an den Bildschirmrand */
  .person,
  .person--rechts,
  .person:nth-child(2n) {
    --luft-rechts: 0px;
  }
}


/* ===== podcast.css ===== */
/* Podcast-Baustein (Handoff .podcast-card + PDF):
   heller Hintergrundstreifen über volle Breite, darauf weiße Karte
   (Grid: 200px Cover | Body). Player-Logik: js/audio-player.js */

.podcast {
  background: var(--flaeche-hell);
  padding: var(--sp-5) 0; /* Streifen 280px: 40 + Karte 200 + 40 (SVG-Rendering) */
}

.podcast-card {
  display: grid;
  /* minmax(0, …): sonst hält der längste Titel die Karte breiter als das
     Handy (Überbreite bei 320px) */
  grid-template-columns: 200px minmax(0, 1fr);
  background: var(--weiss);
  box-shadow: 4px 4px 10px var(--schatten-stark); /* JSON: 4/4/10 rgba(0,0,0,0.25) */
}

.podcast-card--ohne-cover {
  grid-template-columns: minmax(0, 1fr);
}

.podcast-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-card__body {
  padding: 20px 22px 20px 20px; /* gemessen im SVG-Rendering (21/22/22/20) */
}

/* Kopfzeile: Badge + Dauer-Angabe nebeneinander (SVG-Rendering: Dauer
   sitzt 12px rechts vom Badge, vertikal zentriert – nicht rechts oben) */
.podcast-card__kopf {
  display: flex;
  align-items: center;
  gap: 9px; /* ergibt gemessen 11px Kante-zu-Glyphe wie im SVG-Rendering */
}

/* Gelber Pill-Badge mit Kopfhörer-Icon (Design: 93x26, Text 12/700) */
.podcast-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 14px 0 10px;
  border-radius: var(--radius);
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.podcast-card__badge svg {
  width: 13px;
  height: 13px;
}

.podcast-card__length {
  font-size: var(--fs-xs);
  opacity: 0.5;
}

.podcast-card__title {
  margin: 15px 0 4px;
  font-family: var(--font-body); /* Design/Handoff: Inter 20 Bold, nicht Poppins */
  font-weight: 700;
  font-size: var(--fs-lead);
}

.podcast-card__guest {
  margin: 0 0 10px;
  font-size: var(--fs-m);
  opacity: 0.5;
}

/* Gastname (*kursiv* im YAML) wie im Entwurf unterstrichen statt kursiv */
.podcast-card__guest em {
  font-style: normal;
  text-decoration: underline;
}

/* ---- Player-Zeile --------------------------------------------------- */

/* Fallback ohne JS: natives Audio-Element mit Browser-Controls */
.podcast-card__audio {
  width: 100%;
}

.podcast-card__audio[hidden] {
  display: none;
}

.podcast-card__steuerung {
  display: flex;
  align-items: center;
  gap: 20px; /* SVG-Rendering: ~21px zwischen Play, Zeiten und Balken */
}

.podcast-card__steuerung[hidden] {
  display: none;
}

.podcast-card__play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px; /* Design: Ellipse 55x55 */
  height: 55px;
  border-radius: 50%;
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.podcast-card__play:focus-visible {
  background: var(--mvb-anthrazit);
  color: var(--mvb-gelb);
}

@media (hover: hover) {
  .podcast-card__play:hover {
    background: var(--mvb-anthrazit);
    color: var(--mvb-gelb);
  }
}

.podcast-card__play svg {
  width: 16px;
  height: 16px;
}

.podcast-card__icon {
  display: inline-flex;
}

.podcast-card__icon--pause {
  display: none;
}

.podcast-card__player.is-playing .podcast-card__icon--play {
  display: none;
}

.podcast-card__player.is-playing .podcast-card__icon--pause {
  display: inline-flex;
}

.podcast-card__time {
  flex: none;
  min-width: 26px; /* Design: "4:47" = 26px breit */
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}

.podcast-card__time[data-zeit-gesamt] {
  text-align: right;
}

/* Fortschritt als range-Input: gelber Fortschritt, grauer Rest.
   --fortschritt (0–100%) setzt js/audio-player.js. */
.podcast-card__progress {
  --fortschritt: 0%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* WebKit/Blink */
.podcast-card__progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--mvb-gelb) var(--fortschritt),
    var(--linie-stark) var(--fortschritt)
  );
}

.podcast-card__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px; /* Design: Ellipse 9x9 */
  height: 9px;
  margin-top: -2.5px; /* (Track 4px − Thumb 9px) / 2 */
  border: 0;
  border-radius: 50%;
  background: var(--mvb-gelb);
  transition: transform 0.15s ease;
}

.podcast-card__progress:focus-visible::-webkit-slider-thumb {
  transform: scale(1.35);
}

@media (hover: hover) {
  .podcast-card__progress:hover::-webkit-slider-thumb {
    transform: scale(1.35);
  }
}

/* Firefox */
.podcast-card__progress::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--linie-stark);
}

.podcast-card__progress::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--mvb-gelb);
}

.podcast-card__progress::-moz-range-thumb {
  width: 9px; /* Design: Ellipse 9x9 */
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--mvb-gelb);
  transition: transform 0.15s ease;
}

.podcast-card__progress:focus-visible::-moz-range-thumb {
  transform: scale(1.35);
}

@media (hover: hover) {
  .podcast-card__progress:hover::-moz-range-thumb {
    transform: scale(1.35);
  }
}

.podcast-card__progress:focus-visible {
  outline: 3px solid var(--mvb-gelb);
  outline-offset: 2px;
}

/* Schmal: Cover weglassen statt es in voller Breite über den Player zu
   stellen (Wunsch Agentur 30.09.) */
@media (max-width: 900px) {
  .podcast-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .podcast-card__cover {
    display: none;
  }
}

@media (max-width: 640px) {
  .podcast {
    padding: var(--sp-4) 0;
  }
}


/* ===== prose.css ===== */
/* Fließtext-Bausteine: absatz (.prose) + zwischenueberschrift (.content-block__title).
   Breite und Blockabstand kommen aus layout.css (.breite-text, .artikel). */

.prose {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.prose p {
  /* Absatzabstand = eine Leerzeile (Design Beispiel 1: 60px Baseline-Abstand
     über die Absatzgrenze = 2 x Zeilenhöhe 30px). Em-basiert, damit der Wert
     bei einer Korrektur von --fs-text automatisch mitwächst. */
  margin: 0 0 calc(var(--lh-text) * 1em);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .prose a:hover {
    color: var(--thema);
  }
}

.prose a:focus-visible {
  color: var(--thema);
}

/* Initialbuchstabe (block.initial) – nur per ::first-letter, kein extra Span (Konzept §5) */
.prose--initial > p:first-child::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-initial);
  line-height: 0.8;
  color: var(--thema);
  /* Pixelgenau am Design vermessen (beispiel1, 21.07.):
     - margin-left -6px: kompensiert die linke Vorbreite der Poppins-Glyphe,
       damit die M-Tinte bündig mit der Textkante der vollen Zeilen steht
     - padding-right 14px: hält den Text-Einzug bei 104px (Design: 819-715)
     - margin-top 5px: M-Oberkante bündig mit der Versalhöhe von Zeile 1 */
  margin-left: -6px;
  margin-top: 5px;
  padding-right: 14px;
}

/* Zwischenüberschrift: h2 in Themenfarbe (Handoff .content-block__title) */
.content-block__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-l);   /* Design: Poppins 22px (Review 21.07.) */
  line-height: var(--lh-titel-block);   /* Entwurf final 508:3: leading 1.5 */
  color: var(--thema);
  /* Bewusst KEINE margin-Angaben: ein Shorthand würde die auto-Zentrierung
     von .breite-text kippen, margin-top: 0 den Block-Rhythmus
     (.artikel > * + *, layout.css) überstimmen. Den Basis-Reset liefert
     base.css (h1,h2,h3) auf Element-Ebene. */
}

/* ausrichtung: zentriert (Abstimmung 23.09.2026) */
.content-block__title--zentriert {
  text-align: center;
}

/* Eigene Größe (groesse: im Baustein, als --titel-groesse gesetzt). Mobil
   höchstens so groß wie eine normale Zwischenüberschrift, sonst bricht ein
   langes Wort ("Gebrauchsgüterausschuss" bei 30px) mitten im Wort um. */
.content-block__title--groesse {
  font-size: var(--titel-groesse);
}

@media (max-width: 640px) {
  .content-block__title--groesse {
    font-size: min(var(--titel-groesse), var(--fs-l));
  }
}

/* Abstand Überschrift -> Folge-Copy: KEIN Override. Gemessen im Design
   (beispiel1.png): 60px Baseline-Abstand = exakt der Standard-Blockrhythmus
   32px (.artikel > * + *, layout.css). Der frühere Handoff-Wert 16px
   (.content-block: margin 16px) war zu eng. */


/* ===== related.css ===== */
/* "Das könnte Sie auch interessieren" – dunkle Sektion mit 4 Teaser-Karten
   (Handoff .related / .related-card). Ganze Karte klickbar (Link-Overlay).
   Maße aus design/beispiel1.json + Rendering: Sektion 520 hoch bei
   2-zeiligen Teasern (Padding 54/44), Karten 286 breit, Spalte 32,
   Bild 286x196, Label-Linie 1px über volle Kartenbreite. */

.related {
  background: var(--mvb-anthrazit);
  color: var(--weiss);
  padding: 54px 0 44px;
}

.related__title {
  margin: 0 0 46px;
  font-size: var(--fs-l);
  line-height: var(--lh-titel-sektion);   /* Entwurf final 508:3: leading 1.4 */
  color: var(--mvb-gelb);
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;                    /* Design: 4x286 + 3x32 = 1240 */
}

.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.related-card__bild {
  width: 100%;
  aspect-ratio: 286 / 196;
  object-fit: cover;
  margin-bottom: var(--sp-3);   /* Design: Bild -> Label 24px */
}

/* Ersatzfläche, wenn kein Teaser-Bild vorliegt – Farbe des Karten-Themas
   (data-thema an der Karte, siehe tokens.css) */
.related-card__flaeche {
  width: 100%;
  aspect-ratio: 286 / 196;
  margin-bottom: var(--sp-3);
  background: var(--thema);
  border-bottom: 4px solid var(--thema-akzent);
}

.related-card__tag {
  width: 100%;                  /* Linie über volle Kartenbreite (Design vector-5) */
  margin: 0 0 20px;
  padding-bottom: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--weiss);
  border-bottom: 1px solid var(--weiss);
}

.related-card__text {
  flex: 1;
  margin: 0 0 20px;
  font-size: var(--fs-m);
  /* Design: 2-3 Teaser-Zeilen (Sektion 520px) – lange Teaser kappen */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Design: Grundzustand Weiß 40% (#878C8F auf Anthrazit), keine Unterstreichung;
   Gelb als Hervorhebung (Karte 1 im Design = Hover) */
.related-card__link {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--weiss);
  opacity: 0.4;
  text-decoration: none;
}

/* Link-Overlay: macht die ganze Karte klickbar */
.related-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.related-card__link:focus-visible {
  color: var(--mvb-gelb);
  opacity: 1;
}

@media (hover: hover) {
  .related-card:hover .related-card__link,
  .related-card__link:hover {
    color: var(--mvb-gelb);
    opacity: 1;
  }
}

/* Fokusrahmen um die gesamte Karte statt nur um den Linktext */
.related-card__link:focus-visible {
  outline: none;
}

.related-card__link:focus-visible::after {
  outline: 3px solid var(--mvb-gelb);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .related {
    padding: var(--sp-6) 0;
  }

  .related__grid {
    grid-template-columns: 1fr;
  }
}


/* ===== start.css ===== */
/* Startseite: vollflaechiger Hero + Teaser-Kacheln nach Rubrik (Konzept §5, start.html) */

/* ---- Hero: Hintergrundbild bildschirmfuellend, ruhige Darstellung ---- */
.start-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--sp-8) 0 calc(var(--sp-8) + var(--sp-6));
}

.start-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Weiße Titelkachel, Entwurf 545:535: 400px breit, alles zentriert.
   Kein Schleier über dem Bild – die weißen Flächen des Motivs bleiben weiß. */
.start-hero__karte {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * var(--gutter));
  max-width: 400px;
  background: var(--weiss);
  padding: 36px var(--sp-5) var(--sp-4); /* Entwurf: 36px über der Titelzeile */
  box-shadow: 0 4px 20px var(--schatten);
  text-align: center;
}

/* Titel: Poppins 50px, Zeilen im 50px-Takt; *Wort* = gelb */
.start-hero__titel {
  font-size: var(--fs-h1);
  line-height: 1;
  margin: 0;
}

.start-hero__titel em,
.start-hero__intro em {
  font-style: normal;
  color: var(--mvb-gelb);
}

/* Linie im Entwurf: 154 x 2px */
.start-hero__linie {
  width: 154px;
  border-top: 2px solid var(--linie-dunkel);
  margin: var(--sp-4) auto var(--sp-3);
}

.start-hero__intro {
  font-size: var(--fs-start-intro);
  line-height: 1.16; /* Entwurf: 29px Zeilenabstand */
  margin: 0;
}

/* *2026/27* im Intro: eigene Zeile, fett */
.start-hero__intro em {
  display: block;
  margin-top: var(--sp-1);
  font-weight: 700;
}

/* "jetzt lesen" mittig, breiter als der Standard-Button (Entwurf 165px) */
.start-hero__aktion {
  margin: var(--sp-4) 0 0;
}

.start-hero__aktion .btn {
  padding-inline: var(--sp-5);
}

/* Parallax wie die Hero-Bühne (hero.css): das Bild steht, die Seite scrollt
   darüber; clip-path begrenzt das fixierte Bild auf die Hero-Fläche.
   Nur ab Tablet und ohne reduzierte Bewegung. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .start-hero {
    clip-path: inset(0);
  }

  /* feste Höhe wie hero.css: kein Springen beim Einklappen der Browserleiste */
  .start-hero__bild {
    position: fixed;
    bottom: auto;
    height: 100vh;
    height: 100lvh;
  }
}

/* Scroll-Hinweis: Anker zu den Themen */
.start-hero__hinweis {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--mvb-anthrazit);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px var(--schatten);
  transition: background-color 0.2s ease;
}

.start-hero__hinweis:focus-visible {
  background: var(--mvb-gelb);
}

@media (hover: hover) {
  .start-hero__hinweis:hover {
    background: var(--mvb-gelb);
  }
}

.start-hero__hinweis-icon {
  display: grid;
  place-items: center;
}

.start-hero__hinweis-icon svg {
  width: 20px;
  height: 20px;
}

/* ---- Teaser-Bereich: pro Rubrik eine Zeile mit Karten-Grid ---- */
.start-teaser {
  padding: var(--sp-8) 0;
  scroll-margin-top: var(--sp-6);
}

.start-teaser__rubrik + .start-teaser__rubrik {
  margin-top: var(--sp-8);
}

.start-teaser__rubrikname {
  font-size: var(--fs-l);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linie);
  margin: 0 0 var(--sp-4);
}

.start-teaser__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-3);
}

/* ---- Teaser-Karte (eigenstaendig, ganze Karte klickbar) ---- */
.teaser-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--mvb-anthrazit);
}

.teaser-karte__bild,
.teaser-karte__flaeche {
  display: block;
  width: 100%;
  aspect-ratio: 286 / 196;
  object-fit: cover;
}

/* Ersatzflaeche, wenn kein Teaser-Bild gepflegt ist (Themenfarbe via data-thema) */
.teaser-karte__flaeche {
  background: var(--thema);
}

.teaser-karte__thema {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: var(--sp-2);
}

.teaser-karte__thema::before {
  content: "";
  display: block;
  width: 24px;
  height: 4px;
  background: var(--thema);
  margin-bottom: var(--sp-1);
}

.teaser-karte__titel {
  display: block;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: var(--lh-titel);
  margin-top: var(--sp-1);
}

.teaser-karte__text {
  display: block;
  font-size: var(--fs-s);
  margin-top: var(--sp-1);
}

/* Anthrazit mit gelber Unterstreichung (Kontrast, vgl. Konzept §15.6).
   Hover: kräftigerer Unterstrich (--unterstrich-hover) statt gelber Fläche,
   wie beim Autorenlink im Hero. */
.teaser-karte__mehr {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.teaser-karte:focus-visible .teaser-karte__mehr {
  text-decoration-thickness: var(--unterstrich-hover);
}

@media (hover: hover) {
  .teaser-karte:hover .teaser-karte__mehr {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

.teaser-karte:focus-visible .teaser-karte__titel {
  text-decoration: underline;
  text-decoration-color: var(--mvb-gelb);
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  .teaser-karte:hover .teaser-karte__titel {
    text-decoration: underline;
    text-decoration-color: var(--mvb-gelb);
    text-decoration-thickness: 2px;
  }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .start-teaser__liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .start-hero {
    padding: var(--sp-6) 0 calc(var(--sp-6) + var(--sp-6));
  }

  .start-hero__karte {
    padding: var(--sp-3);
  }

  .start-hero__hinweis {
    bottom: var(--sp-3);
    width: 40px;
    height: 40px;
  }

  .start-teaser {
    padding: var(--sp-6) 0;
  }

  .start-teaser__rubrik + .start-teaser__rubrik {
    margin-top: var(--sp-6);
  }

  .start-teaser__liste {
    grid-template-columns: 1fr;
  }
}


/* ===== text-bild.css ===== */
/* Baustein "text_bild": zwei Spalten, Text + halbspaltiges Bild.
   Bildseite über den Modifier, mobil untereinander (Text zuerst). */

.text-bild {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.text-bild--bild-links .text-bild__figur { order: -1; }

.text-bild__figur { margin: 0; }

.text-bild__bild {
  width: 100%;
  height: auto;
}

/* Hochformat (Klasse aus build.py): in der halben Spalte würde ein 2:3-Foto
   sonst rund 750px hoch und der Textblock daneben stünde verloren oben. */
.text-bild__bild.ist-hochformat {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin-inline: 0;   /* linksbündig, damit die BU darunter passt */
}

.text-bild__bu {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-text);
  opacity: 0.75;
}

@media (max-width: 900px) {
  .text-bild {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  /* mobil immer Text zuerst */
  .text-bild--bild-links .text-bild__figur { order: 0; }
}


/* ===== video.css ===== */
/* Video-Baustein (Handoff .video-block, Konzept §5).
   Breite/Zentrierung kommt von .breite-breit (layout.css). */

.video-block {
  position: relative;
}

/* Innenfläche: Bezugsrahmen für Badge/Play/Overlay (ohne Gutter-Padding).
   Design (beispiel1: video 1028x523): Standbild füllt den Block randlos –
   kein dunkler Rahmen, keine Letterbox-Balken. */
.video-block__flaeche {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

/* Selbst gehostetes Video: Poster-/Videoformat bestimmt die Blockhöhe
   (kein erzwungenes 16:9 mit contain – das erzeugte dunkle Balken). */
.video-block__medium {
  display: block;
  width: 100%;
  height: auto;
}

/* Hochformat-Video (Klasse + --bild-breite/--bild-ar aus blocks/video.html,
   erkannt am Standbild): wie Hochformatbilder in bild.css über die Höhe
   begrenzen (80vh) und mittig stellen, statt es auf 1028px Breite zu ziehen. */
.video-block.ist-hochformat .video-block__flaeche {
  width: min(var(--bild-breite), calc(80vh * var(--bild-ar)));
  max-width: 100%;
  margin-inline: auto;
}

/* Standbild (YouTube-Modus): natives Bildformat wie im Design */
.video-block__still {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay über dem nativen Video (nur mit JS sichtbar) */
.video-block__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-block__overlay[hidden] {
  display: none;
}

/* Gelber Pill-Badge oben links (Design: 83x26 px, Offset 30/30 vom Blockrand,
   Inter 12 bold, Kamera-Icon 17x12 inkl. Kontur) */
.video-block__badge {
  position: absolute;
  top: 30px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.video-block__badge svg {
  width: 17px;
  height: 12px;
}

/* Zentrierter runder Play-Button (Button bzw. Link, je nach Modus) */
.video-block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mvb-gelb);
  color: var(--mvb-anthrazit);
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); /* Design-JSON: shadow 0/4/4, 25 % */
  pointer-events: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-block__play svg {
  width: 35px; /* Design-Vektor: 32x33 + 2 px Kontur (viewBox 35x35, 1:1) */
  height: 35px;
  margin-left: 10px; /* Dreieck sitzt im Design ~4,5 px rechts der Kreismitte */
}

@media (hover: hover) {
  .video-block__play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 6px 14px var(--schatten-stark);
  }
}

.video-block__play:focus-visible {
  outline: 3px solid var(--weiss);
  outline-offset: 3px;
  box-shadow: 0 6px 14px var(--schatten-stark);
}

/* Play erst bei Hover über dem Video bzw. Tastaturfokus (Abstimmung
   23.09.2026: der Button verdeckte Gesichter). Der Video-Badge bleibt.
   Auf Touch (kein Hover) bleibt er ganz unsichtbar (Agentur 07.10.2026) –
   dort startet ein Tipp aufs Standbild das Video (js/video.js). */
.video-block__play {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.video-block__play:focus-visible {
  opacity: 1;
}

@media (hover: hover) {
  .video-block__flaeche:hover .video-block__play {
    opacity: 1;
  }
}

/* Vor dem Start ist die ganze Fläche klickbar */
.video-block__flaeche:has(.video-block__overlay:not([hidden])) {
  cursor: pointer;
}

/* YouTube-iframe (wird per JS eingesetzt) */
.video-block__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* DSGVO-Hinweis unter der Fläche (nur YouTube-Modus) */
.video-block__hinweis {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

@media (max-width: 640px) {
  .video-block__badge {
    top: var(--sp-1);
    left: var(--sp-1);
  }

  .video-block__play {
    width: 64px;
    height: 64px;
  }

  .video-block__play svg {
    width: 22px;
    height: 22px;
    margin-left: 6px;
  }
}


/* ===== zitat.css ===== */
/* Zitat-Baustein (blocks/zitat, Handoff .pull-quote) */

.pull-quote {
  margin-top: 0;      /* neutralisiert UA-Default; Rhythmus regelt layout.css */
  margin-bottom: 0;
}

/* Anführungszeichen 64x58: Anthrazit 15 % (Design-Messung #E1E3E3 auf Weiß),
   ragt 10px links vor die Textkante (Design-JSON: Gruppe = Text + 10px) und
   hinter die erste Zeile (Design: Cap-Oberkante Zeile 1 = Mark-Top + 36px,
   d. h. Textbox überlappt das Zeichen um ~32px) */
.pull-quote__mark {
  display: block;
  width: var(--sp-8);
  margin-left: -10px;
  margin-bottom: -32px;
  color: var(--linie);
}

.pull-quote__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.pull-quote__text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-zitat);
  line-height: 1.3125; /* Design: 42px Zeilenabstand bei 32px (gemessen, 3 Instanzen) */
  margin: 0;
  text-wrap: pretty;   /* wie Überschriften: kein Einzelwort in der letzten Zeile */
}

/* *Hervorhebung* aus Markdown → Themenfarbe, nicht kursiv */
.pull-quote__text em {
  font-style: normal;
  color: var(--thema);
}

/* Design-Rendering zeigt KEINE Trennlinie zwischen Text und Autorenzeile –
   die kurze gelbe Linie (96-98px, 2px) ist die Namens-Unterstreichung.
   Handoff-HTML enthielt fälschlich .rule--short (dort dunkel, im Widerspruch
   zu SVG/JSON). Template rendert die Linie noch → hier ausgeblendet. */
.pull-quote .rule--kurz {
  display: none;
}

.pull-quote__author {
  font-size: var(--fs-xs);
  margin: var(--sp-3) 0 0; /* Design: ~24px Abstand Textblock → Autorenzeile */
}

/* Name anthrazit, unterstrichen (Kontrast-Empfehlung, Konzept §15).
   Design-Messung: 2px stark, ~3px unter der Schrift, Länge = Namensbreite.
   Farbe = Themenfarbe wie beim Hero-Autor (Abstimmung 24.09.2026, vorher gelb). */
.pull-quote__name {
  text-decoration: underline;
  text-decoration-color: var(--thema);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Verlinkter Name (Person auf der Ansprechpartner-Seite): Optik bleibt,
   Hover/Fokus fetter Unterstrich wie bei den anderen Personen-Links.
   Nur der Link unterstreicht – Safari übernimmt bei "text-decoration:
   inherit" nur die Linienart, nicht die Farbe, und zeichnete eine zweite,
   dunkle Linie unter die des Namens. */
.pull-quote__name:has(.pull-quote__link) {
  text-decoration: none;
}

.pull-quote__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--thema);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pull-quote__link:focus-visible {
  text-decoration-thickness: var(--unterstrich-hover);
}

@media (hover: hover) {
  .pull-quote__link:hover {
    text-decoration-thickness: var(--unterstrich-hover);
  }
}

@media (max-width: 640px) {
  .pull-quote__mark {
    width: var(--sp-6);
    margin-bottom: -24px; /* proportional zum kleineren Zeichen (48px) */
  }
}