/*
 * Setup-Bros · Child-Theme · skin.css
 *
 * Hier steht nur, was sich NICHT über `theme.json` ausdrücken lässt.
 *
 * Die Datei bleibt unter ~100 Zeilen. Wird sie länger, ist das kein Anlass,
 * die Grenze zu verschieben, sondern ein Hinweis: Dann steht hier Struktur,
 * und Struktur gehört nach `goblin-base`. Prüffrage jedes Mal — wäre die
 * Regel in einem zweiten Projekt mit anderer Marke auch richtig? Eine
 * `max-width`-Media-Query ist hier nicht zulässig.
 *
 * Die neun Rollen stehen in `theme.json` und werden hier nur gespiegelt, weil
 * Content-Plugin und Bauteile `--sb-*` lesen. Die vier Zusatzwerte `line`,
 * `fill`, `primary-text`, `accent-text` sind nach D6 ABGELEITET, nicht
 * angelegt — sonst wären es eine zehnte bis dreizehnte Rolle.
 *
 * @package setup-bros-theme
 */

:root {
  /* Die neun Rollen, Hellmodus. Keine zehnte. */
  --sb-base: #ECEAE4;
  --sb-surface: #FBFAF7;
  --sb-contrast: #1D1E1A;
  --sb-contrast-2: #53554C;
  --sb-muted: #979488;      /* nur Linien und Deaktiviertes, NIE Text */
  --sb-primary: #CF105F;
  --sb-accent: #058EB2;
  --sb-positive: #2E7D46;
  --sb-negative: #C41E30;

  /* Abgeleitet, D6. Ziel / gerechnet / Summenabweichung von 765:
     line #D8D4C9 → #D7D4CD, 5 · fill #E2DFD6 → #E1DFD8, 3 */
  --sb-line: color-mix(in srgb, var(--sb-muted) 25%, var(--sb-base));
  --sb-fill: color-mix(in srgb, var(--sb-muted) 13%, var(--sb-base));

  /* Textstufen: Pflicht für jede kleine Schrift auf base.
     #B00D51 → #B00E51, 1 · #046F8B → #046F8B, 0 (exakt) */
  --sb-primary-text: color-mix(in srgb, var(--sb-primary) 85%, black);
  --sb-accent-text: color-mix(in srgb, var(--sb-accent) 78%, black);

  /* Dieselbe Ableitung für `positive` und `negative`, seit die Seite
     „Über uns" die beiden als TEXT auf `base` führt („Was wir machen" /
     „Was wir nicht machen").

     GEMESSEN, NICHT GESCHÄTZT: `positive` #2E7D46 auf base ergibt 4,22:1 und
     fällt damit unter AA — der Entwurf malt es trotzdem dorthin. Die Textstufe
     #276A3C misst 5,43:1, `negative` #A71A29 misst 6,18:1. Keine zehnte Rolle,
     sondern die Textstufe einer vorhandenen, wie bei `primary`.

     D16 sagt „positive trägt Text nur auf surface". Das war die Aussage über
     den ROLLENWERT; mit der Textstufe ist die Messung besser als dort. Gehört
     dem Entscheider vorgelegt, nicht still umgedeutet. */
  --sb-positive-text: color-mix(in srgb, var(--sb-positive) 85%, black);
  --sb-negative-text: color-mix(in srgb, var(--sb-negative) 85%, black);
  --sb-on-dark: #FBFAF7;

  /* Form */
  --sb-bubble: 16px 16px 16px 4px;   /* sprechende Kästen, dauerhaft */
  --sb-radius-knopf: 12px;           /* Knöpfe im Ruhezustand */
  --sb-bubble-knopf: 12px 12px 12px 3px; /* Knöpfe bei :hover UND :active */
  --sb-radius-karte: 16px;
  --sb-radius-bild: 11px;

  /* Bewegung: eine Dauer, eine Kurve */
  --sb-dauer: 200ms;
  --sb-kurve: cubic-bezier(.2, .7, .3, 1);

  /* Maße */
  --sb-lese: 41rem;
  --sb-ausbruch: 75rem;
  --sb-sidebar: 18.5rem;    /* Spur, davon 4rem Abstand */
  --sb-kopf-versatz: 104px; /* Sprungversatz des Entwurfs. Angewandt im Parent
                               als `scroll-padding-top`, hier nur dokumentiert. */

  /* Nahtstellen des Parents. Beide stehen in `layout.css` mit `currentColor`
     als Rueckfall, damit die Metabox auch ohne Skin sichtbar bleibt. Hier
     bekommen sie ihre Rolle. Keine der beiden traegt Text, `muted` ist
     deshalb zulaessig — es ist genau die Linienrolle. Eine Haarlinie, weil
     der Content-Vertrag im Parent dieselbe benutzt: ein Beitrag, eine
     Haarlinienfarbe. */
  --g-rule-strong: var(--sb-contrast);
  --g-rule: var(--sb-muted);

  /* Die leise Linie der Zustandsseiten (404-Liste, Fusszeile der leeren
     Suche). Sie ist NICHT `muted`, sondern `line` — der Entwurf setzt sie
     dort heller als die Haarlinien des Beitrags. Eine dritte Stufe statt
     zweier Bauteil-Token, damit derselbe Wert eine Quelle hat. */
  --g-rule-soft: var(--sb-line);

  /* Masse aus dem Entwurf, die der Parent als Nahtstelle offenhaelt. Sie
     stehen HIER und nicht dort, weil der Parent keine Entwurfsmasse kennt —
     dieselbe Trennung wie bei den Farben. Jede hat im Parent einen
     Rueckfall, das Raster bleibt also auch ohne Skin benutzbar. */
  --g-post-grid-gap: 14px;   /* Kartenraster, Uebersichten.dc.html */
  --g-chip-gap: 8px;
  --g-chip-height: 40px;
  --g-chip-pad-block: 9px;
  --g-chip-pad-inline: 15px;
  --g-pagination-size: 44px;
  --g-pagination-gap: 8px;
  --g-pagination-pad-inline: 16px;
  --g-post-card-gap: 10px;   /* eine Spalte, ein Abstand */
  --g-chip-inner-gap: 8px;   /* auch der Abstand vor dem Pfeil in „Weiter" */
  --g-breadcrumb-gap: 8px;
  --g-breadcrumb-pad-top: 8px;
  --g-breadcrumb-pad-bottom: 16px;

  /* Die Bauteile des Content-Vertrags. Dieselbe Trennung wie oben: Der Parent
     kennt die Anatomie und haelt jede Zahl als Nahtstelle mit Rueckfall
     offen, die Masse des Entwurfs stehen hier.
     Beitragsseite.dc.html, Zeilen 333 bis 500. */
  --g-callout-pad-block: 18px;
  --g-callout-pad-inline: 20px;
  --g-callout-margin: 26px;

  /* `--g-callout-related-*` und nicht `--g-related-*`: Der zweite Name ist
     seit der Lesetipp-LISTE am Beitragsende vergeben (weiter unten, 14px).
     GEMESSEN: Der Abstand kam als 14 px heraus statt als 11 — ein fremder
     Wert, plausibel genug, um nicht aufzufallen. BL80. */
  --g-callout-related-gap: 11px;

  /* Polster und Form der BEITRAGSKARTE, damit es dieselbe Form ist und keine
     vierte: 12 px Polster, 1 px `line` als Kante (kommt aus `--g-rule-soft`),
     Bubble-Ecke dauerhaft. Weisung des Auftraggebers vom 2026-09-03; der
     Entwurf zeigt hier zwei Haarlinien ohne Flaeche, siehe
     `design/entwurf/gruppe-e-plan.md`. */
  --g-callout-related-pad-block: 12px;
  --g-callout-related-pad-inline: 12px;
  --g-callout-related-radius: var(--sb-bubble);
  --g-callout-related-margin: 26px;

  --g-procon-gap: 26px;
  --g-procon-pad-top: 20px;
  --g-procon-heading-gap: 9px;
  --g-procon-heading-end: 12px;
  --g-procon-list-gap: 10px;
  --g-procon-item-gap: 10px;
  --g-procon-item-pad: 10px;

  /* Quellenabschnitt: Der Aufklapper bringt seine 44 px Trefferflaeche selbst
     mit, unter der Oberlinie genuegen 8. */
  --g-sources-pad-top: 8px;

  --g-table-head-pad-block: 12px;
  --g-table-cell-pad-block: 14px;
  --g-table-pad-inline: 16px;

  /* 404. Der Entwurf laesst sie noch schmaler laufen als die Suche und gibt
     ihr ein eigenes Polster (24 oben, 64 unten) statt der Abstandsskala. */
  --g-404-width: 44rem;
  --g-404-pad-top: 24px;
  --g-404-pad-bottom: 64px;
  --g-404-search-width: 34rem;
  --g-404-title-start: 8px;
  --g-404-title-end: 14px;
  --g-404-text-width: 54ch;  /* Zeilenmass des Vorspanns */
  --g-404-text-end: 26px;
  --g-404-label-end: 12px;
  --g-404-list-end: 26px;

  /* Die Einzeilerliste (`g-oneline`). Sie steht an zwei Orten: auf der
     404-Seite und in der Seitenleiste des Beitrags. HIER die Werte der
     404-Seite, weil sie die erste war; die Seitenleiste stellt sie an
     `.g-recommend` um. Die Anatomie ist an beiden Orten dieselbe, nur
     Zeilenhoehe, Polster und Schriftgroesse sind es nicht. */
  --g-oneline-height: 56px;
  --g-oneline-pad: 15px;
  --g-oneline-gap: 14px;
  --sb-oneline-size: 16.5px;

  /* Die Seitenleiste der Beitragsseite. Werte aus `Beitragsseite.dc.html`,
     Zeilen 162 bis 190. Der Parent haelt sie als Nahtstelle offen. */
  --g-side-pad: 22px;        /* Blocktrennung, siehe unten */
  --g-side-author-start: 24px;
  --g-side-author-gap: 11px;
  --g-side-author-figure: 38px;
  --g-reviewed-side-start: 10px;
  --g-reviewed-side-gap: 8px;
  --g-toc-rail: 2px;
  --g-toc-item-pad-block: 7px;
  --g-toc-item-pad-inline: 12px;
  /* Das Zeichen des ausgezeichneten Eintrags haengt links im Innenabstand,
     damit der Titel an derselben Kante beginnt wie die acht anderen.

     ZEICHEN PLUS LUECKE ERGEBEN GENAU DIE 12 px DES INNENABSTANDS, und das
     ist keine huebsche Zahl, sondern eine Grenze: Die Seitenleiste schneidet
     ab, was links aus ihr herausragt (`overflow-y: auto` am Traeger, siehe
     `toolkit.css`). GEMESSEN am 2026-09-03: Mit 16 px Zeichen und 7 px Luecke
     ragte es 9 px hinaus und war zu einem Rest von 7 px beschnitten.

     GEMESSEN war es vorher 21 px (die 1,5em aus `base.css`) neben 14-px-Text
     — die groesste Form der ganzen Spalte, auf einem Eintrag, den Farbe und
     Gewicht schon auszeichnen. Weisung des Auftraggebers vom 2026-09-03. */
  --g-toc-icon-size: 12px;
  --g-toc-icon-gap: 0px;

  /* Die Kurzfassung: zwei Zeilen fest, damit der Kasten beim Scrollen nicht
     springt. Die Zahl steht hier, weil sie eine Abwaegung ist und keine
     Struktur — zwei Zeilen fassen in dieser Spalte rund 50 Zeichen, und
     laenger ist keiner der neun Abschnittstitel dieses Beitrags. */
  --g-toc-current-lines: 2;
  --g-toc-current-gap: 3px;

  /* Die Seitenleiste zeigt ihr Verzeichnis IMMER vollstaendig, auch wenn es
     dadurch unter dem Fensterrand endet. Weisung des Auftraggebers vom
     2026-09-03, ausdruecklich gegen die Abwaegung aus BL81: Ein Verzeichnis
     mit eigener Bildlaufleiste in einer Spalte, die selbst schon scrollt,
     hatte zwei Leisten uebereinander und keine davon war zu erkennen. Beide
     Nahtstellen auf `none`, sonst greift die jeweils andere Grenze. */
  --g-sidebar-max: none;
  --g-toc-list-max: none;

  /* Die Beitragsseite laeuft auf voller Breite. Die linke Rinne des Entwurfs
     faellt weg, die Seitenleiste beginnt an derselben Kante wie Kopfleiste,
     H1 und Kartenraster jeder anderen Seite. Weisung des Auftraggebers vom
     2026-09-03; die Lesespalte behaelt ihre 41 rem, der Ueberschuss sammelt
     sich rechts. Festgehalten in `design/entwurf/gruppe-e-plan.md`. */
  --g-article-edge: 0fr;

  /* Der leere Zustand der Suche: Das Feld traegt hier 20 unter sich statt 14. */
  --g-search-empty-field-gap: 20px;
  --g-search-empty-foot-pad: 18px;

  /* Leerer Zustand und leere Suche teilen sich Ueberschrift und Kleinlabel. */
  --g-empty-title-end: 8px;
  --g-empty-label-end: 12px;

  /* Suchergebnisseite. Der Entwurf laesst sie schmaler laufen als die
     uebrigen Uebersichten (52 statt 75 rem) und legt das Mass an den
     Traeger um den ganzen Suchbereich, nicht an das Feld. */
  --g-search-width: 52rem;
  --g-search-field-gap: 14px;
  --g-search-icon-gap: 12px;
  --g-search-pad-block: 14px;
  --g-search-pad-inline: 16px;
  --g-search-hits-gap: 12px;
  --g-search-hits-end: 28px;
  --g-search-hit-gap: 14px;
  --g-search-hit-media: 200px;
  --g-search-hit-kicker-gap: 5px;
  --g-search-hit-title-gap: 6px;
  --g-search-hit-excerpt-gap: 8px;

  /* Lesetipps. Seit dem 2026-09-03 sind es Beitragskarten im Kartenraster:
     Abstand und Spalten kommen aus `--g-post-grid-gap` (14px, oben), die
     Karte aus `.g-post-card`. Uebrig bleibt der Abstand unter dem Untertitel.
     `--g-related-gap`, `--g-related-item-gap`, `--g-related-media` und
     `--g-related-kicker-gap` sind mit der eigenen Zeile weggefallen. */
  --g-related-subheading-end: 20px;

  /* Rubrikseite. Alle Werte aus `Uebersichten.dc.html`, Zeilen 106 bis 215.
     Der Parent haelt sie als Nahtstelle offen und kennt keine davon. */
  --g-term-head-pad: 22px;
  --g-term-head-end: 22px;
  --g-term-kicker-gap: 11px;
  --g-term-kicker-end: 10px;
  --g-term-title-end: 12px;
  --g-term-intro-width: 60ch;
  --g-term-rec-pad-block: 20px;
  --g-term-rec-pad-inline: 22px;
  --g-term-rec-end: 28px;
  --g-term-rec-gap: 16px;
  --g-term-rec-label-end: 6px;
  --g-term-rec-title-end: 4px;
  --g-term-rec-button-gap: 9px;
  --g-term-rec-button-height: 50px;
  --g-term-rec-button-pad-block: 14px;
  --g-term-rec-button-pad-inline: 20px;
  /* Aufmacher der Startseite. Zeilenlaengen aus `Startseite.dc.html`,
     Zeilen 114 und 115. Der Parent haelt die Regel, kennt den Wert nicht. */
  --g-hero-title-width: 22ch;
  --g-hero-lead-width: 56ch;
  --g-topic-intro-width: 58ch;

  /* Lesefortschritt. Der Entwurf sagt 3 px; das Toolkit steht auf 0.25rem.
     Die beiden Farben stehen als Rollen im Parent, hier nur das Mass. */
  --g-progress-height: 3px;

  --g-term-sort-gap: 14px;
  --g-term-sort-inner-gap: 10px;
  --g-term-sort-end: 16px;
  --g-term-sort-active-pad: 2px;
  --g-term-sort-active: var(--sb-primary);
  --g-term-faq-pad-top: 22px;
  --g-term-faq-pad-bottom: 44px;
  --g-term-faq-heading-end: 14px;
  --g-term-faq-question-gap: 14px;
  --g-term-faq-question-height: 56px;
  --g-term-faq-question-pad-block: 16px;
  --g-term-faq-question-pad-inline: 2px;
  --g-term-faq-answer-pad: 30px;
  --g-term-faq-answer-end: 18px;
  --g-term-grid-end: 28px;
  --g-term-pagination-end: 36px;

  /* Autorenseite. Alle Werte aus `Uebersichten.dc.html`, Zeilen 218 bis 288.
     Der Parent haelt sie als Nahtstelle offen und kennt keine davon. */
  --g-author-head-gap-row: 20px;
  --g-author-head-gap-col: 26px;
  --g-author-head-pad-block: 24px;
  --g-author-head-pad-inline: 22px;
  --g-author-head-end: 28px;
  --g-author-figure-size: 88px;
  --g-author-kicker-end: 6px;
  --g-author-title-end: 10px;
  --g-author-bio-width: 58ch;
  --g-author-bio-end: 16px;
  --g-author-topics-end: 16px;
  --g-author-meta-gap-row: 8px;
  --g-author-meta-gap-col: 20px;
  --g-author-meta-inner-gap: 7px;
  --g-author-method-pad: 20px;
  --g-author-method-end: 32px;
  --g-author-method-heading-gap: 9px;
  --g-author-method-heading-end: 12px;
  --g-author-method-gap-row: 6px;
  --g-author-method-gap-col: 26px;
  --g-author-method-item-gap: 10px;
  --g-author-method-item-pad: 7px;
  --g-author-posts-heading-end: 16px;
  --g-author-grid-end: 44px;

  /* Die Pille. Die uebrigen Formwerte stehen als --sb-radius-*; dieser fehlte,
     und 999px stand hart im Chip-Block. */
  --sb-radius-pille: 999px;

  /* Übergabepunkte des Content-Plugins, siehe SPEC Abschnitt 4.5 */
  --gw-accent: var(--sb-accent);
  /* KEINE Flaeche. Die Kaesten-Regel vergibt sie an TL;DR, Callout, Kauf-Check
     und Autorenkasten — das Modul „So arbeiten wir" ist keiner der vier, und
     es steht auf der Beitragsseite unmittelbar ueber dem Autorenkasten, der
     eine hat. Zwei Flaechen auf einer Bildschirmhoehe waere eine zu viel. */
  --gw-module-bg: transparent;
  --gw-module-title-color: var(--sb-contrast);
  --gw-module-text-color: var(--sb-contrast-2);
}

