ist (Video, etc.). */
.gb-media-img { display: block; }
@media (max-width: 700px) {
.gb-media-row {
grid-template-columns: 1fr;
}
}
/* Checkliste (z.B. "haeufige Pflegefehler"): schlichte Liste mit
kleinem Punkt-Icon statt Standard-Bullet. Ersetzt Avadas
[fusion_checklist]/[fusion_li_item]. */
.gb-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.gb-checklist > li {
position: relative;
padding-left: 26px;
color: var(--gb-text-body, #747474);
}
.gb-checklist > li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gb-green-mid, #4a9635);
}
/* Bild-Paar mit Bildunterschrift: zwei (oder mehr) Fotos nebeneinander,
jedes mit eigener kurzer Caption darunter (z.B. Wachstumsschritte im
zeitlichen Vergleich, "vorher/nachher"). Anders als .gb-img-row (reine
Bildergalerie ohne Text je Bild) und .gb-text-img-row (ein Fliesstext
neben einem Foto). Semantisch figure/figcaption statt img+p. */
.gb-img-caption-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--gb-space-lg, 32px);
margin: var(--gb-space-lg, 32px) 0;
}
.gb-img-caption-row figure {
margin: 0;
}
.gb-img-caption-row img {
width: 100%;
display: block;
border-radius: var(--gb-radius-md, 12px);
}
.gb-img-caption-row figcaption {
text-align: center;
font-style: italic;
font-size: 14px;
color: var(--gb-text-muted, #4a5a44);
margin-top: 8px;
}
@media (max-width: 700px) {
.gb-img-caption-row {
grid-template-columns: 1fr;
}
}
/* Modifier fuer genau 4 Bilder (z.B. Wachstumsschritte in 4 Etappen):
auto-fit/minmax(220px) der Basisklasse braucht bei 4 Bildern mehr Breite
als typische Content-Spalten bieten und bricht in 2 Reihen um. Erzwingt
stattdessen immer exakt 4 gleich breite Spalten (Bilder werden schmaler,
nicht die Reihe umgebrochen) - entspricht dem Original-Avada-Verhalten
mit vier festen 1_4-Spalten. Sebastian, 14.07.2026 (Minze). */
.gb-img-caption-row--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
.gb-img-caption-row--4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Aktivitäts-Box: gruppiert mehrere Teilschritte eines Themas (z.B. alle
Einzelschritte der Anzucht) sichtbar in einem eigenen Kasten, damit der
rote Faden einer langen Seite (Anzucht -> Anbau -> Ernte) beim Scrollen
leichter zu verfolgen bleibt (Sebastian, 14.07.2026: bewusste Absicht
hinter Avadas [fusion_checklist type="icons"] mit betitelten Eintraegen).
Nicht zu verwechseln mit .gb-checklist (kurze Einzeiler ohne eigene
Ueberschrift, z.B. Ernte-Kriterien) - .gb-activity-box ist fuer Eintraege
mit eigenem Titel + Absatztext. Kommt vermutlich bei Kraeuter-Seiten und
manchen Beitraegen wieder vor. */
.gb-activity-box {
background: var(--gb-cream, #f0ede4);
border: 1px solid var(--gb-border-soft, rgba(42,74,30,0.13));
border-radius: var(--gb-radius-lg, 16px);
padding: var(--gb-space-lg, 32px);
margin: var(--gb-space-lg, 32px) 0;
display: flex;
flex-direction: column;
gap: var(--gb-space-lg, 32px);
}
.gb-activity-box-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.gb-activity-box-icon {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gb-green-mid, #4a9635);
display: flex;
align-items: center;
justify-content: center;
}
.gb-activity-box-icon svg {
width: 17px;
height: 17px;
stroke: #fff;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.gb-activity-box-item h3 {
margin: 0 0 6px;
font-size: 17px;
color: var(--gb-text-heading, #1a4d0e);
}
.gb-activity-box-item p {
margin: 0;
color: var(--gb-text-body, #747474);
}
@media (max-width: 600px) {
.gb-activity-box-item {
flex-direction: column;
gap: 8px;
}
}
/* .gb-activity-box kann auch den ganzen Abschnitt umfassen (H2-Titel +
Einleitungstext/Video + Teilschritte), nicht nur die Teilschritte
allein (Sebastian, 14.07.2026: soll wie ein zusammenhaengendes Paket
wirken, nicht durch ein dazwischenliegendes Bild getrennt). Verschachtelte
.gb-media-row (Einleitung Text+Video, oder Text+Bild innerhalb eines
einzelnen Eintrags) braucht eigene Abstandsregeln, da .gb-activity-box
bereits per flex-gap Abstand zwischen den direkten Kindern erzeugt. */
.gb-activity-box > h2:first-child,
.gb-activity-box > h3:first-child {
margin-top: 0;
}
.gb-activity-box > .gb-media-row {
margin: 0;
}
.gb-activity-box-item .gb-media-row {
margin: var(--gb-space-sm, 14px) 0 0;
}
/* Icon-Font fuer .gb-activity-box: selbst gehostet aus dem bereits
vorhandenen Icomoon-Set unter wp-content/uploads/fusion-icons/ (von
Sebastian selbst via icomoon.io erstellt und bewusst pro Textabschnitt
ausgewaehlt - physisch unabhaengig von Avada/Fusion Builder, bisher nur
ueber Avadas Custom-Icon-Feature eingebunden). Eigene @font-face-
Deklaration hier, damit die Icons auch nach einer moeglichen
Avada-Abloesung weiter funktionieren, ohne Fusion-Builder-Laufzeit.
Aktuell nur die 5 fuer Basilikum genutzten Icons definiert - bei Bedarf
weitere Codepoints aus derselben style.css (gleicher Font-Ordner)
ergaenzen, gleiches Muster. */
@font-face {
font-family: 'gb-icons';
src: url('/wp-content/uploads/fusion-icons/icomoon_custom_set-v1.0-1/fonts/icomoon_custom_set.woff') format('woff'),
url('/wp-content/uploads/fusion-icons/icomoon_custom_set-v1.0-1/fonts/icomoon_custom_set.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
.gb-icon {
font-family: 'gb-icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gb-icon-calendar:before { content: "\e953"; }
.gb-icon-inbox:before { content: "\e9fe"; }
.gb-icon-seedling:before { content: "\ea63"; }
.gb-icon-leaf:before { content: "\e9f3"; }
.gb-icon-hand-lizard:before { content: "\e917"; }
.gb-icon-hands-wash:before { content: "\ea51"; }
.gb-icon-braille:before { content: "\ea50"; }
.gb-icon-store:before { content: "\ea4e"; }
.gb-icon-spa:before { content: "\ea4b"; }
.gb-icon-edit:before { content: "\e9f5"; }
.gb-activity-box-icon {
color: #fff;
font-size: 16px;
}
/* CTA-Box mit Hintergrundbild: fuer externe Partner-Empfehlungen mit
Button (z.B. Wurmkiste.at auf der Wurmkompostierer-Seite). Bild wird
per Inline-style="background-image:url(...)" pro Instanz gesetzt, da
es sich um Content handelt (kein wiederverwendbares Layout-Detail).
Sebastian, 15.07.2026 (Zubehoer-Batch). */
.gb-cta-box {
position: relative;
border-radius: var(--gb-radius-lg, 16px);
padding: 48px 24px;
margin: var(--gb-space-lg, 32px) 0;
text-align: center;
color: #fff;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
overflow: hidden;
}
.gb-cta-box::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.gb-cta-box > * {
position: relative;
z-index: 1;
}
.gb-cta-box p {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.gb-cta-button {
display: inline-block;
background: var(--gb-green-mid, #4a9635);
color: #fff;
padding: 12px 28px;
border-radius: var(--gb-radius-pill, 999px);
text-decoration: none;
font-weight: 600;
}
.gb-cta-button:hover {
background: var(--gb-green-dark, #1a3d1d);
}
/* Homepage "Themen"-Kachelleiste (ersetzt die frueheren 3 Feature-Karten
+ 4-spaltige "Themen auf dem Gemuese-Balkon"-Zeile, die teils auf
dieselben Ziele verlinkten). Sebastian, 17.07.2026. */
.gb-topics-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.1rem;
}
@media (max-width: 980px) {
.gb-topics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
.gb-topics-grid { grid-template-columns: repeat(2, 1fr); }
}
.gb-topic-card {
position: relative;
background: var(--gb-white, #fff);
border: 1px solid var(--gb-border-soft, rgba(42,74,30,0.13));
border-radius: var(--gb-radius-lg, 16px);
box-shadow: var(--gb-shadow-card, 0 2px 12px rgba(0,0,0,0.06));
padding: 1.5rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* 18.07.2026: .gb-topic-card was originally the itself, but wrapping a