/*
 * Wir fürs Tier, Theme-Stylesheet.
 *
 * Raster: alle Abstände in 8-px-Stufen (die Presets aus theme.json, hier als --sp-*),
 * Zeilenhöhen auf 4-px-Unterteilung. Farben und Radien kommen aus theme.json.
 */

:root {
	--wft-dark: var(--wp--preset--color--dark);
	--wft-green: var(--wp--preset--color--green);
	--wft-green-dark: var(--wp--preset--color--green-dark);
	--wft-mint: var(--wp--preset--color--mint);
	--wft-mist: var(--wp--preset--color--mist);
	/* Graublau eine Stufe dunkler: Hover-Flächen und Kartenversatz, leichter 3D-Eindruck */
	--wft-mist-dark: var(--wp--preset--color--mist-dark);
	--wft-white: var(--wp--preset--color--white);
	--wft-dark-rgb: 16, 27, 34;

	--wft-r-s: var(--wp--custom--radius--s);
	--wft-r-m: var(--wp--custom--radius--m);
	--wft-r-l: var(--wp--custom--radius--l);
	--wft-ease: var(--wp--custom--ease);
	--wft-shadow: var(--wp--preset--shadow--soft);

	/* 8-px-Stufen */
	--sp-0: 0.25rem; /*   4, halbe Stufe */
	--sp-1: 0.5rem;  /*   8 */
	--sp-1h: 0.75rem; /*  12, halbe Stufe */
	--sp-2: 1rem;    /*  16 */
	--sp-3: 1.5rem;  /*  24 */
	--sp-4: 2rem;    /*  32 */
	--sp-5: var(--wp--preset--spacing--50); /* 32 / 48 */
	--sp-6: var(--wp--preset--spacing--60); /* 48 / 64 */
	--sp-7: var(--wp--preset--spacing--70); /* 64 / 96 */
	--sp-8: var(--wp--preset--spacing--80); /* 80 / 128 */

	/* Die großen Stufen springen an einer Stelle, statt fließend Zwischenwerte zu bilden. */
	--wft-space-50: 2rem;
	--wft-space-60: 3rem;
	--wft-space-70: 4rem;
	--wft-space-80: 5rem;
	--wft-gutter: 1rem;

	/*
	 * Schriftskala (DESIGN.md): jede Größe mit fester Zeilenhöhe im 4-px-Raster. Unter
	 * 600 px werden die großen Stufen kleiner, ohne fließende Zwischenwerte. Im CSS
	 * stehen nur diese Namen, nie freie Größen.
	 */
	--fs-display: 3rem;      /* 48 */
	--lh-display: 3.5rem;    /* 56 */
	--fs-h1: 2.5rem;         /* 40 */
	--lh-h1: 3rem;           /* 48 */
	--fs-h2: 2rem;           /* 32 */
	--lh-h2: 2.5rem;         /* 40 */
	--fs-h3: 1.5rem;         /* 24 */
	--lh-h3: 2rem;           /* 32 */
	--fs-title: 1.25rem;     /* 20 */
	--lh-title: 1.75rem;     /* 28 */
	--fs-lead: 1.25rem;      /* 20 */
	--lh-lead: 2rem;         /* 32 */
	--fs-label: 1.125rem;    /* 18, Rubik */
	--lh-label: 1.5rem;      /* 24 */
	--fs-body: 1.125rem;     /* 18 */
	--lh-body: 1.75rem;      /* 28 */
	--fs-button: 1.125rem;   /* 18 */
	--lh-button: 1.5rem;     /* 24 */
	--fs-small: 1rem;        /* 16 */
	--lh-small: 1.5rem;      /* 24 */
	--fs-caption: 0.875rem;  /* 14 */
	--lh-caption: 1.25rem;   /* 20 */
	--fs-micro: 0.75rem;     /* 12 */
	--lh-micro: 1rem;        /* 16 */

	--wft-frame-offset: 16px;
	/* Pfeil mit kurzem Schaft (52 × 24), Spitze wie im Original */
	--wft-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 24'%3E%3Cpath d='M51.06 13.06a1.5 1.5 0 0 0 0-2.12L41.51 1.39a1.5 1.5 0 1 0-2.12 2.12L47.88 12l-8.49 8.49a1.5 1.5 0 1 0 2.12 2.12l9.55-9.55ZM0 13.5h50v-3H0v3Z'/%3E%3C/svg%3E");
}

@media (min-width: 782px) {
	:root {
		--wft-space-50: 3rem;
		--wft-space-60: 4rem;
		--wft-space-70: 6rem;
		--wft-space-80: 8rem;
		--wft-gutter: 2rem;
	}
}

@media (max-width: 599px) {
	:root {
		--fs-display: 2rem;      /* 32 */
		--lh-display: 2.5rem;    /* 40 */
		--fs-h1: 1.75rem;        /* 28 */
		--lh-h1: 2.25rem;        /* 36 */
		--fs-h2: 1.5rem;         /* 24 */
		--lh-h2: 2rem;           /* 32 */
		--fs-h3: 1.25rem;        /* 20 */
		--lh-h3: 1.75rem;        /* 28 */
		--fs-lead: 1.125rem;     /* 18 */
		--lh-lead: 1.75rem;      /* 28 */
	}
}

/* Sehr schmale Geräte: lange, nicht trennbare Wörter („Heimtierpfleger/-in“) passen sonst
   nicht in die Titelzeile */
@media (max-width: 359px) {
	:root {
		--fs-h1: 1.5rem;         /* 24 */
		--lh-h1: 2rem;           /* 32 */
	}
}

/* ---------- Typografie ---------- */

body {
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title) {
	text-wrap: balance;
	hyphens: manual;
}

/* Zeilenhöhen der Preset-Klassen aus dem Editor passend zur Größe */
.has-hero-font-size { line-height: var(--lh-display); }
.has-xx-large-font-size { line-height: var(--lh-h1); }
.has-x-large-font-size { line-height: var(--lh-h2); }
.has-large-font-size { line-height: var(--lh-h3); }
.has-medium-font-size { line-height: var(--lh-body); }
.has-small-font-size { line-height: var(--lh-small); }
.has-x-small-font-size { line-height: var(--lh-caption); }

:where(p, li, figcaption) {
	text-wrap: pretty;
}

/* Lesespalte: Absätze und Überschriften im Fließtext */
.wft-content > :where(h2) {
	margin-block-start: var(--sp-6);
}

.wft-content > :where(h3, h4) {
	margin-block-start: var(--sp-5);
}

.wft-content > :where(h2, h3, h4) + * {
	margin-block-start: var(--sp-2);
}

.wft-content :where(ul, ol) {
	padding-left: var(--sp-3);
}

.wft-content :where(li + li) {
	margin-top: var(--sp-1);
}

strong,
b {
	font-weight: 600;
}

/* ---------- Grundgerüst ---------- */

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

.wft-main > .alignfull,
.wft-main .wp-block-post-content > .alignfull {
	margin-block: 0;
}

.wft-section {
	padding-block: var(--sp-6);
}

.wft-section--last {
	padding-bottom: var(--sp-7);
}

/*
 * Oberste Fläche (Aufmacher und Band): Wellen in mehreren Grüntönen, unten eine
 * Wellenkante statt einer geraden Linie. Die Fläche rutscht unter den klebenden Kopf
 * (negativer Abstand in Kopfhöhe), so bilden Kopf und Aufmacher eine Fläche und scrollen
 * gemeinsam weg. Die Wellenkante kommt aus einer Maske: oben voll, unten wave-edge.svg.
 */
.wft-hero,
.wft-band {
	--wft-wave-h: 64px;
	margin-block-start: calc(var(--wft-header-h) * -1) !important;
	background-image: url("../img/waves.svg?v=2");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--wft-wave-h) + 1px) no-repeat,
		url("../img/wave-edge.svg") bottom / 100% var(--wft-wave-h) no-repeat;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--wft-wave-h) + 1px) no-repeat,
		url("../img/wave-edge.svg") bottom / 100% var(--wft-wave-h) no-repeat;
}

.wft-band {
	padding-block: calc(var(--wft-header-h) + var(--sp-5)) calc(var(--sp-6) + var(--sp-4));
}

@media (max-width: 781px) {
	.wft-hero,
	.wft-band {
		--wft-wave-h: 32px;
	}
}

.wft-content {
	padding-block: var(--sp-6) var(--sp-7);
}

img {
	height: auto;
}

/* ---------- Kopfbereich ---------- */

/*
 * Der Kopf klebt oben. Beim Scrollen (Klasse wft-scrolled am <html>, gesetzt in theme.js)
 * rückt die Leiste hoch und der Kreis schrumpft zum runden Ende der Leiste. Alles über
 * transform, die Höhe des Kopfs bleibt gleich, nichts springt.
 *
 * Der Kopf selbst ist durchsichtig. Die Mintfläche hinter ihm gehört zur Seite
 * (.wp-site-blocks) und scrollt mit dem Inhalt weg, statt als eigene Fläche auszublenden.
 *
 * Maße Desktop: Kreis 136 (Radius 68), Leiste 64 hoch. Kreismitte 40 unter der Oberkante
 * der Leiste und 48 links von ihrem Anfang. Daraus sind die eingezogenen Rundungen
 * berechnet (Rundung 16, tangential an Kreis und Leistenkante).
 */
:root {
	--wft-header-h: 120px; /* 40 oben + Leiste 64 + 16 unten */
}

.wp-site-blocks {
	background: linear-gradient(var(--wft-mint), var(--wft-mint)) no-repeat top / 100% var(--wft-header-h);
}

.wp-site-blocks > .wp-block-template-part:has(> .wft-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.wft-header {
	position: relative;
	z-index: 50;
	padding-top: 40px; /* geo: Kreis überragt die Leiste */
	padding-bottom: var(--sp-2);
}

.wft-scrolled .wft-header {
	pointer-events: none;
}

.wft-header__logo,
.wft-header__bar {
	pointer-events: auto;
}

.wft-header__inner {
	--hdr-shift: -24px;
	justify-content: center;
	gap: 0 !important;
	filter: drop-shadow(0 8px 20px rgba(var(--wft-dark-rgb), 0.12));
	transition: transform 0.45s var(--wft-ease);
}

.wft-scrolled .wft-header__inner {
	transform: translateY(var(--hdr-shift));
}

/* transform und filter machen den Kopf zum Bezugsrahmen für position:fixed.
   Solange das Mobilmenü offen ist, darf beides nicht aktiv sein. */
html.has-modal-open .wft-header__inner {
	transform: none !important;
	filter: none !important;
}

/* Kreis 136: ragt 28 über die Leiste, 20 in sie hinein; Außenmaß der Hülle genau 64 hoch */
.wft-header__logo {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	margin: -28px -20px -44px 0 !important; /* geo: Kreis um die Leiste */
	/* Mitte des Kreises, nicht der Hülle: die figure ist ein paar Pixel höher als das Bild */
	transform-origin: 68px 68px;
	transition: transform 0.45s var(--wft-ease);
}

.wft-scrolled .wft-header__logo {
	/* Mitte (-48|40, bezogen auf den Leistenanfang) wandert auf die Mitte der Endkappe (32|32), 136 auf 64 px */
	transform: translate(80px, -8px) scale(0.4706);
}

/* Der Link ist sonst inline-block auf der Grundlinie und macht die Hülle 7 px höher */
.wft-header__logo a {
	display: block;
}

.wft-header__logo img {
	display: block;
	width: 136px !important;
	/* Das SVG ist nicht ganz quadratisch. Quadratisch erzwungen, damit Kreismitte und Rundungen stimmen. */
	height: auto !important;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 50%;
	transition: transform 0.4s var(--wft-ease);
}

/* Die Leiste ist so breit wie ihr Inhalt. Links vom ersten Punkt steht derselbe Abstand
   zum Kreis wie rechts vom letzten Punkt zum Leistenende (--wft-bar-gap). Der Innenabstand
   bleibt beim Scrollen gleich, die Punkte bewegen sich nicht. */
.wft-header__bar {
	--wft-bar-gap: 96px;
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	min-height: 64px;
	padding: 0 var(--wft-bar-gap) 0 calc(20px + var(--wft-bar-gap)); /* geo */
	background: var(--wft-white);
	border-radius: var(--wft-r-l);
	transition: border-radius 0.25s var(--wft-ease), padding-left 0.45s var(--wft-ease);
}

.wft-scrolled .wft-header__bar {
	border-radius: 32px;
}

/* Eingezogene Rundungen zwischen Kreis und Leiste, oben und unten.
   Oben: Mittelpunkt 16 über der Leiste, sqrt(84² - 56²) = 62,61 rechts der Kreismitte,
   also 14,61 rechts vom Leistenanfang; das Stück beginnt 16 davor bei -1,39.
   Unten: sqrt(84² - 40²) = 73,86, das Stück beginnt bei 9,86.
   Links vom Berührpunkt mit dem Kreis würde es als Spitze vorstehen, clip-path schneidet
   dort ab (oben 4,07, unten 1,93). */
.wft-header__bar::before,
.wft-header__bar::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.wft-header__bar::before {
	left: -1.39px;
	top: -16px;
	background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--wft-white) 16px);
	clip-path: inset(0 0 0 4.07px);
}

