/* ==========================================================================
   PVBB - Anpassung der WordPress-Standardblöcke

   design-system.css und bausteine.css stammen aus der Design-Vorschau und
   kennen WordPress nicht. Diese Datei schlägt die Brücke: Sie bringt die
   Blöcke, die WordPress selbst mitbringt, auf dasselbe Aussehen.

   Warum überhaupt Standardblöcke, wo doch eigene Bausteine vorliegen?
   Weil der Vorstand sie bedienen können soll. Das Menü etwa ist der
   Navigations-Block von WordPress - dadurch lässt es sich im Editor pflegen,
   ist von Haus aus tastaturbedienbar und bringt seine eigene Mobilfassung
   mit. Ein nachgebautes Menü müsste all das selbst können und selbst
   gepflegt werden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. WordPress' eigenes Fluss-Layout zurücknehmen

   WordPress legt auf jeden Block-Container die Regel

       :where(… .is-layout-flow) > *          { margin-block-start: 1.5rem }
       :where(… .is-layout-flow) > :first-child { margin-block-start: 0 }

   Das ist für ein beliebiges Theme sinnvoll, hier aber schädlich, denn dieses
   Theme bringt sein eigenes, abgestimmtes Abstandssystem mit. Drei Folgen
   waren in der ersten Fassung sichtbar:

   1. In einem Raster ist jede Karte ein Rasterfeld. Der zusätzliche obere
      Abstand schiebt alle Karten außer der ersten um 24 px nach unten - die
      erste Karte steht dadurch höher und wirkt größer. Dasselbe bei den
      Kennzahlen im Kopfbereich.
   2. Überschriften verlieren ihren unteren Abstand (margin-block-end: 0),
      dafür bekommt das folgende Element 24 px oben. Unterm Strich zu viel.
   3. Zwischen Überschrift und Aufzählung blieb gar kein Abstand.

   Deshalb wird die Regel hier zurückgenommen. Die Angabe .wp-site-blocks
   davor ist kein Zierrat: WordPress' Regel steht in :where(), hat also die
   Spezifität null. Ohne einen echten Klassennamen davor gewänne sie wieder.
   -------------------------------------------------------------------------- */

.wp-site-blocks :where(.is-layout-flow, .is-layout-constrained) > * {
  margin-block-start: 0;
}

/* Blöcke ohne eigene Abstandsregel im Designsystem brauchen einen. */
.wp-site-blocks
  :where(.is-layout-flow, .is-layout-constrained)
  > :where(.wp-block-buttons, .wp-block-image, .wp-block-embed, .wp-block-table) {
  margin-block-end: var(--raum-5);
}

/* --------------------------------------------------------------------------
   1. Kopfzeile und Menü
   -------------------------------------------------------------------------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopfzeile .wp-block-site-logo img,
.kopfzeile .kopfzeile__logo img {
  display: block;
  width: clamp(9.5rem, 7rem + 6vw, 13rem);
  height: auto;
}

/* Navigations-Block ------------------------------------------------------ */

.kopfzeile .wp-block-navigation {
  --navigation-layout-justification-setting: flex-end;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-menue);
  font-weight: 600;
}

.kopfzeile .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--blau-800);
  text-decoration: none;
  transition: background var(--uebergang), color var(--uebergang);
}

.kopfzeile .wp-block-navigation .wp-block-navigation-item__content:hover,
.kopfzeile .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  background: var(--blau-50);
  color: var(--blau-700);
}

/* Aktuelle Rubrik: WordPress vergibt current-menu-item selbst. */
.kopfzeile .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.kopfzeile .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--blau-700);
}

/* --- Lupe im Hauptmenue (nu/44) ------------------------------------------

   Vom Auftraggeber am 09.09.2026 gewuenscht: hinter "Kontakt", mit geringem
   Abstand, als Verweis auf die Suche.

   DIESELBE TECHNIK WIE IN DER FUSSZEILE - eine CSS-Maske ueber ::after,
   siehe --pvbb-symbol-lupe weiter unten. Das Markup des Navigations-Blocks
   kann kein <use> aufnehmen; der Verweis selbst kommt aus der Datenbank
   (ein Menuepunkt "Suche" mit dem Ziel /?s=), nicht aus dem Theme.

   WARUM UEBER DEN MENUEPUNKT UND NICHT ALS EIGENES ELEMENT IN DER
   KOPFZEILEN-VORLAGE: Ein Vorlagenteil, den jemand einmal im Editor
   bearbeitet hat, liegt in der Datenbank - eine Theme-Aenderung kaeme dann
   gar nicht an (HINWEISE.md, "Wenn eine Auslieferung eine Theme-Vorlage
   aendert"). Ueber den Menuepunkt entfaellt diese Falle, und die Lupe wirkt
   im Ueberlagerungsmenue am Handy von selbst mit.

   In der breiten Leiste steht NUR das Symbol, im Ueberlagerungsmenue steht
   "Suche" davor - so vom Auftraggeber gesetzt. Unterschieden wird an
   is-menu-open, nicht an einem eigenen Bruchpunkt: Der Kern entscheidet
   selbst, ab wann er die Ueberlagerung zeigt, und ein zweiter Bruchpunkt
   hier liefe irgendwann auseinander. */

.kopfzeile .wp-block-navigation-item__content[href*="?s="]::after {
  content: "";
  display: inline-block;
  /* ZURUECK auf 1,15em, am 10.09.2026 am laufenden System entschieden.

     Der Weg dorthin gehoert dazu, weil er eine Abhaengigkeit zeigt: Erst
     wirkte die Lupe zu klein und wurde um ein Viertel vergroessert. Nachdem
     sie danach naeher an "Kontakt" gerueckt ist, wirkte GENAU DIESE
     Vergroesserung zu wuchtig - "dadurch, dass sie jetzt naeher an Kontakt
     gerueckt ist, sieht die groessere Groesse nicht mehr gut aus".

     Groesse und Abstand sind hier also keine zwei unabhaengigen Werte. Wer
     einen davon aendert, sieht sich den anderen noch einmal an. */
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-lupe) center / contain no-repeat;
  mask: var(--pvbb-symbol-lupe) center / contain no-repeat;
}

/* In der breiten Leiste: der Text bleibt fuer Screenreader stehen, ist aber
   nicht zu sehen. display:none waere hier falsch - der Verweis haette dann
   keinen zugaenglichen Namen mehr und hiesse fuer eine Sprachausgabe
   schlicht "Link". */
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation-item__content[href*="?s="]
  .wp-block-navigation-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Geringer Abstand" zum Nachbarpunkt: Der Navigations-Block setzt seinen
   Zwischenraum aus blockGap in theme.json - 1,5rem, also 24px. Hier wird
   ein Teil davon zurueckgenommen.

   GERECHNET, nicht geschaetzt: Der erste Anlauf zog mit -0,55em. Die
   Menueschrift steht auf clamp(0.9375rem ... 1.0625rem), also 15 bis 17px;
   die Ruecknahme betrug damit rund 8,8px und liess rund 15px stehen. Der
   Auftraggeber hat den Abstand am laufenden System beurteilt und um die
   Haelfte gekuerzt haben wollen - also rund 7,5px.

   ZWEITER ANLAUF, 10.09.2026: "Die Lupe hat sich nur um wenige Pixel
   verschoben." Er hatte recht, und die Rechnung war unvollstaendig.

   Der SICHTBARE Abstand zwischen den beiden Beschriftungen besteht aus
   DREI Teilen, nicht nur aus dem Zwischenraum:

       0,75rem   Innenabstand rechts am Punkt "Kontakt"  (--raum-3)
     + 1,50rem   Zwischenraum des Navigations-Blocks     (blockGap)
     + 0,75rem   Innenabstand links am Punkt "Suche"     (--raum-3)
     ---------
       3,00rem = 48px

   Die erste Ruecknahme von 1,03rem liess davon 31,5px stehen - gegenueber
   39px vorher. Genau "wenige Pixel".

   Jetzt wird der Innenabstand LINKS am Suchpunkt entfernt und um 1,25rem
   zurueckgenommen: 0,75 + 1,5 - 1,25 + 0 = 1,0rem = 16px, also die Haelfte
   der 31,5px. Der Kasten, den das Listenelement beim Ueberfahren zeigt,
   ueberlappt dabei NICHT - 0,25rem Zwischenraum bleiben stehen. */
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container
  > .wp-block-navigation-item:has( > [href*="?s="] ) {
  margin-left: -1.25rem;
  padding-inline-start: 0;
}

/* Im Ueberlagerungsmenue: "Suche" davor, die Lupe mit etwas Luft dahinter. */
.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content[href*="?s="]::after {
  margin-left: 0.4em;
}

/* Der Menuepunkt der obersten Ebene -------------------------------------- */

/* Der entscheidende Aufbauunterschied zur Vorschau: Dort umfasst der
   Menuepunkt Text UND Pfeil, Kasten und Unterstrich liegen deshalb um beide.
   WordPress stellt den Aufklapp-Pfeil als eigenes Element NEBEN den Verweis.
   Ein Kasten auf dem Verweis endet folglich vor dem Pfeil, und ein Unterstrich
   ebenso - genau die beobachteten Abweichungen.

   Deshalb traegt hier das Listenelement den Innenabstand, die Rundung und den
   Kasten, nicht der Verweis. Damit umschliesst es Text und Pfeil wie in der
   Vorschau, und alles Weitere faellt von selbst richtig aus.

   Nur in der breiten Darstellung: Im aufgeklappten Menue der schmalen
   Darstellung umfasst dasselbe Listenelement die ganze Gruppe samt ihren
   Unterpunkten - dort ergaebe ein Kasten oder Unterstrich Unsinn. Fassung
   1.5.4 hatte genau das zur Folge: eine gruene Linie unter der ganzen Gruppe. */
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-m);
  transition: background var(--uebergang);
}

/* Der Verweis darin bringt keinen eigenen Kasten mehr mit - sonst laegen zwei
   uebereinander, und der innere ueberdeckte die Oberkante des Unterstrichs. */
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  padding: 0;
  border-radius: 0;
}

.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:hover,
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
  background: var(--blau-50);
}

.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:hover
  > .wp-block-navigation-item__content,
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:focus-within
  > .wp-block-navigation-item__content {
  background: none;
}

/* Der Aufklapp-Pfeil: kleiner, enger am Text und gedaempft wie in der
   Vorschau. WordPress gibt ihm sonst volle Deckkraft und eine eigene Groesse -
   das faellt staerker auf und macht das Menue unnoetig breit. Der Abstand zum
   Text kommt aus dem gap des Listenelements. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-icon {
  padding: 0;
  margin: 0;
  opacity: 0.55;
}

.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 0.7em;
  height: 0.7em;
  fill: currentColor;
  transition: transform var(--uebergang);
}

.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:hover
  > .wp-block-navigation__submenu-icon svg,
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .wp-block-navigation-item:focus-within
  > .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

/* Der gruene Unterstrich des aktiven Punktes. Er liegt um 0.1rem unterhalb des
   Kastens - wie in der Vorschau -, damit der Kasten beim Ueberfahren mit der
   Maus seine Oberkante nicht ueberdeckt. Seitlich um den Innenabstand
   eingerueckt, also genau ueber Text und Pfeil. */
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .current-menu-item::after,
.kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .current-menu-ancestor::after {
  content: "";
  position: absolute;
  left: var(--raum-3);
  right: var(--raum-3);
  bottom: -0.1rem;
  height: 3px;
  background: var(--akzent);
  border-radius: var(--rund-voll);
}

/* Etwas Luft zum rechten Rand, damit der letzte Menüpunkt nicht an der Kante
   klebt. */
.kopfzeile .wp-block-navigation .wp-block-navigation__container > li:last-child {
  margin-right: calc(var(--raum-2) * -1);
}

/* Untermenü -------------------------------------------------------------- */

.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 15rem;
  padding: var(--raum-2);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  box-shadow: var(--schatten-l);

  /* Untermenüs öffnen unterhalb ihres Menüpunkts nach rechts. WordPress
     klappt sie bei rechtsbündigen Menüs von sich aus nach links um - was
     hier so aussieht, als gehörten sie zum Nachbarpunkt. */
  left: 0;
  right: auto;

  /* Derselbe Abstand wie in der Vorschau. Fehlte er, setzte WordPress das
     Untermenü bündig an den Menüpunkt - die beiden Kästen klebten aneinander. */
  top: calc(100% + 0.35rem);
}