/* Dunkelmodus als Umschaltung. Kein dunkler Grund als Grundzustand.
   Achtung: das Plugin-Base-CSS schaltet nur über prefers-color-scheme.
   Wer hier über eine Klasse schaltet, muss die gw-Regeln überschreiben
   oder das Base-Styling per gw-own-styles abschalten.

   DIE FUSSZEILE TEILT SICH DIESEN BLOCK. Sie ist keine zehnte Farbrolle,
   sondern dieselben neun auf umgekehrter Fläche: `base` und `contrast`
   tauschen die Plätze, `accent` wird aufgehellt, damit er auf Dunkel trägt.
   Genau das ist der Dunkelmodus. Eine zweite Werteliste wäre ein zweiter
   Stand derselben Entscheidung.

   Die eine Abweichung steht unten am `.g-footer` und ist dort begründet.

   DER METHODIKKASTEN DER STARTSEITE TEILT SICH DENSELBEN BLOCK, und aus
   demselben Grund: `#F2F0E9`, `#BEBCB2`, `#3FC1E0` und `#33352D` des Entwurfs
   sind keine neuen Namen, sondern `contrast`, `contrast-2`, `accent` und
   `line` auf umgekehrter Fläche. Er teilt sich mit der Fußzeile auch die eine
   Abweichung (`base` = `#1D1E1A`): Der Entwurf zeichnet beide Flächen in
   derselben Farbe.

   DAS WORTBILD DER KOPFLEISTE TEILT SICH DEN BLOCK EBENFALLS. Die Pille ist
   dunkel, `.g-wordmark` nimmt seine Farbe aus `contrast` — ohne die Umkehr
   stuende die Wortmarke in #1D1E1A auf #1D1E1A. Umgekehrt wird NUR das
   Wortbild und nicht die ganze Pille: Suchfeld und Menue haengen im DOM unter
   `.g-header__pill`, stehen aber sichtbar auf hellem Grund, und sie bekaemen
   die Umkehr sonst mit. */
[data-sb-modus="dunkel"],
.g-footer,
.g-method,
.g-header__wordmark {
  --sb-base: #191A16;
  --sb-surface: #23241F;
  --sb-contrast: #F2F0E9;
  --sb-contrast-2: #BEBCB2;
  --sb-muted: #6E7065;
  --sb-primary: #FF4F92;
  --sb-accent: #3FC1E0;
  --sb-positive: #5FBE7C;
  --sb-negative: #FF6B6B;
  --sb-on-dark: #191A16;

  /* Andere Prozente, gleiche Ableitung: mit 25/13 % traf die Mischung hier
     nicht (#2E302A statt #33352D, 13 · #242520 statt #2C2E27, 24). Mit
     31/22 % je 1 von 765 — Kontrast auf base 1,41 und 1,27 wie im Ziel. */
  --sb-line: color-mix(in srgb, var(--sb-muted) 31%, var(--sb-base));
  --sb-fill: color-mix(in srgb, var(--sb-muted) 22%, var(--sb-base));

  /* HIER GILT DIE ABLEITUNG NICHT. Helle Töne auf dunklem Grund brauchen
     keine Nachdunklung: 85 % von #FF4F92 ergäbe #D9437C und fiele von
     5,65:1 auf 4,20:1. Textstufe = Rollenwert. */
  --sb-primary-text: var(--sb-primary);
  --sb-accent-text: var(--sb-accent);
}

/* Wortumbruch und Silbentrennung standen hier global und sind seit dem
   2026-09-01 in `goblin-base/assets/css/base.css`. Struktur, kein Skin. */

/* Die Wortmarke darf nie umbrechen, auch nicht vor dem Laden der Schrift. */
.sb-wortmarke > * { white-space: nowrap; }

/* Sprungziele unter der fixierten Kopfleiste — ENTFERNT am 2026-09-02.
 *
 * Hier stand `[id] { scroll-margin-top: var(--sb-kopf-versatz); }`. Der Parent
 * setzt denselben Versatz aber schon als `scroll-padding-top` an der Wurzel,
 * und `layout.css` begründet dort ausdrücklich, warum an der Wurzel und nicht
 * an jedem Ziel. Beides zusammen ADDIERT sich.
 *
 * Gemessen: Ein Sprung aus dem Inhaltsverzeichnis landete 208 px tief statt
 * 104. Vor dem sanften Scrollen war das unsichtbar, weil ein harter Sprung
 * ohnehin irgendwo unter der Kopfleiste endet. Erst die Bewegung macht den
 * Überschuss sichtbar.
 *
 * Und es war zugleich ein Schichtenfehler: Ein Sprungversatz ist Struktur,
 * keine Marke. Der Token bleibt stehen, weil er die Zahl des Entwurfs
 * dokumentiert, wird aber nicht mehr angewandt. */

/* `.sb-eyebrow` und `.sb-visually-hidden` sind am 2026-09-04 weggefallen.
   Die Dachzeile entsteht seit dem zur Laufzeit im Toolkit (`Post_Kicker`) und
   heisst dort `g-post-kicker` — ein neutraler Name, der in ein geerbtes Repo
   gehoeren darf. Ihre Werte stehen weiter unten bei „Die Dachzeile der
   Ueberschrift". Zwei Klassen fuer dasselbe Bauteil waeren zwei Staende. */

/* ===================================================================
 * Auszeichnung — eine Ebene, ueberall dieselbe
 *
 * Bricolage 800, 11 bis 12px, `letter-spacing: .14em`, Versalien. Steht
 * einmal hier und nicht fuenfmal verstreut. Die Groessen folgen unten je
 * Bauteil, weil der Entwurf sie unterschiedlich vergibt.
 * =================================================================== */
.g-post-facts__label,
.g-reviewed__label,
.g-test-duration__label,
.g-reading-time__label,
.g-post-kicker,
.g-post-card__kicker,
.g-post-card__mark-text,
.g-search-hit__kicker,
.g-search-hit__mark-text,
.g-term-kicker,
.g-term-recommendation__label,
.g-author-kicker,
.g-search-suggest__label,
.g-empty__label,
.g-404__label,
.g-topic__kicker,
.g-footer__col-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ===================================================================
 * Die fuenf Label — D11
 *
 * `warning` → „Finger weg:" `negative` · `note`/`info` → „Real Talk:"
 * `accent-text` · `hint`/`tip` → „Bro-Tipp:" `primary-text`.
 *
 * D11 gilt, nicht die abweichende Zuordnungszeile in `bauteile.md`.
 *
 * WICHTIG: Der Labeltext kommt aus dem Inhalt („Info", „Tipp", „Warnung" im
 * Bestand), nicht aus dem CSS. Hier steht nur die Farbe. Die Bedeutung
 * haengt also nie allein an ihr — das Wort steht daneben.
 *
 * Ein Wert, zwei Traeger: Die Farbe faerbt Label UND Kante, damit ein
 * Callout genau eine Farbe traegt. Der klassenlose Fall ist Pflicht, der
 * Worker liefert mal `.gw-callout-label`, mal ein blankes `<strong>`.
 * =================================================================== */
.gw-callout {
  border-radius: var(--wp--custom--radius--bubble);

  /* Der Entwurf setzt den Callout eine halbe Stufe unter den Fliesstext (18
     px) und gibt ihm eine engere Zeile. Er ist eine Einrede, kein Absatz. */
  font-size: 16.5px;
  line-height: 1.65;
}

/* Das Label steht IM Satz und traegt die einzige Farbe des Bauteils. Die
   Leiste links, die dieselbe Farbe ein zweites Mal zeigte, ist weg. */
/* Drei Selektoren, und jeder faengt einen Fall: ohne Zeichen, mit Zeichen
   (dann liegt der Satz eine Ebene tiefer) und der Fall mit Klasse. Der letzte
   braucht `.gw-callout` davor, weil das Plugin ueber `.gw-callout-info strong`
   faerbt und ein blankes `.gw-callout-label` schlagen wuerde. Der Grund steht
   ausfuehrlich in `content-contract.css`. */
.gw-callout > strong:first-child,
.gw-callout .g-callout-mark > strong,
.gw-callout .gw-callout-label {
  color: var(--sb-callout, var(--sb-contrast));
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
}

/* Das Zeichen traegt die Farbe des Labels. EINE Farbe je Bauteil, an einer
   Stelle gesetzt: `--sb-callout` faerbt beide.

   Seit dem 2026-09-03 steht es nicht mehr direkt im Absatz, sondern in der
   Zeichenspalte `g-callout-mark` — deshalb kein `>` mehr. Ein Kindselektor,
   der eine Ebene zu hoch zeigt, faellt lautlos aus, und die Farbe kaeme dann
   aus dem Plugin. */
.gw-callout .g-callout-icon {
  color: var(--sb-callout, var(--sb-contrast));
}

.gw-callout-warning { --sb-callout: var(--sb-negative); }      /* Finger weg */
.gw-callout-info,
.gw-callout-note    { --sb-callout: var(--sb-accent-text); }   /* Real Talk  */
.gw-callout-tip,
.gw-callout-hint    { --sb-callout: var(--sb-primary-text); }  /* Bro-Tipp   */

/* ===================================================================
 * Der Lesetipp — ein Kasten in der Form der Beitragskarte
 *
 * GEAENDERT am 2026-09-03 auf Weisung des Auftraggebers. Hier stand eine
 * blosse Zeile mit zwei Haarlinien, wie der Entwurf sie zeichnet, und die
 * Begruendung dafuer stand an dieser Stelle: Die Ecke gehoert Kaesten, die
 * sprechen, und der Lesetipp verweist nur.
 *
 * Der Auftraggeber hat die Karten-Form gewaehlt. Sie ist deshalb genau die
 * der Beitragskarte und keine vierte: 12 px Polster, 1 px `line`, Bubble-Ecke
 * — dieselben drei Werte, ueber dieselben Nahtstellen. Was er wirklich
 * beanstandet hat, war das fehlende Polster: Das Zeichen klebte mit 0 px an
 * der Kante.
 *
 * Festgehalten in `design/entwurf/gruppe-e-plan.md`.
 *
 * Anordnung, Kante und Radius stehen im Parent. Hier Groesse und Farbe.
 * =================================================================== */
.gw-callout-related-card {
  font-size: 15px;
}

/* Das Label ist Beschriftung, nicht Marke: `contrast-2`, nicht `accent`. Der
   Entwurf faerbt in dieser Zeile genau ein Element, und das ist das Ziel. */
.gw-callout-related-label {
  color: var(--sb-contrast-2);
}

/* Das Zeichen der Zeile steht in `accent-text` und nicht in der Farbe des
   Ziels: Der Entwurf setzt hier #046F8B. Es ist das Zeichen des Bauteils,
   nicht des Verweises. */
.g-callout-related-icon {
  color: var(--sb-accent-text);
}

/* Der Titel IST das Ziel. Unterstrichen, weil ein Link im Fliesstext sich
   nicht allein ueber Farbe zu erkennen geben darf. */
.gw-callout-related-text {
  color: var(--sb-primary-text);
  font-weight: 600;
  text-decoration: underline;
}

/* ===================================================================
 * Vorteile und Nachteile — Farbe, keine Flaeche
 *
 * Der gruen beziehungsweise rot gefuellte Kasten ist im Parent
 * zurueckgenommen. Was bleibt, ist EINE Farbe je Spalte, und sie sitzt an
 * zwei Stellen, die zusammengehoeren: an der Ueberschrift und an ihrem
 * Zeichen. Die Punkte selbst stehen in `contrast` — sonst haette die Seite
 * zwei ganze Spalten Farbtext.
 *
 * WARUM DIE TEXTSTUFE UND NICHT DER ROLLENWERT. Der Entwurf malt „Vorteile"
 * in `#2E7D46`. GEMESSEN auf `base`: 4,22:1 — unter AA, und 17 px Halbfett
 * ist kein grosser Text (der beginnt bei 18,66 px). Die Textstufe `#276A3C`
 * misst 5,43:1, `#A71A29` misst 6,18:1. Dieselbe Ableitung wie bei
 * `primary`, keine zehnte Rolle. Das ist die Entscheidung, die auf der Seite
 * „Ueber uns" schon so getroffen wurde.
 * =================================================================== */
.gw-procon-pro { --g-procon-color: var(--sb-positive-text); }
.gw-procon-con { --g-procon-color: var(--sb-negative-text); }

.gw-procon-heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 17px;
  color: var(--g-procon-color, var(--sb-contrast));
}

/* Das Plugin faerbt das `<strong>` in der Ueberschrift selbst. Ohne diese
   Zeile bleibt es bei seiner Farbe, waehrend die Ueberschrift schon stimmt. */
.gw-procon-heading > strong {
  color: inherit;
  font-weight: inherit;
}

.gw-procon-list {
  font-size: 15.5px;
  line-height: 1.6;
}

/* ===================================================================
 * Die Vergleichstabelle
 *
 * Anatomie, Bildlauf und die haftende erste Spalte stehen im Parent. Hier
 * die Auszeichnungsschrift der Kopfzeile und die Groesse der Werte.
 *
 * Die Kopfzeile ist die kleinste Auszeichnungsebene der Skala: 12 px,
 * Versalien, gesperrt, `contrast-2`. GEMESSEN: 6,30:1 auf `base`.
 * =================================================================== */
