/* =============================================================================
   CDU Selm – Designsystem
   Quelle: docs/cdu-selm-designsystem.html (abgenommene Vorgabe).

   design.css und main.css werden NIE auf derselben Seite geladen. Es gibt
   Klassennamen, die in beiden vorkommen (.btn und weitere); welches
   Stylesheet eine Ansicht bekommt, entscheidet views/layout/head.php anhand
   von $useDesignCss. Standard ist bis auf Weiteres main.css.

   Diese Datei ist die gemeinsame Quelle fuer die oeffentliche Website UND den
   internen Bereich (verschiedene Domains). Sie wird beim Deployment auf beide
   Hosts kopiert; Domain-spezifisches gehoert in eigene, kleine Dateien
   DARUEBER – Tokens werden nicht dupliziert, das driftet auseinander.

   Grundregeln (siehe docs/UMSETZUNG-STAND.md):
     - Eckenradius 0, als Token --r an genau einer Stelle.
     - Akzent ist nie Text: Cadenabbia 2,2:1, Gold 3,0:1 – beides faellt bei
       normalem Text durch WCAG AA. Der Akzent ist Bogen, Balken, Unterlaenge
       oder Flaeche; Text steht immer in Rhoendorf.
     - Hover fuegt hinzu, nimmt nie weg. Fliesstextlinks sind kursiv im
       Ruhezustand (Merkmal unabhaengig von Farbe, WCAG 1.4.1), die Linie
       laeuft beim Ueberfahren ein.
     - Glas nur ueber Foto oder Video, nie ueber einfarbigem Grund.
     - Markentoenung nur im CSS (--foto-ton), nie ins Bild eingebrannt.
     - Fokusringe bleiben. Kein Dunkelmodus (color-scheme: light), die
       Token-Struktur bleibt aber nachruestbar.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SCHRIFTEN
   Uebernommen aus main.css: dieselben lokalen Dateien, aber mit unicode-range
   und ohne local() – ein beim Besucher installiertes „Inter" muss nicht die
   Variable Font sein.
   ----------------------------------------------------------------------------- */

/* Schrift laden: Inter Variable Font (wght 100-900) aus /assets/fonts/ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fließtext-Schrift: IBM Plex Serif (lokal, DSGVO-konform – kein Google-CDN).
   Dateien liegen unter /assets/fonts/ mit den Original-IBM-Dateinamen.
   Geladen wird nur, was die Copy real braucht: Regular (Fließtext),
   Bold (<strong>/Fett), Kursiv + Fett-Kursiv (<em>, Zitate, Fett-Kursiv im
   Artikel-HTML). Der SemiBold-Schnitt (600) ist entfernt: kein Serif-Element
   nutzt Gewicht 600 (alle 600er-Stellen laufen ueber Inter/--font-base). */
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/IBMPlexSerif-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/IBMPlexSerif-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/IBMPlexSerif-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/IBMPlexSerif-BoldItalic.woff2') format('woff2');
}

/* -----------------------------------------------------------------------------
   TOKENS, GRUNDLAGEN, TYPOGRAFIE, KLEINTEILE, SEKTIONEN, BEITRAEGE, PERSONEN,
   LISTE
   ----------------------------------------------------------------------------- */
:root{
  color-scheme:light;
  --rhoendorf:#2d3c4b; --cadenabbia:#52b7c1; --gold:#ffa600;
  --grund:#ffffff; --grund-alt:#f5f7f8;
  --linie:rgba(45,60,75,.13); --linie-stark:rgba(45,60,75,.32);
  --ink:#2d3c4b;
  /* Gedaempfter Text (Runde 10/P27).
     Der fruehere Wert #66757f war gegen WEISS geprueft: 4,75:1, bestanden.
     Gegen den abwechselnden Sektionshintergrund --grund-alt (#f5f7f8) sind es
     aber nur 4,42:1 – knapp unter den 4,5:1, die WCAG AA fuer normalen Text
     verlangt. Als es die zweite Hintergrundvariante noch nicht gab, war der
     Wert also korrekt; mit ihr wurde er es stillschweigend nicht mehr. Genau
     das meldete PageSpeed fuer die Datums-Labels der Termine, die
     „x von y"-Zaehler und die Antrags-Art.
     Der neue Wert haelt BEIDE Hintergruende aus – 4,97:1 auf --grund-alt und
     5,34:1 auf Weiss. Deshalb steht die Korrektur hier am Token und nicht als
     Sonderregel bei den drei gemeldeten Klassen: jede kuenftige gedaempfte
     Beschriftung erbt sie mit, statt denselben Fehler noch einmal zu machen. */
  --ink-muted:#5e6d77;
  --on-dark:#ffffff; --on-dark-muted:rgba(255,255,255,.74);
  --gruen:#2f8f5b; --rot:#b4453c; --violett:#6b5b95; --braun:#8a6a4a;
  --kopf-rgb:255 255 255; --kopf-a:1;
  --glas:rgba(255,255,255,.78); --blur:blur(18px) saturate(150%);
  /* Flächige Markentönung über Fotos und Videos. Eigene Ebene im Scrim,
     nie ins Bild eingebrannt. Farbwechsel im CD = diese eine Zeile. */
  --foto-ton:rgba(45,60,75,.18);
  /* Toenung ueber Foto und Video – an EINER Stelle, damit sie ueberall
     dieselbe ist. „schwach" ueber der Buehne (dort steht nur ein Titel und ein
     Satz drauf, das Motiv soll wirken), „stark" ueber Flaechen mit ganzem
     Textblock. Beides FLAECHIG, nie gestapelt: uebereinanderliegende Ebenen
     multiplizieren sich und werden schnell fast schwarz. */
  --ton-schwach:rgba(45,60,75,.30);
  --ton-stark:rgba(45,60,75,.72);
  --accent:var(--cadenabbia);
  /* RUNDE 15 (E10): TEXTAKZENT – dieselbe Familie, aber lesbar.
     `--accent` ist eine FLAECHENfarbe (Balken, Fuellungen, Rahmen). Als
     Schriftfarbe auf hellem Grund faellt sie durch: Cadenabbia erreicht gegen
     --grund-alt rund 2,2:1, Union-Gold nicht einmal 2:1 – WCAG AA verlangt
     4,5:1 fuer normalen Text. Gemeldet wurde es fuer die Antrags-Art
     („ANTRAG") auf der Fraktionsseite.

     Wie schon beim Fund zu --ink-muted (Runde 10) steht die Korrektur am
     TOKEN und nicht als Sonderregel an der einen gemeldeten Klasse: Jede
     kuenftige akzentfarbene Beschriftung erbt sie damit mit, statt denselben
     Fehler noch einmal zu machen.

     Werte: 5,4:1 (Partei) bzw. 6,6:1 gegen --grund-alt. */
  --accent-text:#1d6b76;
  --r:0px;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-text:'IBM Plex Serif',Georgia,serif;
  --fs-display:clamp(2.5rem,6vw,5rem); --fs-page:clamp(1.85rem,3.6vw,3rem);
  --fs-section:clamp(1.45rem,2.5vw,2.2rem); --fs-block:clamp(1.05rem,1.3vw,1.28rem);
  --fs-lead:clamp(1rem,1.1vw,1.14rem); --fs-small:.875rem; --fs-label:.72rem;
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --sec-pad:clamp(3.5rem,7vw,6rem);
  --container:1180px; --pad:1.5rem; --kopf-h:68px;
  --ease:cubic-bezier(.2,.6,.2,1); --t:220ms var(--ease);
}
.welt-partei{--accent:var(--cadenabbia);--accent-text:#1d6b76;}
.welt-fraktion{--accent:var(--gold);--accent-text:#8a5a00;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-text);font-size:1rem;line-height:1.72;color:var(--ink);
  background:var(--grund);-webkit-font-smoothing:antialiased;overflow-x:clip;}
img,video{display:block;max-width:100%;}
ul,ol{list-style:none;}
button{font-family:var(--font-ui);cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}

/* -----------------------------------------------------------------------------
   KONTAKT-LINKS (Runde 15, A6)
   Telefon- und E-Mail-Angaben auf der ganzen oeffentlichen Seite – EINE Klasse
   statt einer Handvoll Insellösungen. Bis hierher trugen sie je nach Seite gar
   keine Auszeichnung, eine dauerhafte Unterstreichung oder ein
   `style="color:var(--tuerkis)"` – ein Token, das es nie gab, weshalb die
   Farbe dort schlicht nicht ankam.

   Vorgabe: KEINE Unterstreichung. Beim Zeigen laeuft sie von links ein, in der
   Akzentfarbe des jeweiligen Kontexts – Cadenabbia auf /partei, Union-Gold auf
   /fraktion. Das kostet keine zweite Regel: `--accent` wird von
   .welt-partei/.welt-fraktion gesetzt, die Klasse liest nur.

   Umgesetzt als wachsender Hintergrundstreifen, nicht als `text-decoration`:
   Letztere laesst sich nicht von einer Seite her einblenden, sie ist da oder
   nicht.

   Auf Geraeten OHNE Hover steht die Unterstreichung dauerhaft. Ein Hinweis,
   den nur eine Maus sichtbar machen kann, ist auf dem Telefon kein Hinweis –
   derselbe Befund wie in Runde 10 (P31).
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   BROTKRUMEN (Nachbesserung 16.08.2026)
   Sie stehen auf den Rechtsseiten (Impressum, Datenschutz, KI-Transparenz) und
   sind dort die einzige Ruecknavigation – wer ueber einen Direktlink kommt,
   hat sonst keinen Weg zurueck.

   ZWEI FEHLER WAREN ZU BEHEBEN:

   1. Sie standen SIEBENMAL als Inline-Stil im Markup, in vier Varianten – und
      griffen auf `--color-text-muted`, `--tuerkis` und `--accent-strong`
      zurueck. KEINES dieser drei Tokens existiert in dieser Datei. Die Krume
      erbte deshalb die normale Textfarbe, der Verweis darin ebenfalls: nicht
      gedaempft, nicht als Verweis erkennbar, an jeder Seite ein bisschen
      anders gemeint.

   2. Sie lagen auf schmalen Schirmen HINTER dem Kopf. Der ist fest
      positioniert und 68px hoch; das Sektionspolster faellt unter 3,5rem
      (=56px) zurueck. Die Krume – das erste Element der Seite – verschwand
      damit halb dahinter und schimmerte beim Scrollen durch.

   Der Zuschlag unten greift nur, solange das Polster kleiner ist als der Kopf;
   auf breiten Schirmen (Polster 6rem) ist er 0. Damit ist die Krume auf jeder
   Breite vollstaendig sichtbar UND anklickbar – die Alternative, sie mobil zu
   verstecken, haette die Rueckwege genau dort genommen, wo sie am ehesten
   gebraucht werden. */
.krumen{
  margin-top:max(0px, calc(var(--kopf-h) - var(--sec-pad) + var(--s4)));
  margin-bottom:var(--s6);
  font-family:var(--font-ui);
  font-size:var(--fs-small);
  color:var(--ink-muted);
}
/* Der Verweis traegt die LESBARE Akzentfarbe (--accent-text), nicht --accent:
   Union-Gold auf hellem Grund erreicht als Schrift keine 2:1. */
.krumen a{color:var(--accent-text);text-decoration:none;}
.krumen a:hover,.krumen a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;}

.kontaktlink{
  /* Die Staerke steht EINMAL, als Token. Vorher trugen mehrere Stellen ihre
     eigene: 2px hier, `text-decoration-thickness:2px` im Adressblock der
     Geschaeftsstelle, die Vorgabe des Browsers anderswo. Wer sie aendern will,
     aendert jetzt eine Zahl. */
  --linie-staerke:2px;
  color:inherit;text-decoration:none;padding-bottom:.08em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0 var(--linie-staerke);
  transition:background-size var(--t);
}
.kontaktlink:hover,.kontaktlink:focus-visible{background-size:100% var(--linie-staerke);}
@media (hover:none){.kontaktlink{background-size:100% var(--linie-staerke);}}
@media (prefers-reduced-motion:reduce){.kontaktlink{transition:none;}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
::selection{background:var(--accent);color:var(--rhoendorf);}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.wrap--breit{max-width:1420px;margin-inline:auto;padding-inline:var(--pad);}
/* 68 Zeichen waren fuer die Beitragsseite zu schmal – bei der Schriftgroesse
   der .prose steht dort weniger, als die Zahl vermuten laesst. */
.wrap--text{max-width:min(78ch,var(--container));}
[hidden]{display:none!important;}
/* Nur fuer Vorlesesoftware sichtbar. Nicht display:none – das nimmt den Text
   auch der Vorlesesoftware weg. clip-path statt des alten clip:rect(); beides
   steht nebeneinander, weil aeltere Browser nur die erste Schreibweise
   verstehen. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* Sprite-Behaelter der Kopfzeile: liegt im Fluss, soll aber keinen Platz
   nehmen. Fuehrt frueher als style-Attribut im Markup (Oe-14). */
.sprite-versteck{position:absolute;}

/* Bogen – exakt aus der offiziellen SVG */
.bogen{display:inline-block;width:1.3937em;height:1em;flex:none;}
.bogen svg{display:block;width:100%;height:100%;fill:currentColor;}

/* Typografie */
.h-display{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-display);line-height:1;letter-spacing:-.03em;}
.h-page{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-page);line-height:1.02;letter-spacing:-.026em;}
.h-section{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-section);line-height:1.08;letter-spacing:-.02em;}
.h-block{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-block);line-height:1.3;letter-spacing:-.008em;}
.hl{font-family:var(--font-text);font-weight:700;font-style:italic;letter-spacing:-.01em;}
/* RUNDE 20/C2: nur im Hero soll .hl aus derselben Schriftfamilie wie der Rest
   der Ueberschrift bestehen (Font-Mix Serif-kursiv/Inter wirkte dort mobil
   ueberladen). Ausserhalb des Hero – Fliesstext-Ueberschriften wie
   partei/aktuelles.php, blog/list.php – bleibt die Serif-Auszeichnung
   unveraendert; deshalb ein Modifier statt einer globalen Aenderung an .hl. */
.hl--ui{font-family:var(--font-ui);font-style:normal;}
.kasten{display:inline-block;padding:.3em .55em;border-radius:var(--r);font-family:var(--font-ui);
  font-weight:500;line-height:1.3;background:var(--cadenabbia);color:var(--rhoendorf);}
.kasten--gold{background:var(--gold);color:var(--rhoendorf);}
.trennlinie{display:block;width:clamp(48px,6vw,86px);height:.62rem;background:var(--accent);margin-block:var(--s5);}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui);font-weight:600;
  font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--s4);}
