/*
 * Der Content-Vertrag: Struktur fuer die `gw-`Klassen von wp-goblin.
 *
 * GEMESSEN am 2026-09-01 an `/messbeitrag-bauteile/`, dem einzigen Beitrag mit
 * vollstaendigem Vertragsmarkup. Ausgeliefert werden dort:
 * gw-callout (3), gw-callout-label (3), gw-procon (2) mit -pro/-con/-heading/
 * -list, gw-faq/-title/-item (2), gw-table-scroll, gw-module/-title/-content,
 * gw-callout-related-card und Familie.
 *
 * ---------------------------------------------------------------------------
 * WARUM DIESE DATEI IM PARENT LIEGT UND NICHT IM CHILD
 *
 * Die Klassen gehoeren dem Content-Vertrag, nicht der Marke. Jedes Projekt mit
 * `wp-goblin` bekommt dieselben Bauteile, und die Pruefrage der Architektur —
 * waere das in einem zweiten Projekt mit anderer Marke auch richtig? — lautet
 * fuer Anordnung, Abstaende und Bildlauf **ja**.
 *
 * Farbwerte stehen hier keine. Was nach Farbe aussieht, ist eine **Rolle**
 * (`var(--wp--preset--color--surface)`), und Rollen sind Struktur: Wie
 * `surface` aussieht, entscheidet das Child. Genauso haelt es die `theme.json`
 * dieses Repos schon heute.
 *
 * ---------------------------------------------------------------------------
 * WARUM UEBERSCHREIBEN UND NICHT ABSCHALTEN
 *
 * `wp-goblin` bringt eigenes Base-CSS mit und laesst es ueber
 * `add_theme_support('gw-own-styles')` abschalten. Die Uebergabe des Entwurfs
 * sagt dazu ausdruecklich: erst abschalten, **wenn jede aktive Vertragsklasse
 * eine eigene Regel traegt**. Vorher ueberschreiben.
 *
 * Das geht auf, weil die Ladereihenfolge gemessen ist:
 *
 *   … goblin-worker-content-blocks · goblin-base-base · goblin-base-layout
 *     · goblin-base-content-contract · goblin-adapter-* · hardware-bros-skin
 *
 * Das Plugin-CSS steht **davor**. Bei gleicher Spezifitaet gewinnt diese Datei.
 *
 * ---------------------------------------------------------------------------
 * DER DUNKELMODUS, UND WARUM HIER UEBERALL EINE FARBE STEHT
 *
 * `content-blocks.css` traegt einen eigenen `prefers-color-scheme: dark`-Zweig
 * mit fast weisser Schrift (`#e8e8e8`). Das Theme hat **keinen** Dunkelmodus,
 * der Grund bleibt also hell. Gemessen am 2026-09-01: neun Bauteile unter
 * **3:1**, Callouts und Pro/Contra bei **1,03 bis 1,07:1** — unlesbar fuer
 * jeden Besucher mit dunkler Systemeinstellung, und im Adminbereich
 * unsichtbar.
 *
 * Deshalb setzt jede Regel hier ihre Schriftfarbe **ausdruecklich**. Das ist
 * kein Zierat: Ohne die Angabe gewinnt der Dunkelzweig des Plugins.
 */

/* ------------------------------------------------------------------
 * Die Schriftgroessen des Plugins zuruecknehmen
 *
 * GEMESSEN: `content-blocks.css` setzt rund **zwanzig** harte `rem`-Groessen
 * auf die Vertragsklassen — `0.75`, `0.8`, `0.85`, `0.9`, `0.95`, `1.05`,
 * `1.2rem`. Damit steht jedes Bauteil des Vertrags **neben** der
 * typografischen Skala des Themes, nicht darin. Am Callout nachgemessen:
 * 15,2 px, waehrend der Fliesstext danebenan 18 px trug.
 *
 * Der Entwurf sagt fuer diese Bauteile ausdruecklich „im Textfluss". Also
 * `inherit` und **keine** eigene Groesse: Wer hier einen Wert einsetzt, hat
 * die Skala an einer zweiten Stelle stehen und darf sie zweimal pflegen.
 *
 * Nicht erfasst sind Ueberschriften und Label. Die sind eigene Ebenen der
 * Skala (Auszeichnung 11 bis 12 px, Versalien, gesperrt) und gehoeren zur
 * Marke — sie kommen mit dem Gestaltungsdurchgang im Child.
 * ------------------------------------------------------------------ */
.gw-callout,
.gw-procon-list,
.gw-procon-list > li,
.gw-module-content,
.gw-module-content > *,
.gw-sources-list,
.gw-sources-list > li,
.gw-callout-related-text,
.gw-callout-related-cta,
.gw-faq-item > summary {
	font-size: inherit;
}

/* ------------------------------------------------------------------
 * Callout — ein <p>, kein Container
 *
 * Wichtig fuer jede spaetere Regel: Der Callout ist ein einzelner Absatz mit
 * Klasse, kein Kasten mit Kind. Flaeche, Polster und Kante entstehen direkt
 * auf dem Absatz. Wer hier einen Container erwartet, schreibt Regeln, die nie
 * greifen.
 * ------------------------------------------------------------------ */
/*
 * KEINE KANTE. Hier stand eine farbige Leiste links. Sie war eine Zutat: Der
 * Callout ist ein SPRECHENDER Kasten, und sein Erkennungszeichen ist die
 * Bubble-Ecke, die der Skin an den Radius haengt — nicht ein zweiter Traeger
 * derselben Farbe. Zwei Erkennungszeichen fuer eine Aussage sind eines zu
 * viel, und die Leiste war das schwaechere: Sie unterscheidet den Callout von
 * nichts, was auf dieser Seite sonst vorkommt.
 *
 * Die Farbe des Labels bleibt der einzige Farbtraeger des Bauteils — „eine
 * Farbe je Bauteil".
 */