.gw-table-scroll table {
  font-size: 14px;
}

.gw-table-scroll th {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

.gw-table-scroll td {
  line-height: 1.5;
}

/* Die hervorgehobene Zeile. Masse und Anordnung stehen im Parent; hier die
   drei Werte, die der Entwurf faerbt: Flaeche `surface`, Kante `primary`,
   Abzeichen `primary-text`.

   `primary` traegt hier KEINEN Text — es ist eine 4 px breite Kante. Das
   Abzeichen daneben steht in der Textstufe #B00D51, wie ueberall, wo Magenta
   ein Wort traegt. */
.gw-table-row-featured {
  --g-table-featured-fill: var(--sb-surface);
  --g-table-featured-edge: var(--sb-primary);
}

.gw-table-featured-badge {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-primary-text);
}

/* ===================================================================
 * TL;DR — „Kurz gesagt:", der einzige Kasten der Kopfzone
 *
 * Kaesten-Regel: Flaeche bekommen nur TL;DR, Callouts, Kauf-Check und
 * Autorenkasten. Radius und Polster stehen im Entwurf als Werte des
 * Bauteils; Anordnung nicht — die bringt die Kopfzone mit.
 * =================================================================== */
.g-tldr {
  background-color: var(--sb-surface);
  border-radius: var(--wp--custom--radius--bubble);
  padding: 22px;
}

/* „Kurz gesagt:" steht IM Absatz und ist so gross wie der Text, den es
   anfuehrt. Es war 12 px ueber 18 px Text — halb so gross wie das, was es
   ueberschrieb. Das Markup kommt seit dem 2026-09-02 als `<strong>` aus dem
   Toolkit; hier stehen nur Schrift und Groesse. */
.g-tldr__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--sb-contrast);
}

.g-tldr__text { margin: 0; }

/* ===================================================================
 * Metabox der Beitragsseite
 *
 * Struktur steht im Parent. Hier nur Groesse und Farbe. Die beiden Linien
 * haengen an `--g-rule-strong` und `--g-rule` weiter oben.
 * =================================================================== */
.g-post-facts__label,
.g-reviewed__label,
.g-test-duration__label,
.g-reading-time__label {
  font-size: 11px;
  color: var(--sb-contrast-2);
}

.g-post-facts__value,
.g-reading-time__value,
.g-test-duration__value {
  font-size: 14.5px;
  color: var(--sb-contrast);
}

/* Die Zeile selbst traegt die Groesse ihrer Werte. Ohne das erbt der Absatz
   die 18px des Fliesstextes, und die Zeile wird 47 statt 44px hoch —
   gemessen am 2026-09-03, sichtbar nur an der Hoehe. */
.g-reviewed__line,
.g-test-duration__line {
  font-size: 14.5px;
}

/* Das Zeilenmass der Metabox ist enger als das des Fliesstextes, und das ist
   die Bedingung fuer die 44px des Entwurfs: Der Parent gibt der Zeile das
   Polster 10/0, die Zeilenhoehe 1.8 des Fliesstextes machte daraus 26+20=46px.
   Eine Datenliste braucht kein Lesemass — sie hat je Zeile eine Zeile.
   Gemessen am 2026-09-03: 46px vorher, 44px nachher. */
.g-post-facts__row {
  line-height: 1.35;
}

/* Das Pruefdatum in der Akzent-Textfarbe. Das Zeichen ist kein Zierat: Ohne
   es haengt „geprueft" allein an der Farbe. Die Bezeichnung „Geprueft" steht
   links daneben und traegt die Bedeutung im Klartext. */
.g-reviewed__date {
  color: var(--sb-accent-text);
}

.g-reviewed__date::before {
  content: "\21BB\00A0";
}

/* ===================================================================
 * Beitragskarte — ein Bauteil, ueberall gleich
 *
 * Ruhe: Rahmen `line`, Radius 16px, kein Grund. Hover/Active/Focus: die
 * Bubble-Ecke, Rahmen `accent`, Flaeche `surface`. Die Ecke ist der
 * nicht-farbige Traeger des Zustands — er haengt nie allein an der Farbe.
 *
 * `:focus-within` gehoert dazu, sonst sieht die Tastatur den Zustand nie;
 * `:active` fuer den Finger.
 * =================================================================== */
.g-post-card {
  padding: 12px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-karte);
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    border-color var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve);
}

.g-post-card:hover,
.g-post-card:focus-within,
.g-post-card:active {
  border-radius: var(--sb-bubble);
  border-color: var(--sb-accent);
  background-color: var(--sb-surface);
}

.g-post-card__media img {
  border-radius: var(--sb-radius-bild);

  /* Der Entwurf legt `fill` hinter das Bild. Sichtbar wird es genau zweimal:
     waehrend das Bild laedt, und bei einem Bild mit Transparenz. Beides ohne
     Regel ein weisses Loch auf olivsandigem Grund. */
  background-color: var(--sb-fill);
}

/*
 * Die drei Kartengroessen des Entwurfs. Sie standen bis zum 2026-09-01
 * ausserhalb der Reichweite: Das Muster im Parent setzte Preset-Klassen, und
 * Core druckt die mit `!important`. Seit die Attribute dort weg sind, gilt
 * hier die gewoehnliche Kaskade.
 */
/*
 * KICKER UND TITEL TRAGEN IHRE FARBE ZWEIMAL, UND DAS IST KEINE DOPPELUNG.
 *
 * Gemessen am 2026-09-02: `core/post-terms` und `core/post-title` setzen die
 * `className` am WRAPPER, der Link steckt darin:
 *
 *   <div class="taxonomy-category g-post-card__kicker"><a>Tests</a></div>
 *   <h2 class="g-post-card__title"><a>Titel</a></h2>
 *
 * Eine Regel am Wrapper wird deshalb vom `<a>` ueberschrieben: Cores
 * `:root :where(a:where(:not(.wp-element-button)))` sitzt direkt am Link und
 * gewinnt gegen jede geerbte Farbe. Folge war, dass **jede** Karte den Titel
 * und den Rubrik-Kicker magenta und unterstrichen zeigte — 40 Karten allein
 * auf der Startseite, und am Markup war nichts zu sehen: die Klassen standen
 * richtig da.
 *
 * Der Link braucht die Regel also selbst. `.g-post-card__title a` liegt bei
 * 0,1,1 und schlaegt Cores 0,1,0. Die Farbe am Wrapper bleibt stehen, damit
 * ein Kicker ohne Link (Custom Loop) nicht plotzlich schwarz ist.
 */
.g-post-card__kicker,
.g-post-card__kicker a {
  color: var(--sb-accent-text);
}

.g-post-card__kicker {
  font-size: 11.5px;

  /* Der gemeinsame Auszeichnungsblock oben setzt 0,14em. Der Entwurf gibt
     dem Kartenkicker 0,12em — er steht kleiner als die uebrigen Label. */
  letter-spacing: 0.12em;
  padding-inline: 4px;
}

.g-post-card__title,
.g-post-card__title a {
  color: var(--sb-contrast);
}

.g-post-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  padding-inline: 4px;
}

/* Beide Links tragen im Entwurf keine Unterstreichung: Die Karte IST der
   Link, die Teile darin sind Text. */
.g-post-card__kicker a,
.g-post-card__title a {
  text-decoration: none;
}

.g-post-card__meta {
  color: var(--sb-contrast-2);
}

/*
 * Die Metazeile der Karte. Hier stand bis zum 2026-09-01 ein `!important`,
 * weil das Muster im Parent `textColor="muted"` setzte und Core Preset-Farben
 * mit `!important` druckt — `muted` traegt aber nie Text (2,53:1 auf `base`).
 * Das `textColor` ist inzwischen aus dem Muster entfernt, der Flicken damit
 * ersatzlos weg. Jetzt reicht eine gewoehnliche Regel.
 */
.g-post-card__meta {
  color: var(--sb-contrast-2);
  font-size: 13px;
  padding: 0 4px 4px;

  /* Der Trenner traegt den Abstand, nicht `gap`. Sonst stehen Abstand UND
     Zeichen nebeneinander und die Zeile liest sich „26.08.2026  ·  Vik". */
  gap: 0;
}

/*
 * „13.07.2026 · Vik" — der Mittelpunkt kommt aus dem CSS.
 *
 * Core hat keinen Trenner-Block, und ein Zeichen ohne Bedeutung gehoert nicht
 * ins Markup: Ein Screenreader liest es sonst mit. Als `::before` am zweiten
 * Kind ist es dekorativ und bleibt der Vorlesestimme erspart.
 *
 * Der Selektor greift auf JEDES nicht-erste Kind, damit die Zeile auch mit
 * einem dritten Element (Lesezeit) noch stimmt.
 */
.g-post-card__meta > * + *::before {
  content: "·";
  margin-inline-end: 0.375rem;
}

/* -------------------------------------------------------------------
 * Die redaktionelle Kennzeichnung der bildlosen Karte
 *
 * 13 von 25 Beitraegen haben kein Beitragsbild — das ist hier der Normalfall
 * und darf nicht wie ein Fehler aussehen. Deshalb keine leere Flaeche und
 * kein Platzhaltersymbol, sondern ein gesetztes Rubrikschild: Flaeche `fill`,
 * derselbe Bildradius wie beim echten Bild, die Rubrik in der Auszeichnung
 * und darunter eine 2px-Linie in derselben Farbe.
 *
 * Die Groesse haengt an `cqi` und nicht am Viewport: Die Karte ist im Parent
 * ein Container (`container-name: card`), und dasselbe Schild steht in der
 * schmalen Seitenleiste wie in der breiten Karte.
 * ------------------------------------------------------------------- */
.g-post-card__mark {
  background-color: var(--sb-fill);
  border-radius: var(--sb-radius-bild);
  padding: 12px;
}

.g-post-card__mark-text {
  font-size: clamp(13px, 4.4cqi, 20px);
  line-height: 1.15;
  color: var(--sb-contrast);
  border-block-end: 2px solid currentColor;
  padding-block-end: 5px;
}

/* ===================================================================
 * Knoepfe
 *
 * Ruhe rund (12px), bei :hover UND :active die Ecke auf 3px in 200ms.
 * `:active` ist Pflicht — wer tippt statt zeigt, sieht sonst nichts.
 * =================================================================== */
.wp-element-button,
.wp-block-button__link,
.g-load-more__button {
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve),
    border-color var(--sb-dauer) var(--sb-kurve);
}

.wp-element-button:hover,
.wp-element-button:active,
.wp-block-button__link:hover,
.wp-block-button__link:active,
.g-load-more__button:hover,
.g-load-more__button:active {
  border-radius: var(--wp--custom--radius--button-pulled);
}

/* Zweitknopf: kein Grund, 2px Kante, bei Hover und Active Flaeche `fill`. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--sb-contrast);
  color: var(--sb-contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:active {
  background-color: var(--sb-fill);
  color: var(--sb-contrast);
}

/*
 * „Mehr laden" ist ein Zweitknopf, kein Textlink. Das Toolkit gibt ihn
 * ausdruecklich ungestaltet aus („wie ein Link aussieht, entscheidet das
 * Theme"). Die Mindesthoehe von 48px kommt aus Polster und Kante, nicht aus
 * einer zweiten Zahl: 15px mal 1,55 plus zweimal 12px plus zweimal 2px.
 */
.g-load-more__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: transparent;
  border: 2px solid var(--sb-contrast);
  border-radius: var(--sb-radius-knopf);
  color: var(--sb-contrast);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
}

.g-load-more__button:hover,
.g-load-more__button:active {
  background-color: var(--sb-fill);
  border-radius: var(--sb-bubble-knopf);
  color: var(--sb-contrast);
}

/* -------------------------------------------------------------------
 * Das Inhaltsverzeichnis
 *
 * Struktur und Verhalten liegen im Toolkit, hier steht nur das Aussehen.
 * Die Klassen und ihre Werte stammen aus `design/entwurf/bauteile.md`,
 * Abschnitt Inhaltsverzeichnis.
 * ------------------------------------------------------------------- */

/*
 * Die Beschriftung „Inhalt". Sie ist ein `h2` und braucht deshalb eine eigene
 * Regel: Die Ueberschriftenskala der `theme.json` gilt fuer die Lesespalte und
 * saehe in einer 232 px schmalen Seitenleiste aus wie ein zweiter Seitentitel.
 */
.g-toc__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
  margin: 0 0 12px;
}

/*
 * Die Kurzfassung beim Lesen: der aktuelle Abschnitt und seine Position.
 *
 * Das Toolkit erzeugt beide Teile und regelt nur ihr Verhalten (kuerzen,
 * nicht kuerzen). Wie sie AUSSEHEN, stand bis zum 2026-09-03 nirgends: Der
 * Titel erbte die 18px des Fliesstextes, der Zaehler ebenso, und weil der
 * Zaehler nie kuerzt, blieben dem Titel von 232px Spalte noch 126 — er wurde
 * mitten im Wort abgeschnitten, obwohl daneben eine Nebenangabe stand.
 *
 * Jetzt traegt der Titel das Mass der Verzeichniseintraege (14px) und der
 * Zaehler das der Kleinlabel dieses Entwurfs (11px, gesperrt, `contrast-2`) —
 * dasselbe Vokabular wie „VON" und „LESEZEIT" in der Metabox. Gemessen
 * danach: Zaehler 44px statt 69, Titel 174px statt 126.
 *
 * GEAENDERT am 2026-09-03: Beide stehen jetzt UNTEREINANDER, der Titel ueber
 * zwei feste Zeilen. Anordnung und Zeilenzahl regelt das Toolkit; hier fiel
 * nur `align-items: baseline` weg, das eine gemeinsame Schriftlinie fuer zwei
 * Teile setzte, die keine Zeile mehr teilen.
 */
.g-toc__current {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sb-contrast);
}

.g-toc__current-text {
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--sb-contrast);
}

.g-toc__current-count {
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

/*
 * Die Eintraege. Ruhig in `contrast-2`; die Schiene links haelt der Parent
 * durchsichtig frei (`toolkit.css`), damit beim Wechsel nichts ruckt.
 */
.g-toc__link {
  /* ZWEI NAHTSTELLEN STATT ZWEIER REGELN. Die Box im Textfluss steht in der
     Lesespalte und braucht Farbe und Groesse des Fliesstextes. Als eigene
     Regel `.g-toc__list--inline .g-toc__link` haette sie zwei Klassen und
     schluege damit `.is-active` und `--marked` - der aktive Abschnitt der Box
     verlor am 2026-09-03 genau so seine Farbe, gefangen von check-render. */
  color: var(--g-toc-link-color, var(--sb-contrast-2));
  font-size: var(--g-toc-link-size, 14px);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--sb-dauer) var(--sb-kurve);
}

/*
 * Der aktive Abschnitt. Er traegt DREI Merkmale, nicht nur eine Farbe:
 * Kante, Farbe und Gewicht. Das ist die Projektregel "nie Kontext allein
 * ueber Farbe" — wer Farben nicht unterscheidet, sieht die Kante und das
 * fettere Wort.
 *
 * GEAENDERT am 2026-09-03: Hier stand `padding-inline-start: 0.5rem` und die
 * Kante als vollstaendige `border-inline-start`-Kurzschreibweise. Beides
 * zusammen verschob den Text beim Wechsel des Abschnitts um 2 px zur Seite und
 * beim Polster um weitere 8 — bei jedem Scrollen durch das Verzeichnis lief
 * eine Zeile hin und her. Jetzt faerbt der aktive Zustand nur noch eine Kante
 * ein, die ohnehin schon da ist.
 */
.g-toc__link.is-active {
  border-inline-start-color: var(--sb-accent);
  color: var(--sb-accent-text);
  font-weight: 700;
}

