/* ==========================================================================
   Miss Maya – Gestaltung
   Drei Tageszeiten über data-zeit auf <html>: tag · daemmerung · nacht.
   Farben kommen aus theme.json (--wp--preset--color--*).
   ========================================================================== */

:root {
	--mm-nacht: var(--wp--preset--color--nacht);
	--mm-aubergine: var(--wp--preset--color--aubergine);
	--mm-violett: var(--wp--preset--color--violett);
	--mm-violett-licht: var(--wp--preset--color--violett-licht);
	--mm-flieder: var(--wp--preset--color--flieder);
	--mm-creme: var(--wp--preset--color--creme);
	--mm-creme-88: var(--wp--preset--color--creme-88);
	--mm-tinte: var(--wp--preset--color--tinte);
	--mm-gold: var(--wp--preset--color--gold);
	--mm-gold-tief: var(--wp--preset--color--gold-tief);
	--mm-rahmen: var(--wp--preset--color--rahmen);
	--mm-display: var(--wp--preset--font-family--display);
	--mm-ease: cubic-bezier(.2, 0, 0, 1);
	--mm-rand: clamp(1rem, 4vw, 3rem);

	/* Standard = Nacht */
	--mm-grund: var(--mm-nacht);
	--mm-text: var(--mm-creme-88);
	--mm-titel: var(--mm-creme);
	--mm-akzent: var(--mm-flieder);
	--mm-etikett: var(--mm-gold);
	--mm-linie: color-mix(in srgb, var(--mm-rahmen) 70%, transparent);
	--mm-licht: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--mm-violett-licht) 38%, transparent), transparent 60%);
}

html[data-zeit="tag"] {
	--mm-grund: var(--mm-creme);
	--mm-text: var(--mm-tinte);
	--mm-titel: var(--mm-tinte);
	--mm-akzent: var(--mm-violett);
	--mm-etikett: var(--mm-gold-tief);
	--mm-linie: color-mix(in srgb, var(--mm-tinte) 18%, transparent);
	--mm-licht: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, #ffffff 55%, transparent), transparent 60%);
}

html[data-zeit="daemmerung"] {
	--mm-grund: var(--mm-aubergine);
	--mm-licht: radial-gradient(130% 100% at 80% 0%, color-mix(in srgb, var(--mm-violett-licht) 62%, transparent), transparent 62%);
}

/* Abschnitte, die immer dunkel sind, behalten auch tagsüber die Nachtfarben (Kontrast) */
.mm-haltung,
.mm-tueren,
.mm-akte,
.mm-arten,
.mm-vorhang,
.mm-diskretion,
.mm-abschluss,
.mm-schluss,
.mm-fuss {
	--mm-text: var(--mm-creme-88);
	--mm-titel: var(--mm-creme);
	--mm-akzent: var(--mm-flieder);
	--mm-etikett: var(--mm-gold);
	--mm-linie: color-mix(in srgb, var(--mm-rahmen) 70%, transparent);
	color: var(--mm-text);
}

/* Tag und violette Stunde reichen bis zu den Akten; deren Verlauf führt in die Nacht. Feste Farben, keine Scroll-Übergänge */
html[data-zeit="tag"] :is(.mm-haltung, .mm-tueren) {
	--mm-text: var(--mm-tinte);
	--mm-titel: var(--mm-tinte);
	--mm-akzent: var(--mm-violett);
	--mm-etikett: var(--mm-gold-tief);
	--mm-linie: color-mix(in srgb, var(--mm-tinte) 18%, transparent);
	background-color: var(--mm-creme);
}
html[data-zeit="daemmerung"] :is(.mm-haltung, .mm-tueren) { background-color: var(--mm-aubergine); }
:is(.mm-haltung, .mm-tueren) h2 { color: var(--mm-titel); }
html:is([data-zeit="tag"], [data-zeit="daemmerung"]) .mm-tueren { background-image: linear-gradient(to bottom, transparent calc(100% - clamp(4rem, 8vw, 7rem)), var(--mm-nacht)); }
/* Nachts nichts Grelles */
html[data-zeit="nacht"] .mm-ablauf { --mm-akzent: var(--mm-flieder); background: var(--mm-nacht); color: var(--mm-creme-88); border-top: 1px solid color-mix(in srgb, var(--mm-rahmen) 70%, transparent); }
html[data-zeit="nacht"] .mm-ablauf :is(h2, h3) { color: var(--mm-creme); }
html[data-zeit="nacht"] .mm-ablauf__nr { color: var(--mm-gold); }
html[data-zeit="nacht"] .mm-ablauf__schritte li { border-top-color: color-mix(in srgb, var(--mm-rahmen) 70%, transparent); }
html[data-zeit="nacht"] .mm-ablauf a { color: var(--mm-flieder); }
/* Nähte: weiche Übergänge nur im Innenabstand, nie hinter Text */
.mm-akte, .mm-diskretion { position: relative; }
.mm-akte::before, .mm-akte::after, .mm-diskretion::after { content: ""; position: absolute; inset-inline: 0; height: clamp(4rem, 8vw, 7rem); pointer-events: none; }
.mm-akte::before { top: 0; background: linear-gradient(var(--mm-nacht), transparent); }
.mm-akte::after, .mm-diskretion::after { bottom: 0; background: linear-gradient(transparent, var(--mm-nacht)); }
html:not([data-zeit="nacht"]) .mm-ablauf { background-image: linear-gradient(var(--mm-nacht), var(--mm-creme) clamp(4rem, 8vw, 7rem)); }
html:not([data-zeit="nacht"]) .mm-diskretion::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(4rem, 8vw, 7rem); background: linear-gradient(var(--mm-creme), transparent); pointer-events: none; }
.mm-vorhang picture { -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }

/* ---------- Grundlagen ---------- */

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

/* WordPress-Abstände zwischen den grossen Abschnitten aufheben: die Abschnitte tragen ihre Abstände selbst */
.wp-site-blocks > *,
.wp-site-blocks main > *,
.mm-schluss > *,
.mm-buehne > *,
.mm-akte > * { margin-block: 0 !important; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	hyphens: auto;
}