.gw-callout {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);

	/*
	 * `border: 0` und nicht bloss „die Zeile weglassen". GEMESSEN: Nach dem
	 * Streichen der Zeile stand die Leiste weiter da (4 px, `solid`) — sie kam
	 * aus `content-blocks.css` des Plugins, das hier davor laedt. Eine
	 * Ruecknahme muss geschrieben werden; eine geloeschte Regel nimmt nichts
	 * zurueck, sie hoert nur auf, etwas hinzuzufuegen.
	 */
	border: 0;
	padding: var(--g-callout-pad-block, 1rem) var(--g-callout-pad-inline, 1rem);
	margin-block: var(--g-callout-margin, var(--wp--preset--spacing--md, 1.5rem));
}

/*
 * ZWEI ZEILEN: ZEICHEN UND LABEL OBEN, INHALT DARUNTER.
 *
 * DRITTER ANLAUF AN DIESEM BAUTEIL, und die beiden vorigen stehen nicht mehr
 * daneben, sondern sind ersetzt. Erst Zeichen links und Label im Textfluss;
 * dann Zeichen und Label gestapelt in einer Spalte links, der Satz rechts;
 * seit dem 2026-09-04 zwei Zeilen uebereinander. Weisung des Auftraggebers:
 * „1row: icon + name, 2row callout inhalt".
 *
 * DER ABSATZ IST WIEDER EIN BLOCK, UND DAS IST DIE EIGENTLICHE ENTLASTUNG.
 * Die Flex-Falle, die diesem Bauteil zweimal das Label verschoben hat — ein
 * Flex-Container blockifiziert jedes Kind*element* —, greift hier nicht mehr:
 * Der Absatz hat nur noch zwei Kinder, und beide sind selbst Bloecke. Wo Flex
 * noch steht, steht es INNERHALB der ersten Zeile, und dort sind Zeichen und
 * Label genau die zwei Dinge, die nebeneinanderstehen sollen.
 *
 * `display: block` ausdruecklich und nicht als weggelassene Zeile: Das Plugin
 * (`content-blocks.css`) laedt davor, und eine geloeschte Regel nimmt nichts
 * zurueck. Derselbe Grund wie beim `border: 0` darueber.
 *
 * `:has(> .g-callout-mark)` bleibt die Bedingung: Ein Projekt ohne Zeichen
 * behaelt genau den Absatz, der vorher dastand.
 */
.gw-callout:has(> .g-callout-mark) {
	display: block;
}

/*
 * ZEILE 1 — Zeichen und Label NEBENEINANDER.
 *
 * `align-items: center` und nicht `flex-start`: In einer Zeile aus genau einem
 * Zeichen und einem Wort ist die gemeinsame Mittelachse die ruhigere Kante.
 * Der Ausgleich von 3 px, mit dem das Zeichen frueher auf die erste Textzeile
 * gesetzt wurde, faellt damit weg — er zielte auf einen Satz, der jetzt eine
 * Zeile tiefer steht.
 */
.g-callout-mark {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--g-callout-mark-gap, 0.5rem);
	margin-block-end: var(--g-callout-mark-end, 0.35rem);
}

/*
 * ZEILE 2 — der Inhalt ueber die volle Breite.
 *
 * `display: block` am Umschlag ist die Zeile, die aus zwei Zeilen zwei Zeilen
 * macht: `g-callout-text` ist ein `<span>`, und ohne diese Angabe liefe der
 * Satz hinter dem Label weiter, sobald der Absatz kein Flex-Container mehr
 * ist.
 */
.g-callout-text {
	display: block;
}

/* Das Label bricht nicht um. Es ist ZWEI Woerter und ein Doppelpunkt; eine
   zweite Zeile waere kein Umbruch, sondern ein zweites Label. */
.g-callout-mark > strong,
.g-callout-mark > .gw-callout-label {
	white-space: nowrap;
}

/*
 * DER SATZ BRAUCHT EINEN UMSCHLAG, und der Grund ist keine Feinheit.
 *
 * Ein Flex-Container macht aus JEDEM Kindelement ein Flex-Kind und
 * blockifiziert es; nur zusammenhaengender Text wird zu einem anonymen Kind
 * zusammengefasst. `<strong>Real Talk:</strong> Die Stabis …` sind aber
 * Element UND Text, also zwei Kinder. GEMESSEN kam am Label `display: block`
 * heraus, und es stand neben dem Satz statt darin — derselbe Fehler wie am
 * 2026-09-03, nur in neuer Gestalt.
 *
 * `inc/callout-icon.php` legt den Satz deshalb in `g-callout-text`. Der
 * Umschlag bleibt auch in der zweizeiligen Fassung noetig: Ohne ihn waeren
 * Satzteile und jedes weitere Element des Absatzes wieder einzelne Kinder,
 * und die Zeile 2 waere keine.
 *
 * `min-width: 0`: Es bleibt stehen, weil `g-callout-mark` weiterhin ein
 * Flex-Container ist und ein Projekt den Umschlag in einen setzen kann. Ein
 * langes Wort schoebe den Kasten sonst aus der Lesespalte.
 */
.g-callout-text {
	min-width: 0;
}

.g-callout-icon {
	--g-icon-size: var(--g-callout-icon-size, 1.375rem);

	/*
	 * Es schrumpft nicht. Die Zeile besteht aus Zeichen und Label; ein
	 * gestauchtes Zeichen waere die falsche der beiden Antworten auf zu wenig
	 * Platz.
	 */
	flex: 0 0 auto;
}