/*
 * Der ausgezeichnete Eintrag — heute der Kauf-Check (E2-6). `primary` traegt
 * hier TEXT, also die dunklere Textfassung `#B00D51` und nicht die Marke
 * selbst; die Regel dazu steht oben bei den Rollen. Zeichen und Gewicht
 * stehen daneben, damit die Auszeichnung nicht allein an der Farbe haengt.
 */
.g-toc__link--marked {
  color: var(--sb-primary-text);
  font-weight: 700;
}

/*
 * GEAENDERT am 2026-09-03 auf Weisung: Sein Zeichen steht jetzt genau dort, wo
 * die uebrigen Eintraege ihre Schiene zeigen. Beides an einem Ort waeren zwei
 * Kanten mit derselben Aussage, also traegt dieser Eintrag KEINE Schiene — und
 * sagt seinen Zustand ueber die Farbe: magenta im Ruhezustand, im aktiven
 * Abschnitt dasselbe Blau wie alle anderen.
 *
 * Das Zeichen erbt `currentColor`, wechselt also mit. Und die Auszeichnung
 * haengt weiter nicht allein an der Farbe: Gewicht 700 und das Zeichen selbst
 * bleiben in beiden Zustaenden.
 */
.g-toc__link--marked.is-active {
  border-inline-start-color: transparent;
  color: var(--sb-accent-text);
}

/* -------------------------------------------------------------------
 * Das Verzeichnis im Textfluss — die Fassung fuer das Telefon
 *
 * Werte aus `Beitragsseite.dc.html`, Zeilen 298 bis 313. Sie ist unterhalb
 * von 992 px das EINZIGE Verzeichnis: Die Seitenleiste stapelt sich dort
 * hinter den Artikel und ist ausgeblendet, die schwebende Leiste erscheint
 * erst, wenn diese Box nach oben weggescrollt ist. Ab 992 px nimmt das
 * Toolkit sie zurueck (`Toc::breakpoint_css()`), weil die Spalte uebernimmt.
 *
 * ZWEI HAARLINIEN UND SONST KEINE FLAECHE. Der Entwurf gibt ihr Ober- und
 * Unterlinie, keinen Kasten: Die Kaesten-Regel zaehlt TL;DR, Callout,
 * Kauf-Check und Autorenkasten auf, und ein fuenfter Kasten direkt ueber dem
 * TL;DR waere zwei Flaechen uebereinander auf derselben Bildschirmhoehe.
 * ------------------------------------------------------------------- */
/*
 * DER ABSTAND STEHT AM ANKER UND NICHT AM KASTEN, und das ist keine Vorliebe.
 * Core setzt an erstem und letztem Kind einer Blockgruppe
 * `margin-block-start/end: 0` — mit `.wp-block-group.is-layout-flow > :first-child`,
 * also hoeherer Spezifitaet als eine Klasse. Die Box ist beides, erstes UND
 * letztes Kind ihres Ankers; ihre eigenen 26 px kamen im Browser als 0 an.
 * GEMESSEN am 2026-09-03: kein Abstand ueber der Oberlinie.
 *
 * Oben ein Polster (Core nimmt Polster nicht weg), unten ein Aussenabstand —
 * der Anker ist nicht letztes Kind der Lesespalte, dort greift er. Die 26 px
 * am Kasten bleiben stehen: Sie greifen, wenn das Verzeichnis ohne Anker
 * direkt ueber dem Beitragstext steht (`inline_position: content`).
 */
.g-toc-inline:not(:empty) {
  padding-block-start: 26px;
  margin-block-end: 26px;
}

.g-toc__details {
  margin-block: 26px;
  border-block: 1px solid var(--sb-line);
  padding-block: 4px;

  /* Die Eintraege stehen hier in der Lesespalte, nicht in 232 px Seitenleiste:
     keine Schiene, kaum Einzug, groessere Zeile. Das Zeichen des
     ausgezeichneten Eintrags steht im Fluss vor dem Titel — der Zug nach links
     gilt nur in der Spalte (`toolkit.css`). */
  --g-toc-rail: 0px;
  --g-toc-item-pad-inline: 2px;
  --g-toc-item-pad-block: 11px;
  --g-toc-icon-size: 16px;
  --g-toc-icon-gap: 8px;
  --g-toc-link-color: var(--sb-contrast);
  --g-toc-link-size: 15.5px;
}

/* Die aufgeklappte Liste der schwebenden Leiste steht ebenfalls ueber die
   ganze Breite und nicht in der Spalte: dieselben Masse. */
.g-toc__nav--mobile {
  --g-toc-rail: 0px;
  --g-toc-item-pad-inline: 2px;
  --g-toc-item-pad-block: 11px;
  --g-toc-icon-size: 16px;
  --g-toc-icon-gap: 8px;
  --g-toc-link-color: var(--sb-contrast);
  --g-toc-link-size: 15.5px;
}

.g-toc__summary {
  padding: 14px 2px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-contrast);
}

/*
 * Das Zeichen am Aufklapper ist ein Winkel aus zwei Kanten, kein Wort und kein
 * Ersatz fuer eines: Daneben steht „Inhalt · 9 Abschnitte" ausgeschrieben.
 * Es dreht sich beim Aufklappen, damit der Zustand nicht allein an der Farbe
 * haengt — dieselbe Regel wie beim aktiven Verzeichniseintrag.
 */
.g-toc__summary::after,
.g-toc-bar__toggle-icon {
  content: "";
  display: block;
  flex: 0 0 auto;
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 2.1px solid var(--sb-accent-text);
  border-block-end: 2.1px solid var(--sb-accent-text);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--sb-dauer) var(--sb-kurve);
}

.g-toc__details[open] .g-toc__summary::after,
.g-toc-mobile.is-open .g-toc-bar__toggle-icon {
  transform: translateY(2px) rotate(-135deg);
}

/* Der Knopf der Leiste hat nur dieses Zeichen; ohne Zentrierung staende der
   Winkel in der linken oberen Ecke seiner 40 px. */
.g-toc-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-toc__nav--inline {
  padding-block-end: 14px;
}

/*
 * Statt der Schiene links eine Haarlinie oben — dieselbe Trennung wie zwischen
 * zwei Zeilen einer Tabelle. Farbe und Groesse kommen ueber die beiden
 * Nahtstellen oben, damit diese Regel den aktiven Eintrag nicht ueberstimmt.
 */
.g-toc__list--inline .g-toc__link {
  border-block-start: 1px solid var(--sb-fill);
}

/*
 * Die mobile Leiste.
 *
 * KEIN `display` HIER. Das Toolkit setzt es hinter `:not([hidden])`, und eine
 * unbedingte Regel an dieser Stelle wuerde das `hidden`-Attribut aushebeln —
 * die Leiste stuende dann von der ersten Zeile an da. `skin.css` laedt spaeter
 * als `toolkit.css`, der Fehler waere also unvermeidbar.
 */
.g-toc-mobile:not([hidden]) {
  min-block-size: 48px;
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-line);

  /* Werte aus `Beitragsseite.dc.html`, Zeile 131. Die Leiste SPRICHT — sie
     sagt, wo der Leser gerade steht —, deshalb traegt sie die Bubble-Ecke und
     nicht die ruhige Karte. Der Schatten haelt sie ueber dem Text, unter dem
     sie schwebt. */
  border-radius: var(--sb-bubble);
  padding: 0 6px 0 16px;
  gap: 10px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--sb-contrast) 14%, transparent);
}

/* Das Zeichen vor dem Abschnittstitel liefert das Toolkit als leere Huelle
   fuer das Theme. Solange dort keines steht, darf es auch keine Luecke
   kosten. Siehe Bericht: der Zeichensatz kommt ueber `<use>` und ist aus CSS
   nicht erreichbar. */
.g-toc-bar__icon:empty {
  display: none;
}

.g-toc-bar__text {
  font-family: var(--wp--preset--font-family--body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sb-contrast);
}

.g-toc-bar__toggle {
  min-block-size: 40px;
  min-inline-size: 40px;
  color: var(--sb-contrast);
  background: none;
  /* Der Entwurf gibt ihm eine Kante (Zeile 134): Ohne sie ist er auf der
     hellen Leiste nur ein Winkel im Nichts und als Knopf nicht zu erkennen. */
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-knopf);
  transition: border-radius var(--sb-dauer) var(--sb-kurve);
}

/* Wie jeder Knopf: die Ecke zieht bei :hover UND :active. */
.g-toc-bar__toggle:hover,
.g-toc-bar__toggle:active {
  border-radius: var(--sb-bubble-knopf);
  background-color: var(--sb-fill);
}

.g-toc-mobile.is-open .g-toc__nav--mobile {
  background-color: var(--sb-surface);
  border-radius: var(--sb-radius-karte);
}

/*
 * Die Beschriftung im aufgeklappten Panel doppelt den Namen des Knopfes.
 * Sichtbar weg, fuer Vorlesesoftware da — `display: none` waere hier falsch,
 * es nimmt sie aus dem Zugaenglichkeitsbaum.
 */
.g-toc__nav--mobile .g-toc__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Der Fokus war im Bestand als ungestaltet vermerkt. Zwei Merkmale, damit er
 * auch auf farbigem Grund sichtbar bleibt.
 */
.g-toc__link:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
 * Die Seitenleiste der Beitragsseite
 *
 * Werte aus `Beitragsseite.dc.html`, Zeilen 162 bis 190. Traeger, Reihenfolge
 * und Trennlinien stehen im Parent (`layout.css`), hier die Marke.
 *
 * DIE SPALTE IST 232 px BREIT. Das ist der eine Grund, aus dem hier
 * ueberall kleinere Schriftgroessen stehen als in der Lesespalte — nicht
 * Geschmack, sondern das Mass der Spur.
 * ------------------------------------------------------------------- */

/* Die Initiale. Dieselbe Regel wie auf der Autorenseite, nur kleiner: Der
   Kreis kommt aus `--g-side-author-figure` (38px), die Schrift von hier. */
.g-side-author .g-author-figure__initials {
  font-size: 15px;
}

.g-side-author__kicker {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

.g-side-author__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}

/* Der Name ist ein Link und braucht deshalb eine eigene Regel am `a`: Cores
   Linkfarbe sitzt direkt am Element und schlaegt jede geerbte Farbe. Genau so
   wurde am 2026-09-02 jede Beitragskarte magenta unterstrichen. */
.g-side-author__name a {
  color: var(--sb-contrast);
  text-decoration: none;
  transition: color var(--sb-dauer) var(--sb-kurve);
}

.g-side-author__name a:hover,
.g-side-author__name a:focus-visible,
.g-side-author__name a:active {
  color: var(--sb-accent-text);
}

.g-side-author__bio {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sb-contrast-2);
  margin-block-start: 2px;
}

/* Die Pruefzeile. Das Zeichen traegt `accent` als TEXT, also die dunklere
   Textfassung; die Angabe daneben bleibt ruhig in `contrast-2`. */
.g-reviewed-side__line {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sb-contrast-2);
}

.g-reviewed-side__icon {
  color: var(--sb-accent-text);
  --g-icon-size: 16px;
}

/* -------------------------------------------------------------------
 * Empfohlene Beitraege in der Seitenleiste
 *
 * SIE STEHEN IM ENTWURF NICHT. Sie sind unsere Logik und bleiben deshalb —
 * aber als Einzeiler, im Vokabular der 404-Liste. Ein drittes Listenformat
 * zu erfinden waere genau die Sonderregel, die dieses Projekt verbietet.
 *
 * Gemessen am 2026-09-02 mit der vollen Beitragskarte: 778 px in einer
 * 232 px schmalen Spalte.
 * ------------------------------------------------------------------- */
.g-recommend {
  /* Die Einzeilerliste, auf das Mass der Spalte gestellt. Die Anatomie
     bleibt dieselbe, nur Zeilenhoehe, Polster und Schrift nicht. */
  --g-oneline-height: 44px;
  --g-oneline-pad: 10px;
  --g-oneline-gap: 10px;
  --sb-oneline-size: 14.5px;
}

/*
 * KEIN `margin-block-start` HIER. Es stand da und war wirkungslos: Die
 * Empfehlungen sind das erste Kind ihres Template-Parts, und Cores
 * Layout-Regel setzt jedem ersten Kind den oberen Abstand auf null. Der
 * gemessene Abstand von 21 px zur Pruefzeile kommt vom Blockabstand zwischen
 * den beiden Parts der Spalte — eine tote Deklaration daneben haette nur
 * vorgetaeuscht, dass die Zahl hier entschieden wird.
 */

/* Dieselbe Beschriftung wie „Inhalt" darueber: Beide sind Kleinlabel einer
   Spalte, kein Seitentitel. */
.g-recommend__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
  margin: 0 0 12px;
}

/* -------------------------------------------------------------------
 * 404
 *
 * Werte aus `Seiten-und-Zustaende.dc.html`, Zeilen 323 bis 346. Traeger,
 * Breiten und Fluss stehen im Parent; hier die Marke.
 * ------------------------------------------------------------------- */

/*
 * Die grosse Ziffer. `fill` ist die hellste abgeleitete Stufe und traegt
 * hier KEINEN Text im Sinne der Regel — die Ziffer ist Dekoration, die
 * Aussage steht in der Ueberschrift darunter. Deshalb ist der Kontrast von
 * `fill` auf `base` (1,15:1) an dieser Stelle nicht die falsche Wahl,
 * sondern die Absicht: Sie soll zurueckstehen.
 *
 * Sie traegt `aria-hidden` im Markup (`templates/404.html`): Eine Zahl ohne
 * Aussage, die vorgelesen wird, ist eine Zumutung und keine Zierde. Deshalb
 * steht sie als `wp:html` in der Vorlage — ein Absatzblock kann das
 * Attribut nicht tragen, und in CSS gehoert der Wert nicht hin.
 */
.g-404__digit {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(64px, 18vw, 120px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sb-fill);
  margin: 0;
}

/* `font-weight` und NICHT `font-variation-settings`: Bricolage steht auf 800
   und optischer Groesse 96, die Achsenangabe wuerde beides ueberschreiben. */
.g-404__title {
  font-weight: 800;
  font-size: clamp(26px, 5.4vw, 34px);
  line-height: 1.15;
}

.g-404__text {
  color: var(--sb-contrast-2);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
}

/* Dasselbe Feld wie auf der Suchseite, nur schmaler und mit ruhigerer
   Eingabe: Hier ist es ein Angebot, dort das Bauteil der Seite. */
.g-404__search {
  margin-block-end: 28px;
}

.g-404__search .wp-block-search__input {
  font-size: 16px;
  font-weight: 400;
}

.g-404__label {
  font-size: 12px;
  color: var(--sb-contrast-2);
}

/*
 * Die Einzeilerliste. Ober- und Unterlinie in `line`; die obere kommt seit dem
 * 2026-09-02 aus dem Parent und holt ihre Farbe dort aus `--g-rule-soft`
 * (BL63). Das Zeichen am Zeilenende ist Dekoration und steht deshalb als
 * `content`, nicht im Markup — es ersetzt kein Wort, der Titel steht daneben.
 *
 * GEAENDERT am 2026-09-03: Der Selektor hiess `.g-404__link a` und gilt jetzt
 * fuer `.g-oneline__link a`. Dasselbe Bauteil steht seither auch in der
 * Seitenleiste des Beitrags; zwei Regelsaetze mit gleichem Inhalt waeren zwei
 * Staende. Die Schriftgroesse haengt an `--sb-oneline-size`, weil sie das
 * Einzige ist, was sich je Ort wirklich unterscheidet.
 */
.g-oneline__link a {
  border-block-end: 1px solid var(--sb-line);
  color: var(--sb-contrast);
  font-size: var(--sb-oneline-size, 16.5px);

  /* Wie beim Chip: Die Zeilenhoehe 1,7 aus der theme.json gilt fuer
     FLIESSTEXT. Hier schob sie die Zeile auf gemessene 59px, obwohl der
     Entwurf 56 als Mindestmass setzt und keine Zeilenhoehe angibt. */
  line-height: 1.2;
  transition: color var(--sb-dauer) var(--sb-kurve);
}