.eyebrow .bogen{color:var(--accent);width:1.115em;height:.8em;}
.eyebrow--hell{color:var(--on-dark-muted);}
.lead{font-family:var(--font-text);font-size:var(--fs-lead);line-height:1.7;color:var(--ink-muted);max-width:54ch;}
.small{font-size:var(--fs-small);line-height:1.6;} .muted{color:var(--ink-muted);}
.label{font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-muted);}
.prose{font-size:1.05rem;line-height:1.82;}
.prose > * + *{margin-top:1.4rem;}
.prose h2{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-block);line-height:1.3;margin-top:2.6rem;}
.prose blockquote{border-left:2px solid var(--accent);padding-left:var(--s6);
  font-size:var(--fs-lead);color:var(--ink-muted);margin-block:2.2rem;}
.prose a,a.link{font-style:italic;background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;padding-bottom:2px;
  transition:background-size .42s var(--ease);}
.prose a:hover,.prose a:focus-visible,a.link:hover,a.link:focus-visible{background-size:100% 1.5px;}
.u{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1.5px;padding-bottom:2px;transition:background-size .42s var(--ease);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
a:hover .u,a:focus-visible .u{background-size:100% 1.5px;}

/* Kleinteile */
.pf{display:inline-block;width:1em;height:1em;flex:none;}
.pf svg{display:block;width:100%;height:100%;fill:currentColor;}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .95rem;border-radius:var(--r);
  border:1px solid var(--linie);font-family:var(--font-ui);font-weight:600;font-size:var(--fs-small);
  color:var(--ink-muted);transition:border-color var(--t),color var(--t),background-color var(--t);}
.chip:hover{border-color:var(--linie-stark);color:var(--ink);}
/* Zwei Schreibweisen fuer denselben Zustand, weil es zwei Bedienelemente sind:
   die Filterknoepfe der Onepager schalten im Dokument um (`aria-pressed`), die
   Rubriken unter /aktuelles sind Verweise auf eigene Adressen und tragen
   deshalb `aria-current="page"`. Auf einem Verweis waere `aria-pressed`
   ungueltige ARIA und wuerde verworfen – der aktive Zustand kaeme dann gar
   nicht an. */
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--rhoendorf);}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s10);}
/* RUNDE 16/20: Die waagerecht schiebbare Filterreihe auf schmalen Schirmen ist
   zurueckgebaut. Sie stammt aus Runde 9 und sollte drei Zeilen Chips zwischen
   Sektionskopf und erstem Beitrag verhindern – der Preis war jedoch, dass
   Filter jenseits des Sichtfensters unbemerkt blieben: es gab keinen
   Schiebebalken (`scrollbar-width:none`), keinen Verlaufsschatten und keinen
   Pfeil, also auch keinen Hinweis darauf, dass ueberhaupt noch etwas kommt.
   Ein unsichtbarer Filter ist schlechter als eine zweite Zeile. Die Reihe
   bricht jetzt auf allen Breiten um; der kleinere Abstand nach unten bleibt,
   weil er auf dem Telefon unabhaengig von der Zeilenzahl richtig war.
   Der seitliche Innenabstand faengt den Fokusring des ersten und letzten
   Chips auf, der sonst am Rand abgeschnitten wuerde. */
@media (max-width:640px){
  .pills{margin-bottom:var(--s6);padding:2px;}
}
.marke{display:inline-flex;align-items:center;padding:.28rem .6rem;border-radius:var(--r);
  background:var(--accent);color:var(--rhoendorf);font-family:var(--font-ui);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.zahl{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.9em;padding:0 .45em;
  border-radius:var(--r);background:var(--grund-alt);border:1px solid var(--linie);
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;color:var(--ink-muted);}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.78rem 1.35rem;border:1px solid var(--linie-stark);
  border-radius:var(--r);font-family:var(--font-ui);font-weight:600;font-size:var(--fs-small);line-height:1;
  transition:background-color var(--t),color var(--t),border-color var(--t);}
.btn .pf{transition:transform .32s var(--ease);}
.btn:hover{background:var(--ink);color:var(--grund);border-color:var(--ink);}
.btn:hover .pf{transform:translateX(4px);}
.btn--fill{background:var(--accent);border-color:var(--accent);color:var(--rhoendorf);}
.btn--fill:hover{background:var(--ink);border-color:var(--ink);color:var(--grund);}
.btn--hell{border-color:rgba(255,255,255,.45);color:#fff;}
.btn--hell:hover{background:#fff;color:var(--rhoendorf);border-color:#fff;}
.btn--klein{padding:.5rem .9rem;font-size:var(--fs-label);}
.iconlink{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--linie);border-radius:var(--r);
  transition:border-color var(--t),background-color var(--t),color var(--t);}
.iconlink svg{width:17px;height:17px;fill:currentColor;}
.iconlink:hover{border-color:var(--ink);background:var(--ink);color:var(--grund);}
.iconlink--hell{border-color:rgba(255,255,255,.4);color:#fff;}
.iconlink--hell:hover{background:#fff;color:var(--rhoendorf);border-color:#fff;}

/* ==========================================================================
   SEKTIONEN
   Rhythmus: Sektionen haben drei Lautstärken.
     laut   — bildschirmfüllend und scrollgesteuert: Hero, Programm-Bühne,
              Gliederungs-Kartenstapel
     mittel — vollflächig, aber statisch: Bänder
     ruhig  — Raster, Listen, Akkordeon, Formular
   Zwischen zwei lauten Sektionen liegt mindestens eine ruhige. Ein Band
   genügt nicht — es ist ebenfalls vollflächig und dunkel und liest sich als
   Fortsetzung statt als Pause. Umgekehrt nie mehr als zwei ruhige am Stück.
   ========================================================================== */
.sec{padding-block:var(--sec-pad);}
.sec--alt{background:var(--grund-alt);}
.sec__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  padding-bottom:var(--s5);margin-bottom:var(--s10);border-bottom:1px solid var(--linie);}
.sec__kopf .lead{margin-top:var(--s4);}
/* Auf dem Telefon steht vor dem ersten Inhalt einer Sektion viel Vorspann:
   Rubrikzeile, Ueberschrift, ein Knopf, oft noch eine Filterreihe. Zusammen
   war das eine halbe Bildschirmhoehe Bedienung, bevor der erste Beitrag kam
   (Runde 9). Der Kopf rueckt deshalb naeher an seinen Inhalt – die Trennlinie
   und die Groessenverhaeltnisse bleiben unangetastet. */
@media (max-width:640px){
  .sec__kopf{padding-bottom:var(--s4);margin-bottom:var(--s6);}
}
.sec__fuss{margin-top:var(--s10);display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap;}
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8);}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);}
.raster-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8);}
@media (max-width:960px){.raster-3,.raster-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);}}
@media (max-width:640px){.raster-2,.raster-3{grid-template-columns:1fr;}}

/* ==========================================================================
   BEITRÄGE
   Wichtig: Bild und Textteil sind zwei Kinder. Ohne den Textcontainer
   fallen Meta, Titel und Vorspann im Aufmacher einzeln ins zweispaltige
   Raster — genau der Fehler aus der letzten Fassung.
   ========================================================================== */
.beitrag{display:block;color:inherit;}
.beitrag__bild{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);background:var(--grund-alt);}
.beitrag__txt{display:block;}
.beitrag__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:var(--s5);margin-bottom:var(--s3);}
.trenner{width:3px;height:3px;border-radius:50%;background:var(--ink-muted);opacity:.6;}
.beitrag__lead{display:none;}
.beitrag--gross{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:var(--s10);
  align-items:center;margin-bottom:var(--s8);padding-bottom:var(--s8);border-bottom:1px solid var(--linie);}
.beitrag--gross .beitrag__meta{margin-top:0;}
.beitrag--gross .h-block{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12;letter-spacing:-.02em;}
.beitrag--gross .beitrag__lead{display:block;margin-top:var(--s3);}
@media (max-width:820px){
  .beitrag--gross{grid-template-columns:1fr;gap:var(--s5);}
  .beitrag--gross .beitrag__meta{margin-top:var(--s5);}
}
/* RUNDE 20/C4: ruhige Meta-Zeile fuer /partei und /fraktion — Ersatz fuer
   .marke (Versal-Pill mit Tracking und Akzentfarbe) + zwei durch .trenner
   getrennte .label-Fragmente. Ein zusammenhaengender Text „Datum · Lesezeit"
   statt zweier Fragmente, ein neutraler statt akzentfarbener Pill. */
.marke--ruhig{display:inline-flex;align-items:center;padding:.25rem .55rem;border-radius:var(--r);
  background:var(--grund-alt);color:var(--ink-muted);font-family:var(--font-ui);font-size:var(--fs-label);
  font-weight:600;letter-spacing:normal;text-transform:none;}
.beitrag__meta--ruhig{display:flex;align-items:center;gap:.5rem;margin-top:var(--s5);margin-bottom:var(--s3);
  font-family:var(--font-ui);font-size:var(--fs-label);color:var(--ink-muted);}
.beitrag--gross .beitrag__meta--ruhig{margin-top:0;}
@media (max-width:820px){.beitrag--gross .beitrag__meta--ruhig{margin-top:var(--s5);}}
/* RUNDE 20/C5: .beitrag--gross ist der redaktionelle Aufmacher, solange
   .raster-3 mehrspaltig ist (ab 641px). Unterhalb der bestehenden
   .raster-3-Bruchkante (max-width:640px, siehe oben) verliert er seine
   Sonderrolle vollstaendig, damit auf einer Spalte alle Beitraege
   gleichrangig stehen: keine Grid-Spannweite, kein Lead-Text, keine
   zusaetzlichen Aussenabstaende. */
@media (max-width:640px){
  .beitrag--gross{grid-column:auto;display:block;margin-bottom:0;padding-bottom:0;border-bottom:none;}
  .beitrag--gross .beitrag__lead{display:none;}
}
.person{display:block;color:inherit;}
.person__bild{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:var(--r);background:var(--rhoendorf);}
/* Das Monogramm liegt HINTER dem Foto (z-index), und das Foto blendet es im
   Markup zusaetzlich aus. Zwei Sicherungen fuer denselben Fall: ohne die
   z-index-Angabe entschied allein die Reihenfolge im Markup, welches von
   beiden man sieht – das ist zu wenig, wenn eine Ansicht sie einmal anders
   herum schreibt. */
.person__bild img,.aus__bild img{z-index:1;}

/* -----------------------------------------------------------------------------
   RUNDE 13/14: DIE FEINE DUNKLE LINIE AM RECHTEN BILDRAND.

   Gemeldet war „Portraitfotos haben teilweise eine ganz leichte schwarze Linie
   auf der rechten Seite". Sie kommt weder aus den Bildern noch aus einem
   Rahmen, sondern aus der Rundung von Bruchteil-Pixeln:

   Der Bildrahmen ist eine Rasterspalte und damit fast nie ganzzahlig breit
   (271,25px zum Beispiel). `object-fit:cover` rechnet die Bildgroesse daraus
   und rundet dabei ab – es bleibt ein Streifen von weniger als einem Pixel
   frei. Dort scheint der HINTERGRUND des Rahmens durch, und der ist
   `--rhoendorf`, also fast schwarz. Deshalb „teilweise": Ob und wie stark der
   Streifen auftritt, haengt am Seitenverhaeltnis des einzelnen Fotos und an
   der Fensterbreite.

   Der dunkle Hintergrund ist dabei ueberfluessig, sobald ein Foto da ist: Den
   Platzhalter ohne Foto zeichnet ohnehin `.mono` mit eigenem Verlauf ueber die
   ganze Flaeche. Er wird deshalb genau dann abgeschaltet, wenn ein <img> im
   Rahmen steht – der Bruchteil-Streifen zeigt dann die Sektionsflaeche
   dahinter und ist nicht mehr zu sehen.

   Der @supports-Rahmen ist Pflicht: Ein Browser ohne :has() verwirft sonst
   nicht nur diese Regel, sondern die ganze Gruppe. Ohne ihn bleibt es beim
   bisherigen Verhalten – die Linie ist ein Schoenheitsfehler, kein Ausfall.
   ----------------------------------------------------------------------------- */