/* Der Abstand darüber ist eine tote Zone: Wer vom Menüpunkt zum Untermenü
   fährt, verlässt für gut fünf Pixel beides - das Untermenü schließt mitten
   in der Bewegung. Am 05.08.2026 vom Auftraggeber gemeldet: „ein kleines
   Gedulds- und Geschicklichkeitsspiel".

   Diese unsichtbare Brücke schließt die Lücke. Sie gehört zum Untermenü und
   damit zum Listenelement - der Zeiger bleibt also im Bereich, der das
   Untermenü offen hält.

   Die drei Pixel Zugabe sind kein Schätzwert, sondern gemessen: Ein absolut
   positioniertes Kind bezieht sich auf die POLSTERKANTE seines Kastens, und die
   liegt einen Pixel innerhalb dessen Rahmens. Eine Brücke von genau 0.35rem
   begann deshalb einen Pixel zu tief und liess die Spur abreissen - in Fassung
   1.5.11 gebaut, vom Auftraggeber als wirkungslos zurueckgemeldet, danach mit
   Headless-Chrome nachgemessen: Menuepunkt endet bei 84.0, Bruecke begann bei
   85.0.

   Die Zugabe ragt gut zwei Pixel in den Menuepunkt hinein. Das stoert nicht:
   Solange das Untermenue geschlossen ist, ist der ganze Kasten unsichtbar und
   nimmt keine Zeigerereignisse an. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-0.35rem - 3px);
  height: calc(0.35rem + 3px);
}

/* Ausnahme für den letzten Punkt: Dort würde ein nach rechts geöffnetes
   Untermenü aus dem Fenster ragen. */
.kopfzeile .wp-block-navigation .wp-block-navigation__container > li:last-child
  .wp-block-navigation__submenu-container {
  left: auto;
  right: 0;
}

/* Untermenüpunkte sind Nebensache und dürfen nicht so laut auftreten wie die
   Hauptpunkte darüber. Die höhere Spezifität ist nötig, weil WordPress seine
   eigene Schriftgröße mit derselben Verschachtelungstiefe setzt. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: block;
  padding: 0.45em 0.7em;
  font-family: var(--schrift-text);
  font-size: var(--gr-s);
  font-weight: 400;
  color: var(--text);
  white-space: normal;
}

/* Die Hervorhebung beim Überfahren trägt dieselbe Rundung wie überall sonst.
   Bis 1.5.46 fehlte sie hier — der Kasten war eckig, während der aktive
   Eintrag darunter runde Ecken hatte. Zwei Formen für dieselbe Auszeichnung;
   gemeldet vom Auftraggeber am 14.08.2026. `--rund-s` ist der kleinere der
   beiden Radien und passt zum flachen Untermenüpunkt; `--rund-m` (wie am
   Hauptpunkt) wirkte hier zu rund. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover,
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:focus-visible {
  background: var(--blau-50);
  color: var(--blau-700);
  border-radius: var(--rund-s);
}

/* Der Trennstrich, den WordPress zwischen Untermenüpunkte setzt, passt nicht
   zum ruhigen Aufbau der Kopfzeile. */
.kopfzeile .wp-block-navigation__submenu-container li {
  margin-bottom: 0;
  border: 0;
}

/* Mobilfassung ----------------------------------------------------------- */

.kopfzeile .wp-block-navigation__responsive-container-open,
.kopfzeile .wp-block-navigation__responsive-container-close {
  padding: 0.4em;
  color: var(--blau-800);
  border-radius: var(--rund-m);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--raum-6) var(--rand) var(--raum-8);
  background: var(--weiss);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding: 0.6em 0;
  font-size: var(--gr-h4);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  padding: 0 0 0 var(--raum-4);
  border: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Schaltflächen

   Der Knopf-Block von WordPress bekommt dasselbe Aussehen wie .knopf aus
   bausteine.css. Die Umrandungs-Variante von WordPress (is-style-outline)
   entspricht .knopf--rand.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: 0.8em 1.5em;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--rund-voll);
  transition: background var(--uebergang), color var(--uebergang),
    border-color var(--uebergang), transform var(--uebergang);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--akzent);
  color: var(--blau-900);
  border: 2px solid var(--akzent);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--akzent-hell);
  border-color: var(--akzent-hell);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--blau-800);
  border: 2px solid var(--linie-kraeftig);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--blau-800);
  background: var(--blau-50);
}

/* Auf dunklem Grund. Ohne diese Regeln steht ein dunkelblauer Knopf auf
   dunkelblauem Grund - genau der Fehler, der in der Vorschau auffiel. */
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.aufruf .wp-block-button.is-style-outline .wp-block-button__link,
.abschnitt--blau .wp-block-button.is-style-outline .wp-block-button__link,
.has-blau-800-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-blau-900-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--weiss);
  border-color: rgb(255 255 255 / 0.45);
}

.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.aufruf .wp-block-button.is-style-outline .wp-block-button__link:hover,
.abschnitt--blau .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-blau-800-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-blau-900-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: var(--weiss);
}

/* --------------------------------------------------------------------------
   3. Meldungen (Abfrage-Schleife)
   -------------------------------------------------------------------------- */

.meldungsraster .wp-block-post-template {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Feste Spaltenzahl statt auto-fit (va/02, zweiter Anlauf am 20.08.2026).

   ERSTER ANLAUF WAR FALSCH: minmax(17rem, 24rem) sollte nur die Breite je
   Karte begrenzen - auto-fit rechnet die SPURENZAHL aber mit der Obergrenze,
   nicht mit der Untergrenze. Bei 1170 px Inhaltsbreite passten damit nur noch
   zwei Spuren ((1170+24)/(384+24) = 2,9), und die dritte Spalte fiel weg. Der
   Auftraggeber hat es sofort gesehen: "Die dritte Spalte ist verschwunden,
   ihr Platz ist unausgefuellt."

   Feste Spaltenzahlen sind hier das richtige Mittel, weil das Ziel gar kein
   flexibles Raster ist, sondern das DRITTEL-RASTER DER STARTSEITE: dort sind
   es 374 px je Karte, hier ab 62rem ebenfalls (1170 - 2*24) / 3. Eine
   einzelne Meldung belegt dann eine Spalte statt der ganzen Breite - das war
   der urspruengliche Befund.

   Unter 48rem bleibt es bei einer Spalte ueber die volle Breite. */
@media (min-width: 48rem) {
  .meldungsraster .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .meldungsraster .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.meldungsraster .wp-block-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  box-shadow: var(--schatten-s);
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}

.meldungsraster .wp-block-post:hover {
  box-shadow: var(--schatten-m);
  transform: translateY(-2px);
}

.meldungsraster .wp-block-post-featured-image {
  margin: 0;
  aspect-ratio: 16 / 9;
}

.meldungsraster .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meldungsraster .wp-block-post-date {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.meldungsraster .wp-block-post-title {
  font-size: var(--gr-h4);
  line-height: var(--zeile-eng);
}

.meldungsraster .wp-block-post-title a {
  color: var(--blau-800);
  text-decoration: none;
}

.meldungsraster .wp-block-post-title a:hover {
  color: var(--blau-600);
}

.meldungsraster .wp-block-post-excerpt__excerpt {
  color: var(--text-leise);
}

/* „Weiterlesen" soll aussehen und sich verhalten wie jeder andere Weiterlink
   des Projekts: Pfeil dahinter, der beim Überfahren einen Satz nach rechts
   macht, und Text in Verbandsgrün.

   Bis 1.5.52 fehlte beides — gemeldet vom Auftraggeber am 15.08.2026. Der
   Grund ist der Aufbau: Anderswo erzeugt `pvbb_weiterlink()` (render.php) das
   Markup selbst und setzt ein echtes `<svg><use href="#pvbb-pfeil-rechts"/></svg>`
   hinein. Hier kommt der Verweis aus einem WordPress-Kernblock, dessen Markup
   sich nicht erweitern lässt — der Pfeil muss also aus der Gestaltung kommen.

   Deshalb dieselbe Technik wie bei der Lupe in der Fußzeile: eine Maske mit
   `currentColor`. Der Pfad ist derselbe wie im Zeichensatz (`pvbb-pfeil-rechts`
   in symbole.svg) — bei einer Änderung dort ist er hier mitzuziehen, was der
   Kommentar am Symbol vermerkt. */
.meldungsraster .wp-block-post-excerpt__more-link,
.meldungsraster .wp-block-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  color: var(--blau-700);
  text-decoration: none;
}

.meldungsraster .wp-block-post-excerpt__more-link::after,
.meldungsraster .wp-block-read-more::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-pfeil) center / contain no-repeat;
  mask: var(--pvbb-symbol-pfeil) center / contain no-repeat;
  transition: transform var(--uebergang);
}

.meldungsraster .wp-block-post-excerpt__more-link:hover,
.meldungsraster .wp-block-post-excerpt__more-link:focus-visible,
.meldungsraster .wp-block-read-more:hover,
.meldungsraster .wp-block-read-more:focus-visible {
  color: var(--verweis-hover);
}

.meldungsraster .wp-block-post-excerpt__more-link:hover::after,
.meldungsraster .wp-block-post-excerpt__more-link:focus-visible::after,
.meldungsraster .wp-block-read-more:hover::after,
.meldungsraster .wp-block-read-more:focus-visible::after {
  transform: translateX(3px);
}

/* Innenabstand für alles außer dem Bild */
.meldungsraster .wp-block-post > :not(.wp-block-post-featured-image) {
  margin-left: var(--raum-5);
  margin-right: var(--raum-5);
}

.meldungsraster .wp-block-post > :not(.wp-block-post-featured-image):first-child {
  margin-top: var(--raum-5);
}

.meldungsraster .wp-block-post > :last-child {
  margin-bottom: var(--raum-5);
}

/* Blätterung -------------------------------------------------------------- */

.wp-block-query-pagination {
  gap: var(--raum-3);
  margin-top: var(--raum-8);
  font-family: var(--schrift-ueberschrift);
  font-weight: 600;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
  padding: 0.45em 0.85em;
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  text-decoration: none;
}

.wp-block-query-pagination .current {
  background: var(--blau-800);
  border-color: var(--blau-800);
  color: var(--weiss);
}

/* --------------------------------------------------------------------------
   4. Einzelbeitrag
   -------------------------------------------------------------------------- */

.beitrag__kopf {
  padding-block: var(--raum-9) var(--raum-7);
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.beitrag__inhalt > * {
  max-width: var(--breite-text);
  margin-inline: auto;
}

/* Breite und volle Ausrichtung dürfen ausbrechen */
.beitrag__inhalt > .alignwide {
  max-width: var(--breite-inhalt);
}

.beitrag__inhalt > .alignfull {
  max-width: none;
}

.beitrag__inhalt figure img {
  border-radius: var(--rund-l);
}

/* --------------------------------------------------------------------------
   5. Fußzeile
   -------------------------------------------------------------------------- */

.fusszeile .wp-block-navigation {
  font-size: var(--gr-s);
}

.fusszeile .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--blau-300);
  text-decoration: none;
}

.fusszeile .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--weiss);
}

/* --------------------------------------------------------------------------
   6. Kleinigkeiten
   -------------------------------------------------------------------------- */

/* WordPress setzt bei Gruppen mit Hintergrundfarbe keinen Innenabstand. Ohne
   ihn klebt der Text an der Kante der Farbfläche. */
.wp-block-group.has-background:not(.aufruf):not(.karte--blau) {
  padding: var(--raum-6);
}

/* Bilder in Inhalten sollen nie über den Rand hinauslaufen */
.wp-block-image img {
  height: auto;
}

/* Der Editor stellt Abstände sonst über dem ersten Block nochmals dar */
.editor-styles-wrapper .wp-site-blocks > *:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   7. Einzelne Meldung
   -------------------------------------------------------------------------- */

/* Das Beitragsbild soll die Breite des Textes haben, nicht seine eigene.
   Ohne diese Regel steht ein Foto in Originalgröße neben einer schmalen
   Textspalte. */
.beitrag__bild {
  max-width: var(--breite-text);
  margin: 0 auto var(--raum-7);
}

.beitrag__bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rund-l);
}

.beitrag__inhalt figure,
.beitrag__inhalt .wp-block-image {
  margin-block: var(--raum-6);
}

.beitrag__inhalt img {
  width: 100%;
  height: auto;
  border-radius: var(--rund-l);
}

/* Blättern zwischen Meldungen: nebeneinander unter dem Text, nicht
   untereinander im weißen Rand daneben. */
.beitrag__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-4);
  max-width: var(--breite-text);
  margin: var(--raum-9) auto 0;
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
}

.beitrag__fuss .post-navigation-link-next {
  margin-left: auto;
  text-align: right;
}

.beitrag__fuss a {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  text-decoration: none;
}