:where(a, button, summary):focus-visible {
	outline: 2px solid var(--mm-flieder);
	outline-offset: 2px;
}
/* Auf hellen Flächen ein violetter Fokusring (Flieder auf Creme wäre nur 1,7:1) */
html[data-zeit="tag"] :is(.mm-status, .mm-kopf, .mm-buehne, .mm-haltung, .mm-tueren, .mm-seite) :focus-visible,
.mm-ablauf :focus-visible { outline-color: var(--mm-violett); }
html[data-zeit="nacht"] .mm-ablauf :focus-visible { outline-color: var(--mm-flieder); }
html .mm-nav .is-menu-open :focus-visible { outline-color: var(--mm-flieder); }
html { scroll-padding-top: 6rem; }

img { max-width: 100%; height: auto; }

.mm-etikett {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.25rem;
	color: var(--mm-etikett);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	hyphens: none;
}
.mm-etikett::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: currentColor;
}

.mm-abschnitt-titel { margin-block: 0 clamp(1.5rem, 4vw, 3rem); }

.mm-pfeil a {
	color: var(--mm-akzent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: .1em;
}
.mm-pfeil a::after { content: " →"; }

.is-style-outline > .wp-block-button__link,
.mm-knopf--rahmen {
	background: transparent !important;
	color: var(--mm-titel) !important;
	border: 1px solid currentColor !important;
}

.mm-knopf {
	display: inline-block;
	padding: .9rem 1.6rem;
	background: var(--mm-violett-licht);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 240ms var(--mm-ease);
}
.mm-knopf:hover { background: var(--mm-violett); color: #fff; }
/* Threema ohne ID: sichtbar, aber kein Link */
.mm-knopf--folgt { border-style: dashed !important; opacity: .7; cursor: default; }
.mm-icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

html[data-zeit="tag"] .mm-kopf .wp-block-button__link,
html[data-zeit="tag"] .mm-buehne .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--mm-violett); }

/* ---------- 18+-Abfrage ---------- */

.mm-alter { display: none; }
html.mm-alter-offen { overflow: hidden; }
html.mm-alter-offen .mm-alter {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--mm-rand);
	overflow-y: auto;
	background: var(--mm-nacht);
	background-image:
		radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--mm-violett-licht) 45%, transparent), transparent 70%),
		radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--mm-violett) 35%, transparent), transparent 70%);
	color: var(--mm-creme-88);
	--mm-linie: color-mix(in srgb, var(--mm-rahmen) 70%, transparent);
}
.mm-alter__karte { width: min(100%, 34rem); text-align: center; }
.mm-alter__siegel { display: block; margin: 0 auto 1.25rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.mm-alter .mm-etikett { justify-content: center; color: var(--mm-gold); }
.mm-alter .mm-etikett::before { display: none; }
.mm-alter__titel { margin: 0 0 1rem; color: var(--mm-creme); font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1; }
.mm-alter__text { margin: 0 auto 2rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; hyphens: none; text-wrap: balance; }
.mm-alter__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.mm-alter__knoepfe .mm-knopf { border: 0; font-family: inherit; cursor: pointer; }
.mm-alter__knoepfe .mm-knopf--rahmen { color: var(--mm-creme) !important; }
.mm-alter__hinweis { margin: 1.75rem 0 0; font-size: .8125rem; opacity: .75; }
.mm-alter :focus-visible { outline-color: var(--mm-flieder); }

/* ---------- Statuszeile und Kopf ---------- */

.mm-status {
	margin: 0;
	padding: .5rem var(--mm-rand);
	gap: .5rem 1.5rem;
	background: var(--mm-grund);
	border-bottom: 1px solid var(--mm-linie);
	color: var(--mm-text);
	font-size: .75rem;
	letter-spacing: .04em;
	transition: background-color 1.2s var(--mm-ease), color 1.2s var(--mm-ease);
}
.mm-status p { margin: 0; }
.mm-status__links { display: flex; gap: 1.25rem; }
.mm-status a,
.mm-status .mm-bewegung { color: inherit; text-decoration: none; }
.mm-status a:hover,
.mm-status .mm-bewegung:hover { color: var(--mm-akzent); }
.mm-status .mm-bewegung { margin: 0; border: 0; font-size: inherit; letter-spacing: inherit; }

.mm-kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0;
	padding: 1rem var(--mm-rand);
	gap: 2rem;
	background: color-mix(in srgb, var(--mm-grund) 90%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--mm-linie);
	transition: background-color 1.2s var(--mm-ease);
}
/* Offenes Menü: backdrop-filter macht den Kopf sonst zum Bezugsrahmen des fixen Overlays (nur 62 px hoch) */
.mm-kopf:has(.is-menu-open) { z-index: 50; background: var(--mm-grund); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Tagsüber ein ruhiger, voller Cremekopf statt durchscheinendem Glas */
html[data-zeit="tag"] .mm-kopf { background: var(--mm-creme); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mm-wortmarke,
.mm-wortmarke a {
	margin: 0;
	color: var(--mm-titel) !important;
	font-family: var(--mm-display);
	font-size: 1.125rem;
	letter-spacing: .28em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
.mm-kopf__rechts { gap: 1.75rem; }
.mm-kopf,
.mm-kopf .mm-nav,
.mm-kopf .mm-nav .wp-block-navigation-item__content { color: var(--mm-text); }
.mm-kopf .mm-nav .wp-block-navigation-item__content { text-decoration: none; }
.mm-kopf .mm-nav .wp-block-navigation-item__content:hover { color: var(--mm-akzent); }
.mm-kopf__knopf .wp-block-button__link { padding: .65rem 1.1rem; font-size: .8125rem; }
/* Eine linke Kante für Statuszeile, Kopf, Inhalt und Fuss */
.mm-status, .mm-kopf { padding-inline: max(var(--mm-rand), calc((100vw - 78rem) / 2)); }
.mm-nav [aria-current="page"] { color: var(--mm-akzent); }
.mm-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mm-aubergine) !important;
	background-image: radial-gradient(120% 80% at 90% 0%, color-mix(in srgb, var(--mm-violett-licht) 55%, transparent), transparent 60%) !important;
	color: var(--mm-creme) !important;
}
.mm-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--mm-display);
	font-size: 2.25rem;
	color: var(--mm-creme);
}

