/* ==========================================================================
   Menzingers 2026
   Ergänzt theme.json um das, was sich dort nicht abbilden lässt.

   Farben: ausschließlich über die Variablen aus theme.json
   (var(--wp--preset--color--…)). Es steht hier kein einziger Farbwert.
   Das Corporate Design wird deshalb an EINER Stelle geändert: in der
   Farbpalette von theme.json (oder im Site-Editor unter Stile → Farben).
   ========================================================================== */

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

:root {
	--mz-ease: 220ms cubic-bezier(.2, .6, .3, 1);
	--mz-radius: 2px;
	/* Höhe der Wellenkante unter dem Aufmacher. */
	--mz-welle: clamp(2.5rem, 5vw, 4.5rem);
}

::selection {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Zwischen den Abschnitten kein Blockabstand: jeder Abschnitt bringt sein
   Polster selbst mit, sonst entstehen Cremestreifen zwischen vollbreiten Bändern. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* ------------------------------------------------------------- Bausteinstile */

/* Label — kleine, gesperrte Versalien in Terracotta. */
.is-style-mz-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 1rem;
}

/* Handschrift — die italienischen Zurufe. */
.is-style-mz-script {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--gruen);
}

/* Link mit Pfeil — als Grafik, damit kein Pfeil mitkopiert wird.
   "is-style-mz-arrow" sitzt beim Absatz auf dem <p> und beim Button auf dem
   umschließenden <div>; die Auswahl ist deshalb bewusst eng. */
p.is-style-mz-arrow a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--terracotta);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

p.is-style-mz-arrow a::after,
.wp-block-button.is-style-mz-arrow .wp-block-button__link::after {
	content: "";
	inline-size: 1.15rem;
	block-size: .5rem;
	background: currentColor;
	clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
	transition: translate var(--mz-ease);
	margin-inline-start: calc(var(--wp--custom--tracking--label) * -1);
}

p.is-style-mz-arrow a:hover::after,
p.is-style-mz-arrow a:focus-visible::after,
.wp-block-button.is-style-mz-arrow .wp-block-button__link:hover::after {
	translate: .25rem 0;
}

p.is-style-mz-arrow a:hover {
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
}

.wp-block-button.is-style-mz-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}

/* Karte — weiße Fläche auf Creme. */
.is-style-mz-card {
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Umrandeter Button für sekundäre Wege. */
.wp-block-button.is-style-mz-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--gruen);
	box-shadow: inset 0 0 0 1px currentColor;
}

.wp-block-button.is-style-mz-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

/* Meta-Label. */
.is-style-mz-meta,
.is-style-mz-meta a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

/* ----------------------------------------------------------- Seitenkopf */

.mz-seitenkopf {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.mz-seitenkopf > :first-child {
	margin-block-start: 0;
}

.wp-block-post-content > .mz-seitenkopf {
	max-width: var(--wp--style--global--wide-size);
}

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

/* Der Kopf bleibt beim Scrollen stehen. Haften muss der Template-Part-Wrapper,
   nicht der Kopf darin — sonst hat er keinen Platz zum Mitwandern. */
.wp-site-blocks > .wp-block-template-part:has(.mz-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(.mz-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.mz-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: .85rem;
}

.mz-header__bar {
	gap: var(--wp--preset--spacing--40);
}

.mz-logo,
.mz-logo img {
	margin: 0;
	display: block;
}

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

.mz-header .mz-logo {
	flex: 0 0 auto;
}

.mz-header__nav {
	flex: 1 1 auto;
	justify-content: center;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.mz-header__nav .wp-block-navigation-item__content {
	padding-block: .4rem;
	border-bottom: 1px solid transparent;
}

.mz-header__nav .wp-block-navigation-item__content:hover,
.mz-header__nav .current-menu-item > .wp-block-navigation-item__content,
.mz-header__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--gruen);
	border-bottom-color: var(--wp--preset--color--terracotta);
	text-decoration: none;
}

.mz-header__nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--card);
	padding: .5rem 0;
	min-width: 15rem;
}

.mz-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .6rem 1.1rem;
	border-bottom: 0;
}

.mz-header__cta {
	flex: 0 0 auto;
	margin: 0;
}

