/*
Theme Name: Karate Bad Lausick 2026
Theme URI: https://karate-badlausick.de
Description: Schlankes Block-Theme für den 1. Karateverein Bad Lausick e.V. Ohne Fremdabhängigkeiten, ohne Page-Builder. Gestaltung liegt vollständig in theme.json.
Author: 1. Karateverein Bad Lausick e.V.
Version: 1.9.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karate-badlausick-2026
*/

/* ════════════════════════════════════════════════════════════════════════
   Ein Block-Theme braucht diese Datei nur für den Theme-Header. Alles
   Gestalterische steht in theme.json — hier steht ausschliesslich, was
   theme.json nicht ausdrücken kann:

     · Pseudoelemente (der Strich hinter der Kapitel-Vorzeile, der Pfeil)
     · Filter (Schwarzweiss)
     · position: sticky
     · writing-mode (das senkrechte Kanji)
     · Umbauten für schmale Fenster (die Tabelle, die zu Karten wird)
     · negative Aussenabstände (der Blockeditor kennt sie nicht)

   Jede Regel hier ist ein Eingeständnis. Steht eine Sache auch in
   theme.json, gilt theme.json.

   Was hier NICHT steht: die Blockstile (Vorzeile, Pfeil, Kanji, Knöpfe,
   Karte). Die hängen in functions.php an ihrer Anmeldung, damit WordPress
   ihr CSS nur auf Seiten lädt, die sie wirklich benutzen.
   ════════════════════════════════════════════════════════════════════════ */


/* ══ 1. BANDFARBEN ═══════════════════════════════════════════════════════
   Rot trägt auf Schwarz nicht: #C9211E auf #1A1A1A ergibt 3,06:1 — für die
   kleine, gesperrte Vorzeile deutlich zu wenig. Auf dunklem Grund tritt
   deshalb das aufgehellte Rot an (5,3:1 gemessen).

   Statt jede Regel doppelt zu schreiben, setzen die dunklen Bänder eine
   Variable um. Alles darin — Vorzeile, Pfeil, Tabellenköpfe — liest sie.
   Ein Band bekommt die Umschaltung entweder über die Hintergrundfarbe
   "ink" von selbst oder über die Klasse "kbl-dunkel" (für Cover-Blöcke,
   deren Fläche aus einem Bild plus Verlauf besteht). */
.wp-site-blocks {
  --kbl-akzent: var(--wp--preset--color--aktion);
  --kbl-linie: var(--wp--preset--color--linie);
  --kbl-band-bg: var(--wp--preset--color--papier);
  --kbl-band-fg: var(--wp--preset--color--ink);
}
.has-sand-background-color {
  --kbl-band-bg: var(--wp--preset--color--sand);
}
.has-ink-background-color,
.kbl-dunkel {
  --kbl-akzent: var(--wp--preset--color--aktion-hell);
  --kbl-linie: rgba(255, 255, 255, .18);
  --kbl-band-bg: var(--wp--preset--color--ink);
  --kbl-band-fg: var(--wp--preset--color--papier);
}


/* ══ 2. FOTOS EINHEITLICH SCHWARZWEISS ═══════════════════════════════════
   Der grösste einzelne Hebel gegen den Stilbruch: die Aufnahmen stammen aus
   fünfzehn Jahren, von verschiedenen Kameras, mit verschiedenen Hallenlichtern.
   In Schwarzweiss wird daraus eine Bildsprache. Das leichte Plus an Kontrast
   fängt die Flauheit auf, die beim Entsättigen entsteht.

   Der Filter gehört nicht in theme.json — dort gibt es nur "duotone", und
   das legt einen Farbstich auf, statt die Farbe zu nehmen.

   Ausweg für Einzelfälle: die zusätzliche CSS-Klasse "kbl-farbe" am Block.
   Gedacht für Bilder, bei denen die Farbe die Aussage ist — eine Urkunde,
   ein Plakat, eine Gürtelfarbe. */
.wp-site-blocks :where(img, .wp-block-cover__image-background) {
  filter: grayscale(1) contrast(1.06);
}
.kbl-farbe,
.kbl-farbe :where(img, .wp-block-cover__image-background) {
  filter: none;
}

