/* ============================================================
   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);
  --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                */
}

/* ---------- 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 <p>. 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;
}
.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: 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);
}
/* Intro-Absatz in <strong> — 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: 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; }
/* 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; }
@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. */
.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; padding: var(--gb-space-md);
  background: var(--gb-surface-cream); color: var(--gb-ink);
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm);
  box-sizing: border-box;
}
.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 <figure class="gb-video"> mit
   <figcaption>, oder als .gb-video__caption an einem <div class="gb-video">. */
.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: 12px; border-left: 2px solid var(--gb-border-strong);
}

/* ---------- 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); }

/* ---------- 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 <img> 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; }
.gb-figure--full { max-width: var(--gb-text-max); }
/* 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); }
.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 { grid-template-columns: 1fr; gap: var(--gb-space-md); }
  .gb-textmedia--right .gb-figure { 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; }

/* ---------- 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 <ol> (gruppierte Kapitel) wieder bei 1. */
.gb-toc { counter-reset: gbtoc; }
.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); }
/* 7–10 Einträge: zwei Spalten, sobald Platz da ist (nicht im Zweispalter). */
.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; }
@media (max-width: 782px) {
  .gb-toc--twocol ol { grid-template-columns: 1fr; }
  .gb-toc--twocol > ol > li:nth-child(2) { border-top: 1px solid var(--gb-border); }
}
/* 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: 88px; }
.gb-section > h2 { margin-top: 0; }

/* ---------- 11. Baustein: Produktempfehlung (Affiliate) ---------- */
/* Das Plugin rendert innen. Wir rahmen und überschreiben nur. */
.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 {
  position: absolute; top: 0; left: var(--gb-space-md); transform: translateY(-50%);
  background: var(--gb-surface-cream); color: var(--gb-ink-muted);
  font-size: var(--gb-text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--gb-radius-pill);
  border: 1px solid var(--gb-border);
}
.gb-product .aawp-product,
.gb-product .aawp-product--horizontal {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  font-family: var(--gb-font-body) !important; color: var(--gb-ink) !important;
}
.gb-product .aawp-product__title { font-family: var(--gb-font-heading) !important; font-weight: 700 !important; color: var(--gb-ink-heading) !important; }
.gb-product .aawp-product__image img { aspect-ratio: 1 / 1; object-fit: contain; }
.gb-product .aawp-product__price { color: var(--gb-ink-heading) !important; font-weight: 700 !important; }
.gb-product .aawp-button, .gb-product .aawp-product__buybtn {
  background: var(--gb-green-800) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--gb-radius-pill) !important;
  font-family: var(--gb-font-body) !important; font-weight: 700 !important;
  text-transform: none !important; min-height: 44px;
  display: inline-flex !important; align-items: center; padding: 0 20px !important;
}
.gb-product .aawp-button:hover { background: var(--gb-green-700) !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; }
.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); }

.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); }

.gb-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--gb-border); 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; }
@media (max-width: 1024px) {
  .gb-nav, .gb-search:not(.gb-search--inline) { display: none; }
  .gb-burger { display: flex; }
}

/* 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); }
.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);
}
.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 <a>:
   wpautop zerreißt solches Markup zu <p><a></p> … <p></a></p>. */
.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; }
/* 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); }
.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 ---------- */
.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; }
.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); }

.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); }
.gb-checklist li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--gb-space-sm); align-items: start;
  font-size: var(--gb-text-base); line-height: 1.6; color: var(--gb-ink);
}
.gb-checklist li::before {
  content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 5px;
  background: var(--gb-surface-green);
  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;
}

.gb-activity {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--gb-space-md);
  background: var(--gb-surface-lime); border-radius: var(--gb-radius-lg);
  padding: var(--gb-space-md); margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max);
}
.gb-activity__icon {
  width: 44px; height: 44px; border-radius: var(--gb-radius-md);
  background: var(--gb-surface); color: var(--gb-lime-ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.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); }

/* 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; } }

/* 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. */
.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);
}
.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. */
.gb-calendar, .gb-calgroup { --gb-calmonths-h: 35px; }
.gb-calmonths {
  position: sticky; top: 0; 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; }
.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);
}
.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 { 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);
}
/* 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; }


/* ---------- 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;
}
.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. */
.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 <dd> 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 {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--gb-radius-pill); background: var(--gb-surface-green);
  font-size: var(--gb-text-xs); font-weight: 700; color: var(--gb-green-800);
}
@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; }
.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); }

/* 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: 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); }
.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. */
.gb-calsub { position: relative; }
.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. */
.gb-shopgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: var(--gb-space-md); margin: var(--gb-space-md) 0; max-width: var(--gb-text-max);
  padding: 0; list-style: none;
}
.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;
}
.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; }
.gb-shopcard__note { margin: 0; font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink-muted); }
.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; }
.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: 0; 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 */
.gb-shopsection { margin-top: var(--gb-space-2xl); }
.gb-shopsection__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gb-space-sm); }
.gb-prose .gb-shopsection__head h2 { margin: 0; }
.gb-shopsection__link { margin-left: auto; font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700; }
.gb-shopsection__intro { margin: 6px 0 0; max-width: 62ch; }
.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); }


