/*
 * IG Wilde Biene — Gestaltung
 *
 * Die Farben kommen aus Divis Global Colors (Builder → Global Colors). Divi
 * gibt sie im Frontend als --gcid-*-Variablen aus; die Werte dahinter sind
 * nur Rückfallwerte, falls dort eine Farbe gelöscht wird.
 *
 * Bildabhängige Werte (Hero, CTA-Hintergründe) setzt functions.php als
 * --igwb-bg-*-Variablen, damit dieses Stylesheet statisch bleibt.
 */
:root {
	--igwb-green: var(--gcid-primary-color, #4a7c3f);
	--igwb-gold:  var(--gcid-secondary-color, #c9a227);
	--igwb-dark:  var(--gcid-heading-color, #2d4a26);
	--igwb-text:  var(--gcid-body-color, #3f4a3a);
	--igwb-sand:  var(--gcid-igwb-sand, #f5f1e6);
	--igwb-band:  var(--gcid-igwb-band, #3c6531);
	--igwb-fuss:  var(--gcid-igwb-fuss, #1d2f17);
	--igwb-hell:  var(--gcid-igwb-hell, #8fc47e);
	--igwb-panel: 340px;
}

/* ---------------------------------------------------------- Kopfbereich */
.et-l--header .et_pb_section,
.et-l--header .et_pb_row { padding: 0 !important; margin: 0 auto !important; }
.et-l--header .et_pb_row { width: 92%; max-width: 1240px; }
.et-l--header .et_pb_menu { padding: 0 !important; background: transparent; }
.et-l--header .et_pb_menu_inner_container {
	display: flex !important;
	flex-direction: row !important;   /* .et_flex_module setzt sonst column */
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 74px;
	position: relative;
}
/* Kopf bleibt beim Scrollen stehen.
   Divis Einstellung "Fixed Navigation Bar" greift hier nicht: sie gilt nur für
   den Standard-Header, den unser Theme-Builder-Header ersetzt. */
.et-l--header {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,.07);
	position: sticky;
	top: 0;
	z-index: 9000;
	transition: box-shadow .2s ease;
}
/* Etwas kräftigerer Schatten, sobald die Seite gescrollt ist */
body.igwb-gescrollt .et-l--header { box-shadow: 0 2px 14px rgba(0,0,0,.13); }
/* Angemeldete sehen die WordPress-Leiste über dem Kopf */
.admin-bar .et-l--header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .et-l--header { top: 46px; }
}
/* Sprungziele nicht unter dem Kopf verstecken */
:target { scroll-margin-top: 90px; }
.et-l--header .et_pb_menu__logo-wrap,
.et-l--header .et_pb_menu__logo { margin: 0; display: flex; align-items: center; }
.et-l--header .et_pb_menu__logo a { display: block; line-height: 0; }
.et-l--header .et_pb_menu__logo img { max-height: 48px; width: auto; display: block; }
.et-l--header .et_pb_menu__menu { display: none !important; }
.et-l--header .et_mobile_nav_menu {
	display: block !important; margin: 0;
	transition: opacity .2s ease;
}
/* Bei offenem Panel uebernimmt dessen Kreuz - zwei Bedienelemente waeren doppelt. */
body.igwb-nav-open .et-l--header .et_mobile_nav_menu {
	opacity: 0; visibility: hidden; pointer-events: none;
}
/* Divi klont das Desktop-Menü beim Klick in ein eigenes Panel. Wir bauen
   unseres selbst - seines muss weg, sonst öffnen beide gleichzeitig. */
.et-l--header .et_mobile_menu { display: none !important; }
.et-l--header .et_pb_menu__wrap { flex: 0 0 auto; justify-content: flex-end; }

/* Hamburger - der Glyph ist im Divi-CSS nur in max-width:980px definiert */
.et-l--header .mobile_menu_bar { position: relative; display: block; line-height: 1; cursor: pointer; }
.et-l--header .mobile_menu_bar:before {
	content: "\61";
	font-family: ETmodules;
	/* Divi erzeugt aus hamburgerMenuIcon eigenes CSS und gewinnt sonst. */
	font-size: 60px !important;
	font-weight: normal; font-style: normal; font-variant: normal;
	line-height: 1; text-transform: none; speak: none;
	color: var(--igwb-dark);
	position: relative; top: 2px;
}
/* Der Hamburger bleibt Hamburger - das Kreuz sitzt im Panel, sonst zwei Kreuze. */

/* -------------------------------------------------------- Shop-Button */
.igwb-shop-btn {
	display: inline-flex; align-items: center;
	margin-right: 22px;
	padding: 9px 20px;
	border: 2px solid var(--igwb-green);
	border-radius: 4px;
	color: var(--igwb-green) !important;
	font-size: .92rem; font-weight: 700; letter-spacing: .02em;
	text-decoration: none !important;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.igwb-shop-btn:hover { background: var(--igwb-green); color: #fff !important; }
body.igwb-nav-open .igwb-shop-btn { opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.et-l--header .et_pb_menu__wrap { display: flex; align-items: center; }
@media (max-width: 480px) {
	.igwb-shop-btn { margin-right: 14px; padding: 7px 14px; font-size: .85rem; }
}

/* Shop in der Footer-Schlusszeile als kleiner Button */
.igwb-footer__meta .igwb-footer__shop {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 3px;
	color: rgba(255,255,255,.8) !important;
	font-size: .82rem; font-weight: 600;
	line-height: 1.3;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.igwb-footer__meta .igwb-footer__shop:hover {
	background: var(--igwb-green); border-color: var(--igwb-green); color: #fff !important;
}

/* ------------------------------------------------- Push-Menü von rechts */
#page-container { transition: transform .34s cubic-bezier(.4,0,.2,1); }
/* Divi setzt am #page-container per JavaScript overflow-y: hidden. Das macht
   position: sticky bei ALLEN Kindern wirkungslos - der Kopf scrollte dadurch
   mit weg. Kein Stylesheet setzt es, deshalb braucht es hier !important
   gegen den Inline-Stil. Geprüft: ohne die Sperre scrollt nichts seitwärts. */
#page-container { overflow: visible !important; }
body.igwb-nav-open #page-container { transform: translateX(calc(var(--igwb-panel) * -1)) !important; }

/* Panel haengt an <body>, nicht im #page-container - sonst wuerde die
   transform des Containers sein position:fixed aufheben. */
.igwb-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: var(--igwb-panel);
	max-width: 88vw;
	background: #fff;
	border-left: 4px solid var(--igwb-green);
	box-shadow: -14px 0 40px rgba(0,0,0,.16);
	transform: translateX(100%);
	transition: transform .34s cubic-bezier(.4,0,.2,1);
	z-index: 100000;
	overflow-y: auto;
	padding: 100px 0 40px;
	-webkit-overflow-scrolling: touch;
}
body.igwb-nav-open .igwb-panel,
.igwb-panel.igwb-panel--open { transform: translateX(0) !important; }
/* Sitzt auf derselben Mittelachse wie Logo und Hamburger im 74px hohen Kopf. */
/* Kreuz als zwei Striche statt ETmodules-Glyph: der Font bringt eigenen
   Seitenabstand mit, dadurch stand das Zeichen nie exakt auf der Textkante
   der Menuepunkte (26px). */
.igwb-panel__close {
	position: absolute; top: 22px; left: 26px; right: auto;
	width: 34px; height: 34px;
	border: 0; background: none; cursor: pointer; padding: 0;
	transition: opacity .2s ease;
}
.igwb-panel__close:before,
.igwb-panel__close:after {
	content: ""; position: absolute; top: 50%; left: 0;
	width: 34px; height: 3px; border-radius: 2px;
	background: var(--igwb-dark);
}
.igwb-panel__close:before { transform: rotate(45deg); }
.igwb-panel__close:after  { transform: rotate(-45deg); }
.igwb-panel__close:hover { opacity: .6; }
.igwb-panel ul { list-style: none; margin: 0; padding: 0; }
.igwb-panel li { position: relative; list-style: none; }
.igwb-panel a {
	display: block; padding: 13px 52px 13px 26px;
	color: var(--igwb-dark); text-decoration: none; font-size: 18px; line-height: 1.35;
	border-bottom: 1px solid #eee;
}
.igwb-panel a:hover { background: var(--igwb-sand); }
.igwb-panel .sub-menu { display: none; background: #faf8f2; }
.igwb-panel li.igwb-open > .sub-menu { display: block; }
.igwb-panel .sub-menu a { padding-left: 42px; font-size: 17px; color: #46603d; }
.igwb-sub-toggle {
	position: absolute; top: 0; right: 0; width: 56px; height: 51px;
	border: 0; background: none; cursor: pointer; padding: 0;
	font-family: ETmodules; font-size: 26px; color: var(--igwb-green); line-height: 51px;
	text-align: center;
	transition: transform .2s ease;
}
.igwb-sub-toggle:before { content: "\33"; }
.igwb-open > .igwb-sub-toggle:before { content: "\32"; }

/* Aktueller Zweig sichtbar machen */
.igwb-panel .current-menu-item > a,
.igwb-panel .current_page_item > a {
	color: var(--igwb-green);
	font-weight: 700;
	background: var(--igwb-sand);
	box-shadow: inset 4px 0 0 var(--igwb-green);
}
.igwb-panel .current-menu-ancestor > a,
.igwb-panel .current-menu-parent > a,
.igwb-panel .current_page_ancestor > a {
	color: var(--igwb-green);
	font-weight: 700;
}
.igwb-panel .current-menu-ancestor > .igwb-sub-toggle,
.igwb-panel .current-menu-parent > .igwb-sub-toggle { color: var(--igwb-green); }
.igwb-backdrop {
	position: fixed; inset: 0; background: rgba(20,30,18,.42);
	opacity: 0; pointer-events: none; transition: opacity .34s; z-index: 99999;
}
body.igwb-nav-open .igwb-backdrop,
.igwb-backdrop.igwb-backdrop--on { opacity: 1 !important; pointer-events: auto; }

/* ------------------------------------------------------------ Hero */
.igwb-hero-section { padding: 0 !important; }
.igwb-hero .et_pb_slide { min-height: 62vh; padding: 0; }
.igwb-hero .et_pb_slide_description {
	padding: 8vh 6% !important;
	max-width: 760px;
	text-align: left;
}
.igwb-hero .et_pb_slide_title,
.igwb-hero .et_pb_slide_title a {
	color: #fff !important;
	font-size: clamp(2rem, 4.6vw, 3.6rem) !important;
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0,0,0,.5);
	font-weight: 600;
}
.igwb-hero .et_pb_slide_title,
.igwb-hero .et_pb_slide_title a { margin-bottom: .55em !important; }
.igwb-hero .et_pb_slide_content {
	color: #fff !important;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	text-shadow: 0 1px 12px rgba(0,0,0,.55);
	max-width: 52ch;
}
.igwb-hero .igwb-hero__lead { margin: 0 0 2em !important; line-height: 1.55; }

/* Die drei Handlungsangebote nebeneinander */
.igwb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.igwb-hero__btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 4px;
	border: 2px solid rgba(255,255,255,.75);
	background: rgba(255,255,255,.10);
	color: #fff !important;
	font-size: 1rem; font-weight: 600; line-height: 1.2;
	text-decoration: none !important;
	text-shadow: none;
	backdrop-filter: blur(3px);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.igwb-hero__btn:hover { background: #fff; border-color: #fff; color: var(--igwb-dark) !important; }
.igwb-hero__btn--primary {
	background: var(--igwb-green); border-color: var(--igwb-green);
}
.igwb-hero__btn--primary:hover { background: #5b9450; border-color: #5b9450; color: #fff !important; }
.igwb-hero .et_pb_slide { position: relative; }
.igwb-hero .et_pb_slide:after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(20,35,16,.72) 0%, rgba(20,35,16,.32) 55%, rgba(20,35,16,.08) 100%);
	pointer-events: none;
}
.igwb-hero .et_pb_slide_description { position: relative; z-index: 2; }
.igwb-hero .et_pb_more_button {
	background: var(--igwb-green) !important;
	border: 2px solid var(--igwb-green) !important;
	color: #fff !important;
	padding: 12px 30px !important;
	border-radius: 4px;
}
.igwb-hero .et_pb_more_button:hover { background: transparent !important; color: #fff !important; }
.igwb-hero .et-pb-controllers a { background: rgba(255,255,255,.55); }
.igwb-hero .et-pb-controllers .et-pb-active-control { background: #fff; }

/* -------------------------------------------------- Abschnitts-Titel */
.igwb-section-title {
	text-align: center; color: var(--igwb-dark);
	font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .35em;
}
.igwb-section-lead {
	text-align: center; max-width: 62ch; margin: 0 auto 0;
	color: #55604f; font-size: 1.05rem;
}
.igwb-projects { padding: 76px 0 84px !important; }
.igwb-projects .et_pb_row,
.igwb-news .et_pb_row,
.igwb-cta-section .et_pb_row { width: 92%; max-width: 1240px; }
.igwb-section-head { padding-bottom: 8px !important; }

/* ------------------------------------------------- Projekt-Uebersicht */
.igwb-uebersicht { padding-top: 46px !important; }
.igwb-uebersicht-intro { padding-bottom: 6px !important; }
.igwb-lead {
	max-width: 68ch;
	font-size: 1.08rem; line-height: 1.7; color: #4a5544;
	margin: 0 0 1.4em;
}
.igwb-archiv { background: var(--igwb-sand); padding: 60px 0 70px !important; }
.igwb-archiv .igwb-section-title { text-align: left; margin-bottom: 1em; }
/* Volle Section-Breite statt 92%: sonst sitzt der Inhalt der Uebersichten
   50px weiter rechts als Breadcrumb und Fliesstext der uebrigen Seiten. */
.igwb-uebersicht .et_pb_row,
.igwb-archiv .et_pb_row {
	width: 100% !important;
	max-width: 1240px !important;
	margin-left: auto; margin-right: auto;
}

/* ----------------------------------------------------- Projekt-Cards */
.igwb-card-row {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 26px;
}
/* Die Karte IST die Spalte. Frueher lag sie als <div> in einem Textmodul -
   Bild, Titel, Text und Verweis steckten damit in einem WYSIWYG-Feld und
   waren nicht getrennt pflegbar. Jetzt traegt die Spalte das Kartenbild,
   und darin liegen vier eigene Module. */
.igwb-card-row .et_pb_column {
	display: flex !important;
	flex-direction: column;
	width: calc((100% - 52px) / 3) !important;
	max-width: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
	background: #fff;
	border: 1px solid #e8e4d8;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Vierspaltige Variante: auf der Startseite stehen acht Karten, dreispaltig
   liefe die Liste dort zu hoch. Drei Lücken à 26px = 78px. */
.igwb-card-row--4 .et_pb_column {
	width: calc((100% - 78px) / 4) !important;
}
.igwb-card-row .et_pb_column:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(45,74,38,.14);
	border-color: #cfe0c6;
}
/* Divi setzt an Modulen eigene Abstaende; innerhalb der Karte bestimmt sie
   die Karte selbst. */
.igwb-card-row .et_pb_module {
	width: 100%;
	margin: 0 !important;
}
/* Bild randlos oben, feste Bildflaeche wie zuvor */
.igwb-card__media,
.igwb-card__media .et_pb_image_wrap {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--igwb-sand);
	line-height: 0;
}
/* Die Regel fuer Inhaltsbilder (.et_pb_post_content img { height:auto })
   wuerde hier gewinnen - zusammen mit Lazy-Loading faellt das Bild dann auf
   Hoehe 0. Deshalb hoeher gewichtet. */
.igwb-card__media img,
.igwb-pagebody .et_pb_post_content .igwb-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	border-radius: 0;
	transition: transform .5s ease;
}
.igwb-card-row .et_pb_column:hover .igwb-card__media img { transform: scale(1.05); }
/* Text und Titel bekommen den Innenabstand, den frueher .igwb-card__body trug */
.igwb-card__title { padding: 20px 22px 0; }
.igwb-card__title,
.igwb-card__title h1, .igwb-card__title h2, .igwb-card__title h3,
.igwb-card__title h4, .igwb-card__title h5, .igwb-card__title h6 {
	font-size: 1.08rem; line-height: 1.3; margin: 0;
	color: var(--igwb-dark);
}
.igwb-card__title a { color: var(--igwb-dark); text-decoration: none; }
.igwb-card-row .et_pb_column:hover .igwb-card__title,
.igwb-card-row .et_pb_column:hover .igwb-card__title h3 { color: var(--igwb-green); }
.igwb-card__text { padding: .5em 22px 0; }
.igwb-card__text,
.igwb-card__text p {
	font-size: .92rem; line-height: 1.55; color: #5d6657; margin: 0;
}
/* Der Verweis sitzt buendig unten, damit die Karten einer Reihe gleich
   aussehen, auch wenn die Texte unterschiedlich lang sind. Divi haengt den
   Knopf in einen eigenen Wrapper - das margin-top:auto muss an diesen, nicht
   an den Verweis selbst, und es braucht mehr Gewicht als die Modulregel
   weiter oben. */
.igwb-card-row .et_pb_column > .et_pb_button_module_wrapper {
	margin-top: auto !important;
	padding: 1.1em 22px 22px;
	text-align: left;
	line-height: 1.4;
}
/* Divis Knopf sieht ab Werk aus wie ein Knopf. Hier soll er wie zuvor ein
   Textverweis mit Pfeil sein. */
.igwb-card-row .et_pb_button.igwb-card__link,
.igwb-card-row .et_pb_button.igwb-card__link:hover {
	/* Nur so breit wie die Beschriftung: Die Modulregel weiter oben gibt
	   allen Modulen volle Breite, und der Knopf ist selbst ein Modul. Ohne
	   das zog sich jede Hervorhebung über die ganze Kartenbreite. */
	display: inline-block;
	width: auto !important;
	padding: 0 !important;
	color: var(--igwb-green) !important;
	font-weight: 600 !important;
	font-size: .92rem !important;
	line-height: 1.4;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.igwb-card-row .et_pb_button.igwb-card__link:hover {
	transform: none;
}
/* Divi setzt das Pfeil-Zeichen als Icon-Schrift und blendet es erst beim
   Darueberfahren ein; hier steht der Pfeil dauerhaft und in der Textschrift. */
.igwb-card-row .et_pb_button.igwb-card__link:before { display: none !important; }
.igwb-card-row .et_pb_button.igwb-card__link:after {
	content: "\00a0\2192" !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	opacity: 1 !important;
	margin: 0 !important;
	position: static !important;
	display: inline !important;
	left: auto !important;
	transform: none !important;
}
/* Die Breitenbegrenzung des Fliesstextes gilt in den Karten nicht - dort
   bestimmt die Spalte die Breite. */
.igwb-card-row .et_pb_text_inner > p,
.igwb-pagebody .et_pb_post_content .igwb-card__text .et_pb_text_inner > p {
	max-width: none;
}

/* Der Kartentitel ist ein Ueberschriftenmodul mit hinterlegtem Link, aber
   Divi 5 rendert dafuer nur die Klasse .et_clickable - kein <a>, kein
   Handler. Der Klick auf den Titel und auf die Flaeche zwischen Bild und
   Text lief damit ins Leere. igwb.js haengt dem Titel einen echten Verweis
   an und macht die restliche Kartenflaeche anklickbar; hier steht nur, was
   man davon sieht. */
.igwb-card--klickbar { cursor: pointer; }
.igwb-card__title a { color: inherit; text-decoration: none; }
.igwb-card--klickbar:focus-within {
	border-color: var(--igwb-green);
	box-shadow: 0 0 0 3px rgba(74,124,63,.25);
}

/* ------------------------------------------- Weiter zu den Uebersichten */
.igwb-weiter-row { padding-top: 12px !important; }
.igwb-weiter {
	display: flex; flex-wrap: wrap; gap: 14px;
	justify-content: center;
	padding-top: 10px;
}
.igwb-weiter__btn {
	display: inline-block;
	padding: 13px 30px;
	border: 2px solid var(--igwb-green);
	border-radius: 4px;
	color: var(--igwb-green) !important;
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease;
}
.igwb-weiter__btn:hover { background: var(--igwb-green); color: #fff !important; }
.igwb-weiter__btn--primary { background: var(--igwb-green); color: #fff !important; }
.igwb-weiter__btn--primary:hover { background: #5b9450; border-color: #5b9450; }

/* ------------------------------------------------------- News + CTA */

/* Beitragsbilder in den Aktuelles-Kacheln begrenzen.
   Divis Blog-Modul gibt dem Beitragsbild die volle Breite und behaelt das
   Seitenverhaeltnis bei. Mit Bildern wuchs der Abschnitt dadurch von rund
   900px auf 2592px - eine Kachel fuellte den Bildschirm, und das Verhaeltnis
   von Bild zu Text kippte. Feste Hoehe plus Beschnitt haelt die Kacheln
   kompakt (Abschnitt wieder 1491px). */
.et_pb_blog .entry-featured-image-url {
	display: block;
	overflow: hidden;
	border-radius: 6px;
}
.et_pb_blog .entry-featured-image-url img {
	height: 240px;
	width: 100%;
	object-fit: cover;
	display: block;
}
/* Das Bee-Finder-Logo ist kein Foto: beschnitten saehe es beschaedigt aus.
   Es wird eingepasst statt gefuellt, auf weissem Grund. Seine Hoehe folgt
   dem Seitenverhaeltnis (2.9:1) statt fest 240px zu sein - auf dem Handy
   blieben sonst 137px der Kachel leer. max-height deckelt es auf breiten
   Schirmen auf dieselbe Hoehe wie die Fotokacheln. */
.et_pb_blog .entry-featured-image-url img[src*="Bee-Finder-Logo"] {
	object-fit: contain;
	background: #fff;
	padding: 18px;
	height: auto;
	max-height: 240px;
}

/* Auf der Beitragsseite selbst kein Beitragsbild im Titelbereich.
   Sobald ein Beitragsbild gesetzt ist, blendet Divi es dort gross ein - das
   Bild stuende dann zweimal auf der Seite, oben ohne und weiter unten mit
   Urhebervermerk. Die Fotos stammen von André Rey und Jürg Sommerhalder, der
   Vermerk gehoert ans Bild; also bleibt die Fassung im Text und die obere
   faellt weg. Das Beitragsbild wird weiter gebraucht: fuer die Kachel im
   Abschnitt Aktuelles. Nur Beitraege, Seiten haben ohnehin keines. */
.single-post .et_pb_title_featured_container { display: none; }

.igwb-news {
	padding: 84px 0 !important;
	position: relative;
	background-color: var(--igwb-fuss);
	background-image: var(--igwb-bg-news, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
}
/* Deckschicht - ohne sie ist auf dem Foto nichts lesbar. */
.igwb-news:before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(22,34,17,.88) 0%, rgba(22,34,17,.78) 100%);
	pointer-events: none;
}
.igwb-news > .et_pb_row, .igwb-news .et_pb_row { position: relative; z-index: 2; }
.igwb-news .igwb-section-title { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.igwb-news .et_pb_post {
	background: rgba(255,255,255,.96); border-radius: 10px; padding: 22px 24px;
	border: 0; margin-bottom: 20px; box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.igwb-news .entry-title { font-size: 1.15rem; }
.igwb-news .entry-title a { color: var(--igwb-dark); }
.igwb-news .et_pb_post p { color: #5d6657; }
/* Die Meta-Zeile verlinkt auf /author/ - ohne Anzeigename des Autors ein
   toter Link, und die Angabe bringt hier ohnehin nichts. */
.igwb-news .post-meta { display: none !important; }

.igwb-cta-section { padding: 74px 0 !important; }
.igwb-cta {
	position: relative; overflow: hidden;
	background: var(--igwb-dark); color: #fff;
	padding: 44px 38px; border-radius: 12px; height: 100%;
	display: flex; flex-direction: column; align-items: flex-start;
	background-size: cover; background-position: center;
}
.igwb-cta:before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(20,35,16,.90) 0%, rgba(20,35,16,.62) 100%);
}
.igwb-cta--alt:before {
	background: linear-gradient(135deg, rgba(28,62,20,.90) 0%, rgba(52,104,38,.60) 100%);
}
.igwb-cta > * { position: relative; z-index: 2; }
.igwb-cta:not(.igwb-cta--alt) { background-image: var(--igwb-bg-mitglied, none); }
.igwb-cta--alt { background-image: var(--igwb-bg-spende, none); }
.igwb-cta h2 { color: #fff; font-size: 1.7rem; margin-bottom: .4em; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.igwb-cta p { color: rgba(255,255,255,.94); margin-bottom: 1.6em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.igwb-cta__btn {
	display: inline-block; background: #fff; color: var(--igwb-dark);
	padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 600;
}
.igwb-cta__btn:hover { background: var(--igwb-sand); color: var(--igwb-dark); }
.igwb-cta-row .et_pb_column { display: flex; }
.igwb-cta-row .et_pb_module { width: 100%; }

/* ------------------------------------------------- Inhaltsseiten-Kopf */
.igwb-pagehead {
	position: relative;
	padding: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}
.igwb-pagehead:before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(20,35,16,.82) 0%, rgba(20,35,16,.52) 100%);
}
.igwb-pagehead .et_pb_row {
	position: relative; z-index: 2;
	width: 92%; max-width: 1240px;
	min-height: 220px;
	display: flex; align-items: center;
	padding: 34px 0 !important;
}
.igwb-pagehead .et_pb_module { margin-bottom: 0 !important; width: 100%; }
/* Divi blendet die Meta-Zeile trotz meta=off ein ("by | Datum | Kategorie") */
.igwb-pagehead .et_pb_title_meta_container,
.igwb-pagehead .post-meta { display: none !important; }
.igwb-pagehead .entry-title,
.igwb-pagehead h1 {
	color: #fff !important;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	line-height: 1.15;
	text-shadow: 0 2px 16px rgba(0,0,0,.45);
	margin: 0; padding: 0;
}

.igwb-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Breadcrumb */
.igwb-breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: .88rem; color: #6b7566;
	padding: 14px 0;
}
.igwb-breadcrumb a { color: #6b7566; text-decoration: none; }
.igwb-breadcrumb a:hover { color: var(--igwb-green); text-decoration: underline; }
.igwb-breadcrumb__sep { color: #b3bdac; }
.igwb-breadcrumb [aria-current="page"] { color: var(--igwb-dark); font-weight: 600; }
.igwb-breadcrumb-section { padding: 0 !important; border-bottom: 1px solid #ebeee8; }
.igwb-breadcrumb-section .et_pb_row {
	width: 92%; max-width: 1240px; padding: 0 !important;
}
.igwb-breadcrumb-section .et_pb_module { margin-bottom: 0 !important; }

/* ------------------------------------------------ Inhaltsseiten-Koerper */
.igwb-pagebody { padding: 58px 0 66px !important; }
.igwb-pagebody .et_pb_row { width: 92%; max-width: 1240px; }

/* Zeilenlaenge begrenzen - ueber die volle Breite ist Fliesstext nicht
   lesbar. Bilder, Tabellen und eingebettete Inhalte bleiben voll. */
.igwb-pagebody .et_pb_post_content > p,
.igwb-pagebody .et_pb_post_content > ul,
.igwb-pagebody .et_pb_post_content > ol,
.igwb-pagebody .et_pb_post_content > h2,
.igwb-pagebody .et_pb_post_content > h3,
.igwb-pagebody .et_pb_post_content > h4,
.igwb-pagebody .et_pb_post_content > blockquote {
	max-width: 72ch;
}
.igwb-pagebody .et_pb_post_content > figure,
.igwb-pagebody .et_pb_post_content > table,
.igwb-pagebody .et_pb_post_content > .wp-block-table,
.igwb-pagebody .et_pb_post_content > iframe { max-width: none; }
.igwb-pagebody .et_pb_post_content { font-size: 1.02rem; line-height: 1.72; color: #3f4a3a; }
.igwb-pagebody .et_pb_post_content h2 { color: var(--igwb-dark); margin-top: 1.6em; }
.igwb-pagebody .et_pb_post_content h3 { color: var(--igwb-dark); margin-top: 1.3em; }
.igwb-pagebody .et_pb_post_content a { color: var(--igwb-green); }

/* Links im Fliesstext unterstreichen.
   Das Gruen #4a7c3f hat gegen die Textfarbe #3f4a3a nur 1.89:1 - WCAG 1.4.1
   verlangt 3:1, wenn die Farbe das einzige Merkmal ist. Statt die Farbe zu
   aendern (sie wuerde gegen Weiss unter 4.5:1 fallen) bekommt der Link ein
   zweites, farbunabhaengiges Merkmal. Damit entfaellt die 3:1-Schwelle, und
   der Link ist auch bei heller Umgebung und schwachem Sehvermoegen als Link
   erkennbar - genau die Beobachtung aus Esthers Punkt 8.
   Die Linie laeuft gedaempft mit und wird erst bei Hover/Fokus voll. */
.igwb-pagebody .et_pb_post_content a:not(.et_pb_button):not(:has(img)):not(:has(figure)) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;   /* haelt die Linie aus den Unterlaengen */
	text-decoration-color: color-mix(in srgb, var(--igwb-green) 45%, transparent);
	transition: text-decoration-color .15s, text-decoration-thickness .15s;
}
.igwb-pagebody .et_pb_post_content a:not(.et_pb_button):hover,
.igwb-pagebody .et_pb_post_content a:not(.et_pb_button):focus-visible {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.igwb-pagebody .et_pb_post_content img { height: auto; border-radius: 6px; }

/* Bilder mit Bildunterschrift im Fliesstext.
   Die Absaetze halten ihren Abstand ueber padding-bottom, nicht ueber
   margin - eine <figure> bekommt davon nichts ab und klebte sonst am
   folgenden Absatz. Die Bildunterschrift traegt den Urhebervermerk und muss
   sich vom Fliesstext abheben, ohne ihn zu unterbieten: #616b5c ergibt gegen
   Weiss 5.58:1 und bleibt damit auch in der kleineren Groesse gut lesbar. */
.igwb-pagebody .et_pb_post_content figure {
	margin: 0 0 1.5em;
}
.igwb-pagebody .et_pb_post_content figure img {
	display: block;
	width: 100%;
}
.igwb-pagebody .et_pb_post_content figcaption {
	margin-top: .6em;
	font-size: .87rem;
	line-height: 1.45;
	color: #616b5c;
}
/* Alt-Markup: die Portraits sind mit alignleft/-right gesetzt */
.igwb-pagebody .et_pb_post_content .alignleft { margin: .3em 1.8em 1.2em 0; }
.igwb-pagebody .et_pb_post_content .alignright { margin: .3em 0 1.2em 1.8em; }
.igwb-pagebody .et_pb_post_content table { width: 100%; border-collapse: collapse; }
.igwb-pagebody .et_pb_post_content td,
.igwb-pagebody .et_pb_post_content th { border: 1px solid #e2e6dd; padding: 9px 12px; }

@media (max-width: 700px) {
	.igwb-pagebody .et_pb_post_content .alignleft,
	.igwb-pagebody .et_pb_post_content .alignright { float: none; display: block; margin: 0 0 1.2em; }
}

/* ------------------------------------------------- Portraet-Bilder */
/* Ersetzt die handgesetzten style="float:left"-Angaben. clear:left sorgt
   dafuer, dass jedes Portrait auf eigener Hoehe beginnt - sonst rutscht das
   naechste Bild neben den Text des vorherigen. */
.igwb-pagebody .igwb-portrait {
	float: left;
	clear: left;
	width: 150px;
	height: auto;
	margin: .35em 24px 20px 0;
	border-radius: 6px;
}
.igwb-pagebody .et_pb_post_content p { overflow: visible; }
@media (max-width: 700px) {
	.igwb-pagebody .igwb-portrait { float: none; clear: none; display: block; margin: 0 0 14px; }
}

/* WordPress erzeugt beim Rendern leere Absaetze (wpautop). Sie erzeugen
   Leerraum ohne Inhalt - im Seitentext unterdruecken. */
.igwb-pagebody .et_pb_post_content p:empty,
.igwb-pagebody .et_pb_post_content li:empty,
.igwb-pagebody .et_pb_post_content ol:empty,
.igwb-pagebody .et_pb_post_content ul:empty { display: none; }

/* ------------------------------- Fluchtlinie im Seiteninhalt */
/* Seiten, die selbst aus Divi-Sections bestehen (Accordions, Uebersichten),
   rendern ihre Section samt Row INNERHALB der Row des Body-Templates. Divis
   Standardbreite von 80% wirkt dann ein zweites Mal - der Inhalt sitzt rund
   50px weiter rechts als Titel, Breadcrumb und Footer. Alles, was im
   post-content liegt, nutzt deshalb die volle Breite des Elternteils. */
.igwb-pagebody .et_pb_post_content .et_pb_section {
	padding: 0 !important;
	background: transparent !important;
}
.igwb-pagebody .et_pb_post_content .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.igwb-pagebody .et_pb_post_content .et_pb_column {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Abstand zwischen mehreren Abschnitten bleibt erhalten */
.igwb-pagebody .et_pb_post_content .et_pb_section + .et_pb_section { margin-top: 34px; }

/* --------------------------------------- Media-Text-Bloecke (Portraits) */
/* Gutenbergs wp-block-media-text setzt grid-template-columns inline, oft mit
   15% Bildspalte - dadurch stehen die Portraits unterschiedlich breit und
   rutschen optisch. Einheitliche Spalte statt der Inline-Werte. */
.igwb-pagebody .wp-block-media-text {
	display: grid !important;
	grid-template-columns: 190px minmax(0, 1fr) !important;
	gap: 28px;
	align-items: start;
	margin: 0 0 2.4em;
	max-width: none;
}
.igwb-pagebody .wp-block-media-text__media {
	grid-column: 1; margin: 0;
}
.igwb-pagebody .wp-block-media-text__media img {
	width: 100%; height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.igwb-pagebody .wp-block-media-text__content {
	grid-column: 2;
	padding: 0 !important;
	max-width: 68ch;
}
.igwb-pagebody .wp-block-media-text__content > *:first-child { margin-top: 0; }
.igwb-pagebody .wp-block-media-text__content > *:last-child { margin-bottom: 0; }
/* Variante mit Bild rechts beibehalten */
.igwb-pagebody .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) 190px !important;
}
.igwb-pagebody .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; }
.igwb-pagebody .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; }

@media (max-width: 700px) {
	.igwb-pagebody .wp-block-media-text,
	.igwb-pagebody .wp-block-media-text.has-media-on-the-right {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}
	.igwb-pagebody .wp-block-media-text__media,
	.igwb-pagebody .wp-block-media-text__content { grid-column: 1 !important; }
	.igwb-pagebody .wp-block-media-text__media img { max-width: 220px; aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------ Newsletter-Streifen */
/* Hellere Nuance als der Footer darunter, damit sich der Streifen absetzt. */
/* Divi erzeugt fuer Theme-Builder-Sektionen eigene Regeln mit hoeherer
   Spezifitaet - deshalb ueber .et-l--footer adressieren. */
.et-l--footer .igwb-newsletter-streifen,
.igwb-newsletter-streifen {
	background: var(--igwb-band) !important;
	padding: 18px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.et-l--footer .igwb-newsletter-streifen .et_pb_row,
.igwb-newsletter-streifen .et_pb_row {
	width: 92%; max-width: 1240px;
	padding: 0 !important; margin: 0 auto !important;
}
.et-l--footer .igwb-newsletter-streifen .et_pb_column,
.igwb-newsletter-streifen .et_pb_column { padding: 0 !important; }
.et-l--footer .igwb-newsletter-streifen .et_pb_signup,
.igwb-newsletter-streifen .et_pb_signup {
	padding: 0 !important; margin: 0 !important;
	min-height: 0 !important;   /* Divi setzt hier sonst ~250px */
}
.igwb-newsletter-streifen .et_pb_newsletter_description { min-height: 0 !important; }
/* Ohne verknuepftes Konto rendert Divi nur die Beschreibung - dann soll der
   Streifen trotzdem schmal bleiben. */
.igwb-newsletter-streifen .et_pb_newsletter_description_content { margin: 0 !important; }
.igwb-newsletter-streifen .et_pb_module { margin-bottom: 0 !important; }
.igwb-newsletter-streifen .et_pb_newsletter {
	background: transparent !important;
	padding: 0 !important;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
	/* Als Flex-Kind der Spalte nähme das Modul sonst nur seine Inhaltsbreite
	   (720 statt 867px) - Beschreibung und Formular brächen dann um. */
	width: 100%; flex: 1 1 auto; min-width: 0;
}
.igwb-newsletter-streifen .et_pb_newsletter_description {
	/* Knapp bemessen, damit der Text den Block ausfüllt. Bei 340px brach er
	   so um, dass rechts rund 100px leer blieben - das Eingabefeld sah dadurch
	   losgelöst aus, obwohl der gemessene Abstand nur 14px betrug. */
	margin: 0; padding: 0; flex: 0 0 250px; min-width: 0;
}
.igwb-newsletter-streifen .et_pb_newsletter_description h2,
.igwb-newsletter-streifen .et_pb_newsletter_description h4 {
	color: #fff !important; font-size: 1.15rem; margin: 0 0 2px; padding: 0;
}
.igwb-newsletter-streifen .et_pb_newsletter_description p {
	color: rgba(255,255,255,.82) !important; font-size: .92rem; margin: 0; padding: 0;
}
.igwb-newsletter-streifen .et_pb_newsletter_form {
	/* Feste Grundbreite, die mitwächst. Ohne sie ergibt sich die Basis aus
	   dem Inhalt, und Beschreibung und Formular brechen untereinander um -
	   der Streifen soll aber schmal und einzeilig bleiben. */
	flex: 1 1 380px; padding: 0 !important; max-width: 620px; min-width: 0;
}
.igwb-newsletter-streifen .et_pb_newsletter_form p { margin: 0; padding: 0; }
/* Eingabefeld und Schaltfläche nebeneinander.
   Divi hängt der Feldgruppe die Klasse .et_flex_module an, und die setzt
   flex-direction: column - dadurch landet die Schaltfläche unter dem Feld.
   Schlimmer noch: In der Spaltenrichtung wird die flex-basis zur HÖHE, das
   "flex: 1 1 200px" des Feldes riss also 200px Leerraum auf. Beides hier
   ausdrücklich überschrieben. */
.igwb-newsletter-streifen .et_pb_newsletter_fields {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;                       /* Feld und Schaltfläche bilden eine Einheit */
	width: 100%;
}
.igwb-newsletter-streifen .et_pb_newsletter_field {
	flex: 1 1 auto !important;
	min-width: 0;                 /* sonst schrumpft das Feld nicht unter seine Inhaltsbreite */
	margin: 0 !important;
	display: flex;
}
/* Die Schaltfläche nur so breit wie ihre Beschriftung */
.igwb-newsletter-streifen .et_pb_newsletter_button_wrap {
	flex: 0 0 auto !important;
	width: auto !important;
	display: flex;
}
.igwb-newsletter-streifen input[type="text"],
.igwb-newsletter-streifen input[type="email"] {
	width: 100%;
	background: rgba(255,255,255,.96) !important;
	border: 0; border-radius: 4px 0 0 4px;
	padding: 11px 14px !important;
	color: var(--igwb-dark) !important;
	font-size: .95rem;
}
.igwb-newsletter-streifen .et_pb_newsletter_button,
.igwb-newsletter-streifen .et_pb_newsletter_button_wrap { margin: 0 !important; }
.igwb-newsletter-streifen .et_pb_newsletter_button {
	width: auto !important;
	display: inline-flex !important;
	align-items: center;
	background: var(--igwb-dark) !important;
	border: 2px solid var(--igwb-dark) !important;
	color: #fff !important;
	padding: 10px 26px !important;
	border-radius: 0 4px 4px 0;
	white-space: nowrap;
}
.igwb-newsletter-streifen .et_pb_newsletter_button:hover {
	background: transparent !important; color: #fff !important; border-color: #fff !important;
}
.igwb-newsletter-streifen .et_pb_row { display: flex; align-items: center; }
.igwb-newsletter-streifen .et_pb_column { margin-bottom: 0 !important; display: flex; align-items: center; }
/* Der Knopf sitzt in einem Divi-Text-Modul, dessen innere Hüllen
   text-align: start erzwingen - deshalb muss die Ausrichtung bis auf den
   Absatz durchgereicht werden. */
.igwb-streifen__btn-wrap { width: 100%; margin-bottom: 0 !important; }
.igwb-newsletter-streifen .igwb-streifen__btn-wrap,
.igwb-newsletter-streifen .igwb-streifen__btn-wrap .et_pb_text_inner,
.igwb-newsletter-streifen .igwb-streifen__btn-wrap p { text-align: right !important; }
.igwb-streifen__btn {
	/* Gleiche Höhe wie Eingabefeld und Abonnieren-Schaltfläche */
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 26px;
	border: 2px solid rgba(255,255,255,.8);
	border-radius: 4px;
	color: #fff !important;
	font-weight: 600; font-size: .95rem; line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.igwb-streifen__btn:hover { background: #fff; color: var(--igwb-dark) !important; border-color: #fff; }

@media (max-width: 800px) {
	.igwb-newsletter-streifen .et_pb_row { display: block; }
	/* Sobald der Knopf in eine eigene Zeile rutscht, nimmt er die volle
	   Breite. Das text-align der Desktop-Regel trägt !important und würde
	   ihn sonst weiter nach rechts ziehen - deshalb hier ebenfalls. */
	.igwb-streifen__btn-wrap { text-align: left !important; margin-top: 12px !important; }
	.igwb-newsletter-streifen .igwb-streifen__btn-wrap,
	.igwb-newsletter-streifen .igwb-streifen__btn-wrap .et_pb_text_inner,
	.igwb-newsletter-streifen .igwb-streifen__btn-wrap p { text-align: left !important; }
	.igwb-newsletter-streifen .igwb-streifen__btn {
		display: flex;
		width: 100%;
	}
	.igwb-newsletter-streifen .et_pb_newsletter { display: block; }
	.igwb-newsletter-streifen .et_pb_newsletter_description { margin-bottom: 12px; }
	.igwb-newsletter-streifen .et_pb_newsletter_form { max-width: none; }
}

/* ------------------------------------------------------------ Footer */
.igwb-footer {
	background: var(--igwb-dark) !important;
	padding: 62px 0 34px !important;
}
.igwb-footer .et_pb_row { width: 92%; max-width: 1240px; }
.igwb-footer, .igwb-footer p, .igwb-footer li { color: rgba(255,255,255,.84); font-size: .94rem; line-height: 1.7; }
.igwb-footer h4 {
	color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
	margin-bottom: .9em; padding-bottom: .5em; border-bottom: 2px solid rgba(255,255,255,.16);
}
/* Kein CSS-Filter: das Quell-PNG hat einen weissen Hintergrund statt Alpha,
   brightness(0) invert(1) faerbt deshalb die ganze Flaeche weiss. Stattdessen
   liegt eine echte weisse Variante mit Transparenz in der Mediathek. */
.igwb-footer__logo { max-width: 190px; height: auto; margin-bottom: 18px; }
.igwb-footer__claim { font-size: .92rem; color: rgba(255,255,255,.74); }
/* Eckige Marker statt runder Punkte, in hellem Grün. Die Listen stehen in
   Text-Modulen, deren Punkte Divi selbst setzt - daher hier überschrieben. */
.igwb-footer__list,
.igwb-footer ul.igwb-footer__list { list-style: none !important; margin: 0; padding: 0; }
.igwb-footer__list li {
	position: relative;
	margin-bottom: .45em;
	padding-left: 17px;
	list-style: none !important;
}
.igwb-footer__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--igwb-hell);
}
.igwb-footer a { color: rgba(255,255,255,.84); text-decoration: none; }
.igwb-footer a:hover { color: #fff; text-decoration: underline; }
.igwb-footer__adr { color: rgba(255,255,255,.74); }
.igwb-footer__btn {
	display: inline-block; margin-top: 14px;
	background: var(--igwb-green); color: #fff !important;
	padding: 11px 26px; border-radius: 4px; font-weight: 600; text-decoration: none !important;
}
.igwb-footer__btn:hover { background: #5b9450; }

.igwb-footer-bottom {
	background: var(--igwb-fuss) !important;
	padding: 18px 0 !important;
}
.igwb-footer-bottom .et_pb_row { width: 92%; max-width: 1240px; padding: 0 !important; }
.igwb-footer-bottom .et_pb_module { margin-bottom: 0 !important; }
.igwb-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	align-items: center; justify-content: space-between;
	color: rgba(255,255,255,.6); font-size: .86rem;
}
.igwb-footer__meta { display: flex; gap: 22px; }
.igwb-footer__bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.igwb-footer__bottom a:hover { color: #fff; }

/* ---------------------------------------------------------- Breiten */
@media (max-width: 1100px) {
	.igwb-card-row .et_pb_column,
	.igwb-card-row--3 .et_pb_column { width: calc((100% - 26px) / 2) !important; }
}
@media (max-width: 980px) {
	.igwb-footer__cols .et_pb_column { width: 46% !important; margin: 0 4% 30px 0 !important; }
	.igwb-footer__cols .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}
@media (max-width: 600px) {
	.igwb-footer__cols .et_pb_column { width: 100% !important; margin-right: 0 !important; }
	.igwb-footer__bottom { flex-direction: column; align-items: flex-start; }
	.igwb-card-row { gap: 20px; }
	.igwb-card-row .et_pb_column,
	.igwb-card-row--3 .et_pb_column { width: 100% !important; }
	.igwb-hero .et_pb_slide { min-height: 58vh; }
}

/* ---------------------------------------------------------------------
   Dokumentliste (Seite "Vereinsdokumente")

   Jedes Dokument ist ein Blurb-Modul, kein handgeschriebenes HTML - so
   kann der Verein im Divi-Editor ein Modul duplizieren und drei Felder
   ändern, statt Auszeichnungssprache zu tippen. Diese Regeln geben den
   Modulen mit der Klasse "igwb-dok" ihr Aussehen.
   --------------------------------------------------------------------- */
.igwb-dok {
	position: relative;
	max-width: 42em;
	margin-bottom: 10px !important;
	background: var(--gcid-igwb-sand, #f5f1e6);
	border-left: 4px solid var(--gcid-primary-color, #4a7c3f);
	border-radius: 8px;
	transition: background .18s ease, transform .18s ease;
}
.igwb-dok:hover,
.igwb-dok:focus-within { background: #ece6d5; transform: translateX(2px); }

.igwb-dok .et_pb_blurb_content { max-width: none; padding: 15px 20px 15px 52px; }
.igwb-dok .et_pb_blurb_container {
	display: flex;
	/* Divi stellt die Richtung auf column - ohne diese Zeile stünde die
	   Angabe zu Format und Grösse unter dem Titel statt rechts daneben. */
	flex-direction: row !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
}

/* Blattsymbol aus reinem CSS - kein zusätzlicher Schriftsatz nötig */
.igwb-dok:before {
	content: "";
	position: absolute;
	left: 20px; top: 50%;
	width: 15px; height: 19px;
	margin-top: -10px;
	background: #fff;
	border: 1.5px solid var(--gcid-primary-color, #4a7c3f);
	border-radius: 2px;
	box-shadow: 3px -3px 0 -1.5px #fff, 3px -3px 0 0 var(--gcid-primary-color, #4a7c3f);
}

.igwb-dok .et_pb_module_header {
	margin: 0; padding: 0;
	font-size: 1rem; font-weight: 600;
	color: var(--gcid-heading-color, #2d4a26);
}
.igwb-dok .et_pb_module_header a { color: inherit; text-decoration: none; }
/* Macht die ganze Fläche anklickbar, ohne Verweise ineinander zu schachteln */
.igwb-dok .et_pb_module_header a:after { content: ""; position: absolute; inset: 0; }

.igwb-dok .et_pb_blurb_description p {
	margin: 0;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gcid-body-color, #3f4a3a);
	opacity: .6;
	white-space: nowrap;
}

.igwb-dok__hinweis { padding-top: .4em; font-size: .95rem; }

@media (max-width: 560px) {
	.igwb-dok .et_pb_blurb_container { flex-wrap: wrap; gap: 4px 12px; }
	.igwb-dok .et_pb_blurb_description p { white-space: normal; }
}

/* Auf schmalen Schirmen stapeln, sonst wird das Eingabefeld unbrauchbar eng */
@media (max-width: 520px) {
	.igwb-newsletter-streifen .et_pb_newsletter_fields { flex-wrap: wrap; }
	.igwb-newsletter-streifen .et_pb_newsletter_field { flex: 1 1 100% !important; }
	.igwb-newsletter-streifen .et_pb_newsletter_button_wrap { width: 100% !important; }
	.igwb-newsletter-streifen .et_pb_newsletter_button { width: 100% !important; justify-content: center; }
	/* Gestapelt stossen die beiden oben/unten aneinander statt links/rechts -
	   die runden Ecken wandern entsprechend, sonst sitzt die Schaltfläche
	   links eckig unter einem rundum runden Feld. */
	.igwb-newsletter-streifen input[type="text"],
	.igwb-newsletter-streifen input[type="email"] { border-radius: 4px 4px 0 0 !important; }
	.igwb-newsletter-streifen .et_pb_newsletter_button { border-radius: 0 0 4px 4px; }
	/* Ohne Nebeneinander greift align-items: stretch nicht mehr */
	.igwb-newsletter-streifen input[type="text"],
	.igwb-newsletter-streifen input[type="email"] { min-height: 58px; }
}

/* ---------------------------------------------------------------------
   Mobile Korrekturen
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Divis Kontaktfelder blieben auf schmalen Schirmen zweispaltig: Name
	   neben Firma, und die Nachricht stand als 165px schmales Mehrzeilenfeld
	   neben der E-Mail-Adresse. */
	.et_pb_contact_field {
		width: 100% !important;
		flex: 1 1 100% !important;
	}
	.et_pb_contact_field.et_pb_contact_field_half { width: 100% !important; }

	/* iOS zoomt beim Antippen in jedes Eingabefeld mit weniger als 16px
	   Schriftgröße hinein und verschiebt dabei das Layout. Die Felder standen
	   auf 14px. */
	.et_pb_contact_form input,
	.et_pb_contact_form textarea,
	.et_pb_contact_form select,
	.igwb-newsletter-streifen input[type="text"],
	.igwb-newsletter-streifen input[type="email"],
	.et_pb_newsletter input[type="text"],
	.et_pb_newsletter input[type="email"] {
		font-size: 16px !important;
	}

	/* Die Punkte der Bildfolge waren 7px hoch - zu klein zum Treffen.
	   Die Grafik bleibt gleich, nur die Trefferfläche wächst. */
	.et-pb-controllers a {
		/* content-box, sonst rechnet Divi das Polster in die Breite hinein
		   und die Trefferfläche bleibt bei 22 statt 32px. */
		box-sizing: content-box;
		width: 10px; height: 10px;
		padding: 11px;
		background-clip: content-box;
		margin: 0 2px;
	}
	.et-pb-controllers { height: auto; }
}

/* ---------------------------------------------------------------------
   Sprachleiste über Logo und Hamburger
   --------------------------------------------------------------------- */
.igwb-sprachzeile {
	background: var(--igwb-dark, #1d2f17) !important;
	padding: 0 !important;
}
.igwb-sprachzeile .et_pb_row,
.et-l--header .igwb-sprachzeile .et_pb_row {
	width: 92%; max-width: 1240px;
	padding: 0 !important; margin: 0 auto !important;
}
.igwb-sprachzeile .et_pb_column { padding: 0 !important; margin-bottom: 0 !important; }
.igwb-sprachzeile .et_pb_module { margin-bottom: 0 !important; }

.igwb-sprachwahl {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	padding: 5px 0;
}
.igwb-sprachwahl__link {
	display: inline-block;
	padding: 3px 10px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	color: rgba(255,255,255,.72) !important;
	text-decoration: none !important;
	transition: color .18s ease;
}
/* Trennstriche zwischen den Kürzeln, nicht nach dem letzten */
.igwb-sprachwahl__link + .igwb-sprachwahl__link { border-left: 1px solid rgba(255,255,255,.22); }

.igwb-sprachwahl__link:hover,
.igwb-sprachwahl__link:focus-visible { color: #fff !important; }

.igwb-sprachwahl__link--aktiv {
	color: var(--igwb-hell, #8fc47e) !important;
	cursor: default;
}
/* Sprachen, in denen es diese Seite noch nicht gibt */
.igwb-sprachwahl__link--fehlt { color: rgba(255,255,255,.38) !important; }
.igwb-sprachwahl__link--fehlt:hover { color: rgba(255,255,255,.65) !important; }

/* Der Kopf sitzt fest oben - die Sprachleiste gehört zu seiner Höhe dazu */
@media (max-width: 560px) {
	.igwb-sprachwahl { justify-content: center; }
	/* Grössere Trefferfläche für den Finger - die Kürzel sind klein */
	.igwb-sprachwahl__link { padding: 7px 14px; }
}

/* ---------------------------------------------------------------------
   Personenzeilen (Vorstand, Geschäftsstelle)
   Porträt links, Text rechts. Auf schmalen Schirmen untereinander.
   --------------------------------------------------------------------- */
.igwb-person { align-items: flex-start !important; margin-bottom: 8px !important; }
.igwb-person .et_pb_column { margin-bottom: 0 !important; }

.igwb-person .et_pb_image {
	margin-bottom: 0 !important;
	max-width: 200px;
}
.igwb-person .et_pb_image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}
.igwb-person .et_pb_text { margin-bottom: 0 !important; }
.igwb-person .et_pb_text p:first-child { margin-top: 0; }
/* Der Name steht als <strong> am Anfang - etwas hervorheben */
.igwb-person .et_pb_text p:first-child strong {
	display: inline-block;
	font-size: 1.05rem;
	color: var(--gcid-heading-color, #2d4a26);
	margin-bottom: .2em;
}

@media (max-width: 767px) {
	.igwb-person .et_pb_image { max-width: 150px; margin-bottom: 10px !important; }
}

/* ---------------------------------------------------------------------
   Seiteninhalte, die aus Divi-Modulen bestehen
   Seit dem Umbau bringt jede Seite eigene Sections mit. Die Regeln oben
   greifen nur auf direkte Kinder von .et_pb_post_content und damit nicht
   mehr - Text lief dadurch über die volle Fensterbreite.
   --------------------------------------------------------------------- */
.igwb-pagebody .et_pb_post_content .et_pb_section { padding: 0 !important; }
.igwb-pagebody .et_pb_post_content .et_pb_row {
	width: 100% !important;
	max-width: 1240px !important;
	margin: 0 0 1.4em !important;
	padding: 0 !important;
}
.igwb-pagebody .et_pb_post_content .et_pb_row:last-child { margin-bottom: 0 !important; }
.igwb-pagebody .et_pb_post_content .et_pb_column { margin-bottom: 0 !important; }
.igwb-pagebody .et_pb_post_content .et_pb_module { margin-bottom: .9em !important; }

/* Der Inhaltsbereich ist jetzt zweispaltig: Inhalt links, rechte Spalte
   für Zusatzinhalte. Solange sie leer ist, soll sie keinen Abstand und
   keine Höhe erzeugen. */
.igwb-pagebody-row { align-items: flex-start !important; }
.igwb-pagebody-row .et_pb_column:last-child:empty { margin-bottom: 0 !important; }
.igwb-pagebody-row .et_pb_column { margin-bottom: 0 !important; }

/* Zeilenlänge auch in den Textmodulen begrenzen.
   Divi schiebt ein .et_pb_text_inner zwischen Modul und Absätze - ohne
   diese Ebene im Selektor greift die Begrenzung nicht. */
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > p,
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > ul,
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > ol,
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > blockquote,
.igwb-pagebody .et_pb_post_content .et_pb_heading h2,
.igwb-pagebody .et_pb_post_content .et_pb_heading h3,
.igwb-pagebody .et_pb_post_content .et_pb_heading h4 {
	max-width: 72ch;
}
/* Tabellen und eingebettetes bleiben breit */
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > table,
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > figure,
.igwb-pagebody .et_pb_post_content .et_pb_text_inner > .wp-block-table { max-width: none; }
/* In den zweispaltigen Zeilen ist die Spalte schon schmal genug */
.igwb-pagebody .et_pb_post_content .igwb-person .et_pb_text_inner > p { max-width: none; }

/* Bildmodule: nicht über die Textbreite hinaus aufblasen */
.igwb-pagebody .et_pb_post_content .et_pb_image {
	max-width: 860px;
	margin-bottom: 1.2em !important;
}
.igwb-pagebody .et_pb_post_content .et_pb_image img { border-radius: 6px; }
/* In zweispaltigen Personenzeilen gilt die engere Vorgabe von oben */
.igwb-pagebody .et_pb_post_content .igwb-person .et_pb_image { max-width: 200px; }

/* Bilder im Seiteninhalt stehen linksbündig, nicht mittig.
   Divi zentriert Bildmodule von sich aus - das wirkt wie ein Aushang aus
   den Neunzigern und bricht die Leseachse. Gilt auf allen Breiten. */
.igwb-pagebody .et_pb_post_content .et_pb_image,
.igwb-pagebody .et_pb_post_content .et_pb_image .et_pb_image_wrap {
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
}
.igwb-pagebody .et_pb_post_content .et_pb_image { display: block; }

/* Bildmodule ohne Bild sind Reste aus der Migration: Hoehe 0, aber sie tragen
   Divis Modulabstand von ~20px bei und reissen so eine Luecke ohne Inhalt.
   Die Regel muss HINTER der Zeile darueber stehen und deren drei Klassen
   mitfuehren - mit nur zwei Klassen gewinnt die allgemeinere display:block. */
.igwb-pagebody .et_pb_post_content .et_pb_image:not(:has(img)) { display: none; }
.igwb-pagebody .et_pb_post_content .et_pb_image img { margin-left: 0 !important; }
/* Divis eigene Ausrichtungsklassen überstimmen */
.igwb-pagebody .et_pb_post_content .et_pb_image.et_pb_module_align_center,
.igwb-pagebody .et_pb_post_content .et_pb_image.et_pb_module_align_right {
	margin-left: 0 !important;
	margin-right: auto !important;
}