@supports selector(:has(*)){
  .person__bild:has(img),.aus__bild:has(img){background:transparent;}
}
.mono{z-index:0;position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(155deg,#3a4f63,#2d3c4b 60%,#212c37);
  color:rgba(255,255,255,.45);font-family:var(--font-ui);font-weight:800;font-size:1.9rem;}
.person__name{margin-top:var(--s4);overflow-wrap:anywhere;hyphens:auto;}
/* Rolle unter dem Namen. Vorher lief sie als Versal-Label mit Sperrung ueber
   die Kartenbreite hinaus und machte die Seite mobil seitlich scrollbar.
   Jetzt: klein, normale Gross-/Kleinschreibung, umbruchfaehig, zwei Zeilen. */
.person__rolle{margin-top:.2rem;font-family:var(--font-ui);font-weight:500;
  font-size:.78rem;line-height:1.3;color:var(--ink-muted);
  overflow-wrap:anywhere;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.aus__name,.aus__rolle{overflow-wrap:anywhere;hyphens:auto;}
.aus__rolle{text-transform:none;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.liste{border-top:1px solid var(--linie-stark);}
.liste__row{display:grid;gap:var(--s2) var(--s6);align-items:baseline;grid-template-columns:8.5rem 1fr auto;
  padding-block:var(--s5);border-bottom:1px solid var(--linie);transition:padding-left .38s var(--ease);}
a.liste__row:hover{padding-left:.7rem;}
.liste__note{grid-column:2 / -1;color:var(--ink);font-size:var(--fs-small);}
/* Fakten (Alter, Beruf, Mitglied seit) standen in der gedaempften Farbe und
   wirkten dadurch wie eine Nebenbemerkung. Sie sind der Inhalt der Spalte. */
.liste__aside{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink);text-align:right;white-space:nowrap;}
@media (max-width:720px){
  .liste__row{grid-template-columns:1fr;}
  .liste__aside{text-align:left;white-space:normal;} .liste__note{grid-column:1;}
}


/* -----------------------------------------------------------------------------
   AUSSCHUSSMITGLIEDER, ANTRAEGE, BAENDER UND HERO
   ----------------------------------------------------------------------------- */
/* ==========================================================================
   AUSSCHUSSMITGLIEDER
   Bis zu sechs in einer Reihe, quadratische Porträts — bewusst anders als
   das Team-Raster mit 4:5. Vertretungen darunter als Aufzählung.
   ========================================================================== */
.aus{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5);}
@media (max-width:1100px){.aus{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:700px){.aus{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:440px){.aus{grid-template-columns:repeat(2,minmax(0,1fr));}}
.aus__p{display:block;color:inherit;}
.aus__bild{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:var(--r);background:var(--rhoendorf);}
.aus__bild .mono{font-size:1.15rem;}
.aus__p:hover .aus__bild{outline:2px solid var(--accent);outline-offset:-2px;}
.aus__name{margin-top:.55rem;font-family:var(--font-ui);font-weight:700;font-size:.84rem;line-height:1.25;}
.aus__rolle{font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:.05em;
  color:var(--ink-muted);margin-top:.15rem;line-height:1.3;}
.aus__vertret{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linie);
  font-size:var(--fs-small);color:var(--ink);}
.aus__vertret b{display:block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:.35rem;color:var(--ink-muted);}
.aus__vertret a{font-style:italic;background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;padding-bottom:1px;
  transition:background-size .42s var(--ease);}
.aus__vertret a:hover{background-size:100% 1.5px;}

/* ==========================================================================
   ANTRÄGE — ohne Status, dafür mit Gewicht auf Datum und Titel
   ========================================================================== */
.antraege{border-top:2px solid var(--ink);}
.antrag{display:grid;grid-template-columns:6.5rem 1fr auto;gap:var(--s2) var(--s6);align-items:center;
  padding-block:var(--s6);padding-right:var(--s5);border-bottom:1px solid var(--linie);
  transition:padding-left .4s var(--ease),background-color var(--t);}
.antrag:hover{padding-left:.8rem;background:var(--grund-alt);}
.antrag__tag{font-family:var(--font-ui);font-weight:800;font-size:clamp(1.15rem,1.7vw,1.6rem);
  line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;}
.antrag__jahr{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;
  color:var(--ink-muted);margin-top:.25rem;}
/* E10: --accent-text statt --accent. Auf der Fraktionsseite stand hier
   Union-Gold auf hellem Grund – als Flaeche richtig, als Schrift unlesbar. */
.antrag__art{display:inline-block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.4rem;}
.antrag__titel{font-family:var(--font-ui);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.32rem);
  line-height:1.24;letter-spacing:-.012em;}
.antrag__gremium{margin-top:.4rem;font-family:var(--font-ui);font-size:var(--fs-label);
  letter-spacing:.05em;color:var(--ink-muted);}
.antrag__pdf{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;
  border:1px solid var(--linie);border-radius:var(--r);white-space:nowrap;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;transition:background-color var(--t),border-color var(--t),color var(--t);}
.antrag:hover .antrag__pdf{background:var(--accent);border-color:var(--accent);color:var(--rhoendorf);}
@media (max-width:760px){
  .antrag{grid-template-columns:4.5rem 1fr;}
  .antrag__pdf{grid-column:2;justify-self:start;margin-top:var(--s3);}
}

/* Bänder und Hero */
.band{position:relative;background:var(--rhoendorf);color:var(--on-dark);overflow:hidden;}
.band__media{position:absolute;inset:0;}
.band__media img{width:100%;height:100%;object-fit:cover;}
/* Der Verlauf deckt NUR die Seite ab, auf der der Text steht. Ein Verlauf ueber
   die ganze Breite legte sich vorher auch ueber die Person.

   RUNDE 15 (A8): Der Verlauf ist bei 50 % DURCHSICHTIG, vorher erst bei 66 %.
   Der Klassenname sagt, wo die PERSON steht: bei `.band--person-rechts` sitzt
   sie in der rechten Bildhaelfte, der Verlauf laeuft von links. Mit dem
   Nullpunkt bei 66 % reichte er ein gutes Stueck in ihre Haelfte hinein und
   verdunkelte genau das, was das Foto zeigen soll. Jetzt endet er an der
   Bildmitte – die Haelfte der Person bleibt unangetastet.

   Der mittlere Halt wandert mit (34 % von 66 % ≙ 26 % von 50 %), damit die
   Verlaufskurve dieselbe bleibt und nur kuerzer wird; sonst waere der
   Uebergang steiler und als Kante sichtbar. */
.band__scrim{position:absolute;inset:0;}
.band--person-rechts .band__scrim{
  background:linear-gradient(90deg,rgba(45,60,75,.95) 0%,rgba(45,60,75,.72) 26%,rgba(45,60,75,0) 50%),
             linear-gradient(var(--foto-ton),var(--foto-ton));}
.band--person-links .band__scrim{
  background:linear-gradient(270deg,rgba(45,60,75,.95) 0%,rgba(45,60,75,.72) 26%,rgba(45,60,75,0) 50%),
             linear-gradient(var(--foto-ton),var(--foto-ton));}
/* Etwas kompakter als zuvor – das Band ist eine Zwischenstimme, keine Sektion.
   ABER: Die Hoehe kam bis Runde 10 AUSSCHLIESSLICH aus diesem Innenabstand
   plus der Textmenge. Bei einem Amtstraeger mit kurzem Text – Titel, Name,
   zwei Zeilen – ergab das ein flaches Band, und weil das Foto mit
   `object-fit:cover` fuellt, schnitt es genau dort ab, wo der Kopf sitzt.
   Deshalb jetzt eine Mindesthoehe (P15): Sie greift nur, wenn der Text allein
   nicht genug hergibt, und laesst laengere Baender unveraendert. */
.band{min-height:clamp(26rem,42vw,34rem);}
.band__inner{position:relative;z-index:2;padding-block:clamp(4.5rem,9vw,7rem);}
/* Waagerecht steht der Ausschnitt ueber .bild-pos-links/-rechts fest (die
   Person soll am Rand bleiben), senkrecht galt der Vorgabewert `center` –
   also die MITTE des Fotos. Auf einem hochformatigen Portraet in einem
   breiten Band liegt der Kopf deutlich darueber. 28 % holt ihn ins Bild und
   ist zugleich weit genug von 0, dass ueber dem Kopf noch Luft bleibt. */
.band--person-links .band__media img{object-position:left 28%;}
.band--person-rechts .band__media img{object-position:right 28%;}
/* RUNDE 15 (A8): 48 % statt 52 %. Der Verlauf ist jetzt ab der Bildmitte
   durchsichtig – ein Text, der bis 52 % lief, staende mit seinen letzten
   Zeichen auf ungedaempftem Foto. */
.band__text{max-width:min(46ch,48%);}
.band--person-links .band__text{margin-left:auto;}
.band__text .lead{color:var(--on-dark-muted);}
.band__aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);}

/* Mobil: das Foto steht oben in eigener Hoehe, der Text darunter auf vollem
   Rhoendorf. Uebereinandergelegt waere entweder das Gesicht verdeckt oder der
   Text unlesbar – auf 380 Pixeln Breite geht beides nicht nebeneinander. */
@media (max-width:820px){
  .band__media{position:relative;inset:auto;aspect-ratio:4/3;}
  .band__media img{object-position:center 22% !important;}
  .band__scrim{display:none;}
  .band__inner{padding-block:var(--s8);}
  .band__text{max-width:none;margin-left:0;}
}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:var(--rhoendorf);overflow:hidden;}
.hero__media{position:absolute;inset:0;}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,40,50,.5) 0%,rgba(30,40,50,.18) 38%,rgba(30,40,50,.84) 100%),
             linear-gradient(var(--foto-ton),var(--foto-ton));}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,8vh,6rem);}
.hero__unten{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s8);margin-top:var(--s10);}
.hero .lead{color:var(--on-dark-muted);}
.seitenkopf{background:var(--rhoendorf);color:var(--on-dark);border-radius:var(--r);padding:clamp(1.6rem,3.4vw,2.8rem);}
.seitenkopf .lead{color:var(--on-dark-muted);}
/* Der Kasten ist eine Spalte: Name oben, Kontakt unten. `margin-top:auto`
   drueckt den Fuss ans untere Ende, statt ihn dem Namen hinterherlaufen zu
   lassen. Die Trennlinie darueber ist weg – zwei waagerechte Striche direkt
   untereinander (einer unter dem Namen, einer ueber dem Kontakt) haben den
   Kasten nur zerschnitten. */
.seitenkopf{display:flex;flex-direction:column;}
/* Die beiden Downloads (vCard, PDF) stehen nebeneinander und brechen auf
   schmalen Geraeten um, statt den Kasten zu sprengen (Runde 10/P2). */
.seitenkopf__downloads{display:flex;flex-wrap:wrap;gap:var(--s3);}
.seitenkopf__fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-top:auto;padding-top:var(--s8);}
.kdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4) var(--s8);
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.2);}
.kdaten__zeile{font-family:var(--font-ui);font-size:var(--fs-small);}
.kdaten__zeile b{display:block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:.2rem;}
.kdaten__zeile a{font-style:italic;background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;padding-bottom:2px;
  transition:background-size .42s var(--ease);}
.kdaten__zeile a:hover{background-size:100% 1.5px;}


/* -----------------------------------------------------------------------------
   AKKORDEON, FORMULAR, KOPFZEILE, OFFCANVAS, FUSSZEILE
   ----------------------------------------------------------------------------- */
/* Akkordeon */
.akk{border-top:1px solid var(--linie-stark);}
.akk__item{border-bottom:1px solid var(--linie);}
.akk__kopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);text-align:left;font-family:var(--font-ui);font-weight:700;
  font-size:var(--fs-block);letter-spacing:-.008em;transition:padding-left .38s var(--ease);}
.akk__kopf:hover{padding-left:.7rem;}
.akk__zeichen{position:relative;width:16px;height:16px;flex:none;}
.akk__zeichen::before,.akk__zeichen::after{content:"";position:absolute;background:var(--accent);transition:transform .3s var(--ease);}
.akk__zeichen::before{left:0;top:7px;width:16px;height:2px;}
.akk__zeichen::after{left:7px;top:0;width:2px;height:16px;}
.akk__kopf[aria-expanded="true"] .akk__zeichen::after{transform:scaleY(0);}
.akk__inhalt{padding-bottom:var(--s8);}

/* Formular */
.feld{display:block;margin-bottom:var(--s5);}
.feld > span{display:block;font-family:var(--font-ui);font-size:var(--fs-small);font-weight:600;margin-bottom:.4rem;}
.feld input,.feld textarea,.feld select{width:100%;padding:.75rem .9rem;border-radius:var(--r);
  border:1px solid var(--linie-stark);background:var(--grund);color:var(--ink);font-family:var(--font-text);
  font-size:1rem;transition:border-color var(--t);}
/* Der Ring der Grundregel (`:focus-visible`, oben) BLEIBT stehen; die
   Randfarbe kommt hinzu, ersetzt ihn nicht. Cadenabbia erreicht gegen den
   weissen Feldgrund 2,2:1 und taugt deshalb nicht als alleinige Fokusanzeige
   (WCAG 1.4.11 verlangt 3:1). `select` gehoert mit in die Regel, sonst traegt
   die Auswahlliste als einziges Feld den Browser-Ring – drittes Fokusbild im
   selben Formular. */
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-color:var(--accent);}
.feld textarea{min-height:150px;resize:vertical;}
.pflicht{color:var(--ink-muted);font-weight:400;}
/* -----------------------------------------------------------------------------
   KAESTCHEN (Nachbesserung 16.08.2026)

   Vorher stand hier `input{width:auto}` – also das System-Kaestchen des
   Browsers, rund 13 Pixel gross, in Systemblau, auf dem Telefon kaum zu
   treffen. Auf einem Pflichtfeld, ohne das das Formular nicht abgeht, ist das
   die falsche Groesse.

   Jetzt dasselbe Bauprinzip wie im Portal (`.ams-check`, „Angemeldet
   bleiben"): Das echte Feld bleibt an Ort und Stelle und traegt weiterhin
   Fokus, Tastatur und Vorlesefunktion – es wird nur unsichtbar geschaltet
   (`appearance:none`), und die Zeichnung daneben uebernimmt der Rahmen mit dem
   Haken. Was der Browser NICHT kann (Groesse, Markenfarbe, Fokusring in der
   Akzentfarbe), steht damit hier; was er kann (Zustand, Bedienung), bleibt bei
   ihm.

   Die Akzentfarbe kommt aus `--accent` und unterscheidet damit von selbst
   zwischen Partei und Fraktion – wie bei `.kontaktlink` auch. */
.dsgvo{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-muted);margin-bottom:var(--s6);}
.dsgvo input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex:none;width:22px;height:22px;margin:.1rem 0 0;
  border:2px solid var(--linie-stark);border-radius:var(--r);
  background:var(--grund);cursor:pointer;
  display:grid;place-content:center;
  transition:background-color 120ms var(--ease),border-color 120ms var(--ease);
}
/* Der Haken wird gezeichnet, nicht als Zeichen gesetzt: Ein Hakenzeichen aus
   der Schrift sitzt je nach Schriftart anders im Kaestchen. */
.dsgvo input[type=checkbox]::before{
  content:"";width:12px;height:12px;transform:scale(0);
  transition:transform 120ms var(--ease);
  background:#fff;
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,40% 72%);
}
.dsgvo input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);}
.dsgvo input[type=checkbox]:checked::before{transform:scale(1);}
.dsgvo input[type=checkbox]:hover{border-color:var(--accent);}
.dsgvo input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
/* Beanstandetes Pflichtfeld: der Rahmen sagt es, nicht nur der Text darunter. */
.dsgvo input[type=checkbox][aria-invalid="true"]{border-color:var(--rot);}
@media (prefers-reduced-motion:reduce){
  .dsgvo input[type=checkbox],.dsgvo input[type=checkbox]::before{transition:none;}
}

/* Kopfzeile, Offcanvas, Fußzeile */
/* Sprunglink. Vorlage ist .portal-skip-link aus shell.css; Farben, Radius und
   Uebergang kommen hier aus den Tokens des Designsystems. Die Flaeche ist
   HELL und nicht wie im Portal dunkel: --ink und --rhoendorf sind derselbe
   Farbwert, ein Fokusring in --ink waere auf rhoendorfer Grund unsichtbar. */
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:.6rem .9rem;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--grund);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--fs-small);font-weight:600;
  transform:translateY(-180%);transition:transform 140ms var(--ease);}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--ink);outline-offset:3px;}
