/*
Theme Name:        mabu-base
Theme URI:         https://mabu-design.de
Author:            Maik Burdina
Author URI:        https://mabu-design.de
Description:       Minimales, sauberes Block Theme (FSE) für professionelle Kundenprojekte. Voll über den Block-Editor steuerbar: Gruppen-Modi (Raster, Slider, Laufband), mehrere Hintergrundbilder mit Parallax, Hintergrund-Videos, SVG-Trenner, Eingangs-Animationen und Zähler, responsive Spaltenbreiten, klickbare Cover, Anheften, Stilvarianten und Customize-Panel für Farben/Schriften/Header/Breite – ganz ohne Page-Builder oder Plugins.
Version:           1.2.30
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mabu-base
Tags:              block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, wide-blocks
*/

/* ─── Breakpoints (Referenz) ────────────────────────────────────────
 * Werte werden in theme.json → styles.css als Custom Properties gesetzt:
 *   --breakpoint-sm: 580px   Mobile/Tablet-Grenze
 *   --breakpoint-md: 768px   Editor Tablet-Vorschau
 *   --breakpoint-lg: 1024px  Desktop-Einstieg
 *   --breakpoint-xl: 1280px  Wide-Desktop
 *
 * Spacing-Skala (Desktop → Tablet ≤782px → Mobile ≤580px):
 *   --wp--preset--spacing--48:   48px → 32px → 24px
 *   --wp--preset--spacing--64:   64px → 40px → 28px
 *   --wp--preset--spacing--96:   96px → 56px → 40px
 *   --wp--preset--spacing--128: 128px → 72px → 56px
 * ─────────────────────────────────────────────────────────────────── */

/* ─── Reset / Base ─────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Zentrierte Bilder: WordPress zentriert über text-align, was durch
   unser img{display:block} wirkungslos wäre – auto-Margins richten es. */
.wp-block-image.aligncenter img,
figure.aligncenter img,
.aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

/* ─── Accessibility ─────────────────────────────────────────────── */

.skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute;
	overflow: hidden;
	height: 1px;
	width: 1px;
	white-space: nowrap;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	overflow: visible;
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 9999;
	padding: 12px 24px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	/* Weißer Trennring, damit der Rahmen auch auf farbigem Grund absetzt. */
	box-shadow: 0 0 0 2px #ffffff;
	border-radius: 2px;
}

/* Buttons haben oft Hintergrund = Primärfarbe → ein primärfarbener Rahmen
   würde untergehen ("übersehen"). Daher hier ein hochkontrastiger
   Doppel-Ring: weiß direkt am Button + dunkler Halo außen. Sichtbar auf
   hellem, dunklem UND farbigem Hintergrund. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 6px var(--wp--preset--color--dark, #0D0D0D) !important;
}

/* Desktop-Navigation: Untermenü öffnet auch per Tastatur-Fokus, nicht nur
   bei Maus-Hover. WordPress schließt den Typ "open-on-hover-click" bei
   seiner eigenen :focus-within-Regel aus – das holen wir hier nach.
   WICHTIG: WP versteckt das Submenü mit height/width:0 + overflow:hidden,
   daher müssen wir ALLE diese Eigenschaften zurücksetzen (nicht nur
   opacity/visibility). Im mobilen Overlay übernimmt das Akkordeon
   (display:none gewinnt), daher dort kein Konflikt. */
.wp-block-navigation .has-child:focus-within
> .wp-block-navigation__submenu-container {
	height: auto !important;
	width: auto !important;
	min-width: 200px;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* ─── Kein Abstand zwischen Header / Inhalt / Footer ────────────── */
/*
 * WordPress setzt per Default 24px margin zwischen die Top-Level-
 * Bereiche (.wp-site-blocks > *). Header, Main und Footer sollen
 * aber nahtlos aneinander liegen.
 */

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ─── Sticky Header ─────────────────────────────────────────────── */

.site-header {
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* ─── Navigation ────────────────────────────────────────────────── */

.wp-block-navigation a:not(.wp-block-button__link) {
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 200;
}

/* ─── Typography refinements ────────────────────────────────────── */

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	max-width: 72ch;
}

.wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* ─── Buttons ───────────────────────────────────────────────────── */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary) !important;
	transform: translateY(-1px);
}

/* ─── Button-Icons (Panel „Icon" am Button) ─────────────────────── */
/*
 * Das Icon wird als Maske über ::before/::after gerendert und nimmt
 * automatisch die Textfarbe des Buttons an (currentColor). Die Form
 * kommt aus der Inline-Variable --mabu-ic (vom Block gesetzt, SVG-Daten
 * zentral in responsive-grid.js).
 */
.mabu-btn-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.mabu-btn-icon--before .wp-block-button__link::before,
.mabu-btn-icon--after .wp-block-button__link::after {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--mabu-ic) center / contain no-repeat;
	mask: var(--mabu-ic) center / contain no-repeat;
}

/* Icon ganz an den rechten Rand schieben (am besten mit breitem/
   vollbreitem Button, sonst sitzt es direkt hinter dem Text). */
.mabu-btn-icon--edge .wp-block-button__link::after {
	margin-left: auto;
}

/* Transparenter Button-Hintergrund (Panel „Button") */
.mabu-btn-transparent .wp-block-button__link {
	background-color: transparent !important;
}

/* Frei editierbarer Hover-Zustand: Hintergrund + Textfarbe je Button.
   Nicht gesetzte Werte fallen auf den Theme-Standard zurück. */
.mabu-btn-hover .wp-block-button__link:hover,
.mabu-btn-hover .wp-block-button__link:focus {
	background-color: var(--mabu-hover-bg, var(--wp--preset--color--secondary)) !important;
	color: var(--mabu-hover-text, currentColor) !important;
}

/* Hover-Outline ohne Layout-Sprung: im Ruhezustand transparenter Rahmen
   in derselben Breite (box-sizing: border-box → keine Größenänderung),
   beim Hover bekommt er die gewählte Farbe. */
.mabu-btn-hover-border .wp-block-button__link {
	border-style: solid !important;
	border-width: var(--mabu-hover-bw, 2px) !important;
	border-color: transparent;
}

.mabu-btn-hover-border .wp-block-button__link:hover,
.mabu-btn-hover-border .wp-block-button__link:focus {
	border-color: var(--mabu-hover-border, currentColor) !important;
}

/* ─── Footer links ──────────────────────────────────────────────── */

footer a {
	color: inherit;
	opacity: 0.75;
	transition: opacity 0.2s ease;
	text-decoration: none;
}

footer a:hover {
	opacity: 1;
}

/* ─── Responsive: Tablet ≤ 782px ───────────────────────────────── */