.g-oneline__link a:hover,
.g-oneline__link a:focus-visible,
.g-oneline__link a:active {
  color: var(--sb-accent-text);
}

.g-oneline__link a::after {
  content: "\2192";
  color: var(--sb-contrast-2);
}

/* ===================================================================
 * Die Suchergebnisseite
 *
 * Struktur, Raster und Traeger stehen im Parent (`layout.css`), hier die
 * Werte des Entwurfs. Die Masse geben die `--g-search-*`-Token oben weiter.
 * =================================================================== */

/* Der Seitentitel. `font-weight` und NICHT `font-variation-settings`:
   Bricolage steht auf 800 und optischer Groesse 96, und die Achsenangabe
   wuerde `font-weight` ueberschreiben und jede ungenannte Achse
   zuruecksetzen. */
.g-search-title {
  font-weight: 800;
  font-size: clamp(26px, 5.4vw, 34px);
  line-height: 1.15;
}

/* Der Rahmen in `accent` ist der RUHEZUSTAND, kein Fokusstil: Das Feld ist
   auf dieser Seite das Bauteil, um das es geht. Deshalb traegt es auch die
   einzige Akzentfarbe dieser Bildschirmhoehe. */
.g-search-inline .wp-block-search__inside-wrapper {
  background-color: var(--sb-surface);
  border: 2px solid var(--sb-accent);
  border-radius: var(--sb-radius-knopf);
}

.g-search-inline .wp-block-search__input {
  color: var(--sb-contrast);
  font-family: var(--wp--preset--font-family--text);
  font-size: 17px;
  font-weight: 600;
}

.g-search-inline__icon {
  --g-icon-size: 20px;
  color: var(--sb-accent-text);
}

/* „14 Treffer fuer „mechanische tastatur"" — die Zahl und das Wort in
   `contrast`, der Rest zurueckgenommen.

   HIER STAND DIE FARBE EIN ZWEITES MAL, oben am Ende des 404-Abschnitts.
   Zusammengelegt am 2026-09-02: Beide Regeln meinten dasselbe Bauteil, und
   die naechste Aenderung haette eine von beiden getroffen. Die Zaehlzeile
   erscheint auf der Suche und sonst nirgends. */
.g-search-count {
  color: var(--sb-contrast-2);
  font-size: 15px;
  margin-block-end: 16px;
}

.g-search-count strong {
  color: var(--sb-contrast);
}

/* -------------------------------------------------------------------
 * Die Trefferzeile
 *
 * Dieselbe Bewegung wie an der Karte: Ruhe eckig, bei :hover UND :active
 * die Bubble-Ecke unten links. `:focus-within` ist Pflicht, sonst sieht die
 * Tastatur den Zustand nie.
 * ------------------------------------------------------------------- */
.g-search-hit {
  padding: 12px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-karte);
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    border-color var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve);
}

.g-search-hit:hover,
.g-search-hit:focus-within,
.g-search-hit:active {
  border-radius: var(--sb-bubble);
  border-color: var(--sb-accent);
  background-color: var(--sb-surface);
}

.g-search-hit__media img {
  border-radius: var(--sb-radius-bild);
  background-color: var(--sb-fill);
}

/* Kicker und Titel tragen ihre Farbe zweimal, einmal am Wrapper und einmal am
   Link darin: Cores Linkregel sitzt direkt am `<a>` und schlaegt sonst jede
   geerbte Farbe. Derselbe Fall wie an der Karte, dort gemessen. */
.g-search-hit__kicker,
.g-search-hit__kicker a {
  color: var(--sb-accent-text);
}

.g-search-hit__kicker {
  font-size: 11.5px;
  letter-spacing: .12em;
}

.g-search-hit__title,
.g-search-hit__title a {
  color: var(--sb-contrast);
}

/* Gewicht 600 und nicht 800: Die Trefferzeile ist ruhiger als die Karte. */
.g-search-hit__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}

.g-search-hit__kicker a,
.g-search-hit__title a {
  text-decoration: none;
}

.g-search-hit__excerpt {
  color: var(--sb-contrast-2);
  font-size: 15px;
  line-height: 1.55;
}

/* Die Hervorhebung traegt KEINE Flaeche. `primary` als Text ist nur ueber
   `primary-text` zulaessig, und eine magentafarbene Flaeche waere der zweite
   Akzent in derselben Bildschirmhoehe. */
.g-search-hit__excerpt mark {
  background: none;
  color: var(--sb-primary-text);
  font-weight: 700;
}

.g-search-hit__meta {
  color: var(--sb-contrast-2);
  font-size: 13px;

  /* Den Abstand traegt der Trenner, nicht `gap` — sonst liest sich die Zeile
     „13.07.2026  ·  Vik". */
  gap: 0;
}

.g-search-hit__meta > * + *::before {
  content: "·";
  margin-inline-end: 0.375rem;
}

/* Die bildlose Trefferzeile. 13 der 25 Beitraege haben kein Beitragsbild —
   das ist hier der zweite Normalfall, und der Entwurf zeigt ihn nicht. Er
   bekommt deshalb dieselbe redaktionelle Kennzeichnung wie die Karte: ein
   gesetztes Rubrikschild statt einer Luecke. Ein zweites Aussehen fuer
   denselben Fehlzustand waere eine Variante ohne Entscheidung. */
.g-search-hit__mark {
  background-color: var(--sb-fill);
  border-radius: var(--sb-radius-bild);
  padding: 12px;
}

.g-search-hit__mark-text {
  font-size: clamp(13px, 4.4cqi, 20px);
  line-height: 1.15;
  color: var(--sb-contrast);
  border-block-end: 2px solid currentColor;
  padding-block-end: 5px;
}

/* -------------------------------------------------------------------
 * Der leere Zustand: Suche (D5) und Uebersicht
 *
 * Werte aus `Seiten-und-Zustaende.dc.html`, Zeilen 348 bis 382. EIN Kasten
 * fuer beide Faelle: Der Entwurf zeigt den leeren Zustand nur fuer die Suche,
 * und die leere Rubrik benutzt dasselbe Vokabular statt eines zweiten.
 * ------------------------------------------------------------------- */

/*
 * Ein sprechender Kasten, also die Bubble-Ecke — und nach der Kaesten-Regel
 * die einzige Flaeche dieser Bildschirmhoehe.
 *
 * Der Abstand nach oben ist die Differenz zweier Werte des Entwurfs und
 * deshalb gerechnet statt getippt: Das Suchfeld traegt im leeren Zustand 20
 * unter sich, im gefuellten 14. Wer den einen aendert, aendert hier nichts
 * Falsches.
 */
.g-search-empty,
.g-empty {
  background-color: var(--sb-surface);
  border-radius: var(--sb-bubble);
  padding: 22px;
  margin-block-end: 28px;
}

.g-search-empty {
  margin-block-start: calc(var(--g-search-empty-field-gap, 20px) - var(--g-search-field-gap, 14px));
}

.g-search-empty__title,
.g-empty__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(18px, 3.4vw, 21px);
}

.g-search-empty__suggestion {
  margin-block-end: 14px;
}

.g-search-empty__suggestion p {
  color: var(--sb-contrast-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.g-search-empty__suggestion a {
  font-weight: 700;
}

/* Die Chipreihe der Vorschlaege und die der leeren Uebersicht. Das Bauteil
   ist `.g-chips`, hier steht nur, was der Anker in der Spalte haelt. */
.g-search-suggest,
.g-empty__chips {
  margin-block-end: 28px;
}

.g-search-suggest__label,
.g-empty__label {
  font-size: 12px;
  color: var(--sb-contrast-2);
}

/* Die Fusszeile. Oberlinie und Polster stehen seit dem 2026-09-02 im Parent,
   die Linienfarbe kommt dort aus `--g-rule-soft` (BL63). Hier bleibt die
   Schrift des Nachsatzes. */
.g-search-empty__foot {
  font-size: 15.5px;
  line-height: 1.6;
}

/*
 * Die Chips. Struktur steht im Parent (`.g-chips`), hier die Werte des
 * Entwurfs: 14 px, Gewicht 600, Radius 999 px, Rahmen `line`. Aktiv: Gewicht
 * 700, `surface` auf `contrast`.
 *
 * Der Radius ist NICHT die Bubble-Ecke, und das ist Absicht: Ein Chip ist
 * kein sprechender Kasten und kein Knopf, sondern ein Filter. Der Entwurf
 * zeigt ihn rund, und rund bleibt er auch bei :hover — dort wechselt die
 * LINIE, nicht die Form.
 */
.g-chips a {
  color: var(--sb-contrast);
  font-size: 14px;
  font-weight: 600;

  /*
   * Gemessen 44 px hoch statt der vorgegebenen 40. Ursache war die
   * Zeilenhoehe 1,7 aus `theme.json` — die gilt fuer FLIESSTEXT, und ein Chip
   * ist keiner. Der Entwurf setzt an der Pille keine Zeilenhoehe, im Browser
   * gilt dort also `normal` (rund 1,2). Ohne diese Zeile schiebt der
   * Textkoerper das Mindestmass von 40 px auf 44 und die Reihe wird hoeher
   * als gezeichnet.
   */
  line-height: 1.2;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-pille);
  transition:
    border-color var(--sb-dauer) var(--sb-kurve),
    color var(--sb-dauer) var(--sb-kurve);
}

.g-chips a:hover,
.g-chips a:focus-visible,
.g-chips a:active {
  border-color: var(--sb-accent);
  color: var(--sb-accent-text);
}

/*
 * Der aktive Filter. `aria-current` und nicht eine Klasse: Der Zustand steht
 * damit im Markup fuer die Hilfstechnik UND traegt die Gestaltung. Nie
 * Kontext allein ueber Farbe — hier ist es Farbe UND Gewicht UND das
 * Attribut.
 *
 * HEUTE TRIFFT DIESE REGEL NICHTS, und das ist gemessen, nicht vermutet:
 * `Walker_Category::start_el()` setzt `aria-current` nur, wenn
 * `current_category` gefuellt ist, und `render_block_core_categories()`
 * uebergibt es nicht. Alle drei heutigen Verwendungen sind
 * `core/categories`. Die Regel gehoert zu den Rubrikfiltern (D13), die ihr
 * Markup selbst schreiben.
 */
.g-chips a[aria-current] {
  font-weight: 700;
  color: var(--sb-on-dark);
  background-color: var(--sb-contrast);
  border-color: var(--sb-contrast);
}

/* Die Hinweiszeile im Kasten: 15px, Zeilenhoehe 1,7, `contrast-2`. Dass sie
   keinen Abstand nach unten traegt, steht seit dem 2026-09-02 im Parent —
   das Polster des Kastens genuegt, und das gilt in jedem Projekt (BL63). */
.g-empty__hint,
.g-search-empty__hint {
  color: var(--sb-contrast-2);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * Blaetterleiste
 *
 * Werte aus dem Entwurf: Radius 12 px, Rahmen 1 px `line`, aktuelle Seite
 * `contrast` mit `surface`-Schrift in 700. Die Masse stehen im Parent.
 *
 * Die aktuelle Seite traegt KEINEN Rahmen: Sie ist eine Flaeche, und ein
 * Rahmen in `line` darauf waere unsichtbar und nur eine Zeile CSS.
 * ------------------------------------------------------------------------- */
.g-pagination .page-numbers,
.g-pagination .wp-block-query-pagination-previous,
.g-pagination .wp-block-query-pagination-next {
  color: var(--sb-contrast);
  font-weight: 600;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-knopf);
  transition:
    border-color var(--sb-dauer) var(--sb-kurve),
    color var(--sb-dauer) var(--sb-kurve);
}

.g-pagination a:hover,
.g-pagination a:focus-visible,
.g-pagination a:active {
  border-color: var(--sb-accent);
  color: var(--sb-accent-text);
}

.g-pagination .page-numbers.current {
  font-weight: 700;
  color: var(--sb-on-dark);
  background-color: var(--sb-contrast);
  border-color: transparent;
}

/*
 * „Weiter →" und „← Zurück". Der Pfeil steht im Entwurf im Text; hier kommt
 * er aus dem CSS, damit die Vorlesestimme „Weiter" sagt und nicht „Weiter
 * Pfeil nach rechts". Die Beschriftung selbst steht in den Templates — Core
 * liefert von Haus aus „Nächste Seite", und das ist nicht der Entwurf.
 */
.g-pagination .wp-block-query-pagination-next::after {
  content: "→";
}

.g-pagination .wp-block-query-pagination-previous::before {
  content: "←";
}

/* Cores Auslassung („…") ist kein Ziel und bekommt deshalb keinen Rahmen. */
.g-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--sb-contrast-2);
}

/* ---------------------------------------------------------------------------
 * Brotkrume
 * ------------------------------------------------------------------------- */
.g-breadcrumb {
  font-size: 13px;
  color: var(--sb-contrast-2);
}

.g-breadcrumb a {
  color: var(--sb-contrast-2);
  text-decoration: none;
}

.g-breadcrumb a:hover,
.g-breadcrumb a:focus-visible {
  color: var(--sb-accent-text);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Der Kauf-Check
 *
 * Struktur und Reihenfolge stehen im Adapter des Parents
 * (`assets/css/adapter/affiliate-toolkit.css`). Hier steht nur die Marke.
 *
 * Die Kästen-Regel gilt: Der Kauf-Check ist eines der vier Bauteile mit Fläche,
 * und die Fläche liegt am KASTEN, nicht an den drei Karten. Sonst stünden drei
 * Flächen auf einer Bildschirmhöhe.
 * ------------------------------------------------------------------------ */

.g-buycheck {
  padding: 24px;
  border-radius: var(--sb-bubble);
  background-color: var(--sb-surface);
}

.g-buycheck__card {
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-karte);
  background-color: var(--sb-base);
}

/* Die Empfehlung trägt als einzige eine Rahmenfarbe. */
.g-buycheck__card--role1 {
  border: 2px solid var(--sb-primary);
}

