/**
 * FO-E – Regeln, die theme.json nicht ausdrücken kann.
 *
 * Das sind im Wesentlichen die beiden gestalterischen Merkmale, die die Seite
 * von Divi mitnimmt: die Wellenübergänge zwischen den Sektionen und das
 * Wasserzeichen aus konzentrischen Kreisen.
 */

:root {
	--foe-welle-hoehe: 22px;
	--foe-welle-farbe: var(--wp--preset--color--creme);
}

/* ---------------------------------------------------------------------------
   Wellenübergänge

   Die SVG-Pfade stammen 1:1 aus Divi (Divider.php, Stil "wave2" bzw.
   "mountains2"). Sie werden als Maske benutzt, nicht als Bild: dadurch kommt
   die Farbe aus --foe-welle-farbe und die drei fill-opacity-Ebenen (.3/.5/1)
   des Originals bleiben als Alpha-Abstufung erhalten.

   Anwendung im Editor über die Block-Stile "Welle unten" / "Welle oben" auf
   einer Gruppe. Höhe und Farbe lassen sich pro Block über die beiden Custom
   Properties überschreiben.
--------------------------------------------------------------------------- */

.is-style-foe-welle-unten,
.is-style-foe-welle-oben,
.is-style-foe-welle-beides,
.is-style-foe-berge-unten {
	position: relative;
}

.is-style-foe-welle-unten::after,
.is-style-foe-welle-oben::before,
.is-style-foe-welle-beides::before,
.is-style-foe-welle-beides::after,
.is-style-foe-berge-unten::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--foe-welle-hoehe);
	background-color: var(--foe-welle-farbe);
	pointer-events: none;
	z-index: 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.is-style-foe-welle-unten::after,
.is-style-foe-welle-beides::after {
	bottom: 0;
	-webkit-mask-image: url("./img/wave2-bottom.svg");
	mask-image: url("./img/wave2-bottom.svg");
}

.is-style-foe-welle-oben::before,
.is-style-foe-welle-beides::before {
	top: 0;
	-webkit-mask-image: url("./img/wave2-top.svg");
	mask-image: url("./img/wave2-top.svg");
}

.is-style-foe-berge-unten::after {
	bottom: 0;
	-webkit-mask-image: url("./img/mountains2-bottom.svg");
	mask-image: url("./img/mountains2-bottom.svg");
}

/* Eine Sektion mit Welle braucht auf der Wellenseite einen Fuss, sonst steht
   der Inhalt unter der Welle und wird von ihr überdeckt. Das hier ist die
   Grundausstattung für eine frisch eingefügte Sektion: eine Angabe am Block
   selbst steht inline und gewinnt, diese Regel greift also nur, solange keine
   gesetzt ist. Im Bestand hat jede Sektion ihre eigene – siehe
   `wp foe abstaende`. */
.is-style-foe-welle-unten,
.is-style-foe-welle-beides,
.is-style-foe-berge-unten {
	padding-bottom: var(--wp--preset--spacing--50);
}

.is-style-foe-welle-oben,
.is-style-foe-welle-beides {
	padding-top: var(--wp--preset--spacing--50);
}

/* Die Welle liegt am Rand der Sektion und darf den Inhalt nicht überdecken.
   Bei den grossen Höhen reicht die Sektionspolsterung dafür nicht aus, deshalb
   bekommt der Inhalt dort zusätzlichen Abstand. Es trifft den *Inhalt*, nicht
   die Sektion – die Fläche soll ja bis unter die Welle durchlaufen. */
.is-style-foe-welle-unten > *,
.is-style-foe-welle-beides > *,
.is-style-foe-berge-unten > * {
	position: relative;
	z-index: 2;
}

.has-welle-hoch.is-style-foe-welle-unten > :last-child,
.has-welle-hoch.is-style-foe-welle-beides > :last-child,
.has-welle-sehr-hoch.is-style-foe-welle-unten > :last-child,
.has-welle-sehr-hoch.is-style-foe-welle-beides > :last-child,
.has-welle-hero.is-style-foe-welle-unten > :last-child,
.has-welle-hero.is-style-foe-welle-beides > :last-child {
	margin-bottom: var(--foe-welle-hoehe);
}

.has-welle-hoch.is-style-foe-welle-oben > :first-child,
.has-welle-hoch.is-style-foe-welle-beides > :first-child,
.has-welle-sehr-hoch.is-style-foe-welle-oben > :first-child,
.has-welle-sehr-hoch.is-style-foe-welle-beides > :first-child,
.has-welle-hero.is-style-foe-welle-oben > :first-child,
.has-welle-hero.is-style-foe-welle-beides > :first-child {
	margin-top: var(--foe-welle-hoehe);
}