@media (max-width: 782px) {

	footer .wp-block-columns {
		flex-wrap: wrap;
	}

	footer .wp-block-column:first-child {
		flex-basis: 100% !important;
		margin-bottom: var(--wp--preset--spacing--32);
	}

	footer .wp-block-column:not(:first-child) {
		flex-basis: calc(50% - 16px) !important;
	}

	.wp-block-post-content > p,
	.wp-block-post-content > ul,
	.wp-block-post-content > ol {
		max-width: 100%;
	}
}

/* ─── Responsive: Mobile ≤ 580px ───────────────────────────────── */

@media (max-width: 580px) {

	footer .wp-block-column,
	footer .wp-block-column:not(:first-child) {
		flex-basis: 100% !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		padding-block: var(--wp--preset--spacing--32);
	}

	.wp-block-cover {
		min-height: 50vh !important;
	}
}

/* ─── Cover: volle Breite ───────────────────────────────────────── */
/*
 * Cover-Blöcke sollen die volle Container-Breite nehmen. Ohne diese
 * Regel schrumpfen sie in Flex-Kontexten (z.B. Zeile) auf Inhaltsbreite
 * – vor allem auf Mobil sichtbar.
 */

.wp-block-cover,
.wp-block-cover-image {
	width: 100%;
}

/* ─── Layout-Fix: Raster in Zeilen ──────────────────────────────── */
/*
 * Eine Zeile (Flex) lässt Kinder nur inhaltsbreit werden – ein Raster
 * darin schrumpft dadurch zusammen, während der Spalten-Block sich
 * volle Breite nimmt. Dieser Fix streckt Raster (Core-Grid und
 * mabu-raster) innerhalb von Zeilen auf die volle verfügbare Breite,
 * damit z.B. Drittel im Raster genauso breit sind wie Drittel im
 * Spalten-Block daneben.
 */

.is-layout-flex > .is-layout-grid,
.is-layout-flex > .mabu-raster {
	flex-grow: 1;
	flex-basis: 100%;
	min-width: 0;
}

/* ─── Responsives Raster ────────────────────────────────────────── */
/*
 * Beim Block (z.B. Gruppe) unter "Erweitert → Zusätzliche CSS-Klasse(n)"
 * Klassen kombinieren:
 *
 *   mabu-raster            → aktiviert das Raster (Pflicht-Basisklasse)
 *   mabu-d1 … mabu-d8      → Spalten auf Desktop   (ab 1025px)
 *   mabu-t1 … mabu-t6      → Spalten auf Tablet    (481–1024px)
 *   mabu-m1 … mabu-m4      → Spalten auf Smartphone (bis 580px)
 *
 * Beispiel: "mabu-raster mabu-d8 mabu-t4 mabu-m2"
 *   → 8 Spalten Desktop, 4 Tablet, 2 Smartphone
 *
 * Ohne Angabe gilt: Desktop 3, Tablet 2, Smartphone 1.
 * Der Abstand zwischen den Zellen folgt der Spacing-Skala (responsiv).
 */

.mabu-raster {
	display: grid !important;
	gap: var(--wp--preset--spacing--24);
	grid-template-columns: repeat(3, 1fr);
}

/* Alignment-Hacks von Gutenberg-Kindern neutralisieren */
.mabu-raster > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: auto !important;
}

