/* Bausteine im Inhalt, in der Seitenleiste und im Fuß (Phase 6.3). Die
   Vorlagen stehen unter app/templates/bausteine; ihre Klassen sind hier
   gestaltet. In der Seitenleiste bekommt jeder Baustein den Kasten aus
   03-aufbau.css (.leiste > *).

   Schmale Breite (Schritt 30): Jeder Baustein und jede Spalte von „Spalten“
   ist ein Container, dazu die Bereiche Inhalt, Seitenleiste und Fuß
   (03-aufbau.css). Schmale Fassungen stehen als @container beim Baustein und
   gelten damit in der Seitenleiste, in einer schmalen Spalte und auf dem
   Telefon gleich. Zwei Schwellen, sonst keine (StylesheetTest):
   18rem  schmal – Seitenleiste, drei Kästen nebeneinander, kleine Telefone;
          gemessen wird die Innenbreite, ein Kasten über die ganze Breite
          eines Telefons (etwa 300 px innen) bleibt damit groß wie live
   36rem  mittel – Inhaltsspalte auf dem Telefon und dem Tablet hochkant
   Abfragen können keine Variablen lesen; deshalb stehen die Werte hier. */

.baustein,
.spalte {
  container-type: inline-size;
}

/* Hintereinander stehende Schaltflächen bilden eine Reihe (inline-block);
   ein Container hätte dort keine Breite aus seinem Inhalt */
.baustein.baustein-schaltflaeche {
  container-type: normal;
}

.baustein {
  margin: 0 0 var(--luft-4);
}

/* Ein Container hält die Außenabstände seiner Kinder bei sich (Layout-
   Eingrenzung). Ohne Innenabstand fielen sie vorher mit dem Abstand des
   Bausteins zusammen; so bleibt es dabei. Bausteine mit Innenabstand oder
   Rand hielten sie schon immer bei sich. */
.baustein:not(.baustein-infokasten, .baustein-aufruf, .baustein-aufklapper, .baustein-kontakt, .baustein-person, .leiste > *) > :first-child {
  margin-top: 0;
}

.baustein:not(.baustein-infokasten, .baustein-aufruf, .baustein-aufklapper, .baustein-kontakt, .baustein-person, .leiste > *) > :last-child {
  margin-bottom: 0;
}

/* Kleine Stufe der Schrift in schmalen Kästen (30e), wie .island-overview
   live: Fließtext und Listen 15 px mit Zeilenhöhe 1.5, h3 1.125rem. Die
   Stufe sitzt an den direkten Kindern und erbt sich von dort; ohne
   Spezifität, damit jede Regel eines Bausteins mit eigener Größe gewinnt.
   h3 gegen .inhalt h3, deshalb vor den Regeln der Bausteine. */
@container (max-width: 18rem) {
  .baustein-kacheln .kacheln {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.baustein, .spalte) > * {
    font-size: var(--schrift-kasten);
    line-height: 1.5;
    hyphens: auto;
  }

  .baustein h3,
  .spalte h3 {
    font-size: var(--schrift-kasten-titel);
  }
}

.leiste .baustein {
  margin: 0;
}

.baustein-titel {
  margin: 0 0 16px;
  color: var(--dunkel);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  line-height: 1.25;
}

/* Im Inhalt wie die Abschnittstitel live (team-section, representatives-section);
   sonst griffe .inhalt h2 mit 1.8em und Abstand oben (6.5d) */
.inhalt .baustein-titel {
  margin: 0 0 16px;
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  line-height: 1.3;
}