/* Wellenfarbe passend zur *folgenden* Sektion setzen. Diese Klassen setzt der
   Konverter aus Divis top_divider_color / bottom_divider_color. */
.has-welle-creme  { --foe-welle-farbe: var(--wp--preset--color--creme); }
.has-welle-navy   { --foe-welle-farbe: var(--wp--preset--color--navy); }
.has-welle-weiss  { --foe-welle-farbe: var(--wp--preset--color--weiss); }
.has-welle-creme-hell { --foe-welle-farbe: var(--wp--preset--color--creme-hell); }

/* Höhen, die im Divi-Bestand vorkommen. */
.has-welle-hoch      { --foe-welle-hoehe: 78px; }
.has-welle-sehr-hoch { --foe-welle-hoehe: 110px; }
.has-welle-hero      { --foe-welle-hoehe: 224px; }

/* ---------------------------------------------------------------------------
   Sektionen stossen aneinander

   theme.json setzt blockGap global auf 1,5 rem, und die Layoutregel von
   WordPress vergibt den Abstand an *alle* Kinder – auch an alignfull. Zwischen
   zwei vollbreiten Sektionen klaffte dadurch ein weisser Streifen in der Farbe
   des Body, der zu keiner der beiden Sektionen gehört, und die Welle stand
   nicht am Übergang, sondern mitten darin.

   Ein blockGap von 0 am Behälter hilft hier nicht: WordPress schreibt den
   Abstand als festen Preset-Wert in die Layoutregel, nicht als Variable. Es
   braucht also eine Regel, die gewinnt. Die Kernregel hat die Spezifität
   0-1-0 (`:root` zählt, `:where()` nicht) – zwei Klassen reichen sicher.

   Den Abstand zwischen den Sektionen macht deren eigene Polsterung.
--------------------------------------------------------------------------- */

/* Auf oberster Ebene gilt das für *alle* Kinder, nicht nur für alignfull:
   Kopfzeile, Inhalt und Fusszeile sind selbst keine alignfull-Blöcke, bekommen
   den Abstand aber genauso – und WooCommerce schiebt auf Produktseiten noch
   eine eigene Gruppe dazwischen. Zwischen Kopfzeile und Inhalt blieb dadurch
   ein weisser Streifen stehen. Die Angabe an `body` hebt die Spezifität über
   Cores `:where(.wp-site-blocks) > *`, damit die Reihenfolge der Stylesheets
   keine Rolle spielt. */
body .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.entry-content > .alignfull,
.wp-site-blocks > .alignfull,
.wp-block-post-content > .alignfull,
main.wp-block-group > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   Kopfzeile und Hauptnavigation

   Das Hauptmenü ist ein core/navigation-Block, der auf den wp_navigation-
   Beitrag „Hauptmenü" verweist. Die Farben stehen in theme.json
   (styles.blocks.core/navigation.elements.link); hier steht nur, was sich dort
   nicht ausdrücken lässt: das Mitlaufen beim Scrollen und das Untermenü.
--------------------------------------------------------------------------- */

/* Sticky gehört an den *äusseren* Wrapper: WordPress legt um jeden
   Template-Part noch ein Element (hier <header class="wp-block-template-part">).
   Sitzt position:sticky an der Gruppe darin, ist der Wrapper ihr umgebender
   Block – und der ist nur so hoch wie die Kopfzeile selbst. Dann klebt nichts. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.foe-kopf {
	box-shadow: 0 2px 12px rgba(13, 26, 48, 0.25);
}

/* Angemeldet steht die Adminleiste darüber – sie ist fest positioniert, die
   Kopfzeile muss also darunter einrasten. Unter 600 px scrollt die Leiste mit,
   dort ist 0 richtig. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ---------------------------------------------------------------------------
   Durchsichtig ganz oben, mit Fläche beim Scrollen

   Geschaltet von assets/kopfzeile.js: `foe-kopf-schwebt` am body, sobald die
   erste Sektion der Seite dunkel genug ist (Navy oder Kopfbild),
   `foe-kopf-gescrollt`, sobald die Seite nicht mehr ganz oben steht. Ohne
   JavaScript fehlen beide und es bleibt bei der Kopfzeile mit Fläche.
--------------------------------------------------------------------------- */

/* Die Kopfzeile steht weiterhin im Fluss, ihr Platz wird aber wieder
   hereingeholt: die erste Sektion rückt um die Kopfhöhe hoch und liegt damit
   darunter. */
.foe-kopf-schwebt .wp-site-blocks > header.wp-block-template-part {
	margin-bottom: calc(-1 * var(--foe-kopf-hoehe, 0px));
}