/*
 * Das Label steht im Textfluss und ist im Bestand **klassenlos** — der Worker
 * liefert mal `.gw-callout-label`, mal ein blankes `<strong>` als erstes Kind.
 * Beide Faelle abdecken, sonst faellt die Haelfte der Beitraege heraus.
 */
/*
 * DREI SELEKTOREN, UND JEDER FAENGT EINEN FALL.
 *
 * `> strong:first-child` ist der klassenlose Bestand ohne Zeichen.
 * `.g-callout-mark > strong` derselbe Bestand MIT Zeichen — das Label liegt
 * dann in der Zeichenspalte.
 *
 * UND `.gw-callout .gw-callout-label` STATT `.gw-callout-label`: Das Plugin
 * faerbt das Label ueber `.gw-callout-info strong` (0,1,1) und schlaegt damit
 * ein blankes `.gw-callout-label` (0,1,0). Dass die Farbe bis zum 2026-09-03
 * trotzdem stimmte, lag allein an `:first-child` im ersten Selektor — der
 * zaehlt als Klasse und brachte ihn auf 0,2,1. Sobald das Zeichen davor kam,
 * war das Label nicht mehr erstes Kind, und die Farbe kippte lautlos auf
 * #0055AA zurueck. GEMESSEN, nicht vermutet.
 */
.gw-callout > strong:first-child,
.gw-callout .g-callout-mark > strong,
.gw-callout .gw-callout-label {
	/*
	 * `color: inherit` ist hier die tragende Zeile, nicht das Gewicht.
	 * Gemessen: Ohne sie blieben genau diese beiden Label bei **1,80:1** im
	 * Dunkelmodus stehen, waehrend alles andere schon behoben war — das
	 * Plugin setzt fuer die Label eine **eigene** Farbe je Callout-Typ
	 * (`#7ab3ff`, `#a5d6a7`, `#ffcc80`), und eine Regel, die nur die Flaeche
	 * und die Absatzfarbe richtigstellt, erreicht sie nicht.
	 *
	 * Welche Farbe ein Label je Typ traegt, entscheidet die Marke: Der Entwurf
	 * vergibt fuenf feste Label mit fuenf Farben. Bis dahin erbt es die
	 * Absatzfarbe, und das ist lesbar statt unsichtbar.
	 */
	color: inherit;
	font-weight: 700;

	/*
	 * IM TEXTFLUSS, und das sind fuenf Ruecknahmen.
	 *
	 * Das Plugin macht aus `.gw-callout-label` eine eigene Zeile: `display:
	 * block`, Versalien, 0,75rem, gesperrt, mit Abstand darunter. Damit steht
	 * ueber dem Satz eine Ueberschrift — und der Callout ist keine Rubrik,
	 * sondern eine Einrede. „Bro-Tipp:" gehoert vor das erste Wort, nicht
	 * darueber; der Doppelpunkt gehoert zu einem Satz und nicht zu einem
	 * Etikett.
	 *
	 * SICHTBAR WAR DAS NUR IM BILD. Farbe, Gewicht und Schriftfamilie waren
	 * gemessen und richtig, waehrend das Label als kleine Versalzeile
	 * darueberstand. Kein Stilwert, den irgendjemand geprueft hatte, war
	 * falsch — geprueft worden war nur nicht `display`.
	 */
	display: inline;
	font-size: inherit;
	text-transform: none;
	letter-spacing: inherit;
	margin: 0;
}

/* ------------------------------------------------------------------
 * Vorteile und Nachteile
 * ------------------------------------------------------------------ */
/*
 * Der Traeger. Er entsteht in `inc/procon-pair.php`, weil der Worker zwei
 * Geschwister ohne gemeinsamen Elternteil liefert und ein Raster einen
 * Rasterkasten braucht.
 *
 * Die Oberlinie gehoert dem PAAR und nicht den Haelften — eine Linie je
 * Haelfte waere zweimal Linie mit einer Luecke dazwischen.
 *
 * Der Breakpoint-WERT ist der eine erlaubte (992 px, `layout.css`). Die
 * Konvention verlangt einen Wert, nicht einen einzigen Block.
 */
.g-procon {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g-procon-gap, 1.625rem);
	border-block-start: 2px solid var(--g-rule-strong, currentColor);
	padding-block-start: var(--g-procon-pad-top, 1.25rem);
	margin-block: var(--wp--preset--spacing--lg, 2rem);
}

/*
 * Das Fluss-Layout des Gruppenblocks setzt einen Abstand zwischen
 * Geschwistern. In einem Raster ist das ein zweiter Abstand neben `gap` — und
 * in der zweispaltigen Fassung schoebe er die rechte Spalte nach unten,
 * waehrend die linke oben bliebe. Der Abstand kommt aus `gap`, sonst nirgends.
 */
.g-procon > .gw-procon {
	margin-block: 0;
}