.beitrag__rubriken {
  font-size: var(--gr-s);
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   8. Fußzeile: Listen statt Menüs
   -------------------------------------------------------------------------- */

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

.fusszeile__liste li {
  margin-bottom: var(--raum-2);
}

.fusszeile__liste li::marker {
  content: none;
}

.fusszeile__liste a {
  color: var(--blau-300);
  text-decoration: none;
  font-size: var(--gr-s);
}

/* Grün beim Überfahren, wie überall sonst in der Fußzeile.

   Bis 1.5.51 wurde die Liste hier weiß, während die Rechtszeile darunter
   („Impressum") grün wurde — zwei Antworten auf dieselbe Geste, zehn
   Zentimeter voneinander entfernt. Gemeldet vom Auftraggeber am 15.08.2026.

   `--akzent` und nicht `--verweis-hover`: Der Grund ist hier dunkel, und dort
   ist das helle Grün richtig (10,47:1 auf `--blau-900`); das dunkle Grün des
   Fließtexts käme auf 3,28:1. Dieselbe Entscheidung wie eine Zeile tiefer bei
   `.fusszeile a:hover`, aus demselben Grund. */
.fusszeile__liste a:hover,
.fusszeile__liste a:focus-visible {
  color: var(--akzent);
}

/* Das Padding+negative-Margin-Paar (nu/11) reserviert 5 px auf jeder Seite
   fuer den globalen Fokusrahmen (design-system.css, ":focus-visible" -
   outline: 3px solid; outline-offset: 2px = 5 px Ueberstand), ohne die
   sichtbare Position des Elements zu veraendern: Das Padding schafft den
   Platz, die gleich grosse negative Marge nimmt ihn dem Element wieder weg.
   Noetig, weil overflow:hidden direkt darunter sonst genau diesen
   Fokusrahmen mit abschneiden wuerde - an allen vier Kanten, nicht nur an
   der, die den Zeilenumbruch-Sonderfall betrifft. */
.fusszeile__rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-5);
  padding: 5px;
  overflow: hidden;
}

/* Der negative Ausgleich braucht die Elternklasse mit, sonst greift er
   NICHT: Weiter unten in dieser Datei steht ".fusszeile__unten p
   { margin: 0 }" - Spezifitaet 0-1-1 gegen 0-1-0, und die staerkere
   Regel gewinnt, obwohl sie frueher im Text steht.

   BEI DER GEGENPRUEFUNG AUFGEFALLEN, nicht beim Lesen: Die Regel oben
   sah eindeutig aus, und getComputedStyle meldete margin 0px an allen
   vier Seiten. Gemessen war die Folge, dass die ganze Verweiszeile um
   5 px nach links UND 5 px nach unten rutschte - letzteres sichtbar,
   weil die Zeile neben dem Copyright-Text steht, der sich nicht
   mitbewegt (VERFAHREN.md, Erkenntnis 11: eine CSS-Regel zu lesen sagt,
   was gaelte, WENN sie greift). */
.fusszeile__unten .fusszeile__rechtslinks {
  margin: -5px;
}

/* --- Trenner zwischen den Verweisen (nu/11) -------------------------------

   Auf ::before am jeweils FOLGENDEN Verweis, nicht auf ::after am
   vorausgehenden: Die Lupe (und seit nu/02 der Globus) belegen bereits
   a::after an genau einem bzw. zwei der Verweise - ein zweiter ::after am
   selben Element wuerde sie ueberschreiben oder mit ihnen kollidieren.

   Absolut positioniert und dadurch OHNE eigene Breite im Fluss: Der
   bestehende 24-px-Abstand (--raum-5, oben) darf sich nicht aendern - der
   Trenner steht nur zusaetzlich MITTIG darin, bei 12 px (die Haelfte von
   --raum-5). Ein normales Inline-Element wuerde entweder den Abstand
   vergroessern oder den Folgetext verschieben.

   overflow:hidden auf dem Container (oben) faengt den Sonderfall beim
   Zeilenumbruch ab: Jede neue Zeile beginnt bei flex-wrap (ohne
   justify-content) an derselben linken Kante wie die erste. Ein Trenner,
   der 12 px VOR seinem eigenen Verweis positioniert wird, faellt fuer das
   jeweils erste Element einer Zeile deshalb automatisch links aus dem
   sichtbaren Bereich des Containers - er wird abgeschnitten, statt lose vor
   dem Zeilenanfang zu haengen. Es gibt keine CSS-Selektorform fuer "erstes
   Element seiner Zeile"; das Abschneiden ist der Ersatz dafuer. Am schmalen
   Fenster nachgemessen, siehe Ticket. */
.fusszeile__rechtslinks a:not(:first-child) {
  position: relative;
}

.fusszeile__rechtslinks a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--raum-5) / -2);
  top: 50%;
  width: 1px;
  height: 1em;
  background: var(--text-leise);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Grundabstände wiederherstellen

   WordPress' Fluss-Layout setzt nicht nur einen oberen Abstand, sondern
   entfernt auch den unteren (margin-block-end: 0). Dadurch klebte der Text
   unmittelbar an seiner Überschrift und zwischen Überschrift und Aufzählung
   blieb gar kein Abstand.

   Hier stehen dieselben Werte wie in design-system.css - nur mit einer
   Spezifität, die gegen WordPress' Regel ankommt. Die Bausteine, die ihre
   Abstände selbst bestimmen, sind ausgenommen; sie stehen weiter unten und
   gewinnen dadurch.
   -------------------------------------------------------------------------- */

.wp-site-blocks :where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: var(--raum-4);
}

.wp-site-blocks :where(p, ul, ol, dl) {
  margin-block-end: var(--raum-4);
}

/* Vor einer Überschrift darf mehr Luft stehen als danach - das bindet sie an
   den folgenden Abschnitt statt an den vorangehenden. */
.beitrag__inhalt :where(h2, h3),
.hauptblock :where(h2, h3),
.textfluss :where(h2, h3) {
  margin-block-start: var(--raum-8);
}

.beitrag__inhalt > :where(h2, h3):first-child,
.hauptblock > :where(h2, h3):first-child,
.textfluss > :where(h2, h3):first-child {
  margin-block-start: 0;
}

/* Bausteine mit eigenem Abstandsmaß */
.wp-site-blocks :where(.kennzahl) :where(p),
.wp-site-blocks :where(.person) :where(p),
.wp-site-blocks :where(.spiegel) :where(p),
.wp-site-blocks :where(.termin) :where(p),
.wp-site-blocks :where(.abschnitt-kopf) :where(p),
.wp-site-blocks :where(.karte__fuss),
.wp-site-blocks :where(.spaltenblock__titel),
.wp-site-blocks :where(.meldung) :where(p) {
  margin-block-end: 0;
}

.wp-site-blocks :where(.meldung__titel),
.wp-site-blocks :where(.karte) :where(h3) {
  margin-block-end: var(--raum-3);
}

/* In der Seitenspalte sitzen die Kästen dichter beieinander. */
.wp-site-blocks .seitenspalte > * {
  margin-block-end: var(--raum-5);
}

/* --------------------------------------------------------------------------
   10. Bausteine, die in WordPress zu Links werden

   In der Vorschau waren Termin und Vereinstitel reiner Text. In WordPress
   führen sie auf die jeweilige Einzelseite - und ein Link unterstreicht sich
   von selbst. Hier wird das zurückgenommen: Die Bausteine kennzeichnen sich
   bereits durch ihre Form als anklickbar.
   -------------------------------------------------------------------------- */

a.termin,
a.termin:hover {
  text-decoration: none;
}

/* Damit war der Handzeiger der einzige Hinweis auf den Verweis — kein
   Unterstrich, kein Farbwechsel, nichts. Gemeldet vom Auftraggeber am
   14.08.2026: „mindestens Farbwechsel der Terminüberschrift".

   Es sind zwei Mittel, weil eines zu wenig ist: Der Farbwechsel der
   Überschrift allein bringt nur 1,84:1 Unterschied (`--blau-800` auf
   `--blau-600`) — mehr als die 1,40:1, die er zu Recht nicht sehen konnte,
   aber nicht viel. Dazu leuchtet der ganze Eintrag auf, wie es die
   Spielortzeilen in der Seitenspalte tun; diese Lösung hat er dort
   ausdrücklich als ausreichend bezeichnet.

   Der negative Außenabstand lässt die Fläche über den Text hinausragen, ohne
   die Zeile zu verschieben — `.termin` hat nur `padding-block`, ein
   Hintergrund klebte sonst am Text. */
a.termin {
  padding-inline: var(--raum-3);
  margin-inline: calc(var(--raum-3) * -1);
  border-radius: var(--rund-m);
  transition: background var(--uebergang);
}

a.termin:hover,
a.termin:focus-visible {
  background: var(--blau-50);
}

a.termin:hover .termin__titel,
a.termin:focus-visible .termin__titel {
  color: var(--blau-600);
}

.karte h3 a,
.spaltenblock h3 a {
  color: inherit;
  text-decoration: none;
}

.karte h3 a:hover,
.spaltenblock h3 a:hover {
  color: var(--blau-600);
}

/* Innerhalb eines Termins sollen Titel und Ort keine eigenen Absatzabstände
   mitbringen - sie stehen dicht untereinander. */
.termin .termin__titel,
.termin .termin__ort {
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Zweispalter mit Seitenspalte

   Der Spaltenblock von WordPress lässt zwischen seinen Spalten nur einen
   sehr kleinen Abstand. Hauptblock und Seitenspalte klebten dadurch
   aneinander.
   -------------------------------------------------------------------------- */

.zweispalter {
  gap: var(--raum-9);
}

/* Entwurfsraster statt WordPress-Prozentspalten (Ticket va/05).

   Der Entwurf gibt eine FESTE Seitenspalte von 20.5rem vor
   (design-system.css, .gespann). Die Vorlage benutzte stattdessen die
   Prozentspalten des Spaltenblocks (66.66/33.33). Gemessen am 20.08.2026 auf
   der Verbandsseite: Seitenspalte 23.06rem statt 20.5rem - also 2.56rem zu
   breit. (Das Ticket schaetzte "etwa 4,5rem"; die Schaetzung ging von 25rem
   aus und liess ausser Acht, dass beide Spalten schrumpfen, um den Abstand
   unterzubringen.)

   Der Wechsel auf Grid ist der Weg, den auch der Entwurf geht. Er ignoriert
   die flex-basis-Angaben des Markups, ohne sie zu ueberschreiben - deshalb
   bleiben sie stehen: Sie sind fuer den EDITOR die bessere Naeherung (2:1)
   als gar keine Angabe (1:1). Auf der Website gilt das Raster.

   Erst ab 782px, weil WordPress seine Spalten unterhalb 781px untereinander
   stellt - dieser Umbruch bleibt unangetastet. */
@media (min-width: 782px) {
  .zweispalter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20.5rem;
  }
}

@media (max-width: 60rem) {
  .zweispalter {
    gap: var(--raum-8);
  }
}

/* --------------------------------------------------------------------------
   12. Meldungskarten der Übersichtsseite

   Die Übersicht nutzt die Abfrage-Schleife von WordPress, die Startseite den
   eigenen Baustein. Beide sollen gleich aussehen.
   -------------------------------------------------------------------------- */

.meldungsraster .wp-block-post-featured-image,
.meldungsraster .pvbb-ersatzbild {
  display: block;
  width: 100%;
  margin: 0 0 var(--raum-5);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--blau-50);
}

.meldungsraster .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* „Weiterlesen“ soll immer am unteren Rand der Karte sitzen, nicht in festem
   Abstand zum Text. Sonst steht es je nach Textlänge auf anderer Höhe und das
   Raster wirkt unruhig. */