/* Das Vereinswappen ist kein Foto, sondern ein Zeichen. Es trägt das Rot
   des Vereins, und entsättigt steht neben dem roten Menü und den roten
   Knöpfen ein graues Wappen — die einzige Stelle der Seite, an der die
   Vereinsfarbe fehlt.

   Ein Selektor mit zwei Teilen (0,1,1) reicht gegen die Grundregel darüber:
   deren :where() steuert nichts zur Spezifität bei, sie wiegt nur (0,1,0). */
.wp-block-site-logo img {
  filter: none;
}

/* Der Vereinsshop liegt bei Spreadshirt und wird per Skript in diesen
   Behälter geschoben. Trikots, Jacken und Taschen sind dort Ware — wer
   Farben vergleichen will, braucht sie. Die Kennung wiegt (1,0,0) und
   sticht die Grundregel auch dann, wenn Spreadshirt seine Klassennamen
   ändert. */
#vereinsshop,
#vereinsshop :where(img, picture, canvas, svg) {
  filter: none;
}


/* ══ 3. KOPFBEREICH ══════════════════════════════════════════════════════ */

/* Der Kopf bleibt beim Blättern stehen.

   Wichtig ist, WORAN das hängt: nicht an der Gruppe mit der Klasse
   kbl-kopf, sondern an dem <header>, das die Vorlage um den Vorlagenteil
   legt. Ein klebendes Element bleibt nur innerhalb seines Elternelements
   stehen — säße die Regel an der Gruppe, wäre der Spielraum genau die Höhe
   des Kopfes, und das Kleben bliebe wirkungslos.

   Der Versatz nach oben ist nicht Null, sondern die Höhe der
   WordPress-Adminleiste: für angemeldete Nutzer liegt die fest oben und
   würde den Kopf sonst verdecken. Die Variable setzt WordPress selbst; ist
   keine Leiste da, greift der Ersatzwert 0. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}

/* Der Vereinsname steht zweizeilig neben dem Wappen. Ohne Begrenzung läuft
   „1. Karateverein Bad Lausick e.V." als eine lange Zeile und schiebt das
   Menü aus der Reihe. */
.kbl-marke .wp-block-site-title {
  max-width: 13ch;
  line-height: 1.15;
}

/* Menü: versal, gesperrt, mit roter Unterstreichung für die aktuelle Seite.
   Die Unterstreichung ist ein Rahmen und keine text-decoration — sonst
   sässe sie an den Buchstaben statt unter der Zeile. */
.wp-block-navigation .wp-block-navigation-item__content {
  padding-block: .4rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--aktion);
  border-bottom-color: var(--wp--preset--color--aktion);
}

/* Auf dem Telefon war der Kopf einmal 150 px hoch — auf einem 812 px hohen
   Schirm fast ein Fünftel, und er bleibt beim Blättern stehen. Kleineres
   Wappen und kleinere Schrift haben ihn auf 119 px gebracht; den Rest hat
   der Wegfall des Probetraining-Knopfes erledigt, der dort die zweite Zeile
   erzwang.

   Das Wappen trägt seine Größe als width/height-Attribut am Bild; eine
   Regel für den Umriss allein würde es nicht kleiner machen. Es bleibt
   etwas größer als der Vereinsname daneben — kleiner als der Text sah es
   nach Versehen aus. */
@media (max-width: 760px) {
  .kbl-marke .wp-block-site-logo img {
    width: 38px;
    height: 38px;
  }
  .kbl-marke .wp-block-site-title {
    max-width: 12ch;
    font-size: .85rem;
  }
  /* Der Zusatz „Shotokan Ryu · SOK" fällt weg. Auf dem Telefon steht der
     Kopf in zwei Zeilen und bleibt beim Blättern stehen — jede Zeile, die
     der Verein auch ohne sie versteht, ist dort teurer als anderswo. */
  .kbl-marke .wp-block-site-tagline { display: none; }
}