/* Desktop (ab 1024px; Landscape 1024–1279 überschreibt weiter unten) */
@media (min-width: 1024px) {
	.mabu-raster.mabu-d1 { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-d2 { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-d3 { grid-template-columns: repeat(3, 1fr); }
	.mabu-raster.mabu-d4 { grid-template-columns: repeat(4, 1fr); }
	.mabu-raster.mabu-d5 { grid-template-columns: repeat(5, 1fr); }
	.mabu-raster.mabu-d6 { grid-template-columns: repeat(6, 1fr); }
	.mabu-raster.mabu-d7 { grid-template-columns: repeat(7, 1fr); }
	.mabu-raster.mabu-d8 { grid-template-columns: repeat(8, 1fr); }
}

/* Großer Desktop (ab 1440px) */
@media (min-width: 1440px) {
	.mabu-raster.mabu-xl1 { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-xl2 { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-xl3 { grid-template-columns: repeat(3, 1fr); }
	.mabu-raster.mabu-xl4 { grid-template-columns: repeat(4, 1fr); }
	.mabu-raster.mabu-xl5 { grid-template-columns: repeat(5, 1fr); }
	.mabu-raster.mabu-xl6 { grid-template-columns: repeat(6, 1fr); }
	.mabu-raster.mabu-xl7 { grid-template-columns: repeat(7, 1fr); }
	.mabu-raster.mabu-xl8 { grid-template-columns: repeat(8, 1fr); }
}

/* Tablet (481–1024px) – Standard: 2 Spalten */
@media (min-width: 581px) and (max-width: 1023px) {
	.mabu-raster { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-t1 { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-t2 { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-t3 { grid-template-columns: repeat(3, 1fr); }
	.mabu-raster.mabu-t4 { grid-template-columns: repeat(4, 1fr); }
	.mabu-raster.mabu-t5 { grid-template-columns: repeat(5, 1fr); }
	.mabu-raster.mabu-t6 { grid-template-columns: repeat(6, 1fr); }
}

/* Smartphone (bis 580px) – Standard: 1 Spalte */
@media (max-width: 580px) {
	.mabu-raster { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-m1 { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-m2 { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-m3 { grid-template-columns: repeat(3, 1fr); }
	.mabu-raster.mabu-m4 { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet Landscape (1024–1279px) – überschreibt Desktop, nur wenn gesetzt */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mabu-raster.mabu-tl1 { grid-template-columns: repeat(1, 1fr); }
	.mabu-raster.mabu-tl2 { grid-template-columns: repeat(2, 1fr); }
	.mabu-raster.mabu-tl3 { grid-template-columns: repeat(3, 1fr); }
	.mabu-raster.mabu-tl4 { grid-template-columns: repeat(4, 1fr); }
	.mabu-raster.mabu-tl5 { grid-template-columns: repeat(5, 1fr); }
	.mabu-raster.mabu-tl6 { grid-template-columns: repeat(6, 1fr); }
}

/* ─── Natives Raster: Spalten pro Gerät (Panel „Spalten pro Gerät") ── */
/*
 * Überschreibt die Spaltenzahl des nativen Raster-Blocks je Gerät. Die
 * Werte kommen als CSS-Variablen (--mabu-grid-d/t/m) vom Block.
 */
@media (min-width: 1024px) {
	.mabu-grid-responsive {
		grid-template-columns: repeat(var(--mabu-grid-d, 3), minmax(0, 1fr)) !important;
	}
}

/* Tablet Landscape (1024–1279px): eigener Wert, sonst Desktop-Wert */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mabu-grid-responsive {
		grid-template-columns: repeat(var(--mabu-grid-tl, var(--mabu-grid-d, 3)), minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1440px) {
	.mabu-grid-responsive {
		grid-template-columns: repeat(var(--mabu-grid-xl, var(--mabu-grid-d, 3)), minmax(0, 1fr)) !important;
	}
}

@media (min-width: 581px) and (max-width: 1023px) {
	.mabu-grid-responsive {
		grid-template-columns: repeat(var(--mabu-grid-t, 2), minmax(0, 1fr)) !important;
	}
}

@media (max-width: 580px) {
	.mabu-grid-responsive {
		grid-template-columns: repeat(var(--mabu-grid-m, 1), minmax(0, 1fr)) !important;
	}
}

/* ─── Mosaik (Gruppen-Modus „Mosaik") ───────────────────────────── */
/*
 * Asymmetrische Collage per CSS-Grid. Spaltenzahl je Gerät kommt als
 * --mabu-mos-xl/d/t/m vom Block.
 *
 * Doppelte Auflösung: jede SICHTBARE Spalte besteht aus 2 Tracks und
 * jede Grundkachel aus 2 Reihen. Dadurch sind Zwischengrößen (1,5×)
 * möglich. Breite/Höhe pro Kachel getrennt steuerbar:
 *   mabu-tw-15 / mabu-tw-2  → Breite 1,5× / 2×
 *   mabu-th-15 / mabu-th-2  → Höhe   1,5× / 2×
 * Bilder füllen ihre Kachel randscharf (object-fit: cover),
 * grid-auto-flow: dense füllt entstehende Lücken automatisch.
 */

.mabu-mosaik {
	display: grid !important;
	gap: var(--wp--preset--spacing--24);
	grid-template-columns: repeat(calc(var(--mabu-mos-d, 4) * 2), minmax(0, 1fr));
	grid-auto-rows: var(--mabu-mos-row, 110px);
	grid-auto-flow: dense;
}

/* Grundkachel = 2 Tracks breit, 2 Reihen hoch (= 1×1 sichtbar). */
.mabu-mosaik > * {
	margin: 0 !important;
	max-width: none !important;
	width: auto !important;
	min-width: 0;
	height: 100%;
	grid-column: span 2;
	grid-row: span 2;
}

.mabu-mosaik > figure,
.mabu-mosaik > .wp-block-image,
.mabu-mosaik > .wp-block-image > figure {
	margin: 0;
	height: 100%;
}

.mabu-mosaik img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kachel-Breite/Höhe (1,5× = 3 Tracks, 2× = 4 Tracks). */
.mabu-mosaik > .mabu-tw-15 { grid-column: span 3; }
.mabu-mosaik > .mabu-tw-2  { grid-column: span 4; }
.mabu-mosaik > .mabu-th-15 { grid-row: span 3; }
.mabu-mosaik > .mabu-th-2  { grid-row: span 4; }

/* Großer Desktop (ab 1440px): mehr Spalten, damit Bilder nicht zu
   breit werden. Etwas höhere Grundzeile für ausgewogene Proportionen. */
@media (min-width: 1440px) {
	.mabu-mosaik {
		grid-template-columns: repeat(calc(var(--mabu-mos-xl, 5) * 2), minmax(0, 1fr));
		--mabu-mos-row: 130px;
	}
}

/* Tablet: etwas niedrigere Grundzeile */
@media (min-width: 581px) and (max-width: 1023px) {
	.mabu-mosaik {
		grid-template-columns: repeat(calc(var(--mabu-mos-t, 2) * 2), minmax(0, 1fr));
		--mabu-mos-row: 90px;
	}
}

/* Smartphone */
@media (max-width: 580px) {
	.mabu-mosaik {
		grid-template-columns: repeat(calc(var(--mabu-mos-m, 1) * 2), minmax(0, 1fr));
		--mabu-mos-row: 100px;
	}
}

/* Tablet Landscape (1024–1279px): eigener Wert, sonst Desktop-Wert */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mabu-mosaik {
		grid-template-columns: repeat(calc(var(--mabu-mos-tl, var(--mabu-mos-d, 4)) * 2), minmax(0, 1fr));
	}
}

/* ─── Gruppen-Inhalt vertikal ausrichten ────────────────────────── */
/*
 * Panel „Vertikale Ausrichtung" am Standard-Container. Greift nur, wenn
 * die Gruppe höher ist als ihr Inhalt (z.B. Mindesthöhe gesetzt). Die
 * zentrierte Inhaltsbreite (constrained) bleibt dank margin-inline:auto
 * erhalten.
 */
.wp-block-group.mabu-valign-mitte,
.wp-block-group.mabu-valign-unten {
	display: flex;
	flex-direction: column;
}

.wp-block-group.mabu-valign-mitte {
	justify-content: center;
}

.wp-block-group.mabu-valign-unten {
	justify-content: flex-end;
}

/* ─── Mobiles Menü: Hamburger-Button ────────────────────────────── */
/*
 * Eigener .mabu-burger ersetzt WP's Öffnen-Button (wird per JS injiziert).
 * 3 Balken morphen zu X. Sichtbarkeit steuert PHP via @media (navBreakpoint).
 * WP's Core-SVGs + alter Close-Button bleiben als Fallback erhalten.
 */

/* WP Close-SVG ausblenden – wir zeichnen das X mit Pseudo-Elementen
   (Fallback, falls JS scheitert und der Burger fehlt). */
.wp-block-navigation__responsive-container-close svg {
	display: none;
}

/* Burger aktiv (JS lief): WP's Close-Button komplett weg – der Burger
   ist in JEDEM Modus der einzige Toggle und morpht selbst zu X. */
body.mabu-burger-active .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Offenes Menü: Burger über Drawer/Overlay heben, damit man das X sieht
   und zum Schließen draufklicken kann. Die nav bildet einen eigenen
   Stacking-Context, in dem der Burger über dem Container (z-index 100000)
   liegt; der Backdrop (z-index 1) bleibt darunter. */
.wp-block-navigation.mabu-open {
	position: relative;
	z-index: 100050;
}
.wp-block-navigation.mabu-open .mabu-burger {
	position: relative;
	z-index: 100060;
}

/* ── Eigener Burger-Button ─────────────────────────────────────── */
.mabu-burger {
	display: none; /* Sichtbarkeit via PHP @media */
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: inherit;
	border-radius: 4px;
	flex-shrink: 0;
}

.mabu-burger__bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: center;
	transition:
		transform  0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity    0.2s  ease,
		width      0.3s  ease;
}

/* X-Zustand: obere Linie → 45°, mittlere verschwindet, untere → -45° */
.mabu-burger.is-open .mabu-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mabu-burger.is-open .mabu-burger__bar:nth-child(2) {
	opacity: 0;
	width: 0;
}
.mabu-burger.is-open .mabu-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

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

/* Fallback: WP Close-Button (sichtbar wenn kein JS oder fullscreen-Modus) */
.wp-block-navigation__responsive-container-close {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.wp-block-navigation__responsive-container-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.wp-block-navigation__responsive-container-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ─── Mobiles Menü: Overlay-Stile ──────────────────────────────── */
/*
 * CSS-Variablen werden per PHP aus den Customize-Settings gesetzt.
 * Die body-Klasse mabu-menu-{fullscreen|links|rechts} steuert das
 * Layout. Farben und Ausrichtung kommen als --mabu-menu-* Vars.
 */

/* ── Vollbild-Modus (Standard) ─────────────────────────────────── */
/* Farben + Ausrichtung kommen als Inline-CSS via PHP (mabu_base_mobile_menu_css). */
body.mabu-menu-fullscreen
.wp-block-navigation__responsive-container.is-menu-open {
	display: flex !important;
}

@media (prefers-reduced-motion: no-preference) {
	body.mabu-menu-fullscreen
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: mabu-menu-fadein 0.3s ease forwards;
	}
}

@keyframes mabu-menu-fadein {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Drawer-Modi: von links / von rechts ───────────────────────── */
/*
 * WICHTIG: NUR der GEÖFFNETE Container (.is-menu-open) wird umgestylt.
 * Der geschlossene Container bleibt komplett unangetastet – auf Desktop
 * ist genau dieser Container das Inline-Menü (overlayMenu:"mobile").
 * .is-menu-open existiert ausschließlich nach Hamburger-Klick auf Mobile,
 * deshalb ist Desktop hier garantiert nicht betroffen.
 * Animation per @keyframes (kein Off-Screen-Basiszustand → kein Flash).
 */

body.mabu-menu-links .wp-block-navigation__responsive-container.is-menu-open,
body.mabu-menu-rechts .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	width: var(--mabu-menu-breite, 340px) !important;
	max-width: 90vw !important;
	height: 100dvh !important;
	min-height: 100% !important;
	overflow-y: auto;
	z-index: 100000;
	padding: 2rem 1.5rem !important;
	box-sizing: border-box;
}

body.mabu-menu-links .wp-block-navigation__responsive-container.is-menu-open {
	left: 0 !important;
	right: auto !important;
}

body.mabu-menu-rechts .wp-block-navigation__responsive-container.is-menu-open {
	right: 0 !important;
	left: auto !important;
}

/* Slide-In per Keyframe (läuft zuverlässig beim Einblenden) */
@media (prefers-reduced-motion: no-preference) {
	body.mabu-menu-links .wp-block-navigation__responsive-container.is-menu-open {
		animation: mabu-drawer-in-left 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}
	body.mabu-menu-rechts .wp-block-navigation__responsive-container.is-menu-open {
		animation: mabu-drawer-in-right 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}
}

@keyframes mabu-drawer-in-left {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
@keyframes mabu-drawer-in-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* Backdrop-Schatten hinter dem offenen Drawer.
   mabu-open wird per JS gesetzt sobald is-menu-open am Container hängt. */
body.mabu-menu-links .wp-block-navigation.mabu-open::after,
body.mabu-menu-rechts .wp-block-navigation.mabu-open::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
	pointer-events: none;
}

/* ─── Mobiles Menü: Submenüs als Akkordeon ──────────────────────── */
/*
 * Im offenen Overlay werden Submenüs eingeklappt und per eigenem
 * Chevron-Toggle (mabu-sub-toggle, per JS injiziert) auf-/zugeklappt.
 * WP's Core-Submenü-Stil (absolute Dropdown, Einzug, Rahmen) wird
 * im Overlay zurückgesetzt – das fixt den kaputten Einzug.
 */
/* Eltern-Item: normaler Block. Text + Chevron fließen INLINE in einer
   Zeile (folgt text-align), das Submenü kommt als Block darunter.
   Inline-Fluss ist robuster als Flexbox – der Link bläht nicht auf
   eine eigene Zeile auf. */
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.mabu-has-sub {
	display: block !important;
}

/* Eltern-Link inline, damit der Chevron direkt daneben fließt. */
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.mabu-has-sub > .wp-block-navigation-item__content {
	display: inline !important;
	width: auto !important;
}

/* Submenü-Stil zurücksetzen + als Block in eigener Zeile UNTER die
   Eltern. Fixt WP's kaputten absoluten Dropdown-Einzug. */
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.mabu-has-sub > .wp-block-navigation__submenu-container {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0.35rem 0 0.5rem 0 !important;
	/* Standard: eingeklappt – nur per Chevron (mabu-sub-open) sichtbar. */
	display: none !important;
}

/* Aufgeklappt */
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.mabu-has-sub.mabu-sub-open > .wp-block-navigation__submenu-container {
	display: block !important;
}

/* WP's eigene Submenü-Pfeile/Toggles im Overlay weg – wir nutzen eigene. */
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon,
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle {
	display: none !important;
}

/* Chevron-Toggle: inline-block direkt neben dem Text. Standardmäßig aus
   (Desktop teilt sich das DOM) – nur im offenen Overlay einblenden.
   Die Seite (links/rechts vom Text) steuert das JS über die Einfüge-
   position im DOM (vor/nach dem Link). */
.mabu-sub-toggle {
	display: none;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0 0.15rem;
	padding: 0;
	vertical-align: middle;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
body.mabu-burger-active .wp-block-navigation__responsive-container.is-menu-open
.mabu-sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mabu-sub-chevron {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.mabu-has-sub.mabu-sub-open > .mabu-sub-toggle .mabu-sub-chevron {
	transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
	.mabu-sub-chevron { transition: none; }
}

/* ─── Responsive Spalten (core/columns) ─────────────────────────── */
/*
 * Gesteuert über das Panel "Responsive Spalten" am Spalten-Block.
 * Desktop behält immer die eingestellten Breiten (z.B. 33% / 66%).
 *
 *   mabu-cols-t1 / mabu-cols-t2 → Tablet: untereinander / 2 pro Zeile
 *   mabu-cols-m1 / mabu-cols-m2 → Smartphone: untereinander / 2 pro Zeile
 *
 * Die verdoppelten Klassen sind Absicht: WordPress-Core stylt Spalten
 * selbst mit !important – gleiche Spezifität würde von der Ladereihen-
 * folge abhängen, die Verdopplung gewinnt immer.
 */

@media (min-width: 581px) and (max-width: 1023px) {
	.wp-block-columns.mabu-cols-t1.mabu-cols-t1 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-t1.mabu-cols-t1 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-t2.mabu-cols-t2 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-t2.mabu-cols-t2 > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--24)) !important;
		flex-grow: 1;
	}
}

@media (min-width: 581px) and (max-width: 1023px) {
	/* Eigene Breiten pro Spalte: Wert kommt als --mabu-bt aus dem Editor */
	.wp-block-columns.mabu-cols-tcustom.mabu-cols-tcustom {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-tcustom.mabu-cols-tcustom > .wp-block-column {
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-tcustom.mabu-cols-tcustom > .wp-block-column[style*="--mabu-bt"] {
		flex-basis: calc(var(--mabu-bt) - var(--wp--preset--spacing--24)) !important;
	}
}

/* Tablet Landscape (1024–1279px): Verhalten + eigene Breiten (--mabu-btl).
   Ohne gesetzten Wert bleibt es beim Desktop-Verhalten (Block-Standard). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wp-block-columns.mabu-cols-tl1.mabu-cols-tl1 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-tl1.mabu-cols-tl1 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-tl2.mabu-cols-tl2 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-tl2.mabu-cols-tl2 > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--24)) !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-tlcustom.mabu-cols-tlcustom {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-tlcustom.mabu-cols-tlcustom > .wp-block-column {
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-tlcustom.mabu-cols-tlcustom > .wp-block-column[style*="--mabu-btl"] {
		flex-basis: calc(var(--mabu-btl) - var(--wp--preset--spacing--24)) !important;
	}
}

@media (max-width: 580px) {
	.wp-block-columns.mabu-cols-mcustom.mabu-cols-mcustom {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-mcustom.mabu-cols-mcustom > .wp-block-column {
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-mcustom.mabu-cols-mcustom > .wp-block-column[style*="--mabu-bm"] {
		flex-basis: calc(var(--mabu-bm) - var(--wp--preset--spacing--16)) !important;
	}
}

@media (max-width: 580px) {
	.wp-block-columns.mabu-cols-m1.mabu-cols-m1 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-m1.mabu-cols-m1 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-m2.mabu-cols-m2 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-m2.mabu-cols-m2 > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--16)) !important;
		flex-grow: 1;
	}
}

/* ─── Eigene Spaltenbreiten (%) – automatischer Umbruch ─────────── */
/*
 * Sobald an EINER Spalte eine %-Breite gesetzt ist (--mabu-bt/-btl/-bm),
 * bricht der Spalten-Block automatisch um – ohne dass am Block extra
 * „Verhalten = Eigene Breiten" gewählt werden muss (:has). Die alten
 * mabu-cols-*custom-Regeln oben bleiben als Fallback für Browser ohne
 * :has-Unterstützung.
 * Tablet Landscape nutzt --mabu-btl; ist keiner gesetzt, greift der
 * Tablet-Portrait-Wert --mabu-bt (Bestand bleibt so erhalten).
 */

/*
 * Umbruch nach echter Breite: flex-grow:0 + flex-shrink:0, damit jede
 * Spalte GENAU ihre % behält und natürlich umbricht. Beispiel 80/40/60:
 * 80 bricht auf eine eigene Zeile (80+40 > 100), 40 und 60 teilen sich
 * die nächste Zeile (40+60 = 100). !important schlägt die alten
 * mabu-cols-*custom-Fallbackregeln (höhere Spezifität).
 */

/* Tablet Portrait (581–1023) */
@media (min-width: 581px) and (max-width: 1023px) {
	.wp-block-columns:has(> .wp-block-column[style*="--mabu-bt"]) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns > .wp-block-column[style*="--mabu-bt"] {
		flex-basis: calc(var(--mabu-bt) - var(--wp--preset--spacing--24)) !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}
}

/* Tablet Landscape (1024–1279): --mabu-btl, sonst --mabu-bt als Fallback */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wp-block-columns:has(> .wp-block-column[style*="--mabu-bt"]),
	.wp-block-columns:has(> .wp-block-column[style*="--mabu-btl"]) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns > .wp-block-column[style*="--mabu-bt"] {
		flex-basis: calc(var(--mabu-bt) - var(--wp--preset--spacing--24)) !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}
	.wp-block-columns > .wp-block-column[style*="--mabu-btl"] {
		flex-basis: calc(var(--mabu-btl) - var(--wp--preset--spacing--24)) !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}
}

/* Smartphone (≤580) */
@media (max-width: 580px) {
	.wp-block-columns:has(> .wp-block-column[style*="--mabu-bm"]) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns > .wp-block-column[style*="--mabu-bm"] {
		flex-basis: calc(var(--mabu-bm) - var(--wp--preset--spacing--16)) !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}
}

/* Großer Desktop (ab 1440px) – Spalten-Überschreibung */
@media (min-width: 1440px) {
	.wp-block-columns.mabu-cols-xl1.mabu-cols-xl1 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-xl1.mabu-cols-xl1 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-xl2.mabu-cols-xl2 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-xl2.mabu-cols-xl2 > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--24)) !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-xl3.mabu-cols-xl3 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-xl3.mabu-cols-xl3 > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--preset--spacing--24)) !important;
		flex-grow: 1;
	}
	.wp-block-columns.mabu-cols-xl4.mabu-cols-xl4 {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mabu-cols-xl4.mabu-cols-xl4 > .wp-block-column {
		flex-basis: calc(25% - var(--wp--preset--spacing--24)) !important;
		flex-grow: 1;
	}
}

/* ─── Responsive Sichtbarkeit ───────────────────────────────────── */
/*
 * mabu-nur-desktop  → Block nur auf Desktop sichtbar (ab 1280px)
 * mabu-nur-tablet   → nur auf Tablet Portrait (581–1023px)
 * mabu-nur-mobil    → nur auf Smartphone (bis 580px)
 * mabu-nicht-mobil  → auf Smartphone ausgeblendet
 */

@media (max-width: 1279px) {
	.mabu-nur-desktop { display: none !important; }
}

@media (max-width: 580px), (min-width: 1024px) {
	.mabu-nur-tablet { display: none !important; }
}

@media (min-width: 581px) {
	.mabu-nur-mobil { display: none !important; }
}

@media (max-width: 580px) {
	.mabu-nicht-mobil { display: none !important; }
}

/*
 * Geräte-Sichtbarkeit per Schalter am Block (unabhängig kombinierbar).
 * mabu-hide-desktop  → ausgeblendet ab 1280px (inkl. XL)
 * mabu-hide-xl       → ausgeblendet nur ab 1440px
 * mabu-hide-tl       → ausgeblendet Tablet Landscape (1024–1279px)
 * mabu-hide-tablet   → ausgeblendet Tablet Portrait (581–1023px)
 * mabu-hide-mobil    → ausgeblendet bis 580px
 */

@media (min-width: 1280px) {
	.mabu-hide-desktop { display: none !important; }
}

@media (min-width: 1440px) {
	.mabu-hide-xl { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.mabu-hide-tl { display: none !important; }
}

@media (min-width: 581px) and (max-width: 1023px) {
	.mabu-hide-tablet { display: none !important; }
}

@media (max-width: 580px) {
	.mabu-hide-mobil { display: none !important; }
}

/* Nur im Editor: markiert Blöcke mit Sichtbarkeitsregeln, ohne sie zu
   verstecken (damit sie bearbeitbar bleiben). */
.mabu-vis-hidden {
	outline: 1px dashed rgba(120, 120, 120, 0.6);
	outline-offset: 2px;
}

/* ─── Cover-Link (ganzer Cover klickbar) ────────────────────────── */
/*
 * Wird vom Theme automatisch eingefügt, wenn am Cover-Block unter
 * "Verlinkung" eine URL gesetzt ist. Der Link legt sich unsichtbar
 * über die volle Fläche; Links und Buttons IM Cover bleiben dank
 * höherem z-index weiterhin separat klickbar.
 */

.wp-block-cover .mabu-cover-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
}

.wp-block-cover:has(.mabu-cover-link) :is(a, button):not(.mabu-cover-link) {
	position: relative;
	z-index: 3;
}

/* ─── Hintergrund-Video (Panel „Hintergrund-Video" am Gruppen-Block) ── */

.mabu-hat-video {
	position: relative;
	overflow: hidden;
}

.mabu-hat-video .mabu-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	z-index: -1 !important;   /* hinter den Inhalt */
	pointer-events: none;
	margin-top: 0 !important;
}

/* Inhalt liegt über dem Video */
.mabu-hat-video > :not(.mabu-bg-video) {
	position: relative;
	z-index: 1;
}

/* Bedienhilfe „Bewegung reduzieren": Video ausblenden,
   Hintergrundfarbe der Gruppe bleibt sichtbar */
@media (prefers-reduced-motion: reduce) {
	.mabu-bg-video {
		display: none;
	}
}

/* ─── Farb-Overlay über Bild/Video (Panel „Hintergrundbilder") ── */
/*
 * Ein Overlay-Element (.mabu-overlay) liegt zwischen Hintergrund
 * (Bild/Video) und Inhalt. Farbe/Verlauf + Deckkraft + Blend-Modus
 * kommen als CSS-Variablen vom Gruppen-Wrapper. isolation:isolate
 * hält den Blend-Modus innerhalb der Gruppe (blendet mit Bild/Video,
 * nicht mit der Seite dahinter).
 */
.mabu-hat-overlay {
	position: relative;
	isolation: isolate;
}
.mabu-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--mabu-overlay-bg, transparent);
	opacity: var(--mabu-overlay-opacity, 0.5);
	mix-blend-mode: var(--mabu-overlay-blend, normal);
}
/* Inhalt über das Overlay heben (Video bleibt darunter bei z-index:-1). */
.mabu-hat-overlay > :not(.mabu-overlay):not(.mabu-bg-video) {
	position: relative;
	z-index: 1;
}

/* ─── Vollbild-Hilfsklasse ──────────────────────────────────────── */
/*
 * Im Editor unter "Erweitert → Zusätzliche CSS-Klasse(n)" eintragen:
 *   mabu-vollbild  → Block füllt die volle Bildschirmhöhe
 * Zusammen mit Ausrichtung "Volle Breite" ergibt das eine echte
 * Fullscreen-Sektion. Inhalt wird vertikal zentriert.
 */

.mabu-vollbild {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Sticky-Header-Höhe abziehen, damit nichts verdeckt wird */
.mabu-vollbild--unter-header {
	min-height: calc(100dvh - 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ─── Eingangs-Animationen (Panel „Animation") ──────────────────── */
/*
 * Gesteuert über das Panel "Animation" an den Blöcken. Ein kleines
 * Frontend-Script (assets/js/animationen.js) setzt beim Scrollen die
 * Klasse .mabu-anim--sichtbar. Dauer/Verzögerung kommen als Inline-
 * Variablen vom Panel.
 *
 * Schutznetz: Der versteckte Ausgangszustand gilt nur bei aktivem
 * JavaScript (@media scripting) und ohne Reduzierte-Bewegung-Wunsch –
 * sonst ist der Inhalt einfach sofort sichtbar.
 */

/* Einzeleigenschaften statt transition-Kurzschreibweise: Safari
   wertet CSS-Variablen in der Kurzschreibweise nicht zuverlässig aus. */
.mabu-anim-fade,
.mabu-anim-up,
.mabu-anim-left,
.mabu-anim-right,
.mabu-anim-zoom {
	transition-property: opacity, transform;
	transition-duration: var(--mabu-anim-dauer, 600ms);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--mabu-anim-delay, 0ms);
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.mabu-anim-fade:not(.mabu-anim--sichtbar)  { opacity: 0; }
	.mabu-anim-up:not(.mabu-anim--sichtbar)    { opacity: 0; transform: translateY(40px); }
	.mabu-anim-left:not(.mabu-anim--sichtbar)  { opacity: 0; transform: translateX(-40px); }
	.mabu-anim-right:not(.mabu-anim--sichtbar) { opacity: 0; transform: translateX(40px); }
	.mabu-anim-zoom:not(.mabu-anim--sichtbar)  { opacity: 0; transform: scale(0.92); }
}

/* ─── SVG-Trenner (Panel „Trenner" am Gruppen-Block) ────────────── */
/*
 * Formen als SVG-Maske, eingefärbt über --mabu-divider-farbe
 * (= Hintergrundfarbe der angrenzenden Sektion), Höhe über
 * --mabu-divider-hoehe. Beides setzt das Panel als Inline-Variablen.
 */

[class*="mabu-divider-"] {
	position: relative;
}

[class*="mabu-divider-"][class*="--oben"]::before,
[class*="mabu-divider-"][class*="--unten"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--mabu-divider-hoehe, 80px);
	background-color: var(--mabu-divider-farbe, #ffffff);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	z-index: 1;
}

[class*="mabu-divider-"][class*="--oben"]::before {
	top: 0;
	transform: scaleY(-1);
}

[class*="mabu-divider-"][class*="--unten"]::after {
	bottom: 0;
}

.mabu-divider-welle--oben::before,
.mabu-divider-welle--unten::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C300,128 900,0 1200,64 L1200,120 L0,120 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C300,128 900,0 1200,64 L1200,120 L0,120 Z'/%3E%3C/svg%3E");
}

.mabu-divider-schraege--oben::before,
.mabu-divider-schraege--unten::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L1200,0 L1200,120 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L1200,0 L1200,120 Z'/%3E%3C/svg%3E");
}

.mabu-divider-kurve--oben::before,
.mabu-divider-kurve--unten::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 Q600,-40 1200,120 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 Q600,-40 1200,120 Z'/%3E%3C/svg%3E");
}

.mabu-divider-zacken--oben::before,
.mabu-divider-zacken--unten::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L200,48 L400,120 L600,48 L800,120 L1000,48 L1200,120 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L200,48 L400,120 L600,48 L800,120 L1000,48 L1200,120 Z'/%3E%3C/svg%3E");
}

/* ─── CSS Scroll-Driven Animations (kein JS) ────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-block-post-template > li > .wp-block-group,
		.wp-block-post-template > .wp-block-post {
			animation: mabu-fade-up both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		.mabu-animate {
			animation: mabu-fade-up both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 25%;
		}
	}
}

@keyframes mabu-fade-up {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ─── Slider (Panel „Slider" am Gruppen-Block) ──────────────────── */

.mabu-slider {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	gap: var(--mabu-slider-gap, 0px); /* Regler "Abstand zwischen Slides" */
}

.mabu-slider::-webkit-scrollbar {
	display: none;
}

.mabu-slider > * {
	flex: 0 0 calc((100% - (var(--mabu-slides-d, 1) - 1) * var(--mabu-slider-gap, 0px)) / var(--mabu-slides-d, 1)) !important;
	max-width: none !important;
	margin: 0 !important; /* WP-Fluss-Abstand würde Slides ab Nr. 2 nach unten schieben */
	scroll-snap-align: start;
}

/* ─── Slider-Höhe ─── */

/* Volle Bildschirmhöhe minus Header (Header-Höhe misst das Frontend-Script) */
.mabu-slider--voll {
	height: calc(100dvh - var(--mabu-header-hoehe, 80px) - var(--wp-admin--admin-bar--height, 0px));
}

/* Eigener Wert (px/vh/…) aus dem Panel */
.mabu-slider--hoehe {
	height: var(--mabu-slider-hoehe, 80vh);
}

.mabu-slider--voll > *,
.mabu-slider--hoehe > * {
	height: 100%;
	min-height: 0;
}

/* Bild-Slides füllen die Höhe formatfüllend */
.mabu-slider--voll > .wp-block-image,
.mabu-slider--hoehe > .wp-block-image {
	margin: 0 !important;
}

.mabu-slider--voll > .wp-block-image img,
.mabu-slider--hoehe > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 581px) and (max-width: 1023px) {
	.mabu-slider > * {
		flex-basis: calc((100% - (var(--mabu-slides-t, 1) - 1) * var(--mabu-slider-gap, 0px)) / var(--mabu-slides-t, 1)) !important;
	}
}

/* Tablet Landscape (1024–1279px): eigene Slides-Zahl, sonst Desktop-Wert */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mabu-slider > * {
		flex-basis: calc((100% - (var(--mabu-slides-tl, var(--mabu-slides-d, 1)) - 1) * var(--mabu-slider-gap, 0px)) / var(--mabu-slides-tl, var(--mabu-slides-d, 1))) !important;
	}
}