@media (min-width: 992px) {
	.g-procon {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * KEINE FLAECHE. Hier war ein gruen beziehungsweise rot gefuellter Kasten mit
 * Kante links — beides aus `content-blocks.css` des Plugins. Die Kaesten-Regel
 * gibt Vorteilen und Nachteilen keine Flaeche, und ohne Flaeche verschwindet
 * auch das Kleben am linken Rand: Der Text steht dann auf derselben Kante wie
 * die Absaetze darueber, statt auf der Innenseite eines Kastens ohne Polster.
 *
 * Alle vier Zeilen sind Ruecknahmen, keine Gestaltung. Fehlt eine, bleibt der
 * Kasten stehen.
 */
.gw-procon {
	color: var(--wp--preset--color--contrast);
	margin-block: var(--wp--preset--spacing--md, 1.5rem);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/*
 * DIE HAELFTE IST KEIN LESEBEREICH.
 *
 * Der Worker gibt beide Haelften als `layout: constrained` aus. Core macht
 * daraus fuer JEDES Kind `max-width: <content-size>; margin-inline: auto` —
 * gedacht fuer eine Spalte, die den Lesebereich fuehrt.
 *
 * GEMESSEN bei 991 px: Die Haelfte war 959 px breit, ihre Ueberschrift 656 px
 * mit `margin-left: 151.5px`. Der Text stand also eingerueckt in der Mitte
 * einer Spalte, waehrend die Absaetze darueber links standen — und ab 992 px
 * war davon nichts zu sehen, weil die Haelfte dort ohnehin schmaler ist als
 * der Lesebereich. Ein Fehler, der genau eine Fensterbreite lang unsichtbar
 * ist.
 *
 * Der Lesebereich wird eine Ebene hoeher gefuehrt. Hier gilt die Spalte.
 */
.gw-procon > * {
	max-width: none;
	margin-inline: 0;
}

.gw-procon-heading {
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	gap: var(--g-procon-heading-gap, 0.5625rem);
	margin-block: 0 var(--g-procon-heading-end, 0.75rem);
}

/*
 * Das Zeichen der Ueberschrift. Es erbt die Farbe der Ueberschrift ueber
 * `currentColor` — die Haelfte traegt eine Farbe, an einer Stelle definiert.
 */
.g-procon-icon {
	--g-icon-size: var(--g-procon-icon-size, 1.25rem);
}

.gw-procon-list {
	color: var(--wp--preset--color--contrast);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--g-procon-list-gap, 0.625rem);
}

/*
 * Haarlinien zwischen den Punkten, nicht darum herum. `:last-child` bleibt
 * ohne Linie, sonst steht eine Kante ohne Inhalt darunter — und ohne Polster
 * darunter, sonst steht Luft ohne Linie.
 */
.gw-procon-list > li {
	display: flex;
	gap: var(--g-procon-item-gap, 0.625rem);
	padding-block: 0 var(--g-procon-item-pad, 0.625rem);
	border-block-end: 1px solid var(--g-rule-soft, var(--wp--preset--color--muted));
}

.gw-procon-list > li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

/*
 * Das Zeichen vor dem Punkt. Es ist die Aufzaehlungsmarke dieser Liste, nicht
 * Schmuck: `list-style: none` nimmt die vorgegebene weg, und eine Liste ohne
 * Marke liest sich als Absatzfolge.
 *
 * Plus und Minus stehen HIER und nicht im Skin, weil sie die Bedeutung tragen
 * und nicht die Marke — ein Vorteil ist in jedem Projekt ein Plus. Die Farbe
 * dagegen ist Marke und kommt ueber `--g-procon-color` von aussen.
 *
 * U+2212 MINUS SIGN, kein Bindestrich: Ein Bindestrich neben einem Pluszeichen
 * steht auf halber Hoehe und in halber Laenge, und das Paar sieht dann aus wie
 * ein Fehler.
 */
.gw-procon-list > li::before {
	content: var(--g-procon-marker, "");
	flex-shrink: 0;
	font-weight: 700;
	color: var(--g-procon-color, inherit);
}

.gw-procon-pro {
	--g-procon-marker: "+";
}

.gw-procon-con {
	--g-procon-marker: "\2212";
}

/* ------------------------------------------------------------------
 * Haeufige Fragen — je Frage ein <details>
 * ------------------------------------------------------------------ */
.gw-faq,
.gw-faq-title {
	color: var(--wp--preset--color--contrast);
}

.gw-faq-item {
	border-block-end: 1px solid var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--xs, 0.5rem);
}

.gw-faq-item > summary {
	cursor: pointer;
	font-weight: 700;

	/*
	 * Tap-Ziel. Die Pruefliste des Entwurfs verlangt mindestens 44 px, und ein
	 * `<summary>` ist ohne Zutun nur so hoch wie seine Zeile.
	 */
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* ------------------------------------------------------------------
 * Modul „So arbeiten wir" / „So haben wir das getestet"
 *
 * Linie oben und unten, keine Flaeche: Die Kaesten-Regel des Entwurfs vergibt
 * Flaeche nur an TL;DR, Callouts, Kauf-Check und Autorenkasten.
 *
 * DAS STAND HIER SCHON UND GALT TROTZDEM NICHT. GEMESSEN am 2026-09-03 kam
 * heraus: Flaeche `surface`, `border-left: 4px solid #F59E0B` (am `--review`;
 * `#64748B` am `--default`), `border-radius: 0 8px 8px 0`, Polster 21/24. Alles
 * aus `content-blocks.css`, alles an `.gw-module--review` und
 * `.gw-module--default` — Selektoren, die diese Regel NICHT trifft.
 *
 * Die Lehre ist dieselbe wie am Callout: Eine Ruecknahme muss GESCHRIEBEN
 * werden. Eine Regel, die den Sollzustand nur an der Grundklasse beschreibt,
 * nimmt an den Varianten nichts zurueck, und im Quelltext sieht die Absicht
 * vollstaendig aus.
 *
 * DIE LEISTE IST DABEI DIE FOLGENREICHSTE ZEILE: `#F59E0B` ist ein Farbwert,
 * den keine der neun Rollen fuehrt, und er unterschied die beiden Varianten
 * ALLEIN ueber die Farbe. Beides ist in diesem System ausgeschlossen. Welche
 * Variante vorliegt, sagt die Ueberschrift.
 * ------------------------------------------------------------------ */
.gw-module {
	color: var(--wp--preset--color--contrast);
	border-block: 1px solid var(--wp--preset--color--muted);
	border-inline: 0;
	border-radius: 0;
	padding-block: var(--wp--preset--spacing--sm, 1rem);
	padding-inline: 0;
	margin-block: var(--wp--preset--spacing--lg, 2rem);

	/*
	 * `--gw-module-bg` ist ein Uebergabepunkt des Content-Vertrags (SPEC 4.5).
	 * Der Rueckfall ist `transparent` und nicht die Flaeche des Plugins: Ein
	 * Projekt, das dem Modul eine geben will, setzt den Token — es soll nicht
	 * eine bekommen, weil niemand widersprochen hat.
	 */
	background-color: var(--gw-module-bg, transparent);
}

.gw-module-title {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	margin-block: 0 var(--wp--preset--spacing--xs, 0.5rem);
}

.gw-module-content {
	color: var(--wp--preset--color--contrast);
}

/*
 * Redaktionskopien aus Google Docs bringen Inline-Styles mit: `font-family:
 * Arial`, `font-size: 11pt`, `color: #000000`. An der Vorgaengerseite
 * bestaetigt. `#000000` bricht jeden spaeteren Dunkelmodus, und die
 * Schriftangaben brechen die Typografie.
 *
 * Ein Inline-Style laesst sich nur mit `!important` schlagen. Genau dafuer ist
 * es da — und nur dafuer; im Rest dieser Datei kommt keines vor.
 */
.gw-module-content [style] {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}

/* ------------------------------------------------------------------
 * Quellen — eine nummerierte Liste
 * ------------------------------------------------------------------ */
/*
 * EIN ABSCHNITT, KEINE FETTE ZEILE.
 *
 * Bis zum 2026-09-03 stand hier nur ein Abstand: Die Quellen begannen mitten
 * im Fluss mit einem fetten Wort, und nichts sagte, dass der Beitrag an
 * dieser Stelle aufhoert und der Beleg anfaengt. Die Oberlinie ist dasselbe
 * Mittel, mit dem die Seite jeden anderen Abschnitt abtrennt (FAQ der
 * Rubrikseite, Beitragsverlauf) — deshalb hier keine neue Erfindung, sondern
 * dieselbe Nahtstelle. Und zwar `--g-rule-soft` und nicht `--g-rule`: Direkt
 * darunter steht der Beitragsverlauf mit seinen beiden weichen Linien, und
 * eine kraeftigere daneben saehe aus wie ein Fehler und nicht wie eine
 * Rangfolge.
 */
.gw-sources {
	border-block-start: 1px solid var(--g-rule-soft, currentColor);
	padding-block-start: var(--g-sources-pad-top, 1rem);
	color: var(--wp--preset--color--contrast);
	margin-block: var(--wp--preset--spacing--lg, 2rem);
}

.gw-sources-list > li {
	padding-block: var(--wp--preset--spacing--xs, 0.5rem);
	border-block-end: 1px solid var(--wp--preset--color--muted);
}

.gw-sources-list > li:last-child {
	border-block-end: 0;
}

/* ------------------------------------------------------------------
 * Lesetipp im Text
 * ------------------------------------------------------------------ */
/*
 * EIN KASTEN IN DER FORM DER BEITRAGSKARTE — und das ist eine Abweichung.
 *
 * Hier stand bis zum 2026-09-03 eine blosse Zeile mit Ober- und Unterlinie,
 * genau wie der Entwurf sie zeichnet. Weisung des Auftraggebers vom
 * 2026-09-03: Der Lesetipp soll dieselbe Sprechblasen-Form tragen wie die
 * Beitragskarten. Festgehalten in `design/entwurf/gruppe-e-plan.md`.
 *
 * Der handfeste Teil der Beanstandung war das Polster: Ohne eines klebte das
 * Zeichen an der Kante des Kastens (GEMESSEN 0 px Abstand), weil eine Zeile
 * ohne Flaeche keinen Innenraum hat.
 *
 * Bild und zweites Ziel nimmt `inc/callout-related.php` weiterhin aus dem
 * Markup; die Begruendung steht dort. Hier steht nur die Anordnung — welche
 * Kanten, welcher Radius und welche Flaeche, entscheidet der Skin ueber die
 * Nahtstellen.
 */
/*
 * ZWEI ZEILEN, seit dem 2026-09-04 und aus derselben Weisung wie am
 * `gw-callout`: Zeichen und Beschriftung oben, das Ziel darunter. Vorher stand
 * alles drei in einer Zeile.
 *
 * `display: block` ausdruecklich: Das Plugin setzt am Traeger eine eigene
 * Anordnung, und eine weggelassene Regel nimmt nichts zurueck.
 */
.gw-callout-related-card {
	display: block;
	padding: var(--g-callout-related-pad-block, 0.75rem) var(--g-callout-related-pad-inline, 0.75rem);
	border: 1px solid var(--g-rule-soft, var(--wp--preset--color--muted));
	border-radius: var(--g-callout-related-radius, 0);
	margin-block: var(--g-callout-related-margin, var(--wp--preset--spacing--md, 1.5rem));
	color: var(--wp--preset--color--contrast);

	/*
	 * Die Flaeche ausdruecklich zuruecknehmen: Das Plugin setzt eine
	 * (`content-blocks.css`), und ohne diese Zeile stuende sie unter der
	 * eigenen Form. Welche Flaeche der Kasten traegt, setzt der Skin.
	 */
	background-color: var(--g-callout-related-bg, transparent);
}

/*
 * Das Zeichen der Zeile. Groesse hier, Farbe im Skin: Der Entwurf faerbt es
 * nicht wie die Zeile, sondern wie den Verweis.
 */
/* ZEILE 1 — Zeichen und Beschriftung nebeneinander. */
.g-callout-related-mark {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--g-callout-related-gap, 0.7rem);
	margin-block-end: var(--g-callout-related-mark-end, 0.3rem);
}

.g-callout-related-icon {
	--g-icon-size: var(--g-callout-related-icon-size, 1.125rem);
	flex: 0 0 auto;
}

/*
 * „Passend dazu:" ist ein Satzanfang, kein Etikett. Dieselben Ruecknahmen wie
 * beim Callout-Label und aus demselben Grund: Das Plugin setzt Versalien,
 * 0,8rem, Sperrung, Halbfett und einen Abstand darunter. In einer Zeile, die
 * aus zwei Woertern und einem Ziel besteht, ergibt das drei Auszeichnungen
 * fuer den Teil, der KEINE traegt — die Farbe der Zeile gehoert dem Ziel.
 */
.gw-callout-related-label {
	color: inherit;
	flex-shrink: 0;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: inherit;
	margin: 0;
}

/*
 * Der Titel IST das Ziel. `min-width: 0` gehoert dazu: Ein Flex-Kind schrumpft
 * ohne diese Angabe nicht unter seine Min-Content-Breite, und ein langer Titel
 * schoebe die Zeile dann aus der Lesespalte heraus.
 */
/*
 * ZEILE 2 — der Titel IST das Ziel, ueber die volle Breite.
 *
 * `display: block` macht aus dem Anker die zweite Zeile. `min-width: 0` bleibt
 * fuer den Fall, dass ein Projekt die Zeile wieder in einen Flex-Traeger legt:
 * Ein Flex-Kind schrumpft ohne diese Angabe nicht unter seine
 * Min-Content-Breite, und ein langer Titel schoebe die Zeile aus der
 * Lesespalte heraus.
 */
.gw-callout-related-text {
	color: inherit;
	display: block;
	margin-block: 0;
	min-width: 0;
}

/*
 * Die Fassung MIT Bild bleibt beschrieben, aber nicht mehr bestuhlt.
 *
 * `gw-callout-related-img-col`, `gw-callout-related-img` und
 * `gw-callout-related-cta` gibt der Worker weiterhin aus; ein Projekt, das
 * `g_callout_related_zeile` auf `false` setzt, bekommt sie auch zu sehen. Dann
 * gilt wieder, was hier steht: nebeneinander statt gestapelt.
 *
 * Nicht zu verwechseln mit `gw-related-*` und `gw-step-*`: Die stehen in der
 * Uebergabe unter „Nicht verwenden" — totes CSS im Plugin, das nirgends
 * ausgegeben wird. Dafuer wird hier ausdruecklich **keine** Regel angelegt.
 */
.gw-callout-related-card:has(> .gw-callout-related-img-col) {
	display: flex;
	align-items: flex-start;
	gap: var(--g-callout-related-gap, 0.7rem);
}

.gw-callout-related-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.gw-callout-related-cta {
	color: inherit;
	margin-block: var(--wp--preset--spacing--xs, 0.5rem) 0;
}

/* ------------------------------------------------------------------
 * Quellen, der Aufklapper
 * ------------------------------------------------------------------ */
/*
 * DERSELBE AUFKLAPPER WIE DER BEITRAGSVERLAUF und wie der FAQ der
 * Rubrikseite: Beschriftung links, Vorzeichen rechts, `+` zu und `−` offen.
 * Ein Umschalter, der in beiden Zustaenden gleich aussieht, zeigt keinen an —
 * und bis zum 2026-09-03 sah dieser in beiden gleich aus.
 *
 * DREI REGELN FUER EINEN MARKER, und keine reicht allein: `list-style` greift
 * in Firefox, `::-webkit-details-marker` in aelteren WebKit-Fassungen, und
 * `display: flex` nimmt dem `<summary>` den `list-item`-Modus, an dem
 * Chromium seinen haengt.
 */
.gw-sources-details > summary {
	cursor: pointer;
	font-weight: 700;

	/* Tap-Ziel, siehe FAQ. */
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-sources-summary-gap, 0.875rem);
	list-style: none;

	/*
	 * Die Linie des Plugins zuruecknehmen (`rgba(0,0,0,.08)`, eine feste
	 * Farbe und keine Rolle). Sie stand im geschlossenen Zustand als zweite
	 * Linie direkt unter der Oberlinie des Abschnitts — zwei Striche fuer
	 * einen Anfang. Getrennt wird oben, und die Eintraege bringen ihre
	 * eigenen Linien mit.
	 */
	border-block-end: 0;
}