/* ---------- 26. AAWP-Overrides (site-weit, ohne .gb-product-Rahmen) ----------
   Das Plugin rendert sein Markup selbst; wir überschreiben nur. Die Selektoren
   folgen dem real gerenderten Markup (Version 5.0.9): --horizontal, --vertical
   im Raster und die Tabelle. Klassennamen sind zwischen den Templates
   inkonsistent (aawp-product__image steht an <a> UND <img>), die Regeln halten
   das aus. Die Werte spiegeln .gb-shopcard. */

/* Rahmen und Grundschrift */
.aawp-product--horizontal,
.aawp-product--vertical {
  background: var(--gb-surface) !important;
  border: 1px solid var(--gb-border) !important;
  border-radius: var(--gb-radius-lg) !important;
  box-shadow: var(--gb-shadow-card);
  padding: var(--gb-space-md) !important;
  font-family: var(--gb-font-body) !important;
  font-size: var(--gb-text-sm) !important; line-height: 1.6 !important;
  color: var(--gb-ink) !important;
  position: relative; overflow: hidden;
}
.aawp-product--horizontal:hover,
.aawp-product--vertical:hover { box-shadow: var(--gb-shadow-card-hover); }

/* Horizontale Form: das Plugin arbeitet mit Floats und einem 160-px-Bild.
   Als Raster statt Float bleibt das Bild in seiner Spalte und der Fuß
   braucht keinen margin-left-Ausgleich. */
.aawp-product--horizontal {
  display: grid !important; grid-template-columns: 160px 1fr;
  gap: var(--gb-space-xs) var(--gb-space-md); align-items: start;
}
.aawp-product--horizontal .aawp-product__thumb {
  grid-column: 1; grid-row: 1 / span 2;
  float: none !important; width: auto !important; margin: 0 !important;
}
.aawp-product--horizontal .aawp-product__content { grid-column: 2; grid-row: 1; margin: 0 !important; }
.aawp-product--horizontal .aawp-product__footer {
  grid-column: 2; grid-row: 2;
  margin: 0 !important; padding: 0 !important; text-align: left !important;
  display: flex; align-items: center; gap: var(--gb-space-md); flex-wrap: wrap;
}
@media (max-width: 560px) {
  .aawp-product--horizontal { grid-template-columns: 1fr; }
  .aawp-product--horizontal .aawp-product__thumb { grid-row: 1; max-width: 200px; }
  .aawp-product--horizontal .aawp-product__content,
  .aawp-product--horizontal .aawp-product__footer { grid-column: 1; grid-row: auto; }
}

/* Bandzettel: bündig in der Ecke, Markenfarben statt Amazon-Orange */
.aawp-product__ribbon,
.aawp-product__ribbon--bestseller {
  position: absolute !important; align-self: flex-start;
  top: 0 !important; left: 0 !important; right: auto !important; width: auto !important;
  padding: 3px 12px !important; line-height: 20px !important;
  border-radius: var(--gb-radius-lg) 0 var(--gb-radius-sm) 0 !important;
  background: var(--gb-green-800) !important; color: #fff !important;
  font-family: var(--gb-font-body); font-size: var(--gb-text-xs) !important;
  font-weight: 700 !important; text-transform: none !important;
}

/* Titel */
.aawp-product__title {
  font-family: var(--gb-font-heading) !important; font-weight: 700 !important;
  font-size: var(--gb-text-base) !important; line-height: 1.35 !important;
  color: var(--gb-ink-heading) !important; text-decoration: none !important;
  overflow-wrap: anywhere;
}
.aawp-product__title:hover { color: var(--gb-green-700) !important; }
.aawp-product__title:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; }

/* Beschreibung: das Plugin liefert eine <ul> mit bis zu 5 Punkten */
.aawp-product__description ul { margin: 6px 0 0; padding-left: 1.1em; }
.aawp-product__description li { font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink-muted); }

/* Bild — festes Seitenverhältnis, damit CLS bei 0 bleibt */
.aawp-product__thumb img,
a.aawp-product__image img,
img.aawp-product__image {
  aspect-ratio: 4 / 3; object-fit: contain; width: 100%; height: auto;
  background: var(--gb-surface); border-radius: var(--gb-radius-md);
}

/* Preis — Markengrün statt Braun; leerer Preis reißt kein Loch */
.aawp-product__price,
.aawp-product__price--current {
  color: var(--gb-ink-heading) !important; font-weight: 700 !important;
  font-size: var(--gb-text-lead) !important; line-height: 1.4 !important;
}
.aawp-product__price--current:empty { display: none !important; }
.aawp-product__meta:empty, .aawp-product__pricing:empty { display: none !important; }

/* Kaufknopf: grüner Pillenknopf statt Amazon-Verlauf */
.aawp-button,
.aawp-button--buy,
.aawp-button--amazon {
  background: var(--gb-green-800) !important; background-image: none !important;
  color: #fff !important; border: 0 !important;
  border-radius: var(--gb-radius-pill) !important; box-shadow: none !important;
  font-family: var(--gb-font-body) !important; font-weight: 700 !important;
  font-size: var(--gb-text-sm) !important;
  min-height: 44px; display: inline-flex !important; align-items: center;
  padding: 0 20px !important; text-decoration: none !important;
  box-sizing: border-box; max-width: 100%;
}
.aawp-button:hover, .aawp-button--amazon:hover { background: var(--gb-green-700) !important; }
.aawp-button:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; }
/* Das Amazon-Icon des Knopfes entfällt mit der Amazon-Optik */
.aawp-button--icon-amazon-black { background-image: none !important; padding-left: 20px !important; }