.g-buycheck__role {
  padding: 4px 10px;
  border-radius: var(--sb-bubble);
  background-color: var(--sb-fill);
  color: var(--sb-contrast-2);
  font-family: var(--wp--preset--font-family--display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.g-buycheck__card--role1 .g-buycheck__role {
  background-color: var(--sb-primary);
  color: var(--sb-surface);
}

.g-buycheck__title {
  color: var(--sb-contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.g-buycheck__listprice,
.g-buycheck__saved {
  font-size: 13px;
}

.g-buycheck__listprice { color: var(--sb-contrast-2); }

/* Die Ersparnis trägt KEIN `positive`: Diese Rolle ist Fläche, nie Text.
   Ausgezeichnet wird sie über das Gewicht und über das Wort „Du sparst",
   nicht über Farbe allein. */
.g-buycheck__saved     { color: var(--sb-contrast); font-weight: 700; }

.g-buycheck__price {
  color: var(--sb-contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px;
  font-weight: 800;
}

.g-buycheck__card--role1 .g-buycheck__price {
  font-size: 26px;
}

/* Zweitknopf: die beiden äußeren Karten. Magenta bekommt keine großen
   Flächen, und ein Hauptknopf je Abschnitt ist genug. */
.g-buycheck__cta {
  border: 2px solid var(--sb-contrast);
  border-radius: var(--sb-radius-knopf);
  color: var(--sb-contrast);
  font-size: 15px;
  font-weight: 700;
  transition: border-radius var(--sb-dauer) var(--sb-kurve),
              background-color var(--sb-dauer) var(--sb-kurve);
}

.g-buycheck__cta:hover,
.g-buycheck__cta:active {
  border-radius: var(--sb-bubble-knopf);
  background-color: color-mix(in srgb, var(--sb-muted) 30%, var(--sb-base));
}

/* Hauptknopf: nur die Empfehlung. */
.g-buycheck__card--role1 .g-buycheck__cta {
  border-color: transparent;
  background-color: var(--sb-primary);
  color: var(--sb-surface);
  font-size: 16px;
}

.g-buycheck__card--role1 .g-buycheck__cta:hover,
.g-buycheck__card--role1 .g-buycheck__cta:active {
  background-color: var(--sb-primary-text);
}

.g-buycheck__proof {
  color: var(--sb-contrast-2);
  font-size: 13px;
}

.g-buycheck__note {
  margin-block-start: 12px;
  color: var(--sb-contrast-2);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Sprung nach oben
 *
 * Struktur und Lage stehen im Parent (`layout.css`), hier nur die Marke.
 * Auf dunklem Grund gilt nach dem Entwurf die dritte Knopfart: kein Grund,
 * 2 px Rahmen in Cyan, Schrift in Cyan. Hier steht er allerdings auf dem
 * Seitengrund, also die Zweitknopf-Fassung mit Fläche, damit er sich vom
 * Inhalt abhebt statt darin zu verschwinden.
 * ------------------------------------------------------------------------ */

html[data-g-deep] .g-to-top {
  border: 2px solid var(--sb-contrast);
  border-radius: var(--sb-radius-knopf);
  background-color: var(--sb-surface);
  box-shadow: var(--wp--custom--shadow);
  color: var(--sb-contrast);
  transition: border-radius var(--sb-dauer) var(--sb-kurve),
              background-color var(--sb-dauer) var(--sb-kurve);
}

html[data-g-deep] .g-to-top:hover,
html[data-g-deep] .g-to-top:active {
  border-radius: var(--sb-bubble-knopf);
  background-color: var(--sb-base);
}

/* Nur das Zeichen, kein Wort (Weisung 2026-09-02). Die Schriftangaben des
   Knopfes sind damit hinfällig geworden; die Größe steckt jetzt im Zeichen. */
.g-to-top__zeichen {
  --g-icon-size: 22px;
  font-size: 20px; /* Rückfall: der Pfeil aus der Schrift, falls kein Zeichen kommt */
}

/* ===================================================================
 * Die Rubrikseite
 *
 * Struktur, Raster und Abstaende stehen im Parent (`layout.css`), hier die
 * Werte des Entwurfs. Die Masse gehen ueber die `--g-term-*`-Token oben.
 * =================================================================== */

/* Kicker „Rubrik". Derselbe Kicker steht auf der Startseite ueber jeder Rubrikvorschau
   (`.g-topic__kicker`). Ein zweites Bauteil dafuer waere dasselbe Wort in
   zwei Gestalten. Sperrung und Versalien kommen aus dem Auszeichnungsblock
   oben, hier nur Groesse und Farbe. Das Zeichen erbt sie ueber
   `currentColor`. */
.g-term-kicker,
.g-topic__kicker {
  font-size: 12px;
  color: var(--sb-accent-text);
}

.g-term-kicker__icon {
  --g-icon-size: 24px;
}

/* `font-weight` und NICHT `font-variation-settings`: Bricolage steht auf 800
   und optischer Groesse 96, die Achsenangabe wuerde `font-weight`
   ueberschreiben und jede ungenannte Achse zuruecksetzen. */
.g-term-title {
  font-weight: 800;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.12;
}

.g-term-description {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
  color: var(--sb-contrast-2);
}

/* -------------------------------------------------------------------
 * Empfehlungskasten
 *
 * Ein sprechender Kasten: Flaeche `surface` und die Bubble-Ecke dauerhaft.
 * Er ist die eine Flaeche dieser Bildschirmhoehe (Kaesten-Regel).
 * ------------------------------------------------------------------- */
.g-term-recommendation {
  background-color: var(--sb-surface);
  border-radius: var(--sb-bubble);
}

/* `positive` ALS TEXTFARBE, und das ist entschieden (D16): Die Rolle traegt
   Text nur, wo der Entwurf es ausdruecklich zeigt, und nur auf `surface` —
   genau dieser Fall, gemessen 4,7:1. Sperrung 0,12em statt der allgemeinen
   0,14em, wie der Entwurf sie hier vergibt. */
.g-term-recommendation__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--sb-positive);
}

a.g-term-recommendation__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(19px, 3.4vw, 22px);
  line-height: 1.3;
  color: var(--sb-contrast);
}

.g-term-recommendation__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* Der Hauptknopf. Ruhe rund, bei :hover UND :active die Bubble-Ecke — eine
   der vier Regeln aus `UEBERGABE.md`. `:focus-visible` ist Pflicht, sonst
   sieht die Tastatur den Zustand nie. `--sb-primary-text` ist hier die
   dunklere Markenstufe des Entwurfs (#B00D51), nicht Text auf Flaeche. */
a.g-term-recommendation__button {
  background-color: var(--sb-primary);
  color: var(--sb-on-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--sb-radius-knopf);
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve);
}

a.g-term-recommendation__button:hover,
a.g-term-recommendation__button:focus-visible,
a.g-term-recommendation__button:active {
  background-color: var(--sb-primary-text);
  border-radius: var(--sb-bubble-knopf);
}

/* -------------------------------------------------------------------
 * Ueberschrift und Sortierung
 *
 * Gebaut wird „Neueste · Aelteste", der Entwurf zeigt „Neueste ·
 * Meistgelesen". Bewusste Abweichung (D15): Meistgelesen braeuchte einen
 * Aufrufzaehler mit Speicherung, Cache-Umgehung und Datenschutzfrage.
 * ------------------------------------------------------------------- */
.g-term-sort__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 24px);
  line-height: 1.2;
}

.g-term-sort__choice {
  font-size: 14px;
  line-height: 1.4;
  color: var(--sb-contrast-2);
}

a.g-term-sort__link {
  color: var(--sb-contrast-2);
}

a.g-term-sort__link:hover,
a.g-term-sort__link:focus-visible {
  color: var(--sb-accent-text);
}

/* Drei Anzeigen fuer einen Zustand: Attribut, Gewicht, Farbe — die
   Markenlinie aus `--g-term-sort-active` kommt im Parent dazu. Nie Kontext
   allein ueber Farbe. */
a.g-term-sort__link[aria-current] {
  color: var(--sb-contrast);
  font-weight: 700;
}

/* -------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------- */
.g-term-faq__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 24px);
  line-height: 1.2;
}

.g-term-faq__question,
.g-about__principle-summary {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--sb-contrast);
}

.g-term-faq__question::after,
.g-about__principle-summary::after {
  color: var(--sb-accent-text);
  font-size: 20px;
}

.g-term-faq__answer,
.g-about__principle-answer {
  font-size: 16px;
  line-height: 1.65;
}

/* ===================================================================
 * Die Autorenseite
 *
 * Struktur, Raster und Abstaende stehen im Parent (`layout.css`), hier die
 * Werte des Entwurfs. Die Masse gehen ueber die `--g-author-*`-Token oben.
 * =================================================================== */

/* Ein sprechender Kasten: Flaeche `surface` und die Bubble-Ecke dauerhaft.
   Er ist die eine Flaeche dieser Bildschirmhoehe (Kaesten-Regel). */
.g-author-head {
  background-color: var(--sb-surface);
  border-radius: var(--sb-bubble);
}

/* Der Kreis mit den Initialen. `fill` und `contrast-2` sind genau die beiden
   Werte des Entwurfs (#E2DFD6 auf #53554C, hier abgeleitet #E1DFD8) — und
   `muted` waere hier falsch, denn der Kreis TRAEGT Text. */
.g-author-figure__initials {
  background-color: var(--sb-fill);
  color: var(--sb-contrast-2);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}

/* Kicker „Redaktion". Sperrung und Versalien kommen aus dem
   Auszeichnungsblock oben, hier nur Groesse und Farbe. */
.g-author-kicker {
  font-size: 12px;
  color: var(--sb-contrast-2);
}

/* `font-weight` und NICHT `font-variation-settings`: Bricolage steht auf 800
   und optischer Groesse 96, die Achsenangabe wuerde `font-weight`
   ueberschreiben und jede ungenannte Achse zuruecksetzen. */
.g-author-title {
  font-weight: 800;
  font-size: clamp(27px, 5.4vw, 36px);
  line-height: 1.15;
}

.g-author-intro__bio {
  font-size: clamp(16px, 1.7vw, 17px);
  line-height: 1.65;
}

/*
 * Die Themen-Chips. DASSELBE BAUTEIL wie die Filterreihe, nur andere Werte —
 * deshalb gehen sie ueber dessen Token und nicht ueber eigene Regeln.
 *
 * Und das Mindestmass faellt hier bewusst weg: Die 40 px der Filterreihe sind
 * eine TREFFERFLAECHE. Ein Thema ist ein `<span>` und wird nicht angetippt;
 * ein Mindestmass dafuer waere eine Trefferflaeche ohne Ziel und der Chip
 * 12 px hoeher als gezeichnet.
 */
.g-author-topics {
  --g-chip-height: auto;
  --g-chip-pad-block: 6px;
  --g-chip-pad-inline: 12px;
}

.g-chip {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sb-accent-text);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-pille);
}

/* Die Kennzahlenzeile. Das Zeichen erbt die Farbe ueber `currentColor`. */
.g-author-meta {
  font-size: 14px;
  line-height: 1.4;
  color: var(--sb-contrast-2);
}

.g-author-meta__icon {
  --g-icon-size: 16px;
}

/* `primary` als TEXT, und das ist die einzige zulaessige Textvariante der
   Markenfarbe: die dunklere Stufe #B00D51. */
a.g-author-meta__contact {
  color: var(--sb-primary-text);
  font-weight: 600;
}

a.g-author-meta__contact:hover,
a.g-author-meta__contact:focus-visible {
  color: var(--sb-accent-text);
}

/* -------------------------------------------------------------------
 * Womit ich teste
 * ------------------------------------------------------------------- */
.g-author-method__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.g-author-method__icon {
  --g-icon-size: 19px;
  color: var(--sb-accent-text);
}

.g-author-method__list {
  font-size: 15px;
  line-height: 1.6;
}

.g-author-method__number {
  color: var(--sb-contrast-2);
}

/* -------------------------------------------------------------------
 * Die Ueberschrift ueber dem Kartenraster
 * ------------------------------------------------------------------- */
.g-author-posts__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 24px);
  line-height: 1.2;
}

/* ===================================================================
 * Die Fusszeile
 *
 * Werte aus `design/entwurf/_projektwurzel/Startseite.dc.html`, dem
 * `<footer>` am Ende. Struktur und Raster stehen im Parent
 * (`layout.css`, Abschnitt „Die Fusszeile"); hier stehen Rollen, Masse
 * und Begruendungen.
 *
 * DIE UMKEHRUNG steht oben, im Block gemeinsam mit dem Dunkelmodus.
 * Sie hat GENAU EINE Abweichung: Der Grund ist nicht `base` des
 * Dunkelmodus (#191A16), sondern das helle `contrast` (#1D1E1A). Der
 * Entwurf schliesst die Seite in der Textfarbe ab, nicht im
 * Dunkelmodus-Grund. Alles andere ist Zeile fuer Zeile derselbe Satz.
 *
 * Der Preis der Abweichung, damit er benannt ist: `line` wird nach D6
 * aus `muted` und `base` gemischt und ergibt hier #363731 statt der
 * #33352D des Entwurfs, also 9 von 765. Es ist eine Haarlinie ohne
 * Text; die Ableitung ist die Regel, nicht der Zielwert.
 *
 * D7 UND DIESE STELLE. „`accent` fuellt keine textfuehrende Flaeche"
 * ist nicht verletzt: Hier ist `accent` der TEXT auf dunkler Flaeche,
 * nicht die Flaeche unter Text. Gemessen 7,91:1 gegen den Grund.
 * Gemessen ebenso: Fliesstext 8,80:1, Spaltenueberschrift 14,70:1.
 * Alle drei ueber AA.
 * =================================================================== */
.g-footer {
  /* Die eine Abweichung vom Dunkelmodus. Siehe oben. */
  --sb-base: #1D1E1A;
  --sb-on-dark: #1D1E1A;

  /* Die Nahtstellen des Parents. Er kennt keine dieser Rollen. */
  --g-footer-bg: var(--sb-base);
  --g-footer-text: var(--sb-contrast-2);
  --g-footer-link: var(--sb-contrast-2);
  --g-footer-link-hover: var(--sb-accent);
  --g-footer-rule: var(--sb-line);

  /* Masse des Entwurfs. */
  --g-footer-pad-top: 40px;
  --g-footer-pad-inline: 16px;
  --g-footer-pad-bottom: 28px;
  --g-footer-width: var(--sb-ausbruch);
  --g-footer-grid-gap: 32px;
  --g-footer-columns: 1.5fr 1fr 1fr 1.3fr;
  --g-footer-logo-height: 44px;
  --g-footer-mark-gap: 11px;
  --g-footer-mark-end: 14px;
  --g-footer-claim-width: 32ch;
  --g-footer-claim-end: 18px;
  --g-footer-cta-gap: 10px;
  --g-footer-cta-height: 48px;
  --g-footer-cta-pad-block: 12px;
  --g-footer-cta-pad-inline: 16px;
  --g-footer-col-title-end: 12px;
  --g-footer-link-gap: 10px;
  --g-footer-legal-gap-row: 8px;
  --g-footer-legal-gap-col: 20px;
  --g-footer-legal-start: 32px;
  --g-footer-legal-pad: 18px;
}

.g-footer__claim {
  font-size: 14.5px;
  line-height: 1.6;
}

.g-footer__col-title {
  /* Familie, Gewicht, Sperrung und Versalien kommen aus der
     Auszeichnungsebene weiter oben. Hier nur Groesse und Farbe. */
  font-size: 12px;
  color: var(--sb-contrast);
}

.g-footer__nav a {
  font-size: 15px;
}

/* -------------------------------------------------------------------
 * Der Knopf „So arbeiten wir"
 *
 * Ruhig rund, bei :hover UND :active die Bubble-Ecke — die Hausregel
 * fuer Knoepfe. Die Flaeche darunter ist `surface` der Umkehrung
 * (#23241F), also dieselbe Rolle wie jede andere ruhige Flaeche.
 * ------------------------------------------------------------------- */
/* Spezifitaet 0,2,0, nicht 0,1,0: Der Parent faerbt JEDEN Link im Fuss ueber
   `.g-footer a` (0,1,1). Ohne den Traeger davor verliert der Knopf seine
   Farbe und steht in Fliesstextfarbe im Rahmen. Gemessen 2026-09-02. */
.g-footer .g-footer__cta {
  border: 2px solid var(--sb-accent);
  border-radius: var(--sb-radius-knopf);
  color: var(--sb-accent);
  font-weight: 700;
  font-size: 15px;
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    background var(--sb-dauer) var(--sb-kurve);
}

/* Spezifitaet 0,2,0 gegen die Linkregel des Parents (0,1,1) — sonst
   gewinnt dort `--g-footer-link` und der Knopf verliert seine Farbe. */
.g-footer .g-footer__cta:hover,
.g-footer .g-footer__cta:focus-visible,
.g-footer .g-footer__cta:active {
  border-radius: var(--sb-bubble-knopf);
  background: var(--sb-surface);
  color: var(--sb-accent);
}

.g-footer__cta-zeichen {
  --g-icon-size: 18px;
}

.g-footer__legal {
  font-size: 13px;
}

/* Der Link im Transparenzsatz traegt die Antwortfarbe, die Saetze daneben
   nicht. Auch hier 0,2,1 gegen die Linkregel des Parents. */
.g-footer .g-footer__legal a {
  color: var(--sb-accent);
}

