/*
Theme Name: Miriam Zillmann
Theme URI: https://miriamzillmann.com
Author: Julian Hilgenberg
Description: Persönliches Block-Theme für Miriam Zillmann — Speakerin, Trainerin, Workshop-Leiterin und Beraterin. Magazin-Charakter mit vollflächigen Blöcken, Farbverläufen und einer Vier-Rollen-Typografie. Alle Schriften selbst gehostet (DSGVO). Farben, Verläufe und Typografie liegen in theme.json und sind zentral austauschbar.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miriamzillmann
Tags: block-theme, full-site-editing, personal, one-column, custom-colors, custom-menu, editor-style, featured-images, block-patterns
*/

/*
 * Der überwiegende Teil des Stylings lebt in theme.json (Tokens, Elemente, Blöcke).
 * Diese Datei ergänzt nur, was theme.json (noch) nicht ausdrücken kann:
 * harte Blockkanten, Label-Systematik-Feinschliff, Verlaufs-Overlays.
 *
 * North-Star-Tokens (§2.1–2.2) und @font-face liegen hier zentral —
 * Werte sind 1:1 in theme.json gespiegelt. Keine Google-Fonts-CDN.
 */

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./assets/fonts/bebas-neue-latin.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("./assets/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("./assets/fonts/dm-sans-italic-latin.woff2") format("woff2");
}
/* Garet (Spacetype): geometrische Grotesk mit breiter Laufweite. Läuft im
   gesamten Theme ausschließlich im Book-Schnitt (400) — Claims, Kicker und
   Labels tragen über Größe, Laufweite und Versalien, nie über Fett. */
@font-face {
	font-family: "Garet";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./assets/fonts/garet-book.woff2") format("woff2");
}
/* Ausnahme mit Absicht: die runden „99“-Anführungszeichen der Canva-Vorlage
   sind die Garet-Heavy-Glyphen. Der Schnitt ist per unicode-range auf genau
   diese Zeichen beschränkt — der Browser lädt ihn nur, wo ein Zitat-Ornament
   (.mz-quotemark) steht, und Garet läuft im Text weiterhin nie fett. */
@font-face {
	font-family: "Garet Quote";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("./assets/fonts/garet-heavy.woff2") format("woff2");
	unicode-range: U+201C-201E, U+2019;
}

:root {
	/* Fläche: reinweiß wie im Speaker-Profil — keine Farbflächen außer der einen
	   schwarzen Sektion. Schwarz ist Grafik (das große Z.), nicht Grund. */
	--white: #FFFFFF;
	--shade: #F4F4F6;
	--ink: #0E0E0E;
	--ink-soft: #5A5A62;

	/* Elektroblau ist im PDF reine Schriftfarbe. Auf Weiß misst #5170FF nur 4.11:1
	   und trägt damit keinen Fließtext — deshalb zwei Tokens: --signal für Display,
	   Labels, Marker und alles ab 24px, --signal-ink (5.73:1) für kleineren Text. */
	--signal: #5170FF;
	--signal-ink: #3D55D8;
	--accent: var(--signal);
	--line: rgba(14, 14, 14, 0.12);

	/* Der einzige Verlauf des Speaker-Profils: ein vertikales Panel auf der
	   Kontaktseite, Rosa oben → Butter unten. Er ist dort kein Seitenhintergrund,
	   sondern eine angeschnittene Fläche neben dem Porträt — genau so wird er hier
	   eingesetzt. Text darauf immer --ink: Signalblau erreicht auf dem rosa Ende
	   nur 2.4:1 und fällt damit durch. */
	--grad-bloom: linear-gradient(180deg, #F3B0F2 0%, #FDF5B9 100%);

	/* Alt-Slugs, solange die Homepage in der DB sie noch referenziert (fallen mit B4). */
	--paper: var(--white);
	--paper-2: var(--shade);
	--coral: var(--signal);
	--marigold: var(--signal);
	--rose: var(--signal);
	--teal: var(--signal);
	--grape: var(--signal);

	--font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	/* Dritte Stimme: Garet für Claims, Kicker, Labels und gemischt gesetzte
	   Editorial-Headlines — dort, wo Bebas zu laut und DM Sans zu neutral wäre.
	   Fällt auf DM Sans zurück, solange die Dateien fehlen. */
	--font-geometric: "Garet", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--fs-x-small: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
	--fs-small: clamp(0.80rem, 0.77rem + 0.14vw, 0.89rem);
	--fs-medium: clamp(0.94rem, 0.90rem + 0.18vw, 1.0625rem);
	--fs-large: clamp(1.25rem, 1.05rem + 0.90vw, 1.75rem);
	--fs-x-large: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
	--fs-xx-large: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
	--fs-display: clamp(2.8rem, 1.8rem + 5.5vw, 6rem);
	--fs-hero: clamp(4rem, 1.5rem + 11.5vw, 13.5rem);

	/* Die Stopps der beiden Verlaufs-Presets als Einzelfarben. Die Presets
	   selbst lassen sich nicht zerlegen, gebraucht werden die Farben aber
	   auch einzeln (Panel-Flächen, Karten-Tönungen, Schrift-Füllungen). */
	--bloom-rose: #F3B0F2;
	--bloom-butter: #FDF5B9;
	--aurora-violet: #7C5CFF;
	--aurora-cyan: #56D3E9;

	/* Der Marken-Wasch: die Verläufe zu einem weichen Hintergrund verdünnt —
	   Creme oben rechts, Rosa in der Mitte, Flieder unten links. Trägt die
	   Angebotsübersicht, das Porträt-Panel und den Verlaufs-Pill der
	   Über-mich-Sektion — ein Verlauf, drei Stellen, damit sie zusammengehören. */
	--mz-wash: linear-gradient(215deg,
		color-mix(in srgb, var(--bloom-butter) 46%, #fff) 0%,
		color-mix(in srgb, var(--bloom-rose) 20%, #fff) 48%,
		color-mix(in srgb, var(--aurora-violet) 13%, #fff) 100%);

	/* Ein Wert fuer den Abstand zwischen den Sektionen. Vorher trug ihn jede
	   Sektion einzeln (24, 54 oder 81 px) — das las sich als Zufall, nicht als
	   Rhythmus. Der Wert selbst lebt seit dem Go-Live-Feinschliff als
	   Spacing-Preset „90 · Sektion" in theme.json (clamp: mobil ~88 px, Desktop
	   ~176 px) und steht damit auch im Editor zur Wahl. Wer die Seite luftiger
	   will, dreht dort. Vorher hier hart clamp(4.5rem, 2.75rem + 6vw, 9.5rem). */
	--mz-section-pad: var(--wp--preset--spacing--90);

	--radius: 4px;
	--label-tracking: 0.14em;

	/* Logo-Band: Höhe ist zugleich der Betrag, um den der Hero unter 100svh
	   bleibt — beides gehört in denselben ersten Viewport. */
	--mz-logobar-h: clamp(84px, 9.5vh, 118px);
	--mz-logobar-gap: clamp(2.5rem, 5vw, 5rem);
	--mz-logobar-logo-h: clamp(19px, 2vw, 28px);
}

html {
	background-color: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
}

body {
	background-color: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	line-height: 1.6;
}

/* Kein Papier-Grain mehr: das Speaker-Profil ist flach und reinweiß. */

/* Display = Bebas Neue. Versalien sind hier keine Option, sondern die Schrift —
   Kleinbuchstaben gibt es nicht. Ein font-weight über 400 erzeugt nur synthetisches
   Fett und verschmiert die schmale Kontur, deshalb bleibt es bei 400. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading:not(.is-style-section-label),
.wp-block-post-title,
.wp-block-site-title,
.has-display-condensed-font-family {
	font-family: var(--font-display) !important;
	/* !important, weil Patterns und der Seiteninhalt in der DB noch inline
	   font-weight 500/600 mitbringen — auf Bebas wäre das synthetisches Fett. */
	font-weight: 400 !important;
	line-height: 0.88;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
/* Editorial-Headlines in Garet: gemischte Schreibweise, eng gesetzt, Book-Schnitt.
   Der Slug „serif" ist historisch (Patterns und DB-Inhalte tragen ihn) und zeigt
   seit dem Garet-Einzug auf dieselbe Familie wie „geometric". */
:is(h1, h2, h3, h4, h5, h6, .wp-block-heading, p).has-serif-font-family,
:is(h1, h2, h3, h4, h5, h6, .wp-block-heading, p).has-geometric-font-family {
	font-family: var(--font-geometric) !important;
	font-weight: 400 !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-xx-large); }
h3 { font-size: var(--fs-x-large); }
h4 { font-size: var(--fs-large); }
h5 { font-size: var(--fs-medium); }
h6 { font-size: var(--fs-small); }
.has-hero-font-size { font-size: var(--fs-hero) !important; }

.wp-block-button .wp-block-button__link,
.wp-element-button,
button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close) {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-medium);
	letter-spacing: 0;
}

/* Vollflächige Sektionen stoßen bündig Kante an Kante aneinander (Marken-Look,
   klare Farbübergänge). Der Freiraum entsteht über die großzügige Innen-Polsterung
   der Sektionen, nicht über durchscheinende Zwischenstreifen. */
.wp-site-blocks .alignfull { margin-block: 0; }
.wp-site-blocks .alignfull:is(.wp-block-cover, .wp-block-group) { margin-block: 0; }

/* Label-Systematik: kleines Versal-Label über Textblöcken.
   Als Block-Style "Section Label" für Absätze/Headings registriert (functions.php). */
.is-style-section-label {
	font-family: var(--font-geometric) !important;
	font-weight: 400;
	font-size: var(--fs-x-small);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ink-soft);
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Display-Condensed: gesperrte Versalien für Kicker und kurze Auszeichnungen. */
.is-style-display-condensed {
	font-family: var(--font-display) !important;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--label-tracking);
	line-height: 0.92;
}

/* Statement: die große Geste des Speaker-Profils — Bebas so groß wie möglich,
   eng gesetzt, in der Signalfarbe. */
.is-style-statement {
	font-family: var(--font-display) !important;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 0.86;
	color: var(--signal);
}

/* --- Anführungszeichen: eine Quelle für alle Zitate.
   Klasse `mz-quotemark` an das Element, über dem das Zeichen stehen soll
   (Absatz, Group, Quote) — es rendert das runde „99“-Zeichen aus der Canva-
   Vorlage als Block darüber. `mz-quotemark--wrap` rahmt stattdessen mit
   offenem und geschlossenem Zeichen (Positionierung übernimmt der Kontext).
   Ornament, kein Text: ::before/::after, damit es nicht mitgelesen und nicht
   mitkopiert wird. Schrift und Grad kommen aus theme.json (custom.quote);
   Größe, Abstand und Farbe stellt jeder Kontext über die drei Variablen ein,
   Form und Schrift bleiben überall dieselben. --- */
.mz-quotemark {
	--mz-quotemark-size: var(--wp--custom--quote--size);
	--mz-quotemark-gap: var(--wp--preset--spacing--20);
	--mz-quotemark-color: currentColor;
}
.mz-quotemark::before,
.mz-quotemark--wrap::after {
	font-family: var(--wp--custom--quote--font-family);
	font-weight: var(--wp--custom--quote--font-weight);
	font-style: normal;
	font-size: var(--mz-quotemark-size);
	/* Die Glyphe sitzt oben im Geviert; ein Zeilenabstand von 1 lässt unter
	   ihr Luft, die das negative Margin wieder einzieht. */
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mz-quotemark-color);
	pointer-events: none;
	user-select: none;
}
.mz-quotemark:not(.mz-quotemark--wrap)::before {
	content: "\201D";
	display: block;
	margin-block: -0.08em calc(var(--mz-quotemark-gap) - 0.42em);
}
.mz-quotemark--wrap::before { content: "\201C"; }
.mz-quotemark--wrap::after  { content: "\201D"; }

/* --- Liquid Glass: is-style-glass-light (auf Verlauf/Video) und
   is-style-glass-tinted (auf Weiß). Tokens in theme.json custom.glass / custom.radius. --- */
.wp-block-button.is-style-glass-light .wp-block-button__link,
.wp-block-button.is-style-glass-tinted .wp-block-button__link,
.wp-block-button .wp-block-button__link,
:where(.wp-block-group, .wp-block-columns).is-style-glass-light,
:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted {
	isolation: isolate;
	/* Schimmer und Rand sind pro Skin unterschiedlich: auf reinweißem Grund wäre
	   weißes Glas unsichtbar, dort trägt der blaue Rand die Kante. */
	--mz-glass-sheen: 26%;
	--mz-glass-rim: color-mix(in srgb, var(--signal) 34%, transparent);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	/* Liquid-Glass-Schimmer: diagonaler Weiß-Verlauf als Specular-Highlight über der Füllung. */
	background-image: linear-gradient(150deg,
		color-mix(in srgb, var(--wp--preset--color--white) var(--mz-glass-sheen), transparent) 0%,
		transparent 46%,
		color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent) 100%);
	box-shadow:
		inset 0 1px 0 var(--wp--custom--glass--highlight),
		inset 0 -10px 18px -12px color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent),
		var(--wp--custom--glass--shadow);
	border: 1px solid var(--mz-glass-rim);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Auf Schwarz und auf Fotos bleibt das Glas weiß wie bisher. */
.wp-block-button.is-style-glass-light .wp-block-button__link,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link,
:where(.wp-block-group, .wp-block-columns).is-style-glass-light {
	--mz-glass-sheen: 42%;
	--mz-glass-rim: color-mix(in srgb, var(--wp--preset--color--white) 42%, transparent);
}

.wp-block-button.is-style-glass-light .wp-block-button__link,
.wp-block-button.is-style-glass-tinted .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
}

:where(.wp-block-group, .wp-block-columns).is-style-glass-light,
:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted {
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-glass-tinted .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted {
	background-color: var(--wp--custom--glass--fill-tinted) !important;
	color: var(--signal-ink) !important;
}

.wp-block-button.is-style-glass-light .wp-block-button__link,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link,
:where(.wp-block-group, .wp-block-columns).is-style-glass-light {
	background-color: var(--wp--custom--glass--fill-light) !important;
	color: var(--wp--preset--color--white) !important;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button.is-style-glass-tinted .wp-block-button__link:hover,
.wp-block-button.is-style-glass-tinted .wp-block-button__link:focus,
.wp-block-button.is-style-glass-tinted .wp-block-button__link:focus-visible,
:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted:hover {
	background-color: var(--wp--custom--glass--fill-tinted-hover) !important;
	color: var(--signal-ink) !important;
	box-shadow:
		inset 0 1px 0 var(--wp--custom--glass--highlight),
		var(--wp--custom--glass--shadow-hover);
}

.wp-block-button.is-style-glass-light .wp-block-button__link:hover,
.wp-block-button.is-style-glass-light .wp-block-button__link:focus,
.wp-block-button.is-style-glass-light .wp-block-button__link:focus-visible,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:hover,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:focus,
:where(.wp-block-group, .wp-block-columns).is-style-glass-light:hover {
	background-color: var(--wp--custom--glass--fill-light-hover) !important;
	color: var(--wp--preset--color--white) !important;
	box-shadow:
		inset 0 1px 0 var(--wp--custom--glass--highlight),
		var(--wp--custom--glass--shadow-hover);
}

/* Liquid-Lift: der Glas-Button hebt sich beim Hover minimal an. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button .wp-block-button__link:hover,
	.wp-block-button.is-style-glass-light .wp-block-button__link:hover,
	.wp-block-button.is-style-glass-tinted .wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}

/* Signalblau als Fokusring: sichtbar auf Weiß wie auf der schwarzen Sektion. */
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.wp-block-button .wp-block-button__link,
	:where(.wp-block-group, .wp-block-columns).is-style-glass-light,
	:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted {
		-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur-mobile)) saturate(var(--wp--custom--glass--saturate));
		backdrop-filter: blur(var(--wp--custom--glass--blur-mobile)) saturate(var(--wp--custom--glass--saturate));
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-block-button.is-style-glass-light .wp-block-button__link,
	.wp-block-cover.is-dark .wp-block-button .wp-block-button__link,
	.has-ink-background-color .wp-block-button .wp-block-button__link,
	:where(.wp-block-group, .wp-block-columns).is-style-glass-light {
		background-color: var(--wp--preset--color--ink) !important;
		color: var(--wp--preset--color--white) !important;
	}
	.wp-block-button .wp-block-button__link,
	.wp-block-button.is-style-glass-tinted .wp-block-button__link,
	:where(.wp-block-group, .wp-block-columns).is-style-glass-tinted {
		background-color: var(--wp--preset--color--white) !important;
		color: var(--wp--preset--color--ink) !important;
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
	}
}

/* Auf dem Bloom-Verlauf trägt nur Schwarz: --signal erreicht auf dem rosa Ende
   2.4:1, --signal-ink 3.4:1 — beides zu wenig für Text. --ink liegt bei 11:1. */
.has-bloom-gradient-background,
.has-bloom-gradient-background :where(p, li, h1, h2, h3, h4, h5, h6) {
	color: var(--ink);
}

/* Text auf Verläufen absichern: optionale Abdunklungsschicht über Cover-Bildern. */
.mz-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,38,58,0) 0%, rgba(18,38,58,0.35) 100%);
	pointer-events: none;
}

/* Pfeil-Trenner im framework-row. */
.mz-arrow { color: var(--wp--preset--color--steel); font-weight: 300; }

/* Split-Layouts: Bild teilt sich eine Kante mit der Farbfläche und füllt die
   volle Spaltenhöhe (full-bleed, keine Rahmen, keine Rundungen). */
.mz-split-media,
.mz-split-media > .wp-block-image,
.mz-split-media img {
	block-size: 100%;
	min-block-size: 100%;
}
.mz-split-media img {
	inline-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Damit die beiden Hälften eines Splits exakt gleich hoch sind. */
.mz-split.wp-block-columns { align-items: stretch; }
.mz-split.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.mz-split.wp-block-columns > .wp-block-column > * { flex: 1 1 auto; }

/* --- Header: weisse Leiste, Marke und Navigation in Signalblau --- */
.mz-header {
	/* Groesse der Wortmarke/Bildmarke; schrumpft beim Scrollen (.is-stuck). */
	--mz-brand-mark: clamp(2.75rem, 2.05rem + 1.9vw, 4rem);
	--mz-header-pad: clamp(1.1rem, 0.8rem + 1vw, 1.9rem);
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--white) !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	border-bottom: 1px solid transparent !important;
	padding-block: var(--mz-header-pad) !important;
	padding-inline: clamp(1.25rem, 3vw, 3.5rem) !important;
	transition: padding 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease,
		background-color 0.28s ease, -webkit-backdrop-filter 0.28s ease, backdrop-filter 0.28s ease;
}
.home .mz-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
}
/* Nach dem Scrollen wird die Leiste zu Glas: halbtransparentes Weiss mit
   Weichzeichner, der Seiteninhalt schimmert weich hindurch. Tokens aus
   theme.json custom.glass, im Ruhezustand oben bleibt sie deckend weiss. */
.mz-header.is-stuck {
	--mz-brand-mark: clamp(2.1rem, 1.8rem + 0.9vw, 2.75rem);
	padding-block: calc(var(--mz-header-pad) * 0.5) !important;
	background-color: color-mix(in srgb, var(--white) 72%, transparent) !important;
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	border-bottom-color: color-mix(in srgb, var(--signal) 18%, transparent) !important;
	box-shadow: 0 12px 30px -24px color-mix(in srgb, var(--ink) 60%, transparent) !important;
}
@media (max-width: 781px) {
	.mz-header.is-stuck {
		-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur-mobile)) saturate(var(--wp--custom--glass--saturate));
		backdrop-filter: blur(var(--wp--custom--glass--blur-mobile)) saturate(var(--wp--custom--glass--saturate));
	}
}
/* Ohne backdrop-filter-Support bleibt die Leiste deckend, sonst waere der Text
   ueber dem durchscheinenden Inhalt schlecht lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mz-header.is-stuck {
		background-color: var(--white) !important;
	}
}

/* Startseite, ganz oben: die Leiste liegt transparent über dem dunklen Hero,
   Marke, Nav und Burger laufen in Weiß — das Video bleibt bis zur Oberkante
   sichtbar. Sobald gescrollt wird (.is-stuck), greift das weiße Glas oben.
   Ausgenommen das geöffnete Mobilmenü (has-modal-open auf <html>): dessen
   Overlay ist weiß, dort müssen die Links wieder blau sein. */
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) {
	background-color: transparent !important;
}
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-brand,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-nav .wp-block-navigation-item__content,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-nav .wp-block-navigation-item__content[aria-current="page"],
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .wp-block-navigation__responsive-container-open {
	color: var(--white);
}
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-brand:hover,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-brand:focus,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-nav .wp-block-navigation-item__content:hover,
html:not(.has-modal-open) .home .mz-header:not(.is-stuck) .mz-nav .wp-block-navigation-item__content:focus {
	color: color-mix(in srgb, var(--white) 78%, transparent);
}