/* Raster der Widgets und Listen — aus dem Stapel wird eine Zeile */
.aawp-grid {
  display: grid !important; gap: var(--gb-space-md) !important;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
  float: none !important;
}
.aawp-grid--col-2 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
.aawp-grid__item { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
/* Vertikale Karte: Spalte, damit Fuß und Knopf auf gleicher Höhe sitzen.
   Der Plugin-Default schiebt den Fuß mit margin-left:160px nach rechts —
   das gilt nur für die horizontale Form und wird hier zurückgesetzt. */
.aawp-grid__item { display: flex; }
.aawp-grid__item .aawp-product--vertical { height: 100%; width: 100%; box-sizing: border-box; }
.aawp-product--vertical {
  display: flex !important; flex-direction: column; gap: var(--gb-space-xs);
}
.aawp-product--vertical .aawp-product__content { flex: 1 1 auto; }
.aawp-product--vertical .aawp-product__footer {
  margin: auto 0 0 !important; padding: var(--gb-space-xs) 0 0 !important;
  text-align: left !important; float: none !important;
}
.aawp-product--vertical .aawp-product__pricing { margin-bottom: var(--gb-space-xs); }
.aawp-product--vertical .aawp-button { width: 100%; justify-content: center; }
.aawp-product--vertical .aawp-product__title { display: block; margin-bottom: 4px; }

/* Pflichthinweis: rechtlich nötig, optisch zurückhaltend — er erscheint
   443 mal, darf also nicht mitreden. */
.aawp-disclaimer {
  font-family: var(--gb-font-body); font-size: var(--gb-text-xs) !important;
  line-height: 1.5; color: var(--gb-ink-muted); margin: var(--gb-space-xs) 0 var(--gb-space-lg);
}

/* Vergleichstabelle */
.aawp-table { width: 100%; border-collapse: collapse; font-family: var(--gb-font-body); font-size: var(--gb-text-sm); }
.aawp-table 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);
}
.aawp-table td { padding: var(--gb-space-sm) var(--gb-space-xs); border-bottom: 1px solid var(--gb-border); vertical-align: middle; }
.aawp-table tr:last-child td { border-bottom: 0; }
.aawp-table img.aawp-product__img { width: 64px; height: 64px; object-fit: contain; }
.aawp-table .aawp-product--ribbon .aawp-product__ribbon { position: static !important; display: inline-block; }
/* Mobil bricht die Tabelle in Zeilen um — die Spaltennamen stehen in data-label */
@media (max-width: 700px) {
  .aawp-table thead { display: none; }
  .aawp-table tr { display: grid; grid-template-columns: 72px 1fr; gap: var(--gb-space-xs) var(--gb-space-sm);
    padding: var(--gb-space-sm) 0; border-bottom: 1px solid var(--gb-border); }
  .aawp-table td { border: 0; padding: 0; }
  .aawp-table td[data-label]::before {
    content: attr(data-label) ": "; display: block;
    font-size: var(--gb-text-xs); color: var(--gb-ink-muted);
  }
  .aawp-table__td-thumb { grid-row: span 2; }
  .aawp-table__td-thumb::before { display: none !important; }
}


/* ---------- 27. Hero — drei Formen ----------
   Gilt für Startseite, Hubs, Anbau- und Ratgeber-Seiten. Alle drei halten ein
   festes Seitenverhältnis (CLS) und skalieren die Quelle nie über ihre Breite
   hinaus — Band und Verlauf brauchen deshalb eine Quelle ab 1200 px. */

/* A · Band über die volle Fensterbreite, Titel darunter */
.gb-hero-band { margin: 0 0 var(--gb-space-lg); }
.gb-hero-band__media {
  width: 100vw; margin-left: calc(50% - 50vw);
  aspect-ratio: 3 / 1; overflow: hidden; background: var(--gb-surface-cream);
}
.gb-hero-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-hero-band__body { max-width: var(--gb-text-max); padding-top: var(--gb-space-lg); }

/* B · Titel im Bild, dunkler Verlauf darüber
   Die Höhe ist inhaltsgetrieben: ::before setzt das Seitenverhältnis nur als
   Untergrenze, der Textblock liegt in derselben Rasterzelle und darf sie
   überschreiten. Zweizeilige deutsche Titel werden so nie beschnitten. */
.gb-hero-overlay {
  position: relative; display: grid; overflow: hidden;
  border-radius: var(--gb-radius-xl); margin: 0 0 var(--gb-space-lg);
  background: var(--gb-green-900);
}
.gb-hero-overlay { min-height: 320px; }
.gb-hero-overlay::before { content: ""; grid-area: 1 / 1; height: 0; padding-top: 42.85%; }
.gb-hero-overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-hero-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,61,29,0) 30%, rgba(26,61,29,0.55) 62%, rgba(26,61,29,0.88) 100%);
}
.gb-hero-overlay__body {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 1;
  padding: var(--gb-space-xl) var(--gb-space-lg); max-width: 46ch; box-sizing: border-box;
}

/* C · Bild rechts angeschnitten, Titel links auf grüner Fläche */
.gb-hero-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  border-radius: var(--gb-radius-xl); overflow: hidden;
  margin: 0 0 var(--gb-space-lg); background: var(--gb-green-800);
}
.gb-hero-split__body { padding: var(--gb-space-xl); align-self: center; }
/* Die Medienspalte wird auf die Höhe der Textspalte gestreckt — je länger der
   Vorspann, desto höher. Quelle deshalb mindestens 1200 px breit. */