.baustein-mehr {
  margin: 12px 0 0;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Meldungen */
.meldung-liste {
  display: grid;
  gap: var(--luft-3);
}

.meldung.mit-bild {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@container (max-width: 18rem) {
  .meldung.mit-bild {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Im Inhalt wie die Meldungen der Live-Startseite (.home-news-*, 6.5d):
   Titel mit Linie, Einträge durch Linien getrennt, größere Überschriften */
/* „Alle Meldungen“ steht im Markup nach der Überschrift; außerhalb des Inhalts
   unter der Liste, im Inhalt rechts neben der Überschrift wie live */
.baustein-meldungen {
  display: flex;
  flex-direction: column;
}

.baustein-meldungen > .baustein-mehr {
  order: 1;
}

.inhalt .baustein-meldungen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.inhalt .baustein-meldungen > .baustein-titel {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 3px solid var(--flaeche);
  font-size: 1.375rem;
}

.inhalt .baustein-meldungen > .baustein-mehr {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: end;
  margin: 0;
  padding: 0 0 12px 20px;
  border-bottom: 3px solid var(--flaeche);
  font-size: 0.8125rem;
}

.inhalt .baustein-meldungen > .meldung-liste,
.inhalt .baustein-meldungen > .datumsliste {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* „Neueste Meldungen“ als Datumsliste (55b): Datum und Titel in einer Zeile */
.datumsliste {
  margin: var(--luft-2) 0 0;
  padding: 0;
  list-style: none;
}

.datumsliste li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--luft-3);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.datumsliste time {
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.datumsliste a {
  font-weight: 700;
}

@container (max-width: 18rem) {
  .datumsliste li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Karussell (27b): Karten und Pfeile über die ganze Breite unter dem Kopf */
.inhalt .baustein-meldungen > .meldung-karten {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: var(--luft-3);
}

/* Pfeile rechts oben neben „Alle Meldungen“ wie auf cdu-sh.de (André, 06.10.2026);
   Überschrift, Link und Pfeile senkrecht mittig zueinander, die Linie bleibt unten durchgehend.
   Ebenso bei den Kacheln mit Blättern (07.10.2026) */
.inhalt .meldungen-karussell,
.inhalt .meldungen-kacheln-reihe {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.inhalt .meldungen-karussell > .baustein-titel,
.inhalt .meldungen-kacheln-reihe > .baustein-titel {
  display: flex;
  align-items: center;
}

.inhalt .meldungen-karussell > .baustein-mehr,
.inhalt .meldungen-kacheln-reihe > .baustein-mehr {
  align-items: center;
}

.inhalt .baustein-meldungen > .reihe-steuerung {
  grid-row: 1;
  grid-column: 3;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 0 12px 12px;
  border-bottom: 3px solid var(--flaeche);
}

/* Schmal (Telefon): die Überschrift behält ihre Zeile, „Alle Meldungen“ rückt darunter */
@container (max-width: 36rem) {
  .inhalt .meldungen-karussell > .baustein-titel,
  .inhalt .meldungen-kacheln-reihe > .baustein-titel {
    grid-column: 1 / 3;
  }

  .inhalt .meldungen-karussell > .baustein-mehr,
  .inhalt .meldungen-kacheln-reihe > .baustein-mehr {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: 4px 0 0;
    border-bottom: 0;
  }

  .inhalt .meldungen-karussell > .meldung-karten {
    grid-row: 3;
  }
}

.inhalt .baustein-meldungen > .baustein-mehr a {
  display: inline-block;
  padding-block: 10px;
}

/* Anriss dicht über „Weiterlesen“ wie .home-news-excerpt live */
.inhalt .baustein-meldungen .anriss {
  margin: 0 0 8px;
  line-height: 1.5;
}

.inhalt .baustein-meldungen .meldung-liste {
  gap: 0;
}

.inhalt .baustein-meldungen .meldung {
  padding: 24px 0;
  border-bottom: 1px solid var(--linie);
}

.inhalt .baustein-meldungen .meldung-meta time {
  color: var(--link);
  font-weight: 700;
}

.inhalt .baustein-meldungen .meldung h3 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.meldung-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Datum und Verband nebeneinander wie .home-news-meta live */
.meldung-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 6px;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

.meldung h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.3;
}

.meldung h3 a,
.termin h3 a {
  color: var(--dunkel);
  text-decoration: none;
}

.meldung h3 a:hover,
.termin h3 a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Kommende Termine – in der Seitenleiste wie der Terminkasten der Live-Seite */
.termin-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-ui);
}

.termin {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--linie);
}

.termin:first-child {
  padding-top: 0;
  border-top: 0;
}

.termin-kachel {
  display: grid;
  padding: 6px 2px;
  border-top: 3px solid var(--flaeche);
  background: var(--hell);
  color: var(--dunkel);
  text-align: center;
}

.termin-kachel strong {
  font-size: 1.25rem;
  line-height: 1.1;
}

.termin-kachel span {
  font-size: 0.6875rem;
}

.termin-zeit {
  margin: 0 0 5px;
  color: var(--link);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.termin h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.termin-ort,
.herkunft {
  margin: 4px 0 0;
  color: var(--text-leise);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Galerie und Fotoalben im Text */
.galerie-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.galerie-raster figure {
  margin: 0;
}

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

/* Downloads im Text */
.download-liste {
  margin: 0 0 var(--luft-3);
  padding: 0;
  list-style: none;
}

.download-liste li {
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}

.download-info {
  margin-left: 6px;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

/* Infokasten, Aufklapper, Spalten */
.baustein-infokasten {
  padding: 20px 24px;
  border-left: 4px solid var(--flaeche);
  background: var(--hell);
}

/* „Wichtig“ (6.5b): bis dahin sah er aus wie „Hinweis“ */
.infokasten-wichtig {
  border-left-color: var(--claim);
  background: var(--hell-stark);
}

.baustein-aufklapper {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.baustein-aufklapper > summary {
  padding: 12px 0;
  color: var(--dunkel);
  font-family: var(--schrift-ui);
  font-weight: 700;
  cursor: pointer;
}

.aufklapper-inhalt {
  padding-bottom: 12px;
}

.baustein-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--luft-3);
}

.spalten-3 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.spalte {
  min-width: 0;
}

/* Optik „Kasten“ (6.5b): Kacheln wie die Inseln der Inselrettung */
.spalten-kasten .spalte {
  padding: 20px;
  border-top: 3px solid var(--flaeche);
  background: var(--hell);
}

/* Drei Kästen nebeneinander sind immer schmal (30e, .island-overview live):
   engerer Innenabstand und Abstand */
.spalten-3.spalten-kasten {
  gap: var(--abstand-kasten);
}

.spalten-3.spalten-kasten .spalte {
  padding: var(--luft-kasten);
}

.spalten-kasten .spalte > :first-child {
  margin-top: 0;
}

.spalten-kasten .spalte > :last-child {
  margin-bottom: 0;
}

/* Aufruf (6.5f), wie .island-support live: helle Fläche mit Rand oben,
   Dachzeile, Überschrift, Text, Knopf, kleiner Hinweis */
.baustein-aufruf {
  margin: 36px 0;
  padding: 28px;
  border-top: 4px solid var(--flaeche);
  background: var(--hell);
}

.aufruf-dachzeile {
  margin: 0 0 10px;
  color: var(--link);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.baustein-aufruf .aufruf-titel {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.4vw, 1.625rem);
  line-height: 1.3;
}

.aufruf-text p {
  margin: 0 0 18px;
  line-height: 1.5;
}

.baustein-aufruf .aufruf-aktion {
  margin: 0;
}

.aufruf-aktion .schaltflaeche {
  gap: 8px;
  min-height: 46px;
  padding: 12px 18px;
}

.baustein-aufruf .aufruf-hinweis {
  margin: 12px 0 0;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@container (max-width: 36rem) {
  .baustein-aufruf {
    padding: 20px 16px;
  }
}

/* Schaltfläche */
/* Mehrere Schaltflächen hintereinander stehen in einer Reihe wie live (.island-actions) */
.baustein-schaltflaeche {
  display: inline-block;
  margin: 0 12px var(--luft-3) 0;
  vertical-align: top;
}

.schaltflaeche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--treffer);
  padding: 11px 16px;
  border: 1px solid var(--knopf);
  border-radius: 3px;
  background: var(--schmuck-verlauf) bottom / 100% 4px no-repeat, var(--knopf);   /* Schmuckverlauf (JU, 73a) */
  color: var(--knopf-text);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.schaltflaeche:hover {
  border-color: var(--knopf-hover);
  background: var(--knopf-hover);
  color: var(--knopf-hover-text);
}

/* „Zurückhaltend“ (6.5b): hell mit Rahmen – bis dahin wie „Hervorgehoben“ */
.schaltflaeche-neben {
  background: transparent;
  color: var(--knopf-zweit-text);
}

.schaltflaeche-neben:hover {
  border-color: var(--knopf);
  background: var(--hell);
  color: var(--knopf-zweit-text);
}

/* Personen und Kontakt – Raster, Karten, kompakt (6.5b; Vorbild die
   team-*- und representative-*-Regeln der Plöner Seite). Fotos einheitlich
   zugeschnitten, das Gesicht im oberen Drittel. */
.person,
.baustein-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.person-bild {
  margin: 0;
}

.person-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
}

.baustein-person h3 {
  margin: 0;
  color: var(--dunkel);
  font-size: 1.25rem;
  line-height: 1.3;
}

.person-funktion {
  margin: 4px 0 0;
  color: var(--link);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.person-beschreibung > :first-child {
  margin-top: 10px;
}

.person-beschreibung > :last-child {
  margin-bottom: 0;
}

.person-kontakt {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
}

.person-kontakt > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

/* Beschriftung fett und dunkel wie live (.team-contact dt) */
.person-kontakt dt {
  color: var(--dunkel);
  font-weight: 700;
}

.person-kontakt dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* E-Mail-Adressen brechen nur an den <wbr> nach @ und Punkt um (48d) */
.person-kontakt .person-email {
  overflow-wrap: break-word;
}

/* Symbole statt Bezeichnungen (48d, wie der Pressekontakt auf cdu-sh.de) */
.person-kontakt.mit-symbolen > div {
  grid-template-columns: 22px minmax(0, 1fr);
}

.person-symbol {
  display: inline-flex;
  color: var(--link);
  vertical-align: -3px;
}

.person-netzwerke {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
}

.person-netzwerke a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}

.person-netzwerke.nur-symbole {
  gap: 4px 8px;
}

.person-netzwerke.nur-symbole a {
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--link);
}

.person-netzwerke .profil-symbol {
  width: 20px;
  height: 20px;
}

/* Trefferfläche mindestens 24 px hoch (WCAG 2.5.8, 7b.6): Kontaktzeilen ohne die Zeilen
   zu verschieben, „Alle …“ unter einem Baustein als eigener Block (sonst überdeckt vom Vorgänger) */
.person-kontakt a {
  padding-block: 4px;
}

.baustein-mehr a {
  display: inline-block;
  padding-block: 4px;
}

/* Der Pfeil hinter „Alle …“ wird nicht mit unterstrichen, wie das ↗ (06.10.2026) */
.baustein-mehr a > span[aria-hidden="true"] {
  display: inline-block;
  text-decoration: none;
}

.personen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--luft-3);
}

/* Fotos im Querformat (48d), etwa auf cdu-sh.de; nur im Raster */
.personen-format-16-9 .person-bild img {
  aspect-ratio: 16 / 9;
  object-position: 50% 30%;
}

/* Gemäßigtes Querformat: flachere Karten, Porträts im Hochformat behalten den ganzen Kopf */
.personen-format-4-3 .person-bild img {
  aspect-ratio: 4 / 3;
}

/* Im Profil (08.10.2026): eine breitere Bildspalte, das Bild ganz, ohne Beschnitt –
   für Logos wie die Vereinigungen auf cdu-sh.de; Ränder auf ruhigem Grund */
.personen-format-16-9 .person-profil,
.personen-format-4-3 .person-profil {
  grid-template-columns: 240px minmax(0, 1fr);
}

.personen-format-16-9 .person-profil .person-bild img,
.personen-format-4-3 .person-profil .person-bild img {
  object-fit: contain;
  object-position: 50% 50%;
  background: var(--hell);
}

.personen-format-16-9 .person-profil .person-bild img {
  aspect-ratio: 16 / 9;
}

.personen-format-4-3 .person-profil .person-bild img {
  aspect-ratio: 4 / 3;
}

/* Schmal wie das Profil sonst (Regel bei 36rem): Bild über dem Text, höchstens 240 px breit */
@container (max-width: 36rem) {
  .personen-format-16-9 .person-profil,
  .personen-format-4-3 .person-profil {
    grid-template-columns: minmax(0, 1fr);
  }

  .personen-format-16-9 .person-profil .person-bild,
  .personen-format-4-3 .person-profil .person-bild {
    max-width: 240px;
  }
}

/* Personen je Zeile im Raster (48d); schmal wieder automatisch (Regel bei 36rem) */
.personen-spalten-drei .personen {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.personen-spalten-zwei .personen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (max-width: 36rem) {
  .personen-spalten-drei .personen,
  .personen-spalten-zwei .personen {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}

/* Eine Person in der Liste ist kein eigener Abschnitt: ohne den Abstand von .baustein (6.5d).
   Oben bündig: Das Raster streckt jede Karte auf die höchste der Zeile; ohne align-content
   verteilte die Karte den Rest auf Bild und Text, und Namen standen versetzt (07.10.2026) */
.personen .baustein-person {
  align-content: start;
  margin: 0;
}

/* Abschnittstitel mit Linie wie live (.team-section > h2) */
.baustein-personenliste > .baustein-titel {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 3px solid var(--flaeche);
}

/* Karten: Foto links, Text rechts, Trennlinie dazwischen */
.person-karten {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.person-karten .person-bild img {
  aspect-ratio: 8 / 9;
}

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

.personen-karten .baustein-person {
  padding: 26px 0;
  border-bottom: 1px solid var(--linie);
}

.personen-karten .baustein-person h3 {
  font-size: 1.375rem;
}

.personen-karten .baustein-person:last-child {
  border-bottom: 0;
}

/* Profil mit Kontaktlinks (6.5e), wie die Abgeordneten live (.representative-*):
   Foto 180 px, großer Name, darunter E-Mail und Link als Textlinks */
.person-profil {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.person-profil .person-bild img {
  aspect-ratio: 9 / 10;
  object-position: 50% 30%;
}

/* Ohne Foto nimmt der Text die ganze Breite, statt in der Fotospalte zu stehen (6.5e) */
.person-karten.ohne-bild,
.person-profil.ohne-bild {
  grid-template-columns: minmax(0, 1fr);
}

.baustein-person.person-profil h3 {
  margin: 0 0 5px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.person-profil .person-funktion {
  margin: 0 0 14px;
}

.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 18px 0 0;
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.person-links a {
  display: inline-block;
  padding-block: 10px;
  color: var(--link);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.person-links a:hover {
  color: var(--dunkel);
}

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

.personen-profil .baustein-person {
  padding: 26px 0;
}

.personen-profil .baustein-person + .baustein-person {
  border-top: 1px solid var(--linie);
}

/* Kompakt: nur Name und Funktion, zwei Kärtchen je Reihe wie live (.team-board-grid) */
.personen-kompakt .personen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.person-kompakt {
  padding: 18px;
  border: 1px solid var(--linie);
  background: var(--hell);
}

.person-kompakt h3 {
  font-size: 1.0625rem;
}

/* Personen-Karussell (Schritt 36), nach dem Karussell des Kreisverbands von
   2013: Figuren auf einer Drehscheibe, darunter die gewählte Person. Lage,
   Größe und Deckkraft der Figuren setzt personenkarussell.js; bis es bereit
   ist, fehlt die Scheibe, und alle Personen stehen als Karten da. */
.personen-karussell:not(.ist-bereit) .karussell-scheibe {
  display: none;
}

.karussell-scheibe {
  position: relative;
  margin: var(--luft-3) 0 0;
}

.karussell-figuren {
  position: relative;
  height: 290px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karussell-platz {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform-origin: 50% 100%;
}

.karussell-figuren .karussell-figur {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dunkel);
  cursor: pointer;
}

.karussell-figur img {
  display: block;
  width: auto;
  max-width: 160px;
  height: 230px;
  object-fit: contain;
}

.karussell-figur.ist-rund img,
.karussell-initialen {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
}

.karussell-initialen {
  display: grid;
  place-items: center;
  background: var(--hell);
  font-family: var(--schrift-ui);
  font-size: 2rem;
  font-weight: 700;
}

/* Den Namen trägt nur die gewählte Figur, klein unter den Füßen */
.karussell-name {
  visibility: hidden;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.karussell-figur[aria-current="true"] .karussell-name {
  visibility: visible;
}

.karussell-figur:focus-visible {
  outline-offset: 4px;
}

.karussell-knoepfe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--luft-2);
  border-top: 1px solid var(--linie);
  padding: var(--luft-2) 0 0;
}

.karussell-knoepfe button {
  min-width: var(--treffer);
  min-height: var(--treffer);
  border: 0;
  border-radius: 3px;
  background: var(--knopf);
  color: var(--knopf-text);
  font-family: var(--schrift-ui);
  font-weight: 700;
  line-height: 1;
}

.karussell-zurueck,
.karussell-weiter {
  font-size: 1.75rem;
}

.karussell-pause {
  padding: 0 var(--luft-3);
  font-size: 0.875rem;
}

.karussell-beschreibungen {
  margin: var(--luft-3) 0 0;
}

.karussell-beschreibung .baustein-person {
  margin: 0;
}

/* Ohne Skript alle Personen als Karten mit Linie dazwischen */
.personen-karussell:not(.ist-bereit) .karussell-beschreibung + .karussell-beschreibung {
  border-top: 1px solid var(--linie);
  padding-top: 26px;
  margin-top: 26px;
}

/* Schmal (unter 36rem, vom Skript gemessen): eine wischbare Reihe statt der Scheibe */
.ist-schmal .karussell-figuren {
  display: flex;
  gap: var(--luft-2);
  height: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 var(--luft-1);
}

.ist-schmal .karussell-platz {
  position: static;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.ist-schmal .karussell-figur img {
  height: 150px;
  max-width: 110px;
}

.ist-schmal .karussell-figur.ist-rund img,
.ist-schmal .karussell-initialen {
  width: 90px;
  height: 90px;
}

/* Nur das Bild tritt zurück, der Name bleibt lesbar (7b.6: blasser Name 3,1:1) */
.ist-schmal .karussell-figur[aria-current="false"] img,
.ist-schmal .karussell-figur[aria-current="false"] .karussell-initialen {
  opacity: 0.55;
}

.ist-schmal .karussell-name {
  visibility: visible;
  max-width: 110px;
  white-space: normal;
  text-align: center;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .ist-schmal .karussell-figuren {
    scroll-behavior: smooth;
  }
}

/* Bild und Text (6.5b): Begrüßung, Teaser, Abschnitt mit Bild */
.baustein-bildtext {
  display: grid;
  grid-template-areas: "bild text";
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--luft-3);
  align-items: start;
  margin: var(--luft-4) 0;
}

.baustein-bildtext.bild-halb {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.baustein-bildtext.bild-rechts {
  grid-template-areas: "text bild";
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.baustein-bildtext.bild-rechts.bild-halb {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.baustein-bildtext.bild-oben {
  grid-template-areas: "kopf" "bild" "text";
  grid-template-columns: minmax(0, 1fr);
}

/* Schmal (7.1, wie „Kontakt zu uns“ live in der Seitenleiste des Kreisverbands):
   Text in der Schrift der Oberfläche, Fettes in der Linkfarbe */
@container (max-width: 18rem) {
  .baustein-bildtext.bild-oben {
    gap: 12px;
    font-family: var(--schrift-ui);
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .baustein-bildtext .bildtext-inhalt p {
    margin: 0 0 12px;
    line-height: 1.5;
  }

  .baustein-bildtext .bildtext-inhalt strong {
    color: var(--link);
  }

  .baustein-bildtext.bild-oben .bildtext-aktionen {
    margin-top: 0;
  }
}

.bildtext-kopf {
  grid-area: kopf;
}

.bildtext-kopf h2 {
  margin: 0;
}

.bildtext-bild {
  grid-area: bild;
  margin: 0;
}

/* Bild links oder rechts beginnt oben bündig mit der Überschrift, nicht mit
   der Dachzeile darüber: um deren Zeile und Abstand tiefer, dazu bis zur
   Oberkante der Großbuchstaben (h2 1.8em, Zeilenhöhe 1.2: 0.77em, gemessen) */
.baustein-bildtext:not(.bild-oben):has(.bildtext-dachzeile) .bildtext-bild {
  margin-top: calc(0.8125rem * 1.4 + 8px + 0.77em);
}

.bildtext-bild img {
  display: block;
  width: 100%;
  height: auto;
}

.bildtext-bild figcaption {
  margin-top: 8px;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

.bildtext-text {
  grid-area: text;
  min-width: 0;
}

/* wie .home-eyebrow live (6.5f): ohne Versalien */
.bildtext-dachzeile {
  margin: 0 0 8px;
  color: var(--link);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.bildtext-text h2 {
  margin-top: 0;
}

.bildtext-inhalt > :last-child {
  margin-bottom: 0;
}

/* Ein ganz fetter letzter Absatz ist die Unterschrift, in der Farbe der
   Überschriften wie .home-signature live (6.5f) */
.bildtext-inhalt > p:last-child > strong:only-child {
  color: var(--dunkel);
}

/* Text und Knöpfe wie .home-welcome-text und .home-actions live (6.5f):
   Absätze 16 px, Knöpfe 22 px unter dem letzten; die Klasse gegen .inhalt p */
.bildtext-inhalt p {
  margin: 0 0 16px;
  line-height: 1.5;
}

.baustein-bildtext .bildtext-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 22px 0 0;
}

.bildtext-link,
.meldung-weiter {
  display: inline-block;
  padding-block: 10px;
  color: var(--link);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Bild mit Link (6.5b): „Mitglied werden“, Banner */
/* Eigenes Bild fürs Telefon (picture, 06.10.2026) */
.baustein-bildlink picture {
  display: block;
}

.baustein-bildlink img {
  display: block;
  max-width: 100%;
  height: auto;
}

.baustein-bildlink + .baustein-bildlink {
  margin-top: var(--luft-2);
}

/* Weitere Bilder im selben Kasten (6.5d), Abstand wie live (#right p) */
.bildlink + .bildlink {
  margin-top: 12px;
}

/* Video (6.5b): der Zwei-Klick-Platzhalter trägt sein Seitenverhältnis selbst */
.baustein-video {
  margin: var(--luft-3) 0;
}

.baustein-video figcaption {
  margin-top: 8px;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

/* Karte (7.3a): wie die Karte im Termin, darunter Beschriftung und Kartendaten */
.baustein-karte {
  margin: var(--luft-3) 0;
}

.baustein-karte .zweiklick {
  width: 100%;
}

.baustein-karte figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 8px;
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

.karte-beschriftung {
  color: var(--text);
}

.baustein-kontakt address {
  font-style: normal;
}

/* Telefon und E-Mail als Liste mit Beschriftung (.contact-details live) */
.kontakt-details {
  margin: 18px 0 0;
}

.kontakt-details > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin: 6px 0;
}

.kontakt-details dt {
  font-weight: 700;
}

.kontakt-details dt,
.kontakt-details dd {
  margin: 0;
  padding: 0;
  line-height: 1.65;
}

.kontakt-details dd {
  overflow-wrap: anywhere;
}

/* Im Fuß (48d) in der Schrift der Anschrift darüber, nicht größer als die übrigen Zeilen */
.fuss .baustein-kontakt .kontakt-details {
  margin: 4px 0 0;
  color: var(--fuss-leise);
  font-size: 0.9rem;
}

.fuss .baustein-kontakt .kontakt-details > div {
  margin: 0;
}

.fuss .baustein-kontakt .kontakt-details dt,
.fuss .baustein-kontakt .kontakt-details dd {
  line-height: 1.85;
}

/* Im Inhalt als Karte wie live (.contact-card); in der Seitenleiste trägt der Kasten der Leiste */
.inhalt .baustein-kontakt {
  margin: 28px 0 36px;
  padding: 24px 28px;
  border-left: 4px solid var(--flaeche);
  background: var(--hell);
}

.inhalt .baustein-kontakt .baustein-titel {
  font-size: 1.25rem;
}

@container (max-width: 36rem) {
  .inhalt .baustein-kontakt {
    padding: 18px 16px;
  }
}

/* Öffnungszeiten unter den Kontaktdaten (55b) */
.kontakt-zeiten {
  margin: 18px 0 0;
}

.baustein-kontakt .kontakt-zeiten > * {
  margin: 0;
}

.kontakt-zeiten-titel {
  font-weight: 700;
}

/* Kontakt-Kästen direkt hintereinander nebeneinander (55b, Inhalte::kontaktGruppen) */
.kontakt-gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--luft-3);
  margin: 28px 0 36px;
}

.inhalt .kontakt-gruppe > .baustein-kontakt {
  margin: 0;
}

.profile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Linklisten (auch im Fuß) */
.baustein-linkliste ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.baustein-linkliste li {
  margin: 5px 0;
}

/* Im Fuß setzt die Liste den Abstand selbst (gap in 03-aufbau.css) –
   mit dem Rand der Punkte dazu wäre er doppelt so groß wie live */
.fuss-bausteine .baustein-linkliste li {
  margin: 0;
}

.fuss .baustein-titel {
  color: var(--fuss-text);
  font-size: 1rem;
}

.fuss .baustein {
  margin: 0;
}

/* Abstand zweier Bausteine in derselben Spalte, wie live (.footer-media) */
.fuss .baustein + .baustein {
  margin-top: 28px;
}

/* Rechtstexte: Hinweis, solange André die Vorlage nicht geprüft hat */
.rechtstext-entwurf {
  padding: 12px 16px;
  border-left: 4px solid var(--claim);
  background: var(--hell);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
}

/* Zwei-Klick (Phase 6.3b): Video, Karte oder fremder Inhalt laden erst auf
   Klick. Den Knopf zeigt erst das Skript (hidden), ohne Skript bleibt der
   Link zum Anbieter. */
.zweiklick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  margin: 0 0 var(--luft-3);
  padding: 20px;
  border: 1px solid var(--linie);
  background: var(--hell);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  line-height: 1.5;
}

.zweiklick-video,
.zweiklick-karte {
  aspect-ratio: 16 / 9;
}

.zweiklick p {
  margin: 0;
}

.zweiklick-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.zweiklick-laden[hidden] {
  display: none;
}

.zweiklick.ist-geladen {
  padding: 0;
  border: 0;
  background: none;
}

.zweiklick iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
}

.termin-ort h2 {
  font-size: 1.25rem;
}

/* Die Karte im Termin so groß wie auf der Live-Seite (640 × 360) */
/* Die Karte füllt die Inhaltsspalte wie live (6.6e) */
.termin-ort .zweiklick {
  width: 100%;
}

.karte-quelle {
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

/* Zeichen hinter externen Links; inline-block, damit die Unterstreichung
   des Links es nicht mit erfasst */
/* Kennzeichen für Dateilinks (30d), wie .island-filetype live: klein,
   umrandet, in Versalien hinter dem Text – im Knopf wie im Textlink.
   Dieselbe Form trägt das Etikett „Online“/„Hybrid“ an Terminen (40). */
.datei-kennzeichen,
.etikett {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--schrift-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* Im Knopf hält der Abstand der Flexbox den Platz */
.schaltflaeche .datei-kennzeichen {
  margin-left: 0;
}

/* Das Zeichen für fremde Seiten wird nicht mit unterstrichen: Als inline-block
   erreicht es die Unterstreichung des Links nicht. Links mit Zeichen sind deshalb
   nie Flexbox – dort bekäme jedes Flex-Element einen eigenen Strich (06.10.2026). */
.extern-zeichen {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.85em;
  text-decoration: none;
}

/* Kontaktformular (6.4b), aus den Formularregeln von cdu-ploen-v40 (Zeile 293–335) */
.formular {
  max-width: 100%;
  margin: 24px 0 0;
  font-family: var(--schrift-ui);
  font-size: 1rem;
}

.formular fieldset {
  min-width: 0;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--linie);
  background: var(--papier);
}

.formular legend {
  padding: 0 8px;
  color: var(--dunkel);
  font-size: 1.125rem;
  font-weight: 700;
}

.formular-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.formular-ganz {
  grid-column: 1 / -1;
}

.formular-feld {
  min-width: 0;
  margin: 0;
}

.formular fieldset > .formular-feld + .formular-feld {
  margin-top: 22px;
}

.formular label {
  display: block;
  margin: 0 0 8px;
  color: var(--dunkel);
  font-weight: 700;
  line-height: 1.5;
}

.formular-optional {
  color: var(--text-leise);
  font-size: 0.8125rem;
  font-weight: 400;
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular select,
.formular textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--formfeld);
  border-radius: 4px;
  background: var(--papier);
  color: var(--text);
  font: 400 1rem/1.5 var(--schrift-ui);
}

.formular textarea {
  min-height: 180px;
  resize: vertical;
}

/* Formulare des Baukastens (55d): Felder ohne Fieldset, Abstände wie im Kontaktformular */
.formular > .formular-feld + .formular-feld,
.formular > .formular-feld + .formular-datenschutz {
  margin-top: 22px;
}

.formular input[type="file"] {
  display: block;
  max-width: 100%;
  min-height: var(--treffer);
  padding: 10px 0;
  color: var(--text);
  font: 400 1rem/1.5 var(--schrift-ui);
}

.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible {
  border-color: var(--fokus);
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

.formular [aria-invalid="true"] {
  border-color: var(--fehler);
}

.formular .formular-hinweis {
  margin: 8px 0 0;
  color: var(--text-leise);
  font: 400 0.875rem/1.55 var(--schrift-ui);
}

.formular .formular-fehler {
  margin: 8px 0 0;
  color: var(--fehler);
  font: 700 0.875rem/1.55 var(--schrift-ui);
}

.formular-datenschutz {
  padding: 20px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--hell);
}

.formular-haken {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.formular input[type="checkbox"],
.formular input[type="radio"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 2px 0 0;
  accent-color: var(--link);
  cursor: pointer;
}

.formular-haken label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Rückmeldeseite der Delegierten (61b): je Veranstaltung ein Kasten, darin die Wahl und
   die Zusatzfelder als Gruppen ohne eigenen Rahmen (Legende wie eine Feldbeschriftung),
   der Stand der Antwort abgesetzt */
.rueckmeldung-veranstaltung {
  margin: 0 0 24px;
  padding: 16px 24px 20px;
  border: 1px solid var(--linie);
}

.rueckmeldung-veranstaltung legend {
  padding: 0 8px;
  font-family: var(--schrift-ui);
}

.rueckmeldung-wann {
  font-family: var(--schrift-ui);
}

.rueckmeldung-stand {
  padding: 10px 14px;
  background: var(--hell);
  font-family: var(--schrift-ui);
}

.rueckmeldung-veranstaltung .rueckmeldung-wahl,
.rueckmeldung-veranstaltung .rueckmeldung-zusatz {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

.rueckmeldung-veranstaltung .rueckmeldung-wahl legend,
.rueckmeldung-veranstaltung .rueckmeldung-zusatz legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--dunkel);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.rueckmeldung-veranstaltung .rueckmeldung-zusatz {
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.rueckmeldung-veranstaltung .rueckmeldung-zusatz legend {
  float: left;
  width: 100%;
  margin-bottom: 14px;
}

.rueckmeldung-veranstaltung .rueckmeldung-zusatz legend + * {
  clear: both;
}

.rueckmeldung-wahl .formular-haken + .formular-haken {
  margin-top: 10px;
}

@container (max-width: 36rem) {
  .rueckmeldung-veranstaltung {
    padding: 12px 14px 16px;
  }
}

.formular-aktionen {
  margin-top: 24px;
}

.formular-senden {
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--knopf);
  border-radius: 4px;
  background: var(--knopf);
  color: var(--knopf-text);
  font: 700 1rem/1.5 var(--schrift-ui);
  cursor: pointer;
}

.formular-senden:hover {
  border-color: var(--link);
  background: var(--link);
}

.formular-senden:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 4px;
}

/* Für Menschen unsichtbar, aus der Tab-Reihenfolge genommen (tabindex="-1") – der Honeypot */
.formular-extra {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-meldung {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-radius: 4px;
  font-family: var(--schrift-ui);
}

.formular-meldung h3 {
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.formular-meldung ul,
.formular-meldung p:last-child {
  margin-bottom: 0;
}

.formular-meldung-fehler {
  border-color: var(--fehler);
  background: var(--fehler-hell);
}

.formular-meldung-fehler a {
  color: var(--fehler-link);
}

.formular-meldung-erfolg {
  border-color: var(--erfolg);
  background: var(--erfolg-hell);
}

@container (max-width: 36rem) {
  .baustein-bildtext,
  .baustein-bildtext.bild-halb,
  .baustein-bildtext.bild-rechts,
  .baustein-bildtext.bild-rechts.bild-halb {
    grid-template-areas: "bild" "text";
    grid-template-columns: minmax(0, 1fr);
  }

  .baustein-bildtext.bild-rechts {
    grid-template-areas: "text" "bild";
  }

  .baustein-bildtext:not(.bild-oben):has(.bildtext-dachzeile) .bildtext-bild {
    margin-top: 0;
  }

  .baustein-bildtext.bild-oben {
    grid-template-areas: "kopf" "bild" "text";
  }
}

@container (max-width: 36rem) {
  .person-karten {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .person-karten .person-bild {
    max-width: 160px;
  }

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

  .person-profil {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .person-profil .person-bild {
    max-width: 180px;
  }

  .person-links {
    flex-direction: column;
    gap: 0;
  }

  .formular-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .formular fieldset {
    padding: 18px 14px;
  }

  .formular-datenschutz,
  .formular-meldung {
    padding: 18px 16px;
  }

  .formular-senden {
    width: 100%;
  }
}

/* Hinweis unter einem Baustein mit Fremddaten (Feed, Gremiensitzungen): veralteter Stand */
.baustein-hinweis {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--flaeche);
  background: var(--hell);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Gremiensitzungen (6.5c), nach buergerinfo.css der Live-Seite: Datumskachel wie bei
   den Terminen, Links zur Quelle, öffentliche Tagesordnung zum Aufklappen */
.gremien-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-ui);
}

.gremium-sitzung {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--linie);
}

.gremium-sitzung:first-child {
  padding-top: 0;
  border-top: 0;
}

.gremium-sitzung .termin-kachel {
  align-self: start;
  padding: 8px 2px;
}

.gremium-sitzung .termin-kachel strong {
  font-size: 1.75rem;
  font-weight: 800;
}

.gremium-sitzung .termin-kachel span {
  font-size: 0.875rem;
  font-weight: 700;
}

.gremium-sitzung .termin-kachel small {
  font-size: 0.75rem;
}

.gremium-sitzung .termin-zeit {
  font-size: 0.9375rem;
}

/* Trennen mit Silbentrennung (die Seite ist lang="de"); break-word nur als
   Notbehelf für Wörter ohne Trennstelle (30a) */
.gremium-sitzung h3 {
  margin: 0 0 6px;
  color: var(--dunkel);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
}

.gremium-sitzung.entfaellt h3 {
  color: var(--text-leise);
  text-decoration: line-through;
}

.gremium-entfaellt {
  margin: 0 0 6px;
  color: var(--fehler);
  font-size: 0.875rem;
  font-weight: 700;
}

.gremium-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 8px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.gremium-tagesordnung {
  margin-top: 12px;
}

.gremium-tagesordnung summary {
  min-height: var(--treffer);
  padding: 10px 12px;
  background: var(--hell);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}

.gremium-tagesordnung ol {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.gremium-tagesordnung li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.gremium-tagesordnung li a {
  display: block;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
}

.gremium-top {
  font-family: var(--schrift-ui);
  font-weight: 700;
}

.gremien-vorlagen-titel {
  margin: var(--luft-3) 0 8px;
  color: var(--dunkel);
  font-family: var(--schrift-ui);
  font-size: 1.125rem;
}

.gremien-vorlagen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gremien-vorlagen li {
  padding: 14px 16px;
  border-top: 3px solid var(--flaeche);
  background: var(--hell);
  font-family: var(--schrift-ui);
  overflow-wrap: anywhere;
}

.gremien-vorlagen .gremien-quelle {
  margin: 0 0 6px;
}

.gremien-vorlagen a {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.gremien-quelle,
.gremien-leer {
  margin: 12px 0 0;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.gremien-leer {
  color: inherit;
  font-size: 0.9375rem;
}

/* Sitzungskalender nach Monaten (7.4): je Monat ein Aufklapper, der erste offen */
.gremien-monat {
  margin-top: 12px;
}

.gremien-monat summary {
  min-height: var(--treffer);
  padding: 10px 12px;
  background: var(--hell);
  cursor: pointer;
  font-family: var(--schrift-ui);
  font-weight: 700;
  line-height: 1.5;
}

.gremien-monat ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.gremien-monat li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gremien-monat li time {
  flex: 0 0 10.5rem;
  color: var(--text-leise);
}

.gremien-monat li span {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Kompakt: nur die nächste Sitzung, auch in der Seitenleiste */
.gremien-naechste .gremium-sitzung {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
}

.gremien-naechste .gremium-sitzung h3 {
  font-size: 1rem;
  font-weight: 700;
}

.gremien-naechste .termin-kachel strong {
  font-size: 1.25rem;
}

/* Mitglieder je Gremium (7.2): Kästen wie die Ausschussseite des Kreisverbands
   (.kv-card mit .committee-meeting), die nächste Sitzung unten über einer Linie */
.gremien-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.gremium-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--hell);
}

.baustein .gremium-karte h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.35;
}

.gremium-mitglieder {
  margin-bottom: 14px;
  font-family: var(--schrift-ui);
  font-size: 0.9375rem;
}

.gremium-mitglieder ul {
  margin: 0;
  padding-left: 20px;
}

.gremium-naechste {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift-ui);
  font-size: 0.8rem;
  line-height: 1.4;
}

.gremium-naechste p {
  margin: 0 0 5px;
}

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

.gremium-naechste-titel {
  font-weight: 700;
}

.gremium-naechste-zeit {
  color: var(--link);
  font-weight: 700;
}

.gremium-naechste a {
  font-weight: 700;
}

/* Bühne (27a) nach cdu-sh.de: Bild 12:5, Titel in dunkler Box, Unterzeile in
   heller Box, beide unten links auf dem Bild. Mehrere Folien stehen als Reihe
   nebeneinander (Scroll-Snap); Pfeile und Punkte ergänzt reihe.js. */
.buehne-oben {
  margin: 0 0 var(--luft-4);
}

.baustein-buehne {
  position: relative;
}

/* position: relative, damit die Spur auch absolut gesetzte Teile ihrer Einträge (etwa die
   Vorlesetexte in „Weiterlesen“) abschneidet – sonst verbreitern sie die ganze Seite (78) */
.reihe-spur {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.reihe-spur::-webkit-scrollbar {
  display: none;
}

.reihe-spur > * {
  scroll-snap-align: start;
}

.buehne-folie {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
}

.buehne-folie img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.buehne-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.buehne-text {
  position: absolute;
  bottom: var(--luft-3);
  left: var(--luft-3);
  display: grid;
  justify-items: start;
  gap: 4px;
  max-width: calc(100% - 2 * var(--luft-3));
}

.buehne-text p {
  margin: 0;
  line-height: 1.25;
}

.buehne-titel span,
.buehne-unterzeile span {
  padding: 4px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.buehne-titel span {
  background: var(--titelbox);
  color: var(--titelbox-text);
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 800;
}

.buehne-unterzeile span {
  background: var(--claim);
  color: var(--claim-text);
  font-family: var(--schrift-ui);
  font-size: 1.125rem;
}

/* Titel in Box auf einem Bild: Jede Zeile hat ihre eigene Box, die nächste
   malte über die Unterstreichung der vorigen. Deshalb färbt sich die Box. */
.buehne-link:hover .buehne-titel span,
.buehne-link:focus-visible .buehne-titel span {
  background: var(--titelbox-hover);
  color: var(--titelbox-hover-text);
}

/* Bühne als „Großer Claim“ (55b): der Satz groß, das Bild optional daneben,
   kein Text auf dem Bild. Schmal steht das Bild über dem Text. */
.buehne-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-4);
  padding-block: var(--luft-4);
}

.buehne-claim-text {
  flex: 3 1 20rem;
}

.buehne-claim-satz {
  margin: 0;
  color: var(--dunkel);
  font-family: var(--schrift-titel);
  font-size: clamp(2.25rem, 6.5cqi, 4.75rem);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.buehne-claim-zeile {
  margin: var(--luft-3) 0 0;
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 1.125rem;
}

.buehne-claim-bild {
  position: relative;
  flex: 2 1 16rem;
  margin: 0;
}

.buehne-claim-bild img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@container (max-width: 36rem) {
  .buehne-claim-bild {
    order: -1;
  }

  .buehne-claim-bild img {
    aspect-ratio: 4 / 3;
  }
}

/* Bühne „Großes Bild“ (02.10.2026): über die ganze Fensterbreite direkt unter
   dem Kopf, Claim und Zeile unten links auf einem Verlauf; die Person steht
   rechts im Bild. Schmal (Container unter 36rem) Hochformat, der Verlauf kommt von unten. */
.buehne-breit {
  margin: 0 0 var(--luft-4);
}

.buehne-gross {
  position: relative;
  isolation: isolate;   /* Verlauf, Text und Nachweis bleiben in der Bühne, nie über Menüs */
  background: var(--buehne-verlauf);
}

.buehne-gross img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(24rem, 44vw, 42rem);
  object-fit: cover;
  object-position: 60% 35%;
}

.buehne-gross::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--buehne-verlauf) 90%, transparent) 0%,
      color-mix(in srgb, var(--buehne-verlauf) 70%, transparent) 30%,
      color-mix(in srgb, var(--buehne-verlauf) 20%, transparent) 52%, transparent 64%),
    linear-gradient(0deg, color-mix(in srgb, var(--buehne-verlauf) 60%, transparent) 0%, transparent 40%);
}

.buehne-gross-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}

.buehne-gross-innen {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0 24px clamp(2rem, 5vw, 4.5rem);
}

.buehne-gross-satz,
.buehne-gross-zeile {
  max-width: 34rem;
  margin: 0;
  color: var(--buehne-verlauf-text);
}

.buehne-gross-satz {
  font-family: var(--schrift-titel);
  font-size: clamp(2.1rem, 5.2vw, 4.75rem);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

.buehne-gross-satz::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  margin-top: 0.35em;
  background: var(--schmuck);
}

.buehne-gross-zeile {
  margin-top: var(--luft-3);
  font-family: var(--schrift-ui);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.45;
}

.buehne-gross .bildnachweis-auf-bild {
  z-index: 2;
}

@container (max-width: 36rem) {
  .buehne-gross img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: 50% 20%;
  }

  .buehne-gross::before {
    background: linear-gradient(0deg, color-mix(in srgb, var(--buehne-verlauf) 95%, transparent) 0%,
      color-mix(in srgb, var(--buehne-verlauf) 70%, transparent) 32%, transparent 58%);
  }

  .buehne-gross-innen {
    padding: 0 16px 1.5rem;
  }

  .buehne-gross-zeile {
    font-size: 1rem;
  }
}

/* Ohne Verlauf (Schalter, 06.10.2026): das Bild bleibt unverändert; Claim und
   Zeile stehen für den Kontrast in einer Fläche in der Verlaufsfarbe */
.buehne-gross-ohne-verlauf::before {
  display: none;
}

.buehne-gross-ohne-verlauf .buehne-gross-satz,
.buehne-gross-ohne-verlauf .buehne-gross-zeile {
  box-sizing: border-box;
  width: fit-content;
  max-width: min(34rem, 100%);
  padding: 0.3em 0.5em;
  background: var(--buehne-verlauf);
}

/* Kacheln (64): drei Karten mit Bild oben nebeneinander wie .home-external-news
   auf cdu-kreis-ploen.de, für „Neueste Meldungen“ und die Meldungen aus Partei
   und Fraktionen; schmal untereinander (Regel bei 36rem) */
.inhalt .baustein-meldungen > .meldung-kacheln {
  grid-row: 2;
  grid-column: 1 / -1;
}

.meldung-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.baustein-meldungen .meldung-kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0 0 18px;
  border: 1px solid var(--linie);
  background: var(--hell);
}

.meldung-kachel-bild {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--flaeche);
}

.meldung-kachel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.baustein-meldungen .meldung-kachel .meldung-meta {
  margin: 16px 14px 8px;
  font-size: 0.75rem;
}

.baustein-meldungen .meldung-kachel .meldung-meta time {
  color: var(--link);
  font-weight: 700;
}

.baustein-meldungen .meldung-kachel h3 {
  margin: 0 14px 12px;
  font-size: 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.baustein-meldungen .meldung-kachel h3 a {
  color: var(--dunkel);
  text-decoration: none;
}

.baustein-meldungen .meldung-kachel h3 a:hover {
  color: var(--link);
  text-decoration: underline;
}

.baustein-meldungen .meldung-kachel .anriss {
  margin: 0 14px 16px;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  line-height: 1.5;
}

.baustein-meldungen .meldung-kachel .meldung-weiter {
  margin: auto 14px 0;
  font-size: 0.8125rem;
}

@container (max-width: 36rem) {
  .meldung-kacheln {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kacheln mit Blättern (André, 07.10.2026): eine wischbare Reihe wie das Karussell,
   drei Kacheln je Ansicht, schmal eine; gleich hoch, weil die Reihe sie streckt */
.meldung-kacheln.reihe-spur {
  display: flex;
}

.meldung-kacheln.reihe-spur > .meldung-kachel {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
}

/* Wie viele nebeneinander, aus „Anzahl“ (78): 2 oder 4, sonst drei wie oben; ebenso das Karussell */
[data-nebeneinander="2"] .meldung-kacheln.reihe-spur > .meldung-kachel {
  flex-basis: calc((100% - 20px) / 2);
}

[data-nebeneinander="4"] .meldung-kacheln.reihe-spur > .meldung-kachel {
  flex-basis: calc((100% - 3 * 20px) / 4);
}

[data-nebeneinander="2"] .meldung-karte {
  flex-basis: calc((100% - var(--luft-2)) / 2);
}

[data-nebeneinander="4"] .meldung-karte {
  flex-basis: calc((100% - 3 * var(--luft-2)) / 4);
}

@container (max-width: 36rem) {
  .meldung-kacheln.reihe-spur > .meldung-kachel,
  [data-nebeneinander] .meldung-kacheln.reihe-spur > .meldung-kachel {
    flex-basis: 100%;
  }

  /* Schmal immer eine Karte, die nächste angeschnitten (27b), gleich welche Anzahl */
  [data-nebeneinander] .meldung-karte {
    flex-basis: 85%;
  }

  /* Unter „Alle Meldungen“, das schmal in die zweite Zeile rückt (wie beim Karussell) */
  .inhalt .baustein-meldungen.meldungen-kacheln-reihe > .meldung-kacheln {
    grid-row: 3;
  }
}

/* Bildnachweis der Meldungen aus Partei und Fraktionen (48d): rechts unter dem Bild wie cdu-sh.de */
.meldung-nachweis {
  margin: 4px 0 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.baustein-meldungen .meldung-kachel .meldung-nachweis {
  margin: 4px 14px 0;
}

.baustein-meldungen .meldung-kachel .meldung-nachweis + .meldung-meta {
  margin-top: 8px;
}

/* „Neueste Meldungen“ als Karussell (27b): drei Karten nebeneinander, schmal eine */
.meldung-karten {
  gap: var(--luft-2);
}

.meldung-karte {
  flex: 0 0 calc((100% - 2 * var(--luft-2)) / 3);
  margin: 0;
}

.meldung-karte a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
}

.meldung-karte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meldung-karte-text {
  position: absolute;
  right: var(--luft-2);
  bottom: var(--luft-2);
  left: var(--luft-2);
  display: grid;
  justify-items: start;
  gap: 4px;
  line-height: 1.3;
}

.meldung-karte-datum span,
.meldung-karte-titel span {
  padding: 3px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.meldung-karte-datum span {
  background: var(--claim);
  color: var(--claim-text);
  font-family: var(--schrift-ui);
  font-size: 0.8125rem;
}

.meldung-karte-titel span {
  background: var(--titelbox);
  color: var(--titelbox-text);
  font-family: var(--schrift-ui);
  font-size: 1rem;
  font-weight: 700;
}

.meldung-karte a:hover .meldung-karte-titel span,
.meldung-karte a:focus-visible .meldung-karte-titel span {
  background: var(--titelbox-hover);
  color: var(--titelbox-hover-text);
}

/* Bildformat 16:9 (48d), etwa für Pressegrafiken wie auf cdu-sh.de */
.meldungen-format-16-9 .meldung-karte a {
  aspect-ratio: 16 / 9;
}

/* Kacheln (27c): Raster aus Bild und Titel, die ganze Kachel ein Link */
.kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--luft-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kacheln-zwei .kacheln {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kacheln-vier .kacheln {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.kachel img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Breitbild (48d) für Bilder mit eingebranntem Text, wie auf cdu-sh.de */
.kacheln-format-16-9 .kachel img {
  aspect-ratio: 16 / 9;
}

.kachel-text {
  display: grid;
  justify-items: start;
  gap: 4px;
  line-height: 1.3;
}

.kacheln-titel-bild .kachel-text {
  position: absolute;
  right: var(--luft-2);
  bottom: var(--luft-2);
  left: var(--luft-2);
}

.kacheln-titel-unten .kachel-text {
  padding: var(--luft-2) 0 0;
}

.baustein .kachel-titel {
  margin: 0;
  font-family: var(--schrift-ui);
  font-size: 1rem;
  font-weight: 700;
}

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

/* Die ganze Kachel ist klickbar */
.kachel-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kachel:hover .kachel-titel span,
.kachel-titel a:focus-visible span {
  text-decoration: underline;
}

.kacheln-titel-bild .kachel:hover .kachel-titel span,
.kacheln-titel-bild .kachel-titel a:focus-visible span {
  background: var(--titelbox-hover);
  color: var(--titelbox-hover-text);
  text-decoration: none;
}

.kachel:focus-within {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.kachel-titel a:focus-visible {
  outline: 0;
}

.kachel-zeile {
  margin: 0;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
}

.kacheln-titel-bild .kachel-titel span,
.kacheln-titel-bild .kachel-zeile span {
  padding: 3px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.kacheln-titel-bild .kachel-titel span {
  background: var(--titelbox);
  color: var(--titelbox-text);
}

.kacheln-titel-bild .kachel-zeile span {
  background: var(--claim);
  color: var(--claim-text);
}

.kacheln-titel-unten .kachel-titel {
  color: var(--dunkel);
}

.kacheln-titel-unten .kachel-zeile {
  color: var(--text-leise);
}

/* Gebietskarte über den Karten (7.3b), wie .ov-map der Ortsverbände live:
   eigener Rahmen, der sich auf schmalen Bildschirmen seitlich verschieben lässt */
.karten-gebiet {
  margin: 28px 0 12px;
}

/* Höchstens so hoch wie der Bildschirm und nie größer als die Kartendatei (André, 06.10.2026);
   der Rahmen ist so breit wie die Karte und steht mittig. Schmal bleibt sie seitlich verschiebbar. */
.karten-gebiet-rahmen {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  border: 1px solid var(--karte-rand);
  border-radius: 16px;
  background: var(--karte-grund);
}

.karten-gebiet-rahmen:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.karten-gebiet-svg {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 620px;
  height: auto;
  max-height: calc(100svh - 8rem);
  font-family: var(--schrift-ui);
}

.gebiet-grund {
  fill: var(--karte-grund);
}

.gebiet-umriss {
  fill: var(--karte-gebiet);
  stroke: var(--karte-grenze);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Flächen (48b): Gebiete ohne Eintrag nur als Grenze, mit Eintrag hervorgehoben und
   ein Link; Zeigen und Fokus füllen sie wie einen aktiven Punkt, der Fokus bekommt
   dazu den Ring. Die Namen liegen darüber und fangen keine Klicks ab. */
.gebiet-flaeche,
.gebiet-flaeche path {
  fill: transparent;
  stroke: var(--karte-grenze);
  stroke-width: 1;
  stroke-linejoin: round;
}

.gebiet-flaeche.ist-verknuepft path {
  fill: var(--karte-flaeche);
  stroke-width: 1.5;
  transition: fill 0.15s ease;
}

.gebiet-flaeche.ist-verknuepft:hover path,
.gebiet-flaeche.ist-verknuepft:focus path {
  fill: var(--karte-flaeche-aktiv);
}

.gebiet-flaeche.ist-verknuepft:focus {
  outline: none;
}

.gebiet-flaeche.ist-verknuepft:focus-visible path {
  stroke: var(--karte-ring);
  stroke-width: 4;
}

.gebiet-namen {
  pointer-events: none;
}

.gebiet-name {
  fill: var(--karte-schrift);
  stroke: var(--karte-grund);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-size: 13px;
  font-weight: 600;
}

/* Kleine kreisfreie Städte: kleinere Schrift, damit der Name die Fläche nicht überdeckt */
.gebiet-name-stadt {
  font-size: 11px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .gebiet-flaeche.ist-verknuepft path {
    transition: none;
  }
}

.gebiet-meer {
  fill: var(--karte-meer);
  font-size: 18px;
  letter-spacing: 5px;
}

.gebiet-stadt {
  fill: var(--karte-schrift);
  font-size: 14px;
  font-weight: 600;
}

.gebiet-nordpfeil {
  fill: var(--karte-schrift);
  font-size: 13px;
  font-weight: 700;
}

.gebiet-nordstrich {
  stroke: var(--karte-schrift);
}

.gebiet-linie {
  stroke: var(--karte-linie);
  stroke-width: 1.3;
}

.gebiet-lage {
  fill: var(--karte-linie);
}

.gebiet-punkt circle {
  fill: var(--karte-punkt);
  stroke: var(--papier);
  stroke-width: 2;
}

.gebiet-punkt text {
  fill: var(--papier);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.gebiet-punkt:hover circle,
.gebiet-punkt:focus circle {
  fill: var(--karte-punkt-aktiv);
  stroke: var(--karte-ring);
  stroke-width: 4;
}

.gebiet-punkt:focus {
  outline: none;
}

.gebiet-hinweis {
  fill: var(--karte-schrift);
  font-size: 12px;
}

.karten-gebiet figcaption {
  margin: 12px 0 0;
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  line-height: 1.6;
}

.karten-gebiet .karte-quelle {
  margin: 4px 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Unter der Karte leitet die Überschrift die Liste ein, groß wie ein h2 im
   Text („Ortsverband finden“ live) */
.inhalt .karten-gebiet ~ .baustein-titel {
  margin: 1.2em 0 0.65em;
  font-size: 1.8em;
  line-height: 1.2;
}

/* Suchfeld (7.3b), wie .ov-search live; ohne Skript verborgen (hidden) */
.karten-suche {
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--hell);
  font-family: var(--schrift-ui);
}

.karten-suche[hidden],
.karten-leer[hidden],
.karten-liste > .karte[hidden] {
  display: none;
}

.karten-suche label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.karten-suche input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--formfeld);
  border-radius: 7px;
  background: var(--papier);
  color: var(--text);
  font: 1rem var(--schrift-ui);
}

.karten-suche-stand {
  margin: 8px 0 0;
  color: var(--text-leise);
  font-size: 0.8rem;
}

.karten-leer {
  padding: 20px 0;
  font-family: var(--schrift-ui);
}

/* Karten (7.2): Einträge als Kästen wie .kv-card der Arbeitskreise live,
   schlicht mit Linien und Nummer im Kreis wie .ov-entry der Ortsverbände */
.karten-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.karten-drei .karten-liste {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.karten-kasten .karte {
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--hell);
}

.karten-schlicht .karten-liste {
  column-gap: 24px;
  row-gap: 0;
}

.karten-schlicht .karte {
  padding: 20px 8px;
  border-bottom: 1px solid var(--linie);
}

.karte:has(.karte-nummer) {
  grid-template-columns: 34px minmax(0, 1fr);
}

.karte-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 50%;
  background: var(--knopf);
  color: var(--knopf-text);
  font-family: var(--schrift-ui);
  font-size: 0.8rem;
  font-weight: 600;
}

.baustein .karte-titel {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.karten-schlicht .karte-titel {
  margin: 4px 0 8px;
  font-size: 1.05rem;
}

.karte-text {
  font-family: var(--schrift-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.karten-schlicht .karte-text {
  font-size: 0.875rem;
}

.karte-text > :first-child {
  margin-top: 0;
}

.karte-text > :last-child {
  margin-bottom: 0;
}

.karte-link {
  display: inline-block;
  padding-block: 10px;
  color: var(--link);
  font-family: var(--schrift-ui);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Pfeile und Punkte (reihe.js) */
.reihe-steuerung {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--luft-2);
  margin: var(--luft-2) 0 0;
}

.reihe-knopf {
  min-width: var(--treffer);
  min-height: var(--treffer);
  border: 0;
  border-radius: 3px;
  background: var(--knopf);
  color: var(--knopf-text);
  font-size: 1.75rem;
  line-height: 1;
}

.reihe-knopf[aria-disabled="true"] {
  background: var(--aus-flaeche);
  color: var(--aus-text);
  cursor: default;
}

.reihe-punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.reihe-punkt {
  width: var(--treffer);
  height: var(--treffer);
  padding: 0;
  border: 0;
  background: none;
}

.reihe-punkt::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  border: 2px solid var(--dunkel);
  border-radius: 50%;
}

.reihe-punkt[aria-current="true"]::before {
  background: var(--dunkel);
}

@media (prefers-reduced-motion: no-preference) {
  .reihe-spur {
    scroll-behavior: smooth;
  }

  /* Seitenweise blättern (06.10.2026): ausblenden, springen, einblenden */
  [data-reihe-seiten] .reihe-spur {
    transition: opacity 0.25s ease;
  }
}

[data-reihe-seiten] .reihe-spur.ist-blendend {
  opacity: 0;
}

/* „Kommende Termine“ schmal (Seitenleiste, Telefon) ohne Kalenderblatt, wie der
   Terminkasten live: das Datum mit Uhrzeit fett über dem Titel (André, 28.09.2026) */
@container (max-width: 36rem) {
  .baustein-termine .termin {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .baustein-termine .termin-kachel {
    display: none;
  }

  /* Kacheln schmal (27c): höchstens zwei Spalten */
  .kacheln-drei .kacheln,
  .kacheln-vier .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Meldungen als Karussell schmal (27b): eine Karte, die nächste angeschnitten */
  .meldung-karte {
    flex-basis: 85%;
  }

  /* Bühne schmal (27a): kleinere Boxen, dichter am Rand */
  .buehne-text {
    bottom: var(--luft-2);
    left: var(--luft-2);
    max-width: calc(100% - 2 * var(--luft-2));
  }

  .buehne-titel span {
    font-size: 1.25rem;
  }

  .buehne-unterzeile span {
    font-size: 0.9375rem;
  }
}

@container (max-width: 36rem) {
  .gremium-sitzung {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  /* Kästen der Gremien und Karten (7.2) untereinander */
  .gremien-karten,
  .karten-liste,
  .karten-drei .karten-liste {
    grid-template-columns: minmax(0, 1fr);
  }

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

/* Schmal (30a): Das Datum steht nur in der Zeile über dem Titel, die Kachel
   entfällt; Links und Tagesordnung laufen bündig, die Tagesordnung eine Stufe
   kleiner und die Nummer vor dem Titel statt in einer eigenen Spalte */
@container (max-width: 18rem) {
  .gremium-sitzung,
  .gremien-naechste .gremium-sitzung {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .gremium-sitzung .termin-kachel {
    display: none;
  }

  .gremium-links {
    flex-direction: column;
    gap: 4px;
  }

  .gremium-tagesordnung summary {
    padding: 10px;
    font-size: 0.875rem;
  }

  .gremium-tagesordnung li {
    display: block;
    padding: 8px 0;
    font-size: 0.875rem;
  }

  .gremium-top {
    margin-right: 6px;
  }

  .gremien-vorlagen li {
    padding: 12px;
  }
}

/* Social Wall (37a): Kacheln aus den abgeholten Beiträgen. Raster, Mauerwerk
   (verschieden hohe Kacheln in Spalten) oder wischbare Reihe wie beim
   Meldungskarussell. Die ganze Kachel führt zum Originalbeitrag – außer bei
   Videos, dort startet der Klick auf „Video laden“ das Video. */
.social-kacheln {
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-raster .social-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--luft-3);
}

.social-mauerwerk .social-kacheln {
  columns: 15rem;
  column-gap: var(--luft-3);
}

.social-mauerwerk .social-kachel {
  break-inside: avoid;
  margin: 0 0 var(--luft-3);
}

.social-reihe .social-kacheln {
  gap: var(--luft-2);
}

.social-reihe .social-kachel {
  flex: 0 0 calc((100% - 2 * var(--luft-2)) / 3);
}

.social-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--linie);
  background: var(--papier);
}

.social-kachel:not(.ist-video):hover {
  border-color: var(--dunkel);
}

.social-kachel:focus-within {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.social-medium img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.social-raster .social-medium > img,
.social-reihe .social-medium > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.social-text {
  display: grid;
  justify-items: start;
  gap: var(--luft-1);
  padding: var(--luft-2);
  font-family: var(--schrift-ui);
  font-size: 0.875rem;
  line-height: 1.45;
}

.social-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--text-leise);
  font-size: 0.8125rem;
}

.social-kopf .profil-symbol {
  width: 18px;
  height: 18px;
  color: var(--dunkel);
}

.social-kopf > span:first-of-type {
  color: var(--dunkel);
  font-weight: 700;
}

.social-inhalt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.social-mauerwerk .social-inhalt {
  -webkit-line-clamp: 14;
}

.social-link {
  color: var(--link);
  font-weight: 700;
}

.social-link:focus-visible {
  outline: none;
}

.social-kachel:not(.ist-video) .social-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* Video: das Vorschaubild steht im Zwei-Klick-Platzhalter, darauf mittig
   der Knopf zum Laden und unten eine Zeile mit dem Hinweis; der Link zu
   YouTube steht schon unter dem Bild. Der Klick ersetzt alles durch den Rahmen. */
.social-medium .zweiklick {
  position: relative;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--dunkel);
}

.social-medium .zweiklick-vorschau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-medium .zweiklick-text {
  position: relative;
  padding: 4px 10px;
  background: var(--lightbox-grund);
  color: var(--fuss-text);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.social-medium .zweiklick-aktionen {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  place-items: center;
  height: calc(100% - 2.6em);
}

.social-medium .zweiklick-aktionen a {
  display: none;
}

.social-medium .zweiklick-laden {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 10px var(--schatten);
}

.social-medium .zweiklick-laden::before {
  content: "▶\00a0";
}

@container (max-width: 36rem) {
  .social-reihe .social-kachel {
    flex-basis: 85%;
  }

  .social-mauerwerk .social-kacheln {
    columns: 1;
  }
}

/* Wahlergebnisse (7.3c), nach der Seite des Kreisverbands (cdu-kreis-ploen-v27, „election-*“).
   Das Diagramm steht zweimal; breit die Säulen, schmal die Balken. */
.baustein-wahlen {
  color: var(--wahl-schrift);
  font-family: var(--schrift-ui);
}
.wahl-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
}
.wahl-sprung a {
  padding: 10px 15px;
  background: var(--hell);
  border: 1px solid var(--wahl-sprung-rand);
  border-radius: 8px;
  font-family: var(--schrift-ui);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.wahl-sprung a:hover {
  background: var(--hell-stark);
}
.wahl {
  margin: 0 0 32px;
  padding-top: 12px;
  scroll-margin-top: 100px;
}
.wahl-kopf {
  border-bottom: 2px solid var(--wahl-rand);
  margin-bottom: 20px;
}
.inhalt .wahl-kopf h2 {
  font-size: 1.7rem;
  margin: 0 0 10px;
}
.wahl-kopf p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: .875rem;
  color: var(--text-leise);
}
.wahl-status {
  border-radius: 5px;
  padding: 3px 9px;
  color: var(--wahl-status-text);
  background: var(--wahl-status);
  font-weight: 700;
}
.wahl-hinweis {
  padding: 14px 16px;
  border-left: 3px solid var(--wahl-hinweis-rand);
  background: var(--wahl-hinweis);
  font-size: .875rem;
}
.wahl-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}
.wahl-kennzahlen > div {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hell);
}
.wahl-kennzahlen dt {
  font-size: .78rem;
  color: var(--text-leise);
  line-height: 1.4;
}
.wahl-kennzahlen dd {
  margin: 8px 0 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wahl-schrift);
}
.wahl-diagramm {
  margin: 16px 0;
  padding: 20px 18px 14px;
  background: var(--papier);
  border: 1px solid var(--wahl-rand);
  border-radius: 12px;
}
.wahl-diagramm figcaption {
  font-family: var(--schrift-ui);
  font-size: 1rem;
  font-weight: 700;
}
.wahl-skala,
.wahl-anmerkung {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--text-leise);
}
.wahl-skala {
  margin: 4px 0 18px;
}
.wahl-anmerkung {
  margin: 14px 0 0;
}
.wahl-diagramm svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--schrift-ui);
  overflow: visible;
}
.wahl-diagramm .wahl-balken {
  display: none;
}
.wahl-gitter {
  stroke: var(--wahl-gitter);
}
.wahl-achse {
  stroke: var(--wahl-achse);
}
.wahl-spur {
  fill: var(--wahl-gitter);
}
.wahl-wert {
  fill: var(--wahl-wert);
  font-size: 13px;
  font-weight: 700;
}
.wahl-partei {
  fill: var(--wahl-schrift);
  font-size: 11.5px;
  font-weight: 700;
}
.wahl-balken .wahl-partei,
.wahl-balken .wahl-wert {
  font-size: 12.5px;
}
.wahl-farbe-cdu { fill: var(--partei-cdu); }
.wahl-farbe-spd { fill: var(--partei-spd); }
.wahl-farbe-gruene { fill: var(--partei-gruene); }
.wahl-farbe-fdp { fill: var(--partei-fdp); }
.wahl-farbe-afd { fill: var(--partei-afd); }
.wahl-farbe-linke { fill: var(--partei-linke); }
.wahl-farbe-ssw { fill: var(--partei-ssw); }
.wahl-farbe-bsw { fill: var(--partei-bsw); }
.wahl-farbe-sonstige { fill: var(--partei-sonstige); }
.wahl-farbe-andere { fill: var(--partei-andere); }
.wahl-tabelle {
  margin: 12px 0 16px;
  border: 1px solid var(--wahl-rand);
  border-radius: 8px;
  background: var(--papier);
}
.wahl-tabelle summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 700;
}
.wahl-tabelle summary:hover {
  background: var(--hell);
}
.inhalt .wahl-tabelle table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-family: var(--schrift-ui);
  font-size: .875rem;
}
.inhalt .wahl-tabelle th,
.inhalt .wahl-tabelle td {
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--wahl-rand);
  vertical-align: middle;
  background: var(--papier);
  color: var(--wahl-schrift);
}
.inhalt .wahl-tabelle thead th {
  background: var(--wahl-kopf);
  font-size: .8rem;
  font-weight: 700;
}
.inhalt .wahl-tabelle th:first-child {
  text-align: left;
  width: 43%;
  overflow-wrap: anywhere;
}
.inhalt .wahl-tabelle th:nth-child(2),
.inhalt .wahl-tabelle td:nth-child(2) {
  width: 20%;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.inhalt .wahl-tabelle th:nth-child(3),
.inhalt .wahl-tabelle td:nth-child(3) {
  width: 37%;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wahl-quelle {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-leise);
}

@container (max-width: 36rem) {
  .wahl-kennzahlen {
    gap: 7px;
  }
  .wahl-kennzahlen > div {
    padding: 12px 9px;
  }
  .wahl-kennzahlen dd {
    font-size: 1.15rem;
  }
  .wahl-diagramm .wahl-saeulen {
    display: none;
  }
  .wahl-diagramm .wahl-balken {
    display: block;
  }
  .inhalt .wahl-tabelle table {
    font-size: .78rem;
  }
  .inhalt .wahl-tabelle th,
  .inhalt .wahl-tabelle td {
    padding: 10px 5px;
  }
}

/* Zeitleiste (55j), Entwurf B: Linie in der Mitte, Kästen abwechselnd links
   und rechts, der Zeitraum gegenüber auf Höhe des Punkts. Schmal einspaltig
   mit der Linie links. Laufende Stationen („seit …“) mit gefülltem Punkt. */
.baustein-zeitleiste .zeitleiste {
  position: relative;
  margin: 0 0 var(--luft-4);
  padding: 0;
  list-style: none;
}
.baustein-zeitleiste .zeitleiste::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--linie);
}
.baustein-zeitleiste .zeitleiste-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 0;
}
.baustein-zeitleiste .zeitleiste-eintrag::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--dunkel);
  border-radius: 50%;
  background: var(--papier);
}
.baustein-zeitleiste .ist-laufend::after {
  border-color: var(--schmuck);
  background: var(--schmuck);
  box-shadow: 0 0 0 4px var(--hell);
}
.baustein-zeitleiste .zeitleiste-zeit {
  margin: 0;
  color: var(--dunkel);
  font-family: var(--schrift-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.baustein-zeitleiste .zeitleiste-inhalt {
  padding: 1rem 1.25rem;
  border-radius: 0 14px 0 14px;
  background: var(--hell);
}
.baustein-zeitleiste .zeitleiste-titel {
  margin: 0;
  color: var(--text);
  font-family: var(--schrift-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
.baustein-zeitleiste .zeitleiste-text {
  margin: .3rem 0 0;
  color: var(--text-leise);
  font-size: .97rem;
  line-height: 1.5;
}
.baustein-zeitleiste .zeitleiste-eintrag:nth-child(odd) .zeitleiste-zeit {
  grid-row: 1;
  grid-column: 1;
  text-align: right;
}
.baustein-zeitleiste .zeitleiste-eintrag:nth-child(odd) .zeitleiste-inhalt {
  grid-row: 1;
  grid-column: 2;
}
.baustein-zeitleiste .zeitleiste-eintrag:nth-child(even) .zeitleiste-zeit {
  grid-row: 1;
  grid-column: 2;
}
.baustein-zeitleiste .zeitleiste-eintrag:nth-child(even) .zeitleiste-inhalt {
  grid-row: 1;
  grid-column: 1;
  border-radius: 14px 0 14px 0;
}

@container (max-width: 36rem) {
  .baustein-zeitleiste .zeitleiste::before {
    left: 6px;
  }
  .baustein-zeitleiste .zeitleiste-eintrag {
    grid-template-columns: 1fr;
    row-gap: .35rem;
    padding-left: 1.75rem;
  }
  .baustein-zeitleiste .zeitleiste-eintrag::after {
    top: .55rem;
    left: 6px;
  }
  .baustein-zeitleiste .zeitleiste-eintrag:nth-child(n) .zeitleiste-zeit,
  .baustein-zeitleiste .zeitleiste-eintrag:nth-child(n) .zeitleiste-inhalt {
    grid-row: auto;
    grid-column: 1;
    text-align: left;
  }
}

/* Gedruckt einspaltig wie schmal */
@media print {
  .baustein-zeitleiste .zeitleiste::before {
    left: 6px;
  }
  .baustein-zeitleiste .zeitleiste-eintrag {
    grid-template-columns: 1fr;
    padding-left: 1.75rem;
    break-inside: avoid;
  }
  .baustein-zeitleiste .zeitleiste-eintrag::after {
    top: .55rem;
    left: 6px;
  }
  .baustein-zeitleiste .zeitleiste-eintrag:nth-child(n) .zeitleiste-zeit,
  .baustein-zeitleiste .zeitleiste-eintrag:nth-child(n) .zeitleiste-inhalt {
    grid-row: auto;
    grid-column: 1;
    text-align: left;
  }
}