.mz-header__cta .wp-block-button__link {
	white-space: nowrap;
	padding: .95rem 1.4rem;
}

/* WooCommerce hängt Konto- und Warenkorb-Symbol automatisch an jede
   Navigation. Der Shop ist nicht aktiv, die Symbole gehören nicht in den Kopf. */
.mz-header .wp-block-woocommerce-customer-account,
.mz-header .wp-block-woocommerce-mini-cart,
.mz-header .wc-block-mini-cart {
	display: none;
}

.mz-header__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(.9rem, 1.6vw, 1.75rem);
}

.mz-header__nav .wp-block-navigation-item {
	white-space: nowrap;
}

/* Ab Tablet: Hamburger statt Menüzeile. Der Kern schaltet erst unter 600px um;
   für 600–1180px wird das hier vorgezogen, damit die Zeile nicht umbricht. */
@media (width <= 1240px) {
	.mz-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

	.mz-header__nav {
		justify-content: flex-end;
	}

	.mz-header__bar {
		flex-wrap: wrap !important;
	}
}

@media (width <= 680px) {
	.mz-header .mz-logo {
		width: 170px;
	}

	.mz-header__cta {
		display: none;
	}
}

/* Mobiles Menü: Creme-Fläche, Einträge groß und ruhig. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------- Hero */

.wp-block-cover.mz-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(34rem, 78vh, 50rem);
	padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--60) + var(--mz-welle));
	color: var(--wp--preset--color--base);
}


.mz-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* Wellenkante: Creme-Fläche, die per Maske zur Welle wird. */
.mz-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	z-index: 2;
	block-size: var(--mz-welle);
	background: var(--wp--preset--color--base);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V38C180 6 360 2 560 22s400 52 620 34c110-9 190-26 260-46v70z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V38C180 6 360 2 560 22s400 52 620 34c110-9 190-26 260-46v70z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.mz-hero__title,
.mz-hero .is-style-mz-script {
	color: var(--wp--preset--color--base);
	line-height: 1;
	margin-block-end: var(--wp--preset--spacing--30);
}

.mz-hero .is-style-mz-eyebrow {
	color: var(--wp--preset--color--base);
}

/* Der Cover-Block setzt Link- und Button-Farben nicht selbst; der Button
   behält seine Terracotta-Fläche aus theme.json. */
.mz-hero .wp-block-button__link {
	color: var(--wp--preset--color--surface);
}


/* -------------------------------------------------------------- Einleitung */

.mz-intro__bild img {
	width: 100%;
	height: auto;
	border-radius: var(--mz-radius);
	box-shadow: var(--wp--preset--shadow--float);
}

.mz-intro .is-style-mz-script {
	margin-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------ Teaser */

.mz-teaser .wp-block-image,
.mz-teaser .wp-block-image img {
	margin: 0;
	width: 100%;
	border-radius: var(--mz-radius);
}

.mz-teaser .wp-block-image {
	overflow: hidden;
}

.mz-teaser .wp-block-image img {
	transition: transform 600ms cubic-bezier(.2, .6, .3, 1);
}

.mz-teaser .wp-block-image:hover img {
	transform: scale(1.04);
}

.mz-teaser__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	line-height: 1.3;
	margin-block: var(--wp--preset--spacing--30) .5rem;
}

.mz-teaser p {
	margin-block: .5rem 0;
}

.mz-teaser p.is-style-mz-arrow {
	margin-block-start: 1rem;
}

.mz-teaser__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.15;
	margin-block: .5rem;
}

/* ------------------------------------------------------------------ Events */

.wp-block-columns.mz-events {
	gap: 0;
	margin-block: 0;
	flex-wrap: nowrap;
}

.mz-events__bild,
.mz-events__bild .wp-block-image {
	margin: 0;
}

.mz-events__bild .wp-block-image,
.mz-events__bild img {
	height: 100%;
	width: 100%;
}

.mz-events__bild img {
	object-fit: cover;
	min-height: 26rem;
}

.mz-events__panel {
	padding: var(--wp--preset--spacing--60) clamp(1.5rem, 6vw, 5.5rem);
}