.gb-hero-split__media { position: relative; min-height: 320px; background: var(--gb-surface-cream); }
.gb-hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 782px) {
  .gb-hero-split { grid-template-columns: 1fr; }
  .gb-hero-split__media { aspect-ratio: 16 / 9; min-height: 0; order: -1; }
  .gb-hero-overlay { aspect-ratio: 4 / 3; }
  .gb-hero-overlay__body, .gb-hero-split__body { padding: var(--gb-space-lg) var(--gb-space-md); }
  .gb-hero-band__media { aspect-ratio: 16 / 9; }
  .gb-hero-plain { padding: 28px 22px 24px; border-radius: var(--gb-radius-lg); }
}

/* D · Ohne Bild — Titel und Einstiege auf grüner Fläche. Höhe folgt dem Text,
   kein Bildmaterial nötig, deshalb auf jedem Objekt einsetzbar. */
.gb-hero-plain {
  background: var(--gb-green-800); border-radius: var(--gb-radius-xl);
  padding: 40px 40px 34px; margin: 0 0 var(--gb-space-lg);
}
.gb-hero-plain .gb-hero__eyebrow { color: var(--gb-lime); }
.gb-hero-plain .gb-hero__title { color: #fff; }
.gb-hero-plain .gb-hero__lead { color: var(--gb-ink-on-dark); max-width: 58ch; }
.gb-hero-plain__jumps, .gb-prose .gb-hero-plain__jumps {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 0; padding: 20px 0 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.gb-hero-plain__jumps a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--gb-radius-pill);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.24);
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700;
  color: #fff; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gb-hero-plain__jumps a:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.45); }
.gb-hero-plain__jumps a:focus-visible { outline: 3px solid var(--gb-lime); outline-offset: 2px; }
.gb-hero-plain__jumps .gb-icon { font-size: 15px; color: var(--gb-lime); }

/* Gemeinsame Typografie der Heroköpfe */
.gb-hero__eyebrow {
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--gb-space-xs);
  color: var(--gb-green-700);
}
.gb-hero__title {
  font-family: var(--gb-font-heading); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 var(--gb-space-sm); color: var(--gb-ink-heading); text-wrap: balance;
}
.gb-hero__lead { font-size: var(--gb-text-lead); line-height: 1.6; margin: 0; color: var(--gb-ink); max-width: 60ch; }
.gb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gb-space-sm); margin-top: var(--gb-space-md); }
/* Auf dunklem Grund: Lime für die Kleinzeile, Weiß für Titel und Text */
.gb-hero-overlay .gb-hero__eyebrow, .gb-hero-split .gb-hero__eyebrow { color: var(--gb-lime); }
.gb-hero-overlay .gb-hero__title, .gb-hero-split .gb-hero__title { color: #fff; }
.gb-hero-overlay .gb-hero__lead, .gb-hero-split .gb-hero__lead { color: var(--gb-ink-on-dark); }


/* ---------- 28. Bedarfs-Badge — vierstufige Skala aus den Pflanzendaten ----------
   Stufen: sehr hoch · hoch · mäßig · niedrig. "gering" aus der alten
   Kräutertabelle wird auf "niedrig" zusammengeführt. Die Rampe läuft von
   gefülltem Grün nach Sand, damit die Stufe ohne Farbsehen lesbar bleibt —
   die Wortmarke steht immer mit dabei. */
.gb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--gb-radius-pill);
  font-family: var(--gb-font-body); font-size: var(--gb-text-xs); font-weight: 700;
  white-space: nowrap;
  background: var(--gb-surface-cream); color: var(--gb-ink-muted);
  border: 1px solid transparent;
}
/* Zwei Modifier-Sätze, weil es zwei Skalen gibt. Der Modifier-Name folgt dem
   Datenwert, nicht der Farbe — sonst rät man beim Umbenennen.
   naehrstoffbedarf: drei Zehrer-Klassen. */