/* -------------------------------------------------------------------
 * Das Wortbild
 *
 * DIE SCHRIFTACHSEN-FALLE GREIFT HIER VOLL. Bricolage hat
 * Standardgewicht 800 und Standard-Optische-Groesse 96;
 * `font-variation-settings` ueberschreibt `font-weight` UND
 * `font-optical-sizing` und setzt jede nicht genannte Achse auf den
 * `fvar`-Standard. Deshalb stehen in Zeile eins alle drei Achsen.
 *
 * Zeile zwei benutzt KEINE Breitenachse und deshalb auch kein
 * `font-variation-settings` — sonst kaeme sie mit `wght 800` heraus
 * statt mit 300. Das ist Punkt 3 der Regel in
 * `design/bestand/stufe1/S1-3a-schriftachsen-regel.md`: Wo die hoeheren
 * Eigenschaften reichen, sind sie der bessere Weg.
 * ------------------------------------------------------------------- */
.g-wordmark {
  font-family: var(--wp--preset--font-family--display);
  color: var(--sb-contrast);
}

.g-wordmark__zeile--1 {
  font-size: 17px;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 80, 'wght' 800, 'opsz' 17;

  /* Die Sperrung haengt auch hinter dem letzten Zeichen. Ohne die
     Ruecknahme steht die Zeile um 0,07em links neben der zweiten. */
  margin-right: -.07em;
}

.g-wordmark__zeile--2 {
  font-size: 19px;
  line-height: 1;
  letter-spacing: .05em;
  font-weight: 300;
  font-style: italic;
  transform: skewX(-5deg);
}

/* Die Kopfleiste traegt dasselbe Bauteil zwei Punkt kleiner. Werte aus
   `design/entwurf/_projektwurzel/Uebersichten.dc.html`, Zeile 46: 15 und 17
   statt 17 und 19. Sperrung, Gewicht, Kursive und Scherung sind dieselben und
   stehen deshalb nur oben — hier nur der Unterschied.

   Die optische Groesse folgt der Schriftgroesse, und alle drei Achsen stehen
   wieder da: `font-variation-settings` ersetzt die Angabe der ersten Zeile
   ganz, ein Weglassen von `wght` faellt auf Bricolages 800 zurueck. Genau die
   Falle aus `S1-3a`. */
.g-header__wordmark .g-wordmark__zeile--1 {
  font-size: 15px;
  font-variation-settings: 'wdth' 80, 'wght' 800, 'opsz' 15;
}

.g-header__wordmark .g-wordmark__zeile--2 {
  font-size: 17px;
}

/* ===================================================================
 * Die Startseite: die sechs Bauteile aus `Startseite.dc.html`
 *
 * Werte aus `design/entwurf/_projektwurzel/Startseite.dc.html`, Zeilen 113
 * bis 330. Struktur und Raster stehen im Parent (`layout.css`, Abschnitt
 * „Die Startseite"); hier stehen Rollen, Maße und Begründungen.
 *
 * KEINE NEUE FARBROLLE. Jede Farbe unten ist eine der neun oder eine der vier
 * abgeleiteten (`line`, `fill`, `primary-text`, `accent-text`). Der dunkle
 * Methodikkasten benutzt dieselben neun auf umgekehrter Fläche — der Block
 * dafür steht oben, gemeinsam mit Dunkelmodus und Fußzeile.
 * =================================================================== */

:root {
  /* Vertrauenszeile (E1-2) */
  --g-hero-trust-gap-row: 8px;
  --g-hero-trust-gap-col: 20px;
  --g-hero-trust-icon-gap: 7px;

  /* Der Abschnitt mit Trennlinie. Der Entwurf setzt sie 2 px stark in der
     Textfarbe; `--g-rule-strong` ist genau die (siehe oben). */
  --g-abschnitt-rule: 2px;
  --g-abschnitt-pad-top: 22px;
  --g-abschnitt-pad-bottom: 36px;
  --g-abschnitt-title-end: 6px;
  --g-abschnitt-intro-end: 4px;
  --g-abschnitt-intro-width: 62ch;

  /* Aufmacherzone (E1-5) */
  --g-lead-gap: 28px;
  --g-lead-columns: 1.45fr 1fr;
  --g-lead-main-gap: 14px;
  --g-lead-kicker-end: 8px;
  --g-lead-meta-end: 8px;
  --g-lead-title-end: 10px;
  --g-lead-excerpt-width: 58ch;

  /* „Ebenfalls neu". Die Zeile ist die Trefferzeile der Suche; hier stehen
     nur die drei Maße, die der Entwurf an dieser Stelle anders zeigt. */
  --g-newsline-gap: 12px;
  --g-newsline-media: 92px;
  --g-newsline-media-ratio: 92 / 62;

  /* Rubrikkacheln (E1-6) */
  --g-rubriken-pad-top: 22px;
  --g-rubriken-pad-bottom: 34px;
  --g-rubriken-label-end: 14px;
  --g-rubriken-gap: 10px;
  --g-rubrik-kachel-gap: 10px;
  --g-rubrik-kachel-height: 56px;
  --g-rubrik-kachel-pad-block: 12px;
  --g-rubrik-kachel-pad-inline: 14px;

  /* „Kurz erklärt" (E1-10) */
  --g-faqlist-gap-col: 32px;
  --g-faqlist-inner-gap: 14px;
  --g-faqlist-height: 56px;
  --g-faqlist-pad-block: 16px;

  /* Methodikkasten (E1-11) */
  --g-method-radius: 16px;
  --g-method-pad-block: 28px;
  --g-method-pad-inline: 22px;
  --g-method-end: 36px;
  --g-method-title-end: 8px;
  --g-method-intro-end: 22px;
  --g-method-intro-width: 62ch;
  --g-method-grid-gap-row: 20px;
  --g-method-grid-gap-col: 26px;
  --g-method-grid-end: 24px;
  --g-method-item-pad-top: 14px;
  --g-method-item-title-end: 6px;
  --g-method-cta-height: 48px;

  /* Autorenvorstellung (E1-12) */
  --g-authors-gap: 14px;
  --g-author-card-min: 320px;
  --g-author-card-gap: 15px;
  --g-author-card-pad-block: 18px;
  --g-author-card-pad-inline: 20px;
  --g-author-card-figure: 52px;
  --g-author-card-text-start: 3px;
  --g-author-card-text-end: 8px;
}

/* -------------------------------------------------------------------
 * Die Vertrauenszeile (E1-2)
 *
 * DREI TÖNE, DREI ROLLEN, KEINE ZEHNTE. `positive` steht hier als Strichfarbe
 * eines Zeichens und nicht als Textfarbe — D16 ist damit nicht berührt. Das
 * Zeichen steht NEBEN der Angabe, nie statt ihrer: Fällt der Zeichensatz aus,
 * bleibt die Zusage vollständig lesbar.
 * ------------------------------------------------------------------- */
.g-hero-trust {
  font-size: 14px;
  color: var(--sb-contrast-2);
  margin-block-start: 18px;
}

.g-hero-trust__icon {
  --g-icon-size: 17px;
}

.g-hero-trust__item--positive .g-hero-trust__icon { color: var(--sb-positive); }
.g-hero-trust__item--accent .g-hero-trust__icon { color: var(--sb-accent-text); }
.g-hero-trust__item--neutral .g-hero-trust__icon { color: var(--sb-contrast-2); }

/* Der verlinkte Eintrag bleibt in der Farbe der Zeile: Ein magentafarbener
   Link mitten in drei gleichrangigen Zusagen wäre der zweite Akzent in
   derselben Bildschirmhöhe. Die Unterstreichung trägt den Hinweis. */
.g-hero-trust__text {
  color: inherit;
}

a.g-hero-trust__text {
  text-decoration-color: var(--sb-contrast-2);
}

a.g-hero-trust__text:hover,
a.g-hero-trust__text:focus-visible {
  color: var(--sb-accent-text);
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------
 * Die Abschnittsüberschrift
 *
 * Eine Größe für „Kurz erklärt", „So arbeiten wir" und „Wer hier schreibt".
 * Der Entwurf gibt allen dreien denselben Wert.
 * ------------------------------------------------------------------- */
.g-abschnitt__title,
.g-about__title,
.g-method__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(21px, 4vw, 26px);
  line-height: 1.25;
  color: var(--sb-contrast);
}

.g-abschnitt__intro,
.g-method__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* -------------------------------------------------------------------
 * Die Aufmacherzone (E1-5)
 *
 * Der Aufmacher trägt denselben Rahmen und dieselbe Bewegung wie Karte und
 * Trefferzeile: Ruhe eckig, bei :hover UND :active die Bubble-Ecke unten
 * links. Ein viertes Bewegungsmuster gibt es nicht.
 * ------------------------------------------------------------------- */
.g-lead__main {
  padding: 14px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-karte);
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    border-color var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve);
}

.g-lead__main:hover,
.g-lead__main:focus-within,
.g-lead__main:active {
  border-radius: var(--sb-bubble);
  border-color: var(--sb-accent);
  background-color: var(--sb-surface);
}

.g-lead__media img {
  border-radius: var(--sb-radius-bild);
  background-color: var(--sb-fill);
}

/* `primary` als TEXT ist nur über `primary-text` zulässig. Das ist die eine
   Stelle der Startseite, an der die Markenfarbe Text trägt. */
.g-lead__kicker {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-primary-text);
}

.g-lead__meta {
  font-size: 12.5px;
  color: var(--sb-contrast-2);
}

.g-lead__title,
.g-lead__title a {
  color: var(--sb-contrast);
}

.g-lead__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(23px, 4.4vw, 30px);
  line-height: 1.18;
}

.g-lead__title a {
  text-decoration: none;
}

.g-lead__excerpt {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* „Ebenfalls neu": Auszeichnung wie jede andere, nur 12 px. */
.g-newsline__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

/* Die Zeile ist ruhiger als auf der Suchseite: 17 statt 18 px. */
.g-newsline .g-search-hit__title {
  font-size: 17px;
  line-height: 1.35;
}

/* -------------------------------------------------------------------
 * Die Rubrikkacheln (E1-6)
 * ------------------------------------------------------------------- */
.g-rubriken__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

.g-rubrik-kachel {
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-knopf);
  color: var(--sb-contrast);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    border-color var(--sb-dauer) var(--sb-kurve),
    color var(--sb-dauer) var(--sb-kurve);
}

.g-rubrik-kachel__icon {
  --g-icon-size: 20px;
}

.g-rubrik-kachel:hover,
.g-rubrik-kachel:focus-visible {
  border-color: var(--sb-accent);
  color: var(--sb-accent-text);
}

/* Die Kachel ist ein Knopf und ruht rund; die Bubble-Ecke zieht sie bei
   :hover UND :active. Der Entwurf zeigt sie hier 3 px tief, nicht 4. */
.g-rubrik-kachel:hover,
.g-rubrik-kachel:active {
  border-radius: var(--sb-bubble-knopf);
}

/* -------------------------------------------------------------------
 * „Kurz erklärt" (E1-10)
 * ------------------------------------------------------------------- */
.g-faqlist__item a {
  color: var(--sb-contrast);
  font-size: 16.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--sb-dauer) var(--sb-kurve);
}

.g-faqlist__item a::after {
  color: var(--sb-contrast-2);
}

.g-faqlist__item a:hover,
.g-faqlist__item a:focus-visible {
  color: var(--sb-accent-text);
}

/* -------------------------------------------------------------------
 * Der Methodikkasten (E1-11)
 *
 * Der Kasten führt die umgekehrten Rollen (Block oben). `base` ist dort
 * `#1D1E1A` — dieselbe Abweichung und derselbe Grund wie in der Fußzeile:
 * Der Entwurf schließt beide Flächen in der Textfarbe ab, nicht im
 * Dunkelmodus-Grund.
 *
 * DIE KÄSTEN-REGEL IST EINGEHALTEN: Der Methodikkasten ist der einzige Kasten
 * mit Fläche in seiner Bildschirmhöhe.
 * ------------------------------------------------------------------- */
.g-method {
  --sb-base: #1D1E1A;
  --sb-on-dark: #1D1E1A;

  /* DIE LEISE LINIE MUSS HIER NEU GESETZT WERDEN, und das ist keine Doppelung.
     `--g-rule-soft: var(--sb-line)` steht an `:root` und wird DORT aufgelöst,
     also mit dem hellen `line`. Die Umkehrung darunter erreicht sie nicht.
     Gemessen: Die Oberlinien der drei Spalten kamen in #D7D4CD heraus, einer
     Haarlinie in Papierfarbe auf schwarzem Grund. Im Quelltext war davon
     nichts zu sehen. Die Fußzeile hat denselben Fall und löst ihn genauso
     (`--g-footer-rule` steht in `.g-footer`). */
  --g-rule-soft: var(--sb-line);

  background-color: var(--sb-base);
  color: var(--sb-contrast-2);
}

.g-method__item-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sb-contrast);
}

.g-method__item-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* Der Knopf. `accent` ist hier TEXT auf dunkler Fläche und nicht Fläche unter
   Text — D7 ist damit nicht verletzt, derselbe Fall wie im Fußknopf. */
.g-method .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--sb-accent);
  color: var(--sb-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: var(--sb-radius-knopf);
  text-decoration: none;
  transition:
    border-radius var(--sb-dauer) var(--sb-kurve),
    background-color var(--sb-dauer) var(--sb-kurve);
}

.g-method .wp-block-button__link:hover,
.g-method .wp-block-button__link:active {
  border-radius: var(--sb-bubble-knopf);
  background-color: var(--sb-surface);
}

/* -------------------------------------------------------------------
 * Die Autorenvorstellung (E1-12)
 *
 * Ein sprechender Kasten: Er trägt die Bubble-Ecke dauerhaft, nicht erst bei
 * :hover. Initiale und Beitragszahl kommen aus demselben Feature wie im Kopf
 * der Autorenseite (C1); hier steht nur ihre Gestalt.
 * ------------------------------------------------------------------- */
.g-author-card {
  background-color: var(--sb-surface);
  border-radius: var(--sb-bubble);
}

.g-author-card__figure {
  background-color: var(--sb-fill);
  color: var(--sb-contrast-2);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 20px;
}

.g-author-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 17px;
  color: var(--sb-contrast);
}

.g-author-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

.g-author-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-accent-text);
}

/* ===================================================================
 * Die Seite „Über uns" (E3-3, D20)
 *
 * Die Seite ist zu drei Vierteln Wiederverwendung: Kopfzone `g-term-head`,
 * Redaktion `g-authors`, Finanzierungskasten `g-method`. Hier stehen nur die
 * Werte des einen neuen Bauteils und die zwei Abstände der Seite.
 * =================================================================== */
:root {
  /* Seitenwerte */
  --g-about-title-end: 16px;
  --g-about-section-end: 40px;
  --g-about-prose-width: var(--sb-lese);

  /* Das Gegenüber „Was wir machen / Was wir nicht machen" */
  --g-pledges-gap: 26px;
  --g-pledge-title-gap: 9px;
  --g-pledge-title-end: 12px;
  --g-pledge-gap: 10px;
  --g-pledge-item-gap: 10px;
  --g-pledge-item-pad: 10px;

  /* Die Rechtsliste */
  --g-legal-nav-gap: 2px;
  --g-legal-nav-height: 44px;

  /* Der Abstand zwischen Zeichen und Wort im Knopf des dunklen Kastens */
  --g-method-cta-gap: 10px;
}

/* Eine Farbe je Bauteil: Die Seite trägt sie am Titel und am Vorzeichen,
   nicht an der Fläche. Die Wörter „Was wir machen" und „Was wir nicht machen"
   sagen es zuerst, die Farbe bestätigt es — nie Kontext allein über Farbe. */
.g-pledge__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
}

.g-pledge--positive .g-pledge__title,
.g-pledge--positive .g-pledge__sign {
  color: var(--sb-positive-text);
}

.g-pledge--negative .g-pledge__title,
.g-pledge--negative .g-pledge__sign {
  color: var(--sb-negative-text);
}

.g-pledge__item {
  font-size: 15.5px;
  line-height: 1.6;
}

.g-pledge__sign {
  font-weight: 700;
}

/* Die Rechtsliste. Der Entwurf führt sie als Spalte mit einer Kante links;
   ohne aktiven Eintrag bleibt die Kante durchsichtig und hält den Einzug. */