.mz-events__panel .is-style-mz-eyebrow {
	color: var(--wp--preset--color--base);
	opacity: .8;
}

.mz-events__panel h2 {
	max-width: 20ch;
}

.mz-events__panel p:not(.is-style-mz-eyebrow) {
	max-width: 36ch;
}

@media (width <= 780px) {
	.wp-block-columns.mz-events {
		flex-direction: column;
	}
}

/* ----------------------------------------------------------------- Galerie */

.mz-galerie-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.mz-galerie-kopf > * {
	margin-block: 0;
}

.mz-galerie-kopf h2 {
	margin: 0;
}

.mz-galerie {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.mz-galerie > .wp-block-image {
	margin: 0;
}

.mz-galerie img {
	width: 100%;
	height: 100%;
	border-radius: var(--mz-radius);
}

@media (width <= 900px) {
	.mz-galerie {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (width <= 600px) {
	.mz-galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.mz-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.mz-footer a {
	color: inherit;
	text-decoration: none;
}

.mz-footer a:hover {
	text-decoration: underline;
}

.mz-footer__label {
	color: var(--wp--preset--color--base);
	opacity: .65;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.mz-footer p,
.mz-footer ul {
	margin-block: 0;
}

.mz-footer__list {
	list-style: none;
	padding-left: 0;
}

.mz-footer__list li + li {
	margin-top: .5rem;
}

.mz-footer .wp-block-social-links .wp-social-link a {
	text-decoration: none;
}

.mz-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.mz-footer__legal > * {
	margin-block: 0;
}

.mz-footer .is-style-mz-script {
	color: var(--wp--preset--color--base);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

@media (width <= 780px) {
	.mz-footer__cols {
		gap: var(--wp--preset--spacing--50);
	}
}

/* ------------------------------------------------------- Formulare, Karten */

/* Kontaktformular (Contact Form 7), Suche u. ä. im Ton des Designs. */
:where(.wpcf7, .wp-block-search) input:where([type="text"], [type="email"], [type="tel"], [type="search"], [type="date"], [type="number"]),
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	font: inherit;
	padding: .8rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mz-radius);
}

.wpcf7 input[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--terracotta);
	border: 0;
	border-radius: var(--mz-radius);
	padding: 1.05rem 1.6rem;
	cursor: pointer;
	transition: background var(--mz-ease);
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--terracotta-deep);
}

/* ------------------------------------------------------------ Zierelemente */

/* Olivenzweig (assets/img/olivenzweig.svg). Das SVG dient nur als Maske, die
   Farbe kommt aus der Palette — der Zweig färbt sich mit dem CI um. Rein
   dekorativ, auf kleinen Schirmen ausgeblendet. */
.mz-intro,
.mz-footer {
	position: relative;
	overflow: clip;
}

.mz-intro::before,
.mz-footer::before {
	content: "";
	position: absolute;
	pointer-events: none;
	aspect-ratio: 440 / 480;
	-webkit-mask: url("../img/olivenzweig.svg") center / contain no-repeat;
	mask: url("../img/olivenzweig.svg") center / contain no-repeat;
}

/* Oben rechts, ragt aus dem Hero-Rand in die Einleitung. */
.mz-intro::before {
	inset: calc(var(--mz-welle) * .15) 0 auto auto;
	width: clamp(9rem, 15vw, 15rem);
	background: var(--wp--preset--color--gruen);
	opacity: .9;
	scale: -1 1;
}

/* Unten rechts im Footer, zurückhaltend. */
.mz-footer::before {
	inset: auto 4rem 3.5rem auto;
	width: clamp(7rem, 11vw, 11rem);
	background: var(--wp--preset--color--base);
	opacity: .22;
	rotate: -10deg;
	scale: -1 1;
}

.mz-intro > *,
.mz-footer > * {
	position: relative;
	z-index: 1;
}

@media (width <= 900px) {
	.mz-intro::before,
	.mz-footer::before {
		display: none;
	}
}

/* --------------------------------------------- Aufmacher: Bilderwechsel */

/* Nur das Hintergrundbild wechselt, Text und Button bleiben stehen.
   Das erste Bild ist das Bild des Cover-Blocks; die weiteren liegen als
   Bild-Blöcke in .mz-hero__slides und blenden nacheinander darüber ein
   (je 6 s Standzeit, Überblendung 1,5 s, Schleife nach 24 s). Weitere
   Bilder: einfach einen Bild-Block in die Gruppe setzen und die Zeitleiste
   unten anpassen. */
.mz-hero > .wp-block-cover__inner-container {
	position: static;
	z-index: auto;
}

.mz-hero .mz-hero__cols {
	position: relative;
	z-index: 3;
}

.mz-hero .mz-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

.mz-hero .mz-hero__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Der Text liegt rechts auf dem Foto. Ein Verlauf in Grün hält ihn lesbar,
	   egal welches Motiv gerade läuft; die linke Bildhälfte bleibt frei. */
	background: linear-gradient(90deg,
		transparent 30%,
		color-mix(in srgb, var(--wp--preset--color--gruen-deep) 80%, transparent) 100%);
}

@media (width <= 680px) {
	.mz-hero .mz-hero__slides::after {
		background: color-mix(in srgb, var(--wp--preset--color--gruen-deep) 50%, transparent);
	}
}

.mz-hero .mz-hero__slides .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	animation: mz-slide 24s ease-in-out infinite both;
}