/* Kein Glas-Pill mehr: die Leiste sitzt flach auf Weiss. */
.mz-header .mz-header-bar {
	inline-size: 100%;
	/* Der Kopf laeuft breiter als die 1120er-Inhaltsschiene: Marke sitzt
	   nah an der linken, der letzte Nav-Punkt nah an der rechten Kante. */
	max-inline-size: 1560px;
	margin-inline: auto;
	/* Marke ist zweizeilig, Navigation soll auf Hoehe der Bildmarke sitzen. */
	align-items: flex-start;
	column-gap: var(--wp--custom--header--cta-gap);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Innere Inhalts-Schiene = dieselbe 1120er-Breite wie die Nav.
   Hintergründe bleiben alignfull; Text, Raster und Kacheln nicht. */
.mz-rail,
.mz-stats__row,
.mz-footer__rail {
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
/* Innenseiten: Abstand unter der klebenden Leiste. Home bleibt unterlegt. */
body:not(.home) .wp-site-blocks {
	padding-top: var(--wp--preset--spacing--20);
}

.mz-header .mz-nav-wrap {
	margin-inline-start: auto;
	gap: var(--wp--custom--header--cta-gap);
	/* Auf die Mitte der Bildmarke ausrichten (Nav-Item ist 2.5rem hoch). */
	margin-block-start: max(0px, calc(var(--mz-brand-mark) / 2 - 1.25rem));
	transition: margin 0.28s ease;
}

/* Marke: Bildmarke ueber zweizeiliger Wortmarke, komplett in Signalblau. */
.mz-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.5rem, 0.35rem + 0.45vw, 0.8rem);
	flex-shrink: 0;
	line-height: 1;
	text-decoration: none;
	color: var(--signal);
	transition: color 0.2s ease;
}
.mz-brand__mark {
	display: block;
	line-height: 0;
}
.mz-brand__mark svg,
.mz-brand img {
	display: block;
	height: var(--mz-brand-mark, 2.75rem);
	width: auto;
	fill: currentColor;
	transition: height 0.28s ease;
}
.mz-brand__word {
	display: flex;
	flex-direction: column;
	gap: 0.32em;
	font-family: var(--font-body);
	font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	transition: font-size 0.28s ease;
}
.mz-header.is-stuck .mz-brand__word {
	font-size: clamp(0.6rem, 0.56rem + 0.14vw, 0.7rem);
}
/* Beim Scrollen klappt die Marke von zwei Zeilen auf eine Reihe -
   der Kopf wird dadurch rund ein Drittel flacher. */
.mz-header.is-stuck .mz-brand {
	flex-direction: row;
	align-items: center;
	gap: clamp(0.55rem, 0.4rem + 0.4vw, 0.9rem);
}
.mz-header.is-stuck .mz-brand__word {
	flex-direction: row;
	gap: 0.55em;
}
.mz-header.is-stuck .mz-header-bar { align-items: center; }
.mz-header.is-stuck .mz-nav-wrap { margin-block-start: 0; }
.mz-brand:hover,
.mz-brand:focus {
	text-decoration: none;
	color: var(--signal-ink);
}

.mz-nav,
.mz-nav .wp-block-navigation-item__content {
	font-family: var(--font-body);
}
.mz-header .mz-nav .wp-block-navigation__container {
	/* Versalien mit weiter Laufweite brauchen mehr Luft als die alte Nav. */
	column-gap: clamp(1.15rem, 0.2rem + 2.2vw, 2.75rem);
	row-gap: 0;
}
.mz-header .mz-nav .wp-block-navigation__responsive-container-content {
	position: relative;
}
.mz-nav-morph { display: none !important; }
/* Nav-Links: Versalien, weite Laufweite, Signalblau.
   Fuer den kleinen Schriftgrad --signal-ink (5.73:1 auf Weiss) statt --signal,
   sonst reisst der Kontrast; optisch bleibt es derselbe Blauton. */
.mz-nav .wp-block-navigation-item__content {
	isolation: isolate;
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.5rem;
	text-decoration: none;
	padding-block: var(--wp--custom--header--item-padding-block);
	padding-inline: 0;
	border-radius: 0;
	color: var(--signal-ink);
	font-family: var(--font-body);
	font-size: clamp(0.7rem, 0.63rem + 0.22vw, 0.84rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 1;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: color 0.2s ease;
}
/* Unterstrich waechst aus der Mitte - dezenter Hover ohne Layout-Sprung. */
.mz-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.3rem;
	block-size: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mz-nav .wp-block-navigation-item__content:hover,
.mz-nav .wp-block-navigation-item__content:focus {
	color: var(--signal);
	text-decoration: none;
	opacity: 1;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.mz-nav .wp-block-navigation-item__content:hover::after,
.mz-nav .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
}
.mz-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.mz-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--signal-ink);
	opacity: 1;
	background: none;
	box-shadow: none;
}
.mz-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.mz-nav .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.mz-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* „Coming soon“: Menüpunkte und Textlinks auf noch nicht fertige Unterseiten.
   functions.php entfernt beim Rendern das href (Platzhalter-Link, nicht
   klickbar) und hängt das Label als <span class="mz-soon__tag"> in den Link.
   Der Link bleibt in seiner Farbe (erbt Weiß über dem Hero, Blau im Header,
   Signal im Footer), wird nur leicht zurückgenommen; kein Hover, kein
   Unterstrich. Das Label: winzige Versalien, hauchdünne Pille in currentColor
   — inline neben dem Punkt (Footer, Mobile-Overlay, Textlinks). In der flachen
   Desktop-Leiste ist dafür kein Platz (fünf Pillen sprengen 1280 px), dort
   sitzt es als Hochstellung oben rechts am Menüpunkt. */
.mz-soon__link {
	cursor: default;
	opacity: 0.62;
}
.mz-soon__tag {
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 0.55em;
	padding: 0.28em 0.55em 0.22em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--font-geometric);
	font-size: 0.56rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.85;
}
.mz-nav .mz-soon-item .wp-block-navigation-item__content,
.mz-nav .mz-soon-item .wp-block-navigation-item__content:hover,
.mz-nav .mz-soon-item .wp-block-navigation-item__content:focus,
.mz-footer__nav .mz-soon-item .wp-block-navigation-item__content:hover,
.mz-footer__nav .mz-soon-item .wp-block-navigation-item__content:focus,
.mz-header .is-menu-open .mz-soon-item .wp-block-navigation-item__content,
.mz-header .is-menu-open .mz-soon-item .wp-block-navigation-item__content:hover,
.mz-header .is-menu-open .mz-soon-item .wp-block-navigation-item__content:focus {
	color: inherit;
	opacity: 0.62;
}
.mz-nav .mz-soon-item .wp-block-navigation-item__content::after { content: none; }
/* Desktop-Leiste: Hochstellung statt Pille, Label darf nicht umbrechen. */
.mz-header .wp-block-navigation__responsive-container:not(.is-menu-open) .mz-soon-item .wp-block-navigation-item__label {
	white-space: nowrap;
}
.mz-header .wp-block-navigation__responsive-container:not(.is-menu-open) .mz-soon-item .mz-soon__tag {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	opacity: 0.75;
}
/* Mobile-Overlay: der Menüpunkt ist groß gesetzt, das Label bleibt klein. */
.mz-header .is-menu-open .mz-soon-item .mz-soon__tag {
	margin-inline-start: 0.6em;
	font-size: 0.62rem;
}
/* Textlinks im Inhalt: Unterstrich-Animation aus, Link bleibt als Text stehen. */
.mz-text-link .mz-soon__link,
.mz-text-link .mz-soon__link:hover,
.mz-text-link .mz-soon__link:focus-visible,
.mz-index-card .mz-text-link a.mz-soon__link {
	background-image: none;
	color: var(--ink-soft);
	opacity: 1;
}
/* Leistungskarten: ohne Ziel keine Klickfläche über die ganze Karte und kein
   Hover, der einen Klick verspricht — die Karte bleibt ruhig, Text markierbar. */
.mz-services .mz-index-card .mz-text-link .mz-soon__link::after { content: none; }
.mz-services .mz-index-card:has(.mz-soon__link):hover {
	box-shadow: var(--wp--custom--glass--shadow);
	transform: none;
	border-color: var(--line);
}
.mz-services .mz-index-card:has(.mz-soon__link):hover::before { opacity: 0; }

/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen im Header. */
.mz-header a:focus-visible,
.mz-header button:focus-visible {
	outline: 2px solid var(--signal-ink);
	outline-offset: 4px;
	border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
	.mz-header,
	.mz-header .mz-header-bar,
	.mz-header .mz-nav-wrap,
	.mz-brand,
	.mz-brand__mark svg,
	.mz-brand__word,
	.mz-nav .wp-block-navigation-item__content { transition: none; }
}

/* --- Mobile-Overlay-Nav (unter 600px klappt das Core-Nav in ein Overlay) --- */
/* Burger + Schließen-Icon in Ink, angenehm groß als Tap-Target. */
.mz-header .wp-block-navigation__responsive-container-open,
.mz-header .wp-block-navigation__responsive-container-close {
	color: var(--signal-ink);
	padding: var(--wp--preset--spacing--20);
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mz-header .wp-block-navigation__responsive-container-open svg,
.mz-header .wp-block-navigation__responsive-container-close svg {
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
}
.mz-header .wp-block-navigation__responsive-container-close {
	border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--white);
}
.mz-header .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--signal);
	background-color: var(--white);
}

.mz-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background-color: var(--white);
	background-image: none;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}
/* Wichtig: Der Glas-Backdrop-Filter am Sticky-Header macht dessen
   position:fixed-Kinder (das Overlay) relativ zum Header statt zum Viewport
   (CSS-Containing-Block-Regel für filter/backdrop-filter). Beim geöffneten
   Menü setzt WordPress `has-modal-open` auf <html> — dann den Filter am Header
   aufheben, damit das Overlay wieder am Viewport hängt und den ganzen Schirm füllt. */
.has-modal-open .mz-header,
.has-modal-open .mz-header.is-stuck,
.has-modal-open .mz-header-bar {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.has-modal-open .mz-header.is-stuck {
	background-color: var(--white) !important;
	/* Sofort, nicht animiert: sonst haengt das Overlay fuer einen Moment am Header. */
	transition: none !important;
}
.mz-header .is-menu-open .wp-block-navigation__responsive-container-content {
	margin-block-start: var(--wp--preset--spacing--70);
}
.mz-header .is-menu-open .wp-block-navigation__container {
	gap: 0;
	counter-reset: mz-menu;
}
.mz-header .is-menu-open .wp-block-navigation-item {
	position: relative;
	padding-inline-start: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--signal) 16%, transparent);
	opacity: 0;
	animation: mz-menu-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.mz-header .is-menu-open .wp-block-navigation-item::before { content: none; }
.mz-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal-ink);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: 0;
	min-block-size: 2.75rem;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	opacity: 1;
}
.mz-header .is-menu-open .wp-block-navigation-item__content:hover,
.mz-header .is-menu-open .wp-block-navigation-item__content:focus {
	background-color: transparent;
	box-shadow: none;
	opacity: 0.56;
}
.mz-header .is-menu-open .wp-block-navigation-item__content::after { content: none !important; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.09s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.14s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.19s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.24s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.29s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.34s; }
.mz-header .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.39s; }
@keyframes mz-menu-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mz-header .is-menu-open .wp-block-navigation-item {
		opacity: 1;
		animation: none;
	}
}

@media (min-width: 1280px) {
	.mz-header .wp-block-navigation__responsive-container-open {
		display: none;
	}
}
@media (max-width: 1279px) {
	.mz-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.mz-header .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}
@media (max-width: 599px) {
	/* Auf dem Telefon darf die zweizeilige Marke den Kopf nicht dominieren. */
	.mz-header { --mz-brand-mark: 2.25rem; }
	.mz-header.is-stuck { --mz-brand-mark: 1.9rem; }
	.mz-header .mz-nav-wrap { flex: none; }
	.mz-header .mz-header-bar { column-gap: var(--wp--preset--spacing--20); }
}

/* --- Hero: Standbild/Video vollflächig, dunkle Fläche, zentrierte Copy.
   Der Hintergrund steht wie beim Horizont-Band fest im Viewport, die Sektion
   wandert darüber hinweg (siehe .mz-horizon__bg): Standbild, Video und Scrim
   sind `position: fixed`, der Hero selbst klammert sie per `clip-path` an
   seine Kante. Kein JavaScript, keine Rechnung pro Frame. --- */
.mz-hero.wp-block-cover {
	overflow: hidden;
	/* Eigener Stacking-Context, damit die kompositierte Video-Ebene sicher
	   innerhalb der Kante bleibt und nicht ins Logo-Band ausblutet. */
	isolation: isolate;
	/* `clip-path` beschneidet die fixierten Ebenen auf den Hero, ohne — anders
	   als transform, filter oder will-change — selbst zum Bezugsrahmen für
	   `position: fixed` zu werden. Genau darauf beruht der Effekt. */
	clip-path: inset(0);
	/* Der Hero endet exakt über dem Logo-Band, damit beides in den ersten
	   Viewport passt — harte Kante statt angeschnittener Sektion. */
	min-block-size: calc(100svh - var(--mz-logobar-h)) !important;
	align-items: center !important;
	justify-content: center !important;
	/* Grund unter Bild und Scrim ist Ink: der Hero ist dunkel, die Copy weiß. */
	background-color: var(--ink);
	color: var(--white);
}
/* Die drei Hintergrund-Ebenen stehen im Viewport still. `inset: 0` statt
   einer Höhenangabe: das fixierte Element ist damit exakt der Viewport — kein
   svh/lvh-Raten, und der Hero ist auf jeder Scrollposition vollständig gedeckt.
   Drei Klassen, weil Core die Ebenen mit zwei Klassen auf `absolute` setzt. */
.mz-hero.wp-block-cover .mz-hero__poster,
.mz-hero.wp-block-cover .mz-hero__video,
.mz-hero.wp-block-cover .wp-block-cover__background {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}
/* Scrim in vier Lagen, von hinten nach vorn — bewusst leicht, der Film soll
   sichtbar bleiben:
   1. moderate flächige Abdunklung,
   2. dunkler Kern in der Mitte — er trägt die weiße Copy,
   3. eine weiche Vignette, die die Kanten schließt,
   4. ein schmales dunkles Band ganz oben, unter der transparenten Nav.
   Dazu ein Hauch Rosa aus dem Bloom-Verlauf in zwei Ecken — Markenton,
   bewusst dort, wo keine Schrift steht. */
.mz-hero .wp-block-cover__background,
.mz-hero .wp-block-cover__background.has-background-dim {
	background-color: transparent !important;
	background-image:
		radial-gradient(38% 36% at 0% 0%, rgba(243, 176, 242, 0.16) 0%, rgba(243, 176, 242, 0) 70%),
		radial-gradient(40% 38% at 100% 100%, rgba(243, 176, 242, 0.14) 0%, rgba(243, 176, 242, 0) 72%),
		linear-gradient(
			180deg,
			rgba(14, 14, 14, 0.30) 0%,
			rgba(14, 14, 14, 0) 22%
		),
		radial-gradient(
			ellipse 92% 90% at 50% 50%,
			rgba(14, 14, 14, 0) 62%,
			rgba(14, 14, 14, 0.26) 100%
		),
		radial-gradient(
			ellipse 64% 58% at 50% 52%,
			rgba(14, 14, 14, 0.34) 0%,
			rgba(14, 14, 14, 0.24) 46%,
			rgba(14, 14, 14, 0.08) 78%,
			rgba(14, 14, 14, 0) 100%
		),
		linear-gradient(
			180deg,
			rgba(14, 14, 14, 0.28) 0%,
			rgba(14, 14, 14, 0.30) 45%,
			rgba(14, 14, 14, 0.40) 100%
		) !important;
	opacity: 1 !important;
	z-index: 1;
}
.mz-hero .wp-block-cover__background::before {
	content: none !important;
	display: none !important;
}
/* Standbild trägt den Hero allein; das Video blendet sich darüber, sobald es
   läuft. Beide bekommen dieselbe leichte Abdunklung, sonst springt die
   Helligkeit im Moment des Wechsels. Der Filter liegt auf der Ebene selbst,
   nicht auf einem Vorfahren — er stört das `fixed` also nicht. */
.mz-hero__poster,
.mz-hero__video {
	object-fit: cover;
	object-position: 50% 26%;
	filter: brightness(0.94) contrast(1.04) saturate(0.95);
}
.mz-hero__poster {
	transition: opacity 0.7s ease;
}
.mz-hero__video {
	opacity: 0;
	transition: opacity 0.9s ease;
}
.mz-hero--video-live .mz-hero__video { opacity: 1; }
.mz-hero--video-live .mz-hero__poster { opacity: 0; }
.mz-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
	padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}
.mz-hero::before { content: none; }
/* Z-Monogramm als große Form über dem Film — nach dem Vorbild karinlausch.de,
   wo das Logo-Zeichen fast bildhoch und nur leicht angeschnitten über dem
   Video liegt. Hinter der Copy, beim Scrollen deutlich langsamer als die
   Seite: --mz-parallax liefert reveal.js (±96 px über den Sektionsdurchlauf),
   der Faktor hier macht daraus rund 330 px — die Marke bleibt beim Abscrollen
   sichtbar zurück. Ohne JS steht sie still. */
.mz-hero__mark {
	position: absolute;
	/* Leicht nach rechts geschoben: die Hero-Kante schneidet die Marke nur
	   knapp an, rund 85 % bleiben sichtbar — sie soll als Z lesbar sein, nicht
	   nur als Wasserzeichen ahnbar. */
	inset-inline-end: -12%;
	inset-block-start: 50%;
	z-index: 0;
	/* 128vh entspricht beim Seitenverhältnis des Monogramms (≈1.35:1) etwa
	   der vollen Hero-Höhe; auf schmalen Fenstern begrenzt die Breite. */
	inline-size: min(96vw, 128vh);
	max-inline-size: none;
	margin: 0;
	transform: translateY(-50%) translateY(calc(var(--mz-parallax, 0px) * 3.4));
	will-change: transform;
	pointer-events: none;
	/* Präsenter als ein Wasserzeichen, aber die weiße Marke darf hinter der
	   weißen Copy nicht mitreden — 0.3 war zu laut. */
	opacity: 0.25;
}
.mz-hero__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* Das SVG ist in Ink gezeichnet — über dem Film wird es auf Weiß gedreht. */
	filter: brightness(0) invert(1);
}
.mz-hero__copy {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-inline: auto;
	/* Signalblau für kleine Grade auf dem dunklen Film: #5170FF misst auf dem
	   abgedunkelten Kern nur ~2,8:1. Für Kicker und Hervorhebung wird es
	   deshalb leicht aufgehellt; die große Namenszeile bleibt im reinen Ton. */
	--mz-signal-on-dark: color-mix(in srgb, var(--signal) 66%, var(--white));
}
/* Kicker: die Kernaussage über dem Namen — gesperrte Versalien in Signalblau.
   text-indent gleicht die Sperrung hinter dem letzten Zeichen aus, sonst steht
   zentrierter Text messbar links von der Mitte. */
