/* ============================================================ gemuese-balkon.de — Design System Runde 1: Tokens, Typografie, Katalog A Namespace: .gb-* / --gb-* · keine Theme-Abhängigkeit ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Marke — Grün. 900→500 dunkel nach hell. 500 und lime sind Flächenfarben. */ --gb-green-900: #1a3d1d; /* dunkelste Fläche, Footer */ --gb-green-800: #1a4d0e; /* Überschriften, Primärfläche */ --gb-green-700: #1a5c10; /* Fokus, aktiver Zustand */ --gb-green-600: #2d7318; /* kleinster grüner Text, der AA hält */ --gb-green-500: #4a9635; /* NUR Fläche/Deko — als Text 3,68:1 */ --gb-lime: #a3c940; /* NUR Fläche */ --gb-lime-ink: #4e6212; /* Lime als Text/Icon auf hell */ --gb-orange: #e07b2a; /* NUR Fläche */ --gb-orange-ink:#8f4a12; /* Orange als Text/Icon auf hell */ /* Flächen */ --gb-surface: #ffffff; --gb-surface-cream: #f0ede4; --gb-surface-cream-warm: #ede8dd; --gb-surface-green: #dff0d4; --gb-surface-lime: #eef6d8; --gb-surface-orange: #fbe3cf; --gb-surface-dark: var(--gb-green-800); /* Text — gemessene Wahrheit, nicht die alten Token-Namen */ --gb-ink: #2c3a26; /* Fließtext (real gerendert) */ --gb-ink-heading: #1a4d0e; --gb-ink-muted: #4a5a44; /* Meta, Bildunterschrift stark */ --gb-ink-soft: #5b6a55; /* leiseste erlaubte Textfarbe */ --gb-ink-on-dark: #e8e4d8; --gb-ink-on-dark-muted:#c8dba0; /* Links — eine Farbe, die auf allen fünf Flächen AA hält */ --gb-link: #6f520c; --gb-link-hover: #4a3606; --gb-link-on-dark: var(--gb-lime); --gb-link-on-dark-hover: #ffffff; /* Ränder & Fokus */ --gb-border: rgba(42,74,30,0.13); /* Dieselbe Farbe, kräftiger: für Karten, die sich aus einer Reihe hervorheben, und für den Kartenrahmen im Hover. Nicht --gb-border-strong verwechseln — das ist Grau für Formular-Bedienelemente (Kontrast ≥3:1), nicht die getönte Kartenlinie. */ --gb-border-card-strong: rgba(42,74,30,0.2); --gb-border-strong: #6f7c68; /* Formularfelder, UI ≥3:1 */ --gb-focus: var(--gb-green-700); --gb-focus-on-dark: var(--gb-lime); /* Typografie */ --gb-font-heading: 'Lora', Georgia, 'Times New Roman', serif; --gb-font-body: 'Inter', system-ui, -apple-system, sans-serif; --gb-text-xs: 0.75rem; /* 12px — Meta, Copyright */ --gb-text-sm: 0.8125rem; /* 13px — Bildunterschrift, Formular */ --gb-text-base: 1rem; /* 16px */ --gb-text-lead: 1.125rem; /* 18px — Intro, Navigation */ --gb-h6: 1rem; --gb-h5: 1.1rem; --gb-h4: 1.25rem; --gb-h3: 1.5rem; --gb-h2: 2rem; --gb-h1: 2.6rem; --gb-leading-body: 1.7; --gb-leading-lead: 1.6; --gb-leading-tight: 1.25; /* Spacing */ --gb-space-2xs: 4px; --gb-space-xs: 8px; --gb-space-sm: 14px; --gb-space-md: 20px; --gb-space-lg: 32px; --gb-space-xl: 48px; --gb-space-2xl: 60px; /* Aktivitätsfarben Aussaatkalender und Monatsbalken — nur Flächen */ --gb-cal-sow: var(--gb-green-500); --gb-cal-harvest: var(--gb-orange); --gb-cal-both: var(--gb-lime); --gb-cal-none: #e6e4dd; /* Radien */ --gb-radius-sm: 10px; --gb-radius-md: 12px; --gb-radius-lg: 16px; --gb-radius-xl: 28px; --gb-radius-pill: 999px; /* Schatten */ --gb-shadow-card: 0 2px 12px rgba(0,0,0,0.06); --gb-shadow-card-hover: 0 4px 20px rgba(0,0,0,0.10); /* Layout */ --gb-content-max: 1240px; /* Rahmen-Außengrenze */ --gb-text-max: 975px; /* echte Textspalte bei 1425px */ --gb-gutter: 32px; /* Spalt im Zweispalter */ /* Kopfzeilenhöhe als Token, damit Sprungziele sie nicht raten müssen. 72px ist der Entwurfswert und nur der Rückfall: Wer die Kopfzeile misst und den Wert als Inline-Stil auf das Wurzelelement schreibt, gewinnt — genau so ist es gemeint. Die gemessene Höhe schlägt die entworfene. */ --gb-header-h: 72px; --gb-scroll-offset: calc(var(--gb-header-h) + 16px); /* Seiten mit zusätzlicher klebender Sprungnavigation (Shop, Kalender) */ --gb-scroll-offset-nav: calc(var(--gb-header-h) + 64px); } /* ---------- 2. Fokus (nicht erben — definieren) ---------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; border-radius: 2px; } .gb-on-dark :where(a, button, summary):focus-visible { outline-color: var(--gb-focus-on-dark); } /* Auf Lime-/Orange-Flächen reicht Grün nicht sicher: dunkler Ring + heller Saum */ .gb-surface-lime :where(a,button):focus-visible, .gb-surface-orange :where(a,button):focus-visible { outline-color: var(--gb-green-900); box-shadow: 0 0 0 5px rgba(255,255,255,0.9); } /* ---------- 3. Typografie ---------- */ .gb-prose { font-family: var(--gb-font-body); font-weight: 400; font-size: var(--gb-text-base); line-height: var(--gb-leading-body); color: var(--gb-ink); text-wrap: pretty; max-width: var(--gb-text-max); } /* 86 % der Beiträge liefern Fließtext ohne