.mz-hero .mz-hero__slides .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-hero .mz-hero__slides .wp-block-image:nth-child(1) { animation-name: mz-slide-a; }
.mz-hero .mz-hero__slides .wp-block-image:nth-child(2) { animation-name: mz-slide-b; }
.mz-hero .mz-hero__slides .wp-block-image:nth-child(3) { animation-name: mz-slide-c; }

/* a und b bleiben unter dem jeweils nächsten Bild liegen und blenden mit dem
   letzten gemeinsam aus; dann ist wieder das Cover-Bild zu sehen. */
@keyframes mz-slide-a { 0%, 25% { opacity: 0 } 31%, 94% { opacity: 1 } 100% { opacity: 0 } }
@keyframes mz-slide-b { 0%, 50% { opacity: 0 } 56%, 94% { opacity: 1 } 100% { opacity: 0 } }
@keyframes mz-slide-c { 0%, 75% { opacity: 0 } 81%, 94% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
	.mz-hero .mz-hero__slides { display: none; }
}

/* ------------------------------------------- Selbstabholer, Familie */

.mz-abholer .wp-block-buttons {
	gap: var(--wp--preset--spacing--30);
}

.mz-familie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.mz-familie__inner > * {
	margin-block: 0;
}

.mz-familie h3 {
	margin: 0 0 .5rem;
}

.mz-familie p {
	margin-block: .25rem 0;
}

/* Sprungmarken auf der Bestellseite */
.mz-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	padding: 0;
	margin: 0;
}

.mz-chips li {
	margin: 0;
}

.mz-chips a {
	display: inline-block;
	padding: .55rem 1.1rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gruen);
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
}

.mz-chips a:hover {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

.mz-familie__text {
	gap: var(--wp--preset--spacing--40);
}

.mz-familie__logo,
.mz-familie__logo img {
	margin: 0;
	height: auto;
	flex: 0 0 auto;
}

.mz-familie__text {
	flex: 1 1 28rem;
	min-width: 0;
}

.mz-familie__text > .wp-block-group {
	min-width: 0;
}

/* ------------------------------------------- Plugin-Bausteine im Seiteninhalt */

/* Die Bausteine des Eventlocation-Plugins (Raumraster, Anfrageformular, …)
   tragen die Klasse "alignfull" und laufen dadurch bis an den Fensterrand. Im
   Seiteninhalt sollen sie wie "breit" sitzen: im Raster, mit dem seitlichen
   Seitenrand. */
.wp-block-post-content > [class*="d81-el-"].alignfull,
.wp-block-post-content > [class*="d81-el-"].alignwide {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 0;
}

/* Raumkarten: wenige Räume stehen mittig statt links im Dreierraster. */
.d81-el-rooms .d81-el-rooms__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 26rem));
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
}

.d81-el-room__media img {
	border-radius: var(--mz-radius);
}

/* Das Plugin nimmt seine Akzentfarbe aus der Palette (dort "aubergine",
   im Menzingers-CI gibt es die nicht) — hier auf die Menzingers-Farben gelegt. */