.meldungsraster .wp-block-post-excerpt {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.meldungsraster .wp-block-post-excerpt__excerpt {
  flex: 1;
  margin-bottom: var(--raum-4);
}

.meldungsraster .wp-block-post-excerpt__more-text {
  margin: 0;
}

.meldungsraster .wp-block-post-date {
  margin-bottom: var(--raum-2);
}

.meldungsraster .wp-block-post-title {
  margin-bottom: var(--raum-3);
}

/* ==========================================================================
   13. Nachbesserungen zur Rückmeldung 1.1
   ========================================================================== */

/* --- Knöpfe: nur leicht abgerundet, wie in der Vorschau ------------------ */

.wp-block-button__link {
  border-radius: var(--rund-m);
}

/* --- Abstand vor einem Knopf, der unter einem Raster steht --------------- */

.wp-site-blocks .raster + .wp-block-buttons,
.wp-site-blocks .raster + .knopf-reihe,
.wp-site-blocks .wp-block-pvbb-vereinsliste + .wp-block-buttons,
.wp-site-blocks .wp-block-pvbb-meldungen + .wp-block-buttons {
  margin-block-start: var(--raum-8);
}

/* --- Dachzeile: mehr Luft zur Überschrift -------------------------------- */

.augenbraue,
.is-style-pvbb-augenbraue {
  margin-bottom: var(--raum-4);
}

/* --- Kopfzeile ----------------------------------------------------------- */

/* Kein zusätzlicher Abstand zwischen Kopfzeile und erstem Abschnitt. */
.wp-site-blocks > .kopfzeile {
  margin-block-end: 0;
}

.wp-site-blocks > main.inhalt > :first-child {
  margin-block-start: 0;
}

/* Der Transparenzeffekt der Kopfzeile steht weiter unten in Abschnitt 15 -
   auf einer eigenen Ebene, nicht auf .kopfzeile selbst. Hier stand er bis
   Fassung 1.3 und hat das Sandwich-Menü lahmgelegt: Ein Element mit
   backdrop-filter wird zum Bezugsrahmen für alles, was darin position:fixed
   ist, und das Überlagerungsmenü blieb dadurch so hoch wie die Kopfzeile. */

/* --- Untermenüs ---------------------------------------------------------- */

/* Nach rechts öffnen. WordPress dreht Untermenüs bei rechtsbündigem Menü von
   sich aus um und setzt dafür zur Laufzeit .is-flipped - deshalb muss auch
   dieser Fall ausdrücklich zurückgesetzt werden. */
.kopfzeile .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.kopfzeile .wp-block-navigation .has-child.is-flipped .wp-block-navigation__submenu-container {
  left: 0;
  right: auto;
}

/* Ausnahme: Der letzte Punkt öffnet nach links, sonst ragt sein Untermenü
   aus dem Fenster. */
.kopfzeile .wp-block-navigation .wp-block-navigation__container > li:last-child .wp-block-navigation__submenu-container,
.kopfzeile .wp-block-navigation .wp-block-navigation__container > li:nth-last-child(2) .wp-block-navigation__submenu-container {
  left: auto;
  right: 0;
}

/* Breite: „Charlottenburger TSV von 1858“ soll in einer Zeile stehen. Diese
   Breite ist zugleich die Obergrenze - längere Einträge brechen um. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 17rem;
  max-width: 21rem;
}

/* Aktiver Untermenüeintrag: ein zurückhaltender Strich statt des kräftigen
   grünen Balkens, der unter dem ersten Eintrag unschön wirkte. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container
  :where(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
  box-shadow: none;
  border-radius: var(--rund-s);
  background: var(--blau-50);
  border-left: 3px solid var(--blau-300);
  padding-left: calc(0.7em - 3px);
  color: var(--blau-700);
}

/* --- Umschaltpunkt zum Sandwich-Menü -------------------------------------

   WordPress schaltet erst bei 600 px um. Das Menü des Verbands ist dafür zu
   breit: Bei 886 px wurde es mitten in „Partnerschaften“ abgeschnitten.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .kopfzeile .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .kopfzeile .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Aufgeklappt über die ganze Fensterhöhe. Ohne diese Angaben blieb das Menü
   so hoch wie die Kopfzeile, und die Punkte waren nur mühsam zu erreichen. */
.kopfzeile .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: var(--raum-6) var(--rand) var(--raum-9);
  z-index: 100000;
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: block;
  width: 100%;
  padding-top: var(--raum-6);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding: 0.45em 0;
  font-size: var(--gr-l);
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.3em 0;
  font-size: var(--gr-m);
}

/* --- Waagerechter Rollbalken ---------------------------------------------

   Irgendein Element ragt über die Fensterbreite hinaus. Statt es zu suchen,
   wird hier verhindert, dass daraus ein Rollbalken entsteht - senkrecht
   bleibt gerollt, waagerecht nicht.
   -------------------------------------------------------------------------- */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* --- Meldungskarten ------------------------------------------------------ */

/* Bei langem Text stand „Weiterlesen“ unmittelbar unter dem letzten Satz. */
.meldung .weiterlink {
  margin-top: var(--raum-4);
}

/* Ersatzgrafiken exakt so hoch wie die Fotos. */
.meldungsraster .pvbb-ersatzbild,
.meldung .pvbb-ersatzbild,
.meldung__bild {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* --- Fußzeile: gemeinsame Grundlinie ------------------------------------- */

.fusszeile__unten {
  align-items: baseline;
}

.fusszeile__unten p {
  margin: 0;
}

/* --- Kopfzone der Inhaltsseiten ------------------------------------------ */

/* Der Vorspann gehört noch in die graue Zone unter die Überschrift - dort
   wirkt er als Einleitung. Darunter stehend war er kaum als solcher zu
   erkennen. */
.seitenkopf {
  padding-block: var(--raum-8) var(--raum-7);
}

.seitenkopf .vorspann,
.seitenkopf .is-style-pvbb-vorspann {
  margin-bottom: 0;
}

.seitenkopf + .abschnitt {
  padding-block-start: var(--raum-7);
}

/* Ticket ub/03-oberste-ebene (27.08.2026): Die Vereinsuebersicht hebt ihren
   ersten Inhaltsblock (den Vereinskartenblock) auf die oberste Ebene des
   Seiteninhalts - er traegt seither direkt die Klasse "huelle" statt in einer
   umschliessenden .abschnitt-Huelle zu stecken (inc/inhalte.php). Die Regel
   oben griffe deshalb nicht mehr; sie brauchte hier denselben Abstand als
   MARGIN statt PADDING - waere es Padding, landete es INNERHALB der
   Vereinsrahmen-Karte (die hat ein eigenes Aussehen: Rand, Hintergrund) statt
   als Luecke DAVOR. Gemessen (drei echte Theme-Stylesheets, vier Breiten):
   identisch zum vorherigen Abstand von 40px (var(--raum-7)). */
.seitenkopf + .huelle {
  margin-block-start: var(--raum-7);
}

/* --- Hintergrundgrafik in dunklen Bändern ---------------------------------

   Bis Ticket ub/02 stand hier "das Spielfeld als <img class="aufruf__muster">
   mit hoeherer Deckkraft/Breite als in der Vorschau" - eine reine
   Ueberschreibung von bausteine.css (dort 0,09/22rem), im WordPress-Kontext
   gewinnend, weil diese Datei spaeter geladen wird als bausteine.css.

   Seit ub/02 gibt es dieses <img> in der Datenbank nicht mehr: Es stand in
   einem wp:html-Block mit einem PHP-Bildaufruf, der im Seiteninhalt der
   Startseite bzw. von Mitgliedsvereine als Text gelandet waere ("Der zweite
   und dritte Bildfall" im Ticket ub/02, Weg A). Das Wasserzeichen kommt
   seither als Pseudoelement - reine Dekoration, kein Inhalt, kann darum
   nicht im Editor auftauchen. .aufruf bringt bereits position:relative und
   overflow:hidden mit (bausteine.css) - das Pseudoelement selbst wird hier
   positioniert.

   Die Werte sind UNVERAENDERT dieselben wie zuvor an dieser Stelle (rechts
   -4rem/unten -6rem aus bausteine.css, Breite min(46rem,70%) und Deckkraft
   0,16 als Ueberschreibung wie bisher NUR im WordPress-Kontext) - gemessen
   an der dargestellten Seite belegt, nicht behauptet (AGENTS.md). */
.aufruf::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: min(46rem, 70%);
  aspect-ratio: 489 / 387; /* dieselbe Grafik wie zuvor, dasselbe Seitenverhaeltnis wie ihre width/height-Attribute */
  opacity: 0.16;
  pointer-events: none;
  background-image: url("../grafiken/spielfeld.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Seitenspalte: Block „Der Verein“ ------------------------------------ */

.spaltenblock .abzeichen {
  margin-top: var(--raum-2);
}

.spaltenblock p {
  margin-bottom: var(--raum-3);
}

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

/* --------------------------------------------------------------------------
   14. Weitere Nachbesserungen
   -------------------------------------------------------------------------- */

/* Schmaler Hinweisblock - hebt sich vom breiten Band darunter ab.

   nu/12: Diese Klasse (hier und in den beiden weiteren Regeln unten, fuer die
   Vereinsseite) hat KEIN Element mehr im Theme, in der Vorschau oder in der
   Einrichtungsassistenten-Seed (inc/inhalte.php) - die "Weitere Vereine sind
   im Gespraech"-Karte, an die der Name erinnert, traegt seit ub/03 die
   Klassen "karte karte--blau" statt "schmalblock". Trotzdem NICHT entfernt:
   Ob ein Redakteur sie zwischenzeitlich manuell in ein "Zusaetzliche
   CSS-Klasse(n)"-Feld eingetragen hat, laesst sich ohne das laufende
   WordPress nicht ausschliessen (Falle 3 aus nu/12). Vor einer Entfernung:
   die Seitenquelle der Vereinsseite und der Vereinsuebersicht am laufenden
   System nach class="schmalblock" durchsuchen. */
.schmalblock {
  max-width: 42rem;
}

/* Seitenspalte: Spielorte -------------------------------------------------

   Die Ortszeile ist zweispaltig (Punkt links, Angaben rechts). In der
   schmalen Seitenspalte blieb dafür zu wenig Platz, und die Kennzeichnung
   „Anfänger willkommen“ drückte die Angaben an den Rand. Dort deshalb
   einspaltig und die Kennzeichnung darunter.

   Hier stand bis 1.5.45 zusätzlich „cursor: default“. Das war richtig,
   solange die Zeile nur Angaben zeigte — sie erbte von der Karte einen
   Handzeiger, der ins Leere versprach. Seit `zb/23` ist sie ein echter
   Verweis auf die Seite „Spielorte“; die Rücknahme hat den Handzeiger
   des Browsers überstimmt, während die Farbe beim Überfahren weiterhin
   wechselte. Wer hier wieder etwas an `cursor` schreibt, prüft zuerst,
   ob die Zeile noch ein Verweis ist.
   -------------------------------------------------------------------------- */

.spaltenblock .ortsliste .ortszeile {
  display: block;
}

.spaltenblock .ortsliste .ortszeile__punkt {
  display: none;
}

.spaltenblock .ortsliste .ortszeile__halle {
  display: block;
  margin-bottom: var(--raum-1);
}

.spaltenblock .ortsliste .abzeichen {
  margin-top: var(--raum-2);
  font-size: var(--gr-xs);
  padding: 0.2em 0.6em;
}

/* Der Block „Der Verein“: nicht alles gleich fett, und Abstand zur Linie. */
.spaltenblock .abzeichen--mitglied {
  margin-top: var(--raum-3);
}

.spaltenblock__titel + * {
  margin-top: var(--raum-4);
}

/* Downloadknopf ------------------------------------------------------------

   Als Blockvariante des Knopfes: Im Editor unter „Stile“ auswählbar, ohne
   dass jemand eine CSS-Klasse eintippen muss. Das Symbol steckt als
   Datenadresse in der Regel - kein zusätzlicher Serverabruf.

   nu/12: ".knopf--download" selbst kommt in keiner Codesuche vor (weder
   Theme noch Plugin noch Vorschau) - trotzdem behalten, statt nur auf
   "is-style-pvbb-download" zu kuerzen. Sie ist die manuelle Gegenstueck-
   Klasse fuer ein Feld, das ein Redakteur ueber "Zusaetzliche CSS-
   Klasse(n)" von Hand eintragen koennte; ob das bereits geschehen ist, zeigt
   nur das laufende WordPress (Falle 3 aus nu/12), keine Textsuche im Code.
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-pvbb-download .wp-block-button__link::before,
.knopf--download::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-download) center / contain no-repeat;
  mask: var(--pvbb-symbol-download) center / contain no-repeat;
}

:root {
  --pvbb-symbol-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4l-4.7-5.7 1.4-1.4 3.3 3.3V3h2zM5 19h14v2H5v-2z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   15. Nachbesserungen zur Rückmeldung 1.2
   ========================================================================== */

/* --- Untermenü öffnet nach rechts ----------------------------------------

   Der bisherige Versuch scheiterte an der Spezifität: WordPress' Regel für
   rechtsbündige Menüs zählt fünf Klassen, meine nur vier - also gewann
   WordPress und klappte das Untermenü nach links um. Hier steht nun
   dieselbe Kette plus .kopfzeile.
   -------------------------------------------------------------------------- */

.kopfzeile .wp-block-navigation.items-justified-right .wp-block-navigation__container
  .has-child .wp-block-navigation__submenu-container,
.kopfzeile .wp-block-navigation.items-justified-right .wp-block-page-list
  > .has-child .wp-block-navigation__submenu-container {
  left: 0;
  right: auto;
}

/* Der letzte Punkt öffnet nach links, sonst ragt sein Untermenü hinaus. */
.kopfzeile .wp-block-navigation.items-justified-right .wp-block-navigation__container
  > li:last-child .wp-block-navigation__submenu-container {
  left: auto;
  right: 0;
}

/* Breite richtet sich nach dem längsten Eintrag, gedeckelt bei 22 rem.
   „Charlottenburger TSV von 1858“ passt damit in eine Zeile, längere
   Einträge brechen um. */
.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: max-content;
  max-width: 22rem;
}

/* --- Transparenz der Kopfzeile -------------------------------------------

   backdrop-filter darf NICHT auf .kopfzeile selbst stehen: Ein Element mit
   backdrop-filter wird zum Bezugsrahmen für alles, was darin position:fixed
   ist. Das Überlagerungsmenü orientierte sich dadurch an der Kopfzeile statt
   am Fenster und war nur so hoch wie diese.

   Deshalb liegt der Effekt auf einer eigenen Ebene dahinter.
   -------------------------------------------------------------------------- */

@supports (backdrop-filter: blur(1px)) {
  .kopfzeile {
    background: transparent;
    isolation: isolate;
  }

  .kopfzeile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}

/* --- Sandwich-Menü: wirklich über das ganze Fenster ----------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  overflow-y: auto;
  z-index: 100000;
}

/* --- Suche mit Lupe in der Fußzeile -------------------------------------- */

.fusszeile__rechtslinks a[href*="?s="]::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.35em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-lupe) center / contain no-repeat;
  mask: var(--pvbb-symbol-lupe) center / contain no-repeat;
}