.site-header{position:fixed;top:0;left:0;right:0;height:var(--kopf-h);z-index:900;
  background:rgb(var(--kopf-rgb) / calc(var(--kopf-a) * 100%));
  border-bottom:1px solid rgba(45,60,75, calc(var(--kopf-a) * .13));
  color:color-mix(in srgb, var(--ink) calc(var(--kopf-a) * 100%), #ffffff);}
.site-header__inner{height:100%;display:flex;align-items:center;gap:var(--s6);}
/* Logo: die vollstaendige Wortmarke aus dem offiziellen SVG, unveraendert.
   Die Datei bringt ihre eigene weisse Flaeche mit – die Marke ist deshalb auf
   hellem wie auf dunklem Grund lesbar und braucht ueber dem Hero weder eine
   Platte noch einen Farbfilter. Beides wurde probiert und wieder entfernt:
   eine weiss gefilterte Kopie faerbte das ganze Logo ein und machte es
   unkenntlich. */
.logo{display:inline-flex;align-items:center;flex:none;}
.logo img{display:block;height:30px;width:auto;}
@media (max-width:520px){.logo img{height:24px;}}
/* min-width:0 – SICHERUNG, kein Feinschliff: Ohne sie kann ein Flex-Element
   nicht unter seine Inhaltsbreite schrumpfen. Die Navigation drueckte dann bei
   vielen Punkten den Umschalter rechts aus dem Bild (Runde 9: auf /fraktion
   war von „Fraktion" nur noch „Fraktio" zu lesen). Jetzt gibt die Navigation
   nach, nicht der Umschalter. Ausloeser war die Laenge des Menues – die ist
   ueber views/layout/abschnitte.php gekuerzt; diese Regel sorgt dafuer, dass
   ein spaeter hinzugefuegter Punkt nicht wieder dasselbe anrichtet. */
.site-nav{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;justify-content:center;gap:.2rem;}
.site-nav a{font-family:var(--font-ui);font-size:var(--fs-small);font-weight:500;padding:.5rem .75rem;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:.75rem calc(100% - .35rem);background-size:0% 1.5px;
  transition:background-size .38s var(--ease);white-space:nowrap;}
.site-nav a:hover,.site-nav a[aria-current]{background-size:calc(100% - 1.5rem) 1.5px;}

/* -----------------------------------------------------------------------------
   UNTERMENUE „GLIEDERUNGEN" (RUNDE 12/C1)

   <details>/<summary>: klappt OHNE JavaScript auf und ausdruecklich per Klick,
   nicht beim Ueberfahren. design.js ergaenzt nur Escape und Klick daneben.

   Die aufgeklappte Leiste ist `position:fixed`, nicht `absolute`. `.site-nav`
   traegt `overflow:hidden` (Sicherung aus Runde 9); ein absolut positioniertes
   Panel waere daran abgeschnitten. Ein fixes nicht: sein umschliessender Block
   ist das Ansichtsfenster, und weder Kopfzeile noch Navigation tragen
   `transform`, `filter` oder `backdrop-filter`, die daran etwas aendern
   wuerden. Wer eine dieser Eigenschaften spaeter ergaenzt, bricht dieses
   Untermenue – dann muss das Panel aus `.site-nav` heraus.
   ----------------------------------------------------------------------------- */
.navsub{position:relative;flex:none;}
/* Das Dreieck des Browsers entfaellt – die Richtung zeigt der eigene Pfeil.
   Beide Schreibweisen sind noetig: WebKit hoert nur auf das Pseudo-Element. */
.navsub>summary{list-style:none;cursor:pointer;
  font-family:var(--font-ui);font-size:var(--fs-small);font-weight:500;
  padding:.5rem .75rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;}
.navsub>summary::-webkit-details-marker{display:none;}
.navsub__pf svg{display:block;width:11px;height:11px;fill:currentColor;
  transition:transform var(--t);}
.navsub[open] .navsub__pf svg{transform:rotate(180deg);}
.navsub__panel{position:fixed;left:0;right:0;top:var(--kopf-h);z-index:899;
  background:var(--grund);border-bottom:1px solid var(--linie);
  box-shadow:0 14px 30px rgba(45,60,75,.13);}
/* RUNDE 13/15: ZENTRIERT. Die Leiste laeuft ueber die volle Fensterbreite,
   die Auslesepunkte standen darin aber linksbuendig unter dem Rahmen – bei
   fuenf kurzen Eintraegen sass die Gruppe weit links und hatte mit der
   Klappflaeche darueber sichtbar nichts zu tun. */
.navsub__liste{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) var(--s6);padding-block:var(--s4);color:var(--ink);}
.navsub__liste a{display:inline-flex;align-items:center;gap:.35rem;}
/* Kennzeichnung des externen Ziels: ein kleiner Pfeil nach rechts oben,
   gedaempft. Er ersetzt die Beschriftung „eigene Website" – die war neben
   einem kurzen Gliederungsnamen laenger als der Name selbst. */
.navsub__extern{display:inline-flex;color:var(--ink-muted);}
.navsub__extern svg{display:block;width:11px;height:11px;fill:currentColor;}
.navsub__liste a:hover .navsub__extern{color:var(--ink);}
/* Umschalter. Der inaktive Knopf stand vorher auf opacity:.62 – ueber dem Hero
   auf Weiss ergab das rund 2:1 und war kaum lesbar. Jetzt volle Deckkraft und
   eine eigene Farbe; der aktive Knopf traegt die Akzentflaeche, und darauf steht
   Rhoendorf (Cadenabbia 9,3:1, Gold 10,4:1) – nie Akzent als Textfarbe. */
/* flex:none – zweite Haelfte derselben Sicherung. `overflow:hidden` (fuer die
   Ecken der beiden Pillen noetig) setzt bei einem Flex-Element das implizite
   min-width:auto auf 0; der Umschalter liess sich damit auf Null
   zusammendruecken. */
.welt-switch{display:inline-flex;flex:none;margin-left:auto;border:1px solid currentColor;border-radius:var(--r);
  overflow:hidden;}
/* Seit Oe-8 zwei echte Verweise statt zweier Knoepfe: Partei und Fraktion sind
   zwei Adressen, und ein Knopf mit window.location.href nimmt Mittelklick,
   „in neuem Tab oeffnen" und die Statuszeile weg. Die Optik ist unveraendert –
   nur der Selektor und das Zustandsattribut sind andere. */
/* `line-height` und `display:flex` sind hier PFLICHT, nicht Kosmetik: Ein
   <button> traegt aus dem Browser-Stylesheet `line-height: normal` (rund 1,2),
   ein <a> erbt dagegen die 1,72 des Fliesstextes. Beim Wechsel von Knopf auf
   Verweis wuchsen die beiden Pillen dadurch um rund sieben Pixel und standen
   nicht mehr auf einer Linie mit Logo und Burger. `align-items:center` haelt
   den Text mittig, wenn die Flex-Elemente auf gleiche Hoehe gezogen werden. */
.welt-switch a{display:flex;align-items:center;justify-content:center;
  min-width:70px;padding:.34rem .75rem;font-family:var(--font-ui);font-size:var(--fs-small);
  font-weight:600;line-height:1.2;color:currentColor;white-space:nowrap;
  transition:background-color var(--t),color var(--t);}
.welt-switch a:hover{background:color-mix(in srgb, currentColor 14%, transparent);}
.welt-switch a[aria-current="page"]{background:var(--accent);color:var(--rhoendorf);}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex:none;}
.burger i{display:block;position:relative;width:20px;height:2px;background:currentColor;}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;}
.burger i::before{top:-6px;} .burger i::after{top:6px;}
@media (max-width:1040px){.site-nav{display:none;}.burger{display:inline-flex;}}
/* Das geschlossene Menue ist NICHT nur verschoben, sondern unsichtbar im
   Sinne des Browsers: `visibility:hidden` nimmt seine Verweise aus der
   Tab-Reihenfolge. Ohne das hingen alle Menuepunkte auf jeder Bildschirmbreite
   dauerhaft im Fokusfluss, waehrend aria-hidden="true" gesetzt war – der Fokus
   landete fuer Vorlesesoftware im Nichts.
   Die verzoegerte Ruecknahme (`visibility 0s linear .42s`) ist der Kern: ohne
   sie schaltet visibility SOFORT auf hidden und die Schliess-Animation ist
   nicht mehr zu sehen. Beim Oeffnen faellt die Verzoegerung weg. */
.offcanvas{position:fixed;inset:0;z-index:950;background:var(--rhoendorf);color:#fff;
  padding:var(--kopf-h) var(--pad) var(--s8);overflow-y:auto;transform:translateY(-100%);
  visibility:hidden;transition:transform .42s var(--ease),visibility 0s linear .42s;}
.offcanvas.auf{transform:none;visibility:visible;transition-delay:0s;}
.offcanvas nav{max-width:var(--container);margin-inline:auto;padding-top:var(--s8);}
.offcanvas a{display:block;padding-block:var(--s4);border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--font-ui);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;}
/* RUNDE 12/C1: Gliederungen im Offcanvas – offen, aber eine Stufe leiser als
   die Hauptpunkte. Gleiche Groesse waere eine zweite, gleichrangige
   Navigationsebene; fuenf Ortsverbaende stuenden dann so laut da wie
   „Aktuelles". */
.offcanvas__titel{display:block;padding-top:var(--s5);padding-bottom:var(--s2);
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-muted);}
.offcanvas__sub a{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  padding-block:var(--s3);}
.offcanvas__sub .navsub__extern{color:var(--on-dark-muted);margin-left:.45rem;}
.offcanvas__zu{position:fixed;top:14px;right:var(--pad);z-index:960;width:40px;height:40px;display:grid;place-items:center;color:#fff;}
.offcanvas__zu::before,.offcanvas__zu::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;}
.offcanvas__zu::before{transform:rotate(45deg);} .offcanvas__zu::after{transform:rotate(-45deg);}
.kopfabstand{padding-top:var(--kopf-h);}
.footer{background:var(--rhoendorf);color:var(--on-dark-muted);padding-block:var(--s16) var(--s8);}
/* RUNDE 12/C1: vierte Spalte (Gliederungen). Die Anschrift behaelt ihr
   Uebergewicht, die drei Menuespalten teilen sich den Rest gleichmaessig. */
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s8);}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--s10) var(--s6);}}
/* Mobil bleiben die beiden Menues NEBENEINANDER – sie sind kurz, und
   untereinander verdoppelten sie die Fusszeilenhoehe. Nur die Anschrift
   bekommt die volle Breite. */
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr 1fr;}
  .footer__grid > :first-child{grid-column:1 / -1;}
}
/* h2, nicht h3 (Oe-29): auf /404, den Rechtstexten und /team/{slug} folgte auf
   die einzige h1 direkt eine h3 – eine uebersprungene Ebene. Die Optik bleibt
   unveraendert, es wechselt nur die Ebene. */
.footer h2{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin-bottom:var(--s5);}
.footer li{margin-bottom:.45rem;font-size:var(--fs-small);}
/* <address> setzt der Browser kursiv. In der Fusszeile steht dort eine
   Anschrift, kein Zitat – also normal. */
.footer__adresse{font-style:normal;}
.footer li a,.footer__adresse a{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;padding-bottom:2px;
  transition:background-size .42s var(--ease);}
.footer li a:hover,.footer__adresse a:hover{background-size:100% 1.5px;}
.footer .logo{color:#fff;margin-bottom:var(--s5);font-size:1.05rem;}
.footer__unten{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;margin-top:var(--s12);
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.16);font-size:var(--fs-label);
  letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-ui);}
.footer__unten .sp{margin-left:auto;}

/* -----------------------------------------------------------------------------
   SOZIALE NETZWERKE (Runde 10/P16)
   Eine Reihe runder Symbolverweise – dieselbe Darstellung wie auf der
   Personenseite. Die Symbole fehlten seit dem Umbau der Fusszeile (P18)
   ueberall ausser dort.
   ----------------------------------------------------------------------------- */
.social-reihe{display:flex;gap:.5rem;flex-wrap:wrap;}
.footer__social{margin-top:var(--s5);}
/* Im Offcanvas stehen die Symbole NEBENEINANDER, nicht als weitere
   Menuezeilen: `.offcanvas a` macht aus jedem Verweis einen Block ueber die
   volle Breite mit Trennlinie – drei davon waeren eine zweite, tonlose
   Navigationsebene unter der eigentlichen. */
.offcanvas .social-reihe{margin-top:var(--s6);}
.offcanvas .social-reihe a{display:inline-flex;padding-block:0;border-bottom:0;
  width:44px;height:44px;font-size:1rem;}

/* -----------------------------------------------------------------------------
   POSTANSCHRIFT -> KARTENDIENST (Runde 10/P18)
   Die Anschrift traegt dieselbe einlaufende Unterlaenge wie jeder andere
   Verweis; sie ist ueber zwei Zeilen gesetzt, deshalb `display:inline-block`
   mit Hintergrund an der letzten Zeile statt der Fusszeilen-Grundregel.
   ----------------------------------------------------------------------------- */
/* RUNDE 16/18: Die Linie lief in `currentColor` – also in Rhoendorf, dem
   Textton. Damit war die Anschrift der einzige Verweis der Seite, dessen
   Unterlaenge NICHT den Akzent trug: `.kontaktlink`, `.prose a`, `.footer li a`
   und `.footer__adresse a` setzen alle `var(--accent)`. Sichtbar wurde es nur
   dort, wo `.adresse-maps` allein steht (Geschaeftsstelle, Impressum,
   Gliederungsseiten) – in der Fusszeile gewinnt `.footer__adresse a`
   (Spezifitaet 0,1,1 gegen 0,1,0) und faerbte die Linie schon immer richtig.
   Genau daher ruehrt das wiederkehrende „mal ist es richtig, mal nicht".
   Staerke und Beruehr-Regel jetzt ebenfalls wie bei `.kontaktlink`: ohne
   `@media (hover:none)` bleibt die Linie auf Mobilgeraeten dauerhaft
   unsichtbar, weil es dort kein Ueberfahren gibt. */
.adresse-maps{--linie-staerke:2px;
  display:inline-block;cursor:pointer;padding-bottom:.08em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% var(--linie-staerke);
  transition:background-size .42s var(--ease);}
.adresse-maps:hover,.adresse-maps:focus-visible{background-size:100% var(--linie-staerke);}
@media (hover:none){.adresse-maps{background-size:100% var(--linie-staerke);}}
@media (prefers-reduced-motion:reduce){.adresse-maps{transition:none;}}

/* Bestaetigungsdialog. Er wird von design.js gebaut und liegt EINMAL je Seite
   am Ende des <body>. */
/* RUNDE 12/D3: <dialog> statt <div>. Die Huelle ist durchsichtig und dient nur
   der Zentrierung; abgedunkelt wird ueber ::backdrop. Dadurch liegt der Dialog
   in der TOP LAYER – auf /kalender kann er sonst unter dem Termin-Overlay
   landen, das ebenfalls ein <dialog> ist, und ein z-index hilft dagegen nicht.
   `[open]{display:grid}` ist Pflicht: ohne [open] steht ein <dialog> per
   Vorgabe auf display:none, ein pauschales display:grid wuerde ihn dauerhaft
   sichtbar machen. */