.d81-el-rooms,
.d81-el-facts,
.d81-el-gallery,
.d81-el-inquiry,
.d81-el-form {
	--el-accent: var(--wp--preset--color--terracotta);
}

.d81-el-form {
	--wp--preset--color--aubergine-tint: var(--wp--preset--color--gruen-tint);
}

.d81-el-form__grid {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.d81-el-form button[type="submit"],
.d81-el-form input[type="submit"] {
	border-radius: var(--mz-radius);
}

.d81-el-form :where(input, select, textarea) {
	box-sizing: border-box;
	max-width: 100%;
}

/* ================================================================= Tabs */

.mz-tabs__nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.mz-tabs__nav li {
	margin: 0;
}

.mz-tabs__nav a {
	display: inline-block;
	padding: .6rem 1.15rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gruen);
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--mz-ease), color var(--mz-ease);
}

.mz-tabs__nav a:hover,
.mz-tabs__nav a.is-active,
.mz-tabs__nav a[aria-selected="true"] {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

.mz-tab-panel[hidden] {
	display: none;
}

.mz-tab-panel > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.mz-tab-panel h2,
.mz-tab-panel h3 {
	text-align: center;
}

/* ============================================ Bestellservice (Lieferservice) */

/* Das Plugin d81-lieferservice nimmt seine Farben aus eigenen Variablen —
   hier auf die Palette des Themes gelegt. */
:root {
	--d81-ls-accent: var(--wp--preset--color--terracotta);
	--d81-ls-accent-dark: var(--wp--preset--color--terracotta-deep);
	--d81-ls-bg: var(--wp--preset--color--surface);
	--d81-ls-text: var(--wp--preset--color--ink);
	--d81-ls-muted: var(--wp--preset--color--ink-soft);
	--d81-ls-border: var(--wp--preset--color--line);
	--d81-ls-radius: 4px;
}

/* Speisekarte links, Warenkorb rechts: das Raster soll die volle Rasterbreite
   bekommen, nicht die schmale Lesebreite des Seiteninhalts. */
.wp-block-post-content > .d81-ls-orderpage-grid,
.wp-block-post-content > [class*="d81-ls-"].alignwide {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.d81-ls-orderpage-grid {
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: var(--wp--preset--spacing--50);
	}

	/* Unter dem haftenden Kopfbereich bleiben. */
	.d81-ls-cart {
		top: 6.5rem;
		max-height: calc(100vh - 8rem);
	}
}

.d81-ls-cart__toggle {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

.d81-ls-cart__header {
	background: var(--wp--preset--color--gruen-tint);
	color: var(--wp--preset--color--ink);
}

.d81-ls-cart__checkout,
.d81-ls-btn--primary {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--surface);
	border-radius: var(--mz-radius);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--label);
	font-size: var(--wp--preset--font-size--small);
}

.d81-ls-cart__change {
	color: var(--wp--preset--color--terracotta);
}

/* Speisetabelle (Plugin woo-products-list): Zeilen statt Raster-Tabelle. */
.wcplprotable_wrap {
	margin: 0;
}

.wcplprotable.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.wcplprotable.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1rem .75rem;
	vertical-align: middle;
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
}

.wcplprotable .titlecol {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	width: 30%;
}

.wcplprotable .desccol {
	color: var(--wp--preset--color--ink-soft);
}

.wcplprotable .pricecol {
	white-space: nowrap;
	font-weight: 600;
	text-align: right;
}

.wcplprotable .qtycol {
	width: 5.5rem;
}

.wcplprotable .qtycol table,
.wcplprotable .qtycol td {
	border: 0;
	padding: 0;
}

.wcplprotable .qty {
	width: 4rem;
	padding: .5rem;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mz-radius);
	font: inherit;
}

.wcplprotable .cartcol {
	text-align: right;
	white-space: nowrap;
}

.wcplprotable .single_add_to_cart_button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--terracotta);
	border: 0;
	border-radius: var(--mz-radius);
	padding: .8rem 1.1rem;
	cursor: pointer;
	transition: background var(--mz-ease);
}

.wcplprotable .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--terracotta-deep);
}