.wft-header__bar::after {
	left: 9.86px;
	bottom: -16px;
	background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--wft-white) 16px);
	clip-path: inset(0 0 0 1.93px);
}

.wft-scrolled .wft-header__bar::before,
.wft-scrolled .wft-header__bar::after {
	opacity: 0;
}

/* Offenes Panel: die Leiste geht unten nahtlos hinein. Zwei Regeln, weil :has() nicht in :has() stehen darf. */
.wft-header__bar:has(.wft-mega .wp-block-navigation__container > .has-child:is(:hover, :focus-within)),
.wft-header__bar:has(.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
	border-bottom-right-radius: 0;
}

/* Offenes Mobilmenü liegt über dem Logo */
.wft-header__bar:has(.is-menu-open) {
	z-index: 10;
}

/* ---------- Navigation und Mega-Menü ---------- */

/* Alle Hüllen bis zur Leiste werden statisch, damit die Panels an der Leiste hängen. */
.wft-mega.wp-block-navigation,
.wft-mega .wp-block-navigation__responsive-container:not(.is-menu-open),
.wft-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
.wft-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.wft-mega .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
.wft-mega .wp-block-navigation__container,
.wft-mega .wp-block-navigation__container > .wp-block-navigation-item {
	position: static !important;
}

.wft-mega .wp-block-navigation__container {
	gap: var(--sp-4);
}

/* Im Kopf keine Unterstreichungen, Hover und aktive Seite zeigen sich über die Farbe. */
.wft-header a,
.wft-header a:is(:hover, :focus, :focus-visible) {
	text-decoration: none;
}

/* Auf den noch aus Elementor stammenden Seiten gilt das Kit-CSS: Barlow für jeden Link
   (.elementor-kit-4446 a) und eine größere Grundschrift am body. Kopf und Fuß setzen
   beides selbst, sonst sehen Menü und Panel auf jeder zweiten Seite anders aus. */
body .wft-header,
body .wft-footer {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

body :is(.wft-header, .wft-footer, .wft-cards, .wft-teaser) a,
body :is(.wft-header, .wft-footer, .wft-cards, .wft-teaser) a:hover {
	font-family: inherit;
}

/* Kartentitel auf Elementor-Seiten: das Kit färbt jeden Link grün */
body .wft-card__title a,
body .wft-card__title a:is(:hover, :focus-visible),
body .wft-teaser__text .wp-block-heading a,
body .wft-teaser__text .wp-block-heading a:is(:hover, :focus-visible) {
	color: var(--wft-dark);
}

/* Die Hauptpunkte füllen die volle Leistenhöhe (24 + 2 × 20 = 64). So gibt es keinen
   Spalt zwischen Punkt und Panel, in dem das Menü beim Runterfahren zuklappen würde. */
.wft-mega .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-block: 20px; /* geo: Leiste 64 = 20 + 24 + 20 */
	color: var(--wft-dark);
	/* feste 24 px statt 1.5 × 18: sonst wird die Leiste 67 hoch und alle Rundungen am
	   Kreis sitzen 3 px daneben */
	line-height: var(--lh-label);
	transition: color 0.2s ease;
}

.wft-mega .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content,
.wft-mega .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.wft-mega .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wft-green);
}

/* Die Pfeile neben Ratgeber und Tierberufe sind auf dem Desktop nur für Tastatur
   und Bildschirmleser da: unsichtbar, aber fokussierbar. */
@media (min-width: 960px) {
	.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Das Panel hängt unter der ganzen Leiste, nicht unter dem einzelnen Punkt. */
.wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	left: var(--wft-panel-x, 0px);
	right: 0;
	top: 100%;
	width: auto;
	min-width: 0;
	height: auto;
	padding: var(--sp-1) var(--sp-4) var(--sp-4) var(--wft-panel-pad, 48px);
	border: 0;
	border-radius: 0 0 var(--wft-r-l) var(--wft-r-l);
	background: var(--wft-white);
	color: var(--wft-dark);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	column-gap: var(--sp-4);
	align-items: start;
	transform: translateY(-8px);
	/* Beim Schließen bleibt das Panel noch 0,3 s sichtbar und bedienbar: eine Gnadenfrist,
	   falls die Maus kurz außerhalb landet. */
	transition: opacity 0.3s var(--wft-ease), transform 0.3s var(--wft-ease), visibility 0s linear 0.3s;
}

.wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child:is(:hover, :focus-within, :has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	transform: translateY(0);
	transition-delay: 0s;
}

/* Mit Hover-Absicht (theme.js setzt html.wft-hoverintent) steuert die Klasse wft-open das
   Panel, nicht mehr :hover. Tastatur öffnet weiter über den sichtbaren Fokus. */
html.wft-hoverintent .wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child:not(.wft-open):not(:has(:focus-visible)):not(:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
}

html.wft-hoverintent .wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child.wft-open > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	overflow: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

html.wft-hoverintent .wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	transition: opacity 0.2s var(--wft-ease), transform 0.25s var(--wft-ease), visibility 0s linear 0.2s;
}

.wft-header__bar:has(.wft-mega .wp-block-navigation__container > .has-child.wft-open) {
	border-bottom-right-radius: 0;
}

/* Mit Hover-Absicht wird die Leiste nur eckig, wenn wirklich ein Panel offen ist
   (sonst reicht schon ein angeklickter Hauptpunkt mit Fokus dafür). */
html.wft-hoverintent .wft-header__bar:not(:has(.wft-open, :focus-visible, .wp-block-navigation-submenu__toggle[aria-expanded="true"])) {
	border-bottom-right-radius: var(--wft-r-l) !important;
}

html.wft-hoverintent.wft-scrolled .wft-header__bar:not(:has(.wft-open, :focus-visible, .wp-block-navigation-submenu__toggle[aria-expanded="true"])) {
	border-bottom-right-radius: 32px !important;
}

/* Linkes Ende der Leiste: Oben liegt der große Kreis davor, dort bleiben die Ecken eckig.
   Runde Ecken ließen neben dem Kreis einen Keil Hintergrund durchscheinen. Geschrumpft
   ist das Ende deckungsgleich mit dem Kreis und rund (mobil 28, siehe unten). */
.wft-header__bar {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.wft-scrolled .wft-header__bar {
	border-top-left-radius: 32px !important;
	border-bottom-left-radius: 32px !important;
}

/*
 * Das Panel beginnt unter der Kreismitte, der Kreis liegt auf seiner oberen linken Ecke.
 * Oben liegt die Kreismitte 48 px links vom Leistenanfang (Kreis 136), im geschrumpften
 * Kopf 32 px rechts davon (Mitte der Endkappe). Der Innenabstand hält den Inhalt bündig
 * mit dem ersten Hauptpunkt. Die Tierberufe-Karten brauchen die Breite und beginnen
 * weiter links, mit 12 bzw. 16 px Luft zum Kreis.
 *
 * An der Kante unter dem tiefsten Kreispunkt sitzt eine eingezogene Rundung (r 16),
 * tangential an Kreis und Kante: Mittelpunkt 16 links der Kante und sqrt((R + 16)² - 16²)
 * unter der Kreismitte. Oben R 68, Kreismitte 24 über der Panelkante: 82,46 - 24 - 16 = 42,46.
 * Geschrumpft R 32, Mitte 32 über der Panelkante: 45,25 - 32 - 16 = -2,75.
 */
@media (min-width: 960px) {
	.wft-header__bar {
		--wft-panel-x: -48px;
		--wft-panel-pad: calc(68px + var(--wft-bar-gap));
		--wft-panel-pad-groups: 80px;
		--wft-panel-fillet-top: 42.46px;
		--wft-panel-fillet-clip: 3.05px;
	}

	.wft-scrolled .wft-header__bar {
		--wft-panel-x: 32px;
		--wft-panel-pad: calc(var(--wft-bar-gap) - 12px);
		--wft-panel-pad-groups: 48px;
		--wft-panel-fillet-top: -2.75px;
		--wft-panel-fillet-clip: 5.33px;
	}

	.wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: -16px;
		top: var(--wft-panel-fillet-top);
		width: 16px;
		height: 16px;
		background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--wft-white) 16px);
		/* bis zum Berührpunkt mit dem Kreis, sonst steht links oben eine Spitze vor */
		clip-path: inset(0 0 0 var(--wft-panel-fillet-clip));
		pointer-events: none;
	}
}

/* Nur Gruppen (Tierberufe): drei gleich breite Karten. Feste Spalten, damit sich beim
   Überfahren oder nach dem Seitenwechsel nichts verschiebt. Überschrift und Liste jeder
   Karte liegen per subgrid in gemeinsamen Zeilen: bricht eine Überschrift um, beginnen
   die Listen trotzdem auf einer Höhe. */
.wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--sp-2);
	align-items: stretch;
	padding-left: var(--wft-panel-pad-groups, 48px);
}

.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: auto;
}

/* Einfache Links in der ersten Spalte (nur auf Panel-Ebene) */
.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) {
	grid-column: 1;
}

.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--sp-1) 0;
	color: var(--wft-dark);
	line-height: var(--lh-label);
	transition: color 0.2s ease;
}

.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.wft-mega .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wft-green);
}

/* Gruppen mit Unterpunkten */
.wft-mega .wp-block-navigation__submenu-container > .has-child {
	grid-column: 2;
	grid-row: 1 / span 12;
	padding: var(--sp-1) 0 0 var(--sp-4);
	border-left: 2px solid var(--wft-mint);
}

.wft-mega .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) > .has-child {
	grid-column: auto;
	grid-row: auto;
	padding: var(--sp-2);
	border-left: 0;
	border-radius: var(--wft-r-m);
	background: var(--wft-mist);
}

.wft-mega .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
	margin-bottom: var(--sp-1);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.wft-mega .wp-block-navigation__submenu-container > .has-child > span.wp-block-navigation-item__content,
.wft-mega .wp-block-navigation__submenu-container > .has-child > a.wp-block-navigation-item__content:not([href]) {
	cursor: default;
	color: var(--wft-dark);
}

.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	display: none;
}

/* Unterpunkte einer Gruppe stehen offen im Panel. visibility erbt vom Panel:
   mit "visible" lägen sie bei geschlossenem Panel unsichtbar, aber klickbar über der Seite.
   !important gegen den Kern, der beim Überfahren und bei :focus-within visibility: visible
   und min-width: 200px setzt. Die Mindestbreite ließ die Spalten beim Überfahren springen. */
.wft-mega.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	position: static;
	visibility: inherit !important;
	opacity: 1;
	width: auto;
	min-width: 0 !important;
	height: auto;
	overflow: visible;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--sp-4);
}

/* Ratgeber: die Tierarten in Spalten wie bisher */
.wft-mega.wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container {
	display: block;
	columns: 3 7rem;
	column-gap: var(--sp-3);
}