.mz-hero__kicker {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-family: var(--font-geometric) !important;
	/* Book: der Kicker steht als ruhige Sperrzeile über dem Namen,
	   nicht als zweite Headline. */
	font-weight: 400;
	font-size: clamp(1rem, 0.85rem + 0.8vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	text-transform: uppercase;
	color: var(--mz-signal-on-dark) !important;
}
.mz-hero__copy h1,
.mz-hero__name {
	margin-block: 0 var(--wp--preset--spacing--30);
	/* Der Name darf breiter laufen als Rollenzeile und Kurztext — die
	   Constrained-Breite der Copy-Gruppe gilt für ihn nicht. */
	max-inline-size: none;
	font-family: var(--font-display) !important;
	font-size: var(--fs-hero);
	letter-spacing: -0.03em;
	line-height: 0.86;
	color: var(--white) !important;
}
.mz-hero__name-line {
	display: block;
	color: var(--white);
}
/* Zweite Zeile in Signalblau — dieselbe Zweiteilung wie in der Wortmarke. */
.mz-hero__name-line--accent {
	color: var(--signal);
}
.mz-hero__role {
	margin-block: 0 var(--wp--preset--spacing--30);
	margin-inline: auto;
	max-inline-size: 44em;
	font-family: var(--font-geometric) !important;
	font-weight: 400;
	font-size: clamp(0.95rem, 0.75rem + 0.9vw, 1.55rem);
	line-height: 1.4;
	letter-spacing: var(--label-tracking);
	text-indent: var(--label-tracking);
	text-transform: uppercase;
	/* Weiß statt --signal-ink: der dunkle Blauton existiert nur für Weiß als
	   Grund, auf dem Film wäre er unsichtbar. */
	color: var(--white) !important;
}
.mz-hero__lead {
	margin-block: 0;
	margin-inline: auto;
	max-inline-size: 42em;
	/* Über --fs-medium hinaus: der Hero-Text muss gegen den großen Namen
	   bestehen, sonst wirkt er wie Kleingedrucktes. */
	font-size: clamp(1.05rem, 0.85rem + 0.75vw, 1.6rem) !important;
	line-height: 1.45;
	color: var(--white) !important;
}
/* „Human Skills" ist der Begriff, an dem der Satz hängt — Signalblau statt
   nur fett, in der aufgehellten Stufe für den dunklen Grund. */
.mz-hero__lead strong {
	font-weight: 700;
	color: var(--mz-signal-on-dark);
}
.mz-hero__copy .wp-block-buttons,
.mz-hero__cta {
	justify-content: center !important;
}
/* CTA auf dem dunklen Film: helles Glas mit weißer Schrift, dieselbe Haut wie
   is-style-glass-light. Vier Klassen, damit der Selektor auch dann gewinnt,
   wenn der Button im Inhalt noch als glass-tinted steht (die getönte Haut
   hängt weiter hinten in der Datei an drei Klassen mit !important). */
.mz-hero .wp-block-button .wp-block-button__link.wp-element-button {
	font-size: var(--fs-medium) !important;
	padding-inline: 2.2em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent) !important;
	background-color: var(--wp--custom--glass--fill-light) !important;
	color: var(--wp--preset--color--white) !important;
}
.mz-hero .wp-block-button .wp-block-button__link.wp-element-button:hover,
.mz-hero .wp-block-button .wp-block-button__link.wp-element-button:focus,
.mz-hero .wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--custom--glass--fill-light-hover) !important;
	color: var(--wp--preset--color--white) !important;
}
.mz-hero-anchor {
	display: block;
	block-size: 0;
	overflow: hidden;
}
@media (max-width: 781px) {
	.mz-hero__copy h1,
	.mz-hero__name { font-size: var(--fs-display); }
	/* Hochformat schneidet seitlich weg — das Gesicht muss ins obere Drittel. */
	.mz-hero__poster { object-position: 50% 20%; }
	/* Auf dem Telefon steht die Marke enger an der Copy — kleiner und leiser. */
	.mz-hero__mark {
		inset-inline-end: -42%;
		inline-size: min(110vw, 30rem);
		opacity: 0.12;
	}
	/* Auf schmalen Screens lädt reveal.js das Video gar nicht erst nach. */
	.mz-hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	/* Ohne Bewegung wird aus dem fixierten Hintergrund ein normaler
	   Sektionshintergrund — wie beim Horizont-Band. */
	.mz-hero.wp-block-cover { clip-path: none; }
	.mz-hero.wp-block-cover .mz-hero__poster,
	.mz-hero.wp-block-cover .mz-hero__video,
	.mz-hero.wp-block-cover .wp-block-cover__background {
		position: absolute;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mz-anim .mz-hero__kicker,
	.mz-anim .mz-hero__name-line,
	.mz-anim .mz-hero__role,
	.mz-anim .mz-hero__lead,
	.mz-anim .mz-hero__cta {
		opacity: 0;
		transform: translateY(18px);
		animation: mz-hero-rise 0.75s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
	}
	.mz-anim .mz-hero__kicker { animation-delay: 0.04s; }
	.mz-anim .mz-hero__name-line:nth-child(1) { animation-delay: 0.16s; }
	.mz-anim .mz-hero__name-line:nth-child(2) { animation-delay: 0.28s; }
	.mz-anim .mz-hero__role { animation-delay: 0.44s; }
	.mz-anim .mz-hero__lead { animation-delay: 0.54s; }
	.mz-anim .mz-hero__cta { animation-delay: 0.68s; }
	.mz-anim .mz-hero__copy h1:not(:has(.mz-hero__name-line)),
	.mz-anim .mz-hero__copy > .wp-block-buttons:not(.mz-hero__cta) {
		opacity: 0;
		transform: translateY(18px);
		animation: mz-hero-rise 0.75s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
	}
	.mz-anim .mz-hero__copy h1:not(:has(.mz-hero__name-line)) { animation-delay: 0.16s; }
	.mz-anim .mz-hero__copy > .wp-block-buttons:not(.mz-hero__cta) { animation-delay: 0.68s; }
}
@keyframes mz-hero-rise {
	to { opacity: 1; transform: none; }
}

/* --- Logo-Band: helles Band mit harter Kante, direkt unter dem Hero --- */
.mz-logobar {
	position: relative;
	display: flex;
	align-items: center;
	block-size: var(--mz-logobar-h);
	overflow: hidden;
	padding-block: 0 !important;
}
.mz-logobar::before { content: none !important; }
.mz-logobar__track {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Die Spur ist Flex-Item von .mz-logobar. Ohne `flex: none` greift das
	   voreingestellte flex-shrink: 1 und staucht sie trotz `max-content` auf
	   Containerbreite — die Keyframe verschiebt dann -50 % einer zu schmalen
	   Box statt genau einer Logo-Hälfte, und die Schleife springt sichtbar. */
	flex: none;
	inline-size: max-content;
	min-inline-size: 100%;
	max-inline-size: none;
	margin: 0;
}
.mz-logobar__group {
	display: flex;
	align-items: center;
	flex: none;
	gap: var(--mz-logobar-gap);
	padding-inline-end: var(--mz-logobar-gap);
	margin: 0;
}
.mz-logobar__logo {
	flex: none;
	margin: 0;
}
.mz-logobar__logo img {
	display: block;
	block-size: var(--mz-logobar-logo-h);
	inline-size: auto;
	max-inline-size: none;
	filter: grayscale(1);
	opacity: 0.55;
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.mz-logobar__logo:hover img {
	filter: grayscale(0);
	opacity: 0.9;
}
/* Erst wenn reveal.js die zweite Hälfte geklont hat, wird geschoben —
   sonst bleibt eine ruhige, zentrierte Reihe stehen. Die Dauer setzt das
   Script anhand der Bandbreite, damit das Tempo unabhängig von der
   Logo-Anzahl sehr langsam bleibt. */
.mz-logobar--running .mz-logobar__track {
	justify-content: flex-start;
	min-inline-size: 0;
	animation: mz-logobar-scroll 72s linear infinite;
	will-change: transform;
}
.mz-logobar--running:hover .mz-logobar__track,
.mz-logobar--running:focus-within .mz-logobar__track {
	animation-play-state: paused;
}
@keyframes mz-logobar-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.mz-logobar--running .mz-logobar__track { animation: none; }
}

/* --- Vision: Weiß, Kopfzeile volle Breite, darunter Split 50/50 mit großem
   Freisteller über dem Wasch-Panel --- */
/* Das Z-Monogramm ist bewusst breiter als seine Spalte und läuft über den Rand.
   Ohne Clip an der Sektion wächst dadurch das Dokument: auf 375 px ragte es bis
   408 px und erzeugte eine horizontale Scrollleiste. Nebenwirkung war eine
   überhängende Navigationsleiste — die Kopfzeile ist `position: fixed` und
   bemisst sich am verbreiterten Layout-Viewport, wurde also 409 statt 375 px
   breit. `clip` statt `hidden`, damit kein Scroll-Container entsteht.
   `.mz-stats` und `.mz-work` beschneiden ihre Marken aus demselben Grund. */
.mz-vision { overflow: clip; }

/* --- Kopfzeile: Claim, Lead und Skills stehen zentriert über die ganze Schiene,
   nicht mehr in der rechten Spalte. Zwischen Kopfzeile und Split liegt bewusst
   viel Luft (Entwurf: "viel Platz dazwischen"). */
.mz-vision__head {
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--70);
}
.mz-vision__head > * { margin-block: 0; }
.mz-vision__head > * + * { margin-block-start: var(--wp--preset--spacing--30); }
/* Der Claim in der Bebas — wie alle Sektionstitel, nur eine Stufe größer. Die
   globale Heading-Regel gibt Schrift und Gewicht vor; hier nur Größe und Luft.
   Die Preset-Klasse (has-display-font-size) wiegt sonst gleich schwer. */
.mz-vision .mz-vision__claim,
.mz-vision .mz-vision__claim.has-display-font-size {
	font-size: var(--fs-display);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-wrap: balance;
	hyphens: none;
	-webkit-hyphens: none;
}
.mz-vision__head .mz-vision__lead {
	max-inline-size: 38em;
	margin-inline: auto;
	font-size: var(--fs-medium);
	line-height: 1.55;
}
/* Skills-Zeile: gesperrte Bebas (Block-Style display-condensed) — Absätze
   erben die Bebas nicht, deshalb hier noch einmal explizit. */
.mz-vision__head .mz-vision__skills,
.mz-vision__head .mz-vision__skills.is-style-display-condensed {
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--font-display) !important;
	font-size: var(--fs-large);
	font-weight: 400;
	letter-spacing: 0.32em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Der Split läuft über die volle Viewport-Breite (alignfull, nicht die
   1120er-Schiene): so bleibt der Zwischentitel „Business Mind. Human at
   Heart.“ auf einer Zeile. Innen der Root-Seitenabstand als Gasse zum Rand.
   Spalten-Abstand bewusst weiter als der Block-Standard: Porträt und Copy
   brauchen eine sichtbare Gasse, sonst klebt der Text am Verlaufs-Panel. */
.mz-vision__row.wp-block-columns {
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--style--root--padding-left, clamp(1.25rem, 0.5rem + 3vw, 3rem));
}
/* Gleicher Scroll-Effekt wie in „Work is changing“ — nur spiegelverkehrt: dort
   klebt das Foto, hier ist das Porträt das lange Element. Deshalb klebt die
   Copy unter der Leiste und läuft erst mit, wenn das Bild zu Ende ist. Dafür
   darf die Spalte nicht gestreckt werden (Core setzt `align-items: initial
   !important` an den Columns, also align-self; das Pattern trägt zusätzlich
   verticalAlignment: top). */
.mz-vision__copy {
	align-self: flex-start;
	position: sticky;
	inset-block-start: clamp(5rem, 4rem + 2vw, 6.5rem);
	/* Container für den Zwischentitel: seine Schriftgröße richtet sich nach der
	   Spaltenbreite (cqi), nicht nach dem Viewport — siehe .mz-vision__eyebrow. */
	container-type: inline-size;
}
/* Die Copy setzt nicht am Scheitel des Porträts an, sondern erst auf Höhe des
   Wasch-Panels (das beginnt bei 12 % der Bühne, bei 38rem Breite ≈ 7rem). Als
   Außenabstand, nicht als Polsterung: der klebende Kasten soll direkt unter
   der Leiste sitzen, nicht erst eine Polsterung tiefer. Kind-Kombinator, weil
   Core `.is-layout-flex > :is(*, div) { margin: 0 }` sonst gleich schwer wiegt. */
.mz-vision__row > .mz-vision__copy {
	margin-block-start: clamp(3.5rem, 2rem + 4.5vw, 7.5rem);
}

/* --- Bühne: Wasch-Panel, Porträt, Monogramm.
   Reihenfolge der Ebenen von hinten nach vorn:
   1. ::before  — der Marken-Wasch (derselbe wie in der Angebotsübersicht),
                  liegt als Rechteck hinter dem Porträt und endet oben
                  unterhalb des Kopfes, damit das Porträt herausragt.
   2. Porträt   — freigestellt, füllt die Spalte fast ganz, bündig mit der
                  Unterkante des Panels.
   3. Z-Monogramm — weiß und halbtransparent ÜBER allem: auf dem Verlauf hellt
                  es auf, auf dem dunklen Blazer wird es grau. Genau dieser
                  Doppeleffekt steht so im Entwurf. */
.mz-vision__stage {
	position: relative;
	overflow: visible;
	border-radius: 0;
	padding: 0 !important;
	background: none !important;
	min-block-size: 18rem;
	/* Auf der vollen Breite würde die Bühne die halbe Seite füllen — gedeckelt,
	   damit das Porträt nicht größer als nötig wird. */
	max-inline-size: 38rem;
	margin-inline: auto;
}
/* Über mich ohne Gelb: der Wasch behält Rosa und Flieder, der Butter-Stopp
   wird Weiß. Gilt nur für das Porträt-Panel dieser Sektion (::before erbt
   --mz-wash von .mz-vision) — Angebote und Pille bleiben beim vollen Wasch.
   Anteile bewusst etwas über dem Basis-Wasch (20/13 %): das Panel wirkte
   neben dem Porträt zu blass. */
.mz-vision {
	--mz-wash: linear-gradient(215deg,
		var(--white) 0%,
		color-mix(in srgb, var(--bloom-rose) 25%, #fff) 48%,
		color-mix(in srgb, var(--aurora-violet) 16%, #fff) 100%);
}
.mz-vision__stage::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: 12% 0;
	z-index: 1;
	border-radius: 20px;
	background-image: var(--mz-wash);
	pointer-events: none;
}
.mz-vision__portrait {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	background: transparent !important;
}
.mz-vision__portrait img {
	display: block;
	inline-size: 92%;
	max-inline-size: none;
	margin-inline: auto;
	block-size: auto;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
	background: transparent !important;
}
.mz-vision__mark {
	position: absolute;
	inset-inline: 4% auto;
	inset-block: auto 5%;
	z-index: 3;
	inline-size: 66%;
	margin: 0 !important;
	pointer-events: none;
	/* Auf dem fast weißen Wasch braucht das Weiß mehr Deckung als auf dem
	   satten Bloom-Verlauf, sonst verschwindet die Marke. */
	opacity: 0.7;
	/* Beim Scrollen läuft die Marke über das Porträt: --mz-parallax liefert
	   reveal.js (±96 px über den Sektionsdurchlauf), gegenläufig wie beim
	   Keynote-Zitat, nur etwas leiser — die Stage beschneidet nicht, die
	   Marke soll nicht bis in die Kopfzeile wandern. */
	transform: translateY(calc(var(--mz-parallax, 0px) * -2.4));
	will-change: transform;
}
.mz-vision__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* Das Monogramm liegt als Ink-SVG vor — hier wird es zu reinem Weiß. */
	filter: brightness(0) invert(1);
}

/* --- Copy: im Entwurf steht der ganze Block in Signalblau, nichts in Ink. */
.mz-vision__copy,
.mz-vision__copy h3,
.mz-vision__copy p {
	color: var(--wp--preset--color--signal);
}
.mz-vision__copy > * { margin-block: 0; }
.mz-vision__copy > * + * { margin-block-start: var(--wp--preset--spacing--30); }
/* Eyebrow als Zwischentitel: breite Garet Book — nicht die Bebas. Doppelte
   Klasse, weil die globale Bebas-Regel `.wp-block-heading:not(...)` schon (0,2,0)
   wiegt und mit !important setzt. */
.mz-vision .mz-vision__copy h3,
.mz-vision .mz-vision__eyebrow,
.mz-vision .mz-vision__eyebrow.has-large-font-size {
	font-family: var(--font-geometric) !important;
	/* „Business Mind. Human at Heart.“ soll eine Zeile bleiben. Die Spalte ist
	   zwischen Tablet und ~1330 px dafür zu schmal — deshalb skaliert die Größe
	   mit der Spaltenbreite (Garet: Zeile ≈ 20 × Schriftgröße, 4.8cqi lässt ≈ 4 %
	   Luft) und bleibt zwischen den Presets M und L eingeklammert. Bricht sie auf
	   sehr schmalen Screens doch um, sorgt balance für „… Mind. / Human at Heart.“
	   statt einer Waise. */
	font-size: clamp(var(--fs-medium), 4.8cqi, var(--fs-large)) !important; /* Core: .has-large-font-size ist !important */
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
	hyphens: none;
	-webkit-hyphens: none;
}
.mz-vision__copy p {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.55;
	max-inline-size: 34em;
}
.mz-vision__copy strong { font-weight: 700; }
/* Das Credo als Zitat: das Anführungszeichen kommt aus .mz-quotemark (eine
   Quelle für alle Zitate), darunter die Zeile in großen Versalien — leicht,
   nicht fett, zentriert. Nutzt die volle Spaltenbreite neben dem Porträt in
   der Stufe XX-Large — derselben Obergrenze wie das Keynote-Zitat. */
.mz-vision .mz-vision__creed,
.mz-vision .mz-vision__creed.has-xx-large-font-size {
	/* Deutlich abgesetzt vom Lauftext — anderthalbfache größte Stufe. */
	margin-block: calc(var(--wp--preset--spacing--80) * 1.5) 0;
	max-inline-size: none;
	/* Preset XX-Large, gedeckelt an der Spaltenbreite (Container wie beim
	   Zwischentitel): „MENSCHLICHKEIT“ misst in Garet-Versalien ≈ 8,3 × Schrift-
	   größe; 11.5cqi lässt ≈ 4 % Luft, damit das Wort zwischen Tablet und
	   ~1050 px nicht über die Spalte läuft oder mitten im Wort bricht. */
	font-size: min(var(--wp--preset--font-size--xx-large), 11.5cqi) !important; /* Core: .has-xx-large-font-size ist !important */
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--wp--preset--color--signal);
	--mz-quotemark-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem);
}

@media (max-width: 781px) {
	.mz-vision__head { margin-block-end: var(--wp--preset--spacing--60); }
	/* Die festen Umbrüche aus dem Entwurf sind für die Desktop-Breite gesetzt —
	   schmal erzeugen sie Waisen ("das," allein auf der Zeile). */
	.mz-vision__head .mz-vision__lead br,
	.mz-vision__head .mz-vision__skills br { display: none; }
	.mz-vision__head .mz-vision__skills { letter-spacing: 0.2em; }
	.mz-vision__row.wp-block-columns { align-items: stretch; }
	/* Gestapelt: erst das Bild, dann der Text; nichts klebt. */
	.mz-vision__copy { position: static; }
	.mz-vision__row > .mz-vision__copy { margin-block-start: 0; }
	.mz-vision .mz-vision__creed,
	.mz-vision .mz-vision__creed.has-xx-large-font-size { margin-block-start: var(--wp--preset--spacing--60); }
	.mz-vision__media { margin-block-end: var(--wp--preset--spacing--40); }
	.mz-vision__stage::before { inset-block-start: 14%; }
	.mz-vision__portrait img { inline-size: 84%; max-inline-size: 24rem; }
	.mz-vision__mark { inline-size: 56%; }
	.mz-vision__copy p { max-inline-size: none; }
}
/* --- Zahlenband: der Bloom-Verlauf aus dem PDF + Ink-Typo.
   Die Sektion trägt den Verlauf schon als Blockhintergrund (Preset `bloom`) —
   das ist der Stand ohne JavaScript. Die ::before-Ebene legt denselben Verlauf
   übergroß darüber und verschiebt ihn beim Scrollen: der Parallax-Effekt.
   Weil beide Ebenen identisch sind, fällt die Ebene bei deaktiviertem JS
   einfach mit dem Untergrund zusammen — kein Sprung, kein leerer Kasten. --- */
.mz-stats {
	position: relative;
	color: var(--ink);
	overflow: hidden;
	isolation: isolate;
}
.mz-stats::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	/* 140 % Höhe mit gleichmäßigem Überstand oben und unten: der Verlauf hat
	   in beide Scrollrichtungen Material und läuft nie leer. */
	inset-block-start: -20%;
	block-size: 140%;
	z-index: -1;
	background: var(--grad-bloom);
	transform: translate3d(0, var(--mz-parallax-bg, 0px), 0);
	will-change: transform;
	pointer-events: none;
}
.mz-stats__row.wp-block-columns { align-items: center; }
.mz-stats__mark {
	margin: 0;
	inline-size: 140%;
	margin-inline-start: -18%;
	opacity: 0.14;
	filter: brightness(0) saturate(100%) invert(9%) sepia(18%) saturate(694%) hue-rotate(346deg) brightness(95%) contrast(94%);
	pointer-events: none;
	/* Läuft mit dem Verlauf nach unten, aber schneller als er (44 px) — der
	   Unterschied der beiden Ebenen ist die Tiefe. */
	transform: translateY(calc(var(--mz-parallax, 0px) * 1.8));
	will-change: transform;
}
.mz-stats__mark img { display: block; inline-size: 100%; block-size: auto; }
.mz-stats__figures.wp-block-column > .mz-stats__item + .mz-stats__item {
	margin-block-start: var(--wp--preset--spacing--40);
}
.mz-stats__figure { margin: 0; font-variant-numeric: tabular-nums; }
.mz-stats__label {
	margin-block: var(--wp--preset--spacing--20) 0;
	line-height: 1.6;
}

/* --- Work isn't working: dunkler Kontrapunkt zwischen Zahlenband und Angeboten.
   Ink-Fläche, Paper-Typo, Coral als einzige Akzentfarbe. Der Kicker läuft hier
   auf voller Deckkraft — auf Ink würde 55 % den Kontrast unter AA drücken. --- */
.mz-work {
	position: relative;
	overflow: hidden;
}
.mz-work .mz-rail { position: relative; z-index: 1; }
.mz-work > .mz-work__mark + .mz-rail { margin-block-start: 0; }
.mz-work h2 { margin-block: 0 var(--wp--preset--spacing--20); }
.mz-work__lead {
	margin-block: var(--wp--preset--spacing--20) 0;
	max-inline-size: 36em;
}
.mz-work__mark {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -4%;
	z-index: 0;
	inline-size: min(48vw, 32rem);
	max-inline-size: none;
	margin: 0;
	/* Beim Scrollen läuft das Wasserzeichen langsam mit — --mz-parallax
	   liefert reveal.js, die Sektion ist dort registriert. */
	transform: translateX(32%) translateY(calc(var(--mz-parallax, 0px) * 1.8));
	will-change: transform;
	pointer-events: none;
	/* Das Z ist in Ink gezeichnet — auf der Ink-Fläche wird es hell gedreht und
	   deutlich zurückgenommen, sonst konkurriert es mit dem Index. */
	filter: invert(1);
	opacity: 0.055;
}
.mz-work__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}
/* Mobil fällt das Wasserzeichen weg, statt hinter der Headline zu kleben. */
@media (max-width: 781px) {
	.mz-work__mark { display: none; }
}
/* --- Sektionsrhythmus.
   Alle inhaltstragenden Sektionen atmen im selben Takt. `!important`, weil
   die Blöcke ihre Polsterung als Inline-Style aus den Block-Attributen
   mitbringen. Ausgenommen bleiben der Hero (100 svh, seine Höhe kommt nicht
   aus der Polsterung), das Logo-Band und das Zahlenband — beide sind Bänder
   und keine Sektionen — sowie das Keynote-Zitat, das randlos an seine
   Nachbarn anschließt. */
.mz-vision,
.mz-shift,
.mz-work,
.mz-offer,
.mz-speaking,
.mz-voices,
.mz-linkedin,
.mz-podcast,
.mz-quote,
.mz-faq,
.mz-cta {
	padding-block: var(--mz-section-pad) !important;
}
/* Das Zahlenband bleibt schmaler als eine Sektion — es ist ein Übergang
   zwischen zweien, keine eigene. */
.mz-stats {
	padding-block: calc(var(--mz-section-pad) * 0.6) !important;
}

/* Die Angebotsübersicht liegt nicht mehr auf Weiß, sondern auf dem Marken-Wasch
   (--mz-wash, :root). Als `background-image`, damit das Weiß der Blockfarbe
   als Grundschicht liegen bleibt. */
.mz-offer {
	background-image: var(--mz-wash);
}

/* Verlaufs-Akzent: feine Farbverlaufs-Linie am Kopf der ruhigen Editorial-Sektionen.
   Setzt einen Marken-Akzent und trennt zugleich zwei aneinanderstoßende Creme-Flächen. */
.mz-speaking,
.mz-podcast,
.mz-quote,
.mz-faq {
	position: relative;
}
.mz-speaking::before,
.mz-podcast::before,
.mz-quote::before,
.mz-faq::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 3px;
	background: var(--wp--preset--gradient--sunset);
	pointer-events: none;
}