.mapsdialog{position:fixed;inset:0;z-index:1000;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;border:0;color:var(--ink);
  padding:var(--pad);background:transparent;overflow:auto;}
.mapsdialog[open]{display:grid;place-items:center;}
.mapsdialog:not([open]){display:none;}
.mapsdialog::backdrop{background:rgba(45,60,75,.6);}
.mapsdialog__kasten{background:var(--grund);color:var(--ink);border-radius:var(--r);
  padding:var(--s8);max-width:min(30rem,100%);box-shadow:0 18px 50px rgba(45,60,75,.3);}
.mapsdialog__titel{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-block);
  letter-spacing:-.01em;margin-bottom:var(--s3);}
.mapsdialog__adresse{font-family:var(--font-ui);font-weight:700;margin-bottom:var(--s3);}
.mapsdialog__hinweis{font-size:var(--fs-small);line-height:1.6;color:var(--ink-muted);
  margin-bottom:var(--s6);}
.mapsdialog__aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);}
.mapsdialog__ds{display:inline-block;margin-top:var(--s5);font-family:var(--font-ui);
  font-size:var(--fs-small);color:var(--ink-muted);text-decoration:underline;}
.mapsdialog__ds:hover{color:var(--ink);}
/* Hintergrund nicht mitscrollen, solange der Dialog offen ist. */
.dialog-offen,.dialog-offen body{overflow:hidden;}


/* -----------------------------------------------------------------------------
   EINBLENDEN BEIM SCROLLEN
   ----------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.rv.an{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;} html{scroll-behavior:auto;}
}

/* -----------------------------------------------------------------------------
   RUECKMELDUNG BEIM DRUECKEN (Runde 10/P31, Abschnitt 1 der Referenz)

   Befund des Audits: Das Stylesheet hatte KEINE einzige `:active`-Regel. Jede
   sichtbare Rueckmeldung haengt an `:hover` – und `:hover` gibt es auf einem
   Beruehrungsbildschirm nicht. Wer auf dem Telefon einen Knopf drueckte, sah
   bis zum Seitenwechsel gar nichts; bei einer langsamen Verbindung sind das
   mehrere Zehntelsekunden Ungewissheit, in denen man erfahrungsgemaess ein
   zweites Mal drueckt.

   Die Rueckmeldung sitzt auf dem DRUECKEN, nicht auf dem Loslassen: `:active`
   greift ab pointerdown. Kein JavaScript noetig.

   Bewusst sehr kurz (90ms) und sehr klein (0.97): Es geht um die Bestaetigung
   „ich habe dich gehoert", nicht um eine Animation. Zurueck laeuft es ueber
   den normalen Uebergang der jeweiligen Klasse.
   ----------------------------------------------------------------------------- */
.btn:active,.iconlink:active,.seiten__knopf:active:not(:disabled),
.chip:active,.burger:active,.akk__kopf:active,.offcanvas__zu:active{
  transform:scale(.97);
  transition:transform 90ms var(--ease);
}
/* Flaechige Elemente kippen nicht, sie dunkeln nach: Ein skalierter Listen-
   eintrag ueber die volle Breite sieht aus, als haette sich das Layout
   verschoben. */
.person:active,.beitrag:active,.aus__p:active,.antrag:active,
.thema-zeile:active{
  filter:brightness(.97);
  transition:filter 90ms var(--ease);
}
/* Bei reduzierter Bewegung bleibt die Rueckmeldung – sie ist Information, kein
   Schmuck. Nur die Groessenaenderung entfaellt zugunsten einer Aufhellung. */
@media (prefers-reduced-motion:reduce){
  .btn:active,.iconlink:active,.seiten__knopf:active:not(:disabled),
  .chip:active,.burger:active,.akk__kopf:active,.offcanvas__zu:active{
    transform:none;filter:brightness(.94);
  }
}

/* -----------------------------------------------------------------------------
   TRANSPARENZ UND KONTRAST NACH SYSTEMEINSTELLUNG (Runde 10/P31, Abschnitt 14)

   Befund des Audits: `prefers-reduced-motion` war gepflegt, die beiden
   verwandten Abfragen fehlten VOLLSTAENDIG (je 0 Treffer im Stylesheet).
   Sie kosten wenig und helfen genau den Menschen, die sie eingeschaltet
   haben – meist wegen einer Sehbeeintraechtigung.
   ----------------------------------------------------------------------------- */

/* Weniger Transparenz: durchscheinende Flaechen werden deckend. Betroffen sind
   die Kopfzeile (ihre Deckkraft faehrt beim Scrollen von 0 auf 1 – ueber dem
   Hero steht der Text also auf dem Video) und die beiden abdunkelnden
   Hintergruende von Offcanvas-Menue und Kartendialog. */
@media (prefers-reduced-transparency:reduce){
  .site-header{
    background:var(--grund);
    border-bottom-color:var(--linie);
    color:var(--ink);
  }
  /* Ueber dem Hero steht die Kopfzeile dann auf Weiss – die weisse Schrift des
     Hero-Modus waere darauf unlesbar. */
  .hat-hero .site-header{color:var(--ink);}
  .mapsdialog::backdrop{background:rgba(45,60,75,.92);}
  .pmini{background:var(--rhoendorf);}
}

/* Mehr Kontrast: sichtbare Kanten statt angedeuteter. Die Haarlinien des
   Designsystems (13 % Deckkraft) sind bei erhoehtem Kontrastbedarf schlicht
   nicht da; gedaempfter Text rueckt an die Textfarbe heran. */
@media (prefers-contrast:more){
  :root{
    --linie:rgba(45,60,75,.55);
    --linie-stark:rgba(45,60,75,.8);
    --ink-muted:#3f4b56;
    --on-dark-muted:rgba(255,255,255,.92);
  }
  /* Knoepfe und Karten bekommen eine ausdrueckliche Umrandung, damit sie sich
     als Bedienelement vom Grund abheben und nicht nur ueber die Flaeche. */
  .btn,.iconlink,.seiten__knopf,.chip,.vanst{border-width:2px;}
  /* Die einlaufende Unterlaenge ist bei erhoehtem Kontrast dauerhaft sichtbar:
     Ein Verweis, der sich erst beim Ueberfahren zu erkennen gibt, ist keiner. */
  .u,.prose a,a.link{background-size:100% 1.5px;}
}

/* -----------------------------------------------------------------------------
   NOCH NICHT HIER (kommen in ihren Paketen dazu):
     .buehne / .folie / .seg        – Programm-Buehne          (P13)
     .intern-kopf / .kal / .modal   – Kalender                 (P16)
   ----------------------------------------------------------------------------- */

/* Hero-Video: fuellt die Medienebene. Die Quelle setzt design.js erst dann,
   wenn Abspielen in Frage kommt – sonst bleibt es beim Poster. */
/* Standbild und Video liegen UEBEREINANDER (Fix 07.08.2026).
   Das <img> ist die Grundlage – es zeichnet immer, auch ohne JavaScript und
   ohne Video. Das Video liegt darueber und ist zunaechst unsichtbar; es
   blendet erst ein, wenn es wirklich laeuft (`.laeuft`, gesetzt von design.js,
   nachdem play() aufgegangen ist).

   Warum nicht einfach das poster-Attribut: Ein <video> ohne jede Quelle bleibt
   in NETWORK_EMPTY und zeichnet sein Poster NICHT. Auf dem Telefon – wo
   design.js die Quelle bewusst gar nicht erst setzt – blieb der Hero deshalb
   eine leere Rhoendorf-Flaeche mit kaum lesbarer Ueberschrift darauf.

   Dasselbe Muster wie beim Video der Gliederungs-Detailseite. */
.hero__media picture{display:block;position:absolute;inset:0;}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);}
.hero__video.laeuft{opacity:1;}
/* Ohne JavaScript bekommt das Video nie eine Quelle und nie `.laeuft` – es
   bleibt also dauerhaft durchsichtig, und das Standbild darunter ist zu sehen.
   Das ist der gewollte Zustand und braucht keine eigene Regel. */


/* -----------------------------------------------------------------------------
   PROGRAMM-BUEHNE (P13)

   Drei Dinge, an denen es sonst scheitert:

   1. content-visibility muss aufgehoben sein. Eine Sektion mit position:sticky
      ueber mehrere Bildschirmhoehen startet sonst als Platzhalter fester Hoehe;
      sobald der Browser sie tatsaechlich rendert, aendert sich die Dokumenthoehe
      mitten im Scrollen und die Seite springt. design.css setzt
      content-visibility nirgends – die Regel stand in main.css, und die laeuft
      auf dieser Seite nicht mehr. Bleibt als Warnung stehen.

   2. Die Folien duerfen KEINEN Stacking Context erzeugen: kein z-index, kein
      opacity, kein transform auf .folie selbst. Nur dadurch sortieren alle
      Bilder global auf Ebene 1 und alle Textebenen auf Ebene 3 – die
      Voraussetzung dafuer, dass das Bild weich ueberblenden kann, waehrend der
      Text hart umschaltet. Ueberblendeter Text ist unlesbar.

   3. Die Ueberblendungskurve: das darunterliegende Bild bleibt deckend, nur das
      neue blendet ein. Die naheliegende Gegenueberblendung erzeugt in der Mitte
      einen sichtbaren Helligkeitseinbruch. Die Formel in design.js ist bewusst
      so und wird nicht vereinfacht.
   ----------------------------------------------------------------------------- */
/* Bühne */
/* --weg zuerst in vh, dann in svh: kennt der Browser svh nicht (aeltere
   Android-/iOS-Fassungen), bleibt der vh-Wert stehen. Ohne diese Zeile faellt
   die ganze Deklaration weg und die Bahn hat keine Hoehe. */
.buehne{--anz:5;--weg:92vh;--weg:92svh;position:relative;}
.buehne__bahn{height:calc(var(--anz) * 92vh);height:calc(var(--anz) * var(--weg));}
.buehne__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--rhoendorf);}
.folien{position:absolute;inset:0;} .folie{position:absolute;inset:0;}
.folie__bild{position:absolute;inset:0;z-index:1;opacity:0;}
/* Scrim: EINE vollflaechige Toenung von 20 Prozent, kein Verlauf.
   Bewusst nur eine Ebene: uebereinanderliegende Ebenen multiplizieren sich
   (18 % plus 20 % ergeben zusammen rund 34 %), und genau daran lag es, dass
   vom Foto nichts mehr zu sehen war. --foto-ton bleibt deshalb hier aussen
   vor – die Markenfarbe steckt in dieser Flaeche selbst.
   Die Lesbarkeit uebernimmt bei so wenig Toenung der Textschatten unten. */
.folie__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ton-schwach);}
.folie__text{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  padding-top:var(--kopf-h);padding-bottom:clamp(6rem,14vh,9rem);opacity:0;pointer-events:none;
  transition:opacity .38s var(--ease);}