@media (width <= 780px) {
	.wcplprotable.shop_table,
	.wcplprotable.shop_table tbody,
	.wcplprotable.shop_table tr,
	.wcplprotable.shop_table td {
		display: block;
		width: 100%;
	}

	.wcplprotable.shop_table td {
		border: 0;
		padding: .25rem 0;
		text-align: left;
	}

	.wcplprotable.shop_table tr {
		padding: 1rem 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.wcplprotable .titlecol {
		width: 100%;
	}
}

.woocommerce .wcplprotable.shop_table {
	border: 0;
	border-radius: 0;
}

.mz-tab-panel img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--mz-radius);
}

/* ====================================== Pizza-Extras (Plugin pizza_add_on) */

/* Auswahl der Zutaten als Fenster über der Speisekarte. Das Plugin liefert
   Struktur und Funktion, hier kommt das Erscheinungsbild. */
body .design81-product-addon-container.design81-overlay-active {
	display: grid;
	place-items: start center;
	padding: clamp(.75rem, 4vh, 3rem) clamp(.75rem, 3vw, 2rem);
	box-sizing: border-box;
	background: color-mix(in srgb, var(--wp--preset--color--gruen-deep) 70%, transparent);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 100000;
}

body .design81-product-addon-container div.wc-pao-addon-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: min(100%, 52rem);
	max-height: calc(100vh - 2 * clamp(.75rem, 4vh, 3rem));
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	overflow-y: auto;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--float);
	box-sizing: border-box;
	text-align: left;
}

body .design81-product-addon-container label.wc-pao-addon-name {
	display: block;
	margin: 0;
	padding: 0 2.5rem var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

body .design81-product-addon-container label.wc-pao-addon-name::before {
	content: "Extras für Ihre Pizza";
	display: block;
	margin-bottom: .35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

body .design81-product-addon-container .wc-pao-addon-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
}

body .design81-product-addon-container .wc-pao-addon-wrap > div {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mz-radius);
	transition: border-color var(--mz-ease), background var(--mz-ease);
}

body .design81-product-addon-container .wc-pao-addon-wrap > div:hover {
	border-color: var(--wp--preset--color--gruen);
}

body .design81-product-addon-container .wc-pao-addon-wrap > div:has(input:checked) {
	background: var(--wp--preset--color--gruen-tint);
	border-color: var(--wp--preset--color--gruen);
}

body .design81-product-addon-container .wc-pao-addon-wrap input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 0 0 .85rem;
	accent-color: var(--wp--preset--color--gruen);
	cursor: pointer;
}

body .design81-product-addon-container .wc-pao-addon-wrap label {
	display: flex !important;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0;
	padding: .7rem .85rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

body .design81-product-addon-container .wc-pao-addon-price {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

/* Bestätigen bleibt beim Blättern unten stehen. */
body .design81-product-addon-container div.wc-pao-addon-container > button.button {
	position: sticky;
	bottom: 0;
	margin: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--40) * -1) 0;
	padding: 1.1rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--mz-ease);
}

body .design81-product-addon-container div.wc-pao-addon-container > button.button:hover {
	background: var(--wp--preset--color--terracotta-deep);
}

.design81-close-overlay {
	position: absolute;
	top: .9rem;
	right: .9rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	cursor: pointer;
	text-decoration: none;
}

.design81-close-overlay:hover {
	background: var(--wp--preset--color--gruen);
	color: var(--wp--preset--color--base);
}

/* Der Knopf in der Speisetabelle, der die Auswahl öffnet. */
.woocommerce.wcplprotable_wrap button.design81-add-toppings {
	background: transparent !important;
	color: var(--wp--preset--color--gruen) !important;
	box-shadow: inset 0 0 0 1px currentColor;
	border-radius: var(--mz-radius) !important;
	padding: .65rem .9rem !important;
	font-size: var(--wp--preset--font-size--micro) !important;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	cursor: pointer;
}

.woocommerce.wcplprotable_wrap button.design81-add-toppings:hover {
	background: var(--wp--preset--color--gruen) !important;
	color: var(--wp--preset--color--base) !important;
}

p.design81-selected-addons {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--ink-soft);
	white-space: normal;
}