/* Kacheln als einzelne, abgerundete Tiles statt nahtlosem Haarlinien-Raster. */
.mz-services.mz-index-grid.wp-block-group {
	gap: var(--wp--preset--spacing--20);
	background-color: transparent;
}
.mz-services .mz-index-card {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: var(--wp--custom--glass--shadow);
	transition: box-shadow 0.25s ease, transform 0.25s ease,
		border-color 0.25s ease, background-color 0.25s ease;
}
.mz-services .mz-index-card:hover,
.mz-services .mz-index-card:focus-within {
	box-shadow: var(--wp--custom--glass--shadow-hover);
	transform: translateY(-2px);
}
/* Weiße Karten mit Haarlinie statt vier gleichen Blauflächen: seit B1 zeigen
   coral/marigold/rose/teal auf dieselbe Farbe, aus dem Color-Blocking waren
   vier identische Kacheln geworden — und direkt darunter folgt der CTA als
   weitere Vollfläche. Im Ruhezustand trägt nur die Ziffer den Akzent; beim
   Ansteuern wird die eigene Tönung der Karte kräftiger — kein Sprung ins
   Elektroblau. Die erste Karte bleibt ohne Sonderfarbe die Leitkarte — über
   Breite, Ziffer und Titelgröße. */
.mz-services .mz-index-card {
	position: relative;
	/* Hält das ::before mit z-index:-1 innerhalb der Karte (über ihrem
	   Hintergrund, unter dem Inhalt) statt hinter der ganzen Sektion. */
	isolation: isolate;
	background-color: var(--white);
	background-image: linear-gradient(115deg, color-mix(in srgb, var(--mz-card-accent) var(--mz-card-tint-rest), #fff) 0%, #fff 70%);
	border: 1px solid var(--line);
}
/* Jede Karte bekommt ihre eigene blasse Tönung — vier unterscheidbare Flächen
   statt vier gleicher, aber weit unterhalb von Color-Blocking: die Ziffer
   bleibt der Akzent, die Fläche gibt nur eine Richtung. `--mz-card-tint-rest`
   ist die Mischstärke in Ruhe, `--mz-card-tint-hover` die beim Ansteuern —
   die Pastelltöne (Rose, Butter) brauchen deutlich mehr Anteil als die satten. */
.mz-services .mz-index-card:nth-of-type(1) { --mz-card-accent: var(--signal);        --mz-card-tint-rest: 15%; --mz-card-tint-hover: 38%; }
.mz-services .mz-index-card:nth-of-type(2) { --mz-card-accent: var(--aurora-violet); --mz-card-tint-rest: 13%; --mz-card-tint-hover: 34%; }
.mz-services .mz-index-card:nth-of-type(3) { --mz-card-accent: var(--bloom-rose);    --mz-card-tint-rest: 22%; --mz-card-tint-hover: 60%; }
.mz-services .mz-index-card:nth-of-type(4) { --mz-card-accent: var(--bloom-butter);  --mz-card-tint-rest: 62%; --mz-card-tint-hover: 100%; }
/* Die kräftigere Tönung liegt als eigene Schicht darunter und blendet nur
   ihre Deckkraft ein — background-image selbst ließe sich nicht animieren. */
.mz-services .mz-index-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(115deg, color-mix(in srgb, var(--mz-card-accent) var(--mz-card-tint-hover), #fff) 0%, color-mix(in srgb, var(--mz-card-accent) calc(var(--mz-card-tint-hover) / 4), #fff) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
/* Die ganze Karte ist die Klickfläche — sonst verspricht der Hover etwas, das
   nur der kleine Link am Fuß einlöst. Umgesetzt über den vorhandenen Link
   („stretched link“), damit pro Karte genau ein Ziel im Tab-Fokus liegt und
   kein zweiter, gleichlautender dazukommt. Nebenwirkung: Text in der Karte
   lässt sich nicht mehr markieren — der Preis für eine ehrliche Klickfläche. */
.mz-services .mz-index-card .mz-text-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Fokusring um die ganze Karte statt nur um die drei Wörter am Fuß. */
.mz-services .mz-index-card:has(.mz-text-link a:focus-visible) {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}
/* Den inneren Ring nur dort abschalten, wo der äußere wirklich greift —
   sonst stünde bei fehlendem :has()-Support gar keine Fokusmarkierung mehr da. */
.mz-services .mz-index-card:has(.mz-text-link a:focus-visible) .mz-text-link a:focus-visible {
	outline: none;
}
.mz-services .mz-index-card .mz-index__num {
	color: var(--signal);
	transition: color 0.25s ease;
}
/* :focus-within, damit die Karte auch beim Durchtabben umschlägt. */
.mz-services .mz-index-card:hover,
.mz-services .mz-index-card:focus-within {
	border-color: color-mix(in srgb, var(--mz-card-accent) 45%, var(--line));
}
.mz-services .mz-index-card:hover::before,
.mz-services .mz-index-card:focus-within::before {
	opacity: 1;
}
.mz-services .mz-index-card:hover .mz-text-link a,
.mz-services .mz-index-card:focus-within .mz-text-link a {
	--mz-underline: var(--ink);
}

/* --- Haltung-Index: Haarlinien statt Flächen ---
   Vier Zeilen über die 1120er-Schiene: links Versal-Label und Titel, rechts der
   Erklärsatz. Bewusst ohne Ziffern — 01–04 bleiben das Erkennungsmerkmal der
   Angebotskacheln. `--mz-hairline` ist keine neue Design-Farbe, sondern die
   `--line`-Haarlinie für dunklen Grund gedreht (Paper statt Ink). */
.mz-creed {
	--mz-hairline: color-mix(in srgb, var(--paper) 16%, transparent);
	border-block-end: 1px solid var(--mz-hairline);
}
.mz-creed.wp-block-group > * { margin-block-start: 0 !important; }

.mz-creed__row.wp-block-columns {
	align-items: flex-start;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--mz-hairline);
}
.mz-creed__label.is-style-section-label {
	margin-block: 0;
	opacity: 1;
}
.mz-creed__title {
	margin-block: var(--wp--preset--spacing--20) 0 !important;
	font-family: var(--font-display) !important;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-inline-size: 20ch;
}
.mz-creed__text {
	margin-block: 0;
	max-inline-size: 34em;
	line-height: 1.6;
	color: color-mix(in srgb, var(--paper) 74%, transparent);
}

/* Ab Tablet startet der Erklärsatz optisch auf Titelhöhe statt auf Labelhöhe:
   Label-Zeilenhöhe plus Titelabstand, minus dem größeren Durchschuss des
   Fließtexts. Mobil entfällt der Versatz, weil die Zeile stapelt. */
@media (min-width: 782px) {
	.mz-creed__row .wp-block-column:last-child {
		padding-block-start: calc(var(--fs-x-small) * 1.2 + var(--wp--preset--spacing--20) - 0.24em);
	}
}

/* --- Angebote / Haltung: Magazin-Index (Joy-Vollfarbe, Ziffern tragen) --- */
.mz-offer .mz-rail > .is-style-section-label,
.mz-topics .mz-rail > .is-style-section-label { opacity: 0.55; }
.mz-offer h2,
.mz-topics h2 { margin-block: 0; }

/* Index-Grid: Color-Blocking, 1px Paper-Fuge statt Schatten/Radius. */
.mz-index-grid.wp-block-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	align-items: stretch;
	background-color: var(--line);
	padding: 0;
}
.mz-index-grid.wp-block-group > * {
	margin-block-start: 0 !important;
}

.mz-index-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0 !important;
	padding: var(--wp--preset--spacing--40) !important;
	border-radius: 0;
	box-shadow: none;
	min-block-size: 100%;
	color: var(--ink);
}
.mz-index-card.wp-block-group > *,
.mz-index-card.wp-block-group > * + * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.mz-index-card.wp-block-group > * + * {
	margin-block-start: var(--wp--preset--spacing--20) !important;
}
.mz-index-card h3 {
	font-family: var(--font-display) !important;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-inline-size: 18ch;
}
.mz-index-card > p.has-medium-font-size,
.mz-index-card > .wp-block-list {
	max-inline-size: 36em;
	color: var(--ink);
}
.mz-index-card .wp-block-list {
	padding-inline-start: 1.1em;
}
.mz-index-card .wp-block-list li {
	margin-block-start: var(--wp--preset--spacing--20);
	line-height: 1.55;
}
.mz-index-card .wp-block-list li:first-child { margin-block-start: 0; }
.mz-index-card .wp-block-list li::marker { color: var(--ink); }

/* 01 · SPEAKING — Ziffer trägt, Label ist Versal-Mikrotypografie. */
.mz-index__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.45em;
	margin: 0 !important;
	line-height: 1;
	color: var(--ink);
}
.mz-index__num {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(3.2rem, 2.4rem + 4vw, 5.4rem);
	letter-spacing: -0.04em;
	line-height: 0.85;
}
.mz-index__sep {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	opacity: 0.55;
	transform: translateY(-0.35em);
}
.mz-index__label {
	font-family: var(--font-body);
	font-size: var(--fs-x-small);
	font-weight: 600;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	line-height: 1.2;
	transform: translateY(-0.55em);
}

/* Text-Link: einlaufender Unterstrich (T2), kein Pill. */
.mz-index-card .mz-text-link {
	margin-block-start: auto !important;
	padding-block-start: var(--wp--preset--spacing--30);
	font-weight: 600;
}
.mz-index-card .mz-text-link a {
	color: var(--ink);
}

/* Leistungs-Grid: erste Karte 2/3, Rest asymmetrisch. */
@media (min-width: 782px) {
	.mz-services.mz-index-grid {
		grid-template-columns: repeat(6, 1fr);
	}
	.mz-services .mz-index-card:nth-child(1) { grid-column: span 4; }
	.mz-services .mz-index-card:nth-child(2) { grid-column: span 2; }
	.mz-services .mz-index-card:nth-child(3) { grid-column: span 3; }
	.mz-services .mz-index-card:nth-child(4) { grid-column: span 3; }
	.mz-services .mz-index-card--featured {
		padding: var(--wp--preset--spacing--50) !important;
	}
	.mz-services .mz-index-card--featured .mz-index__num {
		font-size: clamp(4rem, 3rem + 5vw, 6.4rem);
	}
	.mz-services .mz-index-card--featured h3 {
		font-size: var(--fs-xx-large);
		max-inline-size: 22ch;
	}
}

/* Haltung-Grid: erste Karte breiter, zwei schmaler daneben/darunter. */
@media (min-width: 782px) {
	.mz-topics-3.mz-index-grid {
		grid-template-columns: repeat(5, 1fr);
	}
	.mz-topics-3 .mz-index-card:nth-child(1) { grid-column: span 3; }
	.mz-topics-3 .mz-index-card:nth-child(2) { grid-column: span 2; }
	.mz-topics-3 .mz-index-card:nth-child(3) { grid-column: 2 / span 4; }
	.mz-topics-3 .mz-index-card--featured {
		padding: var(--wp--preset--spacing--50) !important;
	}
	.mz-topics-3 .mz-index-card--featured .mz-index__num {
		font-size: clamp(4rem, 3rem + 5vw, 6.4rem);
	}
}

/* --- Speaking / Podcast --- */
.mz-speaking .is-style-section-label,
.mz-podcast .is-style-section-label,
.mz-quote .is-style-section-label,
.mz-faq .is-style-section-label { opacity: 0.55; }
.mz-speaking h2,
.mz-podcast h2,
.mz-quote h2,
.mz-faq h2 { margin-block: 0 var(--wp--preset--spacing--20); }
.mz-speaking__lead {
	margin-block: 0;
	max-inline-size: 36em;
}
.mz-speaking__query,
.mz-podcast__query { margin-block-start: var(--wp--preset--spacing--50); }
/* Bühne-Karten: Magazin-Index (Haarlinie, kein Radius/Schatten) — Vorlage T6. */
.mz-speaking__card,
.mz-podcast__card {
	overflow: hidden;
	border-radius: 0;
	padding: 0;
	height: 100%;
	background-color: var(--paper);
	border: 1px solid var(--line);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.mz-speaking__card .wp-block-post-title,
.mz-speaking__card .wp-block-post-excerpt,
.mz-speaking__card > .is-style-section-label,
.mz-speaking__card > p {
	padding-inline: var(--wp--preset--spacing--40);
}
.mz-speaking__card > .is-style-section-label,
.mz-speaking__card .wp-block-post-title {
	padding-block-start: var(--wp--preset--spacing--30);
	font-family: var(--font-display) !important;
}
.mz-speaking__card > p:last-child,
.mz-speaking__card .wp-block-post-excerpt {
	padding-block-end: var(--wp--preset--spacing--40);
}
.mz-podcast__card {
	padding: var(--wp--preset--spacing--40);
}
.mz-speaking__placeholders.wp-block-columns {
	align-items: stretch;
}
.mz-speaking__placeholders.wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.mz-speaking__placeholders .mz-speaking__card {
	flex: 1 1 auto;
}
.mz-speaking__card .wp-block-post-featured-image,
.mz-speaking__card .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	inline-size: 100%;
}
.mz-speaking__card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.mz-podcast__row .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
}
.mz-empty { opacity: 0.62; }
.mz-placeholder {
	opacity: 0.72;
	pointer-events: none;
	user-select: none;
}
.mz-placeholder .is-style-section-label {
	opacity: 1;
}
.mz-placeholder__media {
	aspect-ratio: 16 / 10;
	inline-size: 100%;
	border-radius: 0;
	margin-block-end: var(--wp--preset--spacing--30);
	overflow: hidden;
}
.mz-placeholder__media--square {
	aspect-ratio: 1;
	margin-block-end: 0;
}
.mz-placeholder__media > * { display: none; }
.mz-podcast__embed {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--paper-soft);
}
.mz-podcast__example-label { opacity: 1; }
.mz-podcast__spotify { margin: 0; }
.mz-podcast__spotify .wp-block-embed__wrapper {
	position: static;
	padding: 0 !important;
}
.mz-podcast__spotify .wp-block-embed__wrapper::before { content: none !important; }
.mz-podcast__spotify iframe {
	position: static !important;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 352px;
	border: 0;
}
.mz-quote__prose.is-layout-constrained > *,
.mz-faq__list.is-layout-constrained > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* --- Manifest: Ink-Band, Fraunces-Zitat, Coral-Akzentwort --- */
.mz-quote__body { border: 0; padding: 0; }
.mz-quote__body cite { display: none; }
.mz-quote__body p,
.mz-quote__text {
	font-family: var(--font-display) !important;
	font-size: var(--fs-display);
	font-weight: 400;
	font-style: italic;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-inline-size: 16em;
	color: var(--paper);
	margin-block: 0 var(--wp--preset--spacing--30);
}
.mz-quote__accent {
	color: var(--coral);
	font-style: italic;
}
.mz-quote__aside {
	max-inline-size: 36em;
	line-height: 1.5;
}

/* --- FAQ --- */
.mz-faq__item {
	border-block-start: 1px solid var(--line);
	padding-block: var(--wp--preset--spacing--30);
}
.mz-faq__item:last-of-type { border-block-end: 1px solid var(--line); }
.mz-faq__item summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--ink);
}
.mz-faq__item summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

/* --- Abschluss-CTA.
   Die zentrierte Coral-Fassung ist entfallen: das Band ist jetzt zweispaltig,
   die Copy steht linksbündig neben Monogramm und Porträt. Der Rest der Regeln
   steht weiter unten beim Bloom-Band. */
.mz-cta .mz-rail { text-align: start; }
.mz-cta .wp-block-button .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill) !important;
	border: 0 !important;
}

/* Coral-Buttons auf neutrales Milchglas umstellen (statt lautem Orange). */
.wp-block-button .wp-block-button__link.has-coral-background-color {
	background-color: var(--wp--custom--glass--fill-tinted) !important;
	color: var(--ink) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent) !important;
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
}
.wp-block-button .wp-block-button__link.has-coral-background-color:hover {
	background-color: var(--wp--custom--glass--fill-tinted-hover) !important;
}

/* Editorial-Media-Panels: Bühne (Speaking) & Gespräch (Podcast) stehen
   neben dem Text — gerahmte Fotos, einheitliches 4:5-Format, weiche Ecken. */
.mz-speaking__intro.wp-block-columns,
.mz-podcast__intro.wp-block-columns {
	align-items: center;
}
.mz-speaking__stage,
.mz-podcast__portrait {
	margin: 0;
}
.mz-speaking__stage img,
.mz-podcast__portrait img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	box-shadow: var(--wp--custom--glass--shadow);
}
/* ── Keynote-Aufzeichnung ────────────────────────────────────────────────
   Zwei-Klick-Player im 16:9-Rahmen. Das Standbild liegt lokal im Theme
   (assets/img/) — an YouTube geht bis zum Klick kein Byte und kein Cookie.
   Erst der Klick tauscht den Rahmen gegen den Player (assets/js/reveal.js),
   so wie das Hero-Video auch erst nachgeladen wird, wenn es sich lohnt.
   Ohne JavaScript bleibt schlicht ein Link auf das Video.

   Bewusst nicht das YouTube-Thumbnail: das trägt fremde Typo in Magenta.
   Hier steht ein ruhiges Standbild, die Auszeichnung macht das Theme selbst —
   mit dem Vokabular aus dem Speaker-Profil: angeschnittene Fläche in
   Elektroblau hinter dem Rahmen, Quadrat-Marker, Bebas in Versalien.

   Abstände als eigene Werte statt Presets: --wp--preset--spacing--60 löst
   hier auf die WP-Standardskala auf (36px), nicht auf die aus der theme.json. */

/* Überleitung: sonst steht der Player ohne Anlauf unter dem 50/50-Block. */
.mz-keynote-intro {
	margin-block-start: clamp(2.75rem, 1.6rem + 3.2vw, 4.75rem);
}
/* Quadrat-Marker vor dem Label — dieselbe Signatur wie im Speaker-Profil. */
.mz-keynote-intro .is-style-section-label::before {
	content: "";
	display: inline-block;
	inline-size: 9px;
	block-size: 9px;
	margin-inline-end: 0.65rem;
	background: var(--signal);
	transform: translateY(-0.05em);
}
.mz-keynote-intro h3 { margin-block: 0.4rem 0; }
.mz-keynote__lead {
	max-inline-size: 62ch;
	margin-block: 0.9rem 0;
}

.mz-keynote {
	position: relative;
	/* Innenabstand der Beschriftung und Versatz der Farbfläche wachsen mit. */
	--mz-keynote-pad: clamp(1.1rem, 0.7rem + 1.5vw, 2.5rem);
	--mz-keynote-shift: clamp(0.5rem, 0.2rem + 1vw, 1.15rem);
	--mz-keynote-play: clamp(56px, 26px + 4.4vw, 84px);
	margin: clamp(1.25rem, 0.9rem + 1.1vw, 2rem) 0 0;
}
/* Angeschnittene Elektroblau-Fläche hinter dem Rahmen: gibt Tiefe und bringt
   die eine Signalfarbe ins Spiel, ohne dem Standbild in die Quere zu kommen. */
.mz-keynote::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 0;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	background: var(--signal);
	transform: translate(var(--mz-keynote-shift), var(--mz-keynote-shift));
	transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mz-keynote:hover::before,
.mz-keynote:focus-within::before {
	transform: translate(calc(var(--mz-keynote-shift) * 1.7), calc(var(--mz-keynote-shift) * 1.7));
}
.mz-keynote__frame {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: var(--paper);
	background: var(--ink);
	box-shadow: var(--wp--custom--glass--shadow);
	transition: box-shadow 240ms ease, transform 240ms ease;
}
/* Die globale Link-Regel weiter unten schaltet jeden Link beim Hover auf
   Schwarz und zieht eine Unterlinie — über dem Standbild wäre die Beschriftung
   damit weg. Hier bleibt Weiß Weiß. */
.mz-keynote__frame:hover,
.mz-keynote__frame:focus-visible {
	color: var(--paper);
	background-image: none;
	box-shadow: var(--wp--custom--glass--shadow-hover);
	transform: translate(-2px, -3px);
}
.mz-keynote__still {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	/* Das Standbild ist warm-beige, die Marke kühl. Leicht zurückgenommen
	   fügt es sich ein — beim Hover kommt die volle Farbe zurück. */
	filter: saturate(0.82) contrast(1.04);
	transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1), filter 400ms ease;
}
.mz-keynote__frame:hover .mz-keynote__still,
.mz-keynote__frame:focus-visible .mz-keynote__still {
	transform: scale(1.035);
	filter: saturate(1) contrast(1.04);
}
/* Verlauf nach unten: erdet das Standbild und trägt die Beschriftung. */
.mz-keynote__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ink) 22%, transparent) 0%,
		transparent 32%,
		color-mix(in srgb, var(--ink) 86%, transparent) 100%);
}

/* Glas-Badge oben links — dieselbe Milchglas-Sprache wie Navbar und Buttons. */
.mz-keynote__badge {
	position: absolute;
	z-index: 2;
	inset: var(--mz-keynote-pad) auto auto var(--mz-keynote-pad);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--fs-x-small);
	font-weight: 600;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--paper);
	background: color-mix(in srgb, var(--white) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);
	box-shadow: inset 0 1px 0 var(--wp--custom--glass--highlight);
	-webkit-backdrop-filter: blur(10px) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(10px) saturate(var(--wp--custom--glass--saturate));
}
.mz-keynote__badge::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	flex: none;
	background: var(--signal);
}

/* Play in Elektroblau statt neutralem Glas, mit ruhig auslaufendem Ring. */
.mz-keynote__play {
	position: absolute;
	z-index: 2;
	inset: 0;
	margin: auto;
	/* Größe und Dreieck hängen an derselben Zahl — skaliert sauber mit. */
	inline-size: var(--mz-keynote-play);
	block-size: var(--mz-keynote-play);
	font-size: var(--mz-keynote-play);
	border-radius: 50%;
	background: color-mix(in srgb, var(--signal) 78%, transparent);
	border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
	box-shadow: inset 0 1px 0 var(--wp--custom--glass--highlight),
		0 10px 30px -8px color-mix(in srgb, var(--signal) 70%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 240ms ease, transform 240ms ease;
}
.mz-keynote__play::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--white) 60%, transparent);
	animation: mz-keynote-pulse 3.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
}
@keyframes mz-keynote-pulse {
	0%   { transform: scale(1);    opacity: 0.7; }
	65%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}