/* Im ausgeklappten Menü auf dem Telefon steht jeder Punkt in einer eigenen
   Zeile — ein Rahmen unter dem Wort sieht dort nach Fehler aus. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  border-bottom: 0;
}


/* ══ 4. FUSSBEREICH ══════════════════════════════════════════════════════
   Die Linkspalten sind Wegweiser, kein Fliesstext. Sie stehen deshalb in
   Weiss statt im Linkrot des Fussbereichs (15,9:1 gegen 5,3:1) und ohne
   Unterstreichung — die kommt beim Überfahren und beim Tastaturfokus.

   Das ist die eine Stelle, an der Farbe allein keinen Link kennzeichnet.
   Zulässig ist das hier, weil die Links als beschriftete Liste stehen und
   nicht in einem Satz: „Verein · Über uns · Unsere Trainer …" liest niemand
   als Fliesstext. Die Links IM Fliesstext daneben — Telefon, E-Mail,
   Impressum, Datenschutz — behalten Rot und Unterstreichung.

   Die Aufzählungspunkte fallen weg; vier Wegweiser mit Punkten davor sehen
   nach Inhaltsverzeichnis aus. */
.kbl-fusslinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kbl-fusslinks li { margin-bottom: .5rem; }
.kbl-fusslinks li:last-child { margin-bottom: 0; }
.kbl-fusslinks a {
  color: var(--wp--preset--color--papier);
  text-decoration: none;
}
.kbl-fusslinks a:hover,
.kbl-fusslinks a:focus-visible {
  text-decoration: underline;
}


/* ══ 5. KOPFBILD ═════════════════════════════════════════════════════════
   Der Verlauf läuft schräg von links oben nach rechts unten und hält seinen
   Wert bis 62 % der Breite — so weit reicht die Textspalte. Erst danach
   fällt er ab und gibt das Motiv frei.

   Das gilt nur für breite Fenster. Zwischen 760 und 1000 px läuft der Text
   fast über die volle Breite und ragt in die helle Bildhälfte; gemessen
   fielen dort die Unterzeile auf 3,9:1 und der Fliesstext ebenso — verlangt
   sind 4,5:1. Unterhalb von 1000 px deshalb eine gleichmässige Abdunklung.

   Das „!important" ist hier keine Bequemlichkeit: der Verlauf hängt als
   style-Attribut am Element, und dagegen kommt kein Selektor an. */
@media (max-width: 1000px) {
  .kbl-kopfbild .wp-block-cover__background {
    background: rgba(26, 26, 26, .74) !important;
  }
}


/* ══ 6. DIE DREI SÄULEN ══════════════════════════════════════════════════
   Text links, schmales Hochformat rechts. Der Editor gibt einer Gruppe mit
   „Ausdehnen" zwar flex-grow: 1 mit, aber flex-basis: auto — sie beansprucht
   damit die Breite ihres Inhalts, und das Bild daneben fiel schon bei 380 px
   Spaltenbreite in die nächste Zeile, obwohl 150 px frei waren.

   flex-basis: 0 dreht das um: die Textspalte nimmt, was übrig bleibt.
   min-width: 0 dazu, sonst verhindert ein langes Wort das Schrumpfen. */
.kbl-saeule > .wp-block-group {
  flex-basis: 0;
  min-width: 0;
}

/* Wird die Spalte schmaler als etwa 300 px, ist nebeneinander vorbei. Dann
   liegt das Bild unter dem Text und nimmt die volle Breite — als Querformat,
   weil ein 150 px schmales Hochformat über der ganzen Spaltenbreite seltsam
   aussähe.

   Das „!important" ist hier nicht Bequemlichkeit: Breite und Seitenverhältnis
   stehen als style-Attribut am <img>, und dagegen kommt kein Selektor an.
   Ohne die Kennzeichnung wurde nur die <figure> breit und hoch, das Bild
   blieb 150 px schmal — ein 335x200 großes Loch mit einem Briefmarkenbild
   darin. Gemessen auf dem Telefon. */