@media (max-width: 580px) {
	.mabu-slider > * {
		flex-basis: calc((100% - (var(--mabu-slides-m, 1) - 1) * var(--mabu-slider-gap, 0px)) / var(--mabu-slides-m, 1)) !important;
	}
}

/* Navigation (wird vom Frontend-Script erzeugt) */
.mabu-slider-wrap {
	position: relative;
}

.mabu-slider-pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mabu-slider-pfeil:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mabu-slider-pfeil--zurueck { left: 12px; }
.mabu-slider-pfeil--weiter  { right: 12px; }

.mabu-slider-punkte {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.mabu-slider-punkt {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mabu-slider-punkt.ist-aktiv {
	background: var(--wp--preset--color--primary);
	transform: scale(1.25);
}

/* ─── Laufband / Marquee (Panel „Laufband") ─────────────────────── */

.mabu-marquee {
	overflow: hidden !important;
	display: block !important;
}

.mabu-marquee-track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: mabu-marquee var(--mabu-marquee-dauer, 30s) linear infinite;
}

.mabu-marquee--rechts .mabu-marquee-track {
	animation-direction: reverse;
}

.mabu-marquee:hover .mabu-marquee-track {
	animation-play-state: paused;
}

.mabu-marquee-gruppe {
	display: flex;
	align-items: center;
	gap: var(--wp--style--block-gap, 48px);
	padding-right: var(--wp--style--block-gap, 48px);
}

@keyframes mabu-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.mabu-marquee-track { animation: none; }
}