.mz-keynote__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 0;
	block-size: 0;
	border-style: solid;
	border-width: 0.143em 0 0.143em 0.238em;
	border-color: transparent transparent transparent var(--paper);
	transform: translateX(0.036em);
}
.mz-keynote__frame:hover .mz-keynote__play,
.mz-keynote__frame:focus-visible .mz-keynote__play {
	background: color-mix(in srgb, var(--signal) 94%, transparent);
	transform: scale(1.08);
}

.mz-keynote__meta {
	position: absolute;
	z-index: 2;
	inset-inline: var(--mz-keynote-pad);
	inset-block-end: var(--mz-keynote-pad);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-shadow: 0 1px 14px color-mix(in srgb, var(--ink) 60%, transparent);
}
.mz-keynote__title {
	font-family: var(--font-display);
	font-size: var(--fs-xx-large);
	line-height: 0.88;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.mz-keynote__sub {
	font-size: var(--fs-small);
	line-height: 1.4;
	max-inline-size: 42ch;
	color: color-mix(in srgb, var(--paper) 86%, transparent);
}
/* Aufforderung mit mitwachsender Unterlinie — der Rahmen ist ein Link, das
   darf man auch sehen. */
.mz-keynote__cue {
	align-self: flex-start;
	margin-block-start: 0.35rem;
	padding-block-end: 3px;
	font-size: var(--fs-x-small);
	font-weight: 600;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	background-image: linear-gradient(var(--signal), var(--signal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 38% 2px;
	transition: background-size 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mz-keynote__frame:hover .mz-keynote__cue,
.mz-keynote__frame:focus-visible .mz-keynote__cue {
	background-size: 100% 2px;
}

/* Nach dem Klick steht der Player exakt im Maß des Rahmens. */
.mz-keynote__player {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 20px;
	background: var(--ink);
	box-shadow: var(--wp--custom--glass--shadow);
}
.mz-keynote__note {
	position: relative;
	z-index: 1;
	/* Platz für die blaue Fläche darunter — auch in ihrer Hover-Position. */
	margin-block-start: calc(var(--mz-keynote-shift) * 1.8 + 0.7rem);
	font-size: var(--fs-x-small);
	color: var(--ink-soft);
}
/* Schmaler Screen: der Rahmen ist nur noch gut 160 px hoch — drei Textzeilen
   darin fressen die halbe Fläche und laufen in den Play-Knopf. Hier bleibt der
   Titel; Unterzeile und Aufforderung stehen ohnehin in der Überleitung
   direkt darüber. Der Play-Knopf bleibt mittig, wo man ihn sucht. */
@media (max-width: 781px) {
	.mz-keynote__badge { padding: 0.32rem 0.7rem; }
	.mz-keynote__sub,
	.mz-keynote__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mz-keynote::before,
	.mz-keynote__still,
	.mz-keynote__frame,
	.mz-keynote__play,
	.mz-keynote__cue { transition: none; }
	.mz-keynote__play::before { animation: none; opacity: 0.45; }
}

/* Podcast-Cover statt Live-Player: quadratisches Cover + Spotify-Link. */
.mz-podcast__cover { gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--40); }
.mz-podcast__cover-art {
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40) !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	/* Vorher var(--wp--preset--gradient--dusk) — den Verlauf gibt es seit B1
	   nicht mehr, das Cover stand ohne Fläche da und die weiße Schrift war auf
	   hellem Grund unsichtbar. Jetzt Schwarz mit einem Hauch Signalblau. */
	background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 84%, var(--signal)) 0%, var(--ink) 100%);
	box-shadow: var(--wp--custom--glass--shadow);
}
.mz-podcast__cover-art .is-style-section-label {
	color: color-mix(in srgb, var(--paper) 78%, transparent);
	margin-block: 0;
	opacity: 1;
}
.mz-podcast__cover-art h3 { color: var(--paper); margin-block: 0; }
.mz-podcast__link a { color: var(--ink); }

.mz-cta__embed:empty { display: none; }

/* ── Farbige Akzente, sparsam gesetzt ────────────────────────────────────
   Ein Vokabular für die ganze Seite, aus dem Keynote-Block übernommen:
   der Quadrat-Marker in Elektroblau vor Labels und ein Unterstrich, der beim
   Hover mitwächst. Bewusst ohne Akzent bleiben Hero, Logo-Band, Zahlenband
   (trägt schon den Bloom-Verlauf), Zitat (hat seinen Akzent auf „Ära“),
   Angebots-Karten und Abschluss-CTA (stehen ohnehin in Vollflächen-Blau).
   Mehr wäre Dekoration, nicht Akzent. */

/* Quadrat-Marker — dieselbe Signatur wie im Speaker-Profil. */
.mz-vision__kicker::before,
.mz-creed__label::before,
.mz-podcast__cover-art .is-style-section-label::before {
	content: "";
	display: inline-block;
	inline-size: 9px;
	block-size: 9px;
	margin-inline-end: 0.65rem;
	background: var(--signal);
	transform: translateY(-0.05em);
}

/* Unterstrich, der beim Hover mitwächst — wie „Video starten“ im Keynote-Bild.
   In den blauen Karten liegt er in Schwarz, sonst wäre er unsichtbar. */
.mz-text-link a,
.mz-podcast__link a {
	--mz-underline: var(--signal);
	text-decoration: none;
	padding-block-end: 2px;
	background-image: linear-gradient(var(--mz-underline), var(--mz-underline));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 32% 2px;
	transition: background-size 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mz-text-link a:hover,
.mz-text-link a:focus-visible,
.mz-podcast__link a:hover,
.mz-podcast__link a:focus-visible {
	background-size: 100% 2px;
}

/* FAQ: das Quadrat kippt beim Öffnen zur Raute — ein leiser Hinweis darauf,
   dass sich hier etwas auf- und zuklappen lässt. */
.mz-faq__item summary {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	list-style: none;
}
.mz-faq__item summary::-webkit-details-marker { display: none; }
.mz-faq__item summary::before {
	content: "";
	flex: none;
	inline-size: 9px;
	block-size: 9px;
	margin-block-start: 0.5em;
	background: var(--signal);
	transition: transform 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mz-faq__item[open] summary::before { transform: rotate(45deg); }
.mz-faq__item[open] summary { color: var(--signal-ink); }

@media (prefers-reduced-motion: reduce) {
	.mz-text-link a,
	.mz-podcast__link a,
	.mz-faq__item summary::before,
	.mz-services .mz-index-card,
	.mz-services .mz-index-card::before,
	.mz-services .mz-index-card .mz-index__num { transition: none; }
}

/* --- Footer: weiße Fläche, alles in Signalblau, eine Reihe --- */

/* Der Fuß schließt bündig an die Sektion darüber an (z. B. den CTA). Der
   globale Flow-Abstand `:where(.wp-site-blocks) > * { margin-block-start }`
   greift am <footer class="wp-block-template-part">-Wrapper — die Regel für
   .alignfull weiter oben erwischt ihn nicht, weil sie am inneren Block hängt. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.mz-footer {
	--mz-brand-mark: clamp(3.5rem, 1.6rem + 5.2vw, 7rem);
	position: relative;
	border: 0;
	color: var(--signal);
}
.mz-footer .mz-brand__mark svg,
.mz-footer .mz-brand img {
	height: var(--mz-brand-mark);
	width: auto;
	filter: none;
}
.mz-footer .mz-brand {
	color: var(--signal);
	gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
}
/* Wortmarke etwas kräftiger als im Kopf — sie trägt hier die Absenderzeile. */
.mz-footer .mz-brand__word {
	font-size: clamp(0.72rem, 0.64rem + 0.3vw, 0.92rem);
}
.mz-footer .mz-brand:hover,
.mz-footer .mz-brand:focus {
	text-decoration: none;
	color: var(--signal-ink);
}

/* Eine Zeile: Marke · Claim · drei Linklisten. Der Claim nimmt den Rest der
   Breite, die Linkspalten stehen so breit wie ihr längster Eintrag. */
.mz-footer__cols.wp-block-group {
	display: grid;
	align-items: start;
	/* Mobil: Marke und Claim voll breit, die Linklisten zweispaltig darunter. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
}
.mz-footer__cols.wp-block-group > * { margin-block: 0; }
.mz-footer__brand-col,
.mz-footer__claim-col { grid-column: 1 / -1; }

@media (min-width: 600px) {
	.mz-footer__cols.wp-block-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mz-footer__brand-col { grid-column: 1 / 2; }
	.mz-footer__claim-col { grid-column: 2 / -1; }
}

@media (min-width: 1000px) {
	.mz-footer__cols.wp-block-group {
		grid-template-columns: auto minmax(0, 1fr) repeat(3, auto);
		column-gap: clamp(2rem, 0.5rem + 4.5vw, 6rem) !important;
		align-items: center;
	}
	.mz-footer__brand-col,
	.mz-footer__claim-col { grid-column: auto; }
}

/* Die Spalten sind reine Raster-Zellen — kein constrained-Zentrieren. */
.mz-footer__cols > .wp-block-group > * { margin-inline: 0 !important; max-width: none; }

.mz-footer__claim {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.35rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--signal);
}

.mz-footer__nav .wp-block-navigation__container { row-gap: 0; }
.mz-footer__nav .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.5rem;
	color: var(--signal);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.mz-footer__nav .wp-block-navigation-item__content:hover,
.mz-footer__nav .wp-block-navigation-item__content:focus {
	color: var(--signal-ink);
	text-decoration: none;
	background: none;
	box-shadow: none;
}
.mz-footer a:focus-visible,
.mz-footer .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--signal-ink);
	outline-offset: 3px;
}

/* Custom-Grids: blockGap-Flow-Abstand neutralisieren — Abstand macht nur gap. */
.mz-topics-3.wp-block-group > *,
.mz-framework.wp-block-group > *,
.mz-services.wp-block-group > * { margin-block-start: 0; }
.mz-topics-3.wp-block-group,
.mz-framework.wp-block-group,
.mz-services.wp-block-group { align-items: start; }

/* framework-row: drei Stufen mit Pfeil, kollabiert mobil auf eine Spalte. */
/* Standfirst linksbündig unter der Headline: das constrained-Layout zwingt jedem
   Kind margin-inline:auto auf (!important) und würde den schmaleren Absatz sonst
   mittig setzen — hier bewusst links ausgerichtet, bündig zu Label und Headline. */
/* Linke Kante bündig zur 1120er-Content-Spalte (nicht zur Padding-Kante): das
   constrained-Layout zentriert die 1120er-Spalte im breiteren Padding-Rahmen —
   diesen Versatz gleicht der calc-Startrand aus, statt margin:auto (zentriert). */
.mz-framework-lead { max-width: 40rem; margin-inline-start: max(0px, calc((100% - 1120px) / 2)) !important; margin-inline-end: auto !important; }
/* .wp-block-group-Spezifität, damit der von WordPress generierte blockGap
   (.wp-container-…{gap}) den Spalten-Abstand nicht wieder zusammenzieht. */
.mz-framework.wp-block-group { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60) !important; }
@media (min-width: 782px) {
	.mz-framework.wp-block-group { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; column-gap: var(--wp--preset--spacing--70) !important; }
}

/* Jede Stufe: feine farbige Oberkante wie bei Service-Karten/Themen, damit die
   drei Schritte visuell Gewicht bekommen und sich in die Sektionsfamilie einfügen. */
.mz-stage { border-top: 3px solid var(--signal); padding-top: var(--wp--preset--spacing--30); }
.mz-stage.wp-block-group > * { margin-block-start: 0; }
.mz-stage.wp-block-group > * + * { margin-block-start: var(--wp--preset--spacing--20); }

/* Kleine Schrittziffer über dem Schlagwort — ordnet die Stufen und lässt das
   Display-Condensed-Wort direkt darunter atmen. */
.mz-stage__step { font-family: var(--wp--preset--font-family--display-condensed); font-size: var(--wp--preset--font-size--large); line-height: 1; letter-spacing: 0.04em; opacity: 0.55; margin-block-end: 0.35rem; }
.mz-stage h3 { line-height: 0.95; }
.mz-stage__lead { margin-block-start: 0.4rem; }
.mz-stage__list { margin-block-start: var(--wp--preset--spacing--30); padding-inline-start: 1.1em; }
.mz-stage__list li { padding-inline-start: 0.15em; }
.mz-stage__list li::marker { color: var(--wp--preset--color--steel); }

/* Pfeil als schlanker Verbinder auf Höhe des Schlagworts — nicht als schwerer
   Block, damit die Stufen Luft behalten. Vertikaler Versatz = Schrittziffer-Höhe. */
.mz-framework .mz-arrow { align-self: start; padding-block-start: 6.1rem; font-size: var(--wp--preset--font-size--xx-large); line-height: 1; text-align: center; }
@media (max-width: 781px) { .mz-framework .mz-arrow { display: none; } }

/* pill-row: Aufzählung mit Trennpunkten. */
.mz-pills { display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; align-items: center; list-style: none; padding: 0; margin: 0; }
.mz-pills li { position: relative; padding-inline-end: 0.9em; }
.mz-pills li:not(:last-child)::after { content: "·"; position: absolute; inset-inline-end: 0; color: var(--wp--preset--color--steel); }

/* Legacy equal-column topics/services ohne Index-Grid: unverändert lassen. */
.mz-topics-3:not(.mz-index-grid) { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
@media (min-width: 782px) {
	.mz-topics-3:not(.mz-index-grid) { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--70); }
}
.mz-topics-3:not(.mz-index-grid) .mz-topic {
	border-top: 3px solid var(--wp--preset--color--steel);
	padding-top: var(--wp--preset--spacing--40);
}
.mz-topics-3:not(.mz-index-grid) .mz-topic:nth-child(1) { border-top-color: var(--coral); }
.mz-topics-3:not(.mz-index-grid) .mz-topic:nth-child(2) { border-top-color: var(--teal); }
.mz-topics-3:not(.mz-index-grid) .mz-topic:nth-child(3) { border-top-color: var(--rose); }
.mz-topics-3:not(.mz-index-grid) .mz-topic li { margin-block-start: var(--wp--preset--spacing--20); line-height: 1.55; }
.mz-topics-3:not(.mz-index-grid) .mz-topic li:first-child { margin-block-start: 0; }

/* --- Politur: dezente Interaktionen, kein Layout-Shift --- */

/* Buttons: sanftes Anheben und weiche Farbübergänge. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.wp-element-button:hover { transform: translateY(-2px); }

/* Verlaufsspalten: minimal aufhellen beim Hover, ohne Transform — damit die
   harten Kanten bündig bleiben. Der Hero ist ausgenommen: seine Creme-Textspalte
   soll beim Überfahren nicht aufblitzen (würde fast weiß). */
.wp-block-columns:not(.mz-hero) > .wp-block-column.has-background { transition: filter 0.3s ease; }
.wp-block-columns:not(.mz-hero) > .wp-block-column.has-background:hover { filter: brightness(1.05); }

/* "Mehr erfahren →"-Links: Pfeil rückt beim Hover leicht nach rechts. */
.wp-block-column a { transition: background-size 0.3s ease; }
.wp-block-column a:hover { opacity: 1; }

/* Sichtbarer Fokus-Ring für Tastaturnavigation (Barrierefreiheit). */
:where(a, button, .wp-element-button, summary, input, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Details/FAQ: Marker und sanftes Öffnen. */
.wp-block-details summary { cursor: pointer; }
.wp-block-details summary:hover { color: var(--wp--preset--color--accent); }

/* --- Magazin-Reveal: Sektionsköpfe und Kacheln laufen ruhig von unten ein.
   Der Full-Bleed-Hintergrund bleibt stehen, damit an den Kanten kein Spalt
   aufblitzt. Eine Richtung (translateY), 400ms ease-out.

   Wichtig: nie `.alignfull .mz-rail` — `.wp-block-post-content` ist selbst
   alignfull. Nie `opacity: 0` ohne zuverlässiges `.mz-in`. Vision, Zahlenband
   und Abschluss-CTA werden deshalb gar nicht versteckt. --- */
@media (prefers-reduced-motion: no-preference) {
	.mz-anim .wp-block-post-content > .alignfull:not(.mz-hero):not(.mz-vision):not(.mz-stats):not(.mz-cta):not(.mz-horizon) .mz-rail > *:not(.wp-block-columns):not(.wp-block-query) {
		opacity: 0;
		transform: translateY(var(--wp--preset--spacing--20));
		transition: opacity 0.4s ease-out, transform 0.4s ease-out;
	}
	.mz-anim .wp-block-post-content > .alignfull.mz-in:not(.mz-hero):not(.mz-vision):not(.mz-stats):not(.mz-cta):not(.mz-horizon) .mz-rail > *:not(.wp-block-columns):not(.wp-block-query) {
		opacity: 1;
		transform: none;
	}
	.mz-anim .mz-vision,
	.mz-anim .mz-vision .mz-rail,
	.mz-anim .mz-vision .mz-rail > *,
	.mz-anim .mz-vision__row,
	.mz-anim .mz-vision__row > *,
	.mz-anim .mz-vision__copy,
	.mz-anim .mz-vision__copy > *,
	.mz-anim .mz-vision__media,
	.mz-anim .mz-vision__stage,
	.mz-anim .mz-vision__portrait,
	.mz-anim .mz-stats,
	.mz-anim .mz-stats .mz-rail,
	.mz-anim .mz-stats .mz-rail > *,
	.mz-anim .mz-stats__row > *,
	.mz-anim .mz-stats__item,
	.mz-anim .mz-stats__figure,
	.mz-anim .mz-stats__label,
	.mz-anim .mz-cta,
	.mz-anim .mz-cta .mz-rail,
	.mz-anim .mz-cta .mz-rail > * {
		opacity: 1;
		transform: none;
	}
	/* Das Horizont-Band bleibt sichtbar, bekommt aber bewusst kein
	   `transform: none` — das Bild traegt seine Parallax-Verschiebung. */
	.mz-anim .mz-horizon,
	.mz-anim .mz-horizon__band,
	.mz-anim .mz-horizon__band > *,
	.mz-anim .mz-horizon__copy > * {
		opacity: 1;
	}
	.mz-anim .mz-horizon,
	.mz-anim .mz-horizon__band,
	.mz-anim .mz-horizon__copy,
	.mz-anim .mz-horizon__copy > * {
		transform: none;
	}

	.mz-anim .mz-stagger.mz-in > * {
		opacity: 1;
		transform: none;
	}
}

/* Reduzierte Bewegung: Reveal und Parallax aus, Inhalte sofort sichtbar. */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button:hover { transition: none !important; transform: none !important; }
	.mz-anim .mz-hero__copy > *,
	.mz-anim .mz-hero__name-line,
	.mz-anim .mz-hero__kicker,
	.mz-anim .mz-hero__role,
	.mz-anim .mz-hero__lead,
	.mz-anim .mz-hero__cta,
	.mz-anim .mz-rail > *,
	.mz-anim .mz-vision__copy > *,
	.mz-anim .mz-stats__item,
	.mz-anim .mz-cta > *,
	.mz-anim .mz-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.mz-hero__mark,
	.mz-work__mark,
	.mz-vision__mark,
	.mz-stats__mark,
	.mz-kquote__mark,
	.mz-shift__mark,
	.mz-cta__mark,
	.mz-booking__mark {
		--mz-parallax: 0px;
		will-change: auto;
	}
	.mz-horizon__band { clip-path: none; }
	.mz-horizon__bg {
		position: absolute;
		inset: 0;
		block-size: 100%;
	}
	/* Parallax ist Bewegung ohne Informationswert — bei reduce steht sie still.
	   reveal.js setzt die Variablen dann gar nicht erst; das hier ist der Riegel
	   für den Fall, dass eine Ebene ihren Wert schon geerbt hat. */
	.mz-stats::before {
		--mz-parallax-bg: 0px;
		transform: none;
		will-change: auto;
	}
	.mz-voices::before {
		--mz-parallax: 0px;
		will-change: auto;
	}
}

/* --- T2 → Liquid Glass: Buttons als schwebendes Milchglas.
   Steht nach den Glas-Regeln, gewinnt also. Standard-Buttons ohne eigene
   Füllfarbe werden zu Glas. Buttons mit ausdrücklicher Hintergrundfarbe
   (CTA „Termin vereinbaren" = Ink, Header-CTA = Coral) bleiben kräftige
   Vollton-Akzente, teilen aber Pill-Form und Glas-Schimmer. --- */

/* Gemeinsame Button-Stimme: Form, Typo, Verlaufs-Schimmer, weiche Tiefe. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	font-family: var(--font-body) !important;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	border-radius: var(--wp--custom--radius--pill) !important;
	/* Apple-Glas: nur ein hauchdünner Licht-Schimmer an der Oberkante,
	   kein breiter Glanzbalken. Die Tiefe macht das inset-Schatten-Set. */
	background-image: linear-gradient(180deg,
		color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent) 0%,
		transparent 22%) !important;
	box-shadow:
		inset 0 1px 0.5px var(--wp--custom--glass--highlight),
		inset 0 0 0 1px var(--wp--custom--glass--rim),
		inset 0 -7px 12px -10px color-mix(in srgb, var(--wp--preset--color--ink) 16%, transparent),
		var(--wp--custom--glass--shadow) !important;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.2s ease !important;
}

/* Getöntes Glas für Buttons ohne eigene Hintergrundfarbe (auf hellem Grund).
   Auf reinweißem Grund wäre weißes Glas unsichtbar — Füllung, Rand und Schrift
   holen die Kante deshalb aus dem Signalblau. */
.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-glass-tinted .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid color-mix(in srgb, var(--signal) 34%, transparent) !important;
	background-color: var(--wp--custom--glass--fill-tinted) !important;
	color: var(--signal-ink) !important;
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
}