.gw-sources-details > summary::-webkit-details-marker {
	display: none;
}

.gw-sources-details > summary::marker {
	content: "";
}

/*
 * Das Vorzeichen ist Zustandsanzeige und deshalb Dekoration. Die zweite
 * `content`-Zeile haengt einen leeren Alternativtext an, damit es nicht
 * vorgelesen wird; wo die Schreibweise unbekannt ist, faellt sie weg und die
 * erste bleibt stehen.
 */
.gw-sources-details > summary::after {
	content: "+";
	content: "+" / "";
	flex-shrink: 0;
	line-height: 1;
}

/* `−` ist U+2212 MINUS SIGN und nicht der Bindestrich: Der waere schmaler als
   das Plus und saesse auf einer anderen Hoehe. */
.gw-sources-details[open] > summary::after {
	content: "−";
	content: "−" / "";
}

/* ------------------------------------------------------------------
 * Die Vergleichstabelle — und der Grund, warum sie bisher nie scrollte
 *
 * BEFUND B18, gemessen am 2026-09-01. Der Entwurf setzt fuer die achtspaltige
 * Tabelle den seitlichen Bildlauf als **Normalfall**. Er griff nie.
 *
 * Der Worker schreibt `hasFixedLayout` in jede Vergleichstabelle
 * (`wp-goblin/includes/Content/BlockConverter.php:118`), also nicht nur die
 * Testdaten, sondern jeder echte Beitrag. Core macht daraus
 *
 *   .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100% }
 *
 * und `table-layout: fixed` verteilt die verfuegbare Breite auf die Spalten,
 * statt sie vom Inhalt bestimmen zu lassen. Die Tabelle kann die `<figure>`
 * damit **nie** ueberschreiten, das `overflow-x: auto` von `gw-table-scroll`
 * laeuft leer, und acht Spalten quetschen sich bei 320 px auf rund 35 px je
 * Spalte.
 *
 * `table-layout: auto` gibt die Breite dem Inhalt zurueck: Uebersteigt die
 * Mindestbreite den Traeger, waechst die Tabelle darueber hinaus und der
 * Bildlauf entsteht. `width: 100%` bleibt stehen — es ist eine Wunschbreite,
 * keine Grenze, und sorgt dafuer, dass eine schmale Tabelle den Traeger
 * weiterhin fuellt.
 *
 * Die Alternative waere gewesen, `hasFixedLayout` im Worker wegzulassen. Das
 * ist ein Eingriff in ein fremdes Repo fuer ein Darstellungsproblem, und es
 * wuerde bestehende Beitraege nicht heilen — deren Markup steht schon in der
 * Datenbank.
 * ------------------------------------------------------------------ */