@media (max-width: 760px) {
  .kbl-saeule .wp-block-image.is-resized {
    display: block;
    width: 100%;
  }
  .kbl-saeule .wp-block-image img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* ══ 7. TRAININGSPLAN ════════════════════════════════════════════════════
   Die Tabelle ist der Kern der Trainingszeiten. theme.json kann ihr eine
   Schriftgrösse und eine Rahmenfarbe geben — nicht den versalen Kopf, nicht
   den Umbau zu Karten auf dem Telefon.

   Zusätzliche CSS-Klasse am Tabellenblock: kbl-plan

   Der Blockname steht in jedem Selektor mit davor. WordPress rahmt jede
   Zelle einzeln ein (".wp-block-table td" — zwei Gewichte), und eine Regel
   mit nur einer Klasse verliert dagegen, obwohl sie gezielter aussieht.
   Gemessen: die Tabelle stand als Gitter da, mit Strich um jede Zelle. */
.wp-block-table.kbl-plan table {
  width: 100%;
  border-collapse: collapse;
}
.wp-block-table.kbl-plan :where(th, td) {
  border: 0;
  border-bottom: 1px solid var(--kbl-linie);
  text-align: left;
  vertical-align: top;
}
.wp-block-table.kbl-plan th {
  padding: 0 1rem .7rem 0;
  color: var(--kbl-akzent);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wp-block-table.kbl-plan td {
  padding: .95rem 1rem .95rem 0;
}
.wp-block-table.kbl-plan td:first-child {
  font-weight: 700;
  white-space: nowrap;
}
/* Auf dem Telefon wird aus jeder Zeile eine kleine Karte. Vier Spalten
   nebeneinander ergeben sonst vier Wortsäulen mit je einem Buchstaben. */
@media (max-width: 760px) {
  .wp-block-table.kbl-plan :where(table, tbody, tr, td) {
    display: block;
    width: 100%;
  }
  .wp-block-table.kbl-plan thead { display: none; }
  .wp-block-table.kbl-plan tr {
    padding-block: .9rem;
    border-bottom: 1px solid var(--kbl-linie);
  }
  .wp-block-table.kbl-plan td {
    border: 0;
    padding: .15rem 0;
  }
  .wp-block-table.kbl-plan td:first-child { font-size: var(--wp--preset--font-size--gross); }
}


/* ══ 8. BEITRAGSLISTE „AKTUELLES" ════════════════════════════════════════
   Bild links, Text rechts, dazwischen nur eine Linie. Der Abfrageblock
   liefert die Reihen; die Trennlinie zwischen ihnen ist eine Randlinie am
   ersten Element, und die kennt der Editor nur als „alle vier Seiten".

   Zusätzliche CSS-Klasse an der Beitragsvorlage: kbl-beitragsliste */
.kbl-beitragsliste .wp-block-post {
  padding-block: 1.4rem;
  border-top: 1px solid var(--kbl-linie);
}
.kbl-beitragsliste .wp-block-post:last-child {
  border-bottom: 1px solid var(--kbl-linie);
}


/* ══ 9. LEHRGANGSTERMIN ═════════════════════════════════════════════════
   Der Tagesblock links vom Termin: Zahl gross, Monat klein, oben ein roter
   Strich. Als Gruppe im Inhalt gebaut, die Feinheiten hier.

   Zusätzliche CSS-Klasse: kbl-termintag */
.kbl-termintag {
  min-width: 3.4rem;
  padding-top: .35rem;
  border-top: 3px solid var(--wp--preset--color--aktion);
  text-align: center;
  line-height: 1.15;
}


/* ══ 10. SEITENKOPF ══════════════════════════════════════════════════════
   Das schwarze Band unter dem Kopf, in dem der Seiten- oder Beitragstitel
   steht. Bei Beiträgen trägt es das Beitragsbild (alle 26 haben eines), bei
   Seiten den schwarzen Gürtel.

   Die Grundfarbe steht hier, weil der Cover-Block keine eigene kennt
   (block.json: "background": false). Ohne sie legt sich die Überlagerung
   über das Weiss der Seite, sobald ein Bild fehlt oder noch nicht geladen
   ist — gemessen rgb(91, 92, 95), ein mittleres Grau, während die Bänder
   daneben rgb(26, 26, 26) zeigen.

   min-height, weil WordPress jedem Cover 430 px mitgibt. Das Band war damit
   doppelt so hoch wie nötig.

   Die Abdunklung steht auf 50 %. Vorher gerechnet und auf 60 % gegangen —
   im ungünstigsten denkbaren Fall, einem schneeweißen Foto, ergäben 50 %
   nur 3,44:1. Der schwarze Gürtel ist aber kein weißes Foto. Gemessen mit
   QA/kontrast.js über acht Seiten: 50 % → 5,57:1, 60 % → 7,07:1,
   40 % → 4,44:1. Verlangt sind 4,5:1, und 50 % hält das mit Abstand.

   Eine Rechnung für den schlimmsten Fall ist eine Vermutung, solange sie
   nicht gemessen ist. Hier hätte sie das Foto ohne Grund halb weggedunkelt.

   WordPress kennt für die Abdunklung nur Zehnerschritte: ein krummer Wert
   erzeugt eine Klasse, für die es kein CSS gibt, und fällt still auf 50 %
   zurück.

   EINE Ausnahme: single-plakat.html steht auf 60 %. Der Unterschied ist
   nicht gestalterisch, sondern die Länge der Titel. Seitentitel sind kurz
   („Kontakt", „Downloads") und bleiben links, wo der Gürtel dunkel ist.
   Beitragstitel gehen bis 65 Zeichen — „31. Traditionelles Sommerlager 2024
   mit Sensei Lothar J. Ratschke" läuft über die halbe Bandbreite und liegt
   dann auf dem hellen Anzug. Gemessen: bei 50 % fielen vierzehn Beiträge auf
   3,92:1, bei 60 % sind es 5,25:1. */
.kbl-seitenkopf {
  background-color: var(--wp--preset--color--ink);
  min-height: 0;
}

/* Auf dem Telefon liegt der Titel über der ganzen Bandbreite und kann der
   hellen Anzugfläche nicht ausweichen. Gemessen auf /lehrgaenge/ bei 375 px:
   3,77:1. Das genügt der Regel für große Schrift (29 px, verlangt 3:1),
   aber knapp — auf dem Schreibtisch sind es 5,57:1.

   Dieselbe Antwort wie beim Kopfbild, das unterhalb von 1000 px ebenfalls
   gleichmäßiger abdunkelt: eine Fläche, über die der Text nicht mehr
   herumläuft, muss dunkler sein.

   Der Selektor ist absichtlich schwer. WordPress schreibt die Abdunklung
   mit vier Klassen:
     .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50
   Die naheliegende Fassung mit drei Klassen verliert dagegen — und zwar
   lautlos: die Regel steht im Stylesheet, der Browser zeigt sie an, der
   gemessene Wert bleibt bei 0,5. Genau dieser Fehler ist in Abschnitt 7
   schon einmal passiert, damals bei der Tabelle.

   .has-background-dim doppelt genannt, dazu der Blockname: fünf Klassen,
   und die Zehnerstufe muss nicht im Selektor stehen. Ändert sich dimRatio
   in den Vorlagen, gilt die Regel weiter. */
@media (max-width: 760px) {
  .wp-block-cover.kbl-seitenkopf .wp-block-cover__background.has-background-dim.has-background-dim {
    opacity: .62;
  }
}


/* ══ 11. BEDIENBARKEIT ═══════════════════════════════════════════════════ */

/* Sprungmarke für Tastaturnutzer.
   WordPress liefert für den Sprunglink eine eigene Regel mit
   "position: absolute !important" und zwei Klassen im Selektor. Ohne die
   gleiche Bewaffnung bleibt der Link beim Fokus ein 1x1-Pixel in der linken
   oberen Ecke — sichtbar für niemanden, obwohl er da ist. */
.skip-link.screen-reader-text:focus,
.skip-link:focus {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip-path: none !important;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-radius: 3px;
  font-size: 1rem;
  text-decoration: none;
}

/* Sichtbarer Fokus auf allen bedienbaren Elementen */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--aktion);
  outline-offset: 2px;
}