.gb-badge--stark   { background: var(--gb-green-800); color: #fff; }                    /* 9,94:1 */
.gb-badge--mittel  { background: var(--gb-surface-green); color: var(--gb-green-800); } /* 8,31:1 */
.gb-badge--schwach { background: var(--gb-surface-cream); color: var(--gb-ink); border-color: var(--gb-border); } /* 8,4:1 */

/* kalkbedarf: vier Stufen, nur bei Kräutern erfasst. Eigene Skala, weil
   „Starkzehrer“ dort keine sinnvolle Aussage wäre. */
.gb-badge--sehr-hoch { background: var(--gb-green-800); color: #fff; }                  /* 9,94:1 */
.gb-badge--hoch      { background: var(--gb-lime); color: var(--gb-green-900); }         /* 5,20:1 */
.gb-badge--maessig   { background: var(--gb-surface-green); color: var(--gb-green-800); }/* 8,31:1 */
.gb-badge--niedrig   { background: var(--gb-surface-cream); color: var(--gb-ink); border-color: var(--gb-border); } /* 8,4:1 */

/* Wert noch nicht erfasst — gilt für beide Skalen. */
.gb-badge--leer      { background: transparent; color: var(--gb-ink-muted); border-color: var(--gb-border); }

/* ---------- 29. Ansichts-Umschalter ---------- */
.gb-viewtoggle { display: inline-flex; gap: 0; border: 1px solid var(--gb-border-strong); border-radius: var(--gb-radius-pill); overflow: hidden; }
.gb-viewtoggle button {
  min-height: 44px; padding: 0 16px; border: 0; background: var(--gb-surface);
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700;
  color: var(--gb-green-800); cursor: pointer; white-space: nowrap;
}
.gb-viewtoggle button + button { border-left: 1px solid var(--gb-border); }
.gb-viewtoggle button:hover { background: var(--gb-surface-green); }
.gb-viewtoggle button[aria-pressed="true"] { background: var(--gb-green-800); color: #fff; }
.gb-viewtoggle button:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: -3px; }

/* ---------- 30. Datentabelle — Merkmale aus pflanzen.json ---------- */
.gb-datatable { width: 100%; border-collapse: collapse; margin: var(--gb-space-md) 0; font-family: var(--gb-font-body); max-width: var(--gb-text-max); }
.gb-datatable th, .gb-datatable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--gb-border); font-size: var(--gb-text-sm); }
.gb-datatable thead th { font-size: var(--gb-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-ink-muted); border-bottom-width: 2px; }
.gb-datatable tbody th { font-weight: 700; color: var(--gb-ink-heading); }
.gb-datatable tbody tr:hover { background: var(--gb-surface-green); }
@media (max-width: 560px) {
  .gb-datatable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gb-datatable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--gb-border); }
  .gb-datatable th, .gb-datatable td { border: 0; padding: 2px 0; }
  .gb-datatable td::before { content: attr(data-label) ": "; color: var(--gb-ink-muted); font-size: var(--gb-text-xs); }
}

/* ---------- 31. Filterzeilen mit Achsenbeschriftung ----------
   Mehrere Chip-Reihen ohne Beschriftung sind nicht unterscheidbar — die
   Beschriftung steht links, damit die Reihe als eine Achse lesbar bleibt. */
.gb-filterrows { display: grid; gap: var(--gb-space-sm); margin: 0 0 var(--gb-space-md); max-width: var(--gb-text-max); }
.gb-filterrow { display: grid; grid-template-columns: minmax(104px, max-content) 1fr; gap: var(--gb-space-md); align-items: start; }
.gb-filterrow__label {
  font-family: var(--gb-font-body); font-size: var(--gb-text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-ink-muted);
  margin: 0; padding-top: 9px;
}
.gb-filterrow .gb-chips { margin: 0; }
/* Zeile ohne Chips: das Chip-Padding der Beschriftung entfällt. */
.gb-filterrow--plain { align-items: center; }
.gb-filterrow--plain .gb-filterrow__label { padding-top: 0; }
@media (max-width: 700px) {
  .gb-filterrow { grid-template-columns: 1fr; gap: var(--gb-space-xs); }
  .gb-filterrow__label { padding-top: 0; }
}

/* ---------- 32. Gute Nachbarn in der Sortenkarte ----------
   Fließtextzeile statt Chips: bei 30+ Karten würden Chip-Reihen die Karten
   unterschiedlich hoch machen und mit dem Nährstoff-Badge konkurrieren. */
.gb-card__neighbours {
  display: flex; gap: 7px; align-items: baseline;
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--gb-border);
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); line-height: 1.5;
  color: var(--gb-ink-muted);
}
.gb-card__neighbours .gb-icon { font-size: 14px; color: var(--gb-green-600); flex: none; position: relative; top: 2px; }
.gb-card__neighbours b { font-weight: 700; color: var(--gb-ink); }
.gb-card__neighbours--none { color: var(--gb-ink-muted); font-style: italic; }

/* ---------- 33. Bedarfskarte — Alternative zur Datentabelle ----------
   Zwei Skalen mit verschiedener Stufenzahl nebeneinander: der Balken zeigt
   die Höhe, das Wort bleibt daneben stehen (Farbe allein trägt keine Aussage). */
.gb-needs { display: grid; gap: var(--gb-space-sm); grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); margin: var(--gb-space-md) 0; max-width: var(--gb-text-max); }
.gb-needcard { background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius-lg); padding: 14px 16px 16px; font-family: var(--gb-font-body); }
.gb-needcard__name,
.gb-prose .gb-needcard__name { font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h5); line-height: 1.3; color: var(--gb-ink-heading); margin: 0 0 12px; }
.gb-need { display: grid; gap: 5px; margin: 0 0 12px; }
.gb-need:last-child { margin-bottom: 0; }
.gb-need__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gb-need__label { font-size: var(--gb-text-xs); color: var(--gb-ink-muted); }
.gb-need__was { font-style: italic; }
.gb-need__value { font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink); }
.gb-need__scale { display: flex; gap: 3px; }
.gb-need__step { flex: 1; height: 7px; border-radius: 3px; background: var(--gb-border); }
.gb-need__step.is-on { background: var(--gb-green-600); }
.gb-need--kalk .gb-need__step.is-on { background: var(--gb-orange-ink); }
/* Zwei Rollen, zwei Farben: Bedarf (was die Pflanze verlangt) grün und orange,
   Maße (Platz, Zeit) einheitlich gedeckt. Fünf Grüntöne wären nicht
   unterscheidbar — die Beschriftung trägt die Aussage. */