.wft-mega .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	break-inside: avoid;
}

.wft-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--sp-1) 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-small);
	font-weight: 400;
	line-height: var(--lh-small);
}

/* ---------- Mega-Menü Feinschliff (nur Desktop) ---------- */

@media (min-width: 960px) {
	/* Hauptlinks im Panel: Fläche und Pfeil beim Überfahren */
	.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-2);
		margin-inline: calc(var(--sp-2) * -1);
		padding: var(--sp-1) var(--sp-2);
		border-radius: var(--wft-r-s);
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content::after {
		content: "";
		flex: 0 0 auto;
		width: 1.5rem;
		height: 0.75rem;
		background: currentColor;
		-webkit-mask: var(--wft-arrow) no-repeat right center / contain;
		mask: var(--wft-arrow) no-repeat right center / contain;
		opacity: 0;
		transform: translateX(-8px);
		transition: opacity 0.2s ease, transform 0.3s var(--wft-ease);
	}

	.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wft-mist);
		color: var(--wft-dark);
	}

	.wft-mega .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:is(:hover, :focus-visible)::after {
		opacity: 1;
		transform: translateX(0);
	}

	/* Gruppenüberschriften: einzeilig, damit die Spalten auf einer Höhe beginnen */
	.wft-mega .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
		margin-bottom: var(--sp-1);
		white-space: nowrap;
	}

	/* Ratgeber: Tierarten als runde Chips */
	.wft-mega.wp-block-navigation .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-1);
		columns: auto;
	}

	.wft-mega .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: var(--sp-1) var(--sp-2);
		border-radius: 999px;
		background: var(--wft-mist);
		line-height: var(--lh-small);
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.wft-mega .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wft-mist-dark);
		color: var(--wft-dark);
	}

	/* Gruppenüberschriften bündig mit ihren Einträgen. Der Kern rückt sie mit 0.5em 1em ein
	   und schlägt dabei jede kürzere Regel. */
	.wft-mega.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
		padding-inline: 0;
	}

	/* Tierberufe: Einträge als Zeilen in der Karte, beim Überfahren eine weiße Fläche.
	   Nur Farbe und Fläche ändern sich, die Breite nie. */
	.wft-mega .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin-inline: calc(var(--sp-1) * -1);
		padding: var(--sp-0) var(--sp-1);
		border-radius: var(--wft-r-s);
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.wft-mega .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wft-white);
		color: var(--wft-dark);
	}

	/* Tierberufe-Karten: Überschrift und Liste in den gemeinsamen Zeilen des Panels */
	.wft-mega .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) > .has-child {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.wft-mega .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) > .has-child > .wp-block-navigation-item__content {
		align-self: start;
		white-space: normal;
		text-wrap: balance;
	}

	/* Die Liste bleibt oben in ihrer Zeile, statt ihre Einträge über die Höhe zu verteilen */
	.wft-mega.wp-block-navigation .wp-block-navigation__submenu-container:not(:has(> .wp-block-navigation-item:not(.has-child))) > .has-child > .wp-block-navigation__submenu-container {
		align-self: start;
		align-content: start;
	}
}

/* ---------- Navigation mobil ---------- */

/* Der Kern schaltet erst bei 600px um, für diese Leiste zu spät. */
@media (min-width: 600px) and (max-width: 959px) {
	.wft-mega .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* Mobil: Kreis 104, Leiste 56, Kreis mittig zur Leiste, 16 über ihrem Anfang.
   Daraus: Rundungen 12 px, Endkappe der Leiste bei (116|28). */
@media (max-width: 959px) {
	:root {
		--wft-header-h: 104px; /* 32 oben + Leiste 56 + 16 unten */
	}

	.wft-header {
		padding-top: var(--sp-4);
	}

	.wft-header__inner {
		--hdr-shift: -20px;
	}

	.wft-header__logo {
		margin: -24px -16px -32px 0 !important; /* geo */
		transform-origin: 52px 52px;
	}

	.wft-scrolled .wft-header__logo {
		transform: translate(64px, 0) scale(0.4615);
	}

	.wft-header__logo img {
		width: 104px !important;
	}

	.wft-header__bar {
		flex: 1 1 auto;
		justify-content: flex-end !important;
		min-height: 56px;
		padding: 0 var(--sp-2) 0 var(--sp-4);
		border-radius: var(--wft-r-m);
	}

	.wft-scrolled .wft-header__bar {
		border-radius: 28px;
		border-top-left-radius: 28px !important;
		border-bottom-left-radius: 28px !important;
		padding-left: 64px; /* geo: Platz für das kleine Logo */
	}

	.wft-header__bar::before,
	.wft-header__bar::after {
		left: 2px;
		width: 12px;
		height: 12px;
		clip-path: inset(0 0 0 2.6px);
	}

	.wft-header__bar::before {
		top: -12px;
		background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--wft-white) 12px);
	}

	.wft-header__bar::after {
		bottom: -12px;
		background: radial-gradient(circle at 100% 100%, transparent 11.5px, var(--wft-white) 12px);
	}

	.wft-mega .wp-block-navigation__responsive-container-open {
		padding: var(--sp-1);
		color: var(--wft-dark);
	}

	.wft-mega .wp-block-navigation__responsive-container-open svg {
		width: 32px;
		height: 32px;
	}
}

.wft-mega .is-menu-open .wp-block-navigation__container,
.wft-mega .is-menu-open .wp-block-navigation__responsive-container-content,
.wft-mega .is-menu-open .wp-block-navigation-item,
.wft-mega .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

.wft-mega .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	padding: var(--sp-3) var(--sp-3) var(--sp-5);
	background: var(--wft-white);
	color: var(--wft-dark);
}

.wft-mega .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px; /* geo */
}

.wft-mega .is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.wft-mega .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-self: stretch;
	width: 100%;
	padding-block: var(--sp-1);
	border-bottom: 1px solid var(--wft-mist);
}

.wft-mega .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-block: var(--sp-1);
	font-size: var(--fs-title);
}

.wft-mega .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	display: none;
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	pointer-events: auto;
	display: block;
	padding: 0 0 var(--sp-2);
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* Untermenüs im Mobilmenü: bündig unter dem Hauptpunkt, ohne Randlinie. Der Kern rückt
   jede Unterliste um 2rem ein, daher !important beim Innenabstand. */
.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container {
	padding-inline: 0 !important;
}

.wft-mega .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--sp-1) 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Präfix mit hoher Spezifität: die Desktop-Regeln der Tierberufe-Karten greifen sonst mit */
.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child {
	width: 100%;
	margin-block: var(--sp-2) var(--sp-1);
	/* Gruppen bündig mit den einfachen Unterpunkten und dem Hauptpunkt */
	padding: 0;
	border-left: 0;
	border-radius: 0;
	background: transparent;
}

.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-inline: 0;
}

/* Gruppenüberschrift: kleines Etikett über der Gruppe */
.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
	margin: 0;
	padding: 0 0 var(--sp-1);
	color: var(--wft-green-dark);
	font-size: var(--fs-caption);
	font-weight: 600;
	line-height: var(--lh-caption);
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	display: block;
	columns: auto;
}

/* Ratgeber: Tierarten als runde Chips wie auf dem Desktop */
.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sp-1);
}

.wft-mega .is-menu-open .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: auto;
}

.wft-mega .is-menu-open .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:not(.has-child)) > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--sp-1) var(--sp-2);
	border-radius: 999px;
	background: var(--wft-mist);
	font-weight: 400;
}

/*
 * Mobilmenü mit Durchklicken (Drill-down): Oben das Logo, darunter die Hauptpunkte als
 * große Zeilen. Tippen auf einen Punkt mit Unterseiten schiebt diese von rechts herein,
 * oben stehen „Zurück" und der Name des Bereichs (führt zur Übersichtsseite). Unten ein
 * Fußbereich mit Rechtslinks und Social Media. theme.js steuert die Zustände; ohne
 * JavaScript stehen alle Unterpunkte offen darunter.
 */
.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--sp-2) - var(--sp-3));
	padding-top: 88px; /* geo: Logo und Schließen */
}

/* Logo oben links, auf einer Höhe mit dem Schließen-Knopf */
/* Nur im geöffneten Mobilmenü, auf dem Desktop steht der Dialog sonst sichtbar im Kopf */
.wft-menu-brand {
	display: none !important;
}

/* Links bündig mit den Menüpunkten; der Dialog hat den Innenabstand schon */
.wft-mega .is-menu-open .wft-menu-brand {
	display: block !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 64px;
	line-height: 0;
}

.wft-menu-brand img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
}

/* Mitte des Schließen-Knopfs auf Höhe der Logomitte */
.wft-mega .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 20px;
	right: var(--sp-3);
}

/* Der Kern setzt im Overlay 24 px Abstand zwischen die Hauptpunkte, die Trennlinien reichen */
.wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center !important;
	padding-block: 0;
}

/* Hauptzeile 60 px: 16 + 28 + 16 */
.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 0;
	padding-block: var(--sp-2) !important;
	font-size: var(--fs-title);
	line-height: var(--lh-title);
}

/* Pfeil nach rechts: die Unterseiten liegen „dahinter" */
.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 calc(var(--sp-1h) * -1) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wft-dark);
	cursor: pointer;
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
	transform: rotate(-90deg) !important;
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon:focus-visible {
	background: var(--wft-mist);
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	width: 100%;
	padding-bottom: var(--sp-3) !important;
}

.wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
	padding: var(--sp-1h) 0;
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* Mit JavaScript: Unterseiten zu, bis man hineintippt */
html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child:not(.wft-sub-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}

/* Hineingetippt: nur dieser Bereich steht da, die anderen Hauptpunkte sind weg */
html.wft-drill .wft-mega .is-menu-open .wp-block-navigation__container.wft-drilled > .wp-block-navigation-item:not(.wft-sub-open) {
	display: none;
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child.wft-sub-open {
	border-bottom: 0;
	animation: wft-slide-in 0.32s cubic-bezier(0.2, 0, 0, 1) both;
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child.wft-sub-open > .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* Der Bereichsname wird zur Überschrift und führt zur Übersichtsseite */
html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child.wft-sub-open > .wp-block-navigation-item__content {
	grid-column: 1 / -1;
	gap: var(--sp-2);
	padding-block: var(--sp-0) var(--sp-2) !important;
	border-bottom: 1px solid var(--wft-mist);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
	color: var(--wft-dark);
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child.wft-sub-open > .wp-block-navigation-item__content::after {
	content: "Übersicht";
	display: inline-flex !important;
	align-items: center;
	margin-left: auto;
	padding: var(--sp-0) var(--sp-1h);
	border-radius: 999px;
	background: var(--wft-mist);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-caption);
	font-weight: 600;
	line-height: var(--lh-caption);
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wp-block-navigation__container > .has-child.wft-sub-open > .wp-block-navigation__submenu-container {
	padding-top: var(--sp-2) !important;
}

/* Zurück-Knopf über dem Bereichsnamen */
.wft-menu-back {
	display: none;
}

html.wft-drill .wft-mega .is-menu-open .has-child.wft-sub-open > .wft-menu-back {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	justify-self: start;
	margin: 0 0 var(--sp-1) calc(var(--sp-1) * -1);
	padding: var(--sp-1) var(--sp-1h) var(--sp-1) var(--sp-1);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wft-dark);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: var(--lh-small);
	cursor: pointer;
}

html.wft-drill .wft-mega .is-menu-open .has-child.wft-sub-open > .wft-menu-back::before {
	content: "";
	width: 10px;
	height: 10px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(3px) rotate(45deg);
}

.wft-menu-back:focus-visible {
	background: var(--wft-mist);
}

/* Tierberufe: Gruppen als Klappzeilen (theme.js setzt .wft-acc), immer nur eine offen */
html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child.wft-acc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 0fr;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid var(--wft-mist);
	transition: grid-template-rows 0.28s cubic-bezier(0.2, 0, 0, 1);
}

html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child.wft-acc.wft-acc-open {
	grid-template-rows: auto 1fr;
}

html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wft-acc > .wp-block-navigation-item__content {
	padding: var(--sp-1h) 0 !important;
	color: var(--wft-dark);
	font-size: var(--fs-label);
	font-weight: 600;
	line-height: var(--lh-label);
	cursor: pointer;
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wft-acc > .wp-block-navigation__submenu-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 calc(var(--sp-1h) * -1) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wft-dark);
	cursor: pointer;
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wft-acc > .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
	transform: none !important;
	transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wft-acc.wft-acc-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg) !important;
}