.gw-table-scroll table.has-fixed-layout {
	table-layout: auto;
}

/*
 * `table-layout: auto` allein reicht NICHT, und das ist gemessen: Bei acht
 * Spalten in einem 443 px breiten Traeger blieb `scrollWidth === clientWidth`
 * — die Spalten schrumpfen auf ihre Min-Content-Breite (45 bis 66 px) und
 * passen dann eben doch. `auto` **erlaubt** den Ueberlauf, es **erzeugt** ihn
 * nicht.
 *
 * Den Grund liefert die Kopfzeile: Eine Spaltenbeschriftung wie „Bilder je
 * Sekunde" umbrach auf drei Zeilen und gab die Spalte damit auf 46 px frei.
 * Mit `nowrap` bestimmt die Beschriftung die Mindestbreite ihrer Spalte, die
 * Summe uebersteigt den Traeger, und der Bildlauf entsteht von selbst — ohne
 * eine erfundene Pixelzahl, die bei anderen Daten falsch waere.
 *
 * Nur `th`, nicht `td`: Messwerte duerfen umbrechen, Beschriftungen nicht.
 * Und nur innerhalb von `gw-table-scroll` — eine ungebundene `nowrap`-Regel
 * auf `th` traefe jede Tabelle im Projekt.
 */