/* Auf dunklem Grund geht das Rot des Fokusrings unter. */
.kbl-dunkel :where(a, button):focus-visible,
.has-ink-background-color :where(a, button):focus-visible {
  outline-color: var(--wp--preset--color--papier);
}


/* ══ 12. FREMDAUSGABE ════════════════════════════════════════════════════
   Complianz legt über eine blockierte Einbettung — auf /kontakt/ die Karte —
   einen Hinweis: weiße Schrift auf rgba(0,0,0,0.5). Über dem weißen Platz-
   halter ergibt das 3,98:1 bei 14 px; verlangt sind 4,5:1. Gemessen mit
   QA/kontrast-flaechen.js.

   Das ist Ausgabe des Plugins und nicht dieses Themes. Korrigiert wird es
   hier trotzdem: es ist eine Zeile, es steht auf einer Seite, die Besucher
   wirklich aufrufen, und es ändert nichts als die Deckkraft des Schleiers.
   Mit 0,62 sind es 6,2:1 im ungünstigsten Fall (weiß dahinter).

   Fällt der Hinweis bei einem Plugin-Update weg, läuft diese Regel ins
   Leere — sie richtet dann keinen Schaden an.

   Der Klassenname steht doppelt. Complianz schreibt seine eigene Farbe mit
   zwei Klassen im Selektor; eine Regel mit einer Klasse verliert dagegen,
   ohne dass etwas auffiele — gemessen blieb der Wert nach dem ersten
   Versuch unverändert bei 3,6:1. Doppelt genannt wiegt die Klasse schwerer
   als die Plugin-Regel, ohne dass ein "!important" nötig wird. */