html.wft-drill .wft-mega.wp-block-navigation .is-menu-open .wft-acc > .wp-block-navigation__submenu-icon:focus-visible {
	background: var(--wft-mist);
}

/* Zugeklappt: Höhe 0 und nicht per Tab erreichbar; der Innenabstand sitzt an den
   Einträgen, sonst bliebe er beim Zuklappen stehen */
html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wft-acc > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	align-self: stretch;
	min-height: 0;
	overflow: hidden;
	padding-block: 0 !important;
	visibility: hidden !important;
	transition: visibility 0s linear 0.28s;
}

html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wft-acc.wft-acc-open > .wp-block-navigation__submenu-container {
	visibility: visible !important;
	transition-delay: 0s;
}

html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wft-acc > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: var(--sp-1h) 0 var(--sp-1h) var(--sp-2);
}

html.wft-drill .wft-mega.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wft-acc > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	padding-bottom: var(--sp-2);
}

/* Zurück: die Hauptpunkte kommen von links wieder herein */
html.wft-drill .wft-mega .is-menu-open .wp-block-navigation__container.wft-returning > .wp-block-navigation-item {
	animation: wft-slide-back 0.32s cubic-bezier(0.2, 0, 0, 1) both;
}

/* Fußbereich: Social Media und Rechtslinks, unten angeschlagen */
.wft-menu-foot {
	display: none;
}

.wft-mega .is-menu-open .wft-menu-foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	width: 100%;
	margin-top: auto;
	padding-top: var(--sp-5);
}

.wft-menu-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	margin: 0;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
}

.wft-menu-foot__legal a {
	color: rgba(var(--wft-dark-rgb), 0.72);
	text-decoration: none;
}

.wft-menu-foot .wp-block-social-links {
	margin: 0;
}

.wft-menu-foot .wp-social-link {
	background: var(--wft-mist) !important;
	color: var(--wft-dark) !important;
}

@media (max-width: 959px) {
	@keyframes wft-menu-in {
		from {
			opacity: 0;
			transform: translateY(-12px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes wft-row-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes wft-slide-in {
		from {
			opacity: 0;
			transform: translateX(48px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes wft-slide-back {
		from {
			opacity: 0;
			transform: translateX(-48px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.wft-mega .wp-block-navigation__responsive-container.is-menu-open {
		animation: wft-menu-in 0.24s cubic-bezier(0.2, 0, 0, 1) both;
	}

	.wft-mega .is-menu-open .wp-block-navigation__container:not(.wft-drilled):not(.wft-returning) > .wp-block-navigation-item,
	.wft-mega .is-menu-open .wft-menu-foot {
		animation: wft-row-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
	}

	.wft-mega .is-menu-open .wp-block-navigation__container > :nth-child(1) { animation-delay: 0.05s; }
	.wft-mega .is-menu-open .wp-block-navigation__container > :nth-child(2) { animation-delay: 0.09s; }
	.wft-mega .is-menu-open .wp-block-navigation__container > :nth-child(3) { animation-delay: 0.13s; }
	.wft-mega .is-menu-open .wp-block-navigation__container > :nth-child(4) { animation-delay: 0.17s; }
	.wft-mega .is-menu-open .wp-block-navigation__container > :nth-child(5) { animation-delay: 0.21s; }
	.wft-mega .is-menu-open .wft-menu-foot { animation-delay: 0.25s; }

	/* Hinein und zurück ohne Staffelung, das wirkt sonst träge */
	.wft-mega .is-menu-open .wp-block-navigation__container:is(.wft-drilled, .wft-returning) > .wp-block-navigation-item {
		animation-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wft-mega .wp-block-navigation__responsive-container.is-menu-open,
	.wft-mega .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.wft-mega .is-menu-open .wft-menu-foot {
		animation: none !important;
	}
}

/* ---------- Suche ---------- */

/*
 * Lupe am rechten Ende der Kopfleiste. Sie liegt im Innenabstand der Leiste, so bleiben
 * die Abstände der Menüpunkte zum Kreis und zum Leistenende gleich. Das Suchfeld klappt
 * wie das Mega-Menü unter der Leiste auf.
 */
.wft-search__toggle {
	position: absolute;
	top: 50%;
	right: var(--sp-3);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px; /* geo: halbe Knopfhöhe */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wft-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wft-search__toggle:is(:hover, :focus-visible),
.wft-search__toggle[aria-expanded="true"] {
	background: var(--wft-mist);
}

.wft-search__panel {
	position: absolute;
	top: 100%;
	left: var(--wft-panel-x, 0px);
	right: 0;
	z-index: 20;
	padding: var(--sp-1) var(--sp-4) var(--sp-4) var(--wft-panel-pad, 48px);
	border-radius: 0 0 var(--wft-r-l) var(--wft-r-l);
	background: var(--wft-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s var(--wft-ease), transform 0.25s var(--wft-ease), visibility 0s linear 0.2s;
}

.wft-header__bar.wft-search-open .wft-search__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.wft-header__bar.wft-search-open {
	border-bottom-right-radius: 0 !important;
}

/* Eingezogene Rundung zwischen Kreis und Suchfeld, wie beim Mega-Menü */
@media (min-width: 960px) {
	.wft-search__panel::before {
		content: "";
		position: absolute;
		left: -16px;
		top: var(--wft-panel-fillet-top);
		width: 16px;
		height: 16px;
		background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--wft-white) 16px);
		clip-path: inset(0 0 0 var(--wft-panel-fillet-clip));
		pointer-events: none;
	}
}

/* Suchfeld: Pille in Graublau, Knopf rechts darin */
.wft-search__form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 640px;
}

.wft-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	padding: 0 128px 0 var(--sp-3); /* geo: Platz für den Knopf */
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--wft-mist);
	color: var(--wft-dark);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wft-search__input::placeholder {
	color: rgba(var(--wft-dark-rgb), 0.55);
}

.wft-search__input:focus {
	border-color: var(--wft-green);
	background: var(--wft-white);
	outline: none;
}

.wft-search__input::-webkit-search-cancel-button {
	display: none;
}

.wft-search__submit {
	position: absolute;
	top: 6px;
	right: 6px;
	height: 44px;
	padding: 0 var(--sp-3);
	border: 0;
	border-radius: 999px;
	background: var(--wft-green);
	color: var(--wft-white);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: var(--lh-button);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wft-search__submit:is(:hover, :focus-visible) {
	background: var(--wft-green-dark);
}

/* Desktop: die Hülle nimmt keinen Platz in der Leiste, Lupe und Panel liegen absolut an ihr */
@media (min-width: 960px) {
	.wft-header .wft-search {
		display: contents;
	}
}

/* Mobil: Lupe links neben dem Menüknopf; sie öffnet das Menü mit dem Suchfeld (theme.js),
   das Panel unter der Leiste entfällt */
@media (max-width: 959px) {
	.wft-header .wft-search {
		order: -1;
		display: flex;
	}

	.wft-header .wft-search__toggle {
		position: static;
		margin: 0;
	}

	.wft-header .wft-search__panel {
		display: none;
	}

	/* Geschrumpfter Kopf: die kleine Leiste mittig statt rechtsbündig. Links steht noch der
	   Platz des großen Logos (104 px bis zur Leiste, rechts 16 px), also um die Hälfte der
	   Differenz nach links. */
	.wft-scrolled .wft-header__inner {
		transform: translate(-44px, var(--hdr-shift));
	}
}

/* Suchfeld oben im Mobilmenü (theme.js übernimmt das Formular aus dem Kopf) */
.wft-menu-search {
	display: none;
}

.wft-mega .is-menu-open .wft-menu-search {
	display: block;
	width: 100%;
	margin-bottom: var(--sp-2);
}

.wft-mega .is-menu-open .wft-menu-search .wft-search__form {
	max-width: none;
}

/* Beim Öffnen kurz gesperrt (theme.js), damit keine Tastatur aufspringt: gleich aussehen
   lassen und den Tipp an die Hülle durchreichen, die das Feld freigibt */
.wft-menu-search :is(input, button):disabled {
	opacity: 1;
	pointer-events: none;
}

.wft-menu-search input:disabled {
	color: var(--wft-dark);
	-webkit-text-fill-color: var(--wft-dark);
}

.wft-menu-search button:disabled {
	color: var(--wft-white);
}

html.wft-drill .wft-mega .is-menu-open .wp-block-navigation__responsive-container-content:has(.wft-drilled) .wft-menu-search {
	display: none;
}

/* Suchseite: Formular unter dem Titel, Treffer ohne Bild bekommen eine ruhige Fläche */
.wft-band .wft-search-page {
	margin-top: var(--sp-3);
	max-width: 640px;
}

.wft-card__media:not(:has(img)) {
	aspect-ratio: 4 / 3;
	background: var(--wft-mint) url("../img/waves.svg?v=2") center / cover no-repeat;
}

/* Ratgeber: Suchfeld über dem Themenfilter */
.wft-ratgeber__search {
	max-width: 560px;
	margin: 0 auto var(--sp-3);
}

.wft-ratgeber__search .wft-search__input {
	padding-right: var(--sp-3);
	padding-left: calc(var(--sp-4) + var(--sp-2));
	background: var(--wft-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101B22' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") no-repeat 20px center / 20px;
}

.wft-ratgeber__search .wft-search__input:focus {
	background-color: var(--wft-white);
}

.wft-ratgeber[aria-busy="true"] .wft-ratgeber__results {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/* ---------- Reiter-Überschrift (ersetzt den Gooey-Filter) ---------- */

.is-style-tab-heading {
	--tab-r: var(--wft-r-m);
	--tab-bg: var(--wft-white);
	/* So breit wie der Text, höchstens die verfügbare Breite: lange Titel brechen um, und die
	   Fläche (theme.js) liegt immer ganz im Element */
	width: fit-content;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0 !important;
	position: relative;
	z-index: 2;
}

.is-style-tab-heading > * {
	/* border-box: theme.js gleicht Breiten per min-width an, Innenabstand zählt mit */
	box-sizing: border-box;
	margin: 0 !important;
	background: var(--tab-bg);
	color: var(--wft-dark);
}

.is-style-tab-heading > :nth-child(1 of :not(.wft-breadcrumbs)) {
	position: relative;
	z-index: 1;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--tab-r) var(--tab-r) var(--tab-r) 0;
	font-weight: 700;
}

.is-style-tab-heading > :nth-child(1 of :not(.wft-breadcrumbs)):last-child {
	border-radius: var(--tab-r);
}

.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs)) {
	position: relative;
	padding: var(--sp-1) var(--sp-3) var(--sp-2);
	border-radius: 0 0 var(--tab-r) var(--tab-r);
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: var(--lh-h3);
}

/* Die eingezogene Rundung, wo die untere Zeile an die obere stößt */
.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs))::after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: var(--tab-r);
	height: var(--tab-r);
	background: radial-gradient(circle at 100% 100%, transparent calc(var(--tab-r) - 0.5px), var(--tab-bg) var(--tab-r));
}

.is-style-tab-heading > :nth-child(n + 3 of :not(.wft-breadcrumbs)) {
	padding: 0 var(--sp-3) var(--sp-2);
	border-radius: 0 0 var(--tab-r) var(--tab-r);
}

.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs)):not(:last-child) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs)):not(:last-child)::after {
	display: none;
}

/* Schmal: die Überschrift bricht um, beide Zeilen werden eine durchgehende Fläche. */
@media (max-width: 599px) {
	.is-style-tab-heading > * {
		align-self: stretch;
	}

	.is-style-tab-heading > :nth-child(1 of :not(.wft-breadcrumbs)) {
		padding-inline: var(--sp-3);
	}

	.is-style-tab-heading > :nth-child(n + 2 of :not(.wft-breadcrumbs)) {
		padding-inline: var(--sp-3);
	}

	.is-style-tab-heading > :nth-child(1 of :not(.wft-breadcrumbs)):not(:last-child) {
		border-radius: var(--tab-r) var(--tab-r) 0 0;
	}

	.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs))::after,
	.is-style-tab-heading > :nth-child(1 of :not(.wft-breadcrumbs))::after {
		display: none;
	}
}