:root {
  --pvbb-symbol-lupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 015.5 11.3l4.6 4.6-1.4 1.4-4.6-4.6A7 7 0 1110 3zm0 2a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E");

  /* Derselbe Pfad wie `pvbb-pfeil-rechts` in symbole.svg. Als Maske, weil das
     Markup des WordPress-Blocks „Weiterlesen" kein <use> aufnehmen kann. */
  --pvbb-symbol-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1 4.5 20.6 12l-7.5 7.5-1.6-1.6 4.8-4.8H3.4v-2.2h12.9l-4.8-4.8z'/%3E%3C/svg%3E");

  /* Globus vor "English summary" in der Fußzeile (nu/02). Ein Umriss aus
     zwei Nationalflaggen (Vorgabe bis 25.08.2026) wurde verworfen: Bei
     12,944 px Leistenschrift (--gr-xs) wird ein Rechteck mit Binnenzeichnung
     zum Fleck, ein Kreis bleibt erkennbar - gemessen an vier gerenderten
     Fassungen, siehe .scratch/nach-umbau/issues/02-englische-zusammenfassung.md.
     Gefüllter Pfad wie die Lupe daneben, kein Strich - sonst wirkt der
     Globus neben ihr dünner statt gleich gewichtig.

     BERICHTIGT AM 26.08.2026: Die erste ausgelieferte Fassung war eine
     gefüllte Kugel mit ausgesparten Breitenkreisen. Bei 72 px sah sie
     gut aus, bei 18 px verschmolzen die Kreise zu Streifen - der
     Auftraggeber nannte sie zutreffend einen Ball. Sie war ausserdem
     gar nicht die Zeichnung, die ihm zur Entscheidung vorlag; jene war
     ein Umriss. Diese Fassung ist es wieder: Ring, Meridian-Oval,
     Aequator - weniger Flaeche, klarere Linien. Bei 18, 24, 40 und
     72 px gerendert und angesehen, nicht nur gemessen (Erkenntnis 23:
     eine Maske, die nichts oder Falsches zeichnet, sieht in jeder
     Messung gesund aus).

     DRITTER ANLAUF, 26.08.2026 - und diesmal kam die Loesung vom
     Auftraggeber. Die Umriss-Fassung mit ZWEI Querlinien war richtig,
     wirkte bei 18 px aber wie ein Schachbrett: An den Kreuzungen von
     Querbalken und Meridian-Oval waren die Linien unterbrochen.
     URSACHE ist fill-rule='evenodd' - dort ueberlappen zwei Flaechen
     und sparen sich gegenseitig aus. Ring und Meridian BRAUCHEN
     evenodd, um hohl zu bleiben; die Balken nicht. Deshalb jetzt ZWEI
     Pfade: der erste mit evenodd, der zweite ohne. Die Querlinien
     laufen dadurch durch, und bei 18 px liest es sich als Globus. */
  --pvbb-symbol-globus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6A10.4 10.4 0 1022.4 12 10.4 10.4 0 0012 1.6zm0 2.05a8.35 8.35 0 018.35 8.35A8.35 8.35 0 0112 20.35 8.35 8.35 0 013.65 12 8.35 8.35 0 0112 3.65zM12 3.65c-1.9 0-3.6 3.74-3.6 8.35s1.7 8.35 3.6 8.35 3.6-3.74 3.6-8.35S13.9 3.65 12 3.65zm0 2.05c.55 0 1.55 2.5 1.55 6.3s-1 6.3-1.55 6.3-1.55-2.5-1.55-6.3 1-6.3 1.55-6.3z'/%3E%3Cpath d='M4.2 8.4h15.6v1.9H4.2zM4.2 13.7h15.6v1.9H4.2z'/%3E%3C/svg%3E");
}

/* --- Globus hinter "English summary" in der Fußzeile (nu/02) -------------

   Dasselbe Muster wie die Lupe direkt darüber: ::after mit CSS-Maske, weil
   pvbb_render_fusszeilenliste() (inc/render.php) reine <a>-Elemente ausgibt,
   kein Markup, das ein <use> aufnehmen könnte.

   Maße bewusst NICHT wie die Lupes ERSTE Regel (0.9em/-0.1em von 2026),
   sondern gleich ihre END-Werte, die die Nachbesserung weiter unten
   (Abschnitt 16, "Lupe in der Fußzeile deutlicher") daraus gemacht hat: An
   der laufenden Website nachgemessen (25.08.2026) ist die Lupe dort
   17,47 × 17,47 px bei 4,53 px Abstand zum Text. Globus und Lupe sollen
   gleich groß bleiben, auch wenn die Schrift über ihr clamp() mitwächst -
   deshalb dieselben em-Werte, nicht ein hart gesetztes Pixelmaß. */
.fusszeile__rechtslinks a[href*="english-summary"]::after {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-left: 0.35em;
  vertical-align: -0.28em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-globus) center / contain no-repeat;
  mask: var(--pvbb-symbol-globus) center / contain no-repeat;
}

/* --- English-Verweis im Aufmacher der Startseite (db/02) -----------------

   Skizze des Auftraggebers: links unter den beiden Aktionsknoepfen, ueber
   der Trennlinie zu den Kennzahlen (.kennzahlen, border-top). Reihenfolge
   Globus - Beschriftung - Pfeil, dieselbe gedimmte Farbe wie die
   Fusszeilenverweise (--blau-300, gemessen 6,84:1 auf --blau-900).

   Eigene Klasse statt .weiterlink: .hero .weiterlink faerbt auf dem dunklen
   Grund bewusst gruen (--akzent, design-system.css) - hier soll es aber
   ausdruecklich die gedimmte Fusszeilenfarbe bleiben, kein Akzent.

   Globus UND Pfeil sind dieselben Masken wie in der Fusszeile
   (--pvbb-symbol-globus, --pvbb-symbol-pfeil, weiter oben definiert) -
   der Globus bleibt dabei unveraendert (nu/02, abgenommen). Als zwei
   Pseudo-Elemente auf einem einzigen Anker statt echtem <svg>/<span>-Markup,
   dieselbe Technik wie bei Lupe und Globus in der Fusszeile. Der Pfeil
   bewegt sich beim Ueberfahren genauso wie bei "Weiterlesen" weiter oben
   (dieselbe transform/transition). */
/* Schriftgroesse wie die Knoepfe darueber (--gr-s), nicht wie der
   Fliesstext. Vom Auftraggeber am 26.08.2026 entschieden: Seine
   urspruengliche Vorgabe war die Fusszeilengroesse (--gr-xs, rund 13 px) -
   die war ihm am fertigen Ergebnis zu klein, der geerbte Fliesstext
   (--gr-m) zu gross. --gr-s ist genau das, was .wp-block-button__link
   traegt.

   Globus und Pfeil skalieren mit, weil sie in em gesetzt sind - sie werden
   dadurch kleiner und bleiben im Verhaeltnis zur Schrift gleich. */
.hero__english {
  margin-top: var(--raum-6);
  font-size: var(--gr-s);
}

.hero__english a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--blau-300);
  text-decoration: none;
}

.hero__english a:hover,
.hero__english a:focus-visible {
  color: var(--akzent);
  text-decoration: underline;
}

.hero__english a::before {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-globus) center / contain no-repeat;
  mask: var(--pvbb-symbol-globus) center / contain no-repeat;
}

.hero__english a::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: var(--pvbb-symbol-pfeil) center / contain no-repeat;
  mask: var(--pvbb-symbol-pfeil) center / contain no-repeat;
  transition: transform var(--uebergang);
}

.hero__english a:hover::after,
.hero__english a:focus-visible::after {
  transform: translateX(3px);
}

/* --- Kennzeichnungen an den Vereinskarten --------------------------------

   „Neu“ steht hinter der Mitgliedschaft, nicht darüber; die Kennzeichnung
   für Anfänger sitzt unter dem Text und über den Spielorten.
   -------------------------------------------------------------------------- */

.karte .abzeichenreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: center;
  margin-bottom: var(--raum-4);
}

.karte .abzeichen--anfaenger {
  display: inline-flex;
  margin-bottom: var(--raum-4);
}

/* --- Abstand vor einem Knopf unter einem Block ---------------------------- */

/* .vereinsrahmen und .wp-block-pvbb-vereinskarte kamen mit zb/24/zb/25 dazu:
   Auf /mitgliedsvereine/ steht .raster seither INNERHALB des neuen Rahmens,
   ist also kein direktes Geschwister des Knopfs mehr darunter - ohne diese
   Zeile griffe die Regel dort still nicht mehr. Auf /spielorte/ folgt dem
   Kartenblock jetzt erstmals ueberhaupt etwas. */
/* Der Mindestabstand NACH OBEN steht bewusst VOR der Geschwisterregel
   darunter: Beide haben dieselbe Spezifitaet (0-2-0), also gewinnt die
   spaetere. Stuende sie hinter der Gruppe, bekaeme eine Liste unter einer
   anderen Liste 24px statt 48px - genau das ist beim ersten Anlauf dieser
   Regel passiert und von dateikarteprobe.py gemeldet worden. */
.wp-site-blocks .wp-block-pvbb-dateikartenliste {
  margin-block-start: var(--raum-5);
}

.wp-site-blocks .wp-block-pvbb-vereinsliste + *,
.wp-site-blocks .wp-block-pvbb-meldungen + *,
.wp-site-blocks .raster + *,
.wp-site-blocks .vereinsrahmen + *,
.wp-site-blocks .wp-block-pvbb-dateikartenliste + *,
.wp-site-blocks .wp-block-pvbb-vereinskarte + * {
  margin-block-start: var(--raum-8);
}

/* --- Abstaende der Dateikarten-Liste (nu/18, zweite Runde) ---------------- */