.gw-table-scroll th {
	white-space: nowrap;
}

/*
 * UND DIE ZELLEN BRAUCHEN DIESELBE RUECKGABE. Gemessen am 2026-09-03: Die
 * achtspaltige Vergleichstabelle scrollte zwar (908 gegen 784 px), aber die
 * Spalten standen auf 61 bis 187 px und brachen die Woerter mitten durch; eine
 * Zeile war 265 px hoch.
 *
 * Der Grund steht im Core-Stylesheet neben `table-layout: fixed`:
 * `word-break: break-word` ist der Altwert fuer `overflow-wrap: anywhere` und
 * senkt die Min-Content-Breite einer Zelle auf EIN ZEICHEN. Damit hat keine
 * Spalte mehr eine Mindestbreite, und die Tabelle passt sich in jeden Traeger.
 * Es ist derselbe Fehler wie eine Zeile darueber, nur an `td` statt an `th`:
 * Die Breite kommt nicht vom Inhalt zurueck.
 *
 * `word-break: normal` gibt sie zurueck — ohne eine erfundene Pixelzahl, die
 * bei anderen Daten falsch waere. Das `overflow-wrap: break-word` aus
 * `base.css` bleibt als Auffangnetz: Ein Wort, das allein breiter ist als
 * seine Spalte, bricht weiterhin.
 */
.gw-table-scroll table.has-fixed-layout th,
.gw-table-scroll table.has-fixed-layout td {
	word-break: normal;
}

/*
 * Der Traeger. `overflow-x: auto` bringt das Plugin schon mit; hier steht, was
 * dazugehoert und dort fehlt: eine Tastaturbedienung. Ein scrollender Bereich
 * ohne `tabindex` ist mit der Tastatur nicht erreichbar — das Markup gehoert
 * dem Plugin, also bleibt nur, ihn fokussierbar zu machen, wo er es nicht ist.
 */