/* Brotkrumen als erste, kleine Zeile in der Titelfläche. Die Zeilen darunter zählen ohne
   sie (nth-child … of), Titel und Unterzeile behalten ihr Aussehen. */
/* Rechts mehr Luft als links: die Zeile endet in einer vollen Rundung, der Text darf
   nicht in die Kurve laufen */
.is-style-tab-heading > .wft-breadcrumbs {
	margin: 0 !important;
	padding: var(--sp-1h) var(--sp-4) var(--sp-0) var(--sp-3);
	border-radius: var(--tab-r) var(--tab-r) 0 0;
}

/* Die aktuelle Seite steht direkt darunter als Titel, in der Zeile reicht der Weg dorthin.
   Im Schema von Rank Math bleibt sie enthalten. */
.is-style-tab-heading > .wft-breadcrumbs li:last-child:not(:first-child) {
	display: none;
}

.is-style-tab-heading > .wft-breadcrumbs ol {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	gap: var(--sp-0) var(--sp-1);
}

.is-style-tab-heading > .wft-breadcrumbs li {
	gap: var(--sp-1);
}

.is-style-tab-heading > .wft-breadcrumbs + * {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: var(--sp-0);
}

@media (max-width: 599px) {
	.is-style-tab-heading > .wft-breadcrumbs {
		padding: var(--sp-1h) var(--sp-4) var(--sp-0) var(--sp-3);
	}


	/* Mobil: statt des ganzen Pfads nur die Ebene darüber, als Zurück-Link mit Pfeil nach
	   links. Die aktuelle Seite steht direkt darunter als Titel. Der volle Pfad bleibt im
	   Schema von Rank Math, für Suchmaschinen ändert sich nichts. */
	.is-style-tab-heading > .wft-breadcrumbs li:not(:nth-last-child(2)) {
		display: none;
	}

	.is-style-tab-heading > .wft-breadcrumbs li:nth-last-child(2) {
		max-width: 100%;
	}

	.is-style-tab-heading > .wft-breadcrumbs li:nth-last-child(2)::before {
		content: "";
		flex: none;
		width: 0.5rem;
		height: 0.75rem;
		background: currentColor;
		opacity: 0.6;
		-webkit-mask: var(--wft-crumb-chev) no-repeat center / contain;
		mask: var(--wft-crumb-chev) no-repeat center / contain;
		transform: scaleX(-1);
	}

	.is-style-tab-heading > .wft-breadcrumbs li:nth-last-child(2) a {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* Mobil kleinere Titel: lange Berufsbezeichnungen passen in zwei, drei Zeilen statt vier */
	/* 28 px ab 360 px Breite, darunter kleiner bis 24 px bei 320: sonst passt ein langes,
	   nicht trennbares Wort wie „Heimtierpfleger/-in" nicht mehr in die Zeile */
	/* Unterzeile unter dem Aufmacher-Titel: mobil eine Stufe kleiner, sonst bricht sie um */
	.is-style-tab-heading > :nth-child(2 of :not(.wft-breadcrumbs)):not(.wft-meta) {
		font-size: var(--fs-label);
		line-height: var(--lh-label);
	}

	.is-style-tab-heading > :is(h1, .wp-block-post-title, .wp-block-query-title):not(.has-hero-font-size) {
		font-size: var(--fs-h1);
		line-height: var(--lh-h1);
		letter-spacing: -0.01em;
	}

	/* !important gegen die Preset-Klasse has-hero-font-size, die WordPress mit !important ausgibt */

}

/* Wortteile wie „Tierpfleger/-in" nie am Bindestrich trennen (functions.php) */
.wft-nowrap {
	white-space: nowrap;
}

.is-style-tab-heading .wp-block-post-author-name,
.is-style-tab-heading .wp-block-post-date {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	font-weight: 400;
}

.wft-meta {
	gap: var(--sp-1) var(--sp-2) !important;
}

.wft-meta > * + *::before {
	content: "|";
	margin-right: var(--sp-2);
	color: var(--wft-green);
}

/* Fläche als Kontur (theme.js, Hintergrundbild der Überschrift): die Zeilen selbst ohne
   Hintergrund und ohne Pseudo-Ecken */
.is-style-tab-heading.wft-tab--shape > * {
	background: transparent;
}

.is-style-tab-heading.wft-tab--shape > *::before,
.is-style-tab-heading.wft-tab--shape > *::after {
	display: none;
}

/* ---------- Bilder mit versetztem Rahmen ---------- */

/*
 * Der Rahmen ist ein kleines L-Eckstück hinter dem Bild (--fr-o breit), wie im Original:
 * senkrecht ab halber Höhe (--fr-y), waagrecht über das letzte Drittel (--fr-x).
 * Wo er unter dem Bild hervorkommt, laufen Bildkante und Rahmen über eine eingezogene
 * Rundung (--fr-f) ineinander, die Enden sind um --fr-e gerundet, die äußere Ecke ist
 * konzentrisch zur Bildecke.
 */
.wp-block-image:is(.is-style-frame-right, .is-style-frame-left),
.wp-block-post-featured-image:is(.is-style-frame-right, .is-style-frame-left) {
	--frame: var(--wft-mint);
	--fr-o: var(--wft-frame-offset);
	--fr-f: 8px;
	--fr-e: calc(var(--fr-o) - var(--fr-f));
	--fr-r: var(--wft-r-l);
	--fr-y: 50%;
	--fr-x: 62%;
	--fr-R: calc(var(--fr-r) + var(--fr-o));
	--fr-fillet-a: radial-gradient(circle at 100% 0, transparent calc(var(--fr-f) - 0.5px), var(--frame) var(--fr-f));
	--fr-fillet-b: radial-gradient(circle at 0 100%, transparent calc(var(--fr-f) - 0.5px), var(--frame) var(--fr-f));
	position: relative;
	isolation: isolate;
	margin-right: var(--fr-o);
	margin-bottom: var(--fr-o);
}

.wp-block-image.is-style-frame-left,
.wp-block-post-featured-image.is-style-frame-left {
	--fr-fillet-a: radial-gradient(circle at 0 0, transparent calc(var(--fr-f) - 0.5px), var(--frame) var(--fr-f));
	--fr-fillet-b: radial-gradient(circle at 100% 100%, transparent calc(var(--fr-f) - 0.5px), var(--frame) var(--fr-f));
	margin-right: 0;
	margin-left: var(--fr-o);
}

/* Der Streifen */
.wp-block-image:is(.is-style-frame-right, .is-style-frame-left)::before,
.wp-block-post-featured-image:is(.is-style-frame-right, .is-style-frame-left)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: var(--fr-y) calc(var(--fr-o) * -1) calc(var(--fr-o) * -1) var(--fr-x);
	border-radius: 0 var(--fr-e) var(--fr-R) var(--fr-e);
	background: var(--frame);
	pointer-events: none;
}

.wp-block-image.is-style-frame-left::before,
.wp-block-post-featured-image.is-style-frame-left::before {
	inset: var(--fr-y) var(--fr-x) calc(var(--fr-o) * -1) calc(var(--fr-o) * -1);
	border-radius: var(--fr-e) 0 var(--fr-e) var(--fr-R);
}

/* Die zwei eingezogenen Rundungen am Übergang Bild/Rahmen. Die Fläche beginnt eine
   Rundungsbreite vor dem Rahmen, so sitzen beide Rundungen genau an ihren Ecken. */
.wp-block-image:is(.is-style-frame-right, .is-style-frame-left)::after,
.wp-block-post-featured-image:is(.is-style-frame-right, .is-style-frame-left)::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(var(--fr-y) - var(--fr-f)) calc(var(--fr-o) * -1) calc(var(--fr-o) * -1) calc(var(--fr-x) - var(--fr-f));
	background:
		var(--fr-fillet-a) right calc(var(--fr-o) - var(--fr-f)) top 0 / var(--fr-f) var(--fr-f) no-repeat,
		var(--fr-fillet-b) left 0 bottom calc(var(--fr-o) - var(--fr-f)) / var(--fr-f) var(--fr-f) no-repeat;
	pointer-events: none;
}

.wp-block-image.is-style-frame-left::after,
.wp-block-post-featured-image.is-style-frame-left::after {
	inset: calc(var(--fr-y) - var(--fr-f)) calc(var(--fr-x) - var(--fr-f)) calc(var(--fr-o) * -1) calc(var(--fr-o) * -1);
	background:
		var(--fr-fillet-a) left calc(var(--fr-o) - var(--fr-f)) top 0 / var(--fr-f) var(--fr-f) no-repeat,
		var(--fr-fillet-b) right 0 bottom calc(var(--fr-o) - var(--fr-f)) / var(--fr-f) var(--fr-f) no-repeat;
}

.wp-block-image:is(.is-style-frame-right, .is-style-frame-left) img,
.wp-block-post-featured-image:is(.is-style-frame-right, .is-style-frame-left) img {
	display: block;
	width: 100%;
	border-radius: var(--fr-r);
}

/* Auf grünem Grund wird der Rahmen weiß */
.has-mint-background-color :is(.is-style-frame-right, .is-style-frame-left) {
	--frame: var(--wft-white);
}

/* ---------- Überschrift mit Farbfläche ---------- */

.wp-block-heading.is-style-blob {
	position: relative;
	z-index: 0;
	margin-top: var(--sp-6);
}

.wp-block-heading.is-style-blob::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(var(--sp-2) * -1);
	top: calc(var(--sp-4) * -1);
	width: 5.5rem;
	height: 5.5rem;
	border-radius: var(--wft-r-m);
	background: var(--wft-mint);
	transform: rotate(-19deg);
}

.has-mint-background-color .wp-block-heading.is-style-blob::before {
	background: var(--wft-white);
}

/* Mobil liegt die Überschrift nur 16 px vom Rand: kleinere Form, die nicht angeschnitten wird */
@media (max-width: 781px) {
	.wp-block-heading.is-style-blob::before {
		/* gedreht ragt das Quadrat knapp 10 px über seine Box hinaus */
		left: 0;
		top: calc(var(--sp-3) * -1);
		width: 4.5rem;
		height: 4.5rem;
	}
}

/* ---------- Pfeil-Link ---------- */

.wp-block-button.is-style-arrow .wp-block-button__link,
.wp-block-read-more.is-style-arrow,
p.wft-card__more a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) 0;
	border-radius: var(--wft-r-s);
	background: transparent;
	color: var(--wft-dark);
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: var(--lh-button);
	text-decoration: none;
	transition: color 0.25s ease;
}

.wp-block-read-more.is-style-arrow,
p.wft-card__more a {
	font-size: var(--fs-button);
}

.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-read-more.is-style-arrow::after,
p.wft-card__more a::after {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--wft-arrow) no-repeat right center / contain;
	mask: var(--wft-arrow) no-repeat right center / contain;
	transition: transform 0.35s var(--wft-ease);
}

.wp-block-read-more.is-style-arrow::after,
p.wft-card__more a::after {
	width: 2.5rem;
	height: 0.75rem;
}

.wp-block-button.is-style-arrow .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-read-more.is-style-arrow:is(:hover, :focus-visible),
p.wft-card__more a:is(:hover, :focus-visible) {
	background: transparent;
	/* Text bleibt dunkel, nur der Pfeil rückt vor */
	color: var(--wft-dark);
	text-decoration: none;
}