.cmplz-blocked-content-container .cmplz-blocked-content-notice.cmplz-blocked-content-notice {
  background: rgba(0, 0, 0, .62);
}


/* ══ 13. KONTAKTFORMULAR ═════════════════════════════════════════════════
   Contact Form 7 liefert nacktes HTML aus: das Plugin gestaltet nichts und
   verlässt sich darauf, dass das Theme es tut. Ein Block-Theme tut das
   nicht — theme.json erreicht nur Blöcke, und ein Shortcode ist keiner.

   Gemessen auf /kontakt/ vor dieser Regel: der Absenden-Knopf 76 x 22 px,
   Arial 13,3 px, grauer 3-D-Rahmen des Browsers. Der Knopf daneben im
   Kopfbereich: 161 x 43 px, Vereinsrot, versal.

   Die Werte stammen nicht aus der Luft, sondern aus "elements.button" in
   theme.json. Ändert sich dort der Knopf, gehört er hier nachgezogen — das
   ist der Preis dafür, dass eine Fremdausgabe mitspielt. */

.wpcf7 .wpcf7-form-control-wrap { display: block; }

/* Beschriftungen: die Fragen des Formulars, nicht sein Inhalt. */
.wpcf7 label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--klein);
  font-weight: 700;
  letter-spacing: .04em;
}

/* Eingabefelder. width: 100% statt des size="40"-Attributs aus dem
   Formular — vierzig Zeichen sind auf dem Telefon zu breit und auf dem
   Schirm zu schmal. */
.wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], textarea, select) {
  /* box-sizing ist hier Pflicht, nicht Geschmack. Formularfelder erben es
     nicht: der Browser stellt sie auf content-box, und dann zählt width:100%
     nur den Inhalt — Polsterung und Rahmen kommen obendrauf. Gemessen auf
     /kontakt/ bei 375 px: Spalte 335 px, Feld 364,2 px, also 9 px aus der
     Seite heraus. Am Schirm fiel es nicht auf, weil der Seitenrand es
     verschluckt — aus der Textspalte ragte es auch dort schon.
     max-width: 100% hilft nicht, das rechnet unter content-box genauso. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: .35rem;
  padding: .7rem .85rem;
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 0;
  background: var(--wp--preset--color--papier);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--basis);
  line-height: 1.5;
}
.wpcf7 textarea { min-height: 11rem; resize: vertical; }

.wpcf7 :where(input, textarea, select):focus-visible {
  outline: 3px solid var(--wp--preset--color--aktion);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--aktion);
}

/* Der Absenden-Knopf. Dieselben Werte wie jeder andere Knopf der Seite. */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  width: auto;
  margin-top: var(--wp--preset--spacing--20);
  padding: .85rem 1.5rem;
  border: 2px solid var(--wp--preset--color--aktion);
  border-radius: 0;
  background: var(--wp--preset--color--aktion);
  color: var(--wp--preset--color--papier);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--klein);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background: var(--wp--preset--color--aktion-dunkel);
  border-color: var(--wp--preset--color--aktion-dunkel);
}