/* Helleres Glas + weißer Text auf dunklem Grund (schwarze Sektion, Foto). */
.wp-block-button.is-style-glass-light .wp-block-button__link,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:not(.has-background),
.has-ink-background-color .wp-block-button .wp-block-button__link:not(.has-background) {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent) !important;
	background-color: var(--wp--custom--glass--fill-light) !important;
	color: var(--wp--preset--color--white) !important;
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate)) !important;
}

/* Hover: kräftigerer Schimmer + leichter Lift. */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-element-button:hover {
	box-shadow:
		inset 0 1px 0 var(--wp--custom--glass--highlight),
		var(--wp--custom--glass--shadow-hover) !important;
}
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-glass-tinted .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--custom--glass--fill-tinted-hover) !important;
}
.wp-block-button.is-style-glass-light .wp-block-button__link:hover,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:not(.has-background):hover,
.has-ink-background-color .wp-block-button .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--custom--glass--fill-light-hover) !important;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button .wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: translateY(-1px);
	}
}

.wp-block-cover.is-dark .wp-block-button .wp-block-button__link {
	background-color: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--paper) !important;
}
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:hover,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:focus,
.wp-block-cover.is-dark .wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--accent) !important;
	color: var(--ink) !important;
	border-color: var(--paper) !important;
}

.wp-block-button .wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

a:where(:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content, .mz-brand)) {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.3s ease;
}
a:where(:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content, .mz-brand)):hover,
a:where(:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content, .mz-brand)):focus-visible {
	color: var(--ink);
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	a:where(:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content, .mz-brand)) {
		transition: none;
		background-size: 100% 1px;
	}
}


/* --- CTA-Pille im Marken-Wasch (Block-Style "bloom-pill", functions.php).
   Trägt denselben Verlauf wie das Porträt-Panel der Über-mich-Sektion und die
   Angebotsübersicht (--mz-wash). Weil der Wasch fast weiß ist, hält eine
   Haarlinie die Pille auf weißem Grund als Fläche zusammen.
   Steht bewusst am Dateiende und mit .wp-element-button in der Kette: die
   Glas-Grundregeln für Buttons stehen weiter oben und wiegen selbst (0,3,0). */
.wp-block-button.is-style-bloom-pill > .wp-block-button__link.wp-element-button {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding-block: 0.85em;
	padding-inline: 2.2em;
	/* !important, weil die Glas-Grundregeln für Buttons ihren Verlauf, ihren
	   Schatten und ihre Schriftfarbe selbst schon mit !important setzen. */
	background-image: var(--mz-wash) !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.wp-block-button.is-style-bloom-pill > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-bloom-pill > .wp-block-button__link.wp-element-button:focus-visible {
	filter: saturate(1.35) brightness(0.985);
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--signal) 35%, transparent);
	color: var(--wp--preset--color--ink) !important;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-bloom-pill > .wp-block-button__link.wp-element-button {
		transition: none;
	}
	.wp-block-button.is-style-bloom-pill > .wp-block-button__link.wp-element-button:hover {
		transform: none;
	}
}

/* --- Keynote-Zitat: Signal-Panel + Bühnenbild, randlos.
   Zwei gleich hohe Flächen über die volle Viewport-Breite, ohne Fuge und
   ohne Sektionspolsterung — der Block sitzt direkt an Vision und Wandel an.
   Die Höhe gibt das Panel vor, das Foto füllt sie per object-fit — sonst
   müsste eine feste Bildhöhe her, die bei jedem neuen Motiv wieder
   nachjustiert werden will. */
.mz-kquote {
	overflow: clip;
	/* Aus dem Sektionsrhythmus herausgenommen: die Flächen SIND die Sektion. */
	padding-block: 0 !important;
}
.mz-kquote .mz-kquote__row.wp-block-columns {
	align-items: stretch;
	gap: 0;
	/* .mz-rail setzt 100 % Breite und die Wide-Grenze — hier soll die Zeile
	   randlos bleiben, die Bleed-Ränder des Constrained-Layouts gelten. */
	inline-size: auto;
	max-inline-size: none;
}
.mz-kquote__row > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.mz-kquote__panel,
.mz-kquote__frame {
	flex: 1;
	position: relative;
	overflow: hidden;
	margin: 0;
}

/* Panel: Signal als Blockfarbe, darüber der Wasch als background-image —
   dieselbe Diagonale wie der Wasch der Angebotsübersicht (215°: oben rechts
   nach unten links), nur satt statt pastellig. Zwei radiale Lichter tragen
   die Farbe: Cyan oben rechts, Violett unten links; dazwischen bleibt es
   Signalblau, wo der Text steht. Ein reiner Linearverlauf zwischen drei
   nahen Blautönen war vom Blockblau nicht zu unterscheiden. */
.mz-kquote__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--80) clamp(1.5rem, 0.5rem + 3.5vw, 4.5rem);
	min-block-size: clamp(30rem, 74vh, 48rem);
	text-align: center;
	background-image:
		radial-gradient(75% 85% at 100% 0%, var(--aurora-cyan) 0%, rgba(86, 211, 233, 0) 68%),
		radial-gradient(75% 85% at 0% 100%, var(--aurora-violet) 0%, rgba(124, 92, 255, 0) 68%),
		linear-gradient(215deg, #4E9BF7 0%, var(--signal) 50%, #5E52F0 100%);
	--mz-quotemark-size: clamp(4rem, 2.6rem + 3.6vw, 6.5rem);
	--mz-quotemark-gap: var(--wp--preset--spacing--40);
	--mz-quotemark-color: var(--wp--preset--color--white);
}
/* Das Anführungszeichen kommt aus .mz-quotemark (Klasse am Panel, Variablen
   oben im Panel-Block) — auf dem satten Blau leicht gedämpft. */
.mz-kquote__panel::before { opacity: 0.9; }

.mz-kquote__quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}
.mz-kquote__quote.wp-block-quote::before,
.mz-kquote__quote.wp-block-quote::after { content: none; }

/* Die Zitatzeile in Weiß — auf dem satten Blau trägt die Farbe die Bühne,
   ein zweiter Verlauf in der Schrift würde nur flimmern. */
.mz-kquote__text {
	margin: 0;
	font-family: var(--font-geometric);
	/* So bemessen, dass die längste Zeile („Die Zukunft gehört nicht“) ab
	   ~1000 px Viewport ohne Zwangsumbruch in die 60-%-Fläche passt. */
	font-size: clamp(1.75rem, 0.6rem + 2.9vw, 3.6rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--wp--preset--color--white);
}

.mz-kquote__quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--80);
	font-family: var(--font-body);
	font-size: var(--fs-large);
	font-style: normal;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}
.mz-kquote__quote cite strong {
	display: block;
	font-weight: 700;
}
.mz-kquote__role {
	display: block;
	font-family: var(--font-geometric);
	font-size: var(--fs-small);
	font-weight: 400;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	opacity: 0.85;
}

/* Bild: füllt die Kartenhöhe, Ausschnitt bleibt auf der Rednerin. */
.mz-kquote__photo {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0 !important;
}
.mz-kquote__photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 38%;
}
/* Die Marke läuft beim Scrollen über das Foto: --mz-parallax liefert
   reveal.js (±96 px über den Sektionsdurchlauf), hier gegenläufig und
   kräftig verstärkt (rund ±290 px) — die Marke steigt spürbar, während die
   Seite nach unten läuft. Der Rahmen beschneidet sie oben und unten, sie
   soll nie ganz zu sehen sein. */
.mz-kquote__mark {
	position: absolute;
	inset-inline: 6% auto;
	inset-block: 38% auto;
	z-index: 2;
	inline-size: 88%;
	margin: 0 !important;
	pointer-events: none;
	opacity: 0.42;
	transform: translateY(calc(var(--mz-parallax, 0px) * -3));
	will-change: transform;
}
.mz-kquote__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	filter: brightness(0) invert(1);
}

@media (max-width: 781px) {
	/* Die Umbrüche sind für die breite Fläche gesetzt — auf Mobil würden sie
	   die Zeile zerhacken, hier bricht der Satz von selbst. */
	.mz-kquote__text br { display: none; }
	.mz-kquote__panel {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
		min-block-size: 0;
	}
	.mz-kquote__frame { min-block-size: 28rem; }
	.mz-kquote__mark { inset-block-start: 42%; }
}

/* --- Wandel der Arbeitswelt: nach dem Canva-Entwurf. Links das große
   Porträt, rechts der Text in Signalblau. Das Z-Monogramm liegt zu Beginn über
   dem Foto und läuft beim Scrollen mit nach unten (position: sticky): Es
   verlässt das Foto, steht dann auf Weiß und kommt am Ende der Spalte neben
   dem Schlusssatz zur Ruhe — der Text selbst scrollt derweil normal weiter.
   Nach oben bewusst viel Luft ("viel Platz dazwischen"). */
.mz-shift { overflow: clip; }
/* Die Sektionsrhythmus-Regel setzt die Polsterung mit !important — hier
   gewinnt die spätere, gleich schwere Regel: oben ein Viertel mehr Luft. */
.mz-shift {
	padding-block-start: calc(var(--mz-section-pad) * 1.25) !important;
}
.mz-shift__row.wp-block-columns {
	column-gap: var(--wp--preset--spacing--70);
}
/* Die Bildspalte wird auf Zeilenhöhe gestreckt (Core-Default der Columns) —
   genau diese Höhe ist die Laufstrecke der Marke. */
.mz-shift__media {
	position: relative;
}

.mz-shift__copy,
.mz-shift__copy h2,
.mz-shift__copy h3,
.mz-shift__copy p,
.mz-shift__copy li {
	color: var(--wp--preset--color--signal);
}
/* Claim, Leitfrage und Schlusssatz in der Bebas — wie die Sektionstitel.
   Die Preset-Klasse wiegt gleich schwer, deshalb doppelt notiert. */
.mz-shift .mz-shift__claim,
.mz-shift .mz-shift__claim.has-xx-large-font-size {
	margin-block: 0 var(--wp--preset--spacing--50);
	font-size: var(--fs-xx-large);
	line-height: 0.92;
	letter-spacing: 0.02em;
	hyphens: none;
	-webkit-hyphens: none;
}
.mz-shift .mz-shift__question,
.mz-shift .mz-shift__question.has-x-large-font-size {
	font-size: var(--fs-x-large);
	line-height: 0.95;
	letter-spacing: 0.02em;
	hyphens: none;
	-webkit-hyphens: none;
}
/* Der Schlusssatz ist die große Geste der Sektion: eine Stufe über der
   Leitfrage, zwischen 2XL und Display, in zwei bis drei Zeilen gesetzt. */
.mz-shift .mz-shift__closer,
.mz-shift .mz-shift__closer.has-xx-large-font-size {
	font-size: clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
	line-height: 0.92;
	letter-spacing: 0.02em;
	hyphens: none;
	-webkit-hyphens: none;
	text-wrap: balance;
}
.mz-shift__copy p,
.mz-shift__copy ul {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	max-inline-size: 32em;
}
/* Doppelte Klasse, damit die Abstandsregel schwerer wiegt als das
   `margin-block: 0` der Absatz-Regel darüber. Der Entwurf setzt zwischen den
   Sinnabschnitten je eine Leerzeile — hier etwas großzügiger, damit die
   Spalte atmet statt als Textwand zu stehen. */
.mz-shift .mz-shift__copy > * + * { margin-block-start: var(--wp--preset--spacing--40); }
/* Vor der Leitfrage mehr Luft, direkt darunter bleibt es eng. */
.mz-shift .mz-shift__copy > .mz-shift__question { margin-block-start: var(--wp--preset--spacing--40); }
.mz-shift .mz-shift__copy > .mz-shift__question + ul { margin-block-start: var(--wp--preset--spacing--30); }
/* Zweiter Bildschirm des Entwurfs: Zwischen Fragenliste und Ausblick eine
   große Pause — auf dieser Strecke verlässt die Marke das Foto und landet auf
   Weiß, bevor der Schlusssatz kommt. */
.mz-shift .mz-shift__copy > .mz-shift__outlook { margin-block-start: var(--wp--preset--spacing--90); }
.mz-shift .mz-shift__copy > .mz-shift__closer { margin-block-start: var(--wp--preset--spacing--60); }
.mz-shift .mz-shift__copy > .mz-shift__closer + p { margin-block-start: var(--wp--preset--spacing--40); }
.mz-shift__copy strong { font-weight: 700; }

.mz-shift__list.wp-block-list {
	padding-inline-start: 1.25em;
	list-style: disc;
}
.mz-shift__list li + li { margin-block-start: 0.5em; }
.mz-shift__list li::marker { font-size: 0.9em; }

/* Das Foto behält das Seitenverhältnis des Motivs (Hochformat 5:6) und
   füllt die Spalte in voller Breite. */
.mz-shift__photo {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	inline-size: 100%;
	aspect-ratio: 5 / 6;
	overflow: hidden;
}
.mz-shift__photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* Die Marke: logo-bloom.svg bringt den Verlauf mit, die Deckkraft macht
   daraus über der Wand Rosa und über dem Blazer Mauve; auf Weiß steht sie
   dann voll im Bloom. Sie steht im Fluss NACH dem Foto und wird per negativem
   Rand darüber gezogen (Prozent-Ränder beziehen sich auf die Spaltenbreite:
   Fotohöhe 120 %, Marke ab 30 % von oben → -90 %). Sobald ihre Oberkante beim
   Scrollen die Haftlinie erreicht, bleibt sie im Viewport stehen, während Foto
   und Text weiterlaufen — bis die Spalte endet und sie neben dem Schlusssatz
   ablegt. Der untere Rand hält sie dabei etwas über dem Spaltenende. */
.mz-shift__mark {
	position: sticky;
	inset-block-start: clamp(9rem, 26vh, 16rem);
	z-index: 2;
	inline-size: 84%;
	margin: -90% 0 var(--wp--preset--spacing--50) 8% !important;
	pointer-events: none;
	opacity: 0.65;
}
.mz-shift__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

@media (max-width: 781px) {
	/* Gestapelt: erst das Foto mit der Marke darüber, dann der Text; nichts
	   klebt, die Marke hat hier keine Laufstrecke. */
	/* Der negative Rand der Marke verkürzt den Fluss der Spalte (Foto 120 %,
	   Fluss endet bei 92 %) — ohne Streckung auf Zeilenhöhe ragte das Foto in
	   den Text. Die Polsterung füllt genau die Differenz auf. */
	.mz-shift__media {
		margin-block-end: var(--wp--preset--spacing--40);
		padding-block-end: 28%;
	}
	.mz-shift__mark {
		position: relative;
		inset-block-start: auto;
		margin-block-end: 0 !important;
	}
	.mz-shift__copy p, .mz-shift__copy ul { max-inline-size: none; }
	.mz-shift .mz-shift__copy > .mz-shift__outlook { margin-block-start: var(--wp--preset--spacing--60); }
}

/* --- Horizont-Band: Bildband mit Parallax.
   Der Aufbau in drei Ebenen:
   1. .mz-horizon__bg   — das Foto steht fest im Viewport, das Band wandert
                          darüber. Stärker geht Parallax nicht: der Hintergrund
                          bewegt sich mit voller Scrollgeschwindigkeit gegen die
                          Seite. Nicht `background-attachment: fixed` (auf iOS
                          unzuverlässig), sondern ein fixiertes Bild in einem
                          per `clip-path` beschnittenen Band.
   2. ::before          — der helle Schleier. Ohne ihn verliert der
                          Bloom-Verlauf der Schrift auf dem hellen Himmel
                          seinen Halt.
   3. .mz-horizon__copy — Glyphe, Satz, Signatur. */
/* Das Band laeuft von Kante zu Kante und traegt selbst keine Polsterung — es
   ist ein harter Schnitt zwischen zwei Sektionen. Die Nachbarn behalten ihre
   eigene: der Abstand zu deren Inhalt bleibt, ein weisser Streifen entsteht
   dadurch nicht, weil das Band bündig an ihrer Kante sitzt. */
.mz-horizon {
	padding: 0 !important;
}
.mz-horizon__band {
	position: relative;
	/* Die Sektion ist selbst schon randlos und ohne Polsterung. Das `alignfull`
	   des Bandes würde die Randkompensation ein zweites Mal anwenden (-48 px
	   links, 96 px Mehrbreite) und damit 48 px waagerechten Überlauf am
	   Dokument erzeugen. Hier also zurück auf volle Sektionsbreite. */
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0 !important;
	overflow: hidden;
	aspect-ratio: 2.4;
	min-block-size: 22rem;
	margin: 0;
	padding: 0 !important;
	background-color: var(--wp--preset--color--shade);
	/* `clip-path` klammert das fixierte Bild ans Band, ohne — anders als
	   transform, filter oder will-change — selbst zum Bezugsrahmen für
	   `position: fixed` zu werden. Genau darauf beruht der Effekt. */
	clip-path: inset(0);
}
.mz-horizon__bg {
	/* Das Bild steht im Viewport still, das Band wandert darüber hinweg. Damit
	   laeuft der Hintergrund exakt gegen die Scrollbewegung — 1:1, nicht
	   gedaempft. Kein JavaScript, keine Rechnung pro Frame: der Browser haelt
	   es von sich aus fest. */
	position: fixed;
	/* `inset: 0` statt einer Hoehenangabe: das fixierte Element ist damit exakt
	   der Viewport — kein svh/lvh-Raten, und das Band ist auf jeder Position
	   vollstaendig gedeckt. */
	inset: 0;
	z-index: 0;
	margin: 0 !important;
}
.mz-horizon__bg img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center center;
}
.mz-horizon__band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}

.mz-horizon__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	block-size: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	text-align: center;
	/* Das Anführungszeichen kommt aus .mz-quotemark (Klasse an der Copy) —
	   auf dem Foto in Weiß. */
	--mz-quotemark-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.25rem);
	--mz-quotemark-color: var(--wp--preset--color--white);
}
.mz-horizon__quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}
.mz-horizon__quote.wp-block-quote::before,
.mz-horizon__quote.wp-block-quote::after { content: none; }

.mz-horizon__text {
	margin: 0;
	font-family: var(--font-body);
	/* Eigener Grad statt einer Stufe aus der Skala: der Satz soll das Band
	   tragen und laeuft deshalb deutlich groesser als eine Ueberschrift. */
	font-size: clamp(1.75rem, 0.9rem + 3.2vw, 4rem);
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	/* Rückfallfarbe zuerst — wo background-clip:text fehlt, bleibt der Satz lesbar. */
	color: var(--bloom-rose);
	/* Durchgehend Rosa aus dem Bloom-Set: Rosa an beiden Enden, in der Mitte
	   ein helles, fast weißes Rosa als Lichtkante. So leuchtet der Satz schon
	   im Ruhezustand, und der Sheen (siehe Ambient-Block) schiebt nur das
	   Licht durch — nie kippt er ins matte Butter. */
	background-image: linear-gradient(100deg,
		var(--bloom-rose) 0%,
		color-mix(in srgb, var(--bloom-rose) 55%, #fff) 50%,
		var(--bloom-rose) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	/* Der Satz steht auf einem Foto: ein weicher Schlagschatten hält die
	   Kontur, dazu ein zarter rosa Schein, der den Verlauf leuchten lässt. */
	filter:
		drop-shadow(0 2px 10px rgba(14, 14, 14, 0.34))
		drop-shadow(0 0 18px color-mix(in srgb, var(--bloom-rose) 55%, transparent));
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.mz-horizon__text {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}
.mz-horizon__quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--80);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-style: normal;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
	text-shadow: 0 1px 10px rgba(14, 14, 14, 0.32);
}
.mz-horizon__quote cite strong {
	display: block;
	font-size: var(--fs-medium);
	font-weight: 700;
}
.mz-horizon__role {
	display: block;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
}

@media (max-width: 781px) {
	/* Hochkant wird aus dem Panoramaband ein Hochformat — sonst bliebe ein
	   Streifen von 150 px Höhe übrig, in dem der Satz nicht steht. */
	.mz-horizon__band { aspect-ratio: 3 / 4; }
	.mz-horizon__text { line-height: 1.5; }
	.mz-horizon__text br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	/* Ohne Bewegung wird aus dem fixierten Bild ein normaler Bandhintergrund. */
	.mz-horizon__band { clip-path: none; }
	.mz-horizon__bg {
		position: absolute;
		inset: 0;
		block-size: 100%;
	}
}

/* --- Was bleibt: Stimmen-Raster.
   Ein großes Anführungszeichen mittig über jedem Zitat — dieselbe Lösung wie
   beim Horizont-Band —, darunter Name und Rolle, alles zentriert. Die Sektion
   liegt auf reinem Weiß, ohne Tönung und ohne Ambient-Blasen: das „Folge
   mir"-Band darunter behält seinen Verlauf, und der Sprung von Weiß auf
   Farbe trennt die beiden Bereiche deutlicher als zwei Verläufe nebeneinander.
   Bewegung kommt trotzdem hinein — leise: das Bloom-Z läuft als Wasserzeichen
   links angeschnitten beim Scrollen mit, und die drei Stimmen steigen
   nacheinander ein statt als ein Block. */
.mz-voices {
	position: relative;
	overflow: hidden;
	background-color: #fff;
}
.mz-voices .mz-rail { position: relative; z-index: 1; }
/* Das Wasserzeichen als Pseudo-Element statt als Bild im Seiteninhalt: die
   Sektion steht längst in der Datenbank, und reine Dekoration hat weder im
   Editor noch im Vorlesefluss etwas verloren (dieselbe Überlegung wie bei
   den Ambient-Blasen). Das Bloom-Z aus dem Wandel-Block, hier deutlich
   zurückgenommen, damit die Fläche weiß bleibt und die Zitate vorne stehen.
   Beim Scrollen läuft es gegenläufig zum Inhalt — --mz-parallax liefert
   reveal.js, die Sektion ist dort registriert. */
.mz-voices::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	z-index: 0;
	inline-size: min(44vw, 30rem);
	aspect-ratio: 1470 / 1090;
	background: url("./assets/img/logo-bloom.svg") center / contain no-repeat;
	transform: translate(-38%, -50%) translateY(calc(var(--mz-parallax, 0px) * -1.4));
	will-change: transform;
	opacity: 0.3;
	pointer-events: none;
}
/* Mobil fällt das Wasserzeichen weg — die Karten stehen dort auf voller
   Breite, das Z hinge mitten im Zitat. */