.wp-block-button.is-style-arrow .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-read-more.is-style-arrow:is(:hover, :focus-visible)::after {
	transform: translateX(var(--sp-1));
}

.wp-block-button.is-style-arrow.wft-button-filled .wp-block-button__link {
	padding: var(--sp-2) var(--sp-4);
	background: var(--wft-mist);
	font-size: var(--fs-button);
	border-radius: var(--wft-r-m);
}

.wp-block-button.is-style-arrow.wft-button-filled .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wft-mist-dark);
	color: var(--wft-dark);
}

.wp-block-button.is-style-arrow.wft-button-filled .wp-block-button__link::after {
	width: 2.5rem;
}

.wft-more {
	margin-top: var(--sp-5) !important;
}

/* ---------- Karte und Hinweisbox ---------- */

.wp-block-group.is-style-card,
.wft-teaser--dynamic {
	border-radius: var(--wft-r-l);
	overflow: hidden;
}

/* WordPress gibt jeder Gruppe mit Hintergrund 1.25em/2.375em Innenabstand.
   Karten und Teaser setzen ihre Abstände selbst, Bilder laufen bis zum Rand. */
.wp-block-group.wft-card__body.has-background,
.wp-block-group.wft-teaser.has-background {
	padding: 0;
}

.wft-cta {
	padding: var(--sp-6) var(--sp-5);
}

.wft-cta .wp-block-columns {
	gap: var(--sp-5);
}

.wft-cta .wp-block-heading {
	margin-bottom: var(--sp-2);
}

.wft-cta p {
	max-width: 36ch;
}

.wft-cta .wp-block-buttons {
	margin-top: var(--sp-3);
}

/* Logos und Icons bleiben unangetastet: keine Fotorundung, kein Bewegungseffekt.
   Die 24-px-Rundung aus theme.json ist für Fotos gedacht und schnitt hier Ecken ab. */
.wp-block-image img[src$=".svg"],
.wft-cta__icon img,
.wft-footer__logo img {
	border-radius: 0;
}

/* Artikel-Karten */
.wft-cards .wp-block-post-template {
	gap: var(--sp-3);
}

@media (max-width: 959px) {
	.wft-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.wft-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Karte = Körper plus Lasche unten rechts (wie im Original), der Ansatz der Lasche
 * ist eingezogen gerundet. Der Schatten folgt per drop-shadow der ganzen Form.
 */
.wft-card {
	--card-r: var(--wft-r-l);
	--card-bg: var(--wft-mist);
	position: relative;
	height: 100%;
	gap: 0 !important;
	transition: transform 0.4s var(--wft-ease), filter 0.4s var(--wft-ease);
}

/* Beim Überfahren hebt sich die Karte nach links oben und lässt eine klare, dunklere Kopie
   ihrer Form zurück, versetzt wie die Bildrahmen. Ohne Unschärfe, damit nichts
   verwaschen wirkt. drop-shadow folgt auch Lasche und eingezogener Rundung. */
.wft-card {
	filter: drop-shadow(0 0 0 var(--wft-mist-dark));
}

.wft-card:hover,
.wft-card:focus-within {
	transform: translate(-4px, -4px);
	filter: drop-shadow(8px 8px 0 var(--wft-mist-dark));
}

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

.wft-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	border-radius: var(--card-r) var(--card-r) 0 var(--card-r);
	overflow: hidden;
}

.wft-card__media {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
}

.wft-card__image {
	margin: 0 !important;
}

.wft-card__image img {
	border-radius: 0;
	transition: transform 0.6s var(--wft-ease);
}

.wft-card:hover .wft-card__image img {
	transform: scale(1.04);
}

.wft-badge {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: 600;
	line-height: var(--lh-micro);
}

.wft-badge a,
.wft-badge .wp-block-post-terms__separator {
	display: none;
}

.wft-badge a:first-of-type {
	display: inline-block;
	position: relative;
	z-index: 2;
	padding: var(--sp-0) var(--sp-1h);
	border-radius: var(--wft-r-s);
	background: var(--wft-mint);
	color: var(--wft-dark);
	text-decoration: none;
}

.wft-badge a:first-of-type:hover {
	background: var(--wft-white);
	text-decoration: none;
}

.wft-card__badge {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
}

.wft-card__title {
	margin: 0 !important;
	padding: var(--sp-3) var(--sp-3) var(--sp-2);
	font-size: var(--fs-title);
	line-height: var(--lh-title);
}

.wft-card__title a {
	color: var(--wft-dark);
	text-decoration: none;
}

.wft-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wft-card__title a:hover {
	text-decoration: none;
}

/* Die Lasche: Weiterlesen-Block (Beitragskarten) oder Absatz mit Link (Linkkarten auf Seiten) */
.wp-block-read-more.wft-card__more,
p.wft-card__more {
	position: relative;
	z-index: 2;
	align-self: flex-end;
	margin: 0 !important;
	padding: var(--sp-1h) var(--sp-3) var(--sp-2);
	border-radius: 0 0 var(--card-r) var(--card-r);
	background: var(--card-bg);
}

.wp-block-read-more.wft-card__more:is(:hover, :focus-visible) {
	background: var(--card-bg);
}

/* Eingezogene Rundung links am Ansatz der Lasche */
.wp-block-read-more.wft-card__more::before,
p.wft-card__more::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: var(--card-r);
	height: var(--card-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--card-r) - 0.5px), var(--card-bg) var(--card-r));
	pointer-events: none;
}

.wft-card:hover .wft-card__more::after {
	transform: translateX(var(--sp-1));
}

/* Teaser: Bild links, Text rechts */
.wft-teaser__grid {
	gap: 0 !important;
	align-items: stretch !important;
}

.wft-teaser__media {
	align-self: stretch;
}

.wft-teaser__media .wp-block-image,
.wft-teaser__media .wp-block-image a {
	display: block;
	height: 100%;
	margin: 0;
}

.wft-teaser__media img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	border-radius: 0;
}

.wft-teaser__text {
	padding: var(--sp-5);
}

.wft-teaser__text .wp-block-heading {
	margin-bottom: var(--sp-2);
}

.wft-teaser__text .wp-block-heading a {
	color: var(--wft-dark);
}

.wft-teaser__text .wp-block-heading a:hover {
	text-decoration: none;
}

.wft-teaser + .wft-teaser {
	margin-top: var(--sp-5);
}

/* Block „Beitrag hervorheben": gleiche Karte, eigenes Raster statt Spalten-Block */
.wft-teaser--dynamic .wft-teaser__grid {
	display: grid;
	grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
}

.wft-teaser--dynamic .wft-teaser__grid:not(:has(.wft-teaser__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.wft-teaser--dynamic .wft-teaser__media a {
	display: block;
	height: 100%;
}

.wft-teaser--dynamic .wft-teaser__text {
	align-self: center;
}

.wft-teaser--dynamic .wft-teaser__text > * {
	margin: 0;
}

.wft-teaser--dynamic .wft-teaser__text > * + * {
	margin-top: var(--sp-2);
}

.wft-teaser--dynamic .wft-teaser__more {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--sp-3);
}

@media (max-width: 781px) {
	.wft-teaser--dynamic .wft-teaser__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Auswahlfeld im Editor, direkt über der Vorschau */
.wft-teaser-picker {
	margin-bottom: var(--sp-2);
	padding: var(--sp-2);
	border-radius: var(--wft-r-s);
	background: var(--wft-white);
	box-shadow: 0 0 0 1px var(--wft-mist);
}

/* ---------- Aufmacher (Startseite und Ratgeber) ---------- */

.wft-hero {
	padding-block: calc(var(--wft-header-h) + var(--sp-6)) calc(var(--sp-7) + var(--sp-4));
}

.wft-hero__grid {
	gap: var(--sp-5) !important;
}

/* Einleitung unter der Reiter-Überschrift: eine Stufe größer als Fließtext (20/32),
   24 px Abstand wie die Innenkante des Reiters, und links bündig mit dessen Text.
   So stehen H1 48, Unterzeile 24, Einleitung 20 in einer ruhigen Treppe. */
.wft-hero__lead {
	max-width: 32ch;
	margin-top: var(--sp-3) !important;
	margin-left: var(--sp-3) !important;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

@media (max-width: 599px) {
	.wft-hero__lead {
		margin-left: var(--sp-2) !important;
	}
}

@media (min-width: 1024px) {
	/* Der Titel darf 9rem über das Video ragen, bricht aber um, statt darüber hinauszulaufen */
	.wft-hero__text .is-style-tab-heading {
		max-width: calc(100% + 9rem);
		margin-right: -9rem !important; /* geo: Titel ragt über das Video */
	}
}

.wft-story .wft-row + .wft-row {
	margin-top: var(--sp-7);
}

.wft-row {
	gap: var(--sp-7) !important;
}

.wft-row__text {
	max-width: 34rem;
}

.wft-row__text p {
	margin-top: var(--sp-2);
}

@media (max-width: 781px) {
	.wft-row {
		gap: var(--sp-4) !important;
	}

	.wft-row--reverse {
		flex-direction: column-reverse;
	}

	.wft-hero__text .is-style-tab-heading {
		margin-right: 0 !important;
	}
}

/* Video-Vorschau */
.wft-video a {
	position: relative;
	display: block;
	border-radius: var(--wft-r-l);
}

/* Play-Knopf unten rechts in der Ecke, dort wo der Rahmen das Bild umfasst */
.wft-video a::after {
	content: "";
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-3);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	/* schlicht im Logo-Grün, ohne Rand */
	background: var(--wft-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") no-repeat 56% 50% / 32px;
	transition: transform 0.35s var(--wft-ease), background-color 0.25s ease;
}

@media (max-width: 781px) {
	.wft-video a::after {
		right: var(--sp-2);
		bottom: var(--sp-2);
		width: 56px;
		height: 56px;
		background-size: 24px;
	}
}

.wft-video a:is(:hover, :focus-visible)::after {
	background-color: var(--wft-green-dark);
	transform: scale(1.08);
}

.wft-lightbox {
	width: min(1104px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: var(--wft-r-m);
	background: var(--wft-dark);
	overflow: visible;
}

.wft-lightbox::backdrop {
	background: rgba(var(--wft-dark-rgb), 0.86);
}

.wft-lightbox__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wft-r-m);
}

.wft-lightbox__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--wft-white);
	color: var(--wft-dark);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	cursor: pointer;
}

.wft-lightbox__close:hover,
.wft-lightbox__close:focus-visible {
	background: var(--wft-mint);
}

/* ---------- Ratgeber-Liste (Block wirfuerstier/ratgeber-liste) ---------- */

.wft-ratgeber {
	transition: opacity 0.25s ease;
}

.wft-ratgeber[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.wft-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-1) var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.wft-filter a {
	position: relative;
	display: inline-block;
	padding: var(--sp-1) 0;
	color: var(--wft-dark);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: var(--lh-small);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wft-filter a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--wft-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--wft-ease);
}

.wft-filter a:hover,
.wft-filter a:focus-visible,
.wft-filter a[aria-current="true"] {
	color: var(--wft-green-dark);
	text-decoration: none;
}

.wft-filter a:hover::after,
.wft-filter a:focus-visible::after,
.wft-filter a[aria-current="true"]::after {
	transform: scaleX(1);
}

.wft-filter a[aria-current="true"] {
	font-weight: 600;
}

.wft-ratgeber__empty {
	text-align: center;
}

/* Der Knopf selbst trägt wp-element-button und damit den Knopfstil aus theme.json. */
.wft-ratgeber__more {
	display: flex;
	justify-content: center;
}

.wft-ratgeber__more:has(a) {
	margin-top: var(--sp-5);
}