.folie.aktiv .folie__text{opacity:1;}
.folie__nr{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s5);transform:translateY(10px);transition:transform .5s var(--ease);}
.folie__titel{font-family:var(--font-ui);font-weight:800;letter-spacing:-.028em;font-size:clamp(1.7rem,4vw,3rem);
  line-height:1;color:#fff;max-width:24ch;margin-bottom:var(--s5);transform:translateY(14px);transition:transform .55s var(--ease);}
/* Runde 10/P12: Der Fliesstext wird auf eine feste Zeilenzahl GEKUERZT.
 *
 * Vorher lief er ungebremst: .folie__text ist absolut ueber die ganze Folie
 * gelegt und zentriert seinen Inhalt senkrecht (align-items:center). Ein
 * langer Text wuchs also nach OBEN UND UNTEN aus der Folie heraus – und
 * .buehne__pin schneidet mit overflow:hidden ab. Sichtbar war das als harter
 * Schnitt mitten durch die erste Zeile am oberen Rand; unten fiel es weniger
 * auf, weil dort die Segmentleiste steht.
 *
 * -webkit-line-clamp haengt von selbst ein Auslassungszeichen an, und zwar
 * NUR wenn wirklich gekuerzt wurde. Ein kurzer Text bleibt unveraendert – ein
 * fest eingeblendeter Verlauf haette dagegen auch dort eine Kuerzung
 * vorgetaeuscht, die es nicht gibt.
 *
 * Den vollstaendigen Text gibt es eine Zeile darunter: Der Knopf
 * „Weiterlesen" fuehrt auf /partei/programm/{slug}. Er steht dort bereits –
 * gefehlt hat nur die saubere Kuerzung davor.
 *
 * Die Zeilenzahl ist nach Bauhoehe gestaffelt: Auf einem niedrigen Fenster
 * ist weniger Platz zwischen Kopfzeile und Segmentleiste. */
.folie__satz{font-family:var(--font-text);font-size:var(--fs-lead);line-height:1.72;color:#fff;
  max-width:64ch;transform:translateY(18px);transition:transform .6s var(--ease);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;
  overflow:hidden;}
@media (max-height:760px){.folie__satz{-webkit-line-clamp:5;line-clamp:5;}}
@media (max-height:620px){.folie__satz{-webkit-line-clamp:3;line-clamp:3;}}
/* In der statischen Fassung (ohne Skript, bei reduzierter Bewegung, auf dem
   Telefon) stapeln sich die Folien untereinander und haben keine feste Hoehe.
   Dort gibt es nichts abzuschneiden – und ein gekuerzter Text waere schlicht
   Informationsverlust. */
.buehne.statisch .folie__satz{display:block;overflow:visible;-webkit-line-clamp:none;line-clamp:none;}
.folie.aktiv .folie__nr,.folie.aktiv .folie__titel,.folie.aktiv .folie__satz{transform:none;}
.buehne__nav{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-bottom:clamp(1.4rem,3.5vh,2.6rem);}
.buehne__nav ul{display:flex;flex-wrap:wrap;gap:10px;}
/* Bei vielen Hero-Themen werden die Segmente sehr schmal. Eine Mindestbreite
   haelt sie bedienbar; reicht die Zeile nicht, bricht sie um. */
.seg{flex:1 1 0;min-width:28px;} .seg button{width:100%;text-align:left;padding:0;}
.seg__bar{display:block;height:3px;background:rgba(255,255,255,.26);position:relative;overflow:hidden;}
.seg__bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--f,0));transform-origin:left;}
.seg__txt{display:block;margin-top:.6rem;font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease);}
.seg.aktiv .seg__txt{color:#fff;}
@media (max-width:768px){.seg__txt{display:none;}.buehne__nav ul{gap:6px;}}
/* RUNDE 9, mobil: Der Weg JE FOLIE sinkt von 92 auf 62 Prozent der
   Bildschirmhoehe. Fuenf Themen kosteten auf dem Telefon 4,6 Bildschirme
   Scrollen – die Sektion las sich, als komme man nicht an ihr vorbei. Jetzt
   sind es gut drei, die Folien wechseln zuegiger.
   Geaendert wird NUR --weg, also die Bahnlaenge. Die angeheftete Flaeche
   bleibt bildschirmhoch, und design.js rechnet den Fortschritt ohnehin aus
   der tatsaechlichen Bahnhoehe (`r.height - innerHeight`) – es gibt hier
   keine zweite Stelle, die den Wert kennen muesste. */
@media (max-width:820px){
  .buehne{--weg:62vh;--weg:62svh;}
  .buehne__bahn{height:calc(var(--anz) * 62vh);height:calc(var(--anz) * var(--weg));}
}
.buehne.statisch .buehne__bahn{height:auto;}
.buehne.statisch .buehne__pin{position:static;height:auto;overflow:visible;}
.buehne.statisch .folien,.buehne.statisch .folie{position:static;}
.buehne.statisch .folie__bild{position:relative;opacity:1!important;aspect-ratio:21/9;}
.buehne.statisch .folie__scrim{display:none;}
/* RUNDE 20/C3: der untere Wert stand hier bei --s12 (3rem), waehrend die
   Mobile-Fassung darunter bereits --s10 (2,5rem) trug – zwei verschiedene
   Werte fuer denselben Abstand, dazu addiert von der Basisregel oben
   (.folie__text, padding-bottom:clamp(6rem,14vh,9rem)) je nachdem, ob und wie
   vollstaendig eine Regel greift. Jetzt EIN Wert (2,5rem, bestaetigt im
   Runde-20-Mockup), unten wie oben. */
.buehne.statisch .folie__text{position:static;opacity:1;display:block;padding:var(--s8) 0 var(--s10);}
.buehne.statisch .folie__nr,.buehne.statisch .folie__titel,.buehne.statisch .folie__satz{transform:none;}
.buehne.statisch .buehne__nav{display:none;}
/* Bild der Folie: fuellt die Buehne, Toenung liegt im Scrim darueber. */
/* „cover" auf 100svh zoomt ein 16:9-Bild stark an. object-position haelt den
   oberen Bildbereich (dort stehen die Motive), und auf schmalen Geraeten
   greift ohnehin der Hochformat-Zuschnitt. */
.folie__bild img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
/* Hochformat nur auf schmalen Geraeten – ein 16:9-Bild zeigt dort sonst rund
   ein Drittel seiner Breite. */
.folie__bild picture{display:block;width:100%;height:100%;}


/* ==========================================================================
   GLIEDERUNGEN ALS KARTENSTAPEL – ENTFALLEN (RUNDE 12/C1)
   Die Sektion ist vom /partei-Onepager verschwunden; die Gliederungen stehen
   jetzt als aufklappbares Untermenue im Kopf und als Liste in der Fusszeile.
   Saemtliche `.deck*`-Regeln sind mit ihr entfernt worden – nachgewiesen ueber
   eine Suche nach den Klassennamen in ALLEN Ansichten, nicht ueber die
   Abdeckung im Browser: ein Zustand, den man beim Messen nicht getroffen hat,
   waere sonst stillschweigend mitgeloescht worden.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   ENTWICKLER-CREDIT (nur auf den beiden Impressum-Seiten)
   ----------------------------------------------------------------------------- */
/* Die Linie sitzt am aeusseren Container, damit sie – wie der Text – auf die
   Inhaltsbreite zentriert ist und nicht ueber die ganze Seite laeuft. */
.dev-credit-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;
  justify-content:center;text-align:center;padding-top:var(--s6);
  border-top:1px solid var(--linie);
  font-family:var(--font-ui);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);}
.dev-credit{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;justify-content:center;}
.dev-credit__name{font-weight:700;color:var(--ink);}
.dev-credit__sep{opacity:.5;}
.dev-credit__mail{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  padding-bottom:2px;transition:background-size .42s var(--ease);}
.dev-credit__mail:hover{background-size:100% 1.5px;}

/* -----------------------------------------------------------------------------
   KI-TRANSPARENZ-MARKE (Fusszeile)

   Nur ein kleines Zeichen: das gelernte Funkeln-Symbol in der gedaempften
   Fusszeilenfarbe. Kein Text im Ruhezustand; beim Ueberfahren oder Fokussieren
   erscheint „KI-Transparenz" daneben. Der Text ist im Markup dauerhaft
   vorhanden und nur visuell eingeklappt – Vorlesesoftware und Suchmaschinen
   lesen ihn immer.
   ----------------------------------------------------------------------------- */
.ki-mark{display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;color:inherit;}
.ki-mark__glyph{flex:none;opacity:.75;transition:opacity var(--t);}
.ki-mark:hover .ki-mark__glyph,
.ki-mark:focus-visible .ki-mark__glyph{opacity:1;}
/* AUFKLAPPEN OHNE GERATENE BREITE.
   Bis v0.166.0 stand hier `max-width:0` -> `max-width:12ch`. Das war eine
   geschaetzte Zahl, und sie war zu klein: „KI-Transparenz" braucht in der
   Fusszeile 109 px, 12ch sind dort rund 87 px – die letzten beiden Zeichen
   fehlten. Nachgemessen am 06.08.2026 an der laufenden Seite.

   Eine groessere Zahl waere dieselbe Falle mit anderem Wert: `ch` haengt an
   Schriftart und Schriftschnitt, und die Marke steht in ZWEI Umgebungen mit
   verschiedenen Groessen (Fusszeile 11,5 px, Video 10,6 px) – dazu die
   Rueckfallschrift, solange Inter noch nicht geladen ist.

   Deshalb wird jetzt die Spaltenbreite eines Rasters von `0fr` auf `1fr`
   gefahren: `1fr` ist per Definition genau die Inhaltsbreite. Es gibt keinen
   Wert mehr, den man falsch schaetzen koennte – gleich, wie der Text heisst
   oder in welcher Schrift er steht.

   Faellt die Interpolation von `fr` aus (sehr alte Browser), springt die
   Beschriftung ohne Uebergang auf – sie ist dann VOLLSTAENDIG da. Das ist die
   richtige Rueckfallebene: lieber ohne Animation als abgeschnitten. */
.ki-mark__label{display:grid;grid-template-columns:0fr;opacity:0;
  transition:grid-template-columns .32s var(--ease),opacity .32s var(--ease);}
/* Das Abschneiden waehrend des Aufklappens passiert hier drinnen – das
   Rasterelement selbst darf nicht `overflow:hidden` tragen, sonst wird der
   Fokusring der Marke mit abgeschnitten. */
.ki-mark__label>span{overflow:hidden;white-space:nowrap;}
.ki-mark:hover .ki-mark__label,
.ki-mark:focus-visible .ki-mark__label{grid-template-columns:1fr;opacity:1;}

/* AM HERO-VIDEO (Art. 50 EU-KI-VO, anwendbar seit 02.08.2026).
   Dasselbe Zeichen wie in der Fusszeile – nur hell, klein und in der unteren
   rechten Ecke des Videos. Es liegt UEBER dem Scrim (z-index 3, wie der
   Runter-Pfeil) und unter nichts, was man anklickt.
   Rechts unten und nicht links: links unten steht auf beiden Heros der
   Textblock mit Ueberschrift und Knoepfen. */
.ki-mark--video{position:absolute;right:var(--pad);bottom:1rem;z-index:3;
  color:var(--on-dark-muted);font-family:var(--font-ui);font-size:var(--fs-label);
  letter-spacing:.02em;padding:.25rem;}
.ki-mark--video:hover,.ki-mark--video:focus-visible{color:#fff;}
/* Auf Zeigegeraeten reicht das Aufklappen beim Ueberfahren. Wo es kein
   Ueberfahren gibt – also auf jedem Telefon –, steht der Text dauerhaft:
   sonst waere die Kennzeichnung auf genau den Geraeten unsichtbar, auf denen
   die meisten Besucher ankommen, und ein aufklappbares Etikett erfuellt
   „spaetestens bei der ersten Wahrnehmung" dort nicht. */
@media (hover:none){
  .ki-mark--video .ki-mark__label{grid-template-columns:1fr;opacity:1;}
}
/* Der Runter-Pfeil sitzt mittig unten, die Marke rechts – auf sehr schmalen
   Schirmen kaemen sie sich sonst ins Gehege. */
@media (max-width:420px){
  .ki-mark--video{bottom:.5rem;font-size:.66rem;}
}

/* -----------------------------------------------------------------------------
   ARTIKELKOPF
   Das Beitragsbild steht NEBEN dem Titelblock – ein 1:1-Bild in voller
   Textspaltenbreite waere ein Klotz von ueber 1000 Pixeln Hoehe. Mobil kippt
   das: dort steht das Bild ueber dem Rest, nebeneinander bliebe von beidem
   nichts uebrig.
   ----------------------------------------------------------------------------- */
.artikel__kopf{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:var(--s10);align-items:center;}
@media (max-width:820px){
  .artikel__kopf{grid-template-columns:1fr;gap:var(--s6);}
  .artikel__kopf .beitrag__bild{max-width:420px;}
}

/* -----------------------------------------------------------------------------
   PERSONENSEITE
   ----------------------------------------------------------------------------- */

/* Kopf der Personenseite. Mobil steht der Kasten UNTER dem Bild – nebeneinander
   bleibt auf 380 Pixeln von beidem nichts uebrig. */
/* Foto und Namenskasten stehen dicht beieinander – sie gehoeren zusammen und
   lesen sich als ein Block, nicht als zwei Kacheln. */
.pkopf{display:grid;grid-template-columns:320px 1fr;gap:var(--s3);align-items:stretch;}
/* Das Portraet steht in einer festen Spalte; seine Hoehe kommt aus dem
   Seitenverhaeltnis. `min-height` ist die Sicherung dagegen, dass die Zelle in
   einem gestreckten Raster auf die Inhaltshoehe faellt – das Bild liegt
   absolut, die Zelle haette dann rechnerisch gar keinen Inhalt. */
@media (min-width:821px){
  .pkopf .person__bild{min-height:min(70vh,480px);}
}
/* Tablet und Telefon: Foto ueber dem Kasten, beide untereinander (Runde 10/P1).
   VORHER stand hier `aspect-ratio:auto` mit `height:min(52vh,420px)`. Diese
   feste Hoehe war der Fehler: Sie schnitt aus dem hochformatigen Portraet
   einen Streifen heraus, und weil `object-fit:cover` fuellt, verschwand auf
   Tablet-Breite alles unterhalb der Brust. Auf dem Telefon blieb vom Motiv
   ebenfalls wenig uebrig. `gap:0` liess den Kasten zusaetzlich ohne jeden
   Abstand unmittelbar am Bild kleben – Foto und Kasten lasen sich als eine
   angeschnittene Flaeche.
   Die feste Hoehe stand dort aus einem echten Grund: Das Bild liegt absolut
   im Rahmen, die Rasterzelle hat rechnerisch keinen Inhalt, und
   `align-items:stretch` streckte sie ueber ihr `aspect-ratio` hinweg. Genau
   das loest `align-self:start` – die Zelle darf ihre eigene Hoehe behalten,
   und das Seitenverhaeltnis gilt wieder. Ergebnis: das VOLLE 2:3-Portraet
   ueber die ganze verfuegbare Breite, ungeschnitten, mit sichtbarem Abstand
   zum Kasten darunter. */
@media (max-width:820px){
  .pkopf{grid-template-columns:1fr;gap:var(--s6);align-items:start;}
  .pkopf .person__bild{max-width:none;aspect-ratio:2/3;height:auto;align-self:start;}
  /* Mittig statt oben buendig: Bei vollem Seitenverhaeltnis gibt es nichts
     mehr wegzuschneiden, und die Person steht in der Mitte ihres Bildes. */
  .pkopf .person__bild img{object-position:center;}
}

/* Eyebrow in Fliesstext-Naehe: die gedaempfte Fusszeilenfarbe war dort zu hell,
   weil daneben kein dunkler Text steht, gegen den sie sich absetzt. */
.eyebrow--dunkel{color:var(--ink);}

/* Kontakt im Kopfkasten: untereinander, links unten. */
.pkontakt{display:flex;flex-direction:column;gap:.35rem;font-family:var(--font-ui);
  font-size:var(--fs-small);color:var(--on-dark);overflow-wrap:anywhere;}
.pkontakt a{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  padding-bottom:2px;transition:background-size .42s var(--ease);}
.pkontakt a:hover{background-size:100% 1.5px;}
.pkontakt__social{display:flex;gap:.5rem;margin-top:.5rem;}
.pkontakt__social .iconlink svg{width:18px;height:18px;fill:currentColor;}

/* „Ueber mich" darf bis an die Faktentabelle heranlaufen. */
.pprofil{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);gap:var(--s10);align-items:start;}
@media (max-width:820px){.pprofil{grid-template-columns:1fr;gap:var(--s8);}}

/* Abschnittsmarke der Aemter – etwas groesser als das normale Eyebrow. */
.eyebrow--gross{font-size:.86rem;letter-spacing:.12em;color:var(--ink);margin-bottom:var(--s6);}
.eyebrow--gross .bogen{width:1.45em;height:1.04em;}

/* Ein Amt: Gruppe und Rolle UNTEREINANDER. Nebeneinander (Tabelle) brach der
   lange Gremienname mobil um und die Rolle rutschte weg. */
/* Untereinander, nicht nebeneinander: die Gremiennamen sind unterschiedlich
   lang, im mehrspaltigen Raster stand die Rolle mal direkt unter dem Namen und
   mal zwei Zeilen tiefer. */
.aemter{display:block;}
.amt{padding-block:var(--s4);border-top:1px solid var(--linie);}
.amt__grp{display:block;font-family:var(--font-ui);font-weight:700;font-size:1rem;
  line-height:1.3;letter-spacing:-.008em;overflow-wrap:anywhere;hyphens:auto;}
.amt__rolle{display:block;margin-top:.15rem;font-family:var(--font-ui);font-weight:500;
  font-size:var(--fs-small);color:var(--ink-muted);overflow-wrap:anywhere;}
.amt__kopf{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
  margin:var(--s8) 0 var(--s4);}

/* Die Hauptrolle des Abschnitts – gross und allein. */
.hauptrolle{font-family:var(--font-ui);font-weight:800;letter-spacing:-.026em;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.05;margin-bottom:var(--s5);
  overflow-wrap:anywhere;hyphens:auto;}