@media (max-width: 781px) {
	.mz-voices::before { display: none; }
}
/* Gestaffelter Einlauf der drei Stimmen: reveal.js setzt am Raster
   `mz-stagger` und je Karte einen Versatz. Ausgangszustand nur hier, nicht
   global auf .mz-stagger — die anderen Raster bleiben, wie sie sind. Sichtbar
   werden die Karten über `.mz-stagger.mz-in > *` (Magazin-Reveal). */
@media (prefers-reduced-motion: no-preference) {
	.mz-anim .mz-voices__grid > * {
		opacity: 0;
		transform: translateY(var(--wp--preset--spacing--30));
		transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	}
}
/* Kopfzeile nach dem Vorbild „Folge mir": der Claim in der Display-Schrift
   (Bebas) auf Display-Größe, darunter das Versal-Label — beides zentriert und
   in der Signalfarbe, damit die Kopfzeile mit den Namen und Rollen im Raster
   eine Familie bildet: Bebas oben, Garet-Label darunter, DM Sans im Zitat.
   Das font-family !important überstimmt `has-body-font-family`, das ältere
   Seiteninhalte in der DB am Heading noch tragen. */
.mz-voices .mz-voices__claim {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-family: var(--font-display) !important;
	font-size: var(--fs-display);
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	line-height: 0.88;
	text-transform: uppercase;
	color: var(--signal);
}
.mz-voices .mz-voices__lead {
	margin-block: 0 var(--wp--preset--spacing--70);
	/* Label-Systematik wie .is-style-section-label — hier ausgeschrieben, weil
	   ältere Seiteninhalte den Absatz noch ohne den Block-Style tragen. */
	font-family: var(--font-geometric) !important;
	font-size: var(--fs-x-small);
	font-weight: 600;
	letter-spacing: var(--label-tracking);
	line-height: 1.4;
	text-transform: uppercase;
	/* Auf Weiß kommt --signal nur auf 4.1:1 — für den kleinen Schriftgrad
	   reicht das nicht (AA: 4.5:1). --signal-ink liegt bei 5.7:1; Claim,
	   Anführungszeichen und Namen bleiben bei --signal, sie sind groß genug. */
	color: var(--signal-ink);
}

/* .wp-block-group-Spezifität wie bei den anderen Rastern des Themes: sonst
   setzt der Fluss-Layout-Abstand von WordPress der zweiten Spalte einen
   Innenabstand oben und die Anführungszeichen stehen auf verschiedenen Höhen. */
.mz-voices__grid.wp-block-group {
	display: grid;
	/* Zwei Spalten ab Tablet, drei auf dem Desktop (unten). Die Kartenbreite
	   bleibt bei 20rem gedeckelt, damit die Zeilen nicht zu lang werden. */
	grid-template-columns: repeat(2, minmax(0, 20rem));
	justify-content: center;
	/* `stretch` statt `start`: die Spalten werden gleich hoch, dadurch stehen
	   die Anführungszeichen oben und die Namenszeilen unten auf einer Linie. */
	align-items: stretch;
	/* Enger als spacing-80: drei Karten à 20rem passen so auf die 1120er-Schiene. */
	gap: var(--wp--preset--spacing--60) !important;
}
.mz-voices__grid.wp-block-group > * { margin-block: 0; }
/* Bleibt eine Stimme allein in der letzten Zeile, rückt sie mittig — statt
   links unter die erste Spalte zu fallen. */
.mz-voices__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	inline-size: min(100%, 20rem);
}
@media (min-width: 1024px) {
	.mz-voices__grid.wp-block-group { grid-template-columns: repeat(3, minmax(0, 20rem)); }
	.mz-voices__item:last-child:nth-child(odd) { grid-column: auto; inline-size: auto; }
	.mz-voices__item:last-child:nth-child(3n + 1) { grid-column: 1 / -1; inline-size: min(100%, 20rem); }
}
.mz-voices__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	block-size: 100%;
	/* Das Anführungszeichen kommt aus .mz-quotemark (Klasse am Item) — wie
	   beim Horizont-Band ein einzelnes großes Zeichen als Block über dem
	   Zitat, hier in der Signalfarbe. */
	--mz-quotemark-size: clamp(2.6rem, 2rem + 1.6vw, 3.5rem);
	--mz-quotemark-gap: var(--wp--preset--spacing--30);
	--mz-quotemark-color: var(--signal);
}

.mz-voices__card.wp-block-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
}
.mz-voices__card.wp-block-quote::before,
.mz-voices__card.wp-block-quote::after { content: none; }
.mz-voices__text {
	margin: 0;
	/* theme.json setzt core/quote global auf die Bebas — hier soll das Zitat
	   aber lesbar im Fließtext stehen, nicht als Display-Zeile. */
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.mz-voices__card cite {
	display: block;
	/* `auto` schiebt Name und Rolle an den Fuß der Spalte — so stehen sie in
	   allen Spalten auf einer Linie, unabhängig von der Länge des Zitats. */
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--50);
	font-family: var(--font-body);
	font-style: normal;
}
.mz-voices__card cite strong {
	display: block;
	margin-block-end: 0.35em;
	font-size: var(--fs-large);
	font-weight: 700;
	line-height: 1.2;
	color: var(--signal);
}
.mz-voices__role {
	display: block;
	font-size: var(--fs-x-small);
	font-weight: 600;
	letter-spacing: var(--label-tracking);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink-soft);
}

@media (max-width: 781px) {
	.mz-voices__grid.wp-block-group { grid-template-columns: minmax(0, 1fr); }
	.mz-voices__item:last-child:nth-child(odd) { grid-column: auto; inline-size: auto; }
}

/* --- LinkedIn-Band: endlos durchlaufendes Karussell aus Beitragsbildern.
   Dieselbe Mechanik wie das Logo-Band: reveal.js klont die Kartenliste, die
   Keyframe schiebt die Spur um genau eine Hälfte (-50 %), dadurch schließt
   sich die Schleife unsichtbar. Ohne den Klon steht das Band still — deshalb
   hängt die Bewegung an der Klasse, die erst das Script setzt. */
.mz-linkedin {
	background-color: var(--wp--preset--color--shade);
	overflow: clip;
	/* Deutlich mehr als die Sektionsluft: das randlose Band braucht mehr Abstand
	   zu den Nachbarn als ein Textblock, sonst klebt es an ihnen. Gewinnt gegen
	   die Rhythmus-Regel weiter oben, weil spaeter und gleich schwer. */
	padding-block: calc(var(--mz-section-pad) * 1.5) !important;
}
.mz-linkedin__head {
	margin-block-end: var(--wp--preset--spacing--80);
	row-gap: var(--wp--preset--spacing--30);
}
/* Kopfzeile nach dem Vorbild „Folge mir": grosser Claim in der Display-Schrift,
   darunter ein Versal-Label; rechts, buendig mit der Grundlinie, das LinkedIn-Logo
   als Link zum Profil. Keine Schaltflaeche, weder oben noch unter dem Band.
   Beides in Signalblau, passend zum Logo. Der Claim ist Display-Groesse und
   traegt --signal (3.2:1 auf der staerksten Ambient-Blase, AA fuer grossen
   Text); das kleine Label braucht --signal-ink (4.6:1 dort, 5.5:1 auf Shade). */
.mz-linkedin .mz-linkedin__claim {
	margin: 0;
	font-size: var(--fs-display);
	line-height: 0.88;
	color: var(--signal);
}
.mz-linkedin .mz-linkedin__lead {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--signal-ink);
}
/* Rechts das LinkedIn-Logo selbst, so wie es die Kundin aus Canva kennt:
   blaues Quadrat mit weissem „in", ohne Rahmen und ohne Schaltflaeche. Das
   Weiss kommt vom Rechteck hinter dem Pfad — der Logo-Pfad spart die Buchstaben
   nur aus, sonst schiene der Sektionsgrund hindurch. */
.mz-linkedin__logo {
	display: block;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-end: 0.15em;
	color: var(--signal);
	transition: transform 0.2s ease, color 0.2s ease;
}
.mz-linkedin__logo svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
.mz-linkedin__logo:hover,
.mz-linkedin__logo:focus-visible {
	transform: translateY(-2px);
	color: var(--signal-ink);
}

/* Der Streifen beschneidet und läuft über beide Fensterkanten hinaus, die
   Spur darin ist die Reihe, die geschoben wird — dieselbe Aufteilung wie beim
   Logo-Band. Läge die Bewegung auf den Gruppen statt auf der Spur, würde
   jede Gruppe um ihre eigene halbe Breite wandern statt die Reihe um eine
   Hälfte, und Original und Klon liefen auseinander. */
.mz-linkedin > .mz-linkedin__strip {
	position: relative;
	/* Der Streifen steht in einem `constrained` Layout. Das legt auf jedes
	   Kind, das nicht alignfull ist, `margin-inline: auto !important` — ein
	   eigener negativer Rand ohne !important verpufft, und der Streifen
	   begaenne an der Innenkante des Root-Paddings statt am Fensterrand, mit
	   einer sichtbaren Luecke links. Deshalb hier mit hoeherer Spezifitaet
	   und !important; im Pattern traegt der Streifen zusaetzlich `alignfull`,
	   damit das Layout ihn von vornherein in Ruhe laesst. Bereits eingefuegte
	   Seiteninhalte ohne die Klasse fangen diese Regeln trotzdem ab.
	   Bewusst kein 100vw: das zaehlt die Scrollleiste mit und verschiebt den
	   Streifen um deren halbe Breite. Die Sektion ist alignfull und traegt
	   genau das Root-Padding — um das herausgezogen, liegt der Streifen exakt
	   Kante an Kante. */
	inline-size: auto;
	max-inline-size: none !important;
	margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)) !important;
	overflow: hidden;
}
.mz-linkedin__track {
	display: flex;
	/* `flex: none` und `max-content`: ohne beides staucht der Flex-Container
	   die Spur auf Fensterbreite, und -50 % wären dann nicht mehr genau eine
	   Hälfte — die Schleife würde sichtbar springen. */
	flex: none;
	inline-size: max-content;
}
.mz-linkedin__group {
	display: flex;
	flex: none;
	gap: var(--wp--preset--spacing--30);
	/* Derselbe Abstand noch einmal am Ende: sonst stoßen die letzte Karte des
	   Originals und die erste des Klons ohne Lücke aneinander. */
	padding-inline-end: var(--wp--preset--spacing--30);
	margin: 0;
	padding-block: 0;
	padding-inline-start: 0;
	list-style: none;
}
.mz-linkedin__group > li {
	flex: none;
	margin: 0;
}
.mz-linkedin--running .mz-linkedin__track {
	animation: mz-linkedin-scroll 90s linear infinite;
	will-change: transform;
}
/* Unter dem Zeiger und beim Durchtabben hält das Band an — sonst wäre eine
   Karte nicht anzusteuern, ohne ihr hinterherzuzielen. */
.mz-linkedin--running:hover .mz-linkedin__track,
.mz-linkedin--running:focus-within .mz-linkedin__track {
	animation-play-state: paused;
}
@keyframes mz-linkedin-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Karten: grosszuegig und kantig, die Bilder liegen gedimmt (60 %) im Band
   und werden erst unter dem Zeiger bzw. im Fokus voll sichtbar — die Reihe
   wirkt so als ruhige Flaeche, aus der die angesteuerte Karte hervortritt. */
.mz-linkedin__card {
	display: block;
	inline-size: clamp(12rem, 20vw, 19rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--white);
	/* Die generische Link-Unterstreichung (wachsender Farbverlauf am Fuss)
	   gehoert nicht auf eine Bildkarte — sie erschiene beim Hover als
	   schwarzer Strich unter dem Bild. */
	background-image: none;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}
.mz-linkedin__card img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mz-linkedin__card:hover,
.mz-linkedin__card:focus-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* Kein Durchlauf — dafür wird die Spur von Hand scrollbar, damit alle
	   Karten erreichbar bleiben. */
	.mz-linkedin--running .mz-linkedin__track { animation: none; }
	.mz-linkedin > .mz-linkedin__strip { overflow-x: auto; }
	.mz-linkedin__card,
	.mz-linkedin__logo { transition: none; }
	.mz-linkedin__logo:hover { transform: none; }
}

/* --- CTA-Abbinder: Band im Bloom-Verlauf.
   Links Claim, Einladung und Pille, rechts das Monogramm als Lichtmarke mit
   dem Porträt im Kreis darüber. Der Verlauf läuft waagerecht — das Band ist
   breiter als hoch, senkrecht wären beide Farben kaum auseinanderzuhalten. */
.mz-cta.wp-block-group {
	overflow: clip;
	background-color: var(--bloom-rose);
	background-image: linear-gradient(90deg, var(--bloom-rose) 0%, var(--bloom-butter) 100%);
	color: var(--white);
}
.mz-cta__row.wp-block-columns { align-items: center; }
.mz-cta__copy,
.mz-cta__copy h2,
.mz-cta__copy p {
	color: var(--white);
}
/* Der Claim steht bewusst mager, nicht fett: der Entwurf setzt ihn als ruhige
   Versalzeile, die Betonung liegt auf „Let's Talk!". */
.mz-cta .mz-cta__claim {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-family: var(--font-geometric) !important;
	font-size: var(--fs-x-large);
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
	hyphens: none;
	-webkit-hyphens: none;
}
.mz-cta__hello {
	margin-block: 0 0.35em;
	font-size: var(--fs-large);
	line-height: 1.2;
}
.mz-cta__hello strong { font-weight: 700; }
.mz-cta__lead {
	margin-block: 0;
	font-size: var(--fs-medium);
	line-height: 1.5;
}

.mz-cta__stage {
	position: relative;
	padding: 0 !important;
	background: none !important;
	min-block-size: 18rem;
}
/* Das Monogramm reicht über die Spalte hinaus — die Sektion beschneidet.
   Beim Scrollen läuft es gegenläufig über den Verlauf und hinter dem Porträt
   her: --mz-parallax liefert reveal.js. */
.mz-cta__mark {
	position: absolute;
	inset-inline: -6% 22%;
	inset-block: 50% auto;
	z-index: 1;
	margin: 0 !important;
	transform: translateY(-50%) translateY(calc(var(--mz-parallax, 0px) * -2.2));
	will-change: transform;
	pointer-events: none;
	opacity: 0.4;
}
.mz-cta__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	filter: brightness(0) invert(1);
}
.mz-cta__portrait {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	margin-inline-start: auto !important;
	/* Größer als im ersten Entwurf: das Porträt trägt die rechte Hälfte des
	   Bands, das Monogramm dahinter bleibt als Lichtmarke sichtbar. */
	inline-size: min(19rem, 76%);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	/* Der Kreis trägt einen hellen Grund: das Porträt ist freigestellt, ohne
	   ihn stünde es unmittelbar auf dem Verlauf. */
	background-color: color-mix(in srgb, var(--white) 82%, var(--shade));
}
.mz-cta__portrait img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 18%;
}

@media (max-width: 781px) {
	.mz-cta__row.wp-block-columns { align-items: stretch; }
	.mz-cta__stage { min-block-size: 15rem; }
	.mz-cta__portrait { margin-inline: auto !important; inline-size: min(16rem, 70%); }
	.mz-cta__mark { inset-inline: 0 30%; }
}

/* --- Terminbuchung (/buchen): Kontakt-Panel + cal.com.
   Das Panel folgt dem Canva-Entwurf der Kundin: der Bloom-Verlauf als
   angeschnittene, gerundete Fläche (kein Seitenhintergrund), links die Copy
   komplett in Signalblau, rechts das Porträt im Kreis mit dem Z-Monogramm als
   Lichtmarke darunter. Der Verlauf ist gegenüber dem CTA-Band aufgehellt:
   Signalblau erreicht auf dem satten Rosa nur 2.4:1 — auf 60 % Rosa kommt
   --signal-ink auf gut 4:1 und trägt damit den Fließtext. */
.mz-booking.wp-block-group {
	padding-block: calc(var(--mz-section-pad) * 0.45) var(--mz-section-pad) !important;
}
.mz-booking__panel.wp-block-group {
	position: relative;
	overflow: clip;
	border-radius: 20px;
	padding: clamp(2rem, 1.2rem + 3.4vw, 4.75rem) clamp(1.5rem, 0.8rem + 3vw, 4rem) !important;
	background-color: color-mix(in srgb, var(--bloom-rose) 60%, var(--white));
	background-image: linear-gradient(90deg,
		color-mix(in srgb, var(--bloom-rose) 62%, var(--white)) 0%,
		color-mix(in srgb, var(--bloom-butter) 72%, var(--white)) 100%);
}
.mz-booking__row.wp-block-columns {
	position: relative;
	z-index: 1;
	align-items: center;
	margin-block: 0;
}
.mz-booking__copy > * { max-inline-size: 30rem; }
.mz-booking .mz-booking__title {
	margin-block: 0 0.35em;
	letter-spacing: 0.05em;
	line-height: 0.9;
}
/* Die Einladung steht in Garet, mager und leicht gesperrt — wie „Ich freue
   mich mit dir zu sprechen!“ im Entwurf. */
.mz-booking .mz-booking__hello {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
.mz-booking .mz-booking__lead {
	margin-block: 0;
	line-height: 1.55;
}
.mz-booking .mz-booking__hint {
	margin-block: var(--wp--preset--spacing--30) 0;
	opacity: 0.85;
}

/* Bühne: Porträt im Kreis rechts, das Monogramm läuft unten links darunter
   her — dieselbe Schichtung wie im CTA-Abbinder, nur größer. */
.mz-booking__stage {
	position: relative;
	padding: 0 !important;
	background: none !important;
	min-block-size: 18rem;
}
.mz-booking__mark {
	position: absolute;
	inset-inline: -8% 26%;
	inset-block: auto -22%;
	z-index: 1;
	margin: 0 !important;
	transform: translateY(calc(var(--mz-parallax, 0px) * -1.8));
	will-change: transform;
	pointer-events: none;
	opacity: 0.55;
}
.mz-booking__mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	filter: brightness(0) invert(1);
}
.mz-booking__portrait {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	margin-inline-start: auto !important;
	inline-size: min(21rem, 82%);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	/* Heller Grund im Kreis: das Porträt ist freigestellt. */
	background-color: color-mix(in srgb, var(--white) 84%, var(--shade));
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--ink) 45%, transparent);
}
.mz-booking__portrait img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 18%;
}

/* Kalender: Label + Headline, darunter die Embed-Fläche. Solange cal.com
   nicht geladen hat (kein Link hinterlegt oder Ladefehler), steht der
   Platzhalter aus dem Pattern; `is-live` setzt booking.js. */
.mz-booking__calendar .mz-booking__label { margin-block: 0 var(--wp--preset--spacing--20); }
.mz-booking__calendar .mz-booking__calendar-title { margin-block: 0 var(--wp--preset--spacing--40); }
.mz-booking__embed {
	position: relative;
	min-block-size: 24rem;
	border-radius: 20px;
	overflow: clip;
	background-color: var(--shade);
}
.mz-booking__embed.is-live {
	background-color: transparent;
	overflow: visible;
}
.mz-booking__embed.is-live > .mz-booking__placeholder { display: none; }
/* cal.com rendert ein iframe direkt ins Element; volle Breite, Höhe kommt
   vom Embed selbst. */
.mz-booking__embed > iframe,
.mz-booking__embed .cal-embed {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	border: 0;
}
.mz-booking__placeholder.wp-block-group {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
	border: 1.5px dashed color-mix(in srgb, var(--signal) 32%, transparent);
	border-radius: inherit;
	text-align: center;
}
/* Kalender-Icon aus reiner CSS — kein Bild, kein Emoji im Inhalt. */
.mz-booking__placeholder::before {
	content: "";
	inline-size: 3.25rem;
	block-size: 3.25rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	border-radius: 12px;
	background:
		linear-gradient(var(--signal), var(--signal)) top / 100% 0.8rem no-repeat,
		repeating-linear-gradient(90deg, transparent 0 0.35rem, color-mix(in srgb, var(--signal) 28%, transparent) 0.35rem 0.75rem) center 1.6rem / 2.1rem 0.4rem no-repeat,
		repeating-linear-gradient(90deg, transparent 0 0.35rem, color-mix(in srgb, var(--signal) 28%, transparent) 0.35rem 0.75rem) center 2.35rem / 2.1rem 0.4rem no-repeat,
		var(--white);
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--signal) 40%, transparent);
}
.mz-booking__placeholder > * { margin-block: 0; }
.mz-booking__placeholder > * + * { margin-block-start: 0.5rem; }
.mz-booking__placeholder .mz-booking__placeholder-title { font-weight: 600; }

@media (max-width: 781px) {
	.mz-booking__row.wp-block-columns { align-items: stretch; }
	.mz-booking__copy > * { max-inline-size: none; }
	.mz-booking__stage { min-block-size: 15rem; }
	.mz-booking__portrait { margin-inline: auto !important; inline-size: min(16rem, 70%); }
	.mz-booking__mark { inset-inline: 0 30%; inset-block: auto -18%; }
	.mz-booking__embed { min-block-size: 20rem; }
}

/* --- Papier-Pille: Gegenstück zur Bloom-Pille für farbige Flächen.
   Steht am Dateiende und mit .wp-element-button in der Kette, aus demselben
   Grund wie dort: die Glas-Grundregeln für Buttons setzen ihre Füllung mit
   !important. Schrift in Signalblau (Text) — das hellere Signalblau erreicht
   auf Weiß bei Buttongröße nur knapp 4:1. Ruhe: weicher Schatten, der die
   Pille vom Verlauf abhebt; Hover: die Pille hebt sich, der Schatten wächst,
   die Fläche tönt sich minimal blau. */