.wft-ratgeber__more .wp-element-button {
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* Nur für Bildschirmleser */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Artikelseite ---------- */

.wft-band--single .wft-badge {
	display: flex;
	margin-bottom: var(--sp-2) !important;
}

.wft-band .wft-badge a:first-of-type {
	background: var(--wft-white);
}

.wft-band .wft-badge a:first-of-type:hover {
	background: var(--wft-mist);
}

/* Das Beitragsbild ragt in die Wellenfläche hinein, etwa bis zur halben Bildhöhe.
   position und z-index, weil die Fläche durch ihre Maske über normalen Blöcken läge. */
.wft-band--single {
	--wft-media-overlap: clamp(80px, 18vw, 260px);
	padding-bottom: calc(var(--wft-media-overlap) + var(--sp-5)) !important;
}

/* Titel, Kategorie und großes Bild auf einer linken Kante, alles in voller Inhaltsbreite
   (1120, wie die breiten Bilder im Text) */
.wft-band.wft-band--single > * {
	max-width: var(--wp--style--global--wide-size);
}

.wft-single__media {
	position: relative;
	z-index: 1;
	margin-top: calc(clamp(80px, 18vw, 260px) * -1) !important; /* geo: Bild ragt in die Welle */
}

.wft-single__media :is(.wp-block-post-featured-image, .wp-block-image) {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Seiten mit altem Elementor-Inhalt: keine Lücke zwischen Kopf und erstem Bereich */
.wft-main--no-title .elementor > .e-con:first-child,
.wft-main--no-title .elementor > .elementor-section:first-child {
	margin-top: 0 !important;
}

/*
 * Seitenkopf der Elementor-Seiten (erster Bereich mit H1, meist Mint mit Brotkrumen,
 * Titel und hineinragendem Bild): bekommt dieselbe Wellenfläche wie Aufmacher und Band.
 * Die Fläche rutscht unter den klebenden Kopf und endet in der Wellenkante. Titel und
 * Brotkrumen folgen den Maßen der Theme-Reiter (40/48, Innenabstand 8/24, Radius 16).
 * Nur CSS: der Elementor-Inhalt bleibt unverändert, bis die Seiten umgebaut sind.
 */
.wft-main--no-title .elementor > :is(.e-con, .elementor-section):first-child:has(h1) {
	margin-top: calc(var(--wft-header-h) * -1) !important;
	padding-top: calc(var(--wft-header-h) + var(--sp-5)) !important;
	/* 80 statt 48: das folgende Bild ragt 100 px hinein, so bleiben rund 32 px Luft unter dem Titel */
	padding-bottom: calc(var(--sp-5) + var(--sp-4)) !important;
	background: var(--wft-mint) url("../img/waves.svg?v=2") center top / cover no-repeat !important;
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 63px) no-repeat,
		url("../img/wave-edge.svg") bottom / 100% 64px no-repeat;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 63px) no-repeat,
		url("../img/wave-edge.svg") bottom / 100% 64px no-repeat;
}

/* Das hineinragende Bild liegt über der Fläche (die Maske hebt sie sonst darüber) */
.wft-main--no-title .elementor > :is(.e-con, .elementor-section):first-child:has(h1) + * {
	position: relative;
	z-index: 1;
}

/* Der Reiter ist so breit wie sein Titel (Elementor gab ihm eine feste Breite, lange
   Titel brachen deshalb nach einem Wort um) */
.wft-main--no-title .elementor > :first-child:has(h1) .elementor-widget-heading:has(h1) {
	width: fit-content !important;
	max-width: 100% !important;
	padding: var(--sp-1) var(--sp-3) !important;
	border-radius: var(--wft-r-m) !important;
}

.wft-main--no-title .elementor > :first-child:has(h1) h1.elementor-heading-title {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
	letter-spacing: -0.02em;
	/* pretty statt balance: balance brach lange Titel mitten in „/-in" um */
	text-wrap: pretty;
	hyphens: manual;
}

.wft-main--no-title .elementor > :first-child:has(h1) .elementor-widget-icon-list {
	margin-bottom: var(--sp-2) !important;
}

.wft-main--no-title .elementor > :first-child:has(h1) .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Knöpfe aus Elementor (z. B. Flyer-Downloads) wie die Theme-Knöpfe: Mist, Radius 16,
   12/24, Barlow 18 halbfett; beim Überfahren eine Stufe dunkler */
/* !important: Elementor schreibt Farben und Abstände je Element mit höherer Spezifität */
.wft-main .elementor-widget-button .elementor-button {
	padding: var(--sp-1h) var(--sp-3) !important;
	border-radius: var(--wft-r-m) !important;
	background: var(--wft-mist) !important;
	color: var(--wft-dark) !important;
	font-family: var(--wp--preset--font-family--barlow) !important;
	font-size: var(--fs-button) !important;
	font-weight: 600 !important;
	line-height: var(--lh-button) !important;
	transition: background-color 0.2s ease;
}

.wft-main .elementor-widget-button .elementor-button:is(:hover, :focus-visible) {
	background: var(--wft-mist-dark) !important;
}

.wft-main .elementor-widget-button .elementor-button-icon svg {
	fill: currentColor;
}

/* Lange Adressen und Elementor-Formteiler dürfen die Seite nicht seitlich verbreitern */
.wft-main {
	overflow-x: clip;
}

.wft-main :is(.elementor-widget-text-editor, .wft-content) {
	overflow-wrap: break-word;
}

@media (max-width: 781px) {
	.wft-main--no-title .elementor > :first-child:has(h1) h1.elementor-heading-title {
		hyphens: auto;
	}

	.wft-main--no-title .elementor > :is(.e-con, .elementor-section):first-child:has(h1) {
		padding-top: calc(var(--wft-header-h) + var(--sp-4)) !important;
		-webkit-mask-size: 100% calc(100% - 31px), 100% 32px;
		mask-size: 100% calc(100% - 31px), 100% 32px;
	}
}

/* ---------- Fußbereich ---------- */

.wft-footer {
	padding: 0 var(--sp-1) var(--sp-1);
}

@media (min-width: 782px) {
	.wft-footer {
		padding: 0 var(--sp-2) var(--sp-2);
	}
}

/* So breit wie Kopfleiste und Bilder (1120), die Fläche wächst nicht mit dem Fenster */
.wft-footer .wft-footer__panel.alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	padding: var(--sp-6) var(--sp-5) var(--sp-3);
	border-radius: var(--wft-r-l);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.wft-footer__panel > * {
	max-width: none !important;
}

/*
 * Logos in Reitern, die oben aus der Fläche ragen, mit eingezogenen Rundungen wie bei den
 * Titelflächen. Der erste Reiter sitzt bündig an der linken Kante und setzt deren Rundung
 * fort. Mobil (Spalten untereinander) nur der erste.
 */
.wft-footer {
	--wft-foot-tab: 48px;
	margin-top: calc(var(--wft-foot-tab) + var(--sp-3));
}

.wft-footer__columns > .wp-block-column:first-child .wft-footer__logo {
	position: relative;
	box-sizing: content-box;
	width: fit-content;
	margin: calc((var(--sp-6) + var(--wft-foot-tab)) * -1) 0 var(--sp-4) calc(var(--sp-5) * -1) !important;
	padding: var(--sp-4) var(--sp-3) 0 var(--sp-5);
	border-radius: var(--wft-r-l) var(--wft-r-l) 0 0;
	background: var(--wft-dark);
}

.wft-footer .wft-footer__panel.alignwide:has(.wft-footer__columns) {
	border-top-left-radius: 0;
}

/* Eingezogene Rundung rechts am Reiter, auf Höhe der Oberkante der Fläche */
.wft-footer__columns > .wp-block-column:first-child .wft-footer__logo::after {
	content: "";
	position: absolute;
	top: calc(var(--wft-foot-tab) - 16px);
	right: -16px;
	width: 16px;
	height: 16px;
	background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--wft-dark) 16px);
	pointer-events: none;
}

/*
 * Desktop: ein durchgehender Reiter von der linken Kante bis hinter das letzte Logo
 * (my-fish, dritte Spalte), erst dort die eingezogene Rundung. Der Reiter des letzten
 * Logos zieht dafür einen Streifen nach links; die Fläche schneidet ihn an ihrer linken
 * Kante ab und rundet dort die Ecke (clip-path mit round).
 */
@media (min-width: 782px) {
	.wft-footer .wft-footer__panel.alignwide:has(.wft-footer__columns) {
		clip-path: inset(calc(var(--wft-foot-tab) * -1) 0 0 0 round var(--wft-r-l));
	}

	.wft-footer__columns > .wp-block-column:first-child .wft-footer__logo {
		background: transparent;
	}

	.wft-footer__columns > .wp-block-column:first-child .wft-footer__logo::after {
		content: none;
	}

	.wft-footer__columns > .wp-block-column:is(:nth-child(2), :nth-child(3)) .wft-footer__logo {
		position: relative;
		box-sizing: content-box;
		width: fit-content;
		margin: calc((var(--sp-6) + var(--wft-foot-tab)) * -1) 0 var(--sp-4) calc(var(--sp-3) * -1) !important;
		padding: var(--sp-4) var(--sp-3) 0;
	}

	.wft-footer__columns > .wp-block-column:nth-child(3) .wft-footer__logo {
		padding-right: var(--sp-4);
		border-radius: 0 var(--wft-r-l) 0 0;
		background: var(--wft-dark);
	}

	/* Streifen nach links bis zur Kante, hinter den anderen Logos */
	.wft-footer__columns > .wp-block-column:nth-child(3) .wft-footer__logo::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		right: 100%;
		width: 100vw;
		height: 100%;
		background: var(--wft-dark);
		pointer-events: none;
	}

	.wft-footer__columns > .wp-block-column:nth-child(3) .wft-footer__logo::after {
		content: "";
		position: absolute;
		top: calc(var(--wft-foot-tab) - 16px);
		right: -16px;
		width: 16px;
		height: 16px;
		background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--wft-dark) 16px);
		pointer-events: none;
	}
}

.wft-footer__columns {
	gap: var(--sp-5) !important;
}

/* Logos auf eine gemeinsame Höhe, damit die drei Spalten auf einer Linie beginnen */
.wft-footer__logo {
	display: flex;
	align-items: flex-end;
	height: 48px;
	margin-bottom: var(--sp-3) !important;
}

.wft-footer__logo img {
	width: auto !important;
	max-width: 100%;
	max-height: 48px;
}

.wft-footer__lead {
	margin-bottom: var(--sp-1) !important;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--fs-label);
	font-weight: 600;
	line-height: var(--lh-label);
}

.wft-footer__columns .wp-block-column > p:not(.wft-footer__lead) {
	color: rgba(255, 255, 255, 0.78);
}

.wft-footer .wft-footer__panel a {
	color: var(--wft-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 4px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.wft-footer .wft-footer__panel a:hover,
.wft-footer .wft-footer__panel a:focus-visible {
	color: var(--wft-mint);
	text-decoration-color: currentColor;
}

.wft-footer .wft-footer__logo a {
	text-decoration: none;
}

.wft-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wft-footer__menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.wft-footer .wft-footer__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-1h) 0;
	font-weight: 600;
	text-decoration: none;
}

.wft-footer .wft-footer__menu a::after {
	content: "";
	width: 1.5rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--wft-arrow) no-repeat right center / contain;
	mask: var(--wft-arrow) no-repeat right center / contain;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.2s ease, transform 0.3s var(--wft-ease);
}

.wft-footer .wft-footer__menu a:is(:hover, :focus-visible)::after {
	opacity: 1;
	transform: translateX(0);
}

/* Social-Icons als runde Knöpfe */
.wft-footer__social {
	margin-top: var(--sp-3) !important;
	gap: var(--sp-1) !important;
}

.wft-footer__social .wp-social-link {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.wft-footer__social .wp-social-link a {
	padding: var(--sp-1);
}

.wft-footer__social .wp-social-link:hover,
.wft-footer__social .wp-social-link:focus-within {
	background: var(--wft-mint);
	color: var(--wft-dark) !important;
	transform: none;
}

.wft-footer__social .wp-social-link:hover svg,
.wft-footer__social .wp-social-link:focus-within svg {
	fill: var(--wft-dark);
}

.wft-footer__bottom {
	margin-top: var(--sp-6) !important;
	padding-top: var(--sp-3);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
}

.wft-footer__bottom p {
	margin: 0;
}

.wft-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
}