/* WARUM DIESE REGELN NOETIG SIND: Abschnitt 0 ganz oben nimmt WordPress'
   eigenes Fluss-Layout zurueck und setzt "margin-block-start: 0" fuer jeden
   Block. Fuer die alten Dateikarten war das folgenlos - sie sassen in einer
   Gruppe mit der Klasse ".raster", und die Zeile darueber gab ihr einen
   Abstand nach unten. Der neue Block traegt diese Klasse nicht mehr, und
   damit war er voellig abstandslos:

     - zwei Listen untereinander klebten aneinander,
     - ein Textabsatz darunter klebte an der Liste,
     - und nach oben gab es nichts.

   Alle drei hat der Auftraggeber am 01.09.2026 am eingespielten 1.5.104
   gemeldet, mit Bildschirmfoto ("Dateikarten-Liste_-_Beispiel1.png").

   NACH UNTEN erledigt das die Regel darueber ("+ *", --raum-8 = 48px) -
   derselbe Wert wie nach einem Raster, damit die Umstellung an dieser Stelle
   nichts am Seitenbild aendert.

   NACH OBEN steht hier bewusst der KLEINERE Wert (--raum-5 = 24px), und
   zwar als Mindestabstand im Sinne des Auftraggebers: "Etwas Mindestabstand
   sollte auch zu vorherig auftretenden Elementen eingeplant sein, falls
   diese keinen groesseren Folgeabstand definieren, wie es etwa
   Ueberschriften gewoehnlich tun."

   Genau das leistet die Regel, ohne eine Fallunterscheidung zu brauchen:
   Benachbarte Aussenabstaende im normalen Fluss FALLEN ZUSAMMEN, und der
   groessere gewinnt. Unter einer Ueberschrift "Unterlagen" bleibt deshalb
   deren eigener Folgeabstand stehen; unter einem schlichten Absatz greifen
   die 24px. Zwischen zwei Listen gewinnt die "+ *"-Regel oben mit 48px,
   weil sie spaeter steht und dieselbe Spezifitaet hat.

   ".wp-site-blocks" davor ist kein Zierrat, sondern noetig: Die Ruecknahme
   in Abschnitt 0 traegt dieselbe Klasse, und ohne sie waere diese Regel
   schwaecher.

   UND DIE FLEX-ABSICHERUNG: Landet der Block einmal in einer Gruppe mit
   Flex-Layout - dem Wrapper-Typ, der den urspruenglichen CSS-Weg dieses
   Tickets unterlaufen hat -, ist er dort ein Flex-Element ohne feste
   Breite. Ein Raster in einem solchen Element bemisst sich nach seinem
   Inhalt, und die "1fr"-Spuren fallen auf ihre Mindestbreite zurueck: Die
   Karten waeren dann 384px statt 396px breit, also je nach Umgebung
   verschieden. "flex: 1 1 100%" gibt dem Block die volle Zeile zurueck;
   ausserhalb eines Flex-Containers ist die Angabe wirkungslos. Gemessen
   von dateikarteprobe.py, Szene "nest-flex". */
.wp-site-blocks .wp-block-pvbb-dateikartenliste {
  flex: 1 1 100%;
  /* "min-width: 0" gehoert zwingend dazu: Ein Flex-Element bekommt von
     sich aus "min-width: auto" und schrumpft dann nicht unter seine
     Mindestbreite - hier unter die gedeckelten 808px der Liste. Gemessen
     am 01.09.2026: Die Huelle war 808px breit in einem 792px-Container,
     lief also 16px ueber, und die Karten wurden 396 statt 388px. Erst die
     Probe hat das gezeigt ("die drei Umgebungen liefern UNTERSCHIEDLICHE
     Kartenbreiten") - am Bildschirm waeren 16px Ueberlauf kaum
     aufgefallen. */
  min-width: 0;
}

/* Und ebenso NACH einer Knopfreihe. Auf /mitgliedsvereine/ stand der Knopf
   „Spielorte auf der Karte" mit 48 px Abstand unter dem Vereinsrahmen, aber
   nur 24 px über dem blauen Kasten darunter — gemessen, nachdem der
   Auftraggeber es am eingespielten Ergebnis gemeldet hatte. Der Knopf klebte
   dadurch am folgenden Block, statt zwischen beiden zu stehen.

   Die 24 px kamen aus der allgemeinen Regel für Blöcke ohne eigenen Abstand
   (`--raum-5`); die 48 px oben aus der Regel darüber. Beide Seiten tragen
   jetzt denselben Wert. */
.wp-site-blocks .wp-block-pvbb-querverweise + * {
  margin-block-start: var(--raum-8);
}

/* --- Formular „Interner Zugang" (nu/16 + nu/01, zweite Runde, Baustein 3) -

   Der Block traegt wie 'pvbb/dateikartenliste' keine eigene Spitze aus
   WordPress' Fluss-Layout (Abschnitt 0 ganz oben nimmt sie zurueck) - er
   bekommt hier dieselbe Grundspur wie die uebrigen Bausteine ohne
   natuerlichen Abstand ('pvbb_render_interner_zugang()', render.php).

   SEIT nu/34 KEIN Abstand nach oben mehr (vorher "var(--raum-8)", 48px):
   Das Element ist vom Fuss der Seite an den SEITENKOPF gewandert und wirkt
   dort als Karteireiter - es soll unmittelbar auf den Vorspann folgen.
   Der Auftraggeber am 05.09.2026: "Der Abstand zu vorstehenden Elementen ist
   auf Null zu setzen. Der Abstand zu folgenden Elementen soll unveraendert
   bleiben."

   NACH UNTEN wird hier bewusst NICHTS gesetzt - der Abstand zum naechsten
   Block entsteht wie bisher aus dessen eigener Grundspur. Eine Regel hier
   waere eine zweite Quelle fuer denselben Abstand.

   Die 48px stammten aus der alten Platzierung UNTER allen Inhalten, wo sie
   das Element sichtbar absetzen sollten (nu/24, "Die Platzierung"). Am
   Seitenkopf leisten sie das Gegenteil: Sie reissen den Reiter von der
   Ueberschrift los, zu der er gehoert. */
.wp-site-blocks .wp-block-pvbb-interner-zugang {
  margin-block-start: 0;
}

.pvbb-intern-formular {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  max-width: 24rem;
}

/* '.feld' (bausteine.css) ist selbst 'display:flex;flex-direction:column'
   und richtet sich normalerweise nach seinem umgebenden Flex-Container
   ('.kartenleiste', die Filterzeile der Karte - eine REIHE, "flex-direction"
   dort also "row"). Hier steht es DIREKT im Formular, dessen eigener
   Flex-Container aber eine SPALTE ist ('.pvbb-intern-formular' oben,
   "flex-direction: column").
   Das aendert die BEDEUTUNG von '.feld's eigenem "flex: 1 1 11rem": In einer
   Reihe ist "11rem" eine BREITE, in einer Spalte wird daraus eine HOEHE -
   jedes Feld wollte dadurch mindestens 11rem (176px) HOCH sein und sich
   zusaetzlich (flex-grow: 1) auf die volle verfuegbare Formularhoehe
   aufblasen. AM BILDSCHIRMFOTO gesehen (werkzeuge/live/interner-zugang.png,
   erster Anlauf dieser Auflage): riesige Luecken zwischen Beschriftung und
   Eingabefeld - eine reine Zahlenmessung (Breite, Praesenz der Feldnamen im
   HTML) haette das NICHT gezeigt, siehe Erkenntnis 23 in docs/VERFAHREN.md.
   "flex: 0 0 auto" nimmt beides zurueck; "min-width: 0" bleibt gegen die
   Mindestbreite (die in der Spalten-Richtung wirkungslos, aber in der
   Kreuzachse - der Formularbreite - weiterhin eine Mindestbreite waere). */
.pvbb-intern-formular .feld {
  flex: 0 0 auto;
  min-width: 0;
}

/* '.feld' deckt in bausteine.css nur 'input[type="text"]' ab (die
   Filterzeile der Karte, ihr einziger bisheriger Verwender) - der
   Autorisierungscode ist bewusst maskiert ('type="password"',
   'pvbb_render_interner_zugang()', render.php) und braucht dieselbe
   Gestaltung. */
.feld input[type="password"] {
  padding: 0.6em 0.75em;
  background: var(--weiss);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-m);
  font-family: inherit;
  font-size: var(--gr-s);
  color: var(--text);
}

/* Der Anmelde-Knopf soll nicht die volle Formularbreite einnehmen. */
.pvbb-intern-formular .knopf {
  align-self: flex-start;
}

.pvbb-intern-formular__fehler {
  margin: 0;
}

/* --- Ausklappbereich der Zugangseingabe (nu/24, umgebaut in nu/34) --------

   <details>/<summary> statt einer eigenen JS-Loesung, wie bereits
   ".vergangene-termine" oben - klappt ohne Skript, Tastatur und
   Vorleseprogramme bekommen den Zustand vom Browser selbst gemeldet.

   WAS DAS ELEMENT SEIT nu/34 IST: ein KARTEIREITER am Seitenkopf, kein
   Klappgriff mitten in der Seite. Es steht ganz oben auf der Downloads-Seite,
   direkt unter dem Vorspann, und beschriftet den Abschnitt darunter. Der
   Auftraggeber hat es dorthin verschoben, nachdem die geschuetzten Karten in
   einen eigenen Klappbereich (WordPress' "core/details") gewandert sind.

   DARAUS FOLGT: DIE FORM WECHSELT NICHT MEHR. Bis nu/24 kippte die Woelbung
   beim Aufklappen an der Waagerechten ("--ak-sy", entfallen). Ein
   Karteireiter tut das nicht - seine Woelbung gehoert zur BESCHRIFTUNG, nicht
   zur Bewegung. Der einzige sichtbare Unterschied zwischen zu und auf sind
   die Pfeile (unten) und natuerlich der geoeffnete Inhalt.

   Damit entfaellt auch der Zeilensprung von rund 30px, den der Auftraggeber
   am 04.09.2026 gemeldet hatte: Es gibt keine zweite Geometrie mehr, zwischen
   der etwas springen koennte.

   ZWEI FESTE 52-PX-SCHULTERN STATT EINER GEMESSENEN LINIE: Der verworfene
   Entwurf (werkzeuge/ausklappentwurf.py) rechnete EINEN Linienpfad ueber die
   volle Breite im Browser per JavaScript, weil er die Textbreite brauchte -
   fuer den Bau verboten (nu/24, Abnahmekriterium "ohne JavaScript"). Hier
   sind die Schultern zwei FESTE SVG (".ausklappbereich__schulter", 52px
   breit, auch auf dem Handy - siehe render.php), die geraden Linien fuellen
   den Rest ueber "flex: 1" von selbst. Niemand muss die Textbreite kennen.

   DIE DREI TEILE LIEGEN AUF EINER LINIE - DAS IST DER KERN VON nu/34.
   Der Auftraggeber hatte am 04.09.2026 einen "Bruch" und eine "Beule" am
   Uebergang gemeldet, und zwar genau beschrieben: Die Gerade setze am
   OBERSTEN Punkt des Bogens an, das untere Bogenende haenge "in der Luft".

   Die Ursache war ein HALBER PIXEL. Die gerade Linie ist ein <span> mit
   "height"; ihre Oberkante ist die Kante des Kastens. Der Bogen ist ein
   SVG-STRICH; seine Mitte lag auf derselben Kante, also ragte er zur Haelfte
   darueber hinaus. Beide zeichneten an der richtigen Stelle - nur meinten sie
   mit "der Stelle" zweierlei.

   DIE LOESUNG IST EINE RECHNUNG, KEINE NAEHERUNG: Die SVG wird oben und
   unten um die HALBE Strichbreite eingerueckt ("top" und "height" unten).
   Ihr Pfad laeuft von Kante zu Kante des viewBox, seine Mitte liegt damit
   exakt auf der Mitte der geraden Linien - unabhaengig davon, wie hoch das
   Element gerade ist oder wie dick der Strich eingestellt wird.

   Die Zeile ist so gebaut:

     Grifflinie (border-top)     ---------------- y = 0 .. --ak-strich
       Bogen laeuft hier hinein
     Aussenlinie (align-self)    ---------------- y = H - --ak-strich .. H

   DIE WOELBUNGSHOEHE FOLGT WEITER DER SCHRIFT: Die Zeilenhoehe entsteht
   allein aus dem Griff (Strich + Polsterung + Textzeile + Polsterung). Wer
   die Beschriftung oder ihre Groesse aendert, aendert die Woelbung mit; keine
   Pixelzahl im Code haengt an einer bestimmten Beschriftung.
   zugangsklappeprobe.py misst das nach.

   "line-height: 1" AM GRIFF IST KEINE FEINHEIT, SONDERN EINE BERICHTIGUNG.
   Ohne sie erbt der Text "--zeile-weit" (1.65) vom Body, und die Woelbung
   wird 31,1px hoch statt der vereinbarten 23px - genau die Abweichung, die
   der Auftraggeber am 04.09.2026 gemessen hat ("Vorschau 23px, Umsetzung
   32px"). Die Entwurfsvorlage hatte "line-height: 1", der erste Bau nicht;
   niemand hat es bemerkt, weil beide Bilder plausibel aussahen. Nachgerechnet
   in nu/34, Befund 1.

   "vector-effect: non-scaling-stroke" haelt die Strichstaerke fest, obwohl
   "preserveAspectRatio: none" die 52x100-Ansicht ungleichmaessig streckt -
   ohne das wuerde der Strich in der Hochachse duenner oder dicker als in der
   Breitenachse. */