.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button {
	--mz-pill-shadow: 0 10px 28px -10px color-mix(in srgb, var(--ink) 28%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 14%, transparent);
	--mz-pill-shadow-hover: 0 18px 40px -12px color-mix(in srgb, var(--ink) 36%, transparent), 0 4px 10px -3px color-mix(in srgb, var(--ink) 18%, transparent);
	border: 0;
	border-radius: 999px;
	padding-block: 0.85em;
	padding-inline: 2.2em;
	background-image: none !important;
	background-color: var(--wp--preset--color--white) !important;
	box-shadow: var(--mz-pill-shadow) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--signal-ink) !important;
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}
.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button:focus-visible {
	transform: translateY(-2px);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 94%, var(--signal)) !important;
	box-shadow: var(--mz-pill-shadow-hover) !important;
	color: var(--signal-ink) !important;
}

/* --- Signal-Pille: die gefüllte Primäraktion für farbige Flächen.
   Signalblau (Text) als Fläche — die dunklere Stufe, damit Weiß darauf über
   6:1 kommt; das helle Signalblau schafft nur 4:1. Hover: die Fläche wird
   eine Nuance dunkler, ein blauer Halo legt sich um die Pille. */
.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button {
	--mz-pill-shadow: 0 10px 28px -10px color-mix(in srgb, var(--signal-ink) 55%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 16%, transparent);
	--mz-pill-shadow-hover: 0 18px 40px -12px color-mix(in srgb, var(--signal-ink) 70%, transparent), 0 4px 10px -3px color-mix(in srgb, var(--ink) 20%, transparent);
	border: 0;
	border-radius: 999px;
	padding-block: 0.85em;
	padding-inline: 2.2em;
	background-image: none !important;
	background-color: var(--signal-ink) !important;
	box-shadow: var(--mz-pill-shadow) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}
.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button:focus-visible {
	transform: translateY(-2px);
	background-color: color-mix(in srgb, var(--signal-ink) 82%, var(--ink)) !important;
	box-shadow: var(--mz-pill-shadow-hover) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Fokus für beide Pillen: Signalblau hat auf dem rosa Ende des Verlaufs zu
   wenig Kontrast (siehe :root), deshalb ein Ink-Ring mit Abstand — der
   Zwischenraum trennt den Ring von Pille und Verlauf gleichermaßen. */
.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button:focus-visible,
.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 4px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button,
	.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button {
		transition: none;
	}
	.wp-block-button.is-style-paper-pill > .wp-block-button__link.wp-element-button:hover,
	.wp-block-button.is-style-signal-pill > .wp-block-button__link.wp-element-button:hover {
		transform: none;
	}
}

/* --- CTA-Abbinder: die Terminbuchung ist die eine Primäraktion der Seite.
   Größer als jede andere Pille (eigene Stufe zwischen medium und large,
   halbfett), mit Pfeil als Richtungszeichen, der beim Hover ein Stück
   vorrückt. Steht nach den Pillen-Skins, damit Größe und Gewicht bei gleicher
   Spezifität gewinnen. Der Pfeil ist reine Dekoration — das Label allein ist
   vollständig; Screenreader lesen ihn im schlimmsten Fall als „Pfeil". */
.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding-block: 1em;
	padding-inline: 2.4em 2.1em;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.2;
}
.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button::after {
	content: "\2192";
	display: inline-block;
	font-weight: 500;
	transition: transform 0.25s ease;
}
.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button:hover::after,
.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button:focus-visible::after {
	transform: translateX(0.25em);
}
@media (prefers-reduced-motion: reduce) {
	.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button::after { transition: none; }
	.mz-cta .mz-cta__buttons .wp-block-button__link.wp-element-button:hover::after { transform: none; }
}

/* ==========================================================================
   --- Dauerbewegung: in jeder Sektion bewegt sich immer etwas.
   Zwei Ebenen, beide ruhig und ohne Informationswert:
   1. Ambient — weiche Farbblasen in den Markenfarben (Bloom, Aurora, Signal),
      die hinter dem Inhalt langsam driften. reveal.js setzt dafür pro Sektion
      eine `.mz-ambient`-Schicht mit drei <i>-Blasen ein; Farbe, Größe und
      Bahn stehen hier, je Sektion abgestimmt auf ihren Grund.
   2. Ein Detail im Vordergrund — schwebende Monogramme, ein langsamer Zoom auf
      den Fotos, ein Lichtsweep im Horizont-Satz, pulsierende Ringe um die
      Porträts, ein Scroll-Hinweis im Hero.
   Nur transform/opacity (kompositiert, kein Layout, kein Repaint). Alle
   Bewegungen laufen nur, solange die Sektion im Bild ist: `.mz-live` setzt
   reveal.js per IntersectionObserver, `--mz-play` erbt in die Sektion hinein.
   Bei prefers-reduced-motion existiert nichts davon — weder Blasen noch
   Keyframes; die Seite ist dann exakt der Stand von vorher.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Schalter: außerhalb des Bilds pausiert. Ohne JS fehlt `.mz-anim`, dann
	   läuft alles — lieber Bewegung als eine stehende Seite. */
	.mz-anim .wp-block-post-content > .alignfull:not(.mz-live),
	.mz-anim .mz-footer:not(.mz-live) {
		--mz-play: paused;
	}

	/* --- Ambient-Schicht: liegt hinter dem Inhalt, über dem Sektionsgrund.
	   `isolation: isolate` am Wirt macht z-index:-1 zu "hinter allem in dieser
	   Sektion, aber vor ihrem Hintergrund". Die Schicht beschneidet die Blasen
	   selbst, die Sektion braucht dafür kein overflow. --- */
	.mz-vision,
	.mz-shift,
	.mz-offer,
	.mz-linkedin,
	.mz-cta,
	.mz-stats,
	.mz-work,
	.mz-speaking,
	.mz-podcast,
	.mz-quote,
	.mz-faq,
	.mz-footer,
	.mz-kquote__panel {
		position: relative;
		isolation: isolate;
	}
	.mz-ambient {
		position: absolute;
		inset: 0;
		z-index: -1;
		overflow: hidden;
		pointer-events: none;
		/* Das Constrained-Layout gäbe der Schicht sonst die Content-Breite
		   und zentrierte sie — die Blasen endeten an einer harten Kante. */
		inline-size: 100%;
		max-inline-size: none !important;
		margin: 0 !important;
	}
	.mz-ambient i {
		position: absolute;
		display: block;
		inline-size: var(--mz-blob-size, 46vmax);
		aspect-ratio: 1;
		border-radius: 50%;
		/* Weicher Rand bis zum Kreisrand — kein blur(), der wäre teuer. */
		background-image: radial-gradient(circle closest-side, var(--mz-blob) 0%, transparent 100%);
		opacity: var(--mz-blob-alpha, 1);
		/* Longhands statt Kurzschrift: die Kurzschrift würde play-state
		   zurücksetzen, und der Schalter oben hängt genau daran. */
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: both;
	}
	/* Drei Bahnen mit verschiedenen Dauern und negativem Versatz: die Blasen
	   starten mitten in ihrer Bewegung und laufen nie synchron. */
	.mz-ambient i:nth-child(1) {
		inset-block-start: -22%;
		inset-inline-end: -12%;
		animation-name: mz-drift-a;
		animation-duration: 28s;
	}
	.mz-ambient i:nth-child(2) {
		inset-block-end: -26%;
		inset-inline-start: -14%;
		animation-name: mz-drift-b;
		animation-duration: 34s;
		animation-delay: -11s;
	}
	.mz-ambient i:nth-child(3) {
		--mz-blob-size: 30vmax;
		inset-block-start: 28%;
		inset-inline-start: 40%;
		animation-name: mz-drift-c;
		animation-duration: 40s;
		animation-delay: -23s;
	}
	/* Prozentwerte beziehen sich auf die Blase selbst: ~8 % von 46vmax sind
	   gut 3 vmax Weg — sichtbar, aber nie hektisch. */
	@keyframes mz-drift-a {
		from { transform: translate3d(0, 0, 0) scale(1); }
		50%  { transform: translate3d(-7%, 9%, 0) scale(1.08); }
		to   { transform: translate3d(5%, -4%, 0) scale(0.94); }
	}
	@keyframes mz-drift-b {
		from { transform: translate3d(0, 0, 0) scale(1); }
		50%  { transform: translate3d(9%, -7%, 0) scale(1.1); }
		to   { transform: translate3d(-4%, 6%, 0) scale(0.96); }
	}
	@keyframes mz-drift-c {
		from { transform: translate3d(0, 0, 0) scale(0.95); }
		50%  { transform: translate3d(-10%, -6%, 0) scale(1.06); }
		to   { transform: translate3d(8%, 9%, 0) scale(1); }
	}

	/* --- Farben je Sektion: auf ihren Grund abgestimmt. --- */
	/* Weiße Editorial-Sektionen: Butter oben rechts, Rosa unten links, ein
	   Hauch Flieder in der Mitte — der Marken-Wasch, nur in Bewegung. */
	.mz-speaking .mz-ambient i:nth-child(1),
	.mz-podcast .mz-ambient i:nth-child(1),
	.mz-quote .mz-ambient i:nth-child(1),
	.mz-faq .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--bloom-butter) 62%, transparent); }
	.mz-vision .mz-ambient i:nth-child(2),
	.mz-speaking .mz-ambient i:nth-child(2),
	.mz-podcast .mz-ambient i:nth-child(2),
	.mz-quote .mz-ambient i:nth-child(2),
	.mz-faq .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 34%, transparent); }
	.mz-vision .mz-ambient i:nth-child(3),
	.mz-speaking .mz-ambient i:nth-child(3),
	.mz-podcast .mz-ambient i:nth-child(3),
	.mz-quote .mz-ambient i:nth-child(3),
	.mz-faq .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--aurora-violet) 14%, transparent); }
	/* Über mich: ohne Gelb — die Kundin will die Sektion clean und weiß.
	   Rosa und Flieder bleiben, die Butter-Blase oben rechts entfällt. */
	.mz-vision > .mz-ambient i:nth-child(1) { display: none; }

	/* Wandel: gespiegelt — Rosa hinter dem Foto rechts, Butter links unten. */
	.mz-shift .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 30%, transparent); }
	.mz-shift .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--bloom-butter) 58%, transparent); }
	.mz-shift .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--aurora-cyan) 12%, transparent); }

	/* Angebote: auf dem Wasch dürfen die Blasen kräftiger sein — sie sind
	   derselbe Verlauf, nur lebendig. */
	.mz-offer .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 42%, transparent); }
	.mz-offer .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--bloom-butter) 70%, transparent); }
	.mz-offer .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--aurora-violet) 18%, transparent); }

	/* Stimmen: bewusst ohne Blasen — die Sektion bleibt reines Weiß, damit
	   sich das LinkedIn-Band darunter mit seinem Verlauf klar absetzt
	   (reveal.js setzt hier keine Ambient-Schicht ein). */

	/* LinkedIn: auf dem Grauton leise Aurora-Farben. */
	.mz-linkedin .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--aurora-violet) 14%, transparent); }
	.mz-linkedin .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--aurora-cyan) 18%, transparent); }
	.mz-linkedin .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 24%, transparent); }

	/* CTA und Zahlenband liegen selbst im Bloom-Verlauf: die Blasen tragen
	   dieselben Farben und lassen den Verlauf atmen, ohne ihn umzufärben. */
	.mz-cta .mz-ambient i:nth-child(1),
	.mz-stats .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 85%, transparent); }
	.mz-cta .mz-ambient i:nth-child(2),
	.mz-stats .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--bloom-butter) 90%, transparent); }
	.mz-cta .mz-ambient i:nth-child(3),
	.mz-stats .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--white) 45%, transparent); }
	/* Im CTA läuft der Verlauf waagerecht: Rosa wandert von der Mitte in die
	   Butter-Hälfte, Butter von rechts außen in die Rosa-Hälfte. */
	.mz-cta .mz-ambient i:nth-child(1) { inset-inline-end: auto; inset-inline-start: 30%; }
	.mz-cta .mz-ambient i:nth-child(2) { inset-inline-start: auto; inset-inline-end: -10%; }

	/* Work: auf Ink Signal und Violett, deutlich zurückgenommen. */
	.mz-work .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--signal) 22%, transparent); }
	.mz-work .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--aurora-violet) 20%, transparent); }
	.mz-work .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--aurora-cyan) 9%, transparent); }

	/* Fuß: nur ein Hauch, die Fläche soll weiß bleiben. */
	.mz-footer .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 16%, transparent); }
	.mz-footer .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--signal) 7%, transparent); }
	.mz-footer .mz-ambient i:nth-child(3) { display: none; }

	/* Keynote-Zitat: die beiden Aurora-Lichter des Panels (Cyan oben rechts,
	   Violett unten links) bekommen bewegte Zwillinge, dazu ein wanderndes
	   Weißlicht in der Mitte. Der Grund bleibt Signal, wo der Text steht. */
	.mz-kquote__panel .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--aurora-cyan) 60%, transparent); }
	.mz-kquote__panel .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--aurora-violet) 65%, transparent); }
	.mz-kquote__panel .mz-ambient i:nth-child(3) { --mz-blob: color-mix(in srgb, var(--white) 14%, transparent); }

	/* Über-mich-Bühne: eine Lichtschicht zwischen Wasch-Panel (::before, z 1)
	   und Porträt (z 2). Die Schicht ist auf das Panel beschnitten — dieselben
	   Maße und Rundung wie ::before — damit ihre Blasen nicht aus dem Panel
	   herauslaufen. Prozent-Größen, weil das Panel deutlich kleiner ist als
	   der Viewport. */
	.mz-vision__stage > .mz-ambient {
		inset-block-start: 12%;
		z-index: 1;
		border-radius: 20px;
	}
	.mz-vision__stage > .mz-ambient i:nth-child(1) { --mz-blob: color-mix(in srgb, var(--white) 80%, transparent); --mz-blob-size: 85%; inset-block-start: -20%; inset-inline-end: -25%; }
	.mz-vision__stage > .mz-ambient i:nth-child(2) { --mz-blob: color-mix(in srgb, var(--bloom-rose) 32%, transparent); --mz-blob-size: 90%; inset-block-end: -30%; inset-inline-start: -30%; }
	/* Kein Gelb in der Über-mich-Sektion: die dritte Blase (vorher Butter) entfällt. */
	.mz-vision__stage > .mz-ambient i:nth-child(3) { display: none; }
	@media (max-width: 781px) {
		.mz-vision__stage > .mz-ambient { inset-block-start: 14%; }
	}

	/* --- Schwebende Monogramme: das Z hebt und senkt sich kaum merklich.
	   Die Bewegung liegt auf dem <img>, nicht auf der Figur — dort sitzen
	   Parallax und Positionierung, die unangetastet bleiben. --- */
	.mz-hero__mark img,
	.mz-vision__mark img,
	.mz-kquote__mark img,
	.mz-cta__mark img,
	.mz-stats__mark img,
	.mz-work__mark img {
		animation: mz-float 16s ease-in-out infinite alternate;
	}
	.mz-vision__mark img { animation-duration: 12s; animation-delay: -4s; }
	.mz-kquote__mark img { animation-duration: 14s; animation-delay: -9s; }
	.mz-cta__mark img { animation-duration: 13s; animation-delay: -6s; }
	/* Die Bloom-Marke im Wandel dreht dazu ein wenig — sie ist die einzige
	   farbige Marke und darf etwas mehr. */
	.mz-shift__mark img {
		animation: mz-float-turn 18s ease-in-out infinite alternate;
		animation-delay: -7s;
	}
	@keyframes mz-float {
		from { transform: translate3d(0, -1.6%, 0) scale(1); }
		to   { transform: translate3d(0, 1.6%, 0) scale(1.025); }
	}
	@keyframes mz-float-turn {
		from { transform: translate3d(-1%, -1.5%, 0) rotate(-1.6deg); }
		to   { transform: translate3d(1%, 1.5%, 0) rotate(1.6deg); }
	}

	/* --- Hero --- */
	/* Bloom-Lichter über dem Film: Rosa und Flieder, die langsam über die
	   Ecken wandern — ergänzt die statischen Ecklichter im Scrim. Die Schicht
	   hängt an der fixierten Scrim-Ebene, läuft also mit ihr im Viewport. */
	.mz-hero .wp-block-cover__background::after {
		content: "";
		position: absolute;
		inset: -20%;
		pointer-events: none;
		background-image:
			radial-gradient(30% 30% at 24% 30%, rgba(243, 176, 242, 0.22) 0%, rgba(243, 176, 242, 0) 100%),
			radial-gradient(26% 26% at 76% 70%, rgba(124, 92, 255, 0.18) 0%, rgba(124, 92, 255, 0) 100%);
		animation: mz-hero-glow 24s ease-in-out infinite alternate;
	}
	@keyframes mz-hero-glow {
		from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.7; }
		to   { transform: translate3d(3%, 3%, 0) scale(1.08); opacity: 1; }
	}
	/* Scroll-Hinweis: eine feine weiße Linie am unteren Rand, in der ein
	   hellerer Abschnitt nach unten läuft. Ornament — kein Link, kein Text. */
	.mz-hero.wp-block-cover::after {
		content: "";
		position: absolute;
		inset-block-end: clamp(1rem, 3vh, 2rem);
		inset-inline-start: 50%;
		z-index: 2;
		inline-size: 2px;
		block-size: 4rem;
		margin-inline-start: -1px;
		pointer-events: none;
		background-image:
			linear-gradient(var(--white), var(--white)),
			linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22));
		background-size: 100% 38%, 100% 100%;
		background-repeat: no-repeat;
		opacity: 0.85;
		animation: mz-scroll-cue 2.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
	}
	@keyframes mz-scroll-cue {
		from { background-position: 0 -60%, 0 0; }
		to   { background-position: 0 160%, 0 0; }
	}

	/* --- Fotos: langsamer Zoom (Ken Burns). Die Rahmen beschneiden, der
	   Ausschnitt bleibt auf der Person (transform-origin = object-position). --- */
	.mz-kquote__photo img {
		transform-origin: 50% 38%;
		animation: mz-kenburns 26s ease-in-out infinite alternate;
	}
	.mz-shift__photo img {
		transform-origin: 50% 45%;
		animation: mz-kenburns 32s ease-in-out infinite alternate;
		animation-delay: -12s;
	}
	@keyframes mz-kenburns {
		from { transform: scale(1); }
		to   { transform: scale(1.07); }
	}

	/* --- Horizont-Band --- */
	/* Der Verlauf im Satz wandert: das Fenster gleitet über einen doppelt
	   breiten Verlauf, die helle Lichtkante zieht langsam durch das Rosa. */
	.mz-horizon__text {
		background-size: 220% 100%;
		animation: mz-text-sheen 11s ease-in-out infinite alternate;
	}
	@keyframes mz-text-sheen {
		from { background-position: 0% 50%; }
		to   { background-position: 100% 50%; }
	}
	/* Dunst über dem Meer: zwei weiche Lichtflecken (Weiß, Butter), die über
	   das Bild ziehen — zwischen Schleier (::before, z 1) und Satz (z 2). */
	.mz-horizon__band::after {
		content: "";
		position: absolute;
		inset: -30%;
		z-index: 1;
		pointer-events: none;
		background-image:
			radial-gradient(26% 30% at 36% 42%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 100%),
			radial-gradient(22% 26% at 68% 58%, rgba(253, 245, 185, 0.26) 0%, rgba(253, 245, 185, 0) 100%);
		animation: mz-haze 26s ease-in-out infinite alternate;
	}
	@keyframes mz-haze {
		from { transform: translate3d(-4%, -2%, 0); }
		to   { transform: translate3d(4%, 3%, 0); }
	}

	/* --- CTA: das Porträt im Kreis schwebt leicht. --- */
	.mz-cta__portrait {
		animation: mz-hover 7s ease-in-out infinite alternate;
	}
	@keyframes mz-hover {
		from { transform: translate3d(0, -5px, 0); }
		to   { transform: translate3d(0, 5px, 0); }
	}

	/* --- Fuß: feine Bloom-Linie an der Oberkante, die durchläuft. Rosa an
	   beiden Enden, damit die Schleife nahtlos schließt. --- */
	.mz-footer::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		block-size: 3px;
		pointer-events: none;
		background-image: linear-gradient(90deg, var(--bloom-rose) 0%, var(--bloom-butter) 50%, var(--bloom-rose) 100%);
		background-size: 200% 100%;
		animation: mz-line-flow 12s linear infinite;
	}
	@keyframes mz-line-flow {
		from { background-position: 0% 0; }
		to   { background-position: -200% 0; }
	}

	/* --- Schalter an alles hängen, was hier läuft. Steht hinter den
	   Kurzschriften, damit deren zurückgesetztes play-state nicht gewinnt. --- */
	.mz-ambient i,
	.mz-hero__mark img,
	.mz-vision__mark img,
	.mz-kquote__mark img,
	.mz-cta__mark img,
	.mz-stats__mark img,
	.mz-work__mark img,
	.mz-shift__mark img,
	.mz-hero .wp-block-cover__background::after,
	.mz-hero.wp-block-cover::after,
	.mz-kquote__photo img,
	.mz-shift__photo img,
	.mz-horizon__text,
	.mz-horizon__band::after,
	.mz-cta__portrait,
	.mz-footer::before {
		animation-play-state: var(--mz-play, running);
	}

	/* Schmale Screens: die dritte Blase entfällt — weniger Ebenen, gleiche
	   Wirkung; der Scroll-Hinweis auch, dort scrollt niemand per Hinweis. */
	@media (max-width: 781px) {
		.mz-ambient i:nth-child(3) { display: none; }
		.mz-hero.wp-block-cover::after { display: none; }
	}
}