/* Der Platz kommt der Sektion als durchsichtiger Rahmen zurück – nicht als
   Polsterung: die steht bei diesen Sektionen inline und liesse sich nur mit
   !important ergänzen. Hintergrundfarbe und -bild werden bis zur Rahmenkante
   gezeichnet, das Kopfbild läuft also hinter der Kopfzeile weiter. */
.foe-kopf-schwebt .foe-erste-sektion {
	border-top: var(--foe-kopf-hoehe, 0px) solid transparent;

	/* `background-origin` steht vorgabemässig auf `padding-box`: Grösse und
	   Lage des Bildes rechnen dann ohne den Rahmen, gezeichnet wird aber bis
	   zur Rahmenkante (`background-clip: border-box`). Der Streifen hinter der
	   Kopfzeile bekam damit keine Fortsetzung des Bildes, sondern – weil
	   `background-repeat` unangetastet auf `repeat` steht – eine **zweite
	   Kachel**: das Kopfbild stand doppelt, mit sichtbarer Kante unter der
	   Kopfzeile. Auf dem Handy fiel das am stärksten auf, weil der Rahmen dort
	   im Verhältnis zur Sektion am höchsten ist. `border-box` lässt das Bild
	   über den ganzen Rahmenkasten rechnen – ein Bild, keine Kante. */
	background-origin: border-box;
}

/* `!important` steht hier gegen `!important`: WordPress schreibt die
   Preset-Klasse `.has-navy-background-color` selbst so aus, dagegen kommt
   keine Spezifität an. */
.foe-kopf-schwebt:not(.foe-kopf-gescrollt) .foe-kopf {
	background-color: transparent !important;
	box-shadow: none;
}

/* Das Menü trägt seine eigene Navy-Fläche. Auf der navyfarbenen Kopfzeile fällt
   sie nicht auf, durchsichtig darüber stünde sie als Kasten im Bild. */
.foe-kopf-schwebt:not(.foe-kopf-gescrollt) .foe-hauptnavi {
	background-color: transparent !important;
}

/* Ein Schleier hält Logo und Menü lesbar – über jedem Grund, nicht nur über
   einem Kopfbild.

   Anfangs stand er nur über Bildern, weil bei Farbflächen der Kontrasttest in
   kopfzeile.js entscheidet. Der lässt aber auch Mittelblau durch (3,4:1 gegen
   Creme, knapp über der Schwelle für grosse Schrift) – und auf dem
   Kopfbereich der Startseite, der auf dem Handy ohne Bild flach mittelblau
   steht, verschwand das Logo darin fast. Über Navy ist der Schleier ohnehin
   unsichtbar, es kostet also nichts, ihn immer zu zeichnen. */
.foe-kopf-schwebt:not(.foe-kopf-gescrollt) .foe-kopf {
	background-image: linear-gradient(to bottom, rgba(13, 26, 48, 0.55), rgba(13, 26, 48, 0));
}

.foe-kopf {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Bei offenem Klappmenü zurück auf die Fläche. Cores Overlay setzt
   `has-modal-open` am <html>, deshalb steht die Klasse hier vor der am body;
   drei Klassen wie die Regel oben, und weiter unten – also gewinnt sie. */
.has-modal-open .foe-kopf-schwebt .foe-kopf {
	background-color: var(--wp--preset--color--navy) !important;
	background-image: none;
}

@media (prefers-reduced-motion: reduce) {
	.foe-kopf {
		transition: none;
	}
}

/* Sprungmarken landen sonst unter der Kopfzeile. */
:root {
	scroll-padding-top: 6rem;
}

/* Untermenü: Cores Vorgabe ist weiss mit grauem Rahmen – auf Navy mit cremefarbener
   Schrift wäre die Schrift unlesbar. Die Farbe wird deshalb hier gesetzt und nicht
   Cores `background-color: inherit` überlassen: das erbt vom Listenpunkt, und der
   ist durchsichtig.

   Die Klappkarte gilt nur für das Aufklappmenü am Desktop. Im Klappmenü liegt
   dasselbe Element flach in der Liste – Rahmen, Radius und Schatten stünden
   dort als sinnloser Kasten mitten im Text. Deshalb ab 900 px, also genau ab
   der Breite, ab der Core die Leiste wieder waagerecht zeigt. */
@media (min-width: 900px) {
	.foe-hauptnavi .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--creme);
		border: 0;
		border-top: 2px solid var(--wp--preset--color--gold);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 14px 30px rgba(13, 26, 48, 0.35);
		min-width: 15rem;
		padding-block: 0.35rem;
	}

	.foe-hauptnavi .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: background-color 0.15s ease;
	}

	.foe-hauptnavi .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.foe-hauptnavi .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: rgba(248, 191, 59, 0.14);
	}
}