/* ─── Anheften / Sticky (Panel „Anheften") ──────────────────────── */

.mabu-sticky {
	position: sticky !important;
	top: var(--mabu-sticky-offset, 96px);
	align-self: flex-start;
	z-index: 10;
}

/* ─── Stilvarianten (Stile-Tab der Blöcke) ──────────────────────── */

/* Button: Outline */
.is-style-mabu-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary) !important;
}

.is-style-mabu-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Gruppe/Spalte: Schatten-Karte */
.is-style-mabu-karte {
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--32);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-mabu-karte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lg);
}

/* Gruppe/Spalte: Glas */
.is-style-mabu-glas {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
}

/* Überschrift: Gradient */
.is-style-mabu-gradient {
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

/* Bild: Zoom bei Hover */
.is-style-mabu-zoom {
	overflow: hidden;
	border-radius: 8px;
}

.is-style-mabu-zoom img {
	transition: transform 0.4s ease;
}

.is-style-mabu-zoom:hover img {
	transform: scale(1.06);
}

/* ─── Balken-Motiv (Stilvariante am Trenner) ──────────────────────
 * Drei Balken in EINEM Element, gezeichnet mit einem Verlauf aus harten
 * Stopps – kein Bild, keine Zusatz-Elemente. Die Anteile stammen aus der
 * Vorlage (103 / 11 / 145 / 13 / 92 von 364) und bleiben durch
 * aspect-ratio in jeder Breite erhalten. Farben pro Einsatzort über
 * --mabu-balken-1/-2 überschreibbar (z. B. auf hellem Grund).
 */
.wp-block-separator.is-style-mabu-balken,
.wp-block-separator.is-style-mabu-balken-klein {
	--mabu-balken-1: var(--wp--preset--color--primary, #0897d3);
	--mabu-balken-2: var(--wp--preset--color--secondary, #144984);
	border: 0;
	height: auto;
	opacity: 1;
	background: linear-gradient( 90deg,
		var(--mabu-balken-1) 0 28.3%,
		transparent 28.3% 31.32%,
		var(--mabu-balken-1) 31.32% 71.15%,
		transparent 71.15% 74.73%,
		var(--mabu-balken-2) 74.73% 100% );
}

/* !important ist hier Pflicht: das Constrained-Layout von WordPress
   setzt margin-left/right:auto mit !important auf jedes Kind. */
.wp-block-separator.is-style-mabu-balken {
	width: min(728px, 62%);
	aspect-ratio: 364 / 12;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.wp-block-separator.is-style-mabu-balken-klein {
	width: min(344px, 34%);
	aspect-ratio: 172 / 6;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* Details/FAQ: Akkordeon-Karte mit +/− Indikator */
.is-style-mabu-faq {
	border: 1px solid var(--wp--preset--color--light);
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}

.is-style-mabu-faq > summary {
	cursor: pointer;
	padding: 16px 48px 16px 20px;
	font-weight: 600;
	list-style: none;
	position: relative;
	transition: background-color 0.2s ease;
}

.is-style-mabu-faq > summary::-webkit-details-marker {
	display: none;
}

.is-style-mabu-faq > summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.is-style-mabu-faq[open] > summary::after {
	content: "\2013"; /* – */
}

.is-style-mabu-faq > summary:hover {
	background: var(--wp--preset--color--light);
}

.is-style-mabu-faq > :not(summary) {
	padding: 0 20px 16px;
	margin: 0;
}

/* Quote/Testimonial: Karte mit Anführungszeichen */
.is-style-mabu-testimonial {
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--md);
	padding: 32px 24px 24px;
	position: relative;
	margin: 0;
}

.wp-block-column > .is-style-mabu-testimonial {
	height: 100%;
}

.is-style-mabu-testimonial::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	left: 16px;
	font-size: 3em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	opacity: 0.22;
	font-family: Georgia, "Times New Roman", serif;
}

.is-style-mabu-testimonial p {
	font-style: italic;
}

.is-style-mabu-testimonial cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ─── Header-Modi (Customize-Panel) ─────────────────────────────── */

/* Breite: Boxed – Header schwebt als Box über der Seite */
body.mabu-header-boxed .site-header {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 0 0 12px 12px;
	box-shadow: var(--wp--preset--shadow--md);
}

/* Verhalten: Fixiert / Auto-Hide.
   WICHTIG: sticky muss auf dem Template-Part-WRAPPER (<header>) liegen,
   nicht auf der Gruppe darin – die Gruppe hätte im gleich hohen Wrapper
   keinen Platz zum Kleben und stünde faktisch still. */
body.mabu-header-fix .wp-site-blocks > header,
body.mabu-header-autohide .wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Eingeloggt: Platz für die Admin-Leiste lassen */
body.admin-bar.mabu-header-fix .wp-site-blocks > header,
body.admin-bar.mabu-header-autohide .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Verhalten: Normal – Header scrollt einfach mit */
body.mabu-header-normal .site-header,
body.mabu-header-normal .wp-site-blocks > header {
	position: static !important;
}

/* Verhalten: Auto-Hide – versteckt sich beim Runterscrollen,
   erscheint beim Hochscrollen (Klasse setzt das Frontend-Script) */
body.mabu-header-autohide .wp-site-blocks > header {
	transition: transform 0.3s ease;
}

body.mabu-header-autohide .wp-site-blocks > header.mabu-header--versteckt {
	transform: translateY(-100%);
}

/* Transparent: Header liegt fest über dem Inhalt und ist am Seiten-
   anfang ohne Hintergrund. Beim Scrollen (Klasse .is-gescrollt vom
   Frontend-Script) bekommt er seinen eigenen Hintergrund zurück.
   Funktioniert am besten mit einer Hero-Sektion ganz oben. */
body.mabu-header-transparent .wp-site-blocks > header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

body.admin-bar.mabu-header-transparent .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.mabu-header-transparent .site-header {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Am Anfang (noch nicht gescrollt) transparent – background-Shorthand
   überschreibt auch eine gesetzte Hintergrundfarbe ODER einen Verlauf. */
body.mabu-header-transparent .wp-site-blocks > header:not(.is-gescrollt) .site-header {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Schrumpfender Header: beim Scrollen werden Innenabstand und Logo
   kleiner. Basis-Effekt – Details lassen sich per CSS überschreiben
   (Selektoren: body.mabu-header-shrink … .is-gescrollt). */
body.mabu-header-shrink .wp-site-blocks > header .site-header {
	transition: padding 0.3s ease;
}

body.mabu-header-shrink .wp-site-blocks > header.is-gescrollt .site-header {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Logo per transform skalieren – immer animierbar (max-height von „auto"
   aus lässt sich nicht weich überblenden und ruckelt). */
body.mabu-header-shrink .wp-site-blocks > header .wp-block-site-logo img {
	transition: transform 0.3s ease;
	transform-origin: left center;
}

body.mabu-header-shrink .wp-site-blocks > header.is-gescrollt .wp-block-site-logo img {
	transform: scale(0.78);
}

/* ─── Conversion-Helfer (Customize-Panel) ───────────────────────── */

/* Scroll-Fortschrittsbalken */
.mabu-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 4px;
	width: 100%;
	transform: scaleX(var(--mabu-progress, 0));
	transform-origin: 0 50%;
	background: var(--wp--preset--color--primary);
	z-index: 1000;
	pointer-events: none;
	will-change: transform;
}

/* Zurück-nach-oben-Button */
.mabu-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
	z-index: 999;
}

.mabu-to-top.is-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mabu-to-top:hover {
	background: var(--wp--preset--color--secondary);
}

/* Sticky CTA-Leiste – Sichtbarkeit über Modifier: --mobile / --desktop
   / --all (gesteuert im Customize-Panel „Anzeigen auf"). */
.mabu-cta-bar {
	display: none;
	gap: 1px;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 998;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.mabu-cta-bar__btn {
	flex: 1;
	text-align: center;
	padding: 14px 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.2s ease;
}

.mabu-cta-bar__btn:nth-child(2) {
	background: var(--wp--preset--color--accent);
}

.mabu-cta-bar__btn:hover {
	opacity: 0.92;
}

/* „Überall" – immer sichtbar */
.mabu-cta-bar--all {
	display: flex;
}

/* nur Smartphone */
@media (max-width: 781px) {
	.mabu-cta-bar--mobile {
		display: flex;
	}

	body.mabu-cta-mobile,
	body.mabu-cta-all {
		padding-bottom: 52px;
	}

	body.mabu-cta-mobile .mabu-to-top,
	body.mabu-cta-all .mabu-to-top {
		bottom: 68px;
	}
}

/* nur Desktop */
@media (min-width: 782px) {
	.mabu-cta-bar--desktop {
		display: flex;
	}

	body.mabu-cta-desktop,
	body.mabu-cta-all {
		padding-bottom: 52px;
	}

	body.mabu-cta-desktop .mabu-to-top,
	body.mabu-cta-all .mabu-to-top {
		bottom: 68px;
	}
}

/* ─── Query pagination ──────────────────────────────────────────── */

.wp-block-query-pagination {
	justify-content: center;
}

.wp-block-query-pagination-numbers .page-numbers {
	padding: 8px 14px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}