.ausklappbereich {
  /* HELLER ALS BIS nu/24 (#d7dde5) und DOPPELT SO STARK: Der Auftraggeber
     hat beides zusammen verlangt - "Farbe: hell, Hoehe: 2px". Eine 2px-Linie
     im alten Ton waere deutlich schwerer geworden als die Vorschau. */
  --ak-linie: #e2e7ee;
  --ak-pfeil: #8a94a3;

  /* DIESE VIER MUESSEN GANZE PIXEL SEIN. Ihre Summe ist die Zeilenhoehe:

       --ak-strich + --ak-luft + --ak-zeile + --ak-luft
       2          + 5         + 11         + 5          = 23px

     KOMMT DABEI EINE KRUMME ZAHL HERAUS, ERSCHEINT DER VERSATZ WIEDER, den
     der Auftraggeber am 05.09.2026 in der Entscheidungsvorlage gefunden hat:
     "Die horizontale Linie ist ueber dem Auslauf der Woelbung - offenbar ein
     Pixel zu weit oben." Er sah ihn bei drei von vier Schriftgroessen und
     genau bei der einen nicht, deren Summe ganzzahlig war.

     DER GRUND: Die gerade Linie ist ein KASTEN (Hintergrundflaeche eines
     <span>), der Bogen ein SVG-STRICH. Liegt die Unterkante der Zeile auf
     einem halben Pixel, rundet Chrome beide verschieden - der Kasten auf die
     Pixelgrenze, den Strich auf sein eigenes Raster. Nachgemessen am Bild:
     0,52px Versatz bei 23,5px Hoehe, 0,28px bei 24,904px, 0,037px bei 23px.

     zugangsklappeprobe.py prueft beides nach - die Ganzzahligkeit der
     Griffhoehe UND den Versatz an der Naht selbst, mit einer eigenen,
     schaerferen Schwelle. Wer hier eine Zahl aendert, laesst sie laufen.

     DIE SCHRIFTGROESSE IST DESHALB FEST und nicht "var(--gr-xs)": Die
     Theme-Variable ist ein clamp() und liefert je nach Fensterbreite krumme
     Werte (gemessen 12,904px bei 1240px Fenster). Fuer diese eine Stelle
     hat der Auftraggeber die kleinere, feste Groesse ausdruecklich erlaubt:
     "fuer diesen Zweck darf sie an der Stelle kleiner definiert werden". */
  --ak-strich: 2px;
  --ak-luft: 5px;
  --ak-schrift: 11px;
  --ak-zeile: 11px;
}

/* Das <summary> SELBST bekommt kein "display:flex" - das kollabiert seine
   Inhaltshoehe in Chrome auf 0 (empirisch gefunden, siehe der Bericht zum
   Auftrag nu-24_ausklappbarer-zugang.md). Die Reihe steckt deshalb in der
   inneren ".ausklappbereich__zeile". */
.ausklappbereich__kopf {
  display: block;
  list-style: none;
  cursor: pointer;
  margin: 0;
}

.ausklappbereich__kopf::-webkit-details-marker {
  display: none;
}

.ausklappbereich__zeile {
  display: flex;
  align-items: stretch;
}

/* Die geraden Linien sitzen IMMER unten - in beiden Zustaenden. Bis nu/24
   wechselten sie mit "[open]" die Seite; seit nu/34 gibt es nur noch eine
   Ausrichtung (siehe Kopfkommentar). */
.ausklappbereich__linie {
  flex: 1 1 auto;
  height: var(--ak-strich);
  background: var(--ak-linie);
  align-self: flex-end;
}

/* Platzhalter-Huelle - traegt die Breite im Flex-Fluss, hat aber KEIN
   eigenes Seitenverhaeltnis. */
.ausklappbereich__schulter {
  display: block;
  flex: 0 0 52px;
  width: 52px;
  position: relative;
  color: var(--ak-linie);
}

/* BREITE UND HOEHE AUSDRUECKLICH, nicht nur ueber "inset": Eine <svg> ist ein
   ERSETZTES Element. Bei "width/height: auto" nimmt sie ihre aus dem viewBox
   abgeleitete Ausgangsgroesse (hier 52x100) und laesst die Einrueckungen ins
   Leere laufen - der Pfad wurde dann 100px hoch gezeichnet und ragte 68,7px
   unter die Huelle hinaus. Am 04.09.2026 bei der Gegenpruefung gemessen; im
   Bild waren es weit ausgreifende Boegen quer durch die Nachbarschaft.

   DIE HALBE STRICHBREITE OBEN UND UNTEN ist der Anschluss aus nu/34: Der Pfad
   laeuft von Kante zu Kante des viewBox, seine MITTE liegt damit auf der
   Mitte der geraden Linien statt auf deren Aussenkante. */
.ausklappbereich__schulter svg {
  position: absolute;
  left: 0;
  top: calc(var(--ak-strich) / 2);
  width: 100%;
  height: calc(100% - var(--ak-strich));
  overflow: visible;
  display: block;
}

/* DIE STRICHSTAERKE STEHT AN EINER STELLE. Das "stroke-width" im Markup
   (render.php) bleibt als Rueckfall stehen, falls dieses Stylesheet einmal
   nicht geladen ist - massgeblich ist diese Regel. Sonst muesste jede
   Aenderung an "--ak-strich" in zwei Dateien nachgezogen werden, und die
   zweite wuerde vergessen. */
.ausklappbereich__schulter svg path {
  stroke-width: var(--ak-strich);
}

/* Die rechte Schulter ist dieselbe Zeichnung, an der Senkrechten gespiegelt -
   EIN Pfad in render.php, zweimal eingesetzt. */
.ausklappbereich__schulter--rechts svg {
  transform: scaleX(-1);
}

/* DIE LINIE UEBER DER SCHRIFT (nu/34, A3): Bis nu/24 klaffte hier eine
   Luecke, so lang wie die Beschriftung - die Schultern liefen ins Nichts.
   Der "border-top" schliesst sie und laeuft ueber die volle Griffbreite,
   Polsterung eingeschlossen, also genau bis an die Schultern heran. */
.ausklappbereich__griff {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-block: var(--ak-luft);
  padding-inline: 0.75em;
  border-top: var(--ak-strich) solid var(--ak-linie);
  /* "line-height" in PIXELN, nicht als Faktor: Ein Faktor mal einer
     Schriftgroesse ergibt fast nie eine ganze Zahl - siehe die Rechnung
     oben. Hier stand bis zum 05.09.2026 "line-height: 1"; das war schon
     die halbe Berichtigung (vorher erbte der Text die 1,65 des Themes und
     die Woelbung war 31 statt 23px hoch), aber es haengte die Zeilenhoehe
     weiter an der Schriftgroesse. */
  line-height: var(--ak-zeile);
  white-space: nowrap;
  font-size: var(--ak-schrift);
  color: var(--text-leise);
}

/* ZUGEKLAPPT SIND KEINE PFEILE ZU SEHEN (nu/34, A6/A7). "visibility" statt
   "display", damit der Platz erhalten bleibt: Sonst schruempfte der Griff
   beim Zuklappen um zwei Pfeilbreiten, und die Woelbung waende mit ihm -
   also genau die Unruhe, die dieser Umbau beseitigen soll.

   Sie zeigen immer NACH OBEN. Im aufgeklappten Zustand heisst das "wieder
   zuklappen"; einen zweiten Zustand gibt es nicht mehr. */
.ausklappbereich__pfeil {
  flex: none;
  width: 10px;
  height: 6px;
  color: var(--ak-pfeil);
  /* 1px, vom Auftraggeber am 05.09.2026 an der Entscheidungsvorlage
     gewaehlt. Der Vorschau entspraeche 0 - "aber hier finde ich diesen Wert
     noch angenehmer". Seine Entscheidung, am Bild getroffen. */
  transform: translateY(1px) rotate(180deg);
  visibility: hidden;
}

.ausklappbereich[open] .ausklappbereich__pfeil {
  visibility: visible;
}

.ausklappbereich__inhalt {
  padding-block-start: var(--raum-4);
}

/* --- Meldungskarten der Übersicht ---------------------------------------- */

.meldungsraster .pvbb-ersatzbild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.meldungsraster .wp-block-post-featured-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.meldungsraster .wp-block-post-title {
  margin-bottom: var(--raum-2);
}

/* --- Filterzeile der Karte ------------------------------------------------

   Ausschnittwahl links, die übrigen Schalter rechtsbündig - in einer Zeile.
   -------------------------------------------------------------------------- */

.kartenleiste--zweite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
}

.kartenleiste--zweite .ausschnittwahl {
  margin-bottom: 0;
}

.kartenleiste__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-4);
  margin-left: auto;
}

.kartenleiste__rechts .feld {
  margin-bottom: 0;
}

/* --- Breiten der Abschlussblöcke auf der Vereinsseite --------------------- */

.schmalblock {
  max-width: 52rem;
}

/* Das Aufruf-Band bleibt innerhalb der Inhaltsbreite. */
.aufruf {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
}

/* ==========================================================================
   16. Nachbesserungen zur Rückmeldung 1.3
   ========================================================================== */

/* --- Sandwich-Menü: die eigentliche Ursache ------------------------------

   In Abschnitt 13 steht weiter oben noch ein backdrop-filter auf .kopfzeile.
   Abschnitt 15 hat zwar den Hintergrund zurückgenommen, den Filter aber nicht
   aufgehoben - und schon ein einziger backdrop-filter macht das Element zum
   Bezugsrahmen für alles, was darin position:fixed ist. Das Menü blieb
   deshalb so hoch wie die Kopfzeile. Hier wird er ausdrücklich abgeschaltet.
   -------------------------------------------------------------------------- */

.kopfzeile {
  backdrop-filter: none;
}

/* --- Untermenü: „Charlottenburger TSV von 1858“ in einer Zeile ------------ */

.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container {
  max-width: none;
}

.kopfzeile .wp-block-navigation .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  white-space: nowrap;
}

/* --- Lupe in der Fußzeile deutlicher -------------------------------------- */

.fusszeile__rechtslinks a[href*="?s="]::after {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.28em;
}

/* --- Vereinskarten -------------------------------------------------------- */

/* Die Aufzählung der SPIELORTE war zu groß geraten — sie steht in einer
   Vereinskarte und trägt dort Nebenangaben.

   Hier stand bis 1.5.47 `.karte .hakenliste`, und das traf jede Hakenliste in
   jeder Karte: auch „Beratung und Bau" oder „Unkompliziert" auf der Startseite,
   wo eine Aufzählung die Hauptsache ist und normale Größe braucht. Gemessen:
   12,94 px statt 16 px. Die Design-Vorschau kennt die Regel gar nicht — dort
   stehen diese Listen seit jeher in normaler Größe, und genau das hat der
   Auftraggeber am 14.08.2026 gemeldet.

   Die Regel stammt aus dem Ausgangsstand 1.5.0. Sie war also nie richtig, nur
   lange unauffällig: Bis die Vereinsübersicht entstand, gab es keine zweite
   Sorte Hakenliste in einer Karte. */
.wp-block-pvbb-vereinsliste .karte .hakenliste,
.wp-block-pvbb-vereinskarte .hakenliste {
  font-size: var(--gr-s);
}

/* Seit `zb/21` ist jede Spielortzeile ein Verweis. Der Unterstrich des
   Browsers hat die Aufzählung unruhig gemacht — die Zeilen tragen ohnehin
   schon einen fetten Bezirksnamen. Eng gefasst auf `.karte`, damit Verweise,
   die die Redaktion in eine Hakenliste setzt, ihren Unterstrich behalten.

   Beim Überfahren kommt er zurück (Auftraggeber am 14.08.2026). Der bloße
   Farbwechsel genügte ihm hier nicht: `--blau-700` auf `--blau-600` ist bei
   dieser kleinen Schriftgröße auf seinem Bildschirm nicht zu erkennen. Die
   größere Frage — ein deutlicher abgesetzter Blauton für Verweise, global —
   ist als `zb/26` offen; diese Regel nimmt sie nicht vorweg. */
.wp-block-pvbb-vereinsliste .karte .hakenliste a,
.wp-block-pvbb-vereinskarte .hakenliste a {
  text-decoration: none;
}

.wp-block-pvbb-vereinsliste .karte .hakenliste a:hover,
.wp-block-pvbb-vereinsliste .karte .hakenliste a:focus-visible,
.wp-block-pvbb-vereinskarte .hakenliste a:hover,
.wp-block-pvbb-vereinskarte .hakenliste a:focus-visible {
  text-decoration: underline;
}

.karte .hakenliste li {
  margin-bottom: var(--raum-2);
}

/* Kennzeichnung unter der Aufzählung, mit demselben Abstand wie zuvor zum
   Text darüber. */
.karte__anfaenger {
  margin-top: var(--raum-4);
  margin-bottom: 0;
}

.karte .abzeichenreihe {
  margin-bottom: var(--raum-3);
}

/* --- Meldungskarten: Überschrift näher an den Text ------------------------ */