.gb-need--platz .gb-need__step.is-on,
.gb-need--zeit .gb-need__step.is-on,
.gb-need--keim .gb-need__step.is-on { background: var(--gb-ink-muted); }
.gb-needcard__traits {
  display: grid; gap: 4px;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--gb-border);
  font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink);
}
.gb-trait__label { color: var(--gb-ink-muted); }
/* Noch nicht erfasst: sichtbar bleiben, aber zurücktreten — eine weggelassene
   Zeile läse sich wie ein niedriger Wert. */
.gb-trait.is-empty { color: var(--gb-ink-muted); font-style: italic; }
.gb-need--leer .gb-need__value { font-weight: 400; font-style: italic; color: var(--gb-ink-muted); }

/* Bildfläche ohne Bild: reserviert die Höhe, damit das Nachliefern der Fotos
   nichts verschiebt (CLS bleibt 0) und die Karten gleich hoch stehen. */
/* Ohne Foto steht KEINE Platzhalterfläche: 47 von 73 Sorten haben keins,
   ein Kasten auf zwei Dritteln der Karten sieht aus wie ein Ladefehler.
   Stattdessen entfällt die Fläche, die Karte beginnt mit dem Titel. */
.gb-card__media--empty { display: none; }
.gb-card__media--empty--reserved {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--gb-surface-green); border-radius: var(--gb-radius-md);
  margin-bottom: var(--gb-space-sm);
}
.gb-card__media--empty span {
  font-family: var(--gb-font-body); font-size: var(--gb-text-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-green-600);
}

/* ---------- 34. Kombikarte: Sortenkarte mit aufklappbarem Bedarf ---------- */
.gb-card__more { margin: 10px 0 0; border-top: 1px solid var(--gb-border); padding-top: 10px; }
.gb-card__more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  min-height: 32px;
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700;
  color: var(--gb-green-600);
}
.gb-card__more > summary::-webkit-details-marker { display: none; }
.gb-card__more > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.gb-card__more[open] > summary::after { margin-top: 2px; transform: rotate(-135deg); }
.gb-card__more > summary:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; border-radius: var(--gb-radius-sm); }
.gb-card__more .gb-need { margin: 10px 0 0; }
.gb-card--profile .gb-card__arrow { margin-top: 12px; }
/* Aufklappbare Karten wachsen einzeln, nicht als Zeile: sonst erbt jede
   geschlossene Nachbarkarte den Leerraum der geöffneten. */
.gb-cards:where(:has(.gb-card--profile)) { align-items: start; }
.gb-cards:where(:has(.gb-card--profile)) > .gb-card { height: auto; }

/* ---------- 35. Hub-Teaser — aus dem Fließtext in ein Verzeichnis ---------- */
.gb-hubteaser {
  background: var(--gb-surface-green); border-radius: var(--gb-radius-lg);
  padding: 20px 22px; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max);
  font-family: var(--gb-font-body);
}
.gb-hubteaser__title,
.gb-prose .gb-hubteaser__title {
  font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h5);
  line-height: 1.3; color: var(--gb-ink-heading); margin: 0 0 4px;
}
.gb-hubteaser__text, .gb-prose .gb-hubteaser__text {
  margin: 0 0 12px; font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink);
}
.gb-hubteaser__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 14px;
}


/* C — eine Zeile im Lesefluss */
.gb-hubteaser--line {
  display: flex; gap: 12px; align-items: flex-start;
  background: none; border-left: 3px solid var(--gb-lime);
  border-radius: 0; padding: 4px 0 4px 16px; margin: var(--gb-space-md) 0;
}
.gb-hubteaser--line .gb-icon { font-size: 18px; color: var(--gb-green-600); flex: none; position: relative; top: 3px; }
.gb-hubteaser--line p, .gb-prose .gb-hubteaser--line p {
  margin: 0; font-size: var(--gb-text-sm); line-height: 1.6; color: var(--gb-ink);
}

/* A2 — Einstieg über die Frage: drei Wege in den vorgefilterten Hub */
.gb-hubteaser--ask .gb-hubteaser__paths {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 12px 0 0;
}
.gb-path,
.gb-prose .gb-path {
  display: grid; gap: 2px; padding: 14px 16px;
  background: var(--gb-surface); border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-md); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gb-path:hover { border-color: var(--gb-green-600); box-shadow: var(--gb-shadow-card); }
.gb-path:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; }
.gb-path__key { font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-ink-heading); }
.gb-path__val { font-size: var(--gb-text-xs); font-weight: 700; color: var(--gb-green-600); }
.gb-path__hint { font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-ink-muted); }
.gb-hubteaser__foot, .gb-prose .gb-hubteaser__foot { margin: 12px 0 0; font-size: var(--gb-text-sm); }

/* ---------- 35b. Seitenrand des Themes ----------
   Der Rand, den der Content zum Fensterrand hält. Mobil bewusst schmal:
   16 px lassen bei 390 px Schirmbreite 358 px Text — bei 40 px wären es 310,
   die Zeile bräche dann mitten im Wort. */
.gb-page {
  box-sizing: border-box; width: 100%;
  max-width: calc(var(--gb-content-max) + 2 * 40px);
  margin: 0 auto; padding: 0 16px;
}
@media (min-width: 620px) { .gb-page { padding: 0 24px; } }
@media (min-width: 1024px) { .gb-page { padding: 0 40px; } }