. Der Container trägt die Grundtypografie, damit nackte Textknoten identisch aussehen. */ .gb-prose > p { margin: 0 0 1.1em; } .gb-prose > br + br { line-height: 1.1em; } .gb-prose h1, .gb-prose h2, .gb-prose h3, .gb-prose h4, .gb-prose h5, .gb-prose h6 { font-family: var(--gb-font-heading); font-weight: 700; color: var(--gb-ink-heading); margin: 1.5em 0 0.5em; text-wrap: balance; } .gb-prose h1 { font-size: var(--gb-h1); line-height: 1.2; letter-spacing: -0.015em; } .gb-prose h2 { font-size: var(--gb-h2); line-height: 1.2; letter-spacing: -0.01em; } .gb-prose h3 { font-size: var(--gb-h3); line-height: 1.3; } .gb-prose h4 { font-size: var(--gb-h4); line-height: 1.35; } .gb-prose h5 { font-size: var(--gb-h5); line-height: 1.4; } .gb-prose h6 { font-size: var(--gb-h6); line-height: 1.4; } .gb-prose > :first-child { margin-top: 0; } .gb-lead { font-size: var(--gb-text-lead); line-height: var(--gb-leading-lead); color: var(--gb-ink); } .gb-meta { font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink-muted); } .gb-small{ font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); } .gb-prose a, .gb-link { color: var(--gb-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; } .gb-prose a:hover, .gb-link:hover { color: var(--gb-link-hover); text-decoration-thickness: 2px; } .gb-on-dark a { color: var(--gb-link-on-dark); } .gb-on-dark a:hover { color: var(--gb-link-on-dark-hover); } .gb-prose ul, .gb-prose ol { margin: 0 0 1.1em; padding-left: 1.35em; } .gb-prose li { margin-bottom: 0.4em; } .gb-prose strong { font-weight: 700; } /* ---------- 4. Baustein: Seitenkopf Anbau-Seite ---------- */ /* Verträgt beide Zustände: mit wiederholtem H2 (Ist) und ohne (Ziel). */ .gb-pagehead { margin: 0 0 var(--gb-space-xl); max-width: var(--gb-text-max); } .gb-pagehead__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h1); line-height: 1.15; letter-spacing: -0.015em; color: var(--gb-ink-heading); margin: 0; text-wrap: balance; } /* Seit 13.08.2026 in Gebrauch: der Untertitel unter der H1, auf 71 von 72 Seiten aus der Yoast-Meta-Description. Im BEITRAGSKOPF ist dieselbe Quelle ausgeschlossen (Runde 26) — dort steht der Text im Zweispalter neben dem Leitbild, unmittelbar über einem Inhalt, aus dessen Anfang Yoast die Description teils selbst erzeugt; er stünde wortgleich zweimal. Auf Seiten ist die Lage umgekehrt: 66 von 72 hätten sonst gar keinen Text unter der H1. Die Quelle ist dieselbe, der Ort ist es nicht. */ .gb-pagehead__standfirst { font-size: var(--gb-text-lead); line-height: var(--gb-leading-lead); color: var(--gb-ink); font-weight: 400; margin: var(--gb-space-sm) 0 0; max-width: var(--gb-text-max); } /* Wie beim Intro-Absatz: die 62ch ließen rechts eine Lücke neben dem Inhalt darunter. Wo die schmale Zeile gewollt ist, setzt die Redaktion --narrow. */ .gb-pagehead__standfirst--narrow { max-width: 62ch; } /* Ist-Zustand: das erste H2 wiederholt den Titel. Wird zur Unterzeile herabgestuft, statt als zweite Überschrift zu konkurrieren. */ .gb-pagehead + .gb-prose > h2:first-child.gb-pagehead__echo, .gb-pagehead__echo { font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-ink-muted); margin: 0 0 var(--gb-space-xs); } /* ⚠️ CDs Entwurf 02 zeichnet die Zeile als reinen TEXT (`

Zucchini

`). `inc/gb-beitrag.php` macht daraus einen Link auf das Kategorie-Archiv — eine sinnvolle Ergänzung, aber sie hatte keine Regel: Der Link fiel auf die Browser-Vorgabe zurück und stand am 13.08.2026 blau und unterstrichen über jeder Beitragsüberschrift (Sebastian). Die Zeile soll aussehen wie im Entwurf und sich trotzdem als Link zu erkennen geben — deshalb erst beim Überfahren eine Unterstreichung. */ .gb-pagehead__echo a { color: inherit; text-decoration: none; } .gb-pagehead__echo a:hover, .gb-pagehead__echo a:focus-visible { text-decoration: underline; } /* Intro-Absatz in — stärkste Konvention der Site (40/40). */ .gb-prose > p:first-of-type > strong:only-child, .gb-intro { display: block; font-size: var(--gb-text-lead); line-height: var(--gb-leading-lead); color: var(--gb-ink); font-weight: 700; max-width: var(--gb-text-max); } /* Der Intro-Absatz läuft auf Textbreite mit. Die 62ch waren als Lesekomfort gedacht, lassen auf 975 px aber rechts eine Lücke neben dem Fließtext darunter — der Seitenkopf wirkt dadurch unfertig. Wo die schmale Zeile ausdrücklich gewollt ist (Rechtstexte, Fließtext ohne Bilder), setzt die Redaktion --narrow. */ .gb-intro--narrow { max-width: 62ch; } /* ---------- 5. Baustein: Medien-Zweispalter ---------- */ /* Zwei beliebige Kinder. Liefert eine Spalte nichts — etwa weil ein Shortcode leer bleibt —, wird daraus eine volle Breite statt einer halben Spalte mit Loch daneben. Deshalb :has() statt einer festen Zweispalten-Vorgabe. :where() hält die Spezifität bei 0,1,0: die Regel gewinnt über die Basisregel durch ihre Position, aber jeder Breakpoint schlägt sie weiterhin. Nicht :is() verwenden — das übernimmt die Spezifität seiner Argumente. */ .gb-split { display: grid; gap: var(--gb-gutter); grid-template-columns: 1fr; align-items: start; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-split:where(:has(> :nth-child(2))) { grid-template-columns: 1fr 1fr; } .gb-split--wide-media:where(:has(> :nth-child(2))) { grid-template-columns: 1.15fr 0.85fr; } /* Text führt, Medium begleitet — für Erzähl-Abschnitte */ .gb-split--text-lead:where(:has(> :nth-child(2))) { grid-template-columns: 1.15fr 0.85fr; } /* Kopf des Einzelbeitrags: Leitbild links, Inhaltsverzeichnis rechts. Ohne :has(), anders als alle anderen Modifier — und das ist der Punkt: 24 von 203 Beiträgen haben zu wenige Überschriften für ein Verzeichnis, 1 Beitrag hat kein Bild. In beiden Fällen bliebe das eine Kind sonst über die volle Textbreite stehen: das Bild (110 Quellen sind schmaler als die Spalte) mittig mit Rand links, das Verzeichnis über 975px gegen Sebastians Halbe-Breite-Regel. Zwei Spalten bleiben deshalb zwei Spalten, auch leere. */ .gb-split--posthead { grid-template-columns: 1fr 1fr; } /* Wohin der Text gehört: Mit Inhaltsverzeichnis steht er ÜBER der Zeile aus Bild und Verzeichnis, wie bisher — die Reihenfolge unten entscheidet dann nur, WELCHER Text. Ohne Verzeichnis steht er rechts vom Bild und füllt die zweite Spalte. Die Reihenfolge in beiden Fällen: 1. Steht Text vor der ersten Überschrift des Inhalts, steht dieser Text dort. 2. Sonst bleibt die Spalte neben dem Bild leer. Der Auszug stand hier bis 13.08.2026 als Zwischenstufe; zurückgenommen (Sebastian). Er bleibt das Feld für die Listen (gb-postrow), nicht für den Kopf. Nie die Überschrift: die gehört zu ihrem Abschnitt und wäre in der halben Spalte von dem Text getrennt, den sie ankündigt. Die zweite Spalte bleibt auch leer bestehen — sonst stünde das Bild wieder mittig in 975px statt links auf der Textachse, und das war der Anlass. */ /* Erzähl-Abschnitt mit drei Kindern: Text · Medium · Text. Desktop: Medium rechts, etwas tiefer angesetzt. Mobil: Quellreihenfolge, das Bild landet zwischen den Absätzen. */ .gb-split--flow:where(:has(> :nth-child(3))) { grid-template-columns: 1.15fr 0.85fr; gap: 0 var(--gb-gutter); } .gb-split--flow > :nth-child(1) { grid-column: 1; grid-row: 1; } .gb-split--flow > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; margin-top: var(--gb-space-2xl); } .gb-split--flow > :nth-child(3) { grid-column: 1; grid-row: 2; } /* Liefert ein Shortcode mehr als ein Element, sammeln sich die Reste in der zweiten Spalte statt eine dritte aufzureißen. */ .gb-split:not(.gb-split--flow) > :nth-child(n+2) { grid-column: 2; } /* Rasterkinder tragen keinen eigenen Block-Außenrand: ein Raster verspricht bündige Oberkanten, und .gb-figure bringt aus dem Fließtext margin: lg 0 mit (gemessen: Bild 32px tiefer als das Verzeichnis daneben). Dieselbe Rücksetzung steht bei .gb-textmedia und .gb-figrow; hier fehlte sie. Für ALLE direkten Kinder, nicht nur .gb-figure — der nächste Baustein in einer Spalte hat dasselbe Problem. Nur margin-block, damit ein margin-inline: auto zum Zentrieren erhalten bleibt. --flow ist ausgenommen: dort ist der obere Rand der zweiten Spalte Absicht. */ .gb-split:not(.gb-split--flow) > * { margin-block: 0; } @media (max-width: 782px) { .gb-split, .gb-split--wide-media, .gb-split--text-lead, .gb-split--flow { grid-template-columns: 1fr; gap: var(--gb-space-md); } /* Spalte 2 gibt es nicht mehr — sonst reißt das zweite Kind eine implizite auf. */ .gb-split:not(.gb-split--flow) > :nth-child(n+2) { grid-column: 1; } .gb-split--flow > :nth-child(1), .gb-split--flow > :nth-child(2), .gb-split--flow > :nth-child(3) { grid-column: 1; grid-row: auto; margin-top: 0; } } /* ---------- 6. Baustein: Video 16:9 ---------- */ .gb-video { margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-video__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--gb-green-900); border-radius: var(--gb-radius-md); overflow: hidden; } .gb-video__frame > iframe, .gb-video__frame > video, .gb-video__frame > img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } /* Consent-Tool ersetzt das iframe durch eigenes Markup — defensiv fangen. Randlos: das Vorschaubild soll den Rahmen füllen. Eine eigene Fläche mit Polster ergäbe drei geschachtelte Kästen (unsere, die des Tools, das Bild) und schnitte das Vorschaubild auf 935 × 508 statt 975 × 548 zu. Der Hinweistext bleibt lesbar, weil das Tool einen eigenen halbtransparenten Träger mitbringt. */ .gb-video__frame > *:not(iframe):not(video):not(img) { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gb-space-sm); text-align: center; color: var(--gb-ink); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); box-sizing: border-box; } /* Der Entwurf zeigt den Platzhalter ohne Consent-Tool — dort trägt er die Fläche selbst, damit der Zustand sichtbar ist. */ .gb-video__frame > .gb-video__consent { padding: var(--gb-space-md); background: var(--gb-surface-cream); } /* Borlabs: eigene Flächen und Radien zurücknehmen, Vorschaubild füllend. !important, weil das Cookie-CSS nach dem Theme lädt. */ .gb-video__frame .brlbs-cmpnt-content-blocker, .gb-video__frame .brlbs-cmpnt-cb-preset-c { background: none !important; padding: 0 !important; border-radius: 0 !important; } .gb-video__frame .brlbs-cmpnt-cb-thumbnail, .gb-video__frame .brlbs-cmpnt-cb-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; } .gb-video__consent-title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h4); color: var(--gb-ink-heading); margin: 0; } .gb-video__consent-text { margin: 0; max-width: 46ch; color: var(--gb-ink-muted); } /* Unterschrift unter dem Video. Der häufigste Unterschriften-Fall im Bestand sind Video-, nicht Bildunterschriften — deshalb trägt .gb-video sie selbst, in derselben Form wie .gb-figure. Als
mit
, oder als .gb-video__caption an einem
. ⚠️ AN CD (13.08.2026): Dieser Kommentar sagte „in derselben Form wie .gb-figure", der Code tat das Gegenteil — hier stand `padding-left: 12px; border-left: 2px solid var(--gb-border-strong)`, bei .gb-figure figcaption dagegen ausdrücklich `padding-left: 2px; border-left: 0`. Stehen Bild und Video nebeneinander, trug nur eines der beiden einen senkrechten Strich. Aufgefallen auf der Kartoffel-Seite, als dort erstmals beide Unterschriften als
nebeneinander standen (Sebastian: „die unterschriften sind noch nicht gleich"). Angeglichen an .gb-figure, weil dessen Regel wie die spätere Entscheidung aussieht: `border-left: 0` ist ein ausdrückliches Zurücknehmen, kein Standardwert. 📌 Solange kein Bild danebenstand, war der Unterschied unsichtbar. Zwei Regeln, die sich widersprechen, fallen erst auf, wenn beide gleichzeitig zu sehen sind. */ .gb-video figcaption, .gb-video__caption, .gb-prose .gb-video figcaption, .gb-prose .gb-video__caption { font-family: var(--gb-font-body); font-style: normal; font-weight: 400; font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); margin: var(--gb-space-xs) 0 0; padding-left: 2px; border-left: 0; text-align: left; } /* ---------- 7. Buttons (Vorgriff, hier für Consent nötig) ---------- */ .gb-btn { display: inline-flex; align-items: center; gap: var(--gb-space-xs); font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); line-height: 1; letter-spacing: 0.01em; text-transform: none; padding: 13px 20px; border-radius: var(--gb-radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; background: var(--gb-green-800); color: #fff; transition: background .15s ease, color .15s ease; min-height: 44px; box-sizing: border-box; } .gb-btn:hover { background: var(--gb-green-700); color: #fff; } .gb-btn--secondary { background: transparent; color: var(--gb-green-800); border-color: var(--gb-green-800); } .gb-btn--secondary:hover { background: var(--gb-surface-green); color: var(--gb-green-900); } /* Grundregel für Bilder. Jede gestaltende Bildregel des Systems hängt an einer Hüllklasse (.gb-figure img, .gb-card__media img …) — wo die Hülle fehlt, fehlte bisher JEDE Begrenzung, und zwar lautlos: im Quelltext sieht ein nacktes unauffällig aus, im Browser läuft die Seite waagerecht über. Ohne !important und ohne Präfix, damit jede gezielte Regel sie schlägt; sie ist ein Riegel, keine Gestaltung. */ img { max-width: 100%; height: auto; } /* ---------- 8. Baustein: Bild mit Unterschrift ---------- */ .gb-figure { margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } /* Bilder werden nie hochskaliert: die Quellbreite entscheidet über die Größe. Quelle < 700 px → halbe Spalte (--half), ab 700 px → volle Textbreite (--full). width/height am halten CLS bei 0, auch ohne festes Seitenverhältnis. */ .gb-figure img { display: block; width: auto; height: auto; max-width: 100%; border-radius: var(--gb-radius-md); } .gb-figure--half { max-width: 471px; } /* Leitbild über dem Steckbrief: füllt die Spalte, auch wenn die Quelle schmaler ist. Ausnahme von "nie hochskalieren" — bei einem führenden Bild entschiede sonst die zufällige Dateibreite über die Wirkung des Seitenkopfs. Redaktionsregel: mindestens 800 px Quellbreite, das ist höchstens ein Fünftel Streckung. Darunter besser kein Leitbild als ein weiches. Reicht die Quelle nicht, ist die Reihenfolge: zwei Bilder in .gb-figrow — dann ein Bild neben dem Vorspann — dann kein Bild. ⚠ Für die Hub-Seiten gilt: kein breites Leitbild. Entscheidung Sebastian, 11.08.2026, aus der Bestandslage — alle Hub-Bilder liegen bei 500–600 px Quellbreite, und es gibt nichts nachzuladen. Das ist eine Vorgabe für neue Entwürfe, keine Notlösung für die vier bestehenden Seiten. */ .gb-figure--full { max-width: var(--gb-text-max); } .gb-figure--full img { width: 100%; } /* Einheitlicher Zuschnitt nur dort, wo Bilder in einer Reihe gleich hoch sein sollen */ .gb-figure--crop img { aspect-ratio: 3 / 2; object-fit: cover; } .gb-figure--free img { aspect-ratio: auto; } .gb-figure figcaption, .gb-figure__caption { font-family: var(--gb-font-body); font-style: normal; font-weight: 400; font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); margin-top: var(--gb-space-xs); padding-left: 2px; border-left: 0; text-align: left; } /* Retrofit für die zwei Altstile im eingefrorenen Content: (a) kursiver Absatz direkt nach einem Bild, (b) fremde figcaption. */ .gb-prose figure > figcaption, .gb-prose p > img + br + em, .gb-prose p > img + br + em *, .gb-prose p:has(> img) + p:has(> em:only-child) > em { font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); font-style: normal; margin-top: var(--gb-space-xs); } .gb-caption-legacy, .gb-prose > p > em:only-child { display: block; font-style: normal; font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); margin-top: calc(-1 * var(--gb-space-sm)); } /* Bildreihe */ /* Text neben Bild — für kleine Quellen, die die Spalte nicht füllen. Die Bildspalte ist gedeckelt statt `auto`: bei `auto` bestimmt die Bildunterschrift die Mindestbreite und das Bild schrumpft auf das längste Wort zusammen. */ .gb-textmedia { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--gb-space-lg); align-items: start; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-textmedia--right { grid-template-columns: 1fr minmax(220px, 300px); } /* Video statt Bild: breitere Medienspalte. In den 300 px, die für ein Bild reichen, ist ein Video zu klein, um etwas zu erkennen. */ .gb-textmedia--video { grid-template-columns: 1.15fr 0.85fr; } .gb-textmedia--video.gb-textmedia--right { grid-template-columns: 0.85fr 1.15fr; } .gb-textmedia > .gb-video { margin: 0; width: 100%; max-width: none; } .gb-textmedia--right > .gb-video { order: 2; } .gb-textmedia--right .gb-figure { order: 2; } .gb-textmedia .gb-figure { margin: 0; } .gb-textmedia .gb-figure img { width: 100%; } .gb-textmedia > :not(.gb-figure) > :first-child { margin-top: 0; } @media (max-width: 700px) { .gb-textmedia, .gb-textmedia--right, .gb-textmedia--video, .gb-textmedia--video.gb-textmedia--right { grid-template-columns: 1fr; gap: var(--gb-space-md); } .gb-textmedia--right .gb-figure { order: 0; } .gb-textmedia--right > .gb-video { order: 0; } .gb-textmedia .gb-figure img { width: 100%; } } /* Bildreihe: die Zeile verteilt, der Deckel sitzt an der Figur — je nach Quellbreite 471 px (große Quelle) oder 300 px (--half). Der 3:2-Zuschnitt sorgt für eine gleich hohe Zeile. */ .gb-prose ul.gb-figrow, .gb-prose ol.gb-figrow { list-style: none; padding-left: 0; } .gb-figrow { list-style: none; padding-left: 0; display: grid; gap: var(--gb-space-md); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); justify-items: start; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-figrow .gb-figure { max-width: 471px; width: 100%; } .gb-figrow .gb-figure--half { max-width: 300px; } .gb-figrow .gb-figure { margin: 0; } .gb-figrow .gb-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* Dritte Hülle, dieselbe Regel: in einer Rasterspalte füllt das Bild die Spalte. Ohne das steht eine 300px-Datei in einer 471px-Spalte in Naturgröße und läßt rechts eine Lücke — sichtbar nur bei Quellen, die schmaler als die Spalte sind, deshalb ist es lange nicht aufgefallen. */ .gb-split > .gb-figure img { width: 100%; } /* ---------- 9. Baustein: Inhaltsverzeichnis ---------- */ .gb-toc { background: var(--gb-surface); border: 1px solid var(--gb-border); border-left: 5px solid var(--gb-green-600); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-card); padding: var(--gb-space-md) var(--gb-space-md) var(--gb-space-xs); font-family: var(--gb-font-body); } .gb-toc__title { font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-green-600); margin: 0 0 var(--gb-space-xs); } /* Zähler auf dem Verzeichnis, nicht auf jeder Liste — sonst beginnt ein zweites
    (gruppierte Kapitel) wieder bei 1. */ .gb-toc { counter-reset: gbtoc; } /* Höchstens halbe Breite, ausnahmsweise die volle — nie zwei Drittel. Das war bisher eine Regel über das Markup ("steht in den Entwürfen immer in .gb-split") und damit nicht durchsetzbar: in .gb-textmedia bekam das Verzeichnis die 1fr-Spalte und rund zwei Drittel. Der Deckel wirkt in jeder Hülle, auch in noch nicht gebauten. Volle Breite bewusst: .gb-toc--full. */ .gb-toc { max-width: min(var(--gb-text-max), 480px); } .gb-toc--full { max-width: var(--gb-text-max); } .gb-toc ol { list-style: none; margin: 0; padding: 0; display: block; } .gb-toc li { margin: 0; border-top: 1px solid var(--gb-border); } .gb-toc > ol > li:first-child, .gb-toc ol ol > li:first-child { border-top: 0; } .gb-toc a { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: var(--gb-space-sm); padding: 11px 6px; margin-left: -6px; border-radius: var(--gb-radius-sm); font-size: var(--gb-text-base); line-height: 1.45; color: var(--gb-ink); text-decoration: none; } .gb-toc a::before { counter-increment: gbtoc; content: counter(gbtoc); width: 26px; height: 26px; border-radius: 999px; background: var(--gb-surface-green); color: var(--gb-green-800); font-size: var(--gb-text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; } .gb-toc a:hover { color: var(--gb-link-hover); text-decoration: underline; text-underline-offset: 0.15em; } .gb-toc a:hover::before { background: var(--gb-lime); color: var(--gb-green-900); } .gb-toc li li a { font-size: var(--gb-text-sm); color: var(--gb-ink-muted); } .gb-toc li li a::before { background: transparent; color: var(--gb-ink-muted); } /* Ab acht Einträgen zwei Spalten, aber NUR wo Platz ist — und "Platz" heißt die Breite des Verzeichnisses, nicht die des Fensters. Die alte Fassung fragte das Fenster (@media 782px) und lag deshalb auf allen 29 Seiten falsch: in einer halben Spalte (472px) standen zwei Spalten à 229 und 164px, in denen jede Zeile vierfach umbrach. Die Container-Abfrage entscheidet am Element selbst, also auch dann richtig, wenn dasselbe Verzeichnis einmal in voller Breite und einmal in einer Spalte steht. 560px ist die gemessene Untergrenze, ab der zwei Spalten mehr helfen als der Umbruch schadet. */ .gb-toc--twocol { container-type: inline-size; } @container (min-width: 560px) { .gb-toc--twocol ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gb-space-lg); } .gb-toc--twocol > ol > li:nth-child(2) { border-top: 0; } } /* 11+ Einträge: einklappbar, mobil zu, ab 783px offen. */ .gb-toc--collapsible > summary { list-style: none; cursor: pointer; } .gb-toc--collapsible > summary::-webkit-details-marker { display: none; } /* ---------- 10. Baustein: Fließtext-Abschnitt ---------- */ .gb-section { margin: var(--gb-space-xl) 0; max-width: var(--gb-text-max); scroll-margin-top: var(--gb-scroll-offset); } .gb-section > h2 { margin-top: 0; } /* ---------- 11. Baustein: Produktempfehlung (Affiliate) ---------- NUR Rahmen und Etikett. Das Aussehen des Plugin-Markups gehört ausschließlich Abschnitt 26 — dieser Abschnitt fasst keine aawp-*- Eigenschaften mehr an (Ausnahme: das Entrahmen der EINEN Karte, die direkt im Kasten sitzt, damit kein Rahmen im Rahmen steht). Vorgeschichte: Zeile 482 setzte hier aspect-ratio 1/1, Abschnitt 26 setzt 4/3 auf denselben Bildern. Zwei Regelsätze für dieselben Klassen, Ergebnis waren 470 px hohe Bilder. Regel: neue AAWP-Eigenschaften immer in 26, nie hier. */ .gb-product { position: relative; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-card); padding: var(--gb-space-md); font-family: var(--gb-font-body); } /* .gb-product__label ist am 11.08.2026 ERSATZLOS entfernt (Entscheidung Sebastian). Die Kennzeichnung trägt das Sternchen am Knopf jeder Produktbox — ein zweites Etikett sagt dasselbe noch einmal, und es gab keinen zweiten Fall, für den es gedacht war: wo eine Empfehlung steht, steht ein Knopf. .gb-product bleibt als Hülle für Rahmen und Polster. */ /* Tabelle und Raster bringen ihre eigene Fläche mit — eine Hülle darum ist ein Rahmen um einen Rahmen. Statt es der Redaktion zu merken zu geben, entrahmt sich die Hülle selbst, wenn sie eine dieser Formen enthält. Sie darf dann stehenbleiben, ohne zu schaden: ein Kurzcode, der von "table" auf "list" wechselt, bekommt seinen Rahmen von selbst zurück. */ html body .gb-product:has(.aawp-table), html body .gb-product:has(.aawp-grid) { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* Einzelne Karte direkt im Kasten: kein Rahmen im Rahmen. Nur direkte Kinder — Karten in einem .aawp-grid behalten ihren eigenen Rahmen, sonst verschwimmen mehrere Produkte zu einer Fläche. "html body" wie in Abschnitt 26, sonst gewinnt die später geladene Plugin-Regel den Gleichstand. */ html body .gb-product > .aawp > .aawp-product, html body .gb-product > .aawp-product { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } /* ---------- 14. Site-Chrome: Header und Navigation ---------- */ .gb-header { background: var(--gb-surface); border-bottom: 1px solid var(--gb-border); font-family: var(--gb-font-body); position: sticky; top: 0; z-index: 50; } .gb-header__inner { max-width: var(--gb-content-max); margin: 0 auto; padding: 0 var(--gb-space-md); display: flex; align-items: center; gap: var(--gb-space-lg); min-height: 72px; } .gb-header--sticky .gb-header__inner { min-height: 60px; } .gb-header--sticky .gb-logo img { height: 34px; } .gb-header--sticky .gb-logo__sub { display: none; } .gb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gb-green-800); margin-right: auto; flex: none; } .gb-logo img { display: block; height: 46px; width: auto; } .gb-logo__sub { display: block; font-family: var(--gb-font-body); font-weight: 400; font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-nav { display: flex; align-items: center; gap: var(--gb-space-xs); } .gb-nav__link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: var(--gb-radius-sm); font-size: var(--gb-text-base); font-weight: 700; line-height: 1; color: var(--gb-ink); text-decoration: none; text-transform: none; border-bottom: 2px solid transparent; } .gb-nav__link:hover { color: var(--gb-green-800); background: var(--gb-surface-green); } .gb-nav__link[aria-current="page"], .gb-nav__link--active { color: var(--gb-green-800); border-bottom-color: var(--gb-lime); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .gb-nav__caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); opacity: .65; } .gb-nav__item { position: relative; } .gb-nav__menu { position: absolute; top: 100%; left: 0; min-width: 232px; background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-md); box-shadow: var(--gb-shadow-card-hover); padding: 6px; margin-top: 6px; display: none; z-index: 60; } .gb-nav__item:hover .gb-nav__menu, .gb-nav__item:focus-within .gb-nav__menu { display: block; } /* Der Aufklappzustand hat höhere Spezifität als der Baustein selbst — deshalb steht display hier noch einmal, sonst gewinnt block über jede spätere Anzeigeart. block ist für --mega richtig: CSS-Spalten wirken nicht in einem Grid-Container. */ .gb-nav__item:hover .gb-nav__menu--mega, .gb-nav__item:focus-within .gb-nav__menu--mega { display: block; } .gb-nav__menu a { display: block; padding: 10px 12px; border-radius: var(--gb-radius-sm); font-size: var(--gb-text-sm); line-height: 1.4; color: var(--gb-ink); text-decoration: none; } .gb-nav__menu a:hover { background: var(--gb-surface-green); color: var(--gb-green-800); } /* Dritte Ebene: Gruppen nebeneinander statt einer langen Spalte. "Sorten" hat 6 Gruppen mit rund 30 Nachfahren — als eine Spalte höher als das Fenster. Grid statt columns, damit keine Gruppe mitten im Umbruch reißt. Spaltenzahl aus dem Platz, nicht fest: 1 Gruppe bleibt eine Spalte. */ /* Spaltensatz statt Raster. Im Raster ist eine hohe Zelle (ein Punkt mit Unterliste zwischen zehn Gruppentiteln, Fall "Zubehör") höher als ihre Nachbarn und reißt die Zeile darunter auf. Umsortieren scheidet aus: unter "Anbauen" ist die Reihenfolge Anzucht -> Pflege -> Ernte inhaltlich gewollt. columns fließt in Menüreihenfolge, break-inside hält jede Gruppe zusammen. */ .gb-nav__menu--mega { columns: 3; column-gap: var(--gb-space-md); width: max-content; max-width: min(760px, calc(100vw - 48px)); padding: var(--gb-space-sm); } /* Bis drei Gruppen keine leeren Spalten aufmachen. */ .gb-nav__menu--mega:has(> :nth-child(5)) { columns: 3; } .gb-nav__menu--mega:not(:has(> :nth-child(5))) { columns: 2; max-width: min(560px, calc(100vw - 48px)); } .gb-nav__menu--mega:not(:has(> :nth-child(3))) { columns: 1; max-width: min(300px, calc(100vw - 48px)); } .gb-nav__menu--mega > * { break-inside: avoid; } /* Nach rechts öffnen. ⚠ Nicht die Lösung für breite Mega-Menüs: welcher Menüpunkt "zu weit rechts" sitzt, hängt an der Fensterbreite, und eine feste Klasse ist eine feste Entscheidung für einen beweglichen Fall. Breite Menüs werden an der Navigationsleiste ausgerichtet, nicht am Menüpunkt. Bleibt für schmale Menüs am äußeren rechten Punkt. */ .gb-nav__menu--right { left: auto; right: 0; } .gb-nav__group { break-inside: avoid; } /* Gruppentitel sind echte Seiten und bleiben verlinkt — sie sind für viele das eigentliche Ziel ("Kürbisgewächse"), nicht bloß eine Zwischenzeile. */ .gb-nav__grouptitle, .gb-nav__menu .gb-nav__grouptitle { display: block; padding: 8px 12px 6px; font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-text-sm); line-height: 1.3; color: var(--gb-green-800); text-decoration: none; } .gb-nav__grouptitle:hover { background: var(--gb-surface-green); } /* Nicht jeder Gruppentitel hat eine Seite: beim Zubehör sind die drei Gruppen reine Beschriftung. Dann ein statt — und kein Hover, sonst verspricht die Zeile einen Klick, den sie nicht einlöst. */ .gb-nav__grouptitle--plain, .gb-nav__grouptitle--plain:hover { background: none; cursor: default; color: var(--gb-ink-muted); } .gb-nav__group ul { list-style: none; margin: 0 0 var(--gb-space-xs); padding: 0; } .gb-nav__group ul a { padding: 7px 12px 7px 20px; position: relative; } /* Einrückung mit Haarlinie statt Einzug allein — bei zwei Ebenen nebeneinander ist die Zugehörigkeit sonst nicht ablesbar. */ .gb-nav__group ul { border-left: 1px solid var(--gb-border); margin-left: 12px; } .gb-nav__group ul a { padding-left: 12px; } /* Gemischte Kinder: Einzellinks ohne eigene Gruppe stehen zusammen in einer eigenen Spalte, nicht verstreut zwischen den Gruppen. */ /* Der Reset gehört an JEDE Liste im Menü. Am Mega-Menü hing er falsch: ein Menüpunkt mit elf Kindern ohne Enkel ist kein Mega-Menü und bekam Punkte. */ .gb-nav__menu ul { list-style: none; margin: 0; padding: 0; } .gb-nav__menu--mega > ul { break-inside: avoid; } .gb-search { display: flex; align-items: center; gap: 6px; flex: none; } /* Icon-Button — quadratisch, 44px, für Suche und Shop in der Kopfzeile */ .gb-iconbtn { width: 44px; height: 44px; flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--gb-surface); color: var(--gb-green-800); border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-sm); cursor: pointer; text-decoration: none; padding: 0; } .gb-iconbtn:hover { background: var(--gb-surface-green); color: var(--gb-green-900); border-color: var(--gb-green-800); } .gb-iconbtn:active { background: var(--gb-surface-cream); } .gb-iconbtn .gb-icon { font-size: 19px; line-height: 1; } /* Eigenes IcoMoon-Set, self-hosted. Klassen folgen den vorhandenen Namen. */ .gb-icon { font-family: 'gb-icons'; font-style: normal; font-weight: 400; speak: never; display: inline-block; } /* Suchfeld, das sich aus dem Icon-Button öffnet */ .gb-search__panel { display: flex; align-items: center; gap: 6px; background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-card-hover); padding: var(--gb-space-xs); } .gb-search__panel input[type="search"] { border: 0; width: 260px; } .gb-search__panel input[type="search"]:focus { outline: none; } .gb-search__panel:focus-within { border-color: var(--gb-green-600); } .gb-search--inline { flex-wrap: wrap; } .gb-search input[type="search"] { min-height: 44px; box-sizing: border-box; border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-pill); padding: 0 16px; font-family: var(--gb-font-body); font-size: var(--gb-text-sm); color: var(--gb-ink); background: var(--gb-surface); width: 190px; min-width: 0; max-width: 100%; } .gb-search input::placeholder { color: var(--gb-ink-soft); } /* ⚠️ Der Absende-Knopf des KERN-Suchblocks. * * `wp:search` bringt einen eigenen Knopf mit (`.wp-block-search__button * .wp-element-button`). Fuer den gab es hier keine Regel — und WordPress' * Vorgabe schlug durch: gemessen am 13.08.2026 in der Blog-Filterzeile * `rgb(50, 55, 60)`, eckig, Schriftgewicht 400, neben einem Suchfeld mit * Pillenradius. Der Design-System-Knopf daneben traegt `rgb(26, 77, 14)`, * `999px` und 700 (Sebastian: „der Button war schon einmal anders"). * * ⚠️ Bewusst KEINE Kopie der .gb-btn-Deklarationen. Ein zweiter Satz Werte * waere genau die Doppelpflege, an der so etwas wieder auseinanderlaeuft — * stattdessen erbt der Knopf hier dieselben Werte aus denselben Tokens. * Die Groesse entspricht .gb-btn--sm, weil er neben einem 44px-Feld sitzt. */ .gb-search .wp-block-search__button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-xs); line-height: 1; letter-spacing: 0.01em; padding: 9px 14px; min-height: 40px; border-radius: var(--gb-radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; background: var(--gb-green-800); color: #fff; transition: background .15s ease, color .15s ease; box-sizing: border-box; margin: 0; } .gb-search .wp-block-search__button:hover { background: var(--gb-green-700); color: #fff; } .gb-search .wp-block-search__button:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } /* Optik gemeinsam mit .gb-iconbtn — der Burger ist der vierte Knopf derselben Gruppe. Mit --gb-border wirkte sein Rahmen neben den anderen wie ein Fehler. */ .gb-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--gb-surface); border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-sm); cursor: pointer; flex-direction: column; gap: 4px; padding: 0; } .gb-burger span { display: block; width: 20px; height: 2px; background: var(--gb-green-800); border-radius: 2px; } /* Vierter Knopf derselben Gruppe — also auch derselbe Zustand. Ein Knopf, der als einziger nicht reagiert, liest sich als defekt. */ .gb-burger:hover { background: var(--gb-surface-green); border-color: var(--gb-green-800); } .gb-burger:hover span { background: var(--gb-green-900); } .gb-burger:active { background: var(--gb-surface-cream); } @media (max-width: 1024px) { /* Nur die Hauptnavigation weicht dem Burger — die Schnellzugriffe bleiben. Suche, Kalender und Shop sind die drei meistgenutzten Ziele; sie hinter zwei Klicks zu legen wäre auf dem Hauptgerät die falsche Reihenfolge. */ .gb-nav { display: none; } .gb-burger { display: flex; } /* Die drei Schnellzugriffe und der Burger sind eine Gruppe rechts — sonst schiebt der Abstand der Kopfzeile den Burger sichtbar von ihnen weg. */ .gb-header__inner { gap: 4px; padding: 0 var(--gb-space-sm); } .gb-header__inner .gb-logo { margin-right: auto; } .gb-search:not(.gb-search--inline) { gap: 4px; } } /* Sehr schmal: keiner der vier Knöpfe fällt weg, sie werden kleiner. 44 px ist die Untergrenze für Finger — 40 px mit 4 px Abstand bleibt darüber, weil die Trefferfläche bis zur Nachbarkante reicht. */ @media (max-width: 400px) { .gb-header__inner { gap: 2px; } .gb-search:not(.gb-search--inline) { gap: 2px; } .gb-search:not(.gb-search--inline) .gb-iconbtn, .gb-burger { width: 40px; height: 40px; } .gb-logo img { height: 34px; } .gb-logo__sub { display: none; } } /* Schaltbare Overlays: geschlossen, solange .is-open fehlt. Am ATTRIBUT, nicht an der Bausteinklasse — .gb-search__panel kommt auf der 404-Seite als normal sichtbares Formular vor und wäre sonst dort unsichtbar. Wer ein Overlay schaltbar macht, setzt data-gb-panel bzw. data-gb-scrim. ⚠ Regel für alles mit position: fixed — es MUSS einen geschlossenen Zustand haben. Ein fehlender Zustand macht hier nicht bloß eine Stelle unschön, sondern legt sich über die ganze Seite. Derzeit betroffen: .gb-mobilenav (z 90) und .gb-scrim (z 80), beide über die Attribute unten abgedeckt. */ [data-gb-panel]:not(.is-open), [data-gb-scrim]:not(.is-open) { display: none; } /* Abdeckung hinter dem offenen Panel. z-index unter .gb-mobilenav (90). */ .gb-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(26, 61, 29, 0.45); border: 0; padding: 0; cursor: pointer; } /* An , solange ein Panel offen ist — sonst scrollt der Hintergrund mit. */ .gb-panel-open { overflow: hidden; } /* Mobile-Menü — volle Fläche, 52px hohe Zeilen */ .gb-mobilenav { position: fixed; inset: 0; background: var(--gb-surface); z-index: 90; display: flex; flex-direction: column; font-family: var(--gb-font-body); } .gb-mobilenav__head { display: flex; align-items: center; justify-content: space-between; padding: var(--gb-space-sm) var(--gb-space-md); border-bottom: 1px solid var(--gb-border); min-height: 72px; box-sizing: border-box; } .gb-mobilenav__close { width: 44px; height: 44px; border-radius: var(--gb-radius-sm); border: 1px solid var(--gb-border); background: transparent; color: var(--gb-green-800); font-size: 20px; line-height: 1; cursor: pointer; } .gb-mobilenav__list { list-style: none; margin: 0; padding: var(--gb-space-xs) var(--gb-space-md); overflow-y: auto; } .gb-mobilenav__list a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--gb-border); font-size: var(--gb-text-lead); font-weight: 700; color: var(--gb-ink); text-decoration: none; } .gb-mobilenav__list a:hover { color: var(--gb-green-800); } .gb-mobilenav__list ul { list-style: none; margin: 0 0 var(--gb-space-xs); padding: 0 0 0 var(--gb-space-sm); } .gb-mobilenav__list ul a { font-size: var(--gb-text-base); font-weight: 400; min-height: 48px; color: var(--gb-ink-muted); } /* Beschriftung statt Link — dieselbe Zeile, ohne Klickversprechen. */ .gb-mobilenav__label { display: flex; align-items: center; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--gb-border); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-ink-soft); } /* Dritte Ebene: eine Stufe weiter eingerückt, an einer Haarlinie statt nur durch Einzug — bei drei Stufen untereinander trägt Einzug allein nicht mehr. 44 px bleibt die Untergrenze, tiefer wird nicht gestaffelt. */ .gb-mobilenav__list ul ul { margin: 0 0 var(--gb-space-xs); padding-left: var(--gb-space-sm); border-left: 1px solid var(--gb-border); } /* 15 px, nicht die Systemstufe "Small" (13 px): die ist für Meta-Text gedacht, ein Navigationsziel darf nicht darauf fallen. */ /* Zusatz an einem Menüpunkt, der statt Unterpunkten in ein Verzeichnis führt. Er sagt, was dort wartet — sonst wirkt der Punkt ärmer als die Nachbarn. */ .gb-mobilenav__hint { display: block; margin-top: 2px; font-size: var(--gb-text-sm); font-weight: 400; color: var(--gb-ink-muted); } /* Ebene 3 kommt mobil nicht mehr vor — wo sie lang würde, führt der Punkt in ein Verzeichnis. Die Regel bleibt als Absicherung: Erbt ein Untermenü aus WordPress doch einmal eine dritte Ebene, fällt sie nicht auf 18 px zurück. */ .gb-mobilenav__list ul ul a { font-size: 15px; min-height: 44px; } /* Der Gruppentitel führt seine Kinder an, statt wie ein Geschwister zu wirken. */ .gb-mobilenav__list ul > li > a:not(:only-child) { font-weight: 700; color: var(--gb-ink); } .gb-mobilenav__foot { margin-top: auto; padding: var(--gb-space-md); border-top: 1px solid var(--gb-border); } /* ---------- 15. Buttons — Größen und Zustände ---------- */ .gb-btn:active { background: var(--gb-green-900); } .gb-btn--secondary:active { background: var(--gb-surface-green); } .gb-btn--ghost { background: transparent; color: var(--gb-link); border-color: transparent; padding-left: 8px; padding-right: 8px; } .gb-btn--ghost:hover { background: var(--gb-surface-cream); color: var(--gb-link-hover); } .gb-btn--sm { padding: 9px 14px; min-height: 40px; font-size: var(--gb-text-xs); } .gb-btn--lg { padding: 16px 26px; min-height: 52px; font-size: var(--gb-text-base); } .gb-btn--block { display: flex; width: 100%; justify-content: center; } .gb-btn[disabled], .gb-btn--disabled { background: var(--gb-surface-cream); color: var(--gb-ink-soft); border-color: transparent; cursor: not-allowed; } .gb-on-dark .gb-btn { background: var(--gb-lime); color: var(--gb-green-900); } .gb-on-dark .gb-btn:hover { background: #b6d661; color: var(--gb-green-900); } /* Buttons im Fließtext: .gb-prose a ist spezifischer als .gb-btn und würde sonst Linkfarbe und Unterstreichung durchdrücken. */ /* .gb-prose h3 (0,2,1) schlägt .gb-card__title (0,1,0) — Kartentitel würden sonst Prosa-Abstände und -Größe erben. */ .gb-prose .gb-card__title { margin: 0; font-size: var(--gb-h4); line-height: 1.3; } .gb-prose a.gb-btn { color: #fff; text-decoration: none; } .gb-prose a.gb-btn:hover { color: #fff; text-decoration: none; } .gb-prose a.gb-btn--secondary, .gb-prose a.gb-btn--secondary:hover { color: var(--gb-green-800); } .gb-prose a.gb-btn--ghost, .gb-prose a.gb-btn--ghost:hover { color: var(--gb-link); } .gb-prose a.gb-iconbtn, .gb-prose a.gb-iconbtn:hover { color: var(--gb-green-800); text-decoration: none; } /* ---------- 16. Footer ---------- */ .gb-footer { background: var(--gb-green-900); color: var(--gb-ink-on-dark); font-family: var(--gb-font-body); font-size: var(--gb-text-base); line-height: 1.7; container-type: inline-size; } .gb-footer__inner { max-width: var(--gb-content-max); margin: 0 auto; padding: var(--gb-space-2xl) var(--gb-space-md) var(--gb-space-lg); display: grid; gap: var(--gb-space-lg); grid-template-columns: 1.15fr 1fr 1fr 1fr; } .gb-footer h2, .gb-footer__title { font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-lime); margin: 0 0 var(--gb-space-sm); } .gb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .gb-footer a { color: var(--gb-ink-on-dark); text-decoration: none; display: inline-block; padding: 5px 0; } .gb-footer a:hover { color: var(--gb-lime); text-decoration: underline; text-underline-offset: 0.15em; } .gb-footer__intro { margin: 0; max-width: 40ch; color: var(--gb-ink-on-dark); } .gb-footer__bar { border-top: 1px solid rgba(232,228,216,0.18); max-width: var(--gb-content-max); margin: 0 auto; padding: var(--gb-space-md); display: flex; flex-wrap: wrap; gap: var(--gb-space-xs) var(--gb-space-md); align-items: center; justify-content: space-between; font-size: var(--gb-text-xs); color: var(--gb-ink-on-dark-muted); } .gb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gb-space-md); align-items: center; } .gb-footer__note { max-width: 62ch; } .gb-footer__bar a { font-size: var(--gb-text-xs); color: var(--gb-ink-on-dark-muted); } /* Container Queries: der Footer richtet sich nach seiner eigenen Breite, nicht nach dem Viewport. */ @container (max-width: 1100px) { .gb-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } } @container (max-width: 900px) { .gb-footer__inner { grid-template-columns: 1fr 1fr; } } @container (max-width: 560px) { .gb-footer__inner { grid-template-columns: 1fr; gap: var(--gb-space-md); } .gb-footer__bar { flex-direction: column; align-items: flex-start; } } /* ---------- 17. Beitrag: Kopf, Meta, Autor, Navigation ---------- */ .gb-post { max-width: var(--gb-text-max); } .gb-post__head { margin: 0 0 var(--gb-space-lg); } .gb-post__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h1); line-height: 1.15; letter-spacing: -0.015em; color: var(--gb-ink-heading); margin: 0; text-wrap: balance; } .gb-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-xs) var(--gb-space-md); margin-top: var(--gb-space-sm); font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-post__meta a { color: var(--gb-link); } .gb-share { display: flex; gap: 6px; } .gb-share .gb-iconbtn { width: 36px; height: 36px; border-color: var(--gb-border); } .gb-hero { margin: 0 0 var(--gb-space-lg); } .gb-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gb-radius-lg); } /* Halbbreite Fassung für den Beitragskopf. Bewusst NICHT .gb-figure: das Leitbild ist über seine Rolle definiert, nicht über seine Breite — sonst trüge dieselbe Seite zwei Leitbild-Bildsprachen, je nach Anordnung, und mockup-diff meldete gb-hero auf 203 Beiträgen als fehlend. 16:9 und --gb-radius-lg bleiben deshalb unverändert; der Bestand liegt ohnehin überwiegend in 16:9 vor. In 472px Spaltenbreite wird eine 500px-Quelle mit 0,94x abgebildet, also nicht hochgerechnet. Kein max-width: die 1fr-Spalte deckelt selbst. Über sechs Fensterbreiten gemessen (13.08.2026) wächst sie nie über 471,5px, weil --gb-text-max den Behälter bei 975px hält. Ein fester Deckel von 471px machte das Bild nur 0,5px schmaler als das Verzeichnis daneben — auf 203 Beiträgen. Gestapelt entfällt width: 100% — eine 500px-Quelle in 683px Spalte wäre 1,37x gestreckt, das verletzt die Redaktionsregel an .gb-figure--full. Das Bild steht dann linksbündig auf der Textachse, nicht mittig. */ .gb-hero--split { margin: 0; } @media (max-width: 782px) { .gb-hero--split img { width: auto; max-width: 100%; } } .gb-author { display: grid; grid-template-columns: 72px 1fr; gap: var(--gb-space-md); align-items: center; background: var(--gb-surface-cream); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); margin: var(--gb-space-xl) 0; max-width: var(--gb-text-max); } .gb-author img { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; display: block; } .gb-author__name { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h4); color: var(--gb-ink-heading); margin: 0 0 4px; } .gb-author p { margin: 0; font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink); } .gb-prevnext { display: flex; justify-content: space-between; gap: var(--gb-space-md); border-top: 1px solid var(--gb-border); padding-top: var(--gb-space-md); margin: var(--gb-space-xl) 0 0; max-width: var(--gb-text-max); } /* ---------- 18. Kommentare ---------- */ .gb-comments { margin: var(--gb-space-2xl) 0 0; max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-comments__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h3); color: var(--gb-ink-heading); margin: 0 0 var(--gb-space-md); } .gb-comments ol { list-style: none; margin: 0; padding: 0; } .gb-comment { border-top: 1px solid var(--gb-border); padding: var(--gb-space-md) 0; } .gb-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gb-space-xs) var(--gb-space-sm); margin-bottom: 6px; } .gb-comment__author { font-weight: 700; color: var(--gb-ink-heading); font-size: var(--gb-text-base); } .gb-comment__date { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-comment__reply { font-size: var(--gb-text-xs); color: var(--gb-link); margin-left: auto; } .gb-comment__body { font-size: var(--gb-text-base); line-height: var(--gb-leading-body); color: var(--gb-ink); margin: 0; } .gb-comment ol { margin-top: var(--gb-space-md); padding-left: var(--gb-space-md); border-left: 2px solid var(--gb-surface-green); } /* Formular */ .gb-form { display: grid; gap: var(--gb-space-sm); margin-top: var(--gb-space-md); } .gb-form label { font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink); } .gb-form input[type="text"], .gb-form input[type="email"], .gb-form input[type="url"], .gb-form textarea { font-family: var(--gb-font-body); font-size: var(--gb-text-base); color: var(--gb-ink); border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-md); padding: 11px 14px; min-height: 44px; box-sizing: border-box; background: var(--gb-surface); } .gb-form textarea { min-height: 132px; resize: vertical; line-height: 1.6; } .gb-form__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gb-space-sm); } .gb-form__check { display: flex; align-items: flex-start; gap: var(--gb-space-xs); font-size: var(--gb-text-sm); font-weight: 400; color: var(--gb-ink-muted); } .gb-form__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gb-green-700); } @media (max-width: 700px) { .gb-form__row { grid-template-columns: 1fr; } } /* ---------- 19. Karte — eine Karte, Modifier für alles ---------- */ .gb-card { display: flex; flex-direction: column; gap: var(--gb-space-xs); background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-card); padding: var(--gb-space-md); position: relative; height: 100%; box-sizing: border-box; font-family: var(--gb-font-body); } .gb-card__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: 0; } .gb-card__text { font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink); margin: 0; } .gb-card__meta { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); margin: 0; } /* Verlinkt: ganze Karte klickbar — der Link sitzt NUR am Titel und wird über ::after auf die Kartenfläche gedehnt. Kein Blockelement in einem : wpautop zerreißt solches Markup zu

    …

    . */ .gb-card--link { cursor: pointer; position: relative; } .gb-card--link:hover { box-shadow: var(--gb-shadow-card-hover); border-color: rgba(42,74,30,0.22); } .gb-card--link .gb-card__title a { color: var(--gb-ink-heading); text-decoration: none; } .gb-card--link .gb-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .gb-card--link:hover .gb-card__title a { color: var(--gb-green-700); } .gb-card--link:focus-within { outline: 3px solid var(--gb-focus); outline-offset: 2px; } .gb-card--link .gb-card__title a:focus-visible { outline: none; } /* Die ::after-Fläche ist positioniert, die Geschwister im Kartenkörper sind es nicht — dadurch deckt sie jeden weiteren Link in der Karte ab. Betrifft die Tag-Listen der Hub-Karten (Vorlage 06) und die aufklappbare Sortenkarte. position:relative hebt diese Kinder über die Fläche, ohne z-index-Stapel. NICHT ausreichend für Karten mit ganzer Produktbox: dort deckt die Fläche weiterhin Bild und Preiszeile ab — solche Karten tragen kein --link. */ .gb-card--link :where(.gb-taglist a, .gb-card__neighbours a, .gb-card__more, .gb-btn) { position: relative; } /* Gedämpfte Karte: cremefarbene Fläche statt weiß, für die Karte, die eine Reihe abschließt statt in ihr mitzuzählen ("Alle Sorten"). Im Entwurf stand der Hexwert inline — es ist --gb-surface-cream. */ .gb-card--soft { background: var(--gb-surface-cream); } /* Hervorgehobene Einstiegskarte: grün getönt und über zwei Spalten. Stand zweimal zeichengleich inline in den Entwürfen 05 und 17 (#dff0d4 ist --gb-surface-green, der Rahmen war die kräftigere Fassung von --gb-border). Der Umbruch auf eine Spalte ist am Ende von Abschnitt 34 abgedeckt: .gb-cards > .gb-card { grid-column: auto !important } — ohne das reißt span 2 mobil eine implizite zweite Spalte auf. */ .gb-card--featured { grid-column: span 2; background: var(--gb-surface-green); border-color: var(--gb-border-card-strong); } /* Die Icon-Kachel trägt selbst --gb-surface-green (siehe .gb-card__icon weiter unten). Auf der getönten Karte stünde Grün auf Grün — die Kachel verschwindet, sichtbar bleibt nur das Icon. Auf getönter Fläche kehrt sie sich also um: weiße Kachel, grünes Icon. Stand in Entwurf 05 als style="background:#fff" am Element und ist beim Herausziehen des Modifiers liegengeblieben. */ .gb-card--featured .gb-card__icon { background: var(--gb-surface); } /* Phasenkarte: Nummernscheibe links, Text rechts — für kurze Folgen, die eine Reihenfolge haben ("Phase 1: Anzucht in der Wohnung", "Phase 2: Anbau auf dem Balkon"). Die einzige Karte, die querliegt statt zu stapeln; deshalb ein Modifier und keine zweite Karte. Erwartet zwei direkte Kinder: die .gb-card__num und einen Körper, der Titel, Text und Liste zusammenhält. Sie stapelt NICHT im Raster — sie steht in der Textspalte, volle Breite, und behält den Nebeneinander-Aufbau auch mobil (34px Scheibe + 20px Abstand passen bei 375px). Text eine Stufe größer als in der Rasterkarte: sie trägt hier den Abschnitt, nicht eine Kachel darin. */ .gb-card--phase { flex-direction: row; align-items: flex-start; gap: var(--gb-space-md); height: auto; } .gb-card--phase > .gb-card__num { flex: none; } /* min-width:0 statt flex:1 — ohne das gibt ein langes Wort im Text dem Körper eine Mindestbreite und drückt die Karte über die Spalte hinaus. */ .gb-card--phase > :not(.gb-card__num) { min-width: 0; } .gb-card--phase .gb-card__title { margin-bottom: var(--gb-space-2xs); } .gb-card--phase .gb-card__text { font-size: var(--gb-text-base); } /* Abstand nach unten, außer die Karte beendet ihren Container. Erste Fassung war .gb-card--phase + .gb-card--phase { margin-top } — richtig gedacht, aber sie passte auf nichts: im echten Inhalt folgen zwei Phasenkarten nie unmittelbar, zwischen Phase 1 und Phase 2 steht, was man nach Phase 1 braucht (Tipp-Kasten, Produktbox). Diese Fassung deckt beide Fälle mit einer Zeile: Im Blockfluss fällt der Rand mit dem oberen Rand des Nachbarn zusammen (der größere gewinnt, sichtbar ändert sich also nichts, wo heute schon ein Abstand steht), und wo ein Element ohne eigenen Rand folgt, stoßen die Karten nicht mehr aneinander. Hinter der letzten Karte bleibt nichts stehen. */ .gb-card--phase:not(:last-child) { margin-bottom: var(--gb-space-md); } /* Achse 1: Bild, Icon oder Nummer */ .gb-card__media { margin: calc(-1 * var(--gb-space-md)) calc(-1 * var(--gb-space-md)) var(--gb-space-xs); } /* ⚠️ Die Zeile darüber allein reicht NICHT, sobald die Karte ein Block-Group ist (`is-layout-flow`) und das Bild ihr erstes Kind. WordPress liefert dann inline in der Seite: :root :where(.is-layout-flow) > :first-child { margin-block-start: 0; } Spezifität 0,2,0 gegen unsere 0,1,0 — der obere Rand wird auf 0 gesetzt, links und rechts bleiben bei −20 px. Sichtbar war das als heller Spalt zwischen Kartenrand und Bild, während die Seiten bündig sassen (Sebastian, 13.08.2026, „Ähnliche Beiträge"). Die abgerundeten OBEREN Ecken des Bildes verraten, dass es bündig gemeint war. ⚠️ Bewusst 0,3,0 statt eines `!important`: Die Regel muss die WordPress-Zeile schlagen, aber weiterhin von einer gezielteren schlagbar bleiben. Und bewusst `margin-block-start` — dieselbe Eigenschaft, die überschrieben wird; eine Kurzform würde je nach Reihenfolge wieder danebengehen. */ .gb-card > .gb-card__media:first-child { margin-block-start: calc(-1 * var(--gb-space-md)); } .gb-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gb-radius-lg) var(--gb-radius-lg) 0 0; } .gb-card__icon { width: 44px; height: 44px; border-radius: var(--gb-radius-md); background: var(--gb-surface-green); color: var(--gb-green-800); display: flex; align-items: center; justify-content: center; font-size: 20px; } .gb-card__num { width: 34px; height: 34px; border-radius: 999px; background: var(--gb-green-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--gb-text-sm); font-weight: 700; } /* Achse 3: Zusatz — Sublinks, CTA oder Pfeil */ .gb-card__sublinks { list-style: none; margin: var(--gb-space-xs) 0 0; padding: 0; display: grid; gap: 2px; } .gb-card__sublinks a { font-size: var(--gb-text-sm); color: var(--gb-link); text-decoration: none; padding: 4px 0; display: inline-block; } .gb-card__sublinks a:hover { text-decoration: underline; } .gb-card__foot { margin-top: auto; padding-top: var(--gb-space-sm); } .gb-card__arrow { margin-top: auto; padding-top: var(--gb-space-sm); font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-link); } .gb-card__arrow::after { content: " →"; } .gb-cards { display: grid; gap: var(--gb-space-md); margin: var(--gb-space-lg) 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-width: var(--gb-text-max); } /* ---------- 20. Produktbox als Tabelle (AAWP-Vergleich) ---------- */ .gb-product--table { padding: var(--gb-space-xs) var(--gb-space-md) var(--gb-space-md); } .gb-producttable { width: 100%; border-collapse: collapse; font-size: var(--gb-text-sm); } .gb-producttable th { text-align: left; font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-ink-muted); padding: var(--gb-space-sm) var(--gb-space-xs); border-bottom: 1px solid var(--gb-border); } .gb-producttable td { padding: var(--gb-space-sm) var(--gb-space-xs); border-bottom: 1px solid var(--gb-border); vertical-align: middle; } .gb-producttable tr:last-child td { border-bottom: 0; } .gb-producttable img { width: 64px; height: 64px; object-fit: contain; display: block; } .gb-producttable__name { color: var(--gb-ink); font-weight: 700; text-decoration: none; } .gb-producttable__name:hover { color: var(--gb-link-hover); text-decoration: underline; } .gb-producttable__price { white-space: nowrap; color: var(--gb-ink-heading); font-weight: 700; } .gb-producttable__price s { color: var(--gb-ink-muted); font-weight: 400; } @media (max-width: 700px) { .gb-producttable thead { display: none; } .gb-producttable tr { display: grid; grid-template-columns: 64px 1fr; gap: var(--gb-space-xs) var(--gb-space-sm); padding: var(--gb-space-sm) 0; border-bottom: 1px solid var(--gb-border); align-items: center; } .gb-producttable td { border: 0; padding: 0; } .gb-producttable td:first-child { display: none; } .gb-producttable td:nth-child(2) { grid-row: span 3; } } /* ---------- 21. Katalog B: FAQ, CTA, Checkliste, Aktivitäts-Box ---------- FAQ mit schema.org: Die Auszeichnung sitzt auf denselben Elementen wie vorher, nur heißen sie jetzt
    , und der Body-Container. Google akzeptiert Antworten, die in
    zugeklappt liegen.
    Frage?

    Antwort.

    itemprop="text" braucht einen eigenen Wrapper — auf .gb-faq__body säße es auf demselben Element wie acceptedAnswer. */ .gb-faq { margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); border-top: 1px solid var(--gb-border); } .gb-faq details { border-bottom: 1px solid var(--gb-border); } .gb-faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--gb-space-sm); padding: var(--gb-space-md) 0; min-height: 44px; box-sizing: border-box; font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h4); line-height: 1.35; color: var(--gb-ink-heading); } .gb-faq summary::-webkit-details-marker { display: none; } .gb-faq summary::after { content: ""; flex: none; margin-left: auto; margin-top: 8px; width: 10px; height: 10px; border-right: 2px solid var(--gb-green-600); border-bottom: 2px solid var(--gb-green-600); transform: rotate(45deg); transition: transform .15s ease; } .gb-faq details[open] summary::after { transform: rotate(-135deg); } .gb-faq__body { padding: 0 0 var(--gb-space-md); font-size: var(--gb-text-base); line-height: var(--gb-leading-body); color: var(--gb-ink); } .gb-faq__body p { margin: 0 0 0.9em; } .gb-faq__body > :last-child { margin-bottom: 0; } .gb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-md); background: var(--gb-surface-green); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md) var(--gb-space-lg); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-cta__text { flex: 1 1 320px; } /* Blockhülle um den Knopf. Ein als direktes Kind neben .gb-cta__text wäre ein nacktes Inline-Element zwischen Blockelementen — wpautop schließt daran einen Absatz, den es nie geöffnet hat. */ .gb-cta__action { flex: none; } /* __title ist optional. Zulässig ohne, wenn die Abschnittsüberschrift unmittelbar darüber denselben Satz sagt — zwei identische Zeilen übereinander sind schlechter als eine fehlende. Der Baustein braucht dann nichts weiter: der Absatz trägt allein, weil der Knopf die Handlung nennt. Ohne solche Überschrift bleibt der Titel Pflicht. */ .gb-cta__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h4); color: var(--gb-ink-heading); margin: 0 0 4px; } .gb-cta p { margin: 0; font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink); } /* Mehrspaltiges Raster für Inhalt, der KEINE Karte ist. Ohne diese Klasse wird .gb-cards zweckentfremdet (gefunden: drei nackte
    in .gb-cards--3, Raster griff, Karten fehlten) — es war bisher das einzige mehrspaltige Raster im System. Gleiche Spaltenlogik und gleicher Abstand wie .gb-cards, nur ohne Fläche, Rahmen und Polster. Regel: .gb-cards hat immer .gb-card-Kinder. */ .gb-cols { display: grid; gap: var(--gb-space-md); margin: var(--gb-space-lg) 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .gb-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gb-cols > * { min-width: 0; } @media (max-width: 700px) { .gb-cols, .gb-cols--2, .gb-cols--3 { grid-template-columns: 1fr; } } .gb-checklist { list-style: none; margin: var(--gb-space-md) 0; padding: 0; display: grid; gap: var(--gb-space-xs); max-width: var(--gb-text-max); } /* KEIN Raster. Als Raster (24px 1fr) wurde jedes weitere Kind des
  1. eine eigene Zelle: bei
  2. Zeitpunkt: Der Rest…
    3. landete der nackte Text hinter dem in der nächsten Zeile, in der 24px-Spalte — ein Wort je Zeile. Der sichtbare TEXT ändert sich dabei um kein Zeichen, also meldet keine Prüfung etwas. Systemregel daraus: Ein Baustein, dessen Kinder aus dem Editor kommen, darf ihre ANZAHL nicht mitzählen. Marke absolut setzen und mit padding Platz machen — dann ist es gleich, ob der Eintrag ein Textknoten oder fünf Elemente sind. Raster nur, wo das Markup aus einer Vorlage kommt. */ .gb-checklist li { position: relative; padding-left: calc(24px + var(--gb-space-sm)); font-size: var(--gb-text-base); line-height: 1.6; color: var(--gb-ink); } /* Der Haken ist der einzige Zustand — site-weit, ohne Ausnahme (Entscheidung Sebastian, 11.08.2026). Die Checkliste ist die abgehakte MERKREGEL ("Regenwasser ist das beste Gießwasser"), keine Aufgabenliste: ein leeres Kästchen behauptet eine Aufgabe, die es nicht gibt. Von elf Vorkommen im Bestand waren zehn Merkregeln. Eine Variante mit leeren Kästchen für Kriterienlisten zum Selbstankreuzen war gebaut und ist verworfen — solche Listen bleiben schlichte Aufzählungen. .is-done bleibt gültig, aber wirkungslos, damit der Altbestand nicht bricht. */ .gb-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: var(--gb-green-600) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 2px var(--gb-green-600); } .gb-checklist li.is-done::before { background: var(--gb-green-600) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; } /* Verneinende Form: die Gegenliste ("Ungeeignete Abfälle"). Kein leeres Kästchen — das kam als Zustand nicht zurück, sondern ein eigenes Zeichen: ein Kreuz auf gedeckter Fläche. Ein Haken sagt "gilt", das Kreuz sagt "gilt nicht"; ein leeres Kästchen sagt "noch nicht", und das ist hier falsch. Gedacht für zwei Listen nebeneinander in .gb-cols--2. */ .gb-checklist--no li::before { background: var(--gb-surface-cream) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%238f4a12' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: inset 0 0 0 2px var(--gb-orange-ink); } /* Einzelelement, KEIN Container. Der Altbestand hatte einen cremefarbenen Kasten (gb-activity-box) um einen ganzen Abschnitt samt

    ; der entfällt ersatzlos — die Gliederung leistet jetzt der Bereichstrenner, und zwei Flächen übereinander tragen keine zusätzliche Information. Zuordnung: gb-activity-box-item → .gb-activity (je Eintrag einer), gb-activity-box-icon → .gb-activity__icon, gb-activity-box → entfällt. */ /* Zwei Bauformen, ein Baustein — deshalb ein Modifier und keine Regel, die aus dem Vorhandensein einer Überschrift auf die Bauform schließt: Grundform ist der Listeneintrag (Icon links, eine Zeile rechts, mehrere untereinander, keine Fläche — Entscheidung Sebastian, Runde 9 Punkt 4). --kasten ist der Hinweiskasten mit __title; er lebt von der Fläche. */ .gb-activity { display: grid; grid-template-columns: 44px 1fr; gap: var(--gb-space-md); margin: var(--gb-space-md) 0; max-width: var(--gb-text-max); } .gb-activity--kasten { background: var(--gb-surface-lime); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); margin: var(--gb-space-lg) 0; } .gb-activity__icon { width: 44px; height: 44px; border-radius: var(--gb-radius-md); background: var(--gb-surface-green); color: var(--gb-lime-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; } /* Weiße Kachel nur, wo eine Fläche hinter ihr liegt. */ .gb-activity--kasten .gb-activity__icon { background: var(--gb-surface); } .gb-activity__title { font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-lime-ink); margin: 0 0 4px; } .gb-activity p { margin: 0; font-size: var(--gb-text-base); line-height: 1.6; color: var(--gb-ink); } /* Mehrere Einträge in Folge rücken zusammen — sie gehören inhaltlich zusammen, auch ohne den früheren Kasten um sie herum. */ .gb-activity + .gb-activity { margin-top: var(--gb-space-sm); } /* Faktoren-Raster: kurze Sätze mit einer merkbaren Zahl. Für Aufzählungen, die heute als H3-Kette untereinander stehen. */ .gb-keyfacts { display: grid; gap: var(--gb-space-md); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); } .gb-keyfact { display: grid; grid-template-columns: 44px 1fr; gap: var(--gb-space-sm) var(--gb-space-md); align-items: start; background: var(--gb-surface-cream); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); font-family: var(--gb-font-body); } .gb-keyfact__icon { width: 44px; height: 44px; border-radius: var(--gb-radius-md); background: var(--gb-surface); color: var(--gb-green-700); display: flex; align-items: center; justify-content: center; font-size: 20px; } .gb-keyfact__head { display: flex; flex-direction: column; gap: 2px; } .gb-keyfact__label { font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-ink-muted); } .gb-keyfact__value { font-family: var(--gb-font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--gb-ink-heading); margin: 0; } .gb-keyfact__text { grid-column: 1 / -1; margin: 0; font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink); } @media (max-width: 560px) { .gb-keyfact { grid-template-columns: 36px 1fr; } .gb-keyfact__icon { width: 36px; height: 36px; font-size: 17px; } } /* Feste Zweispaltigkeit. Nötig, weil auto-fit bei 975 px Textbreite vier Spalten legt — vier Merkwerte werden dann eine Zeile statt zwei, und die Überschriften brechen. Spaltenzahl ist eine Entscheidung, kein Nebenprodukt. */ .gb-keyfacts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Über die Textbreite — dasselbe wie .gb-cards--full, derselbe Grund. */ .gb-keyfacts--full { max-width: none; } @media (max-width: 700px) { .gb-keyfacts--2 { grid-template-columns: 1fr; } } /* Listenform: bei sehr unterschiedlichen Textlängen. Zahl und Label stehen links in fester Spalte, der Text läuft rechts — keine ungleich hohen Kästen. */ .gb-keyfacts--list { grid-template-columns: 1fr; gap: 0; } .gb-keyfacts--list .gb-keyfact { grid-template-columns: 44px 210px 1fr; align-items: start; background: transparent; border-radius: 0; padding: var(--gb-space-md) 0; border-top: 1px solid var(--gb-border); gap: var(--gb-space-md); } .gb-keyfacts--list .gb-keyfact:last-child { border-bottom: 1px solid var(--gb-border); } .gb-keyfacts--list .gb-keyfact__icon { background: var(--gb-surface-cream); } .gb-keyfacts--list .gb-keyfact__text { grid-column: auto; font-size: var(--gb-text-base); } @media (max-width: 700px) { .gb-keyfacts--list .gb-keyfact { grid-template-columns: 36px 1fr; } .gb-keyfacts--list .gb-keyfact__text { grid-column: 1 / -1; } } /* Kategorie-Chips (Startseite, Sorten-Hub) — padding-left muss die Listen-Basisregel aus .gb-prose schlagen, sonst rücken die Chips ein. */ .gb-prose ul.gb-chips, .gb-prose ol.gb-chips { padding-left: 0; } .gb-chips { display: flex; flex-wrap: wrap; gap: var(--gb-space-xs); margin: var(--gb-space-md) 0; padding: 0; list-style: none; } .gb-chips a { display: inline-flex; align-items: center; gap: var(--gb-space-xs); min-height: 44px; padding: 0 16px; border-radius: var(--gb-radius-pill); background: var(--gb-surface); border: 1px solid var(--gb-border); font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); text-decoration: none; } .gb-chips a:hover { background: var(--gb-surface-green); border-color: var(--gb-green-600); color: var(--gb-green-800); } .gb-chips small { font-weight: 400; color: var(--gb-ink-muted); } /* Kompakt: viele Filter-Chips einer Achse sollen in eine Zeile passen. 36 px statt 44 — vertretbar, weil die Chips waagerecht 10 px Abstand halten und daneben nichts Klickbares liegt. Wann welche Größe: --compact ab drei Filterachsen (Sorten-Hub, vier Achsen, 20 Chips auf 375 px), volle 44 px bei einer einzigen Achse (Kalender). Die 8 px je Chipreihe sind dort der Unterschied, ob der Katalog auf dem Telefon noch angeschnitten sichtbar ist. */ .gb-chips--compact { gap: 7px; } .gb-chips--compact a { min-height: 36px; padding: 0 12px; font-size: var(--gb-text-sm); white-space: nowrap; } .gb-chips--compact small { margin-left: 5px; } /* Aktiver Filter-Chip — als Zustand im Stylesheet, damit auch der Zähler mitfärbt */ .gb-chips a[aria-current="true"] { background: var(--gb-green-800); border-color: var(--gb-green-800); color: #fff; } .gb-chips a[aria-current="true"]:hover { background: var(--gb-green-900); border-color: var(--gb-green-900); color: #fff; } .gb-chips a[aria-current="true"] small { color: rgba(255,255,255,0.78); } /* ---------- 22. 404 ---------- */ .gb-404 { max-width: 62ch; margin: 0 auto; padding: var(--gb-space-2xl) var(--gb-space-md); text-align: center; font-family: var(--gb-font-body); } .gb-404__code { font-family: var(--gb-font-heading); font-weight: 700; font-size: 4rem; line-height: 1; color: var(--gb-lime); margin: 0 0 var(--gb-space-sm); } .gb-404__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h2); line-height: 1.15; color: var(--gb-ink-heading); margin: 0 0 var(--gb-space-sm); } .gb-404 > p:not([class]) { font-size: var(--gb-text-lead); line-height: 1.6; color: var(--gb-ink); margin: 0 auto var(--gb-space-lg); } .gb-404 .gb-chips { justify-content: center; } .gb-stage__hint { font-family: var(--gb-font-body); font-size: var(--gb-text-sm); color: var(--gb-ink-muted); margin: var(--gb-space-md) 0 8px; } /* Herausgestellter Satz — trägt einen Abschnitt ohne eigene Überschrift */ .gb-pullquote { font-family: var(--gb-font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--gb-green-700); margin: var(--gb-space-md) 0; padding-left: var(--gb-space-md); border-left: 3px solid var(--gb-lime); } /* ---------- 23. Kalenderzeile — eine Pflanze pro Zeile, aufklappbar ---------- */ .gb-calendar { display: grid; gap: 10px; margin: var(--gb-space-md) 0; max-width: var(--gb-text-max); } .gb-calrow { background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); padding: 7px 14px; font-family: var(--gb-font-body); } .gb-calrow[open] { background: var(--gb-surface-green); border-color: var(--gb-green-600); } .gb-calrow > summary { list-style: none; cursor: pointer; display: block; } .gb-calrow > summary::-webkit-details-marker { display: none; } .gb-calrow__main { display: grid; grid-template-columns: minmax(148px, 190px) 1fr 36px; gap: 14px; align-items: center; } .gb-calrow__name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: var(--gb-text-base); font-weight: 700; color: var(--gb-ink-heading); } .gb-calrow__name .gb-icon { font-size: 17px; color: var(--gb-green-600); flex: none; } /* Der Name kürzt, die Marke bleibt vollständig */ .gb-calrow__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-calrow__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; } .gb-calrow__cell { height: 20px; border-radius: 6px; background: var(--gb-cal-none); } .gb-calrow__cell--sow { background: var(--gb-cal-sow); } .gb-calrow__cell--harvest { background: var(--gb-cal-harvest); } .gb-calrow__cell--both { background: var(--gb-cal-both); } .gb-calrow__cell--now { box-shadow: inset 0 0 0 2px var(--gb-green-900); } .gb-calrow__toggle { width: 30px; height: 30px; border-radius: 999px; justify-self: end; background: var(--gb-green-600); color: #fff; display: flex; align-items: center; justify-content: center; } .gb-calrow__toggle::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .gb-calrow[open] .gb-calrow__toggle { background: var(--gb-green-800); } .gb-calrow[open] .gb-calrow__toggle::after { margin-top: 3px; transform: rotate(-135deg); } .gb-calrow > summary:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; border-radius: var(--gb-radius-md); } .gb-calrow__info { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gb-space-md) var(--gb-space-lg); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gb-border); } /* Blockhülle um den Knopf, wie .gb-cta__action. */ .gb-calrow__action { flex: none; } .gb-calrow__info dl { display: flex; flex-wrap: wrap; gap: var(--gb-space-md) var(--gb-space-lg); margin: 0; flex: 1 1 auto; } .gb-calrow__fact { display: flex; flex-direction: column; gap: 2px; } .gb-calrow__fact dt { display: flex; align-items: center; gap: 5px; font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-calrow__fact dd { margin: 0; font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); } /* Monatsköpfe bleiben beim Scrollen über der Tabelle stehen. --gb-calmonths-h ist ihre Höhe: 2 × 8px Padding + 1.5 × 12px Zeile + 1px Linie. */ /* Gemessen, nicht gerechnet: 37px Desktop, 65px mobil (zwei Zeilen). Der Wert hier ist der Rückfall — ein Skript, das die Leiste misst und den Wert auf das Wurzelelement schreibt, gewinnt. */ .gb-calendar, .gb-calgroup { --gb-calmonths-h: 37px; } @media (max-width: 700px) { .gb-calendar, .gb-calgroup { --gb-calmonths-h: 65px; } } .gb-calmonths { position: sticky; top: var(--gb-header-h); z-index: 3; display: grid; grid-template-columns: minmax(148px, 190px) 1fr 36px; gap: 14px; padding: 8px 14px; margin-bottom: 0; background: var(--gb-surface); border-bottom: 1px solid var(--gb-border); box-shadow: 0 6px 10px -8px rgba(0,0,0,0.35); } .gb-calmonths__row span { font-weight: 700; } /* Die Kategorie-Überschrift bleibt unter den Monatsköpfen hängen */ .gb-calmonths__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; } /* Fest statt klebend: im Auszug (zwei, drei Zeilen mitten auf der Seite) hätte der Monatskopf nichts, worüber er stehen bleiben könnte. Kleben lohnt erst, wenn unter dem Kopf mehr scrollt als eine Bildschirmhöhe. */ .gb-calmonths--fest { position: static; } .gb-calmonths__row span { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); text-align: center; } @media (max-width: 700px) { .gb-calrow__main, .gb-calmonths { grid-template-columns: 1fr 32px; } .gb-calrow__months { grid-column: 1 / -1; gap: 3px; } .gb-calrow__cell { height: 18px; border-radius: 5px; } .gb-calmonths__row { grid-column: 1 / -1; gap: 3px; } } /* ---------- 24. Startseite: Bühne und Abschnitts-Auftakt ---------- */ .gb-stage { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gb-space-xl); align-items: center; max-width: var(--gb-text-max); margin: 0 0 var(--gb-space-2xl); } .gb-stage__eyebrow { font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-green-600); margin: 0 0 var(--gb-space-xs); } /* Doppelt notiert wie .gb-hubteaser__title, .gb-compare__title und .gb-divider__title: nackt trägt der Selektor 0,1,0 und verliert gegen .gb-prose h1…h6 { margin: 1.5em 0 0.5em } (0,1,1, später im Stylesheet). Der Fehler tarnt sich: weil .gb-stage mittig ausrichtet, macht der geerbte Rand die Textspalte höher als das Bild — es sieht nach falscher Bildausrichtung aus. Die Startseite ist der erste Ort, an dem die Bühne innerhalb von .gb-prose liegt. */ .gb-stage__title, .gb-prose .gb-stage__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: 2.8rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--gb-ink-heading); margin: 0; text-wrap: balance; } .gb-stage__lead { font-size: var(--gb-text-lead); line-height: 1.6; color: var(--gb-ink); margin: var(--gb-space-sm) 0 var(--gb-space-md); max-width: 46ch; } .gb-stage__actions { display: flex; flex-wrap: wrap; gap: var(--gb-space-sm); } .gb-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--gb-radius-xl); } @media (max-width: 782px) { .gb-stage { grid-template-columns: 1fr; gap: var(--gb-space-md); } .gb-stage__title, .gb-prose .gb-stage__title { font-size: 2.2rem; } } .gb-eyebrow { font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-green-600); margin: 0 0 var(--gb-space-2xs); } /* Die Kleinzeile gehört zu der Überschrift, die auf sie folgt — der Abstand darüber steht schon vor ihr. .gb-section > h2 { margin-top: 0 } deckt nur die erste Ebene; eine Ebene tiefer (Spalte eines .gb-split--flow) setzt .gb-prose h2 seine 48 px durch, und die Kleinzeile schwebt frei. Nicht auf :where() absenken: der Selektor muss .gb-prose h2 (0,1,1) schlagen, das Geschwisterpaar trägt 0,2,0 — in :where() wären es 0,1,0. */ .gb-eyebrow + h1, .gb-eyebrow + h2, .gb-eyebrow + h3, .gb-prose .gb-eyebrow + h1, .gb-prose .gb-eyebrow + h2, .gb-prose .gb-eyebrow + h3 { margin-top: 0; } /* Empfehlungszeile über einer Produktbox ("Meine Empfehlung für dich:"). Kam bisher aus AAWPs Custom-CSS-Feld als .aawp::before und musste mit dem Theme-Wechsel weg (es zeigte auf elf Avada-Variablen). Sie kommt NICHT als Pseudo-Element zurück: es ist redaktioneller Text, der übersetzbar, redigierbar und für Vorleseprogramme lesbar sein muss — ein content:-String im Stylesheet ist keines davon. Der Baustein ist die vorhandene .gb-eyebrow, im Markup vor der Box, plus diese Trennlinie. Damit wirkt sie auch bei Tabelle und Raster, die keine .gb-product-Hülle haben. */ .gb-eyebrow--rule { padding-bottom: var(--gb-space-xs); border-bottom: 1px solid var(--gb-border); margin-bottom: var(--gb-space-md); max-width: var(--gb-text-max); } /* ---------- 11a. Baustein: automatischer Empfehlungskasten ---------- Steht auf 202 von 203 Beiträgen und 66 von 72 Seiten, eingesetzt vom Theme-Builder, nicht von der Redaktion — er steht in keinem post_content. Deshalb trägt er einen eigenen Namen, obwohl Rahmen und Polster von .gb-product kommen: Er ist die einzige Produktbox auf der Seite, die kein Satz im Text einführt, und die einzige, deren Stelle niemand redigieren kann. Beides braucht Regeln, die für Boxen im Fließtext falsch wären. */ /* Er steht hinter dem letzten Inhaltsblock, nicht in ihm. Die Kante trennt ihn vom Beitrag, statt ihn wie einen weiteren Abschnitt zu lesen. */ .gb-empfehlungen { border-top: 1px solid var(--gb-border); padding-top: var(--gb-space-lg); } /* Als letztes Element der Seite trägt er keinen Nachlauf — der Abstand zum Fuß kommt von dort. Sonst stehen zwei Außenränder untereinander. */ .gb-empfehlungen:last-child { margin-bottom: 0; } /* KEINE Regel für den Fall "redaktionelle Produktbox unmittelbar davor". Am 13.08.2026 auf Staging gemessen: Bokashi-Eimer, letzte Box endet bei 7502 px, der Kasten beginnt bei 7582 px — 80 px plus die Kante trennen die beiden schon. Der margin-bottom der Box und das padding-top des Kastens fallen nicht zusammen, weil die Kante dazwischen steht. Zwei Lehren, falls die Frage wiederkommt: 1. Ein Nachbarschafts-Selektor reicht nicht in den Inhalt hinein. Die redaktionelle Box steht in .entry-content.gb-prose, der Kasten ist Geschwister dieses Wrappers — nicht der Box darin. 2. .gb-empfehlungen trägt auch .gb-section, und die setzt bereits margin: var(--gb-space-xl) 0. Eine Regel mit demselben Wert hätte nichts geändert; mit einem kleineren hätte sie den Abstand verringert. */ /* Sortenliste: viele kurze Links, kompakt */ .gb-prose ul.gb-taglist { padding-left: 0; } .gb-taglist { display: flex; flex-wrap: wrap; gap: var(--gb-space-xs); list-style: none; margin: var(--gb-space-md) 0; padding: 0; } .gb-taglist a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--gb-radius-pill); background: var(--gb-surface-cream); font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); text-decoration: none; } .gb-taglist a:hover { background: var(--gb-surface-green); color: var(--gb-green-800); } /* Bühnen-Variante: grün getönt, damit sie sich von der langen Sortenliste abhebt */ .gb-taglist--stage a { background: var(--gb-surface-green); border-color: transparent; } .gb-taglist--stage a:hover { background: var(--gb-green-600); color: #fff; } .gb-taglist a.gb-taglist__more { background: transparent; color: var(--gb-link); padding-left: 4px; } .gb-taglist a.gb-taglist__more:hover { background: transparent; color: var(--gb-link-hover); text-decoration: underline; } /* Karten-Variante: Unterthemen in .gb-card als Pillen statt Pfeil-Liste. Kleiner als die Sortenliste, weil sie im Kartenpolster sitzt. */ .gb-card .gb-taglist { margin: var(--gb-space-sm) 0 0; gap: 6px; } .gb-card .gb-taglist a { min-height: 32px; padding: 0 11px; } /* ---------- 12. Baustein: Anbau-Steckbrief ---------- */ .gb-facts { box-sizing: border-box; background: var(--gb-surface); border: 1px solid var(--gb-border); border-left: 5px solid var(--gb-green-600); border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-card); --gb-months-empty: #f0efea; container-type: inline-size; padding: var(--gb-space-md); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-facts__title { font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-green-600); margin: 0 0 var(--gb-space-sm); } .gb-facts__grid { display: grid; gap: 2px var(--gb-space-md); grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); margin: 0; } .gb-facts__item { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; border-top: 1px solid var(--gb-border); } .gb-facts__key { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); letter-spacing: 0.03em; } .gb-facts__val { font-size: var(--gb-text-base); font-weight: 700; color: var(--gb-ink); margin: 0; } .gb-facts__val small { font-weight: 400; font-size: var(--gb-text-sm); color: var(--gb-ink-muted); } .gb-facts__tags { display: flex; flex-wrap: wrap; gap: var(--gb-space-xs); margin: 0 0 var(--gb-space-sm); } .gb-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--gb-radius-pill); background: var(--gb-surface-green); color: var(--gb-green-800); font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.02em; } /* Modifier stehen unmittelbar hinter ihrem Baustein. Bei gleicher Spezifität (beide 0,1,0) entscheidet die Reihenfolge — ein Modifier davor wirkt nie, ohne dass irgendetwas kaputt aussieht. */ .gb-tag--soft { background: var(--gb-surface-cream); border: 1px solid transparent; color: var(--gb-ink-muted); } /* Zwei Hälften im Steckbrief-Rahmen: links Daten, rechts Inhaltsverzeichnis. Container Query — richtet sich nach der Rahmenbreite, nicht nach dem Viewport. */ /* Inhaltsverzeichnis links, Steckbrief rechts — dieselbe Reihenfolge wie schmal, wo das Verzeichnis oben steht. Im Markup bleibt es das zweite Kind. */ .gb-facts__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gb-space-lg); align-items: start; } .gb-facts__split > :nth-child(2) { order: -1; } @container (min-width: 621px) { .gb-facts__split > :nth-child(1) { border-left: 1px solid var(--gb-border); padding-left: var(--gb-space-lg); } } /* Schmal: aus einer langen Karte werden zwei kurze. Das Inhaltsverzeichnis rückt nach oben — es ist der Wegweiser, der Steckbrief das Nachschlagewerk. Der äußere Rahmen tritt zurück, jede Hälfte bekommt einen eigenen. */ /* .gb-facts ist selbst der Query-Container — eine @container-Regel kann ihn nicht treffen, nur seine Nachfahren. Das Zurücksetzen braucht @media. */ /* Der Prosa-Fluss wird zweiter Query-Container, damit die Rücksetzung von .gb-facts an dessen Breite hängt statt am Fenster — sonst behält der Steckbrief in schmalen Demo-Spalten seinen Rahmen. */ /* Zweite .gb-prose-Deklaration, absichtlich: Sie eröffnet nur den Container-Kontext für die Regeln direkt darunter und setzt keine Eigenschaft, die der Baustein oben schon führt. */ .gb-prose { container-type: inline-size; container-name: prose; } @container prose (max-width: 620px) { .gb-facts { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } } @media (max-width: 620px) { .gb-facts { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } } /* Feld über die volle Breite — für Listenwerte wie Mischkultur. */ .gb-facts__item--wide { grid-column: 1 / -1; } .gb-facts__item--wide .gb-facts__val { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; font-size: var(--gb-text-sm); } /* Optionale Felder, die es noch nicht gibt. :empty allein greift nicht — ein Container mit leerem
    ist nicht leer. Besser serverseitig gar nicht ausgeben; diese Regel ist die Absicherung. */ .gb-facts__item:empty, .gb-facts__item:has(dd:empty), .gb-facts__item:has(.gb-facts__val:empty) { display: none; } /* ---------- 13. Baustein: Monatsbalken ---------- */ /* WICHTIG: jede Zeile besteht aus genau 13 Kindern — 1 Beschriftung + 12 Monate. Fehlt eine Zelle, verschiebt der auto-flow die ganze Zeile um einen Monat. */ .gb-months { margin: var(--gb-space-md) 0 0; font-family: var(--gb-font-body); } .gb-months__grid { display: grid; grid-template-columns: 74px repeat(12, 1fr); gap: 3px; align-items: center; } .gb-months__head { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); text-align: center; line-height: 1.4; padding-bottom: 2px; } .gb-months__label { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); padding-right: var(--gb-space-xs); } .gb-months__cell { height: 20px; border-radius: 4px; background: var(--gb-months-empty, var(--gb-cal-none)); } .gb-months__cell--sow { background: var(--gb-cal-sow); } .gb-months__cell--harvest { background: var(--gb-cal-harvest); } .gb-months__cell--both { background: var(--gb-cal-both); } /* Zusammenhängende Zeiträume optisch verbinden — auch über den Jahreswechsel, weil die Verrundung pro Zelle aus den Nachbarn folgt, nicht aus dem Index. */ .gb-months__cell--start { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .gb-months__cell--end { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .gb-months__cell--mid { border-radius: 0; } .gb-months__now { outline: 2px solid var(--gb-green-800); outline-offset: 1px; } .gb-months__legend { display: flex; flex-wrap: wrap; gap: var(--gb-space-md); margin-top: var(--gb-space-sm); font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-months__legend span { display: inline-flex; align-items: center; gap: 6px; } .gb-months__swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } @media (max-width: 560px) { .gb-months__grid { grid-template-columns: 52px repeat(12, 1fr); gap: 2px; } .gb-months__cell { height: 16px; } .gb-months__head { font-size: 10px; } } .gb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Eigenes Fallback-Layout, falls ohne Plugin gerendert */ .gb-product__grid { display: grid; grid-template-columns: 120px 1fr; gap: var(--gb-space-md); align-items: start; } .gb-product__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; } .gb-product__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h4); color: var(--gb-ink-heading); margin: 0 0 6px; } .gb-product__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-sm) var(--gb-space-md); margin-top: var(--gb-space-sm); } .gb-product__foot .gb-meta { flex: 1 0 100%; margin: 0; } .gb-product__price { font-weight: 700; color: var(--gb-ink-heading); font-size: var(--gb-text-lead); } @media (max-width: 560px) { .gb-product__grid { grid-template-columns: 84px 1fr; gap: var(--gb-space-sm); } } /* ---------- 24. Archiv-Bausteine: Trefferliste, Filterzeile, Paginierung ---------- */ /* Trefferzeile: Bild links, Text rechts. Für Blog-Übersicht, Kategorie-Archiv und Suche derselbe Baustein — nur die Metazeile unterscheidet sich. */ .gb-prose ul.gb-postlist { padding-left: 0; } .gb-postlist { display: grid; gap: var(--gb-space-sm); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); padding: 0; list-style: none; } .gb-postrow { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: var(--gb-space-md); align-items: start; padding-bottom: var(--gb-space-md); border-bottom: 1px solid var(--gb-border); font-family: var(--gb-font-body); } .gb-postlist > li:last-child .gb-postrow { border-bottom: 0; padding-bottom: 0; } .gb-postrow__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--gb-radius-sm); background: var(--gb-surface-cream); } .gb-prose .gb-postrow__title, .gb-postrow__title { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-text-lead); line-height: 1.35; color: var(--gb-ink-heading); margin: 0 0 4px; letter-spacing: 0; text-wrap: pretty; } .gb-postrow__title a { color: inherit; text-decoration: none; } .gb-postrow__title a::after { content: ""; position: absolute; inset: 0; } .gb-postrow:hover .gb-postrow__title a { color: var(--gb-green-700); } .gb-postrow:focus-within { outline: 3px solid var(--gb-focus); outline-offset: 4px; border-radius: var(--gb-radius-md); } .gb-postrow__title a:focus-visible { outline: none; } .gb-postrow__text { font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink); margin: 4px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .gb-postrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--gb-space-sm); margin: 0; font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-postrow__meta .gb-icon { font-size: 13px; margin-right: 4px; } /* Marke: die Kategorie eines Treffers, nicht klickbar innerhalb der Zeile. .gb-tag ist EINMAL definiert, oben beim Steckbrief — hier stand eine zweite Fassung mit 3px 10px Polster. Sie ist entfallen: Eine zweite Definition derselben Klasse schneidet jeden Modifier dazwischen ab, .gb-tag--soft war auf 40 Seiten unsichtbar. Die Trefferzeile trägt dieselbe Marke wie der Steckbrief; ein Pixel Polsterunterschied war kein eigener Baustein. */ @media (max-width: 700px) { .gb-postrow { grid-template-columns: 92px 1fr; gap: var(--gb-space-sm); } } /* Filterzeile über der Liste: Suchfeld links, Auswahl rechts */ .gb-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-sm); justify-content: space-between; padding: var(--gb-space-sm) 0; margin: var(--gb-space-md) 0; border-top: 1px solid var(--gb-border); border-bottom: 1px solid var(--gb-border); max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-filterbar__count { font-size: var(--gb-text-sm); color: var(--gb-ink-muted); margin: 0; } /* Trefferzahl und Auswahl gehören als Paar an das rechte Ende. Die Leiste ist space-between: drei gleichrangige Kinder stellen die Auswahl in die Mitte und lassen die Zahl allein dazwischen stehen. Im Entwurf war das ein Stück Markup, in WordPress sind es zwei getrennte Render-Blöcke — die Hülle ist deshalb kein Behelf, sondern die Struktur, die der Entwurf nur nicht zeigen musste. Sie trägt den Namensraum der Leiste und gehört damit hierher, nicht in die Glue: sonst liegt ein .gb-filterbar__*-Element außerhalb des Systems und eine Änderung an .gb-filterbar geht still daran vorbei. */ .gb-filterbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-sm); } @media (max-width: 560px) { .gb-filterbar__group { width: 100%; justify-content: space-between; } .gb-filterbar__group > .gb-select { flex: 1 1 auto; } } /* Die 190px am Suchfeld gelten für die Kopfzeile, wo das Feld neben drei Knöpfen steht. In einer Filterleiste, die mobil die volle Zeile bekommt, bleibt sonst ein Drittel der Breite ungenutzt, während der Text scrollt. */ .gb-filterbar > .gb-search { flex: 1 1 260px; min-width: 0; } .gb-filterbar .gb-search input[type="search"] { flex: 1 1 auto; min-width: 0; } @media (max-width: 560px) { .gb-filterbar, .gb-filterbar > .gb-search { width: 100%; } .gb-filterbar .gb-search input[type="search"] { width: 100%; } } /* Auswahlfeld mit Erklärtext daneben — Nachbarschaftsfilter im Sorten-Hub. Eigener Baustein, weil die Zeile zwei ungleiche Dinge trägt: ein Bedienelement und einen Satz, der es erklärt. Der Satz bricht mobil unter das Feld. */ .gb-hubselect { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-space-xs) var(--gb-space-sm); font-family: var(--gb-font-body); } .gb-hubselect__hint { margin: 0; font-size: var(--gb-text-sm); color: var(--gb-ink-muted); } @media (max-width: 560px) { .gb-hubselect > .gb-select { width: 100%; } } .gb-select { min-height: 44px; box-sizing: border-box; padding: 0 40px 0 14px; border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-pill); background: var(--gb-surface) no-repeat right 14px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5a44' stroke-width='2'/%3E%3C/svg%3E"); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); color: var(--gb-ink); appearance: none; cursor: pointer; } .gb-select:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } /* Paginierung */ .gb-prose ul.gb-pagination { padding-left: 0; } .gb-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--gb-space-xl) 0; padding: 0; list-style: none; font-family: var(--gb-font-body); } .gb-pagination a, .gb-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--gb-border); border-radius: var(--gb-radius-md); font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); text-decoration: none; } .gb-pagination a:hover { background: var(--gb-surface-green); border-color: var(--gb-green-600); color: var(--gb-green-800); } .gb-pagination a:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } .gb-pagination__current { background: var(--gb-green-800); border-color: var(--gb-green-800); color: #fff; } .gb-pagination__gap { border: 0; min-width: 24px; color: var(--gb-ink-muted); font-weight: 400; } .gb-pagination__step { gap: 6px; } /* Hinweisfläche: keine Treffer, Hinweis im Archiv */ .gb-notice { background: var(--gb-surface-cream); border-radius: var(--gb-radius-lg); padding: var(--gb-space-lg); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-notice > :first-child { margin-top: 0; } .gb-notice > :last-child { margin-bottom: 0; } /* Brotkrume */ .gb-prose ol.gb-breadcrumb { padding-left: 0; } .gb-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px var(--gb-space-xs); margin: 0 0 var(--gb-space-md); padding: 0; list-style: none; font-family: var(--gb-font-body); font-size: var(--gb-text-xs); color: var(--gb-ink-muted); } .gb-breadcrumb li + li::before { content: "›"; margin-right: var(--gb-space-xs); color: var(--gb-ink-soft); } .gb-breadcrumb a { color: var(--gb-ink-muted); } .gb-breadcrumb a:hover { color: var(--gb-link-hover); } /* Filterblock des Aussaatkalenders — Suche, Umschalter und Kategorien in einer Fläche */ .gb-calbar { background: var(--gb-surface-cream); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); margin: var(--gb-space-md) 0; max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-calbar .gb-chips { margin: var(--gb-space-sm) 0 0; gap: var(--gb-space-xs); } .gb-calbar .gb-chips li { flex: 1 1 0; } .gb-calbar .gb-chips a { justify-content: center; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; font-size: var(--gb-text-sm); } .gb-calbar .gb-chips a { background: var(--gb-surface); } .gb-calbar .gb-chips a[aria-current="true"] { background: var(--gb-green-800); border-color: var(--gb-green-800); color: #fff; } .gb-calbar .gb-chips a[aria-current="true"]:hover { background: var(--gb-green-900); border-color: var(--gb-green-900); } .gb-calfilter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gb-space-sm); margin: 0; max-width: var(--gb-text-max); } .gb-calfilter > .gb-search { flex: 1 1 auto; align-items: center; gap: var(--gb-space-xs); } .gb-calfilter__right { display: flex; align-items: center; gap: var(--gb-space-sm); flex: none; } /* Suchfeld, Zurücksetzen und Umschalter stehen auf derselben Grundlinie */ .gb-calfilter .gb-btn, .gb-calfilter input[type="search"] { min-height: 44px; } .gb-calfilter .gb-btn--ghost { min-height: 44px; } .gb-calfilter .gb-search input[type="search"] { width: 260px; } @media (max-width: 560px) { .gb-calfilter, .gb-calfilter__right { width: 100%; } .gb-calfilter .gb-search input[type="search"] { width: 100%; } .gb-calfilter__right .gb-select { flex: 1; } } /* Kennzahlenleiste über dem Kalender */ .gb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gb-space-md); margin: var(--gb-space-md) 0; max-width: var(--gb-text-max); font-family: var(--gb-font-body); } .gb-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--gb-surface-green); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); } .gb-stat__icon { font-size: 20px; color: var(--gb-green-700); margin-bottom: 4px; } .gb-stat__value { font-family: var(--gb-font-heading); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--gb-ink-heading); } .gb-stat__label { font-size: var(--gb-text-sm); color: var(--gb-ink-muted); } @media (max-width: 560px) { .gb-stats { grid-template-columns: 1fr; gap: var(--gb-space-xs); } } /* Nummerierte Schrittfolge — Anleitung, Anzuchtschritte */ .gb-prose ol.gb-steps { padding-left: 0; } .gb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gb-space-sm); font-family: var(--gb-font-body); } .gb-steps > li { display: grid; grid-template-columns: 34px 1fr; gap: var(--gb-space-sm); align-items: start; } .gb-steps__num { width: 34px; height: 34px; border-radius: 999px; flex: none; background: var(--gb-green-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--gb-text-sm); font-weight: 700; } .gb-steps p { margin: 0; font-size: var(--gb-text-sm); line-height: 1.6; } .gb-steps strong { color: var(--gb-ink-heading); } /* "Was kann ich jetzt säen?" — der Einstieg in den laufenden Monat. Zwei Teile, weil zwei verschiedene Fragen dahinterstehen: 1. WO stehe ich im Jahr — die Spalte des laufenden Monats ist ohne Zutun markiert. aria-current="date" am Monatskopf, serverseitig gesetzt; kein Klick nötig, kein JavaScript. 2. WAS geht jetzt — .gb-calnow blendet alle Zeilen ohne Aktivität im laufenden Monat aus. Zustand über aria-pressed, nicht über eine Klasse, damit Screenreader ihn mitbekommen. Zurücksetzen leistet der bestehende .gb-btn--ghost daneben. */ .gb-calnow { display: inline-flex; align-items: center; gap: var(--gb-space-xs); min-height: 44px; padding: 0 var(--gb-space-md); box-sizing: border-box; border: 1px solid var(--gb-green-800); border-radius: var(--gb-radius-pill); background: var(--gb-surface); color: var(--gb-green-800); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700; text-decoration: none; cursor: pointer; } .gb-calnow:hover { background: var(--gb-surface-green); } .gb-calnow:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } .gb-calnow[aria-pressed="true"] { background: var(--gb-green-800); color: #fff; } .gb-calnow[aria-pressed="true"]:hover { background: var(--gb-green-900); } /* Monatsplakette im Knopf — der laufende Monat ausgeschrieben, damit der Knopf auch ohne Kontext verständlich ist ("Jetzt im August"). */ .gb-calnow__month { font-weight: 400; color: inherit; opacity: 0.85; } /* Laufender Monat in der Monatszeile und in jedem Balken darunter. Nur eine Fläche, keine zweite Farbe: die Aktivitätsfarben der Balken müssen lesbar bleiben. */ .gb-calmonths__row > [aria-current="date"] { background: var(--gb-surface-green); color: var(--gb-green-900); font-weight: 700; border-radius: 5px; } /* Die Zellen selbst markieren .gb-calrow__cell--now und .gb-months__now — dafür braucht es kein zweites Muster. */ /* Kategorie-Filter: das sind die .gb-chips IN .gb-calbar, nichts sonst. Sie blenden ganze .gb-calgroup-Abschnitte aus, das Suchfeld in .gb-calfilter filtert einzelne .gb-calrow. Zwei Achsen, zwei Bauteile. */ .gb-calgroup[hidden], .gb-calrow[hidden] { display: none; } /* Kategorie-Abschnitt im Kalender */ .gb-calgroup { margin-top: var(--gb-space-lg); } .gb-calgroup:first-of-type { margin-top: var(--gb-space-xs); } .gb-calgroup__head { position: sticky; top: calc(var(--gb-header-h) + var(--gb-calmonths-h)); z-index: 2; background: var(--gb-green-800); color: #fff; display: flex; align-items: center; gap: var(--gb-space-xs); margin: 0 0 var(--gb-space-xs); padding: 10px 14px; border-radius: var(--gb-radius-md); font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-text-lead); line-height: 1.3; } .gb-calgroup__head .gb-icon { font-size: 19px; color: var(--gb-lime); } .gb-calgroup__count { margin-left: auto; font-family: var(--gb-font-body); font-weight: 400; font-size: var(--gb-text-xs); color: rgba(255,255,255,0.78); } /* Untergruppe innerhalb einer Kategorie */ .gb-calsub { margin-top: var(--gb-space-md); position: relative; } .gb-calsub__head { display: flex; align-items: center; gap: var(--gb-space-xs); margin: 0 0 6px; padding: 0; font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gb-green-700); } /* Linie rechts neben dem Label, damit der Block als Kapitel lesbar wird */ .gb-calsub__head::before { content: ""; width: 14px; height: 2px; flex: none; background: var(--gb-lime); } .gb-calsub__head::after { content: ""; flex: 1; height: 1px; background: var(--gb-border); } /* Die Akzentlinie liegt außerhalb des Inhalts — die Zeilen behalten denselben linken Anschlag wie die Monatsleiste, sonst driften Zellen und Monatsköpfe. position: relative steht oben am Baustein. */ .gb-calsub::before { content: ""; position: absolute; left: -11px; top: 22px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--gb-surface-green); } .gb-calgroup .gb-calendar { margin: 0; gap: 6px; } /* Marke „diesen Monat säen“ in der Kalenderzeile */ .gb-calrow__flag { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 2px 8px; border-radius: var(--gb-radius-pill); background: var(--gb-surface-green); color: var(--gb-green-800); font-size: var(--gb-text-xs); font-weight: 700; } .gb-calfoot { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); margin: var(--gb-space-sm) 0 0; } /* Gedrückter Umschalt-Button — „Jetzt säen“ */ .gb-prose .gb-btn[aria-pressed="true"], .gb-btn[aria-pressed="true"] { background: var(--gb-green-900); box-shadow: inset 0 0 0 2px var(--gb-lime); } .gb-prose .gb-btn[aria-pressed="true"]:hover, .gb-btn[aria-pressed="true"]:hover { background: var(--gb-green-900); } /* ---------- 25. Shop: Produktraster ---------- */ /* Der Shop stapelt heute 8 volle Produktboxen je Kategorie. Als Raster mit kompakten Karten passen dieselben Produkte in ein Drittel der Höhe. */ /* Vier feste Spalten, keine Deckelung auf Textbreite: Der Shop ist kein Fließtext, und "vier sichtbar, Rest aufklappbar" setzt genau eine Zeile mit vier Karten voraus — auto-fill ergibt auf 1240 px sieben. Raster und Aufklapp-Knopf stehen damit beide auf Inhaltsbreite. */ .gb-shopgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-space-md); margin: var(--gb-space-md) 0; padding: 0; list-style: none; } @media (max-width: 900px) { .gb-shopgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .gb-shopgrid { grid-template-columns: 1fr; } } /* Aufgeklappte Karten stehen nicht am Knopf. */ .gb-shopmore + .gb-shopgrid { margin-top: var(--gb-space-lg); } .gb-prose ul.gb-shopgrid { padding-left: 0; } .gb-shopcard { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); padding: var(--gb-space-md); box-shadow: var(--gb-shadow-card); height: 100%; box-sizing: border-box; font-family: var(--gb-font-body); } .gb-shopcard:hover { box-shadow: var(--gb-shadow-card-hover); border-color: rgba(42,74,30,0.22); } .gb-shopcard:focus-within { outline: 3px solid var(--gb-focus); outline-offset: 2px; } .gb-shopcard__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--gb-surface); border-radius: var(--gb-radius-md); overflow: hidden; margin-bottom: 4px; } .gb-shopcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; } /* Bandzettel wie im Plugin: bündig in der oberen linken Ecke, nur unten rechts verrundet. Grün für die Platzierung, Lime für ein Angebot. */ .gb-shopcard__badge { position: absolute; top: 0; left: 0; z-index: 1; padding: 3px 12px; border-radius: var(--gb-radius-lg) 0 var(--gb-radius-sm) 0; background: var(--gb-green-800); color: #fff; font-size: var(--gb-text-xs); font-weight: 700; line-height: 20px; } /* Zwei Zustände, zwei Farben: Grün trägt die Platzierung, Lime das Angebot. Lime auf Grün-900 als Text hält AA (5,2:1). */ .gb-shopcard__badge--sale { background: var(--gb-lime); color: var(--gb-green-900); } /* Deutsche Komposita sind länger als die Kartenspalte — ohne erlaubte Bruchstelle würden sie still abgeschnitten. */ .gb-shopcard__title { overflow-wrap: anywhere; font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-text-base); line-height: 1.35; color: var(--gb-ink-heading); margin: 0; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 4.05em; } .gb-prose .gb-shopcard__title { font-size: var(--gb-text-base); line-height: 1.35; margin: 0; } .gb-shopcard__title a { color: inherit; text-decoration: none; } .gb-shopcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .gb-shopcard:hover .gb-shopcard__title a { color: var(--gb-green-700); } .gb-shopcard__title a:focus-visible { outline: none; } /* Feste Zeilenzahlen, damit Titel und Preise über eine Kartenreihe auf gleicher Höhe stehen — die Amazon-Kurzbeschreibung ist mal zwei, mal drei Zeilen lang. Der Absatz muss deshalb IMMER im Markup stehen, auch leer (10 von 48 Karten liefern keine Beschreibung); sonst fehlt genau dort eine Zeile. Bewusst min-height statt height: eine Notiz darf überlaufen. */ .gb-shopcard__note { margin: 0; font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink-muted); min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .gb-shopcard__foot { margin-top: auto; padding-top: var(--gb-space-sm); display: flex; align-items: baseline; gap: var(--gb-space-xs); flex-wrap: wrap; min-height: 1.5em; } .gb-shopcard__price { font-weight: 700; color: var(--gb-ink-heading); font-size: var(--gb-text-lead); } .gb-shopcard__was { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); text-decoration: line-through; } .gb-shopcard__cta { display: block; width: 100%; margin-top: var(--gb-space-xs); box-sizing: border-box; padding: 10px 12px; border-radius: var(--gb-radius-pill); background: var(--gb-green-800); color: #fff; font-size: var(--gb-text-sm); font-weight: 700; text-align: center; } .gb-shopcard:hover .gb-shopcard__cta { background: var(--gb-green-700); } /* Sprungmarken-Leiste des Shops */ .gb-shopnav { position: sticky; top: var(--gb-header-h); z-index: 4; background: var(--gb-surface); border-bottom: 1px solid var(--gb-border); padding: var(--gb-space-xs) 0; margin: var(--gb-space-md) 0 var(--gb-space-lg); } .gb-shopnav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .gb-prose ul.gb-shopnav__list { padding-left: 0; margin: 0; } .gb-shopnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--gb-radius-pill); background: var(--gb-surface-cream); font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); text-decoration: none; } .gb-shopnav a:hover { background: var(--gb-surface-green); color: var(--gb-green-800); } .gb-shopnav a:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } /* Kategoriekopf im Shop: Überschrift, Einordnung, Link auf den Ratgeber */ /* lg, nicht 2xl: der Bodenabstand von Raster und AAWP-Fußtext addiert sich. */ .gb-shopsection { margin-top: var(--gb-space-lg); scroll-margin-top: var(--gb-scroll-offset-nav); } .gb-shopsection__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gb-space-sm); } .gb-prose .gb-shopsection__head h2 { margin: 0; } /* Blockhülle, damit der Link kein nacktes Inline-Geschwister des

    ist. Sie trägt das margin-left:auto, der Link nur noch die Schrift. */ .gb-shopsection__action { margin-left: auto; } .gb-shopsection__link { font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700; } .gb-shopsection__intro { margin: 6px 0 0; max-width: none; } .gb-shopfoot { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); margin: var(--gb-space-xs) 0 0; } /* Weiterlesen-Knopf über die volle Rasterbreite — der kleine Textlink darunter wurde übersehen. */ .gb-shopmore { display: flex; align-items: center; justify-content: center; gap: var(--gb-space-xs); width: 100%; box-sizing: border-box; min-height: 52px; margin-top: var(--gb-space-md); padding: 0 var(--gb-space-md); border: 1px solid var(--gb-green-700); border-radius: var(--gb-radius-pill); background: var(--gb-surface); color: var(--gb-green-800); font-family: var(--gb-font-body); font-size: var(--gb-text-base); font-weight: 700; text-decoration: none; } .gb-shopmore:hover { background: var(--gb-surface-green); color: var(--gb-green-900); } .gb-shopmore:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; } .gb-shopmore small { font-weight: 400; color: var(--gb-ink-muted); } /* Blockhülle, wie .gb-cta__action — der Knopf ist ein und kann kein
    werden, steht aber neben