.meldungsraster .wp-block-post-title,
.meldungsraster .wp-block-post-title.wp-block-post-title {
  margin-bottom: var(--raum-2);
}

.meldungsraster .wp-block-post-excerpt,
.meldungsraster .wp-block-post-excerpt__excerpt {
  margin-top: 0;
}

/* --- Filterzeile: Häkchen auf einer Grundlinie mit den Schaltern ---------- */

.kartenleiste__rechts {
  align-items: center;
}

.kartenleiste__rechts .feld--haken {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin: 0;
  line-height: 1;
}

.kartenleiste__rechts .feld--haken input {
  margin: 0;
}

.kartenleiste__rechts .feld--haken label {
  margin: 0;
  line-height: 1.2;
}

/* --- „Weitere Vereine sind im Gespräch“ ----------------------------------

   Genauso breit wie eine Vereinskarte und auf demselben hellgrauen Grund -
   nur eben in Verbandsblau. So gehört er sichtbar zu den Karten darüber und
   grenzt sich zugleich vom breiten Band darunter ab.
   -------------------------------------------------------------------------- */

.schmalblock {
  max-width: none;
}

.gespannblock {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: var(--raum-6);
}

.gespannblock > * {
  grid-column: span 1;
}

/* ==========================================================================
   17. Nachbesserungen zur Rückmeldung 1.4
   ========================================================================== */

/* --- Sandwich-Menü als Schublade -----------------------------------------

   Über die ganze Breite war es weit mehr, als der Inhalt braucht, und es
   verdeckte das Logo. Auf schmalen Geräten bleibt es bildfüllend - dort ist
   das richtig -, darüber fährt es als Schublade von rechts ein.
   -------------------------------------------------------------------------- */

@media (min-width: 30rem) {
  .kopfzeile .wp-block-navigation__responsive-container.is-menu-open {
    left: auto;
    right: 0;
    width: min(24rem, 90vw);
    border-left: 1px solid var(--linie);
    box-shadow: var(--schatten-l);
  }
}

/* Linksbündig statt rechtsbündig (Ticket va/10).

   ZWEI GRÜNDE, warum der erste Anlauf wirkungslos blieb - beide am 20.08.2026
   im Browser gemessen, nicht aus dem Stylesheet erschlossen:

   1. Die Variablen wurden am RESPONSIVE-CONTAINER gesetzt. WordPress setzt
      --navigation-layout-align am <ul> darunter aber NEU (dort stand "center"),
      und die Ausrichtung selbst kommt aus einer eigenen Regel, die die Klasse
      items-justified-right am <nav> erzeugt. Was eine Ebene tiefer neu gesetzt
      wird, laesst sich von oben nicht steuern.
   2. Der zweite Block benutzte :where(), und das hat Spezifitaet NULL. Gegen
      die WordPress-Regel hatte er damit nichts entgegenzusetzen.

   Und die eigentliche Falle: Im aufgeklappten Menue laeuft die Liste als
   SPALTE. Die horizontale Lage bestimmt dort align-items (die Querachse),
   nicht justify-content. Deshalb steht beides hier, und zwar als echte
   Eigenschaft auf denselben Elementen, die WordPress anfasst.

   HIER ZUSAMMENGEFUEHRT: Weiter oben stand ein ZWEITER Anlauf desselben
   Vorhabens ("Alles linksbuendig - Haupt- und Unterpunkte auf einer Kante"),
   ebenfalls mit :where und ebenfalls wirkungslos. Zwei Stellen, die dasselbe
   wollen und beide nichts bewirken, sind der Grund, warum dieser Punkt
   mehrfach zur Sprache kam und nie erledigt war. Der alte Block ist entfernt.
   Sein "gap: 0" wurde BEWUSST NICHT uebernommen: Es hat nie gewirkt (der
   aufgeloeste Abstand betraegt 24 px), und es wirksam zu machen haette die
   Abstaende veraendert, ohne dass es jemand verlangt hat.

   Gemessen davor: Gruppenueberschriften rechtsbuendig an Kante 329 px,
   Unterpunkte links bei 161 px. Danach: alle Ueberschriften bei 16 px, alle
   Unterpunkte bei 48 px - die Einrueckung bleibt also erkennbar. Die BREITE
   Darstellung wurde gegengemessen: 20 Menuepunkte, keine Abweichung. */
.kopfzeile .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-align: flex-start;
  --navigation-layout-justify: flex-start;
  text-align: left;
}

.kopfzeile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.kopfzeile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.kopfzeile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* --- Spielorte in den Vereinskarten kleiner ------------------------------

   Die Größe steht an den Listenpunkten, nicht an der Liste — eine Regel auf
   .hakenliste allein wird davon überstimmt.

   **Diese Regel ist der eigentliche Grund**, warum die Aufzählungen auf der
   Startseite zu klein waren: Sie setzt `--gr-xs` und ist spezifischer als die
   Regel weiter oben. Wer nur jene einschränkt, ändert am Bildschirm nichts —
   gemessen am 14.08.2026, nachdem genau das passiert war. Beide sind jetzt auf
   die Vereinsdarstellungen eingegrenzt; „Beratung und Bau" oder
   „Unkompliziert" auf der Startseite stehen wieder in normaler Größe.
   -------------------------------------------------------------------------- */

.wp-block-pvbb-vereinsliste .karte .hakenliste,
.wp-block-pvbb-vereinsliste .karte .hakenliste li,
.wp-block-pvbb-vereinsliste .karte .is-style-pvbb-hakenliste,
.wp-block-pvbb-vereinsliste .karte .is-style-pvbb-hakenliste li,
.wp-block-pvbb-vereinskarte .hakenliste,
.wp-block-pvbb-vereinskarte .hakenliste li {
  font-size: var(--gr-xs);
  line-height: var(--zeile-mittel);
}

/* --- Häkchenfeld auf der Grundlinie ---------------------------------------

   .feld--haken bringt einen unteren Innenabstand mit, damit es in der ersten
   Filterzeile mit den beschrifteten Auswahlfeldern fluchtet. In der zweiten
   Zeile gibt es keine Beschriftungen darüber - dort schiebt er es nach oben.
   -------------------------------------------------------------------------- */

.kartenleiste__rechts .feld--haken {
  padding-bottom: 0;
}

/* --- Anfänger-Kennzeichnung mittig ---------------------------------------- */

.karte__anfaenger {
  text-align: center;
}

/* --- „Weitere Vereine sind im Gespräch“ auf Kartenbreite ------------------

   .raster--zwei verteilt mit auto-fit: Ein einzelnes Element füllt damit die
   ganze Zeile. auto-fill behält die leeren Spuren - das Element bekommt
   dadurch genau die Breite einer Vereinskarte.
   -------------------------------------------------------------------------- */

.gespannblock {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: 1fr;
  margin-top: var(--raum-5);
}

/* Zwei Spuren, so viele wie die Vereinskarten darueber - das einzelne Element
   nimmt damit genau eine Kartenbreite ein. Mit auto-fill waeren es je nach
   Fensterbreite drei Spuren geworden und der Block zu schmal. */
@media (min-width: 46rem) {
  .gespannblock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ticket ub/03-oberste-ebene (27.08.2026): Seit der Gespannblock auf der
   Vereinsuebersicht selbst oberste Ebene des Seiteninhalts ist (traegt seither
   zusaetzlich die Klasse "huelle", statt in einer umschliessenden
   .abschnitt-Huelle zu stecken - inc/inhalte.php), fehlt die Luecke zum
   folgenden Aufruf-Band ("Ihr Verein fehlt hier noch"), die vorher aus der
   PADDING-Innenseite der gemeinsamen .abschnitt-Huelle kam (das Aufruf-Band
   traegt selbst weiterhin seine eigene .abschnitt-Huelle, siehe
   pvbb_aufruf_verein_fehlt_inhalt() - DAS ist unveraendert).

   Als MARGIN statt PADDING, aus demselben Grund wie bei ".seitenkopf +
   .huelle" oben: .gespannblock hat selbst keine sichtbare Flaeche, aber ohne
   echte Luecke (statt Innenabstand) ruecke die naechste Ebene direkt heran.

   Gemessen (drei echte Theme-Stylesheets, vier Breiten): identisch zum
   vorherigen Abstand zwischen der Gespannblock-Karte und dem Aufruf-Band
   (zwei aneinanderstossende .abschnitt-Polsterungen, je var(--abschnitt)). */
.gespannblock {
  margin-block-end: var(--abschnitt);
}

/* Zeitstrahl ------------------------------------------------------------- */

/* In der Vorschau ist der Zeitstrahl eine geordnete Liste. Die Gestaltung dafuer
   steht in bausteine.css und haengt an `.zeitstrahl li` - dort sitzen der
   Abstand zwischen den Stationen und der Punkt auf der Linie.

   Das Muster baut die Stationen aber als Gruppenbloecke, also als `div`. Damit
   greift keine der drei Regeln, und der Zeitstrahl erschiene als blosse Linie
   ohne Punkte. Aufgefallen am 05.08.2026, bevor er ausgeliefert wurde.

   Hier werden dieselben Regeln auf die Gruppenbloecke uebertragen. Die Werte
   sind bewusst gleich mit denen in bausteine.css: Wer sie dort aendert, muss es
   hier nachziehen. Sauberer waere ein Muster, das echte Listenelemente erzeugt -
   das ist ein Umbau des Musters und ein eigenes Vorhaben. */

.zeitstrahl > .wp-block-group {
  position: relative;
  margin-bottom: var(--raum-6);
}

.zeitstrahl > .wp-block-group:last-child {
  margin-bottom: 0;
}

.zeitstrahl > .wp-block-group::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--raum-6) - 7px);
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: var(--weiss);
  border: 3px solid var(--akzent);
  border-radius: var(--rund-voll);
}

/* ==========================================================================
   18. Neu eingefuegte Bloecke im Seiteninhalt auf Huelle-Breite (Ticket ub/08)
   ========================================================================== */

/* front-page.html und page-voll.html geben den Seiteninhalt im Fluss-Layout
   aus ("layout":{"type":"default"}) - das begrenzt Kindbloecke NICHT. Die
   Abschnitte, die dieses Projekt selbst baut, bringen ihre Breite ueber die
   Klasse .huelle SELBST mit (design-system.css); ein von Hand eingefuegter
   Block (Text, Aktionsknoepfe, ...) hat sie nicht und stand deshalb randlos
   ueber die volle Fensterbreite - vom Auftraggeber am 28.08.2026 gemeldet,
   an genau den beiden Blockarten, die er selbst geprueft hat.

   AUSGENOMMEN sind Elemente, die .huelle, .seitenkopf, .abschnitt, .hero
   oder .aufruf SELBST tragen - sie bringen ihre Breite (bzw. ihren randlosen
   Hintergrund plus eine innere .huelle) bereits mit. Auf der Startseite
   zusaetzlich noetig: die namenlosen Sperr-Huellen aus ub/02
   (<!-- wp:group {"templateLock":"contentOnly"} --> in erzeugte-startseite.php)
   tragen KEINE eigene Klasse - erkennbar sind sie nur daran, dass ihr
   EINZIGES Kind eine der obigen Klassen traegt (:has()). Ohne diese zweite
   Ausnahme wuerde die neue Breitenbegrenzung auch SIE treffen und die
   vollflaechigen Abschnitte DARIN (.hero, .abschnitt--blau, das Aufruf-Band)
   mit einschnueren - genau der Zielkonflikt, den das Ticket benennt.

   Selektor bewusst ueber ".entry-content" (WordPress' eigene Klasse fuer den
   post-content-Block), NICHT ueber "main.inhalt > *": main.inhalt traegt die
   Klasse "inhalt" auch in den anderen fuenf Vorlagen (page.html,
   page-mit-spalte.html, single.html, single-pvbb_verein.html,
   single-pvbb_termin.html) - dort liegt post-content aber tiefer
   verschachtelt (in .abschnitt/.huelle bzw. einer Spalte), nie als direktes
   Kind von main.inhalt. Der Kind-Kombinator ">" trifft deshalb NUR
   front-page.html und page-voll.html. An frisch geholten Seiten (curl -4)
   nachgesehen, nicht nur aus dem Markup gefolgert - siehe Bericht in
   .scratch/auftraege/ub-08.md. */
main.inhalt > .entry-content > :not(:is(
  .huelle,
  .seitenkopf,
  .abschnitt,
  .hero,
  .aufruf,
  :has(> .huelle, > .seitenkopf, > .abschnitt, > .hero, > .aufruf)
)) {
  width: min(100% - 2 * var(--rand), var(--breite-inhalt));
  margin-inline: auto;
}