/* ---------- 36. Kartenraster: feste Spaltenzahl als Modifier ----------
   Inline gesetzte grid-template-columns schlagen jeden Media Query — die
   Spaltenzahl gehört deshalb ins Stylesheet, nicht ins Markup. */
.gb-cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gb-cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gb-cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .gb-cards--3, .gb-cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Zwei Textkarten nebeneinander sind bei 390 px zu schmal — Titel und
   Beschreibung brechen dann nach zwei, drei Wörtern um. Deshalb gestapelt. */
@media (max-width: 700px) {
  .gb-cards--2, .gb-cards--3, .gb-cards--4 { grid-template-columns: 1fr; }
  /* Hervorgehobene Karten spannen mobil nicht über zwei Spalten — es gibt nur eine. */
  .gb-cards > .gb-card { grid-column: auto !important; }
}

/* ---------- 37. Vergleichsleiste — das Urteil vor den Fließtext ---------- */
.gb-compare {
  background: var(--gb-surface-green); border-radius: var(--gb-radius-lg);
  padding: 18px 20px; margin: var(--gb-space-lg) 0; max-width: var(--gb-text-max);
  font-family: var(--gb-font-body);
}
.gb-compare__title, .gb-prose .gb-compare__title {
  font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h5);
  line-height: 1.3; color: var(--gb-ink-heading); margin: 0 0 12px;
}
.gb-compare__list, .gb-prose .gb-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gb-compare__item {
  display: grid; grid-template-columns: 132px 1fr; gap: 4px 14px; align-items: baseline;
  background: var(--gb-surface); border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-md); padding: 12px 14px;
}
.gb-compare__item.is-pick { border-color: var(--gb-green-600); border-width: 2px; }
.gb-compare__rank {
  grid-row: span 2; align-self: center;
  font-size: var(--gb-text-xs); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gb-green-600);
}
.gb-compare__item.is-pick .gb-compare__rank { color: var(--gb-green-800); }
.gb-compare__name, .gb-prose .gb-compare__name {
  font-size: var(--gb-text-base); font-weight: 700; color: var(--gb-ink-heading);
  text-decoration: none;
}
.gb-compare__name:hover { text-decoration: underline; }
.gb-compare__note { font-size: var(--gb-text-sm); line-height: 1.5; color: var(--gb-ink-muted); }
@media (max-width: 620px) {
  .gb-compare__item { grid-template-columns: 1fr; }
  .gb-compare__rank { grid-row: auto; }
}

/* Mobil: der Steckbrief steht schon in einem Container mit Seitenrand —
   sein eigenes Innenpolster darf deshalb kleiner sein, sonst summieren sich
   zwei Abstände zu einer sehr schmalen Textspalte. */
@media (max-width: 620px) {
  .gb-facts__grid { gap: 0 14px; }
}

/* ---------- 38. Mobile Stufe der Überschriften ----------
   Deutsche Komposita (Aussaatkalender, Bewässerungssysteme) sind bei 343 px
   Textbreite breiter als die Spalte. Kleinere Grade plus Trennung. */
@media (max-width: 620px) {
  :root { --gb-h1: 2rem; --gb-h2: 1.5rem; --gb-h3: 1.25rem; }
}
.gb-prose h1, .gb-prose h2, .gb-prose h3, .gb-prose h4,
.gb-pagehead__title, .gb-post__title, .gb-hero__title,
.gb-card__title, .gb-needcard__name, .gb-faq summary {
  overflow-wrap: break-word; hyphens: auto;
}

/* B — Vergleich als Frage: die Auswahl hängt an der Abwesenheitsdauer,
   nicht am Produktnamen. Gleiche Form wie .gb-hubteaser--ask. */