.mm-kopf__diskret { display: none; }
.mm-status__stunde { display: none; margin: 0; }
@media (min-width: 48rem) { .mm-nav .mm-nav__anfragen { display: none; } }
@media (max-width: 47.99rem) {
	.mm-status__ort,
	.mm-status__erstes { display: none; }
	.mm-status { justify-content: space-between !important; }
	.mm-status__stunde { display: block; color: var(--mm-akzent); }
	.mm-kopf .mm-kopf__knopf { display: none !important; }
	.mm-kopf__diskret { display: inline-block; padding: .6rem .25rem; color: var(--mm-text); font-size: .8125rem; letter-spacing: .06em; text-decoration: none; }
}

/* ---------- Bühne (Hero) ---------- */

.mm-buehne {
	position: relative;
	display: grid;
	min-height: min(56rem, calc(100svh - 7rem));
	background: var(--mm-grund);
	background-image: var(--mm-licht);
	color: var(--mm-text);
	overflow: hidden;
	transition: background-color 1.2s var(--mm-ease), color 1.2s var(--mm-ease);
}
.mm-buehne__text {
	position: relative;
	z-index: 2;
	align-self: end;
	padding: 0 var(--mm-rand) clamp(2.5rem, 6vw, 5rem);
}
.mm-buehne__name {
	margin: 0;
	color: var(--mm-titel);
	font-size: clamp(4rem, 12vw, 9.5rem);
	line-height: .88;
	letter-spacing: -.02em;
	hyphens: none;
	transition: color 1.2s var(--mm-ease);
}
.mm-buehne__claim {
	margin: 1.25rem 0 2rem;
	color: var(--mm-akzent);
	font-family: var(--mm-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-style: italic;
	line-height: 1.15;
	hyphens: none;
}
.mm-buehne__knoepfe { gap: .75rem; }
.mm-diskretionszeile {
	max-width: 34rem;
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--mm-linie);
	font-size: .8125rem;
	letter-spacing: .02em;
}
.mm-diskretionszeile a { color: inherit; text-decoration: none; opacity: .85; }
.mm-diskretionszeile a:hover { opacity: 1; color: var(--mm-akzent); }

.mm-zeitwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	margin-top: 1.5rem;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mm-zeitwahl button {
	padding: .35rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	color: var(--mm-text);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	opacity: .7;
	cursor: pointer;
}
.mm-zeitwahl button:hover { opacity: 1; }
.mm-zeitwahl button[aria-pressed="true"] {
	border-bottom-color: var(--mm-akzent);
	color: var(--mm-akzent);
	opacity: 1;
}
.mm-zeitwahl__stunde {
	flex-basis: 100%;
	margin: .25rem 0 0;
	color: var(--mm-titel);
	font-family: var(--mm-display);
	font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}

/* Sonnenlinie: der heutige Tag von 0 bis 24 Uhr, hell zwischen Auf- und Untergang, Punkt = jetzt */
.mm-sonnenlinie {
	position: relative;
	flex-basis: 100%;
	max-width: 18rem;
	height: 1px;
	margin-top: .6rem;
	margin-bottom: 1.25rem;
	background: linear-gradient(90deg,
		var(--mm-linie) var(--mm-auf, 30%),
		color-mix(in srgb, var(--mm-gold) 70%, transparent) var(--mm-auf, 30%),
		color-mix(in srgb, var(--mm-gold) 70%, transparent) calc(var(--mm-unter, 75%) - 2%),
		var(--mm-violett-licht) calc(var(--mm-unter, 75%) - 2%),
		var(--mm-violett-licht) calc(var(--mm-unter, 75%) + 3%),
		var(--mm-linie) calc(var(--mm-unter, 75%) + 3%));
}
/* Ein Erklärsatz statt zwei Kleinst-Labels: die Linie ist der Tag, der Punkt ist jetzt */
.mm-sonnenlinie::after { content: attr(data-erklaerung); position: absolute; top: .6rem; left: 0; font-size: .75rem; letter-spacing: .02em; text-transform: none; opacity: .85; white-space: nowrap; }
.mm-zeitwahl__stunde[hidden],
.mm-sonnenlinie[hidden] { display: block; visibility: hidden; }
.mm-sonnenlinie i {
	position: absolute;
	top: -3px;
	left: var(--mm-jetzt, 50%);
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--mm-akzent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-akzent) 25%, transparent);
}

.mm-buehne__bild {
	position: relative;
	min-height: 52svh;
	order: -1;
	/* Bild läuft unten weich in den Grund aus. Maske statt Farbverlauf, damit keine Naht zum Lichtverlauf entsteht */
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 98%);
}
.mm-zeitbild,
.mm-licht {
	position: absolute;
	inset: 0;
}
.mm-zeitbild img,
.mm-licht img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
/* Nur das aktive Bild wird angezeigt und damit geladen (Bilder sind lazy); beim Wechsel bleibt das alte stehen */
.mm-zeitbild { display: none; }
html[data-zeit="tag"] .mm-zeitbild--tag,
html[data-zeit="daemmerung"] .mm-zeitbild--daemmerung,
html[data-zeit="nacht"] .mm-zeitbild--nacht { display: block; z-index: 1; }
html[data-zeit-vorher="tag"] .mm-zeitbild--tag,
html[data-zeit-vorher="daemmerung"] .mm-zeitbild--daemmerung,
html[data-zeit-vorher="nacht"] .mm-zeitbild--nacht { display: block; z-index: 0; }

/* Die Stunde schlägt: das neue Licht fällt wie ein Horizont von oben ins Bild, der Text folgt 500 ms später */
html.mm-wechsel .mm-zeitbild { clip-path: inset(0); transition: clip-path 1.2s var(--mm-ease); }
@starting-style {
	html.mm-wechsel .mm-zeitbild { clip-path: inset(0 0 100% 0); }
}
html.mm-wechsel :is(.mm-buehne, .mm-buehne__name, .mm-status, .mm-kopf) { transition-delay: 500ms; }

/* Lichtwechsel der Nacht: dasselbe Foto in drei Gradings, langsam überblendet */
.mm-licht--2 { animation: mm-licht-2 24s var(--mm-ease) infinite; }
.mm-licht--3 { animation: mm-licht-3 24s var(--mm-ease) infinite; }
@keyframes mm-licht-2 { 0%, 18% { opacity: 0 } 38%, 56% { opacity: 1 } 74%, 100% { opacity: 0 } }
@keyframes mm-licht-3 { 0%, 48% { opacity: 0 } 64%, 80% { opacity: 1 } 96%, 100% { opacity: 0 } }