.g-legal-nav .wp-block-navigation-item__content {
  font-size: 15px;
  color: var(--sb-contrast-2);
  text-decoration: none;
  padding-inline-start: 12px;
  border-inline-start: 2px solid transparent;
}

.g-legal-nav .wp-block-navigation-item__content:hover,
.g-legal-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--sb-accent-text);
  border-inline-start-color: var(--sb-accent);
}

/* ===================================================================
 * Die Dachzeile der Ueberschrift (`g-post-kicker`)
 *
 * Sie steht IM `<h1>` und erbt von dort Groesse und Gewicht — beides muss
 * deshalb ausdruecklich zurueckgesetzt werden, sonst kaeme die Dachzeile in
 * 40px. Familie, Gewicht, Sperrung und Versalien stehen oben in der
 * Auszeichnungsgruppe; hier bleiben Groesse, Farbe und der Abstand darunter.
 *
 * Der Entwurf staffelt die Dachzeile mit ihrer Ueberschrift: 13px ueber der
 * H1, 12px ueber einer H2 im Fliesstext, und der Abstand darunter geht mit.
 * Beide Werte stehen im Entwurf (`bauteile.md`), die 12px seit dem 2026-09-04
 * hier statt in einer eigenen Klasse `.sb-eyebrow`.
 * =================================================================== */
.g-post-kicker {
  font-size: 13px;
  line-height: 1.3;
  color: var(--sb-accent-text);
  margin-block-end: 10px;
}

h2 .g-post-kicker {
  font-size: 12px;
  margin-block-end: 8px;
}

/* ===================================================================
 * Aufmacherbild und Bildunterschrift
 *
 * Zuschnitt und Verhaeltnis stehen im Parent (16/9 mobil, 21/9 ab dem
 * Breakpoint). Hier bleiben Radius, Rueckfallflaeche und die Unterschrift.
 *
 * DER ABSTAND VON 26px UNTER DER FIGUR STEHT HIER NICHT, und das ist Absicht.
 * Das Bild schliesst die Kopfzone ab; der Abstand zum naechsten Abschnitt ist
 * der Blockabstand der Vorlage (gemessen 21px). Ein `margin-block-end` kaeme
 * OBEN DRAUF statt an seine Stelle — die Kopfzone ist ein Raster, und Raender
 * von Rasterkindern kollabieren nicht. Gemessen: 47px statt 26.
 *
 * Die Rueckfallflaeche ist `fill` und keine Erfindung: Sie ist genau der
 * `#E2DFD6`-Wert des Entwurfs und steht seit D6 als abgeleiteter Ton bereit.
 * Sichtbar wird sie nur, solange das Bild laedt oder fehlt — ohne sie blitzt
 * dort Weiss auf.
 * =================================================================== */
.g-post-image img {
  border-radius: var(--sb-radius-karte);
  background-color: var(--sb-fill);
}

.g-post-image__caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sb-contrast-2);
}

/* ===================================================================
 * Der Hinweis ueber der ausbrechenden Tabelle
 *
 * Der Ausbruch selbst ist Struktur und steht im Parent. Hier steht nur, wie
 * leise der Hinweis ist: Er ist eine Bedienhilfe, keine Aussage.
 * =================================================================== */
/* Die Beschriftung der Tabelle: kleinste Auszeichnungsebene der Skala, wie
   die Kopfzeile der Tabelle darunter — 12 px, Versalien, gesperrt. Sie steht
   seit dem 2026-09-03 hier oben statt unter der Tabelle; drinnen wanderte sie
   beim Wischen mit weg. */
.g-table-scroll__caption {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-contrast-2);
}

.g-table-scroll__hint {
  font-size: 12.5px;
  color: var(--sb-contrast-2);
}

/* ===================================================================
 * Das Modul „So arbeiten wir"
 *
 * GEBAUT am 2026-09-03. Es trug bis dahin ausschliesslich Plugin-Werte:
 * Flaeche, 4 px Leiste links in `#F59E0B` (`--review`) beziehungsweise
 * `#64748B` (`--default`), Radius `0 8px 8px 0`, Ueberschrift 17,6 px, Text
 * 18 px. Die Ruecknahme steht im Parent; hier steht die Marke.
 *
 * ES BEKOMMT KEINE EIGENE FORM, sondern die des Quellenabschnitts, der auf
 * der Beitragsseite direkt darunter folgt: zwei Linien, Beschriftung in
 * Bricolage 800/15px, Text in `contrast-2`. Drei Abschnitte am Beitragsende
 * mit drei Formen waeren drei Bauteile fuer eine Aufgabe.
 *
 * DIE BEIDEN VARIANTEN SEHEN GLEICH AUS, und das ist Absicht: Das Plugin
 * unterschied sie allein ueber die Farbe der Leiste. Was hier steht, sagt die
 * Ueberschrift — „So arbeiten wir" gegen „So haben wir das getestet".
 * =================================================================== */
.gw-module-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sb-contrast);
}

.gw-module-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* `accent-text` wie im Quellenabschnitt: ein Verweis auf die eigene Methode,
   keine Empfehlung. Unterstrichen, damit er sich nicht allein ueber die Farbe
   zu erkennen gibt. */
.gw-module-content a {
  color: var(--sb-accent-text);
  text-decoration: underline;
}

/* ===================================================================
 * Quellen und Belege
 *
 * GEBAUT am 2026-09-03. Der untere Teil des Beitrags war ungestaltet: „Quellen"
 * stand als nackte fette Zeile im Fliesstext, und nichts sagte, wo der Beitrag
 * aufhoert und der Beleg anfaengt.
 *
 * Der Abschnitt spricht jetzt dasselbe Vokabular wie der Beitragsverlauf
 * darunter: Oberlinie, Beschriftung in Bricolage 800/15px, das Vorzeichen
 * rechts in `accent-text`. Zwei gleiche Aufklapper untereinander sind eine
 * Reihe; zwei verschiedene waeren zwei Bauteile.
 *
 * Der Entwurf beschriftet ihn „Quellen und Belege" und setzt darunter die
 * Zeile „Alle Quellen abgerufen am …". BEIDES IST TEXT und kommt aus
 * `wp-goblin`, nicht aus dem Theme — hier steht deshalb nur die Gestalt.
 * Gemeldet, nicht erfunden.
 * =================================================================== */
.gw-sources-details > summary {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--sb-contrast);
}

.gw-sources-details > summary::after {
  font-size: 20px;
  color: var(--sb-accent-text);
}

/* Die Belege selbst treten zurueck: Sie sind Nachweis, nicht Lesestoff. 15px
   wie der Beitragsverlauf, damit die beiden Abschnitte eine Groesse haben. */
.gw-sources-list > li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sb-contrast-2);
}

/* `accent-text` und nicht `primary-text`: Ein Beleg ist eine Antwort auf eine
   Frage nach der Herkunft, keine Empfehlung.

   Die Unterstreichung muss GESCHRIEBEN werden. Gemessen kam am Quellenlink
   `text-decoration: none` heraus — sie kommt aus `content-blocks.css` des
   Plugins, das vor dieser Datei laedt. Ohne die Zeile gaebe sich der Verweis
   allein ueber die Farbe zu erkennen. */
.gw-sources-list > li a {
  color: var(--sb-accent-text);
  text-decoration: underline;
}

/* ===================================================================
 * Beitragsverlauf
 *
 * Der Kasten ist KEIN sprechender Kasten: keine Flaeche, keine Bubble-Ecke,
 * nur zwei Linien. Die Kaesten-Regel zaehlt ihn deshalb nicht mit — er
 * verbraucht kein Kontingent auf einer Bildschirmhoehe, auf der schon der
 * TL;DR und der Autorenkasten stehen.
 *
 * Das Vorzeichen rechts ist Dekoration und steht deshalb als `::after` und
 * nicht im Markup. Es ersetzt kein Wort: „Beitragsverlauf" steht daneben, und
 * `<details>` sagt seinen Zustand selbst an.
 * =================================================================== */
.g-changelog__box {
  /* Der Entwurf zieht die inneren Linien heller als die aeusseren. */
  --g-changelog-item-rule: var(--sb-fill);
}

.g-changelog__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 15px;
}

.g-changelog__count {
  font-size: 13.5px;
  color: var(--sb-contrast-2);
}

.g-changelog__summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 20px;
  color: var(--sb-accent-text);
}

.g-changelog__box[open] .g-changelog__summary::after {
  content: "\2212";
}

.g-changelog__item {
  font-size: 15px;
  line-height: 1.55;
}

.g-changelog__date {
  color: var(--sb-contrast-2);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
 * Lesetipps: Ueberschrift und Untertitel
 *
 * Der Untertitel sagt, WAS die vier Beitraege verbindet. Er ist leiser als
 * die Ueberschrift und lauter als eine Bildunterschrift.
 * =================================================================== */
.g-related__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(21px, 4vw, 24px);
  line-height: 1.25;
  margin-block-end: 4px;
}

.g-related__subheading {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* ===================================================================
 * Der Autorenkasten am Beitragsende
 *
 * GEBAUT am 2026-09-03. Er war das einzige Bauteil der Beitragsseite ohne
 * eine einzige eigene Regel: eckige Flaeche, Biografie in `muted`, und die
 * Profillinks standen als magenta unterstrichene 18-px-Zeile da — so gross
 * wie der Fliesstext darueber und lauter als der Name des Autors.
 *
 * Er spricht das Vokabular der Autorenvorstellung (`g-author-card`, E1-12)
 * und des Autorkopfs (C1): sprechender Kasten mit Bubble-Ecke, Name in
 * Bricolage 800/17px, Text in `contrast-2`, Links in `accent-text` bei 14px.
 * Dasselbe Bauteil an einem anderen Ort, nicht ein zweites.
 *
 * Er ist die EINE Flaeche seiner Bildschirmhoehe (Kaesten-Regel): Darueber
 * stehen Lesetipp-Karten mit blosser Kante, darunter der Beitragsverlauf mit
 * zwei Linien.
 * =================================================================== */
.g-author-box {
  border-radius: var(--sb-bubble);
}

/* Der Kreis um das Autorenbild. `fill` dahinter, weil ein Bild mit
   Transparenz sonst ein weisses Loch auf `surface` waere — dieselbe
   Begruendung wie am Kartenbild. */
.g-author-box__figure img {
  border-radius: 50%;
  background-color: var(--sb-fill);
}

.g-author-box__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  color: var(--sb-contrast);
}

/* Der Name ist ein Link. Eigene Regel am `a`, weil Cores Linkfarbe direkt am
   Element sitzt und jede geerbte schlaegt — derselbe Fall wie in der
   Seitenleiste und an der Beitragskarte. */
.g-author-box__name a {
  color: var(--sb-contrast);
  text-decoration: none;
  transition: color var(--sb-dauer) var(--sb-kurve);
}

.g-author-box__name a:hover,
.g-author-box__name a:focus-visible,
.g-author-box__name a:active {
  color: var(--sb-accent-text);
  text-decoration: underline;
}

/* `contrast-2` und NICHT `muted`: Bis zum 2026-09-03 stand die Biografie in
   `muted` (gemessen 2,53:1 auf `surface`), weil der Teil `textColor: muted`
   trug und Core daraus eine `!important`-Regel macht. Das Attribut ist aus
   `parts/author-box.html` weg, die Rolle traegt hier wieder keinen Text. */
.g-author-box__bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sb-contrast-2);
}

/* Die Profillinks. Sie behalten die Unterstreichung: Ein Verweis in einem
   Kasten, der sonst nur Text traegt, darf sich nicht allein ueber die Farbe
   zu erkennen geben. */
.g-author-profiles__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-accent-text);
}

.g-author-profiles__link:hover,
.g-author-profiles__link:active {
  color: var(--sb-primary-text);
}

/* ===================================================================
 * Lesetipps: die Karten
 *
 * HIER STEHT NICHTS MEHR, und das ist die Aenderung vom 2026-09-03.
 *
 * An dieser Stelle stand eine eigene Zeile: Kasten, Radius, Bubble-Ecke bei
 * :hover, Bildradius, Kicker in `accent-text`, Titel in Bricolage 600/17px.
 * Sie war die zweite Kartenform des Themes und sah anders aus als jede
 * Uebersicht derselben Seite.
 *
 * Seit dem 2026-09-03 rendert `goblin-base/inc/related-cards.php` an dieser
 * Stelle das Muster `goblin-base/post-card`. Damit gilt hier, was oben fuer
 * `.g-post-card` steht — eine Karte, eine Regel, ein Ort. Weisung des
 * Auftraggebers („related unten 3er cards"), festgehalten in
 * `design/entwurf/gruppe-e-plan.md`.
 * =================================================================== */




/* ===================================================================
 * Aufzaehlungslisten im Fliesstext
 *
 * Der Einzug, der Abstand zwischen den Punkten und die Frage, WELCHE Listen
 * ueberhaupt gemeint sind, stehen im Parent (`base.css`). Hier steht nur die
 * Farbe — und die ist der ganze Punkt dieser Datei.
 *
 * DAS ZEICHEN STEHT IN `contrast-2` UND NICHT IN DER MARKENFARBE. Eine Liste
 * mit sieben Punkten waere sonst eine Bildschirmhoehe mit sieben Akzenten,
 * und die Regel dieses Entwurfs heisst: ein Akzent je Bildschirmhoehe. Das
 * Zeichen ordnet, es betont nicht.
 *
 * `font-size: 0.9em` am Marker: Bei 17 bis 18px Fliesstext ist Chromiums
 * `disc` sichtbar schwerer als der Text daneben. Kleiner heisst hier
 * zurueckhaltender, nicht schwaecher — die Farbe traegt den Kontrast.
 *
 * KEIN ICON. Der Styleguide sagt „Ein Icon ersetzt nie ein Wort", und ein
 * Aufzaehlungszeichen ist die kleinste Form davon: Es soll den Punkt anzeigen
 * und sonst nichts.
 * =================================================================== */
.wp-block-list:not([class^="g-"]):not([class*=" g-"]):not([class^="gw-"]):not([class*=" gw-"]) > li::marker {
  color: var(--sb-contrast-2);
  font-size: 0.9em;
}

/*
 * Die Ziffern einer nummerierten Liste tragen dieselbe Farbe, aber die volle
 * Groesse: Eine Zahl, die kleiner gesetzt ist als der Satz daneben, liest
 * sich als Fussnote. `tabular-nums`, damit zweistellige Punkte nicht
 * verspringen — dieselbe Begruendung wie bei den Messwerttabellen.
 */
ol.wp-block-list:not([class^="g-"]):not([class*=" g-"]):not([class^="gw-"]):not([class*=" gw-"]) > li::marker {
  font-size: 1em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
 * Das Zeichen am Affiliate-Link
 *
 * Der Stern sitzt in einem Link und erbt damit dessen Farbe. Das ist
 * falsch herum: Er ist kein Teil des Linktextes, sondern ein Hinweis
 * darueber, was dieser Link ist. In Linkfarbe sieht er aus wie eine
 * Fussnotenziffer, auf die man klicken kann.
 *
 * `contrast-2` ist die Farbe der leisen Zusatzangaben in diesem Skin —
 * dieselbe wie beim Streichpreis im Kauf-Check und beim Hinweis darunter.
 * `muted` waere falsch: Die Rolle gilt fuer Linien und Deaktiviertes,
 * NIE fuer Text, und dieser Hinweis muss lesbar bleiben.
 * =================================================================== */
.g-affiliate-mark {
  color: var(--sb-contrast-2);
  font-weight: 600;
}

/*
 * Beim Ueberfahren des Links faerbt sich der Linktext um. Der Stern geht
 * mit, sonst bliebe genau ein Zeichen stehen und sieht nach Fehler aus.
 */
a:hover .g-affiliate-mark,
a:focus-visible .g-affiliate-mark {
  color: inherit;
}