.gb-compare--ask .gb-compare__list { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.gb-compare--ask .gb-compare__item {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.gb-compare--ask .gb-compare__rank {
  grid-row: auto; font-size: var(--gb-text-sm); text-transform: none;
  letter-spacing: 0; color: var(--gb-ink-muted); font-weight: 400;
}
.gb-compare--ask .gb-compare__q,
.gb-prose .gb-compare--ask .gb-compare__q {
  font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-h5);
  color: var(--gb-ink-heading); margin: 0; text-decoration: none;
}
.gb-compare--ask .gb-compare__q:hover { text-decoration: underline; }
.gb-compare--ask .gb-compare__price {
  margin-top: auto; padding-top: 6px;
  font-size: var(--gb-text-sm); font-weight: 700; color: var(--gb-green-600);
}


/* ---------- 39. Bausteine, deren Links keine Fließtext-Unterstreichung tragen ----------
   .gb-prose a (0,2,0) schlägt jede einfache Klasse. Diese Sammelregel hat
   dieselbe Spezifität und deckt alle Karten- und Listentitel auf einmal ab. */
.gb-prose :is(.gb-card__title, .gb-compare__name, .gb-compare__q, .gb-path,
  .gb-strip a, .gb-taglist a, .gb-chips a, .gb-btn, .gb-card__arrow) { text-decoration: none; }

/* ---------- 40. Inhaltsverzeichnis im Steckbrief-Rahmen ----------
   Nur die Hülle entfällt — Nummernkreise, Schrift und Abstände bleiben die
   des Bausteins, damit alle Inhaltsverzeichnisse der Site gleich aussehen. */
.gb-toc--bare {
  border: 0; background: none; padding: 0; max-width: none;
  box-shadow: none; border-radius: 0;
}

/* ---------- 41. Steckbrief-Rahmen schmal: zwei Karten ----------
   Höhere Spezifität und späte Position, damit weder die Desktop-Trennlinie
   noch .gb-toc--bare diese Regel schlagen. */
@container (max-width: 620px) {
  .gb-facts .gb-facts__split { grid-template-columns: 1fr; gap: var(--gb-space-md); }
  .gb-facts .gb-facts__split > * {
    background: var(--gb-surface); border: 1px solid var(--gb-border);
    border-left: 4px solid var(--gb-green-600);
    border-radius: var(--gb-radius-lg); padding: 14px 14px 14px 12px;
  }
  .gb-facts .gb-facts__split > :nth-child(2) { order: -1; padding-left: 12px; padding-top: 14px; border-top: 1px solid var(--gb-border); }
}

/* ---------- 42. Bereichstrenner — teilt eine Seite in Abschnitte ----------
   Einsatz: Anbau- und Kräuterseiten, wo sich der Inhalt sinnvoll in „Anbau“
   und „Pflege, Ernte und Weiteres“ teilt. Beliebig oft wiederholbar; Seiten
   ohne Trenner bleiben unverändert. Das Inhaltsverzeichnis übernimmt die
   Teilung NICHT — es bleibt eine durchgehende Liste.
   Bewusst kein Überschriftengrad: eine farbige Marke über der Spalte, damit
   sie die H2 darunter nicht in der Größe unterbietet. Kein Container, nur
   eine Trennmarke — die Abschnitte bleiben Geschwister. */
.gb-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--gb-space-2xl) 0 var(--gb-space-lg);
  padding: 12px 18px; border-radius: var(--gb-radius-lg);
  background: var(--gb-green-800); color: #fff;
  max-width: var(--gb-text-max);
}
.gb-divider__num {
  flex: none; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,0.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm); font-weight: 700;
}
.gb-divider__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gb-divider__title, .gb-prose .gb-divider__title {
  font-family: var(--gb-font-body); font-weight: 700; font-size: var(--gb-text-base);
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  line-height: 1.3; margin: 0;
}
.gb-divider__note, .gb-prose .gb-divider__note {
  font-family: var(--gb-font-body); font-size: var(--gb-text-sm);
  line-height: 1.5; color: var(--gb-ink-on-dark); margin: 0;
}
.gb-divider + .gb-section { margin-top: 0; }
.gb-divider :focus-visible { outline: 3px solid var(--gb-lime); outline-offset: 2px; }
@media (max-width: 620px) {
  .gb-divider { margin-top: var(--gb-space-xl); padding: 10px 14px; }
  .gb-divider__num { width: 24px; height: 24px; font-size: var(--gb-text-xs); }
}

/* ---------- 43. Filterleiste, die oben stehen bleibt ----------
   Nur Suche und Umschalter kleben — die Chip-Reihen scrollen mit, sonst
   nimmt die Leiste auf dem Telefon die halbe Höhe. */
.gb-filterbar--sticky {
  position: sticky; top: 0; z-index: 20;
  background: var(--gb-surface);
  margin-left: calc(-1 * var(--gb-space-sm)); margin-right: calc(-1 * var(--gb-space-sm));
  padding: 10px var(--gb-space-sm);
  border-bottom: 1px solid transparent;
}
/* Sichtbare Kante erst, wenn die Leiste tatsächlich klebt. */
.gb-filterbar--sticky.is-stuck {
  border-bottom-color: var(--gb-border);
  box-shadow: var(--gb-shadow-card);
}
@media (max-width: 700px) {
  /* Auf dem Telefon zählt jede Zeile: Suchfeld über die volle Breite, der
     Knopf schrumpft auf sein Icon, die Trefferzahl rückt daneben. */
  .gb-filterbar--sticky {
    padding: 8px var(--gb-space-sm);
    gap: 8px; align-items: center;
  }
  /* Eine Zeile, mehr nicht: Feld füllt den Rest, Knopf bleibt daneben. */
  .gb-filterbar--sticky { flex-wrap: nowrap; }
  .gb-filterbar--sticky .gb-search { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
  .gb-filterbar--sticky .gb-search input[type="search"] { flex: 1 1 0; width: auto; min-width: 0; }
  .gb-filterbar--sticky .gb-search .gb-btn { flex: none; padding: 0 14px; }
  /* Umschalter und Trefferzahl wandern aus der angehefteten Zeile in den Fluss. */
  .gb-filterbar--sticky .gb-viewtoggle,
  .gb-filterbar--sticky .gb-filterbar__count { display: none; }
}
@container prose (max-width: 700px) {
  /* Dieselbe Regel an der Spaltenbreite — greift auch in schmalen Rahmen. */
  .gb-filterbar--sticky {
    padding: 8px var(--gb-space-sm);
    gap: 8px; align-items: center; flex-wrap: nowrap;
  }
  .gb-filterbar--sticky .gb-search { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
  .gb-filterbar--sticky .gb-search input[type="search"] { flex: 1 1 0; width: auto; min-width: 0; }
  .gb-filterbar--sticky .gb-search .gb-btn { flex: none; padding: 0 14px; }
  .gb-filterbar--sticky .gb-viewtoggle,
  .gb-filterbar--sticky .gb-filterbar__count { display: none; }
}