/* Bei nur 20 Prozent Toenung traegt der Schatten die Lesbarkeit, nicht die
   Flaeche. Er ist weich und dunkel genug fuer helle Motive, ohne dass der Text
   „gerahmt" aussieht. Nur in der Buehne – ueber den Baendern und im
   Kartenstapel liegt weiterhin genug Flaeche unter dem Text. */
.folie__nr,
.folie__titel,
.folie__satz{text-shadow:0 1px 2px rgba(15,22,28,.55), 0 6px 24px rgba(15,22,28,.45);}

/* Statische Fassung (ohne JavaScript, bei prefers-reduced-motion): Bild oben,
   Text darunter auf der WEISSEN Seite. Weisse Schrift und der Schatten fuer
   Fotohintergrund waeren dort unlesbar bzw. schmutzig – beides wird
   zurueckgenommen. */
.buehne.statisch .folie__titel{color:var(--ink);}
.buehne.statisch .folie__satz{color:var(--ink-muted);}
.buehne.statisch .folie__nr,
.buehne.statisch .folie__titel,
.buehne.statisch .folie__satz{text-shadow:none;}

/* -----------------------------------------------------------------------------
   SEITE EINER GLIEDERUNG (/partei/{slug})
   Text breit, Anschrift daneben. Mobil untereinander – die Anschrift gehoert
   dann unter den Text, nicht daneben.
   ----------------------------------------------------------------------------- */
.glseite__kopf{display:grid;grid-template-columns:minmax(0,4fr) minmax(240px,1fr);
  gap:var(--s10);align-items:start;}
.glseite__adresse address{font-style:normal;font-family:var(--font-ui);
  font-size:var(--fs-small);line-height:1.7;}
.glseite__adresse strong{display:block;font-weight:700;}
.glseite__kontakt{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--s4);
  font-family:var(--font-ui);font-size:var(--fs-small);}
.glseite__kontakt a{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  padding-bottom:2px;transition:background-size .42s var(--ease);}
.glseite__kontakt a:hover{background-size:100% 1.5px;}
@media (max-width:820px){.glseite__kopf{grid-template-columns:1fr;gap:var(--s8);}}

/* -----------------------------------------------------------------------------
   MOBIL: volle Hoehe fuer Hero und Buehne

   Auf dem Telefon wirkten beide zu kurz. Zwei Ursachen:
   1. Die Buehne blieb in der statischen Fassung stehen, sobald design.js
      abbrach – dort sind die Folien 21:9-Streifen. Das Skript ist inzwischen
      baustein-weise gekapselt; die statische Fassung bekommt hier trotzdem ein
      Format, das auf einem Telefon nicht wie ein Fehler aussieht.
   2. Feste Pixel-Deckel – ein Prozentwert hat dieses Problem nicht.
   ----------------------------------------------------------------------------- */
@media (max-width:820px){
  /* Der Hero ist nicht sticky, hier ist dvh richtig: er soll exakt so hoch
     sein wie das, was der Besucher gerade sieht. */
  .hero{min-height:100svh;min-height:100dvh;}
  .hero__inner{padding-block:clamp(2rem,6vh,4rem);}

  /* Statische Fassung der Buehne: hochkant statt Kinoformat. */
  .buehne.statisch .folie__bild{aspect-ratio:4/5;}
  .buehne.statisch .folie__text{padding:var(--s6) 0 var(--s10);}

  /* Buehne: der Text stand mittig in einem Kasten mit viel Polsterung. Passte
     er nicht hinein, schnitt `overflow:hidden` der Buehne ihn oben UND unten ab
     – es sah aus, als sei die Folie zu gross fuer den Bildschirm. Jetzt sitzt
     er unten, mit knapper Polsterung, kleinerer Schrift und begrenzter
     Zeilenzahl. Angeschnitten wird damit nichts mehr. */
  .folie__text{align-items:flex-end;padding-top:calc(var(--kopf-h) + var(--s4));
    padding-bottom:clamp(4.5rem,12vh,6rem);}
  .folie__titel{font-size:clamp(1.5rem,7.5vw,2.2rem);max-width:none;margin-bottom:var(--s4);}
  .folie__satz{font-size:1rem;line-height:1.6;max-width:none;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
  .folie__nr{margin-bottom:var(--s3);}
}

/* Sehr niedrige Fenster (Telefon quer): der Hero darf mitwachsen, damit der
   Text nicht auf dem Bild klebt. */
@media (max-height:520px){
  .hero{min-height:560px;}
}

/* -----------------------------------------------------------------------------
   ANGEDOCKTE ZEILE AUF DER PERSONENSEITE
   Erscheint, sobald das Portraet aus dem Blick gescrollt ist. Quadratischer
   Ausschnitt aus demselben 2:3-Foto: oben buendig, unten abgeschnitten – der
   Kopf sitzt im oberen Drittel.
   ----------------------------------------------------------------------------- */
.pmini{position:fixed;top:var(--kopf-h);left:0;right:0;z-index:880;
  background:var(--rhoendorf);color:#fff;border-bottom:1px solid rgba(255,255,255,.14);}
.pmini__inner{display:flex;align-items:center;gap:.7rem;padding-block:.45rem;min-height:52px;}
.pmini__bild{width:40px;height:40px;flex:none;overflow:hidden;border-radius:var(--r);
  background:#1e2831;display:grid;place-items:center;}
.pmini__bild img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.pmini__mono{font-family:var(--font-ui);font-weight:800;font-size:.85rem;color:rgba(255,255,255,.5);}
.pmini__name{font-family:var(--font-ui);font-weight:700;font-size:.95rem;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pmini__sep{opacity:.45;}
/* RUNDE 12/B5: .pmini__rolle und .pmini__sep--rolle sind entfallen. Die Zeile
   traegt nur noch Bild, Name und Anschrift; die Regeln hatten damit keinen
   Erzeuger mehr im Markup. Geloescht wurde erst nach einer Suche ueber alle
   Views – Browser-Abdeckung allein taugt hier nicht als Nachweis. */
.pmini__mail{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--on-dark-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pmini__mail:hover{color:#fff;}
/* Ganz schmal bleiben nur Foto und Name: Anschrift und Trenner passen dann
   nicht mehr in eine Zeile, und die Zeile bleibt ausdruecklich einzeilig. */
@media (max-width:520px){.pmini__sep,.pmini__mail{display:none;}}

/* -----------------------------------------------------------------------------
   VISITENKARTE am Fuss der Personenseite
   ----------------------------------------------------------------------------- */
.vkarte{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s6);padding:var(--s8);background:var(--grund-alt);border-radius:var(--r);}
.vkarte__name{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-block);
  letter-spacing:-.02em;margin-bottom:var(--s3);}
.vkarte__zeilen{display:flex;flex-direction:column;gap:.25rem;
  font-family:var(--font-ui);font-size:var(--fs-small);}
.vkarte__zeilen a{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  padding-bottom:2px;transition:background-size .42s var(--ease);}
.vkarte__zeilen a:hover{background-size:100% 1.5px;}

/* Sektionskopf ohne Abschlusslinie. Ueber Terminlisten stand sonst zwei Mal
   ein waagerechter Strich untereinander: einer vom Kopf, einer von der ersten
   Listenzeile. */
.sec__kopf--blank{border-bottom:0;padding-bottom:0;margin-bottom:var(--s6);}

/* -----------------------------------------------------------------------------
   SONSTIGE GREMIEN – Akkordeon mit Titelsuche (Runde 13/8)

   Die Wendekarten aus Runde 10/P6 sind ersatzlos entfallen: Vorderseite mit
   dem Namen, Rueckseite mit der Besetzung, gedreht bei :hover/:focus-within.
   Sie sahen gut aus und waren schlecht zu benutzen – auf jedem
   Beruehrungsbildschirm gibt es kein Ueberfahren (dort lagen sie ohnehin
   flach), am Schreibtisch musste man jede Karte einzeln anfahren, um die
   Besetzung zu sehen, und durchsuchen liess sich der Bestand gar nicht.

   Damit sind auch entfallen: die feste Kartenhoehe (F1/1), die drei
   Farbabstufungen (F1/2), die eigene Bewegungskurve (F1/3) und die beiden
   Sonderfaelle fuer `hover:none` und `prefers-reduced-motion`. Ein Bauteil,
   das es nicht mehr gibt, braucht keine vier Ausnahmen.

   Die Gremien nutzen jetzt das Akkordeon der Ausschuesse (.akk*) – hier
   stehen nur noch Suchfeld, Trefferzeichnung und Leer-Hinweis.
   ----------------------------------------------------------------------------- */
.gremien-suche{max-width:26rem;margin-bottom:var(--s5);}
/* Fundstelle im Titel: dezent unterlegt, KEINE Farbumkehr. `mark` bringt in
   jedem Browser eine grelle Vorgabe mit (meist Gelb) – die gehoert nicht in
   diese Palette. Die Schriftfarbe bleibt unveraendert, damit der Titel im
   aufgeklappten wie im zugeklappten Zustand gleich liest. */
mark.treffer{background:color-mix(in srgb,var(--gold) 30%,transparent);color:inherit;
  border-radius:2px;padding:0 .1em;}
/* Kein Treffer: Lupe und ein Satz, mehr nicht. Der Hinweis steht dort, wo
   sonst die Liste beginnt, damit er nicht uebersehen wird. */
.gremien-leer{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s6) var(--s5);border:1px solid var(--linie);border-radius:var(--r);
  color:var(--ink-muted);font-size:var(--fs-small);}
.gremien-leer__lupe{flex:none;display:inline-flex;}
.gremien-leer__lupe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;}

/* Antrag: die ganze Zeile ist der Link, wenn ein PDF hinterlegt ist. Die
   Kennzeichnung rechts ist dann nur noch Beschriftung, kein eigenes Ziel. */
a.antrag{color:inherit;}
span.antrag__pdf{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;
  border:1px solid var(--linie);border-radius:var(--r);white-space:nowrap;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;transition:background-color var(--t),border-color var(--t),color var(--t);}
a.antrag:hover span.antrag__pdf{background:var(--accent);border-color:var(--accent);color:var(--rhoendorf);}

/* -----------------------------------------------------------------------------
   SEITE EINES PROGRAMM-THEMAS (/partei/programm/{slug})
   ----------------------------------------------------------------------------- */
.thema-kopf{position:relative;min-height:min(56vh,520px);display:flex;align-items:flex-end;
  background:var(--rhoendorf);overflow:hidden;}
.thema-kopf--leer{background:var(--rhoendorf);}
.thema-kopf__bild{position:absolute;inset:0;}
.thema-kopf__bild picture,.thema-kopf__bild img{display:block;width:100%;height:100%;object-fit:cover;}
/* Dieselbe zurueckhaltende Toenung wie in der Buehne: 20 Prozent, vollflaechig. */
/* Hier traegt die Flaeche einen grossen Titel und daneben nichts – kraeftig
   toenen, sonst verschwindet die Schrift im Motiv. */
.thema-kopf__scrim{position:absolute;inset:0;background:var(--ton-stark);}
.thema-kopf__inner{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4rem);}
.thema-kopf__inner .h-page{text-shadow:0 1px 2px rgba(15,22,28,.55), 0 6px 24px rgba(15,22,28,.45);}

.thema-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);
  padding-top:var(--s8);border-top:1px solid var(--linie);}
.thema-blaettern__seite{display:flex;align-items:center;gap:.7rem;
  transition:padding .38s var(--ease);}
.thema-blaettern__seite--weiter{justify-content:flex-end;text-align:right;}
.thema-blaettern__seite--zurueck:hover{padding-right:.5rem;}
.thema-blaettern__seite--weiter:hover{padding-left:.5rem;}
.thema-blaettern__titel{display:block;font-family:var(--font-ui);font-weight:700;
  font-size:1rem;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere;}
.pf--zurueck{transform:rotate(180deg);}
@media (max-width:640px){
  .thema-blaettern{grid-template-columns:1fr;gap:var(--s5);}
  .thema-blaettern__seite--weiter{justify-content:flex-start;text-align:left;}
}

/* Weiterlesen aus der Buehne heraus – auf breiten Bildschirmen unnoetig, dort
   steht der Text vollstaendig da. */
.folie__mehr{margin-top:var(--s5);}
@media (min-width:821px){.folie__mehr{display:none;}}

/* -----------------------------------------------------------------------------
   KOPF DER GLIEDERUNGSSEITE mit Video im Hintergrund
   Liegt Bewegtbild vor, steht der Kopf auf Rhoendorf und der Text in Weiss.
   Ohne Medien bleibt es der normale helle Sektionskopf.
   ----------------------------------------------------------------------------- */
.glkopf{position:relative;}
.glkopf--medien{background:var(--rhoendorf);color:var(--on-dark);overflow:hidden;}
.glkopf__media{position:absolute;inset:0;}
/* Das Video ist von Anfang an sichtbar – bis es laeuft, zeigt es sein Poster.
   Im Kartenstapel blendet es ein, weil dort der Rhoendorf-Verlauf darunter ein
   sinnvoller Zwischenzustand ist; hier waere die Flaeche schlicht leer, wenn
   das Abspielen ausbleibt (Datensparmodus, prefers-reduced-motion, blockiertes
   Autoplay). */
.glkopf__media video,.glkopf__media img{width:100%;height:100%;object-fit:cover;}

/* EINE flaechige Toenung, kein Verlauf und keine zweite Ebene.
   Vorher lagen hier ein senkrechter Verlauf (.72 bis .88) UND --foto-ton (.18)
   uebereinander. Deckkraft multipliziert sich: unten kamen rund 90 Prozent
   zusammen, und der Verlauf machte das Bild oben hell und unten fast schwarz –
   das sah aus wie ein Fehler, nicht wie eine Toenung.
   0.6 ist der Kompromiss: hier steht ein ganzer Absatz Fliesstext darauf, die
   20 Prozent der Buehne (dort nur Titel und ein Satz) reichen dafuer nicht. */