.gw-table-scroll {
	overflow-x: auto;

	/*
	 * Der Bildlaufbalken war der des Systems und damit das einzige Bauteil der
	 * Seite, das nicht aus diesem Theme kam.
	 *
	 * `scrollbar-width`/`scrollbar-color` und NICHT `::-webkit-scrollbar`:
	 * Die beiden Standardeigenschaften wirken in Firefox und seit Chrome 121
	 * auch dort, die `-webkit-`Fassung wirkt in Firefox nie. Wer nur die
	 * `-webkit-`Fassung schreibt, hat den Balken in genau der Haelfte der
	 * Browser gestaltet, in der er ihn nicht geprueft hat.
	 *
	 * Griff in `muted` — die Linien- und Deaktiviert-Rolle, die nie Text
	 * traegt und hier auch keinen traegt. Schiene in `base`.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--muted) var(--wp--preset--color--base);

	border-block-start: 2px solid var(--g-rule-strong, currentColor);
	border-block-end: 1px solid var(--g-rule-soft, var(--wp--preset--color--muted));
}

.gw-table-scroll table {
	color: var(--wp--preset--color--contrast);
}

/*
 * Die Zellen. `text-align: left` steht dabei, weil Core fuer `th` `center`
 * setzt und eine zentrierte Beschriftung ueber linksbuendigen Werten steht.
 */
.gw-table-scroll th,
.gw-table-scroll td {
	text-align: left;

	/*
	 * NUR WAAGERECHTE LINIEN. Core gibt jeder Zelle einen Rahmen ringsum
	 * (`.wp-block-table td, th { border: 1px solid }`), und daraus wird ein
	 * Karogitter. Der Entwurf trennt Zeilen und nicht Zellen: Senkrechte
	 * Linien behaupten, die Spalten seien Kaesten, und die Tabelle liest sich
	 * dann als Formular statt als Vergleich.
	 *
	 * SICHTBAR WAR DAS NUR IM BILD. Jeder gemessene Wert stimmte — Polster,
	 * Farben, Schrift, die haftende Spalte — und die Tabelle sah trotzdem
	 * falsch aus. `border-block-end` allein setzt eine Kante; es nimmt die
	 * drei anderen nicht weg.
	 */
	border: 0;
	border-block-end: 1px solid var(--g-rule-soft, var(--wp--preset--color--muted));
}

.gw-table-scroll th {
	padding: var(--g-table-head-pad-block, 0.75rem) var(--g-table-pad-inline, 1rem);
}

.gw-table-scroll td {
	padding: var(--g-table-cell-pad-block, 0.875rem) var(--g-table-pad-inline, 1rem);
}

/*
 * DIE ERSTE SPALTE BLEIBT STEHEN.
 *
 * Ohne sie ist eine achtspaltige Tabelle beim Wischen unlesbar: Ab der
 * vierten Spalte steht eine Zahl ohne die Zeile, zu der sie gehoert. Der
 * Hinweis „seitlich wischen" macht den Bildlauf auffindbar, nicht
 * verstaendlich.
 *
 * DREI ZEILEN, DIE ALLE DREI NOETIG SIND:
 *
 * - `position: sticky` allein tut NICHTS ohne `left`. Der Versatz ist die
 *   Bedingung, nicht die Feinheit.
 * - Die Flaeche ist Pflicht. Eine haftende Zelle ohne eigenen Grund ist
 *   durchsichtig, und die Spalten wandern sichtbar unter ihr durch.
 * - `z-index` hebt sie ueber die Zellen, die unter ihr durchlaufen.
 *
 * Die erste Spalte ist ausserdem die Zeilenbeschriftung: `nowrap` und
 * Halbfett, wie die Kopfzeile. Ihr linkes Polster faellt weg, damit sie auf
 * derselben Kante steht wie die Absaetze darueber.
 */
.gw-table-scroll th:first-child,
.gw-table-scroll td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: var(--wp--preset--color--base);
	white-space: nowrap;
	padding-inline-start: 0;
}

.gw-table-scroll th:first-child {
	z-index: 2;
}

/*
 * Halbfett nur an den ZELLEN der ersten Spalte, nicht an ihrer Kopfzelle.
 * GEMESSEN: Stand `font-weight: 700` an der gemeinsamen Regel, kam die
 * Kopfzelle mit 700 statt 800 heraus — `th:first-child` ist spezifischer als
 * das `th` des Skins und schlug die Auszeichnungsschrift der Kopfzeile. Eine
 * Zelle von acht sah anders aus als ihre sieben Nachbarn.
 */
.gw-table-scroll td:first-child {
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * DIE HERVORGEHOBENE ZEILE („Unsere Empfehlung")
 *
 * **DER VERTRAG SIEHT DAFUER HEUTE NICHTS VOR.** `wp-goblin` gibt eine
 * Tabellenzeile als flaches Feld von Zeichenketten aus, jede Zelle durch
 * `esc_html()` — es gibt weder ein Attribut noch eine Klasse je Zeile
 * (`ContentSchema::validateTable`, `BlockConverter::convertTable`). Auf den
 * Zellentext zu pruefen waere sprachgebunden und still falsch, sobald jemand
 * ihn umformuliert.
 *
 * Bis der Vertrag den Merker sendet, setzt ihn der Beitrag selbst.
 * `gw-table-row-featured` ist deshalb hier schon der Name, unter dem der
 * Worker ihn spaeter senden soll — ein zweiter Name waere ein zweiter Stand
 * derselben Entscheidung (BL80).
 *
 * **HIER STEHEN NUR MASSE.** Welche Farbe die Kante traegt und wie das
 * Abzeichen gesetzt ist, ist Marke und kommt ueber die drei Variablen von
 * aussen — ohne sie faellt die Hervorhebung unsichtbar aus und nicht falsch.
 * ------------------------------------------------------------------ */
.gw-table-row-featured > td,
.gw-table-scroll .gw-table-row-featured > td:first-child {
	background-color: var(--g-table-featured-fill, transparent);
}

/*
 * Die Kante links steht an der ersten Zelle und nicht an der Zeile: Ein
 * `<tr>` traegt bei `border-collapse: collapse` keine eigene Kante, die man
 * sehen wuerde. Das Polster nimmt sie mit auf, damit der Text nicht enger an
 * die Kante rueckt als in den uebrigen Zeilen.
 */
.gw-table-scroll .gw-table-row-featured > td:first-child {
	border-inline-start: var(--g-table-featured-edge-width, 4px) solid var(--g-table-featured-edge, transparent);
	padding-inline-start: var(--g-table-featured-pad, 0.75rem);
}

/*
 * Das Abzeichen steht UNTER dem Namen, nicht daneben: `display: block` in
 * einer Zelle mit `white-space: nowrap` — sonst stuenden Name und Abzeichen
 * in einer sehr breiten Zeile nebeneinander und die Spalte wuechse.
 */
.gw-table-featured-badge {
	display: block;
	margin-block-start: var(--g-table-featured-badge-shift, 3px);
}