/* Dunst: KI-Atmosphäre über dem Nachtbild, aufgehellt statt deckend. Ein senkrechtes Band spart
   die ganze Figur aus (x ≈ 32–69 %), damit der Dunst nie wie ein Filter auf Kopf und Haar liegt */
.mm-dunst {
	z-index: 1;
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 15%, transparent 27%, transparent 74%, #000 86%);
	mask-image: linear-gradient(90deg, #000 0%, #000 15%, transparent 27%, transparent 74%, #000 86%);
}
/* Hinweis oben rechts: dort ist die Bildmaske deckend */
.mm-buehne__bild .mm-ki-hinweis { top: 1rem; right: 1rem; bottom: auto; z-index: 3; }
/* Licht-Loops liegen deckungsgleich auf ihrem Foto: gleicher Ausschnitt wie das Bild */
.mm-zeitbild video { object-position: 50% 30%; }
/* Tag-Hero (quadratisches Foto): Figur rechts der Mitte im Bild halten */
.mm-zeitbild--tag img,
.mm-zeitbild--tag video { object-position: 57% 20%; }

@media (min-width: 64rem) {
	.mm-buehne { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	.mm-buehne__text { align-self: center; padding-block: 6rem; padding-left: max(var(--mm-rand), calc((100vw - 78rem) / 2)); }
	.mm-buehne__bild {
		order: 0;
		min-height: 100%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%), linear-gradient(to top, transparent 0%, #000 22%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent 0%, #000 32%), linear-gradient(to top, transparent 0%, #000 22%);
		mask-composite: intersect;
	}
}
@media (max-width: 63.99rem) {
	/* Handy: Name, Satz und Anfragen sind im ersten Bildschirm */
	.mm-buehne { min-height: 0; }
	.mm-buehne__text { margin-top: -7rem; padding-bottom: 3rem; }
	.mm-buehne__name { font-size: clamp(3.5rem, 17vw, 6rem); }
	.mm-buehne__claim { margin: .75rem 0 1.25rem; }
}

/* ---------- Haltung ---------- */

.mm-haltung { padding-block: clamp(5rem, 12vw, 10rem); text-align: center; }
.mm-haltung__zitat {
	margin: 0 auto;
	color: var(--mm-titel);
	font-family: var(--mm-display);
	font-size: clamp(2rem, 4.6vw, 3.75rem);
	line-height: 1.12;
	hyphens: none;
}
.mm-haltung__zitat em { color: var(--mm-akzent); }
.mm-haltung__text { max-width: 34rem; margin: 2rem auto 0; }

/* ---------- Drei Türen ---------- */

.mm-tueren { padding-block: 0 clamp(5rem, 10vw, 8rem); }
.mm-tueren__raster {
	display: grid;
	gap: clamp(2.5rem, 4vw, 2rem);
}
@media (min-width: 48rem) { .mm-tueren__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mm-tuer {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: var(--mm-text);
	text-decoration: none;
}
.mm-tuer__bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: 1rem;
	overflow: hidden;
	background: var(--mm-aubergine);
}
.mm-tuer__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--mm-ease), filter 900ms var(--mm-ease);
	filter: saturate(.9);
}
.mm-tuer__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--mm-violett-licht) 55%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity 900ms var(--mm-ease);
}
.mm-tuer:hover .mm-tuer__bild img { transform: scale(1.03); filter: saturate(1); }