/* Hinweise des Plugins: Pflichtfeld, Fehler, Bestätigung. Rot auf Weiss
   ergibt 5,9:1. Der Rahmen macht die Meldung auch ohne Farbe kenntlich —
   Farbe allein darf nie der einzige Träger einer Aussage sein. */
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: .35rem;
  color: var(--wp--preset--color--aktion);
  font-size: var(--wp--preset--font-size--klein);
  font-weight: 700;
}
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--aktion); }
.wpcf7 .wpcf7-response-output {
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: var(--wp--preset--spacing--30);
  border: 2px solid var(--wp--preset--color--linie);
  font-size: var(--wp--preset--font-size--klein);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--wp--preset--color--aktion);
}


/* ══ 14. BREITE INHALTE ══════════════════════════════════════════════════

   Der Fließtext steht auf 49rem — das sind rund 82 Zeichen je Zeile, das
   Ende dessen, was sich noch bequem liest. Fotos, Galerien, Tabellen und
   Spalten haben diese Grenze nicht: sie werden von ihr nur klein gehalten.
   Auf dem Laptop lief eine Galerie deshalb in derselben Spalte wie der
   Text, die einzelne Kachel kam auf 232 px.

   theme.json kann das nicht ausdrücken. Dort gibt es nur „Breit" als
   Angabe am einzelnen Block — die müsste in jedem Beitrag von Hand
   gesetzt werden und ginge beim nächsten Einfügen wieder verloren.

   Unterhalb von 1000 px greift die Regel nicht. Dort ist das Fenster
   ohnehin schmaler als die Textspalte, ein max-width änderte nichts —
   die Abfrage sagt es nur deutlicher, als das Rechenergebnis es täte. */

@media (min-width: 1000px) {
  :is(.wp-block-post-content, .is-root-container) > :is(
    figure.wp-block-image,
    .wp-block-gallery,
    figure.wp-block-table,
    .wp-block-columns
  ) {
    max-width: var(--wp--style--global--wide-size);
    /* Ohne width bliebe die Tabelle bei ihrer Inhaltsbreite stehen:
       max-width erlaubt nur, es verlangt nichts. */
    width: 100%;
    margin-inline: auto;
  }
}


/* ══ 15. WORTUMBRUCH ═════════════════════════════════════════════════════
   Deutsch baut lange Komposita, und eine Überschrift hat wenig Platz.
   Gemessen auf /generationswechsel-an-der-vereinsspitze/ bei 375 px:
   die h2 „Mitgliederversammlung und Vorstandswahl" steht in einer 335 px
   breiten Spalte, allein das Wort „Mitgliederversammlung" ist bei 26 px
   Schriftgröße 371,6 px breit. Ohne Trennhilfe ragte die Zeile 16 px aus
   der Seite; die Seite ließ sich seitlich schieben.

   Zwei Stufen, und die Reihenfolge ist Absicht:

   hyphens: auto trennt an den richtigen Stellen, weil die Seite lang="de"
   trägt — „Mitglieder-versammlung", nicht irgendwo. Gemessen: breiteste
   Zeile 296 px, Überlauf 0. Es greift nur, wenn eine Zeile sonst nicht
   passt, und kostet auf breiten Schirmen nichts.

   overflow-wrap: break-word ist das Netz darunter, für den Fall, dass ein
   Browser keine Trennmuster für Deutsch mitbringt. Es trennt ohne
   Trennstrich mitten im Wort — hässlicher, aber immer noch besser als eine
   Seite, die sich seitlich schieben lässt. Gemessen: breiteste Zeile
   331 px, Überlauf 0.

   Nicht auf alles angewendet: #vereinsshop bleibt außen vor, dort
   bestimmt Spreadshirts eigenes Stylesheet den Umbruch. */

:where(h1, h2, h3, h4, h5, h6) {
  hyphens: auto;
  -webkit-hyphens: auto;
}

:where(.wp-site-blocks) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd,
  figcaption, blockquote, cite, address, th, td):not(#vereinsshop *) {
  overflow-wrap: break-word;
}


/* ══ 16. NOTNÄGEL ════════════════════════════════════════════════════════ */

/* Breite Inhalte dürfen nie die Seite seitlich schieben */
.wp-block-table { overflow-x: auto; }

/* Eingebettete Karten und Videos: alte Einbettungen bringen feste
   Pixelbreiten aus einem Layout mit, das es nicht mehr gibt. */
main :where(iframe, embed, object, video) {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}