innerhalb des Block-
stünde sonst zusätzlich unter der abgeschnittenen Zeile. */
.gb-postrow__text > p,
.gb-card__text > p {
margin: 0;
}
/* wp:query-pagination-numbers schiebt einen -Wrapper um die Zahlen.
CDs Regel ".gb-pagination span" trifft ihn mit und machte aus dem Wrapper
selbst eine 44px-Schaltfläche mit Rahmen — sichtbar als leerer Kasten
vor den Seitenzahlen. display:contents nimmt ihn aus dem Layout, ohne
ihn aus dem Screenreader-Baum zu entfernen. */
.gb-pagination > .wp-block-query-pagination-numbers {
display: contents;
}
/* Core benennt den aktuellen Zustand .current und die Auslassung .dots,
CD nennt sie __current und __gap. Beide Namen auf dieselbe Darstellung
führen, statt am Markup zu drehen. */
.gb-pagination .page-numbers.current {
background: var(--gb-green-800);
border-color: var(--gb-green-800);
color: #fff;
}
.gb-pagination .page-numbers.dots {
border: 0;
min-width: 24px;
color: var(--gb-ink-muted);
font-weight: 400;
}
/* ---------- 6. Icons im Übergang ----------
⏳ BEFRISTET. Entfernen, sobald das Umbenennungsskript gelaufen ist
und eine Suche nach "gb-icon-" (einfacher Bindestrich) über alle
Posts und Pages 0 Treffer liefert.
Der Bestand schreibt gb-icon-calendar, CDs System erwartet
gb-icon--calendar (zwei Bindestriche). Die Basisklasse .gb-icon trägt
CDs Datei bereits, es fehlen also nur die ::before-Glyphen.
⚠️⚠️ ZWEI ZUORDNUNGEN SIND NICHT DIE NAHELIEGENDEN (gefunden 08.08.2026
beim Öffnen von gb-fonts.css). CD hat zwei Namen neu belegt:
Bestand Glyphe CDs Klasse für diese Glyphe
gb-icon-calendar \e953 .gb-icon--calendar-solid (NICHT --calendar, das ist \ea5e)
gb-icon-store \ea4e .gb-icon--store-front (NICHT --store, das ist \ea5c)
Eine stumpfe Umbenennung ein Bindestrich → zwei Bindestriche würde
hier ein ANDERES Bild rendern. Kein Fehler, keine leere Kachel, keine
Konsolenmeldung — einfach das falsche Icon, 34 Aktivitätsboxen weit.
Das Umbenennungsskript muss diese beiden Fälle gesondert behandeln.
Die Codepoints unten sind deshalb die des Bestands, nicht die der
gleichnamigen CD-Klasse. */
.gb-icon-calendar::before { content: "\e953"; } /* = CDs --calendar-solid */
.gb-icon-store::before { content: "\ea4e"; } /* = CDs --store-front */
.gb-icon-leaf::before { content: "\e9f3"; }
.gb-icon-seedling::before { content: "\ea63"; }
.gb-icon-inbox::before { content: "\e9fe"; }
.gb-icon-hand-lizard::before { content: "\e917"; }
.gb-icon-edit::before { content: "\e9f5"; }
.gb-icon-hands-wash::before { content: "\ea51"; }
.gb-icon-braille::before { content: "\ea50"; }
.gb-icon-spa::before { content: "\ea4b"; }
/* ---------------------------------------------------------------------------
Leitbild: --full füllt die Textbreite auch bei 800-px-Quellen
---------------------------------------------------------------------------
CDs Grundregel „Bilder werden nie hochskaliert" ist richtig und bleibt für
alle anderen Figuren gültig. Beim Leitbild führt sie aber zu einem sichtbaren
Bruch: Die Beitragsbilder der Kräuterseiten sind 800 px breit, die Textspalte
ist ~975 px. Sie stehen dann schmaler als das Leitbild der Nachbarseite, das
zufällig eine 1024-px-Quelle hat — auf Salbei, Rosmarin und Lavendel gemeldet
(Sebastian, 09.08.2026).
Bewusst nur auf `--full` beschränkt, nicht auf `.gb-figure` allgemein: Die
halbspaltigen Inhaltsbilder sollen weiterhin ihre Quellbreite behalten.
Hochskaliert wird höchstens um ein Fünftel, das ist bei Fotos unkritisch.
📮 Gehört zu CD zurück: Entweder die Regel dort aufnehmen oder eine
Mindestquellbreite für Leitbilder festlegen.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Sticky Header: die Regel gehört auf den WordPress-Wrapper, nicht auf .gb-header
---------------------------------------------------------------------------
`wp:template-part {"tagName":"header"}` erzeugt SELBST ein
`-Huelle aus. Damit landen zwischen Raster und
Feld zwei Ebenen, die CD nicht kennt:
· der Absatz bringt seinen Browser-Standardrand mit (1em oben und unten),
der zum `gap` des Rasters hinzukommt — die Zeilen stehen zu weit
auseinander, und zwar ungleichmaessig;
· das Feld ist kein Rasterkind mehr und dehnt sich nicht auf die
Spaltenbreite. `size="30"` gewinnt, und in der dreispaltigen Zeile
stehen drei zu schmale Felder mit Luecke dahinter.
⚠️ `.gb-form__field` ist genau diese Bruecke — und hatte bis zum
12.08.2026 keine einzige Regel. Die Klasse stand im Markup, sah nach
Design-System aus und tat nichts; `klassen-abdeckung.php` hat sie als
„Modifier ohne Regel" gemeldet. Sie ist damit derselbe Fall wie
`gb-related`, das im selben Lauf auffiel.
📮 Zu CD: Das Markup steht so nicht im Entwurf, weil es aus WordPress
kommt und nicht aus dem Inhalt. Die Regeln gehoeren deshalb hierher. */
.gb-form p { margin: 0; }
.gb-form__field > p,
.gb-form > .comment-form-comment {
display: grid;
gap: 4px;
}
.gb-form input[type="text"],
.gb-form input[type="email"],
.gb-form input[type="url"],
.gb-form textarea {
width: 100%;
}
/* Die Einwilligungs- und Abo-Kaestchen liefert WordPress bzw. Jetpack als
Absatz mit Kaestchen und Beschriftung nebeneinander. CDs `.gb-form__check`
ist genau diese Form; die Klasse laesst sich hier aber nicht setzen, weil
das Markup aus dem Plugin kommt. */
.gb-form .comment-form-cookies-consent,
.gb-form .comment-subscription-form {
display: flex;
align-items: flex-start;
gap: var(--gb-space-xs);
}
.gb-form .comment-form-cookies-consent label,
.gb-form .comment-subscription-form label {
font-weight: 400;
color: var(--gb-ink-muted);
font-size: var(--gb-text-sm);
}
.gb-form .comment-form-cookies-consent input[type="checkbox"],
.gb-form .comment-subscription-form input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex: none;
accent-color: var(--gb-green-700);
}
/* ---------------------------------------------------------------------------
23 · Autorenbox: Innenabstand in die Breite einrechnen
---------------------------------------------------------------------------
`.gb-author` traegt `max-width: var(--gb-text-max)` und `padding:
var(--gb-space-md)`, aber kein `box-sizing`. Ohne das kommt der
Innenabstand AUF die Hoechstbreite obendrauf: gemessen 1015 statt 975 px,
also 20 px Ueberstand nach jeder Seite. Sichtbar als eine Box, die als
einzige aus der Textspalte herausragt.
In CDs Entwurf faellt das nicht auf, weil die Box dort `max-width:none`
traegt und die Demo-Flaeche die Breite vorgibt.
⚠️ Es gibt in diesem Stylesheet kein globales `box-sizing: border-box` —
jeder Baustein setzt es selbst (`.gb-card`, `.gb-btn`, die Formularfelder
und acht weitere). `.gb-author` ist der Baustein, bei dem es fehlt.
📮 Zu CD: gehoert in Abschnitt 17 an `.gb-author` selbst. */
.gb-author { box-sizing: border-box; }
/* ---------------------------------------------------------------------------
24 · Die Abschlussabschnitte des Beitrags stehen eine Stufe leiser
---------------------------------------------------------------------------
In Entwurf 02 tragen „Ähnliche Beiträge" und „Tipps und Tricks vom
Gemüse-Balkon" inline `font-size:1.5rem` — dieselbe Stufe wie
`.gb-comments__title` direkt darueber, und eine Stufe unter den H2 des
Beitragstextes (2rem). Das ist eine Rangfolge, keine Zufaelligkeit: Der
Beitrag hoert auf, und was danach kommt, meldet sich leiser.
⚠️ Warum es hier ueberhaupt eine Regel braucht: Die beiden Abschnitte
stehen im Template in einem `.gb-prose`-Bereich — anders bekaemen ihre
Ueberschriften ueberhaupt keine Typografie (siehe Kommentar in
`single.html`). Damit greift aber `.gb-prose h2` mit 2rem.
⚠️ Auf der STARTSEITE gilt das ausdruecklich NICHT: In Entwurf 05 sind
„Wo möchtest du starten?" und „Letzte Beiträge" nackte H2 ohne
Groessenangabe, also 2rem. Deshalb haengt die Regel an einer eigenen
Klasse und nicht an `.gb-section h2`.
📮 Zu CD: Der Baustein hat im System keinen Namen — im Entwurf steht die
Groesse zweimal inline. `gb-posttail` ist ein Vorschlag. */
.gb-posttail h2 { font-size: var(--gb-h3); }
/* ---------------------------------------------------------------------------
25 · „Schreibe einen Kommentar" — die Ueberschrift des Formulars
---------------------------------------------------------------------------
WordPress gibt sie als ``, das Core ausgibt (front-page.html). Core setzt
dort eigene Aussenraender — im Raster regelt das `gap`. Gleiche
Spezifitaet, Core laedt frueher; sicherheitshalber trotzdem benannt,
weil die Ladereihenfolge von Core-Blockstilen nicht garantiert ist. */
ul.gb-cards.wp-block-post-template {
margin: var(--gb-space-lg) 0;
padding: 0;
list-style: none;
}
/* ---------------------------------------------------------------------------
Vier Zwischenloesungen vom 11.08.2026 sind hier ERSATZLOS entfallen
---------------------------------------------------------------------------
Claude Design hat alle vier am selben Tag ins System genommen, zwei davon in
einer weiter reichenden Fassung (Antwort „drei Luecken", Runde 23):
AAWP-Bestsellerraster -> `.aawp-grid` haelt jetzt selbst bei 3/2/1
Spalten, `minmax(260px, 1fr)`, `margin-inline: 0`,
und die horizontale Box im Raster stapelt.
Der Deckel greift ueber
`:not([class*="aawp-grid--col-"])`.
Bilder ohne Huelle -> `img { max-width: 100%; height: auto; }` steht
jetzt in Abschnitt 7, ohne Praefix, ohne
!important.
Oberkanten im Raster -> `.gb-split:not(.gb-split--flow) > *` statt nur
`> .gb-figure`. CDs Begruendung: Ein Raster
verspricht buendige Oberkanten; dass es
`.gb-figure` getroffen hat, war Zufall der
Fundstelle.
Aufkleber in der Liste -> Der Bandzettel laeuft in `--list` jetzt im Fluss
mit (`position: static`) statt absolut. Mein
`padding-top: 34px` haette Platz fuer etwas
reserviert, das gar nicht mehr schwebt.
⚠️ Wer eine dieser Regeln hier wieder einbaut, ueberschreibt die
Systemfassung mit einer aelteren. Der Glue laedt NACH dem Design-System. */
/* Die Zwischenloesung `html body .gb-split > .gb-figure img { width: 100% }`
stand hier am 11.08.2026 und ist mit CDs Runde 24 ersatzlos entfallen —
sie steht jetzt als `.gb-split > .gb-figure img` im System (Abschnitt 8,
direkt hinter den `.gb-figrow`-Bildregeln).
⚠️ CDs Pruefbitte dazu gehoert in die Arbeitsweise, nicht in diese Datei:
Entsteht eine neue Bildhuelle, gehoert die Frage dazu, welche der drei
Bildregeln sie braucht — `width: 100%`, `margin-block: 0`, Zuschnitt. Zwei
davon stehen inzwischen allgemein (`img { max-width: 100% }`,
`.gb-split > * { margin-block: 0 }`); die dritte laesst sich NICHT
allgemein setzen, weil `width: 100%` im Fliesstext jedes kleine Bild
aufblaesen wuerde. Das war die dritte Auslassung derselben Bauart. */
/* ---------------------------------------------------------------------------
20 · Kommentarkopf: WordPress' Flusslayout aus der Kopfzeile nehmen
---------------------------------------------------------------------------
`.gb-comment__head` ist bei CD ein Flex-Container mit `align-items:
baseline` und eigenem `gap`. Im Blocktemplate ist er eine `wp:group` — und
Core haengt jeder Gruppe seine Layoutklasse an. `is-layout-flow` setzt auf
jedes Kind ausser dem ersten `margin-block-start`, also einen oberen Rand.
In einer Zeile mit `align-items: baseline` schiebt der Datum und
Antwort-Link nach unten: eine Kopfzeile, deren drei Teile auf drei Hoehen
stehen.
Dieselbe Stelle, dieselbe Begruendung wie Abschnitt 4 beim Kartenraster —
der Abstand kommt aus `gap`, nicht aus Raendern.
⚠️ Bewusst NICHT ueber `{"layout":{"type":"flex"}}` im Template geloest.
Core erzeugt dafuer eine eigene Container-Klasse mit eigenem `gap` und
`align-items: center`, gleiche Spezifitaet wie CDs Regel — welche gewinnt,
haengt dann an der Ladereihenfolge im Kopf. Das ist genau die Sorte
Abhaengigkeit, die spaeter niemand mehr findet. */
.gb-comment__head:where(.is-layout-flow, .is-layout-constrained) > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* ---------------------------------------------------------------------------
21 · Die Teilen-Leiste steht am Ende der Metazeile
---------------------------------------------------------------------------
In CDs Entwurf 02 steht `margin-left:auto` inline am `.gb-share` der
Beitrags-Metazeile. Ueberall sonst waere das falsch — die Leiste kommt in
Vorlage 13 auch im Fussbereich vor, dort ohne Schub nach rechts. Die Regel
gehoert also an die Kombination, nicht an `.gb-share`.
📮 Zu CD: gehoert vermutlich als `.gb-post__meta .gb-share` ins System,
Abschnitt 17 — hier steht sie nur, weil sie im Entwurf inline stand. */
.gb-post__meta .gb-share { margin-left: auto; }
/* ---------------------------------------------------------------------------
22 · Kommentarformular: WordPress' Absatz-Huellen an CDs Raster anpassen
---------------------------------------------------------------------------
CDs Entwurf 02 zeigt `.gb-form` als Raster mit Beschriftung und Feld als
direkten Kindern. WordPress liefert jedes Feld in einer eigenen
`
`
aus, mit einem `` fuer „Antwort abbrechen" darin. Sie steht damit
ausserhalb von `.gb-prose` und ausserhalb jeder Regel des Design-Systems:
gemessen am 12.08.2026 mit 36 px in der Grundschrift des Browsers, mitten
in einem sonst durchgestalteten Kommentarbereich — groesser als die
Ueberschrift des Beitragstextes daneben.
CDs Entwurf 02 zeigt sie als `.gb-comments__title` in 1,25rem, also eine
Stufe unter der Ueberschrift „5 Kommentare" darueber. Genau das steht
hier; die Klasse selbst laesst sich nicht setzen, das Markup kommt aus
dem Core.
📮 Zu CD: derselbe Fall wie das Formular-Markup in Abschnitt 22 — das
Element kommt aus WordPress, nicht aus dem Inhalt. */
.gb-comments .comment-reply-title {
font-family: var(--gb-font-heading);
font-weight: 700;
font-size: var(--gb-h4);
line-height: 1.3;
color: var(--gb-ink-heading);
margin: var(--gb-space-lg) 0 var(--gb-space-xs);
}
.gb-comments .comment-reply-title small {
font-family: var(--gb-font-body);
font-weight: 400;
font-size: var(--gb-text-xs);
margin-left: var(--gb-space-xs);
}