/* Licht-Loop über dem Standbild: erst sichtbar, wenn er wirklich spielt */
.mm-loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 900ms var(--mm-ease), transform 900ms var(--mm-ease);
}
.mm-loop.spielt { opacity: 1; }
.mm-loop.mm-dunst.spielt { opacity: .35; }
.mm-tuer:hover .mm-loop { transform: scale(1.03); }
.mm-ki-hinweis {
	position: absolute;
	right: .5rem;
	bottom: .4rem;
	z-index: 1;
	padding: .1rem .4rem;
	background: rgb(16 11 21 / .7);
	color: var(--mm-creme);
	font-size: .6875rem;
	letter-spacing: .06em;
	opacity: 0;
	transition: opacity 400ms var(--mm-ease);
}
.mm-loop.spielt ~ .mm-ki-hinweis { opacity: 1; }
html.mm-ruhig .mm-loop,
html.mm-ruhig .mm-akt__bild video.mm-loop { display: none; }
@media (prefers-reduced-motion: reduce) { .mm-loop, .mm-akt__bild video.mm-loop { display: none; } }
.mm-tuer:hover .mm-tuer__bild::after { opacity: 1; }
.mm-tuer__nr {
	color: var(--mm-etikett);
	font-family: var(--mm-display);
	font-size: 1.125rem;
	font-style: italic;
}
.mm-tuer__titel {
	color: var(--mm-titel);
	font-family: var(--mm-display);
	font-size: clamp(2rem, 3vw, 2.5rem);
	line-height: 1.05;
}
.mm-tuer:hover .mm-tuer__titel { color: var(--mm-akzent); }
.mm-tuer__text { flex-grow: 1; }
.mm-tuer__preis {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid var(--mm-linie);
	color: var(--mm-etikett);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.mm-tuer__weiter { color: var(--mm-akzent); }
@media (max-width: 47.99rem) {
	.mm-tuer:not(:first-child) { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem; align-items: start; }
	.mm-tuer:not(:first-child) .mm-tuer__bild { grid-row: 1 / span 4; margin: 0; }
	.mm-tuer:not(:first-child) .mm-tuer__titel { font-size: 1.75rem; }
	.mm-tuer:not(:first-child) :is(.mm-loop, .mm-tuer__ki) { display: none; }
}
.mm-tuer__ki {
	color: var(--mm-text);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
	opacity: .7;
}

/* ---------- Die violette Stunde: drei Akte ---------- */

.mm-akte {
	padding: clamp(5rem, 10vw, 8rem) var(--mm-rand);
	/* Der Tag zieht quer durch den Abschnitt: warm links, violett in der Mitte, Nacht rechts */
	background:
		radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--mm-violett-licht) 40%, transparent), transparent 70%),
		linear-gradient(90deg, color-mix(in srgb, var(--mm-gold-tief) 28%, var(--mm-aubergine)) 0%, var(--mm-aubergine) 30%, color-mix(in srgb, var(--mm-violett) 70%, var(--mm-aubergine)) 50%, var(--mm-nacht) 100%);
}
.mm-akte__kopf { max-width: 78rem; margin-inline: auto; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.mm-akte__kopf h2 { margin: 0 0 1rem; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .95; }
.mm-akte__kopf p:not(.mm-etikett) { max-width: 34rem; margin: 0; }
.mm-akte__reihe {
	display: grid;
	gap: clamp(3rem, 5vw, 2.5rem);
	max-width: 78rem;
	margin: 0 auto;
}
.mm-akt { margin: 0; }
.mm-akt__bild {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--mm-aubergine);
}
.mm-akt__bild picture,
.mm-akt__bild img,
.mm-akt__bild video {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-akt figcaption {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: baseline;
	padding-top: 1rem;
	border-top: 1px solid var(--mm-linie);
	margin-top: 1.25rem;
}
.mm-akt__nr { color: var(--mm-gold); font-family: var(--mm-display); font-size: 1.125rem; font-style: italic; }
.mm-akt__satz { color: var(--mm-titel); font-family: var(--mm-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; }
.mm-akt__ki { grid-column: 2; margin-top: .35rem; font-size: .75rem; letter-spacing: .04em; opacity: .7; }
.mm-akte__fuss { max-width: 78rem; margin-inline: auto; padding-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 47.99rem) {
	/* Handy: der Tag läuft von oben nach unten durch die gestapelten Akte */
	/* Handy: durch den Tag wischen statt drei Bildschirme scrollen */
	.mm-akte__reihe {
		grid-auto-flow: column;
		grid-auto-columns: 80%;
		gap: 1rem;
		margin-inline: calc(var(--mm-rand) * -1);
		padding-inline: var(--mm-rand);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.mm-akte__reihe::-webkit-scrollbar { display: none; }
	.mm-akt { scroll-snap-align: center; }
	.mm-akte__wisch {
		margin: 0 0 1rem;
		color: var(--mm-gold);
		font-size: .75rem;
		letter-spacing: .12em;
		text-transform: uppercase;
	}
}
@media (min-width: 48rem) { .mm-akte__wisch { display: none; } }
@media (min-width: 48rem) {
	.mm-akte__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
	/* Der mittlere Akt sitzt tiefer: die Stunde liegt zwischen Tag und Nacht */
	.mm-akt--stunde { margin-top: clamp(3rem, 8vw, 7rem); }
}
@supports (animation-timeline: view()) {
	html:not(.mm-ruhig) .mm-akt__bild > * {
		animation: mm-schweben linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes mm-schweben { from { transform: translateY(-4%) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }
}

/* ---------- Vorhang (Schwelle vor dem Ablauf) ---------- */

.mm-vorhang {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(20rem, 60vh, 40rem);
	overflow: hidden;
	background: var(--mm-nacht);
	text-align: center;
}
.mm-vorhang picture,
.mm-vorhang img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Lichtnaht in der Mitte: atmet langsam, wie Licht hinter dem Stoff */
.mm-vorhang::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 50%;
	width: 18rem;
	margin-left: -9rem;
	background: radial-gradient(50% 60% at 50% 55%, color-mix(in srgb, var(--mm-flieder) 45%, transparent), transparent 70%);
	mix-blend-mode: screen;
	animation: mm-naht 7s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes mm-naht { from { opacity: .35; transform: scaleX(.7); } to { opacity: .9; transform: scaleX(1.1); } }
/* Wo der Browser es kann, öffnet sich der Vorhang mit dem Scrollen statt endlos zu atmen */
.mm-vorhang { view-timeline: --vorhang; }
@supports (animation-timeline: view()) {
	html:not(.mm-ruhig) .mm-vorhang::before {
		animation: mm-auf linear both;
		animation-timeline: --vorhang;
		animation-range: entry 30% cover 55%;
	}
	@keyframes mm-auf { from { opacity: .25; transform: scaleX(.35); } to { opacity: .9; transform: scaleX(1.6); } }
}
.mm-vorhang__satz {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	margin: 0;
	padding: 0 var(--mm-rand);
	color: var(--mm-creme);
	font-family: var(--mm-display);
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	font-style: italic;
	line-height: 1.1;
	hyphens: none;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}
.mm-vorhang .mm-ki-hinweis { right: var(--mm-rand); bottom: 1rem; opacity: 1; }
.mm-vorhang__satz span { display: block; }
.mm-vorhang__auf {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 600ms var(--mm-ease);
	-webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
	mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
}
.mm-vorhang__auf.spielt { opacity: 1; }
.mm-vorhang:has(.mm-vorhang__auf.spielt)::before { opacity: 0; }
html.mm-ruhig .mm-vorhang__auf { display: none; }
@media (prefers-reduced-motion: reduce) { .mm-vorhang__auf { display: none; } }
/* 404: die Tür ist zu */
.mm-vorhang--zu { min-height: calc(100svh - 7rem); place-items: center start; }
.mm-vorhang__zu { position: relative; z-index: 1; display: grid; gap: .75rem; max-width: 32rem; padding: 2rem var(--mm-rand); text-align: left; background: radial-gradient(closest-side, rgb(16 11 21 / .75), transparent); }
.mm-vorhang__zu h1 { margin: 0; color: var(--mm-creme); font-size: clamp(2.5rem, 6vw, 4.5rem); }
.mm-vorhang__zu p { margin: 0; color: var(--mm-creme-88); }
/* Der Satz teilt sich am Licht: kein Text über der hellen Naht (Kontrast ≥ 3:1) */
@media (min-width: 48rem) {
	.mm-vorhang__satz {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(8rem, 16vw, 14rem);
		max-width: 72rem;
	}
	/* Wenn sich der Vorhang öffnet, braucht die helle Öffnung (≈ 30 % Breite) mehr Platz zwischen den Satzhälften */
	.mm-vorhang:has(.mm-vorhang__auf) .mm-vorhang__satz { column-gap: clamp(14rem, 34vw, 32rem); max-width: 96rem; }
	.mm-vorhang__satz span:first-child { text-align: right; }
	.mm-vorhang__satz span:last-child { text-align: left; align-self: end; }
}
@media (max-width: 47.99rem) {
	.mm-vorhang { place-items: end center; padding-bottom: 3rem; }
	.mm-vorhang__satz { padding-block: 1.5rem; background: radial-gradient(closest-side, rgb(16 11 21 / .65), transparent); }
}

/* ---------- Spielarten ---------- */

.mm-arten { padding-block: clamp(5rem, 10vw, 8rem); }
.mm-arten__kopf { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.mm-arten__kopf .mm-abschnitt-titel { margin: 0; }
.mm-arten__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--mm-linie);
}
@media (min-width: 48rem) { .mm-arten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.mm-arten__liste a {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.4rem .25rem;
	border-top: 1px solid var(--mm-linie);
	color: var(--mm-creme);
	text-decoration: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--mm-violett-licht) 30%, transparent), transparent 70%) no-repeat;
	background-size: 0% 100%;
	transition: background-size 700ms var(--mm-ease), color 240ms var(--mm-ease), padding 700ms var(--mm-ease);
}
.mm-arten__liste a:hover { background-size: 100% 100%; color: var(--mm-flieder); padding-left: 1rem; }
.mm-arten__nr { color: var(--mm-gold); font-size: .8125rem; letter-spacing: .1em; }
.mm-arten__name { font-family: var(--mm-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.05; }

/* ---------- So läuft es ab (Tag-Welt) ---------- */

.mm-ablauf {
	padding-block: clamp(5rem, 10vw, 8rem);
	background: var(--mm-creme);
	color: var(--mm-tinte);
	--mm-akzent: var(--mm-violett);
}
.mm-ablauf h2,
.mm-ablauf h3 { color: var(--mm-tinte); }
.mm-ablauf__schritte {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48rem) { .mm-ablauf__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mm-ablauf__schritte li { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--mm-tinte) 22%, transparent); }
.mm-ablauf__nr { color: var(--mm-violett); font-family: var(--mm-display); font-size: 3rem; line-height: 1; }
.mm-ablauf__schritte h3 { margin: .75rem 0 .5rem; font-size: 1.5rem; }
.mm-ablauf__schritte p { margin: 0; }
.mm-ablauf__neu { margin-top: 3rem; font-family: var(--mm-display); font-size: 1.5rem; }
.mm-ablauf a { color: var(--mm-violett); }
.mm-ablauf h3 a { color: inherit; text-decoration-color: var(--mm-akzent); text-underline-offset: .2em; }

/* ---------- Diskretion (Dämmerung) ---------- */

.mm-diskretion {
	padding-block: clamp(5rem, 10vw, 8rem);
	background: var(--mm-aubergine);
	background-image: radial-gradient(110% 90% at 0% 100%, color-mix(in srgb, var(--mm-violett-licht) 45%, transparent), transparent 60%);
}
.mm-diskretion h2 { margin-top: 0; }
.mm-diskretion__tipp { margin: 0 0 2rem; font-size: .875rem; opacity: .85; }
.mm-diskretion__liste {
	margin: 2rem 0;
	padding: 0;
	list-style: none;
	counter-reset: satz;
}
.mm-diskretion__liste li {
	counter-increment: satz;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	padding: 1.1rem 0;
	border-top: 1px solid var(--mm-linie);
	color: var(--mm-creme);
	font-size: 1.125rem;
}
.mm-diskretion__liste li::before {
	content: counter(satz);
	color: var(--mm-gold);
	font-family: var(--mm-display);
	font-size: 1.5rem;
	line-height: 1.2;
}

/* ---------- Abschluss ---------- */

.mm-abschluss { padding-block: clamp(5rem, 10vw, 8rem); }
.mm-abschluss__raster { display: grid; gap: 4rem; }
@media (min-width: 64rem) { .mm-abschluss__raster { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.mm-protokoll ol { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.mm-protokoll li { padding: 1rem 0; border-top: 1px solid var(--mm-linie); }
.mm-protokoll strong {
	display: block;
	color: var(--mm-creme);
	font-family: var(--mm-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.15;
}
.mm-fragen details { border-top: 1px solid var(--mm-linie); }
.mm-fragen details:last-of-type { border-bottom: 1px solid var(--mm-linie); margin-bottom: 1.5rem; }
.mm-fragen summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	color: var(--mm-creme);
	cursor: pointer;
	list-style: none;
}
.mm-fragen summary::-webkit-details-marker { display: none; }
.mm-fragen summary::after { content: "+"; color: var(--mm-flieder); font-size: 1.25rem; line-height: 1; }
.mm-fragen details[open] summary::after { content: "–"; }
.mm-fragen details p { margin: 0 0 1.25rem; }

.mm-schluss { position: relative; z-index: 1; padding: 0 var(--mm-rand) clamp(5rem, 10vw, 8rem); }
.mm-schluss .mm-kontakt { max-width: 78rem; margin: clamp(-8rem, -10vw, -4rem) auto 0; background-color: var(--mm-nacht); }
@media (max-width: 47.99rem) { .mm-schluss .mm-kontakt { margin-top: 0; } }
.mm-kontakt {
	margin-top: clamp(4rem, 8vw, 6rem);
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--mm-rand);
	border: 1px solid var(--mm-linie);
	background-image: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--mm-violett-licht) 28%, transparent), transparent 70%);
	text-align: center;
}
.mm-kontakt h2 { margin: 0 0 .75rem; font-size: clamp(2.75rem, 7vw, 5.5rem); }
/* Handy: Anfragen über die ganze Breite, WhatsApp und E-Mail darunter nebeneinander */
@media (max-width: 47.99rem) {
	.mm-kontakt__wege { display: grid; grid-template-columns: 1fr 1fr; }
	.mm-kontakt__wege .mm-knopf { text-align: center; }
	.mm-kontakt__wege .mm-knopf:first-child { grid-column: 1 / -1; }
}
.mm-kontakt__vorlage { justify-content: center; margin: 1.5rem 0 0; }
.mm-kontakt__vorlage::before { display: none; }
.mm-kontakt__wege { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* Das Siegel: Wachs (KI-Bild) mit lokal geprägtem Monogramm */
.mm-siegel {
	position: relative;
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	margin: 0 auto 1.5rem;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.mm-siegel picture { position: absolute; inset: 0; }
.mm-siegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mm-siegel__mm {
	position: relative;
	margin-top: -.15rem;
	font-family: var(--mm-display);
	font-size: 1.6rem;
	font-style: normal;
	letter-spacing: .04em;
	color: color-mix(in srgb, var(--mm-violett) 55%, #000);
	/* Prägung: Licht von oben links, Schatten unten rechts */
	text-shadow: -1px -1px 0 rgba(0, 0, 0, .55), 1px 1px 0 color-mix(in srgb, var(--mm-flieder) 45%, transparent);
}
html.mm-js:not(.mm-ruhig) .mm-kontakt.ist-sichtbar .mm-siegel { animation: mm-siegeln 600ms var(--mm-ease) 300ms both; }
/* Beim Zeigen auf einen Kontaktweg drückt sich das Siegel ein (innen, damit der Auftritt nicht neu startet) */
.mm-siegel > * { transition: transform 300ms var(--mm-ease); }
.mm-kontakt:has(.mm-knopf:hover, .mm-knopf:focus-visible) .mm-siegel > * { transform: scale(.94); }
@keyframes mm-siegeln {
	from { opacity: 0; transform: scale(1.15); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
	to { opacity: 1; transform: scale(1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
}

/* ---------- Fusszeile und mobile Leiste ---------- */

.mm-fuss {
	display: grid;
	gap: 2.5rem;
	padding: clamp(3rem, 6vw, 5rem) var(--mm-rand) 2rem;
	background: var(--mm-nacht);
	border-top: 1px solid color-mix(in srgb, var(--mm-rahmen) 70%, transparent);
	color: var(--mm-creme-88);
	font-size: .875rem;
	--mm-linie: color-mix(in srgb, var(--mm-rahmen) 70%, transparent);
}
.mm-fuss { padding-inline: max(var(--mm-rand), calc((100vw - 78rem) / 2)); }
.mm-fuss .mm-wortmarke a { color: var(--mm-creme) !important; }
.mm-fuss__social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem !important; }
.mm-fuss__social a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.mm-fuss__social .mm-icon { width: 1.125rem; height: 1.125rem; }
@media (min-width: 64rem) { .mm-fuss { grid-template-columns: 1fr 1.4fr; } }
.mm-fuss p { margin: 0 0 .5rem; }
.mm-fuss__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-content: start; }
.mm-fuss a { color: var(--mm-creme-88); }
.mm-fuss a:hover { color: var(--mm-flieder); }
.mm-fuss__unten {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--mm-linie);
	font-size: .75rem;
	letter-spacing: .04em;
}
.mm-bewegung {
	margin-right: 1rem;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	color: var(--mm-creme-88);
	font: inherit;
	cursor: pointer;
}

.mm-leiste { display: none; }
@media (max-width: 47.99rem) {
	.mm-leiste {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 30;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in srgb, var(--mm-nacht) 94%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--mm-linie);
		transform: translateY(110%);
		transition: transform 400ms var(--mm-ease);
	}
	.mm-leiste a {
		flex: 1 1 0;
		padding: 1rem .35rem;
		color: var(--mm-creme);
		/* vier Knöpfe ab Threema: einzeilig, auch auf 320 px */
		font-size: clamp(.6875rem, 3.5vw, .8125rem);
		font-weight: 600;
		letter-spacing: .04em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		hyphens: manual;
	}
	.mm-leiste a:first-child { flex-grow: 1.4; background: var(--mm-violett-licht); color: #fff; }
	html.mm-nach-buehne:not(.mm-runter) .mm-leiste { transform: none; }
	body { padding-bottom: 3.5rem; }
}

/* ---------- Unterseiten ---------- */

/* Unterseiten folgen der Tageszeit wie Kopf und Bühne */
body:has(.mm-seite) { background: var(--mm-grund); background-image: var(--mm-licht); background-attachment: fixed; }
.mm-seite { padding-block: clamp(3rem, 8vw, 6rem); color: var(--mm-text); }
.mm-seite :where(h1, h2, h3, h4) { color: var(--mm-titel); }
.mm-seite a { color: var(--mm-akzent); }
/* Knöpfe behalten ihre eigene Schriftfarbe (sonst Flieder auf Violett, 3:1) */
.mm-seite .mm-knopf { color: #fff; }
.mm-seite .mm-knopf--rahmen { color: var(--mm-titel) !important; }
.mm-seite__titel { font-size: clamp(2.75rem, 7vw, 5rem); }
/* Texte der Unterseiten (inc/seiten.php) */
.mm-text { --mm-abstand: clamp(2.5rem, 6vw, 4rem); }
.mm-text > .mm-etikett { margin-top: 0; }
/* Adressen nie trennen: „info@miss-maya.ch“ sähe nach einer anderen Domain aus */
.mm-text p a:is([href^="mailto:"], [href^="https://"]) { hyphens: none; white-space: nowrap; }
.mm-text > .mm-seite__titel { margin: 0 0 1.25rem; }
.mm-text__lead {
	margin: 0 0 var(--mm-abstand);
	color: var(--mm-titel);
	font-family: var(--mm-display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	font-style: italic;
	line-height: 1.15;
	hyphens: none;
	text-wrap: balance;
}
.mm-text__bild { margin: 0 0 var(--mm-abstand); }
.mm-text__bild img { display: block; width: 100%; max-height: 80svh; object-fit: cover; object-position: 50% 25%; }
.mm-text__abschnitt + .mm-text__abschnitt { margin-top: var(--mm-abstand); }
.mm-text__abschnitt h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.mm-text__abschnitt p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.65; }
.mm-text__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mm-linie); }
.mm-text__liste li { padding: .8rem 0 .8rem 1.5rem; border-bottom: 1px solid var(--mm-linie); position: relative; }
.mm-text__liste li::before { content: "—"; position: absolute; left: 0; color: var(--mm-etikett); }
.mm-text__stufen { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: stufe; background: var(--mm-linie); border: 1px solid var(--mm-linie); }
.mm-text__stufen li { counter-increment: stufe; display: grid; gap: .4rem; padding: 1.25rem 1.25rem 1.4rem; background: var(--mm-grund); }
.mm-text__stufen strong { color: var(--mm-titel); font-family: var(--mm-display); font-size: 1.6rem; font-weight: 400; }
.mm-text__stufen strong::before { content: counter(stufe, upper-roman) " · "; color: var(--mm-etikett); font-size: 1rem; font-style: italic; }
.mm-text__arten { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mm-linie); }
.mm-text__arten a { display: grid; gap: .25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--mm-linie); color: var(--mm-text); text-decoration: none; }
.mm-text__arten strong { color: var(--mm-titel); font-family: var(--mm-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; }
.mm-text__arten a:hover strong { color: var(--mm-akzent); }
.mm-text__fragen details { border-top: 1px solid var(--mm-linie); }
.mm-text__fragen details:last-child { border-bottom: 1px solid var(--mm-linie); }
.mm-text__fragen summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; color: var(--mm-titel); cursor: pointer; list-style: none; }
.mm-text__fragen summary::-webkit-details-marker { display: none; }
.mm-text__fragen summary::after { content: "+"; color: var(--mm-akzent); }
.mm-text__fragen details[open] summary::after { content: "–"; }
.mm-text__kanaele { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mm-linie); }
.mm-text__kanaele li > * { display: grid; grid-template-columns: 1.5rem 7rem 1fr; align-items: center; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--mm-linie); color: var(--mm-text); text-decoration: none; }
.mm-text__kanaele li > * > :first-child:not(svg) { grid-column: 2; }
.mm-text__kanaele .mm-icon { width: 1.25rem; height: 1.25rem; color: var(--mm-akzent); }
.mm-text__kanaele strong { color: var(--mm-titel); font-weight: 600; }
.mm-text__kanaele a:hover strong { color: var(--mm-akzent); }
.mm-text__kanal-folgt { opacity: .75; }
@media (max-width: 47.99rem) { .mm-text__kanaele li > * { grid-template-columns: 1.5rem 1fr; } .mm-text__kanaele li > * > span:last-child { grid-column: 2; } }
.mm-text__zitat { margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--mm-akzent); }
.mm-text__zitat p { margin: 0 0 .5rem; color: var(--mm-titel); font-family: var(--mm-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-style: italic; line-height: 1.2; }
.mm-text__zitat cite { font-size: .875rem; font-style: normal; opacity: .8; }
.mm-text > .mm-pfeil { margin-top: var(--mm-abstand); }
/* „Passt dazu“: Querverweise am Seitenende */
.mm-text__verwandt { margin-top: var(--mm-abstand); }
.mm-text__verwandt ul { margin: .75rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.mm-text__verwandt a { color: var(--mm-akzent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
.mm-text__verwandt a::after { content: " →"; }
.mm-text__aufruf { margin-top: var(--mm-abstand); padding: clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--mm-linie); background-image: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--mm-violett-licht) 22%, transparent), transparent 70%); text-align: center; }
.mm-text__aufruf p { margin: 0; color: var(--mm-titel); font-family: var(--mm-display); font-size: 1.375rem; line-height: 1.3; }
.mm-text__aufruf .mm-kontakt__wege { margin-top: 1.5rem; }
@media (min-width: 48rem) {
	/* Anfragen allein oben, die drei direkten Wege darunter in einer Reihe */
	.mm-text__aufruf .mm-kontakt__wege { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; }
	.mm-text__aufruf .mm-kontakt__wege .mm-knopf:first-child { grid-column: 1 / -1; justify-self: center; }
}
html[data-zeit="tag"] .mm-text .mm-knopf:not(.mm-knopf--rahmen) { background: var(--mm-violett); }
body:has(.mm-seite) .wp-site-blocks { display: flex; flex-direction: column; min-height: 100svh; }
body:has(.mm-seite) .wp-site-blocks > main { flex: 1 0 auto; }