/* Mindestens 24 px hohe Tippfläche (WCAG 2.2, Zielgröße) */
.wft-footer__legal a {
	display: inline-block;
	padding-block: var(--sp-0);
}

/* Seitenzahlen der Suche und des Archivs: runde Tippflächen statt nackter Ziffern */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--sp-1);
	border-radius: 999px;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wft-mint);
	font-weight: 600;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	background: var(--wft-mist-dark);
}

/* ---------- Kleinere Bildschirme ---------- */

@media (max-width: 781px) {
	.wft-cta .wft-cta__icon img {
		width: 136px !important;
	}

	.wft-teaser__media img {
		min-height: 224px;
		max-height: 296px;
	}

	.wft-teaser__text {
		padding: var(--sp-4) var(--sp-3);
	}
}

/* ---------- Bausteine für Inhaltsseiten ---------- */

/* Brotkrumen (Block wirfuerstier/breadcrumbs, Pfad aus Rank Math) */
.wft-breadcrumbs {
	--wft-crumb-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	margin-bottom: var(--sp-2);
}

.wft-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.wft-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

.wft-breadcrumbs li + li::before {
	content: "";
	width: 0.5rem;
	height: 0.75rem;
	background: currentColor;
	opacity: 0.6;
	-webkit-mask: var(--wft-crumb-chev) no-repeat center / contain;
	mask: var(--wft-crumb-chev) no-repeat center / contain;
}

.wft-breadcrumbs a {
	color: var(--wft-dark);
	text-decoration: none;
}

.wft-breadcrumbs a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wft-breadcrumbs [aria-current] {
	color: rgba(var(--wft-dark-rgb), 0.72);
}

/* Aufzählung mit Mint-Punkten (Listen-Stil „dots") */
.wp-block-list.is-style-dots {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-dots > li {
	position: relative;
	padding-left: var(--sp-4);
}

.wp-block-list.is-style-dots > li + li {
	margin-top: var(--sp-1);
}

.wp-block-list.is-style-dots > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(0.7778em - 6px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wft-mint);
}

/* Checkliste zum Abhaken (Listen-Stil „checklist"): theme.js setzt vor jeden Punkt ein
   Kästchen und darunter den Stand „3 von 22 erledigt". Ohne JavaScript steht ein leeres
   Kästchen als Zeichen davor. Ersetzt den früheren Lazy-Blocks-Block. */
.wp-block-list.is-style-checklist {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-checklist > li + li {
	margin-top: var(--sp-1);
}

.wp-block-list.is-style-checklist:not(.wft-checklist--ready) > li {
	position: relative;
	padding-left: var(--sp-4);
}

.wp-block-list.is-style-checklist:not(.wft-checklist--ready) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.7778em - 10px);
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wft-mist-dark);
	border-radius: var(--wft-r-s);
}

.wft-checklist--ready label {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-1h);
	cursor: pointer;
}

.wft-checklist--ready input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: var(--sp-0) 0 0;
	accent-color: var(--wft-green);
	cursor: pointer;
}

.wft-checklist--ready input:checked + span {
	color: rgba(var(--wft-dark-rgb), 0.6);
	text-decoration: line-through;
}

.wft-checklist__status {
	margin-top: var(--sp-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	font-weight: 600;
	color: var(--wft-green-dark);
}

/* Statische Karten: kleines Etikett über dem Titel und Kurztext unter dem Titel */
.wft-card__body > .wft-card__kicker {
	margin: var(--sp-3) var(--sp-3) 0 !important;
	color: var(--wft-green-dark);
	font-size: var(--fs-caption);
	font-weight: 600;
	line-height: var(--lh-caption);
}

.wft-card__kicker + .wft-card__title {
	padding-top: var(--sp-1);
}

.wft-card__body > p:not(.wft-card__kicker) {
	margin: 0 !important;
	padding: 0 var(--sp-3) var(--sp-3);
}

/* Kartenbild füllt die ganze Kartenbreite */
.wft-card .wft-card__image,
.wft-card .wft-card__image img {
	width: 100%;
}

/* Video ohne Vorschaubild: ruhige Fläche mit Titel und Play-Knopf, YouTube lädt erst nach dem Klick */
.wft-video--panel {
	margin-block: var(--sp-5);
}

.wft-video--panel p {
	margin: 0;
}

.wft-video--panel a {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 9;
	padding: var(--sp-4) calc(80px + var(--sp-5)) var(--sp-4) var(--sp-4); /* geo: Play-Knopf 80 */
	border-radius: var(--wft-r-l);
	background: var(--wft-mint) url("../img/waves.svg?v=2") center / cover no-repeat;
	color: var(--wft-dark);
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--fs-title);
	font-weight: 600;
	line-height: var(--lh-title);
	text-decoration: none;
}

/* Linkkarten (statische Karten auf Seiten) und Hinweisboxen im Raster */
.wft-link-cards,
.wft-boxes {
	gap: var(--sp-3) !important;
}

@media (max-width: 959px) {
	.wft-link-cards.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 781px) {
	.wft-boxes.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 599px) {
	.wft-link-cards.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Abstände der breiten Elemente im Fließtext der Seiten */
.wft-content > :is(.wp-block-columns, .wft-link-cards, .wft-boxes, .wp-block-query, .wft-cta) {
	margin-block: var(--sp-5) !important;
}

/*
 * Großes Bild oben bei Beiträgen und Seiten: weißer Rahmen wie ein Abzug, dazu nur ein
 * knapper Schatten. Der weiche, lange Schatten lief sonst über die Bildunterschrift.
 */
.wft-single__media :is(.wp-block-post-featured-image, .wp-block-image) img,
.wft-single__media .wft-ai-wrap {
	box-sizing: border-box;
	border: 6px solid var(--wft-white);
	box-shadow: 0 6px 14px -8px rgba(var(--wft-dark-rgb), 0.28);
}

/* Unterschrift in der Großansicht (theme.js), unten mittig über dem Overlay des Kerns */
.wft-lightbox-caption {
	position: fixed;
	left: 50%;
	bottom: var(--sp-3);
	z-index: 100001;
	box-sizing: border-box;
	width: max-content;
	max-width: min(640px, calc(100% - var(--sp-4)));
	margin: 0;
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--wft-r-m);
	background: var(--wft-white);
	color: var(--wft-dark);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, var(--sp-1));
	transition: opacity 0.2s ease, transform 0.25s var(--wft-ease), visibility 0s linear 0.2s;
	pointer-events: none;
}

.wft-lightbox-caption.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0.15s;
}

/*
 * Bildunterschrift im Bild: weißer Reiter in der Ecke unten rechts, mit eingezogenen
 * Rundungen zum Bild hin (wie bei den Titelflächen). Die Fläche hat die Farbe des
 * Seitengrunds, der Reiter wirkt wie aus dem Bild ausgeschnitten.
 */
:is(.wft-single__media, .wft-content) figure:is(.wp-block-image, .wp-block-post-featured-image):has(> figcaption:not(:empty)) {
	position: relative;
}

:is(.wft-single__media, .wft-content) figure:is(.wp-block-image, .wp-block-post-featured-image) > figcaption:not(:empty) {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	box-sizing: border-box;
	max-width: min(72%, 640px);
	margin: 0 !important;
	padding: var(--sp-1h) var(--sp-3) var(--sp-2);
	/* Unten rechts eckig: so deckt der Reiter die Bildrundung ganz ab, ohne dass deren
	   Kante durchschimmert */
	border-top-left-radius: var(--wft-r-m);
	background: var(--wft-white);
	text-align: left;
}

/* Kopfbild mit weißem Rahmen: Ecke rund wie der Rahmen, dazu dessen kurzer Schatten */
.wft-single__media figure > figcaption:not(:empty) {
	border-bottom-right-radius: var(--wft-r-l);
	box-shadow: 0 6px 14px -8px rgba(var(--wft-dark-rgb), 0.28);
}

/* Eingezogene Rundung links vom Reiter an der unteren Bildkante. Über dem Reiter keine:
   dort läuft die Bildkante gerade in den Reiter, wie der Rahmen. */
:is(.wft-single__media, .wft-content) figure:is(.wp-block-image, .wp-block-post-featured-image) > figcaption:not(:empty)::after {
	content: "";
	position: absolute;
	width: var(--wft-r-m);
	height: var(--wft-r-m);
	background: radial-gradient(circle at 0 0, transparent calc(var(--wft-r-m) - 0.5px), var(--wft-white) var(--wft-r-m));
	pointer-events: none;
}

:is(.wft-single__media, .wft-content) figure:is(.wp-block-image, .wp-block-post-featured-image) > figcaption:not(:empty)::after {
	right: 100%;
	bottom: 0;
}

/* Breitbilder mit Unterschrift am Desktop etwas höher, damit der Reiter Platz hat */
@media (min-width: 600px) {
	.wft-single__media figure:has(> figcaption:not(:empty)) img,
	.wft-content figure.wft-img--wide:has(> figcaption:not(:empty)) img {
		height: auto !important;
		aspect-ratio: 16 / 7;
		object-fit: cover;
	}
}

/* Mobil: Bilder mit Unterschrift quadratisch, sonst deckt der Reiter zu viel ab */
@media (max-width: 599px) {
	:is(.wft-single__media, .wft-content) figure:has(> figcaption:not(:empty)) img {
		aspect-ratio: 1 / 1 !important;
	}

	:is(.wft-single__media, .wft-content) figure:is(.wp-block-image, .wp-block-post-featured-image) > figcaption:not(:empty) {
		max-width: 88%;
		padding: var(--sp-1h) var(--sp-2) var(--sp-1h);
	}
}

/* Mobil wäre das Breitformat nur ein Streifen: dort 4:3, zugeschnitten auf die Mitte.
   Im Text nur Breitbilder (functions.php setzt wft-img--wide), per Klick gibt es das
   ganze Bild in der Lightbox. */
@media (max-width: 599px) {
	.wft-single__media :is(.wp-block-post-featured-image, .wp-block-image) img,
	.wft-content .wft-img--wide img {
		height: auto !important;
		aspect-ratio: 4 / 3 !important;
		object-fit: cover;
	}

	/* Die Lightbox des Kerns übernimmt den sichtbaren Ausschnitt (4:3 oder quadratisch).
	   Sie soll aber das ganze Bild zeigen: volle Breite, Höhe aus dem Bild selbst. */
	.wp-lightbox-overlay .lightbox-image-container {
		width: calc(100vw - 32px) !important;
		height: auto !important;
	}

	.wp-lightbox-overlay .wp-block-image img {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		object-fit: contain !important;
	}
}

/* Video-Vorschau im Aufmacher: weicher Schatten, leicht grün getönt, damit sie über der
   Wellenfläche schwebt (keine Bildunterschrift darunter) */
.wft-hero .wft-video img {
	box-shadow:
		0 36px 64px -28px rgba(14, 80, 43, 0.42),
		0 14px 28px -14px rgba(var(--wft-dark-rgb), 0.22);
}

/* Bilder mit KI-Kennzeichnung (mu-plugin wft-ai-label): die Hülle schneidet das gezoomte
   Bild ab und übernimmt deshalb Rundung und Schatten, sonst wären die Ecken eckig und der
   Schatten abgeschnitten. In Karten schneidet schon der Kartenkörper. */
:is(.wp-block-image, .wp-block-post-featured-image) .wft-ai-wrap {
	border-radius: var(--wft-r-l);
}

.wft-card .wft-ai-wrap {
	border-radius: 0;
}

.wft-hero .wft-video .wft-ai-wrap {
	box-shadow:
		0 36px 64px -28px rgba(14, 80, 43, 0.42),
		0 14px 28px -14px rgba(var(--wft-dark-rgb), 0.22);
}

.wft-ai-wrap .wft-ai-badge {
	padding: var(--sp-0) var(--sp-1h);
	font-size: var(--fs-micro);
	line-height: var(--lh-micro);
}

.wft-single__media .wft-ai-wrap img,
.wft-hero .wft-video .wft-ai-wrap img {
	border: 0;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}