.glkopf__scrim{position:absolute;inset:0;background:var(--ton-stark);}
.glkopf--medien > .wrap{position:relative;z-index:2;}
.glkopf--medien .h-page,.glkopf--medien .prose,.glkopf--medien address{color:#fff;}
.glkopf--medien .eyebrow,.glkopf--medien .eyebrow--dunkel{color:var(--on-dark-muted);}
.glkopf--medien .glseite__kontakt a,.glkopf--medien .prose a{color:#fff;}
.glkopf--medien .btn{border-color:rgba(255,255,255,.5);color:#fff;}

/* -----------------------------------------------------------------------------
   /partei/programm – JE THEMA EINE SEKTION (Runde 13/4)

   Ersetzt die frueheren Anriss-Zeilen (.prgm*): eine Zeile je Thema mit
   seitlich angeschnittenem Foto und den ersten 220 Zeichen. Die Seite hiess
   „das ganze Programm" und war ein Inhaltsverzeichnis – wer lesen wollte,
   musste zwoelfmal auf eine Unterseite und zwoelfmal zurueck.

   Jede Sektion beginnt jetzt mit dem UEBERLAGERTEN Bild und traegt darunter
   den vollstaendigen Text.

   ZUR KOPFHOEHE: Sie ist bewusst flacher als der Kopf der Einzelseite
   (.thema-kopf, min(56vh,520px)). Dort ist der Bildkopf der Seitenanfang, hier
   wiederholt er sich ein Dutzend Mal – zwoelf halbe Bildschirme hintereinander
   waeren keine Seite mehr, sondern eine Diaschau. Nach unten begrenzt, damit
   auch ein sehr hoher Bildschirm nicht drei Bilder gleichzeitig zeigt.
   ----------------------------------------------------------------------------- */
.prgm-sek{margin-bottom:var(--s16);}
.prgm-sek:last-of-type{margin-bottom:var(--s12);}
.prgm-sek__kopf{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(200px,30vh,340px);background:var(--rhoendorf);}
.prgm-sek__kopf--leer{background:var(--rhoendorf);}
.prgm-sek__bild{position:absolute;inset:0;}
.prgm-sek__bild picture,.prgm-sek__bild img{display:block;width:100%;height:100%;object-fit:cover;}
/* Deckende Abdunklung, kein Verlauf: Der Text steht ueber der GANZEN Breite und
   damit ueber jedem beliebigen Motiv. Ein Verlauf traegt nur dort, wo man
   weiss, wo der Text sitzt. */
.prgm-sek__ton{position:absolute;inset:0;background:var(--ton-stark);}
.prgm-sek__inner{position:relative;z-index:2;width:100%;
  display:flex;align-items:flex-end;gap:var(--s5);
  padding-block:clamp(1.75rem,4vw,2.75rem);}
/* Die Nummer traegt den Rhythmus der Seite – sie ersetzt die Trennlinien der
   frueheren Liste. Auf der dunklen Flaeche steht sie in Gold, nicht im Akzent:
   Tuerkis auf Rhoendorf ist zu nah beieinander. */
.prgm-sek__nr{flex:none;font-family:var(--font-ui);font-weight:800;
  font-size:clamp(1.6rem,4vw,3rem);line-height:1;letter-spacing:-.04em;
  color:var(--gold);font-variant-numeric:tabular-nums;}
.prgm-sek__inner .h-section{text-shadow:0 1px 2px rgba(15,22,28,.55), 0 6px 24px rgba(15,22,28,.45);}
.prgm-sek__text{padding-block:var(--s8) 0;}
.prgm-sek__einzeln{margin-top:var(--s6);font-family:var(--font-ui);font-size:var(--fs-small);}
.prgm-sek__einzeln a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-muted);}
.prgm-sek__einzeln a:hover,.prgm-sek__einzeln a:focus-visible{color:var(--ink);}
.prgm-sek__einzeln .pf svg{width:1em;height:1em;}

@media (max-width:700px){
  /* Auf dem Telefon rueckt die Nummer ueber die Rubrik statt daneben – neben
     einem umbrechenden Titel bliebe fuer beides zu wenig Breite. */
  .prgm-sek__inner{flex-direction:column;align-items:flex-start;gap:var(--s2);}
}

/* -----------------------------------------------------------------------------
   Liste der uebrigen Themen auf /partei (unter der Buehne)
   ----------------------------------------------------------------------------- */
.thema-zeile{display:grid;grid-template-columns:3.2rem 1fr auto;gap:var(--s2) var(--s5);
  align-items:center;padding-block:var(--s5);border-bottom:1px solid var(--linie);
  color:inherit;transition:padding-left .38s var(--ease),background-color var(--t);}
a.thema-zeile:hover{padding-left:.7rem;background:var(--grund-alt);}
.thema-zeile__nr{font-family:var(--font-ui);font-weight:800;font-size:1.3rem;
  line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;}
.thema-zeile__titel{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-block);
  line-height:1.25;letter-spacing:-.012em;overflow-wrap:anywhere;}
.thema-zeile__pfeil{color:var(--ink-muted);transition:transform .38s var(--ease);}
a.thema-zeile:hover .thema-zeile__pfeil{transform:translateX(.3rem);color:var(--ink);}
@media (max-width:640px){
  .thema-zeile{grid-template-columns:2.6rem 1fr;}
  .thema-zeile__pfeil{display:none;}
}


/* -----------------------------------------------------------------------------
   HILFSKLASSEN (Oe-14)

   Sie loesen die style-Attribute aus den Ansichten ab. Zweck ist nicht
   Bequemlichkeit, sondern dass das Aussehen wieder EINE Quelle hat – und dass
   die CSP auf Dauer ohne `style-src 'unsafe-inline'` auskommt.

   Aufgenommen wird nur, was in den Ansichten mehrfach vorkam. Einmalige
   Sonderfaelle bekommen weiterhin eine eigene Komponentenklasse, keine
   Hilfsklasse – ein Baukasten aus lauter Einzelstuecken waere nur eine andere
   Schreibweise fuer Inline-Stile.
   ----------------------------------------------------------------------------- */
.u-flex{display:flex;}
.u-wrap{flex-wrap:wrap;}
.u-gap-2{gap:var(--s2);}
.u-gap-3{gap:var(--s3);}
.u-self-center{align-self:center;}
.u-voll-breite{grid-column:1 / -1;}
.u-mt-0{margin-top:0;}
.u-mt-5{margin-top:var(--s5);}
.u-mt-8{margin-top:var(--s8);}
.u-mt-12{margin-top:var(--s12);}
.u-mb-4{margin-bottom:var(--s4);}
.u-mb-8{margin-bottom:var(--s8);}
.u-pt-0{padding-top:0;}
.u-linie-oben{border-top:1px solid var(--linie);}
.u-linie-stark-oben{border-top-color:var(--linie-stark);}
/* Weiss als Textfarbe steht nur ueber Foto, Video oder rhoendorfer Flaeche –
   nie auf hellem Grund. Deshalb eine benannte Klasse statt einer Farbliste. */
.u-auf-dunkel{color:#fff;}
.u-fehler{color:var(--rot);}

/* Bilder, die ihre Flaeche fuellen. `.bild-fuell` haengt zusaetzlich im
   Elternelement (position:relative wird dort gesetzt), `.bild-cover` fuellt
   nur die eigene Box. */
.bild-fuell{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bild-cover{width:100%;height:100%;object-fit:cover;}
.bild-pos-oben{object-position:top center;}
.bild-pos-links{object-position:left center;}
.bild-pos-rechts{object-position:right center;}

/* Formular-Kleinteile */
/* Das Honigtopf-Feld muss fuer Automaten im Dokument stehen und fuer Menschen
   verschwinden. `hidden` waere hier falsch: das Attribut ist eine Aussage
   ueber Relevanz, nicht ueber Darstellung – und manche Automaten ueberspringen
   genau danach. */
.honeypot{display:none;}
.form-schmal{max-width:min(68ch,100%);}
/* Feldbezogene Fehlermeldung. Sie steht IM Label, damit aria-describedby auf
   sie zeigen kann, ohne dass die Beschriftung ihren Bezug verliert. */
.feld__fehler{display:block;margin-top:.35rem;font-family:var(--font-ui);
  font-size:var(--fs-small);color:var(--rot);}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"]{border-color:var(--rot);}
/* Reihe aus Chips (Schwerpunkte auf der Personenseite). Engerer Abstand als
   --s2, deshalb eine eigene Klasse und keine Hilfsklasse. */
.chip-reihe{display:flex;gap:.4rem;flex-wrap:wrap;}
/* Suchfeld der Beitragsliste: eigene Breite, kein Aussenabstand nach unten. */
.feld--such{max-width:420px;margin:0;}

/* Zaehlerzeile der aufklappbaren Sektionen („24 von 60"). Sie ist die
   Live-Region, ueber die Vorlesesoftware den Wechsel mitbekommt – sichtbar
   ist sie ebenfalls, sonst waere sie eine Ansage ohne Entsprechung. */
.mehr-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);}
.mehr-zaehler{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-muted);}

/* -----------------------------------------------------------------------------
   VERANSTALTUNGSKARTE (Runde 10/P7)
   Veranstaltungen sahen aus wie Termine – dieselbe `.liste__row`. Sie sind
   aber etwas anderes: Man nimmt teil und meldet sich an. Deshalb eine eigene
   Karte mit grossem Datumsblock, Anmeldestand und Anmeldeknopf; die Termine
   bleiben die schlichte Liste, und der Unterschied ist sofort sichtbar.
   ----------------------------------------------------------------------------- */
.vanst-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--s6);}
.vanst{display:grid;grid-template-columns:auto 1fr;background:var(--grund);
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);}
.vanst:hover{border-color:var(--linie-stark);box-shadow:0 10px 30px rgba(45,60,75,.08);}
/* Der Datumsblock ist FLAECHE, nicht Text auf Akzentfarbe: Cadenabbia und Gold
   fallen als Textfarbe durch WCAG AA (siehe Kopf dieser Datei). Also Rhoendorf
   als Grund und der Akzent als Kante. */
.vanst__datum{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;padding:var(--s5) var(--s4);min-width:5.5rem;
  background:var(--rhoendorf);color:#fff;border-right:3px solid var(--accent);}
.vanst__tag{font-family:var(--font-ui);font-weight:800;font-size:2.1rem;line-height:1;
  letter-spacing:-.03em;}
.vanst__monat{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;}
.vanst__jahr{font-family:var(--font-ui);font-size:var(--fs-label);color:var(--on-dark-muted);}
.vanst__inhalt{padding:var(--s5);display:flex;flex-direction:column;gap:.35rem;}
.vanst__stand{align-self:flex-start;font-family:var(--font-ui);font-weight:700;
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:var(--r);margin-bottom:.2rem;}
/* Gruen/grau statt der Akzentfarbe: „offen" und „geschlossen" sind ein
   Zustand, keine Marke – und beide muessen als TEXT lesbar sein. */
.vanst__stand--offen{background:rgba(47,143,91,.12);color:#22693f;}
.vanst__stand--warteliste{background:rgba(255,166,0,.16);color:#7a5200;}
.vanst__stand--geschlossen{background:rgba(45,60,75,.08);color:var(--ink-muted);}
.vanst__titel{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-block);
  line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere;}
.vanst__zeile{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-muted);}
.vanst__text{font-size:var(--fs-small);line-height:1.6;margin-top:.4rem;}
.vanst__aktion{margin-top:var(--s4);}
/* Schmal: Datumsblock ueber den Inhalt, quer statt hochkant – sonst bleiben
   neben 5,5rem Datum keine 12rem fuer den Titel. */
@media (max-width:420px){
  .vanst{grid-template-columns:1fr;}
  .vanst__datum{flex-direction:row;gap:.5rem;align-items:baseline;justify-content:flex-start;
    padding:var(--s3) var(--s5);border-right:0;border-bottom:3px solid var(--accent);}
  .vanst__tag{font-size:1.5rem;}
}

/* -----------------------------------------------------------------------------
   GESCHAEFTSSTELLE: FOTO UND ANSCHRIFT (Runde 10/P17)
   Foto links, Anschrift rechts. `auto-fit` mit Mindestbreite statt fester
   Spalten: Fehlt eines von beiden, nimmt das andere die volle Breite, ohne
   dass es dafuer eine zweite Regel braucht.
   ----------------------------------------------------------------------------- */
.gs-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));
  gap:var(--s8);align-items:start;margin-bottom:var(--s12);}
.gs-kopf__bild{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--grund-alt);}
.gs-kopf__bild img{width:100%;height:100%;object-fit:cover;}
/* <address> setzt der Browser kursiv – hier steht eine Anschrift, kein Zitat. */
.gs-kopf__adresse address{font-style:normal;font-family:var(--font-ui);line-height:1.7;}
/* NACHBESSERUNG 16.08.2026: Hier stand eine SONDERREGEL, die Telefon und
   E-Mail im Kopf der Geschaeftsstelle dauerhaft unterstrich und beim Zeigen
   auf 2px verdickte. Sie ist entfallen.

   Begruendet war sie damit, dass ein Verweis im Adressblock sonst nicht als
   solcher erkennbar sei. Das stimmte – zu einem Zeitpunkt, als es
   `.kontaktlink` noch nicht gab. Jetzt gibt es genau EIN Verhalten fuer
   Telefon- und E-Mail-Verweise auf der ganzen Seite: keine Unterstreichung im
   Ruhezustand, beim Zeigen eine von links einlaufende Linie in der
   Akzentfarbe des Kontexts, ueberall 2 Pixel stark. Eine zweite Regel daneben
   war genau die Uneinheitlichkeit, die gemeldet wurde. */
.gs-kopf__kontakt{margin-top:1.6rem;font-family:var(--font-ui);line-height:1.7;}
.gs-kopf__kontakt p{margin:0;}

/* Blaetterleiste der aufgeklappten Sektionen (Runde 10/P5). Sie steht leer im
   Markup und wird von design.js gefuellt – ohne Skript bleibt sie unsichtbar
   und der Server liefert alles auf einmal. */
.seiten{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:var(--s6);}
.seiten[hidden]{display:none;}
.seiten__knopf{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small);
  min-width:2.4rem;padding:.45rem .7rem;border:1px solid var(--linie);border-radius:var(--r);
  background:var(--grund);color:var(--ink);cursor:pointer;
  transition:border-color var(--t),background-color var(--t),color var(--t);}
.seiten__knopf:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--grund);}
/* Die aktuelle Seite ist eine Aussage, kein Ziel – deshalb Flaeche statt
   Umrandung, und sie bleibt beim Ueberfahren, wie sie ist. */
.seiten__knopf.ist-aktuell{background:var(--ink);border-color:var(--ink);color:var(--grund);cursor:default;}
.seiten__knopf:disabled{opacity:.4;cursor:default;}

/* Zweispaltige Fakten-Zeile auf der Personenseite. Sie steht bewusst NACH der
   Schmalbild-Regel `.liste__row{grid-template-columns:1fr}`, damit sie diese
   ueberschreibt – genau das tat vorher das style-Attribut. */
.liste__row--kompakt{grid-template-columns:1fr auto;padding-block:var(--s3);}
/* Folie der Programm-Buehne ohne Querbild: statt einer leeren Flaeche ein
   Verlauf in den Markenfarben. */
.folie__bild--leer{background:var(--rhoendorf);}