/* ---------- Einblenden (nur mit JavaScript und erlaubter Bewegung) ---------- */

html.mm-js:not(.mm-ruhig) .mm-enthuellen {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 700ms var(--mm-ease), transform 700ms var(--mm-ease);
}
html.mm-js:not(.mm-ruhig) .mm-enthuellen.ist-sichtbar { opacity: 1; transform: none; }
/* Horizont: Bilder öffnen sich von oben wie beim Tageszeitwechsel; Text bleibt bei der leisen Einblendung */
html.mm-js:not(.mm-ruhig) :is(.mm-tuer, .mm-akt).mm-enthuellen :is(.mm-tuer__bild, .mm-akt__bild) { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--mm-ease) 150ms; }
html.mm-js:not(.mm-ruhig) :is(.mm-tuer, .mm-akt).ist-sichtbar :is(.mm-tuer__bild, .mm-akt__bild) { clip-path: inset(0); }
:is(.mm-tuer, .mm-akt):nth-child(2), :is(.mm-arten__liste, .mm-diskretion__liste, .mm-ablauf__schritte) > li:nth-child(2) { transition-delay: 80ms; }
:is(.mm-tuer, .mm-akt):nth-child(3), :is(.mm-arten__liste, .mm-diskretion__liste, .mm-ablauf__schritte) > li:nth-child(3) { transition-delay: 160ms; }
:is(.mm-arten__liste, .mm-diskretion__liste, .mm-ablauf__schritte) > li:nth-child(n+4) { transition-delay: 240ms; }