/* Die aktuelle Seite wird ausgezeichnet – die Klasse setzt der Block selbst. */
.foe-hauptnavi .current-menu-item > .wp-block-navigation-item__content,
.foe-hauptnavi .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
}

/* Cores Klappmenü erscheint erst unter 600 px. Bis 900 px stehen hier aber
   vier Menüpunkte, die Schaltfläche und der Warenkorb nebeneinander – das
   passt nicht. Also früher umschalten. */
@media (max-width: 899px) {
	.foe-hauptnavi .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.foe-hauptnavi .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Klappmenü (Handy und Tablet)

   Core baut das Klappmenü aus derselben Liste wie die Desktopleiste und lässt
   dabei drei Dinge stehen, die untereinander nicht funktionieren:

   1. **Die Ausrichtung des Desktops.** `--navigation-layout-justification-setting`
      steht auf `flex-end` (die Leiste steht rechts). Core gibt das im Klappmenü
      an `align-items` weiter – die ganze Liste stand dadurch als schmale Spalte
      irgendwo in der Mitte statt am linken Rand.
   2. **Alle Untermenüs offen.** Core setzt sie im Klappmenü hart auf
      `visibility: visible; height: auto` und blendet zugleich den Schalter aus
      (`.wp-block-navigation__submenu-icon { display: none }`). Aus vier
      Menüpunkten wurden so 19 Zeilen am Stück.
   3. **Die Abstände der Leiste.** `blockGap` (24 px) zwischen allen Einträgen,
      dazu Cores 2 rem Einzug am Untermenü.

   Der Schalter, den Core ausblendet, ist ein vollwertiger Knopf: er trägt
   `data-wp-on--click="actions.toggleMenuOnClick"` und bindet `aria-expanded` an
   den Zustand des Blocks. Das Aufklappen muss hier also nicht nachgebaut
   werden – es reicht, den Knopf wieder zu zeigen und das Untermenü an
   `aria-expanded` zu hängen. Cores eigene Regel dafür steht schon da:
   `.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ …`.

   Spezifität: Cores Regeln stehen mit vier bis fünf Klassen und `:where()`
   drumherum. Jede Regel hier führt deshalb `.foe-hauptnavi` und den
   `is-menu-open`-Behälter mit, damit sie sicher darüber liegt – foe.css wird
   nach den Blockstilen geladen, gleiche Spezifität würde also auch reichen.
--------------------------------------------------------------------------- */

/* Linksbündig statt rechts, und über die volle Breite. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch;
	text-align: left;
}

/* Die Abstände macht die Trennlinie, nicht der Zwischenraum. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(248, 244, 236, 0.16);
}

/* Zeile eines Menüpunkts: Beschriftung links, Schalter rechts, Untermenü
   darunter über die volle Breite. Ein Raster statt einer Zeile, weil alle drei
   Geschwister sind – ohne eigenes Markup lässt sich der Schalter sonst nicht
   neben die Beschriftung stellen. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Grosszügige Tippfläche – 44 px ist die übliche Mindestgrösse. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.85rem;
	font-size: var(--wp--preset--font-size--x-gross);
	line-height: 1.3;
}

/* Der Schalter: von Core ausgeblendet, hier wieder da. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 1;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 18px;
	height: 18px;
	transform: none;
	transition: transform 0.2s ease;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Zugeklappt ist die Vorgabe. Core stellt das Untermenü im Klappmenü hart auf
   sichtbar; `display: none` nimmt es aus dem Fluss, damit auch kein Platz
   bleibt. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	display: none;
	padding: 0 0 0.5rem 1rem;
	min-width: 0;
	background: transparent;
	border: 0;
	border-left: 2px solid rgba(248, 191, 59, 0.45);
	border-radius: 0;
	box-shadow: none;
	margin-left: 0.25rem;
}

.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
}

/* Die zweite Ebene tritt zurück. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 0.6rem;
	font-size: var(--wp--preset--font-size--gross);
	opacity: 0.92;
}

/* Der Schliessknopf sitzt bei Core rechts oben im Nichts – hier bekommt er die
   Zeile, in der sonst das Logo steht. */
.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	padding: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.foe-hauptnavi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.foe-hauptnavi .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Kopfbereich der Startseite

   In Divi waren das zwei Sektionen – eine für Desktop, eine fürs Handy –, die
   sich nicht nur im Layout, sondern im Inhalt unterschieden. Jetzt ist es eine.

   Das Hintergrundbild ist eine Freistellung auf Mittelblau, die Personen sitzen
   rechts. Der Text steht deshalb in einer Spalte links. Wird es zu schmal, um
   beides nebeneinander zu zeigen, verschwindet das Bild: Schrift in Gesichtern
   liest sich nicht. Das !important überschreibt die Inline-Angabe des Blocks –
   anders kommt man an eine Blockeinstellung im Umbruch nicht heran.
--------------------------------------------------------------------------- */

/* Lange deutsche Komposita passen in keine 390-px-Zeile: „Organisations-
   entwickler" ist bei der Untergrenze der Hero-Grösse (34 px) rund 430 px
   breit und stand über den rechten Rand hinaus. Das Fenster wächst dabei
   nicht mit (`scrollWidth` bleibt gleich), das Wort war also schlicht
   abgeschnitten.

   `hyphens: auto` trennt an den richtigen Stellen – die Seite ist auf `de-DE`
   ausgezeichnet, Chrome und Safari bringen das Wörterbuch mit. `overflow-wrap`
   ist die Rückfallebene für Browser ohne Wörterbuch: dort bricht das Wort
   hart, aber es bricht. */
@media (max-width: 781px) {
	h1,
	h2,
	h3,
	.has-hero-font-size,
	.has-ueberschrift-font-size {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

.foe-hero {
	background-color: var(--wp--preset--color--mittelblau);
}

.foe-hero__kopf {
	min-height: 24rem;
}

.foe-hero__siegel img {
	max-width: 190px;
}

@media (max-width: 900px) {
	.foe-hero {
		background-image: none !important;
	}

	.foe-hero__kopf {
		min-height: 0;
	}
}

/* Die drei Argumente stehen unter dem Bild und dürfen ruhig früher umbrechen. */
@media (max-width: 781px) {
	.foe-hero__argumente {
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
   Kundenstimmen

   In Divi ein Slider mit drei Folien – jetzt stehen die drei Stimmen
   nebeneinander und brechen unter 782 px (Cores Umbruch für Spalten)
   untereinander um.

   Damit drei Zitate nebeneinander in eine Zeile passen, ist die Schrift
   deutlich kleiner als die Vorgabe für core/quote in theme.json (Gross,
   Zeilenhöhe 1.9, Laufweite 0.06em). Das steht bewusst hier und nicht als
   Blockeinstellung: so gilt es für den ganzen Abschnitt, auch für eine später
   ergänzte vierte Stimme.
--------------------------------------------------------------------------- */

.foe-stimmen {
	gap: var(--wp--preset--spacing--40);
}

/* Die Spalte wird zum Flex-Behälter, damit die Goldlinie am Zitat über die
   volle Höhe der höchsten Spalte läuft und die drei Kästen bündig stehen. */
.foe-stimmen .wp-block-column {
	display: flex;
}

.foe-stimmen .wp-block-quote {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
	letter-spacing: normal;
}

.foe-stimmen .wp-block-quote p {
	margin-block: 0 0.75em;
}

.foe-stimmen .wp-block-quote p:last-child {
	margin-block-end: 0;
}

/* Die Firmenlogos stammen aus dem Divi-Bestand und sind unterschiedlich hoch
   (29 bis 57 px). Eine gemeinsame Höhe stellt sie in eine Reihe. */
.foe-stimmen .wp-block-quote img {
	height: 34px;
	width: auto;
}

/* Der Absatz mit dem Logo rutscht ans untere Ende, damit die drei Logos auf
   einer Linie stehen – die Zitate sind unterschiedlich lang. Nebeneinander
   nur: gestapelt stünde sonst Luft zwischen Name und Logo. */
@media (min-width: 782px) {
	.foe-stimmen .wp-block-quote > p:has(img) {
		margin-block-start: auto;
		padding-block-start: 0.75em;
	}
}

@media (max-width: 781px) {
	.foe-stimmen {
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
   Wasserzeichen: konzentrische Kreise

   Im Divi-Bestand 71× als Sektionshintergrund benutzt. Als eigener Layer statt
   als background-image, damit Deckkraft und Grundfarbe unabhängig bleiben.
--------------------------------------------------------------------------- */

.is-style-foe-kreise {
	position: relative;
	isolation: isolate;
}

.is-style-foe-kreise::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--foe-wasserzeichen, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: var(--foe-wasserzeichen-deckkraft, 1);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Kleinkram
--------------------------------------------------------------------------- */

/* Sichtbarer Fokusring – Divi hatte keinen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Steht eine Adresse als Linktext da, ist sie ein einziges langes Wort. Auf
   der Datenschutzseite schob das vier Verweise auf dataprivacyframework.gov
   die ganze Seite 18 px über den rechten Rand – bei 390 px die einzige Stelle
   im Bestand, an der wirklich waagerecht gescrollt werden musste. */
.entry-content a,
.wp-block-post-content a {
	overflow-wrap: break-word;
}

/* core/details als Akkordeon: Marker rechts, Titel in Navy. */
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-25%);
	transition: transform 0.2s ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(-135deg) translateY(-25%);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   WooCommerce
   --------------------------------------------------------------------------- */

/* Produkt-Tabs (blablablocks/tabs). Der aktive Tab trägt Gold, die übrigen
   liegen ruhig auf Creme – dieselbe Zuordnung wie bei Wellen und Buttons.

   Die Farben stehen an der Tab-Leiste und nicht am Block: das Plugin schreibt
   seine Vorgabe (schwarz auf weiss, aktiv weiss auf schwarz) als Custom
   Properties *inline* an den Blockbehälter. Inline gewinnt gegen jede Regel
   ohne !important – aber Custom Properties werden vererbt, und eine Angabe am
   Kind überschreibt den geerbten Wert. Setzt jemand die Farben später im
   Editor, landen sie wieder inline an der Leiste selbst und gewinnen. */
.foe-produkt-tabs .blablablocks-tabs-buttons {
	--bbb-tab-text-default-color: var(--wp--preset--color--navy);
	--bbb-tab-background-default-color: var(--wp--preset--color--creme);
	--bbb-tab-text-hover-color: var(--wp--preset--color--creme);
	--bbb-tab-background-hover-color: var(--wp--preset--color--mittelblau);
	--bbb-tab-text-active-color: var(--wp--preset--color--navy);
	--bbb-tab-background-active-color: var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--mittelblau);
	gap: 2px;
}

.foe-produkt-tabs .blablablock-tab-btn {
	border-radius: 12px 12px 0 0;
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.foe-produkt-tabs .blablablocks-tabs-content {
	padding-top: var(--wp--preset--spacing--30);
}

/* Im Tab sitzt der Inhalt schon in einem Rahmen – die Sektionsabstände aus der
   Divi-Bibliothek würden ihn nur auseinanderziehen. */
.foe-produkt-tabs .blablablocks-tabs-content > .wp-block-group {
	padding-block: 0;
}

/* ---------------------------------------------------------------------------
   Produktseite: Kopfbereich und Buchung

   Kopfbereich und Kaufbereich sind *eine* Sektion auf Navy: links das Bild,
   rechts Titel, Vorspann, Eckdaten und Kauf. Alles hier steht also auf dunklem
   Grund – die Farben sind entsprechend gewählt.
--------------------------------------------------------------------------- */

/* Das Bild bekommt die runden Ecken der Karten. Der Radius muss an den
   Bildbehälter und nicht an den Block: WooCommerce serialisiert am
   product-image-gallery keine Blockstile ins Markup. */
.foe-produkt-bild .woocommerce-product-gallery {
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(6, 14, 30, 0.35);
	overflow: hidden;
}

.foe-produkt-bild .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
}

/* Unter dem Umbruch steht das Bild allein in der Zeile und würde sonst über die
   ganze Breite laufen. */
@media (max-width: 781px) {
	.foe-produkt-bild .woocommerce-product-gallery {
		margin-inline: auto;
		max-width: 26rem;
	}
}

/* Eckdaten (Zielgruppe, Termine, Standort, Teilnehmer:innen) als Liste statt
   als WooCommerce-Tabelle. Sie stehen in der Karte „Zusätzliche
   Informationen" und damit auf Navy. */
.foe-produkt-eckdaten .wp-block-table {
	margin-block: 0;
}

.foe-produkt-eckdaten table {
	border: 0;
	width: 100%;
}

.foe-produkt-eckdaten th,
.foe-produkt-eckdaten td {
	border: 0;
	border-bottom: 1px solid rgba(109, 132, 178, 0.45);
	padding: 0.6em 0;
	text-align: left;
	vertical-align: top;
}

.foe-produkt-eckdaten tr:last-child th,
.foe-produkt-eckdaten tr:last-child td {
	border-bottom: 0;
	padding-bottom: 0;
}

.foe-produkt-eckdaten th {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	padding-right: 1.5em;
	white-space: nowrap;
	width: 12rem;
}

.foe-produkt-eckdaten td p {
	margin: 0;
}

/* Auf schmalen Bildschirmen passen Bezeichnung und Wert nicht nebeneinander. */
@media (max-width: 600px) {
	.foe-produkt-eckdaten th,
	.foe-produkt-eckdaten td {
		display: block;
		width: auto;
	}

	.foe-produkt-eckdaten th {
		border-bottom: 0;
		padding-bottom: 0.2em;
		white-space: normal;
	}
}

/* Kaufbereich: der Preis ist die Hauptaussage, alles Rechtliche darunter ruhig.

   Farbe und Grösse müssen hier stehen und lassen sich nicht am Block einstellen:
   WooCommerce gibt für die Supports `color` und `typography` einen eigenen
   Selektor an, der auf das *innere* Element zeigt. theme.json erzeugt daraus
   `:root :where(.wp-block-woocommerce-product-price .wc-block-components-product-price)`
   – und das schlägt jedes `has-…-color` am äusseren Block. Auf Navy hiess das:
   navyfarbener Preis auf navyfarbenem Grund, also unsichtbar. */
.foe-produkt-buchung .wc-block-components-product-price {
	color: var(--wp--preset--color--gold);
	display: block;
	font-size: var(--wp--preset--font-size--ueberschrift);
}

/* Der Zusatz „zzgl. MwSt." hängt am Preis und soll ihn nicht überschreien. */
.foe-produkt-buchung .woocommerce-price-suffix {
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 400;
}

/* Germanized gibt seine Angaben auch dann als Block aus, wenn nichts drinsteht
   (`aria-hidden`, leeres div). Zwischen zwei solchen Blöcken stünde der
   blockGap trotzdem – im Ergebnis ein Loch von mehreren Zeilen unter dem Preis.
   Sichtbar wird nur, was Germanized tatsächlich füllt (siehe CLAUDE.md, Punkt 3). */
.foe-produkt-buchung .wp-block-woocommerce-gzd-product-is-empty {
	display: none;
}

.foe-produkt-buchung .stock {
	font-size: var(--wp--preset--font-size--klein);
	margin-block: 0;
}

.foe-produkt-buchung .stock.in-stock {
	color: var(--wp--preset--color--creme);
}

/* Menge und Schaltfläche stehen nebeneinander, wie im Entwurf. */
.foe-produkt-buchung form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.foe-produkt-buchung .quantity input.qty {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--mittelblau);
	border-radius: 12px;
	color: var(--wp--preset--color--creme);
	min-height: 3.2rem;
	padding: 0.5em;
	text-align: center;
	width: 4.5rem;
}

.foe-produkt-buchung .single_add_to_cart_button {
	background-color: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 12px;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	padding: 0.8em 1.6em;
}

.foe-produkt-buchung .single_add_to_cart_button:hover,
.foe-produkt-buchung .single_add_to_cart_button:focus-visible {
	background-color: var(--wp--preset--color--gold-dunkel);
	color: var(--wp--preset--color--creme);
}

/* Der Preishinweis aus ACF ist eine Fussnote zum Preis, nicht Fliesstext. */
.foe-produkt-preishinweis:empty {
	display: none;
}

/* Die Zahlarten stehen als Fussnote unter dem Preishinweis. Der Verweis auf die
   Buchungsinfos erbt sonst die globale Linkfarbe Mittelblau – auf Navy zu
   wenig Kontrast. */
.foe-produkt-zahlarten a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

.foe-produkt-zahlarten a:hover,
.foe-produkt-zahlarten a:focus-visible {
	color: var(--wp--preset--color--creme);
}

/* Die Schaltfläche „Infomaterial" gehört zum Bild, nicht zum Kauf – sie steht
   deshalb unter der Galerie und nimmt dort deren Breite auf. Unter dem Umbruch
   ist die Galerie auf 26rem begrenzt und mittig, die Schaltfläche folgt ihr. */
.foe-produkt-infomaterial {
	margin-top: var(--wp--preset--spacing--20);
}

/* Die Brotkrumen sind Orientierung, keine Aussage – sie stehen über allem und
   sollen es nicht überstrahlen. */
.foe-produkt-kopf .wc-block-breadcrumbs {
	margin-block: 0;
}

/* Kartenlisten im Archiv (Seminare, InfoLab): gleich hoch, Bild randlos oben. */
.foe-seminarliste > li,
.foe-infolab-liste > li {
	display: flex;
}

.foe-seminarliste > li > .wp-block-group,
.foe-infolab-liste > li > .wp-block-group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
}

.foe-seminarliste .wp-block-post-featured-image,
.foe-infolab-liste .wp-block-post-featured-image {
	margin: 0;
}

.foe-seminarliste .wp-block-post-featured-image img,
.foe-infolab-liste .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* Der Weiterlesen-Link steht als Schaltfläche am Fuss der Karte. */
.foe-seminarliste .wp-block-read-more,
.foe-infolab-liste .wp-block-read-more {
	margin-top: auto;
	text-decoration: none;
	width: fit-content;
}

/* ---------------------------------------------------------------------------
   Sechserreihe

   core/columns bricht unter 782 px auf eine Spalte um. Bei sechs sehr kurzen
   Einträgen ist das zu viel des Guten – zwei nebeneinander lesen sich besser
   und die Reihe bleibt als Block erkennbar.
--------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.foe-sechser .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.foe-sechser .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--20)) !important;
	}
}

/* ---------------------------------------------------------------------------
   InfoLab

   Der Kopfbereich der Beiträge steht im Template, sein Foto aber in der
   Mediathek – es kommt deshalb wie das Wasserzeichen als Custom Property aus
   der functions.php (foe_infolab_kopfbild_style), nicht aus dieser Datei.
--------------------------------------------------------------------------- */

.foe-infolab-kopf {
	background-image: var(--foe-kopfbild);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Die Kärtchen der Übersicht stehen auf einem Foto und sind creme – der
   Auszug darf dort nicht ins Endlose laufen, sonst werden sie ungleich hoch
   und der Text drängt die Schaltfläche aus dem Bild. */
.foe-infolab-liste .wp-block-post-excerpt {
	margin-block: 0;
}

.foe-infolab-liste .wp-block-post-excerpt__excerpt {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
}

/* ---------------------------------------------------------------------------
   Einblenden beim Scrollen

   Der Divi-Bestand trug 401× `animation_style="fade"` – ausnahmslos an
   `et_pb_section`, an keinem einzelnen Modul, und überall mit Divis Vorgaben.
   Die Seite baute sich also Abschnitt für Abschnitt auf. Das ist hier
   nachgebaut; die Auslösung übernimmt assets/einblenden.js.

   Ein Unterschied zum Original: nicht die Sektion selbst wird eingeblendet,
   sondern ihr Inhalt. Die Sektionen tragen hier die Farbflächen und die Wellen
   an ihren Rändern (::before/::after). Blendet man sie als Ganzes ein, wandert
   das Band samt Übergang mit – zwei aneinanderstossende Sektionen blitzen dann
   am Übergang auf. So bleibt die Fläche stehen, und Überschrift, Text und
   Bilder steigen darin auf.

   Alles hängt an `html.foe-bewegung`, und diese Klasse setzt einblenden.js.
   Fehlt die Datei oder kennt der Browser keinen IntersectionObserver, steht
   die Seite unbewegt und vollständig da. `screen` hält den Druck heraus,
   `prefers-reduced-motion` die, die keine Bewegung wollen.

   Einzelne Abschnitte lassen sich im Editor unter „Erweitert → Zusätzliche
   CSS-Klasse" mit `foe-ohne-bewegung` ausnehmen.
--------------------------------------------------------------------------- */

@media screen and (prefers-reduced-motion: no-preference) {
	/* `:where()` hält die Spezifität dieser langen Struktur bei einer Klasse –
	   so genügt der Regel darunter ihre eine Klasse zum Gewinnen.

	   `:not(:first-child)` nimmt den Kopfbereich aus: der steht immer im Blick,
	   es gibt dort also nichts einzublenden – und solange er auf `opacity: 0`
	   steht, zählt der Browser seine Überschrift nicht als Largest Contentful
	   Paint. Der LCP rutschte damit hinter das Laden von einblenden.js, den
	   IntersectionObserver und die 700 ms Überblendung: gemessen 1,1 s später
	   und neun Lighthouse-Punkte weniger. Der erste Abschnitt ist in jedem
	   Template das erste Kind – entweder von <main> (Produkt, Shop,
	   Expert:innen) oder vom post-content darin (alle übrigen Seiten). */
	html.foe-bewegung
		:where(
			main.wp-block-group > .wp-block-group:not(.foe-ohne-bewegung):not(:first-child),
			main.wp-block-group
				> .wp-block-post-content
				> .wp-block-group:not(.foe-ohne-bewegung):not(:first-child)
		)
		> * {
		opacity: 0;
		transform: translateY(14px);
	}

	html.foe-bewegung .foe-eingeblendet > * {
		opacity: 1;
		transform: none;
		/* Divis Vorgabe war 1000 ms ease-in-out. 700 ms mit ausklingender Kurve
		   wirken weniger zäh und geben den Text früher zum Lesen frei. */
		transition:
			opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* Ein kurzer Versatz je Kind: der Abschnitt baut sich auf, statt zu
	   blinken. Nach dem dritten bleibt es beim selben Versatz – ein langer
	   Abschnitt soll nicht sekundenlang nachladen wirken. */
	html.foe-bewegung .foe-eingeblendet > :nth-child(2) {
		transition-delay: 90ms;
	}

	html.foe-bewegung .foe-eingeblendet > :nth-child(3) {
		transition-delay: 180ms;
	}

	html.foe-bewegung .foe-eingeblendet > :nth-child(n + 4) {
		transition-delay: 270ms;
	}
}