/* ---------- Ruhe: Systemeinstellung oder Schalter „Bewegung aus“ ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.mm-licht--2 { opacity: 1; }
	.mm-licht--3 { opacity: 0; }
	html.mm-js .mm-enthuellen { opacity: 1 !important; transform: none !important; }
	html.mm-js :is(.mm-tuer__bild, .mm-akt__bild) { clip-path: none !important; }
}
html.mm-ruhig *, html.mm-ruhig *::before, html.mm-ruhig *::after { animation: none !important; transition: none !important; }
html.mm-ruhig .mm-zeitbild { clip-path: none !important; }
html.mm-ruhig :is(.mm-tuer__bild, .mm-akt__bild) { clip-path: none !important; }
html.mm-ruhig .mm-licht--2 { opacity: 1; }
html.mm-ruhig .mm-licht--3 { opacity: 0; }

/* ---------- Vorschau (nur auf Netlify) ---------- */

.mm-vorschau-band {
	position: relative;
	z-index: 40;
	padding: .5rem var(--mm-rand);
	background: var(--mm-gold);
	color: var(--mm-tinte);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
}
html.mm-vorschau .mm-platzhalter { text-decoration: underline dotted color-mix(in srgb, var(--mm-gold) 80%, transparent); text-underline-offset: .35em; }