/* =========================================================================
   Mosipictures – Design-System
   Farben und Schriften entsprechen den globalen Elementor-Variablen
   (mp-creme, mp-papier, mp-sand, mp-karamell, mp-tinte, mp-gedaempft).
   ========================================================================= */

/* ---------- Schriften (lokal, OFL-lizenziert) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pinyon-script-400.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
	--mp-creme: #F6F1EB;
	--mp-papier: #FBF8F4;
	--mp-sand: #D8C0A8;
	--mp-karamell: #B98B63;
	--mp-karamell-dunkel: #8F6440; /* für Text auf hellem Grund (Kontrast ≥ 4.5:1) */
	--mp-tinte: #3B3029;
	--mp-gedaempft: #6E5D50;
	--mp-serif: "Cormorant Garamond", Georgia, serif;
	--mp-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--mp-script: "Pinyon Script", cursive;
	--mp-rand: clamp(20px, 5vw, 48px);
	--mp-max: 1120px;
	--mp-ease: cubic-bezier(.2, .7, .2, 1);
	--mp-fokus: 0 0 0 2px var(--mp-papier), 0 0 0 4px var(--mp-tinte);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
	margin: 0;
	background: var(--mp-creme);
	color: var(--mp-tinte);
	font-family: var(--mp-sans);
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--mp-sand); color: var(--mp-tinte); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--mp-fokus);
	border-radius: 2px;
}
.mp-main:focus { outline: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mp-skip {
	position: absolute; left: 16px; top: -100px; z-index: 1000;
	padding: 12px 20px; background: var(--mp-tinte); color: var(--mp-papier);
	font-size: 14px; text-decoration: none; transition: top .2s;
}
.mp-skip:focus { top: 16px; }

/* ---------- Typografie (auch für Theme-Vorlagen) ---------- */
.mp-eyebrow {
	margin: 0; font-family: var(--mp-sans); font-size: 12px; font-weight: 500;
	letter-spacing: .28em; text-transform: uppercase; color: var(--mp-karamell-dunkel);
}
.mp-h1, .mp-h2 { margin: 0; font-family: var(--mp-serif); font-weight: 400; line-height: 1.08; color: var(--mp-tinte); }
.mp-h1 { font-size: clamp(42px, 6vw, 64px); }
.mp-h2 { font-size: clamp(34px, 4.5vw, 48px); }
.mp-text { margin: 0; font-size: 16px; line-height: 1.85; color: var(--mp-gedaempft); }

/* Elementor-Klassen leicht nachschärfen: dunkleres Karamell für lesbare Kleinschrift */
.elementor .mp-eyebrow { color: var(--mp-karamell-dunkel); }
.elementor .mp-text { color: var(--mp-gedaempft); }

/* Kleine Akzentschrift (Eyebrow, Script): auf hellem Grund dunkles Karamell (Kontrast ≥ 4.5:1),
   auf dunklem Grund Sand, auf sandfarbenem Grund Tinte. Höhere Spezifität als die Elementor-Klassen. */
body .elementor .mp-eyebrow,
body .elementor .mp-script { color: var(--mp-karamell-dunkel); }
body .elementor :is(.mp-flip-hinten, [data-id="37c2bf1c"]) .mp-eyebrow { color: var(--mp-sand); }
body .elementor [data-interaction-id="1a198636"].mp-eyebrow { color: var(--mp-tinte); } /* Widgets tragen ihre ID hier, Container in data-id */

/* ---------- Buttons ---------- */
.mp-btn,
.elementor .mp-btn {
	display: inline-block; padding: 16px 36px;
	font-family: var(--mp-sans); font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
	color: var(--mp-tinte); background: transparent; border: 1px solid var(--mp-karamell); border-radius: 0;
	text-decoration: none; cursor: pointer;
	transition: background-color .3s var(--mp-ease), color .3s var(--mp-ease), transform .3s var(--mp-ease);
}
.mp-btn:hover, .mp-btn:focus-visible,
.elementor .mp-btn:hover, .elementor .mp-btn:focus-visible {
	background: var(--mp-karamell); color: var(--mp-papier); transform: translateY(-2px);
}

/* ---------- Kopfbereich ---------- */
.mp-header {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	padding: 24px var(--mp-rand) 22px; background: var(--mp-creme);
}
.mp-header__logo { display: block; line-height: 0; border-radius: 50%; }
.mp-logo { width: 104px; height: 104px; object-fit: contain; }
.mp-logo-text { font-family: var(--mp-serif); font-size: 32px; line-height: 1; }

.mp-nav__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 44px; margin: 0; padding: 0; list-style: none; }
.mp-nav__liste a {
	position: relative; display: inline-block; padding: 8px 0;
	font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
	color: var(--mp-tinte);
}
.mp-nav__liste a::after {
	content: ""; position: absolute; left: 0; right: .24em; bottom: 2px; height: 1px;
	background: var(--mp-karamell); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--mp-ease);
}
.mp-nav__liste a:hover::after,
.mp-nav__liste a:focus-visible::after,
.mp-nav__liste .current-menu-item:not(.menu-item-type-custom) > a::after { transform: scaleX(1); }

.mp-nav__toggle { display: none; }

@media (max-width: 767px) {
	.mp-header { flex-direction: row; justify-content: space-between; padding-block: 14px; }
	.mp-logo { width: 72px; height: 72px; }

	.mp-js .mp-nav__toggle {
		display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
		background: none; border: 0; color: var(--mp-tinte); cursor: pointer;
		font: 500 12px/1 var(--mp-sans); letter-spacing: .24em; text-transform: uppercase;
	}
	.mp-nav__icon, .mp-nav__icon::before, .mp-nav__icon::after {
		display: block; width: 22px; height: 1px; background: currentColor; transition: transform .3s var(--mp-ease), opacity .2s;
	}
	.mp-nav__icon { position: relative; }
	.mp-nav__icon::before, .mp-nav__icon::after { content: ""; position: absolute; left: 0; }
	.mp-nav__icon::before { top: -7px; }
	.mp-nav__icon::after { top: 7px; }
	.mp-nav__toggle[aria-expanded="true"] .mp-nav__icon { background: transparent; }
	.mp-nav__toggle[aria-expanded="true"] .mp-nav__icon::before { transform: translateY(7px) rotate(45deg); }
	.mp-nav__toggle[aria-expanded="true"] .mp-nav__icon::after { transform: translateY(-7px) rotate(-45deg); }

	.mp-js .mp-nav { position: static; }
	.mp-js .mp-nav__liste {
		position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
		flex-direction: column; align-items: center; gap: 0; padding: 12px 0 24px;
		background: var(--mp-creme); box-shadow: 0 18px 30px -24px rgba(59, 48, 41, .45);
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity .25s var(--mp-ease), transform .25s var(--mp-ease), visibility 0s .25s;
	}
	.mp-js .mp-nav.is-open .mp-nav__liste { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.mp-js .mp-nav__liste a { display: block; padding: 14px 24px; }
	.mp-header { position: relative; }
}

/* ---------- Kontaktbereich ---------- */
.mp-kontakt { padding: clamp(72px, 10vw, 112px) var(--mp-rand); background: var(--mp-papier); }
.mp-kontakt__inner {
	display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 7vw, 88px);
	max-width: var(--mp-max); margin: 0 auto; align-items: start;
}
.mp-kontakt__info { display: flex; flex-direction: column; gap: 18px; }
.mp-kontakt__wege { display: grid; gap: 18px; margin: 12px 0 0; }
.mp-kontakt__wege dt { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mp-karamell-dunkel); }
.mp-kontakt__wege dd { margin: 2px 0 0; font-size: 16px; color: var(--mp-tinte); }
.mp-kontakt__wege a { text-decoration: none; background: linear-gradient(var(--mp-karamell), var(--mp-karamell)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--mp-ease); }
.mp-kontakt__wege a:hover, .mp-kontakt__wege a:focus-visible { background-size: 100% 1px; }
.mp-kontakt__formular { padding: clamp(24px, 4vw, 44px); background: var(--mp-creme); }
@media (max-width: 900px) { .mp-kontakt__inner { grid-template-columns: 1fr; } }

/* ---------- Kontaktformular (Contact Form 7) ---------- */
.wpcf7 form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.wpcf7 form > p { margin: 0; }
.wpcf7 .mp-form { display: flex; flex-direction: column; gap: 20px; }
.wpcf7 .mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .wpcf7 .mp-row { grid-template-columns: 1fr; } }
.wpcf7 label {
	display: flex; flex-direction: column; gap: 6px;
	font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mp-gedaempft);
}
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box; width: 100%; padding: 10px 0;
	font: 300 16px/1.5 var(--mp-sans); letter-spacing: 0; text-transform: none; color: var(--mp-tinte);
	background: transparent; border: 0; border-bottom: 1px solid var(--mp-sand); border-radius: 0;
	transition: border-color .2s;
}
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input:not([type="submit"]):focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible { box-shadow: none; border-bottom-color: var(--mp-tinte); outline: none; }
.wpcf7 .mp-consent, .wpcf7 .wpcf7-acceptance label {
	flex-direction: row; align-items: flex-start; gap: 10px;
	font-size: 13px; font-weight: 300; letter-spacing: 0; text-transform: none; line-height: 1.6;
}
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mp-karamell); }
.wpcf7 input[type="submit"] {
	align-self: flex-start; min-height: 48px; padding: 16px 40px;
	font: 500 12px/1 var(--mp-sans); letter-spacing: .24em; text-transform: uppercase;
	color: var(--mp-papier); background: var(--mp-tinte); border: 1px solid var(--mp-tinte); border-radius: 0; cursor: pointer;
	transition: background-color .3s var(--mp-ease), color .3s var(--mp-ease);
}
.wpcf7 input[type="submit"]:hover { background: transparent; color: var(--mp-tinte); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; letter-spacing: 0; text-transform: none; color: #9A3B1E; }
.wpcf7 form .wpcf7-response-output { margin: 4px 0 0; padding: 12px 16px; border: 1px solid var(--mp-sand); font-size: 14px; }

/* ---------- Portfolio-Übersicht ---------- */
.mp-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 40px; }
.mp-filter__btn {
	min-height: 44px; padding: 10px 22px;
	font: 500 12px/1 var(--mp-sans); letter-spacing: .22em; text-transform: uppercase;
	color: var(--mp-tinte); background: transparent; border: 1px solid var(--mp-sand); border-radius: 999px; cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s;
}
.mp-filter__btn:hover { border-color: var(--mp-karamell); }
.mp-filter__btn[aria-pressed="true"] { background: var(--mp-tinte); border-color: var(--mp-tinte); color: var(--mp-papier); }

.mp-portfolio {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px);
	max-width: 1320px; margin: 0 auto; padding: 0; list-style: none;
}
@media (max-width: 1024px) { .mp-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mp-portfolio { grid-template-columns: 1fr; } }
.mp-portfolio__item[hidden] { display: none; }

.mp-karte { display: block; text-decoration: none; color: var(--mp-tinte); }
.mp-karte__bild { display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--mp-sand); }
.mp-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mp-ease), filter .6s; }
.mp-karte:hover .mp-karte__bild img, .mp-karte:focus-visible .mp-karte__bild img { transform: scale(1.045); filter: saturate(1.05); }
.mp-karte__text { display: flex; flex-direction: column; gap: 4px; padding: 16px 2px 4px; }
.mp-karte__titel { font-family: var(--mp-serif); font-size: 26px; line-height: 1.2; }
.mp-karte:focus-visible { box-shadow: none; }
.mp-karte:focus-visible .mp-karte__bild { box-shadow: var(--mp-fokus); }

/* ---------- Einzelnes Projekt ---------- */
.mp-projekt { padding: clamp(56px, 8vw, 96px) var(--mp-rand) clamp(72px, 10vw, 112px); }
.mp-projekt__kopf { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto 40px; text-align: center; }
.mp-projekt__inhalt { max-width: 1320px; margin: 0 auto; }
.mp-projekt__inhalt > p { max-width: 640px; margin: 0 auto 40px; text-align: center; font-size: 17px; line-height: 1.85; color: var(--mp-gedaempft); }
.mp-projekt__zurueck { margin: 56px 0 0; text-align: center; }

/* Galerie im Masonry-Stil (WordPress-Galerieblock) */
.wp-block-gallery.mp-galerie.has-nested-images {
	display: block !important; columns: 3 280px; column-gap: 12px;
}
.wp-block-gallery.mp-galerie.has-nested-images figure.wp-block-image {
	display: block; width: 100% !important; margin: 0 0 12px !important; break-inside: avoid; overflow: hidden;
}
.wp-block-gallery.mp-galerie.has-nested-images figure.wp-block-image img {
	display: block; width: 100%; height: auto !important; object-fit: initial !important;
	transition: transform .9s var(--mp-ease);
}
.wp-block-gallery.mp-galerie figure.wp-block-image a:hover img { transform: scale(1.03); }

/* ---------- Lightbox ---------- */
.mp-lightbox {
	width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(32, 25, 21, .96); color: var(--mp-papier);
}
.mp-lightbox::backdrop { background: rgba(32, 25, 21, .96); }
.mp-lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.mp-lightbox__bild { grid-column: 2; justify-self: center; max-width: 100%; max-height: 88vh; object-fit: contain; user-select: none; }
.mp-lightbox button {
	width: 48px; height: 48px; display: grid; place-items: center;
	background: none; border: 1px solid rgba(251, 248, 244, .35); border-radius: 50%; color: inherit; cursor: pointer;
	font: 300 22px/1 var(--mp-sans); transition: background-color .2s;
}
.mp-lightbox button:hover { background: rgba(251, 248, 244, .12); }
.mp-lightbox button:focus-visible { box-shadow: 0 0 0 2px var(--mp-papier); }
.mp-lightbox__zurueck { grid-column: 1; justify-self: center; }
.mp-lightbox__weiter { grid-column: 3; justify-self: center; }
.mp-lightbox__schliessen { position: absolute; top: 16px; right: 16px; }
.mp-lightbox__zaehler { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .2em; }
@media (max-width: 600px) {
	.mp-lightbox[open] { grid-template-columns: 0 1fr 0; }
	.mp-lightbox__zurueck, .mp-lightbox__weiter { position: absolute; bottom: 8px; }
	.mp-lightbox__zurueck { left: 16px; }
	.mp-lightbox__weiter { right: 16px; }
}

/* ---------- Fußzeile ---------- */
.mp-footer {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
	padding: 28px var(--mp-rand); background: var(--mp-tinte); color: var(--mp-sand);
}
.mp-footer__copy { margin: 0; font-size: 13px; letter-spacing: .04em; }
.mp-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.mp-footer__menu { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.mp-footer a { display: inline-block; padding: 6px 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--mp-sand); transition: color .2s; }
.mp-footer a:hover, .mp-footer a:focus-visible { color: var(--mp-papier); }
@media (max-width: 767px) { .mp-footer { flex-direction: column; text-align: center; } }

/* ---------- Effekte für Elementor-Elemente (per globaler Klasse) ---------- */
.mp-zoom { overflow: hidden; }
.mp-zoom img, img.mp-zoom { transition: transform 1s var(--mp-ease); }
.mp-zoom:hover img, img.mp-zoom:hover { transform: scale(1.04); }

.mp-karte-hover { transition: transform .4s var(--mp-ease), box-shadow .4s var(--mp-ease); }
.mp-karte-hover:hover, .mp-karte-hover:focus-within {
	transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(59, 48, 41, .45);
}

/* Paket-Tabs (Elementor-Tabs mit Klasse mp-tab) */
.elementor .mp-tab.e--selected[aria-selected="true"] { background-color: var(--mp-tinte); border-color: var(--mp-tinte); color: var(--mp-papier); }

/* Listen in Paketkarten: ohne Aufzählungspunkte, mit feinen Trennlinien */
.mp-karte-hover ul { margin: 0; padding: 0; list-style: none; }
.mp-karte-hover li { padding: 6px 0; line-height: 1.6; }
.mp-karte-hover li + li { border-top: 1px solid rgba(59, 48, 41, .1); }

/* ---------- Flip-Cards (Paketkarten) ----------
   Aufbau in Elementor: .mp-flip > .mp-flip-innen > (.mp-flip-vorne + .mp-flip-hinten)
   Desktop: Umdrehen beim Überfahren. Touch & Tastatur: Button „Details ansehen“ (mp.js).
   Ohne JavaScript stehen Vorder- und Rückseite einfach untereinander. */
.mp-js .mp-flip { perspective: 1600px; }
.mp-js .elementor .mp-flip-innen,
.mp-js .mp-flip-innen {
	display: grid; height: 100%; transform-style: preserve-3d;
	transition: transform .8s var(--mp-ease);
}
.mp-js .mp-flip-vorne,
.mp-js .mp-flip-hinten {
	grid-area: 1 / 1; height: 100%; box-sizing: border-box;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mp-js .mp-flip-hinten { transform: rotateY(180deg); }
.mp-js .mp-flip.is-flipped .mp-flip-innen,
.mp-js .mp-flip:has(.mp-flip-hinten :focus-visible) .mp-flip-innen { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
	.mp-js .mp-flip:hover .mp-flip-innen { transform: rotateY(180deg); }
}
.mp-js .mp-flip-vorne, .mp-js .mp-flip-hinten { cursor: pointer; }
.mp-flip-btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding: 10px 2px;
	font: 500 11px/1 var(--mp-sans); letter-spacing: .22em; text-transform: uppercase;
	color: inherit; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer;
}
.mp-flip-btn::after { content: "\21BB"; font-size: 15px; letter-spacing: 0; transition: transform .4s var(--mp-ease); }
.mp-flip-btn:hover::after { transform: rotate(180deg); }
.mp-flip-btn--zurueck::after { content: "\21BA"; }
.mp-flip-btn:focus-visible { box-shadow: 0 0 0 2px currentColor; border-radius: 2px; }

/* Im Elementor-Editor: Vorder- und Rückseite stehen untereinander und sind beschriftet */
.elementor-editor-active .mp-flip-vorne,
.elementor-editor-active .mp-flip-hinten { position: relative; }
.elementor-editor-active .mp-flip-vorne::before,
.elementor-editor-active .mp-flip-hinten::before {
	position: absolute; top: 8px; left: 8px; z-index: 2; padding: 5px 8px;
	font: 500 10px/1 var(--mp-sans); letter-spacing: .12em; text-transform: uppercase;
	color: #fff; background: var(--mp-karamell); pointer-events: none;
}
.elementor-editor-active .mp-flip-vorne::before { content: "Vorderseite"; }
.elementor-editor-active .mp-flip-hinten::before { content: "Rückseite – erscheint beim Überfahren"; }

/* =========================================================================
   Cinematic Editorial – nur mit body.mp-neu, JavaScript und ohne „Bewegung reduzieren“.
   Die Scroll-Engine (mp.js) setzt auf .mp-cine / .mp-geschichte die Variable --p (0 → 1).
   Ohne diese Bedingungen gelten die statischen Stile.
   ========================================================================= */

/* Reportagen: Grundlayout und Typografie liegen als globale Elementor-Klassen (mp-geschichte-*, mp-pille)
   im Kit und sind im Editor bearbeitbar. Hier steht nur die Scroll-Bewegung. */

/* Verlauf unter dem Hero-Text – auch statisch, für Lesbarkeit */
.mp-neu .mp-cine-rahmen::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(32, 25, 21, .55), rgba(32, 25, 21, 0) 45%);
}

@media (prefers-reduced-motion: no-preference) {
	/* Modul 1: Cinematic Hero – das Bild schrumpft und gibt den nächsten Abschnitt frei */
	.mp-js .mp-neu .elementor .mp-cine { display: block; height: 210vh; padding: 0; }
	.mp-js .mp-neu .elementor .mp-cine-buehne {
		position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0;
	}
	.mp-js .mp-neu .elementor .mp-cine-rahmen {
		position: absolute; inset: 0; padding: 0; overflow: hidden; transform-origin: 50% 45%;
		transform: scale(calc(1 - var(--p, 0) * .24)); will-change: transform;
	}
	.mp-js .mp-neu .elementor .mp-cine-bild {
		width: 100%; height: 100%; min-height: 0;
		transform: scale(calc(1.14 - var(--p, 0) * .14)); will-change: transform;
	}
	/* Beim Laden kein Text: Ort und Zeile erscheinen erst beim Scrollen mittig, während das Bild schrumpft */
	.mp-js .mp-neu .elementor .mp-cine-text {
		top: 50%; bottom: auto;
		opacity: calc((var(--p, 0) - .12) * 4);
		transform: translateY(calc(-50% - var(--p, 0) * 40px));
	}
	/* Das Foto wird dabei leicht abgedunkelt, damit der Text gut lesbar ist */
	.mp-js .mp-neu .elementor .mp-cine-rahmen::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: rgba(32, 25, 21, .38); opacity: calc(var(--p, 0) * 1.8);
	}

	/* Modul 2: Reportage-Serie – zwei Fotos gleiten auseinander, kippen leicht und geben Titel & Palette frei */
	.mp-js .mp-neu .mp-geschichte { height: 240vh; --q: min(1, calc(var(--p, 0) * 1.6)); }
	.mp-js .mp-neu .mp-geschichte-buehne {
		position: sticky; top: 0; display: grid; grid-template-columns: 1fr; place-items: center;
		height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden;
	}
	.mp-js .mp-neu .mp-geschichte-text {
		grid-column: 1; order: 0;
		max-width: 30vw;
		opacity: calc(var(--q) * 1.6 - .4); transform: translateY(calc((1 - var(--q)) * 28px));
	}
	.mp-js .mp-neu .mp-geschichte-titel { font-size: clamp(36px, 4.2vw, 80px); }
	.mp-js .mp-neu .mp-geschichte-bild {
		position: absolute; top: 50%; left: 50%; z-index: 1;
		width: min(33vw, 560px); height: min(76vh, 820px); aspect-ratio: auto;
		box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); will-change: transform;
	}
	.mp-js .mp-neu .mp-geschichte-links {
		transform-origin: 100% 50%;
		transform: translate(calc(-100% - 6px - var(--q) * 32vw), -50%) rotate(calc(var(--q) * -4deg)) scale(calc(1 - var(--q) * .1));
	}
	.mp-js .mp-neu .mp-geschichte-rechts {
		transform-origin: 0 50%;
		transform: translate(calc(6px + var(--q) * 32vw), -50%) rotate(calc(var(--q) * 4deg)) scale(calc(1 - var(--q) * .1));
	}

	@media (max-width: 767px) {
		/* Auf dem Handy kürzere Scroll-Strecken, damit die Startseite nicht zu lang wird */
		.mp-js .mp-neu .elementor .mp-cine { height: 140vh; }
		.mp-js .mp-neu .mp-geschichte { height: 165vh; }
		.mp-js .mp-neu .mp-geschichte-text { max-width: 84vw; }
		.mp-js .mp-neu .mp-geschichte-bild { width: 64vw; height: 40vh; height: 40svh; }
		.mp-js .mp-neu .mp-geschichte-links {
			transform-origin: 50% 100%;
			transform: translate(-50%, calc(-100% - 6px - var(--q) * 22svh)) rotate(calc(var(--q) * -3deg)) scale(calc(1 - var(--q) * .08));
		}
		.mp-js .mp-neu .mp-geschichte-rechts {
			transform-origin: 50% 0;
			transform: translate(-50%, calc(6px + var(--q) * 22svh)) rotate(calc(var(--q) * 3deg)) scale(calc(1 - var(--q) * .08));
		}
	}
}

/* =========================================================================
   Reportage-Seite (single-mp_projekt.php)
   Titel bleibt stehen, das Titelbild gleitet darüber; Galerie als Kartenstapel
   (position: sticky), rechts eine mitlaufende Bildleiste, unten ein Karussell.
   ========================================================================= */
.mp-reise { padding: 0 var(--mp-rand) clamp(80px, 10vw, 140px); color: var(--mp-papier); background: var(--mp-tinte); }
.mp-reise__kopf { position: relative; max-width: 1320px; margin: 0 auto; padding-top: clamp(48px, 8vw, 96px); text-align: center; }
.mp-reise__buehne { position: relative; } /* begrenzt den stehenden Titel auf den Bereich des Titelbilds */
.mp-reise__titel {
	position: sticky; top: 22vh; z-index: 0; margin: 0 0 6vh;
	font-family: var(--mp-serif); font-weight: 400; font-size: clamp(52px, 10vw, 168px);
	line-height: .95; letter-spacing: -.02em; color: var(--mp-papier); text-wrap: balance;
}
.mp-reise__titelbild {
	position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 16 / 10;
	border-radius: 20px; box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .8);
}
.mp-reise__titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-reise__meta {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 64px 0 20px;
	font: 500 11px/1.4 var(--mp-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mp-sand);
}
.mp-reise__intro {
	max-width: 680px; margin: 0 auto;
	font-family: var(--mp-serif); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5; color: var(--mp-creme);
}

/* Galerie: Karten unterschiedlicher Größe, abwechselnd links / rechts / mittig, gestapelt */
.mp-reise__galerie {
	display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 48px; align-items: start;
	max-width: 1320px; margin: clamp(80px, 10vw, 140px) auto 0;
}
.mp-reise__bilder { margin: 0; padding: 0; list-style: none; }
.mp-reise__karte {
	position: sticky; top: 12vh; height: 76vh; margin: 0 0 22vh; overflow: hidden;
	border-radius: 18px; background: #2B231E; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75);
}
.mp-reise__karte:last-child { margin-bottom: 0; }
.mp-reise__karte:nth-child(3n+1) { top: 10vh; margin-right: auto; }
.mp-reise__karte:nth-child(3n+2) { top: 13vh; margin-left: auto; }
.mp-reise__karte:nth-child(3n)   { top: 16vh; margin-left: auto; margin-right: auto; }
.mp-reise__karte--quer { width: 92%; }
.mp-reise__karte--quer:nth-child(4n+3) { width: 78%; }
.mp-reise__karte--hoch { width: 48%; }
.mp-reise__karte--hoch:nth-child(4n+2) { width: 40%; }
.mp-reise__karte a, .mp-reise__karte img { display: block; width: 100%; height: 100%; }
.mp-reise__karte img { object-fit: cover; }
.mp-reise__karte a:focus-visible { box-shadow: inset 0 0 0 3px var(--mp-papier); }

/* Bildleiste rechts: läuft mit, aktuelles Bild hervorgehoben */
.mp-reise__index { position: sticky; top: 14vh; }
.mp-reise__index ol {
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-height: 72vh;
	margin: 0; padding: 4px; list-style: none; overflow-y: auto; scrollbar-width: none;
}
.mp-reise__index ol::-webkit-scrollbar { display: none; }
.mp-reise__index a {
	display: block; width: 52px; height: 66px; overflow: hidden; border-radius: 8px; opacity: .4;
	transition: opacity .3s var(--mp-ease), width .3s var(--mp-ease), height .3s var(--mp-ease);
}
.mp-reise__index img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-reise__index a:hover, .mp-reise__index a:focus-visible { opacity: .85; }
.mp-reise__index a[aria-current="true"] { width: 64px; height: 82px; opacity: 1; box-shadow: 0 0 0 2px var(--mp-papier); }

.mp-reise__zurueck { margin: clamp(64px, 8vw, 120px) 0 0; text-align: center; }
.mp-reise a.mp-reise__btn { color: var(--mp-papier); border-color: rgba(251, 248, 244, .45); }
.mp-reise a.mp-reise__btn:hover, .mp-reise a.mp-reise__btn:focus-visible { background: var(--mp-papier); color: var(--mp-tinte); }

/* Karten zoomen beim Erscheinen sanft aus dem Bild heraus */
@media (prefers-reduced-motion: no-preference) {
	.mp-js .mp-reise__karte img { transform: scale(1.08); transition: transform 1.4s var(--mp-ease); }
	.mp-js .mp-reise__karte.is-visible img { transform: none; }
}

@media (max-width: 900px) {
	.mp-reise__galerie { grid-template-columns: 1fr; }
	.mp-reise__index { display: none; }
	.mp-reise__karte, .mp-reise__karte:nth-child(n) { top: 9vh; margin-bottom: 14vh; }
	.mp-reise__karte--quer, .mp-reise__karte--quer:nth-child(n) { width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.mp-reise__karte--hoch, .mp-reise__karte--hoch:nth-child(n) { width: 80%; height: 62vh; height: 62svh; }
	.mp-reise__titelbild { aspect-ratio: 4 / 5; }
}

/* Weitere Geschichten – Karussell */
.mp-mehr {
	padding: clamp(72px, 9vw, 120px) 0 clamp(80px, 10vw, 140px);
	color: var(--mp-papier); background: var(--mp-tinte); border-top: 1px solid rgba(251, 248, 244, .08);
}
.mp-mehr__kopf { display: flex; justify-content: space-between; align-items: center; max-width: 1320px; margin: 0 auto 32px; padding: 0 var(--mp-rand); }
.mp-mehr .mp-eyebrow { color: var(--mp-sand); }
.mp-mehr__pfeile { display: flex; gap: 10px; }
.mp-mehr__pfeil {
	width: 48px; height: 48px; border: 1px solid rgba(251, 248, 244, .4); border-radius: 50%;
	font-size: 18px; color: var(--mp-papier); background: none; cursor: pointer; transition: background-color .25s, color .25s;
}
.mp-mehr__pfeil:hover, .mp-mehr__pfeil:focus-visible { color: var(--mp-tinte); background: var(--mp-papier); }
.mp-mehr__liste {
	display: flex; gap: 20px; margin: 0; padding: 0 var(--mp-rand) 8px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mp-rand);
	overscroll-behavior-x: contain; scrollbar-width: none;
}
.mp-mehr__liste::-webkit-scrollbar { display: none; }
.mp-mehr__karte { flex: 0 0 clamp(240px, 26vw, 360px); scroll-snap-align: start; }
.mp-mehr__karte a { display: flex; flex-direction: column; gap: 12px; color: var(--mp-papier); text-decoration: none; }
.mp-mehr__bild { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 16px; }
.mp-mehr__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mp-ease); }
.mp-mehr__karte a:hover img, .mp-mehr__karte a:focus-visible img { transform: scale(1.04); }
.mp-mehr__titel { font-family: var(--mp-serif); font-size: 26px; line-height: 1.2; }
@media (max-width: 767px) { .mp-mehr__karte { flex-basis: 72vw; } }

/* ---------- Google-Bewertungen ([mp_bewertungen]) ---------- */
.mp-bewertungen {
	--google-gelb: #FBBC04;
	max-width: 1320px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) 0;
}
.mp-bewertungen__kopf {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 40px;
	margin: 0 0 36px; padding: 0 var(--mp-rand);
}
.mp-bewertungen__kopf .mp-h2 { margin-top: 12px; }
.mp-bewertungen__google {
	display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 18px;
	color: var(--mp-tinte); text-decoration: none; background: #fff; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(59, 48, 41, .08), 0 12px 30px -18px rgba(59, 48, 41, .35);
	transition: transform .4s var(--mp-ease), box-shadow .4s var(--mp-ease);
}
.mp-bewertungen__google:hover, .mp-bewertungen__google:focus-visible { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(59, 48, 41, .08), 0 18px 36px -18px rgba(59, 48, 41, .45); }
.mp-bewertungen__google-text { display: flex; flex-direction: column; gap: 2px; font-family: Roboto, Arial, var(--mp-sans); }
.mp-bewertungen__google-name { font-size: 15px; font-weight: 500; }
.mp-bewertungen__schnitt { display: flex; align-items: center; gap: 8px; }
.mp-bewertungen__schnitt strong { font-size: 20px; font-weight: 500; }
.mp-bewertungen__anzahl { font-size: 12px; color: #70757A; }

.mp-sterne { display: inline-flex; gap: 1px; font-size: 17px; line-height: 1; color: var(--google-gelb, #FBBC04); letter-spacing: 0; }
.mp-sterne__leer { color: #DADCE0; }

.mp-bewertungen__pfeile { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 18px; padding: 0 var(--mp-rand); }
.mp-bewertungen__liste {
	display: flex; gap: 18px; margin: 0; padding: 6px var(--mp-rand) 20px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mp-rand);
	overscroll-behavior-x: contain; scrollbar-width: none;
}
.mp-bewertungen__liste::-webkit-scrollbar { display: none; }
.mp-bewertung { flex: 0 0 clamp(280px, 30vw, 380px); scroll-snap-align: start; }
.mp-bewertung article {
	display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px 24px 22px;
	background: #fff; border-radius: 18px; font-family: Roboto, Arial, var(--mp-sans); color: #202124;
	box-shadow: 0 1px 2px rgba(59, 48, 41, .06), 0 14px 32px -22px rgba(59, 48, 41, .4);
}
.mp-bewertung__kopf { display: flex; align-items: center; gap: 12px; }
.mp-bewertung__bild,
.mp-bewertungen img.mp-bewertung__bild { /* Elementor setzt .elementor img { border-radius: 0 } */
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
}
.mp-bewertung__initial { display: grid; place-items: center; font-size: 19px; font-weight: 500; color: #fff; }
.mp-bewertung__wer { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mp-bewertung__name { overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mp-bewertung__wann { font-size: 13px; color: #70757A; }
.mp-bewertung__kopf .mp-google-g { flex: 0 0 auto; align-self: flex-start; }
.mp-bewertung__sterne { display: flex; align-items: center; gap: 8px; margin: 0; }
.mp-bewertung__quelle { font-size: 12px; color: #70757A; }
.mp-bewertung__text { font-size: 15px; line-height: 1.6; color: #3C4043; }
.mp-bewertung__text p { margin: 0 0 .7em; }
.mp-bewertung__text p:last-child { margin-bottom: 0; }
/* Lange Texte wie bei Google gekürzt – „Mehr lesen“ klappt sie auf (mp.js) */
.mp-js .mp-bewertung__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.mp-js .mp-bewertung__text.is-offen { display: block; }
.mp-bewertung__mehr {
	align-self: flex-start; margin-top: auto; padding: 4px 0; font: 500 14px/1.4 Roboto, Arial, var(--mp-sans);
	color: #1A73E8; background: none; border: 0; cursor: pointer;
}
.mp-bewertung__mehr:hover { text-decoration: underline; }
.mp-bewertung__mehr[hidden] { display: none; }
.mp-bewertungen__fuss { margin: 28px 0 0; padding: 0 var(--mp-rand); text-align: center; }
@media (max-width: 767px) {
	.mp-bewertung { flex-basis: 84vw; }
	.mp-bewertungen__pfeile { display: none; }
}

/* ---------- Hochzeitspakete: Hinweise auf Inklusiv-Leistungen ---------- */
/* Elementor entfernt Klassen im Text – daher über die Struktur: <span> im Teaser, <strong> in der Liste */
.mp-inklusive,
body .elementor .mp-flip-vorne p > span {
	display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px;
	font: 500 10px/1.3 var(--mp-sans); letter-spacing: .18em; text-transform: uppercase;
	color: var(--mp-karamell-dunkel); background: rgba(185, 139, 99, .12); border: 1px solid rgba(185, 139, 99, .35);
}
body .elementor .mp-flip-hinten p strong { font-weight: 500; color: var(--mp-sand); }
body .elementor .mp-flip-hinten p strong::before { content: "✦ "; color: var(--mp-karamell); }
/* Ganztagespaket: hochwertiger Rahmen in Karamell, ohne aus der Linie zu fallen */
body .elementor [data-id="649a6fac"].mp-flip-vorne {
	box-shadow: inset 0 0 0 1px rgba(185, 139, 99, .55), inset 0 0 0 7px var(--mp-papier), inset 0 0 0 8px rgba(185, 139, 99, .3), 0 30px 60px -40px rgba(59, 48, 41, .45);
	background-image: radial-gradient(120% 70% at 50% 0%, rgba(216, 192, 168, .28), rgba(216, 192, 168, 0) 60%);
}

/* ---------- Das gewisse Extra. ([mp_extras]) ---------- */
.mp-extras { max-width: 1240px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--mp-rand) clamp(56px, 7vw, 96px); }
.mp-extras__kopf { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 620px; margin: 0 auto 36px; text-align: center; }
.mp-extras__kopf .mp-h2, .mp-extras__kopf .mp-text { margin: 0; }
.mp-extras__gruppe {
	display: flex; align-items: center; gap: 18px; margin: 56px 0 24px;
	font: 500 12px/1 var(--mp-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mp-karamell-dunkel);
}
.mp-extras__gruppe::after { content: ""; flex: 1; height: 1px; background: rgba(185, 139, 99, .35); }

/* Paket wählen */
.mp-paketwahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.mp-paketwahl[hidden] { display: none; }
.mp-paketwahl__label { margin-right: 6px; font-size: 14px; color: var(--mp-gedaempft); }
.mp-paketwahl__btn {
	min-height: 46px; padding: 0 20px; font: 500 12px/1 var(--mp-sans); letter-spacing: .16em; text-transform: uppercase;
	color: var(--mp-tinte); background: transparent; border: 1px solid var(--mp-sand); border-radius: 999px; cursor: pointer;
}
.mp-paketwahl__preis { margin-left: 6px; font-weight: 300; letter-spacing: .04em; text-transform: none; opacity: .75; }

/* Karten */
.mp-extras__liste { display: grid; gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.mp-extras__liste--digital { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-extras__liste--produkte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	.mp-extras__liste--digital { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-extras__liste--produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mp-extras__liste--digital, .mp-extras__liste--produkte { grid-template-columns: 1fr; }
}
.mp-extra {
	position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px;
	background: var(--mp-papier); border-radius: 18px; box-shadow: 0 1px 2px rgba(59, 48, 41, .06), 0 18px 40px -30px rgba(59, 48, 41, .45);
	transition: transform .5s var(--mp-ease), box-shadow .5s var(--mp-ease);
}
.mp-extra:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(59, 48, 41, .06), 0 26px 50px -30px rgba(59, 48, 41, .55); }
.mp-extra.is-gewaehlt { box-shadow: inset 0 0 0 1.5px var(--mp-karamell), 0 22px 46px -30px rgba(59, 48, 41, .5); }
.mp-extra.is-inklusive { opacity: .72; }
.mp-extra--produkt { padding-top: 14px; }
.mp-extra__icon { width: 38px; height: 38px; color: var(--mp-karamell); }
.mp-extra__bild { overflow: hidden; margin: 0 -10px; border-radius: 12px; background: linear-gradient(160deg, #F3ECE3, #E9DFD2); aspect-ratio: 4 / 3; }
.mp-extra__bild svg { display: block; width: 100%; height: 100%; transition: transform 1s var(--mp-ease); }
.mp-extra:hover .mp-extra__bild svg { transform: scale(1.04); }
.mp-extra__text { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.mp-extra__titel { margin: 0; font: 400 24px/1.15 var(--mp-serif); color: var(--mp-tinte); }
.mp-extra__preis { margin: 0; font: 500 13px/1 var(--mp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mp-karamell-dunkel); }
.mp-extra__beschreibung { margin: 0; font-size: 15px; line-height: 1.7; color: var(--mp-gedaempft); }
.mp-extra__hinweis { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--mp-karamell-dunkel); }
.mp-extra__aktion { display: none; }
.mp-js .mp-extra__aktion { display: flex; }
.mp-extra__wahl { width: 100%; justify-content: center; text-align: center; }
.mp-extra__wahl:disabled { cursor: default; opacity: .7; }
.mp-extra__menge { display: inline-flex; align-items: center; gap: 14px; }
.mp-extra__menge button {
	width: 44px; height: 44px; font: 300 22px/1 var(--mp-sans); color: var(--mp-tinte);
	background: transparent; border: 1px solid var(--mp-sand); border-radius: 50%; cursor: pointer;
}
.mp-extra__anzahl { min-width: 2ch; font: 400 26px/1 var(--mp-serif); text-align: center; color: var(--mp-tinte); }
.mp-extras__fussnote { margin: 28px 0 0; font-size: 13px; text-align: center; color: var(--mp-gedaempft); }

/* Eure Auswahl – schwebt am unteren Rand des Bereichs mit */
.mp-auswahl {
	position: sticky; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 760px; margin: 32px auto 0; padding: 14px 16px 14px 26px;
	color: var(--mp-papier); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
	background: rgba(59, 48, 41, .86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 20px 44px -18px rgba(0, 0, 0, .55);
}
.mp-auswahl[hidden] { display: none; }
.mp-auswahl__text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.mp-auswahl__zeile { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--mp-sand); }
.mp-auswahl__summe { font: 400 26px/1 var(--mp-serif); }
.mp-auswahl__leeren { padding: 8px 4px; font: 500 11px/1 var(--mp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mp-sand); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
@media (max-width: 600px) {
	/* rechts Platz lassen für die schwebenden Knöpfe (nach oben, WhatsApp) */
	.mp-auswahl { margin-right: 66px; border-radius: 22px; padding: 14px 16px; }
	.mp-auswahl__text { flex-basis: 100%; padding-right: 128px; }
	.mp-auswahl__summe { font-size: 22px; white-space: nowrap; }
	.mp-auswahl__leeren { position: absolute; top: 16px; right: 16px; }
	.mp-auswahl__anfragen { width: 100%; padding: 14px 12px; text-align: center; letter-spacing: .12em; }
	.mp-paketwahl__label { width: 100%; margin: 0; text-align: center; }
}

/* ---------- Schwebende Knöpfe unten rechts: nach oben + WhatsApp ---------- */
.mp-schwebend {
	position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90;
	display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
}
.mp-schwebend__knopf {
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
	text-decoration: none; pointer-events: auto;
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s var(--mp-ease), visibility 0s;
}
.mp-schwebend__knopf:hover, .mp-schwebend__knopf:focus-visible { transform: translateY(-2px) scale(1.06); }
.mp-schwebend__knopf:active { transform: scale(.94); transition-duration: .12s; }
.mp-schwebend__knopf:focus-visible { outline: 2px solid var(--mp-tinte); outline-offset: 3px; box-shadow: none; border-radius: 50%; }

/* Nach oben: Liquid Glass wie die übrigen Buttons */
.mp-nach-oben {
	width: 44px; height: 44px; color: var(--mp-tinte);
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 60%),
		rgba(251, 248, 244, .55);
	border: 1px solid rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(59, 48, 41, .12), 0 10px 24px -10px rgba(59, 48, 41, .45);
}
/* Erst sichtbar, wenn man ein Stück gescrollt hat (mp.js) */
.mp-js .mp-nach-oben { opacity: 0; visibility: hidden; transform: translateY(10px); transition-delay: 0s, 0s, .3s; }
.mp-js .mp-nach-oben.is-sichtbar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mp-js .mp-nach-oben.is-sichtbar:hover, .mp-js .mp-nach-oben.is-sichtbar:focus-visible { transform: translateY(-2px) scale(1.06); }

/* WhatsApp: bekanntes Grün mit Glasglanz */
.mp-whatsapp {
	color: #fff;
	background:
		radial-gradient(120% 120% at 35% 15%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%),
		linear-gradient(160deg, #2EE07A, #1EBE5A);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(0, 80, 30, .25), 0 12px 26px -10px rgba(18, 140, 70, .6);
}
.mp-whatsapp:hover, .mp-whatsapp:focus-visible { color: #fff; }
@media (max-width: 767px) {
	.mp-schwebend__knopf { width: 50px; height: 50px; }
	.mp-nach-oben { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.mp-schwebend__knopf, .mp-js .mp-nach-oben.is-sichtbar { transform: none !important; }
}

/* =========================================================================
   Liquid-Glass-Buttons – nur mit body.mp-liquid (Schalter MP_LIQUID_BUTTONS in functions.php).
   Rund, durchscheinend, mit Lichtkante und einem Glanzpunkt, der dem Zeiger folgt (mp.js setzt --mx/--my).
   Glas-Ton je nach Untergrund: hell auf Creme, zart auf dunklem Grund, dunkel für aktive/primäre Buttons.
   ========================================================================= */
body.mp-liquid {
	--glas-farbe: 255, 255, 255;          /* Grundton des Glases als RGB */
	--glas-deckung: .45;
	--glas-glanz: .55;
	--glas-text: var(--mp-tinte);
	--glas-kante: rgba(255, 255, 255, .9);
	--glas-linie: rgba(59, 48, 41, .12);  /* feine Außenlinie, damit helles Glas auf Creme sichtbar bleibt */
	--glas-schatten: rgba(59, 48, 41, .30);
}
/* Dunkler Untergrund: Glas hellt nur leicht auf, Schrift hell */
body.mp-liquid :is(.mp-flip-hinten, [data-id="739d07b8"], .mp-reise, .mp-mehr, .mp-lightbox, .mp-footer, .mp-auswahl) {
	--glas-deckung: .1;
	--glas-glanz: .22;
	--glas-text: var(--mp-papier);
	--glas-kante: rgba(255, 255, 255, .42);
	--glas-linie: rgba(0, 0, 0, .18);
	--glas-schatten: rgba(0, 0, 0, .5);
}
/* Aktive bzw. wichtigste Buttons: dunkles Glas */
body.mp-liquid :is(.wpcf7 input[type="submit"], .mp-filter__btn[aria-pressed="true"], .mp-tab.e--selected, .mp-extra__wahl[aria-pressed="true"], .mp-paketwahl__btn[aria-pressed="true"]) {
	--glas-farbe: 59, 48, 41;
	--glas-deckung: .8;
	--glas-glanz: .3;
	--glas-text: var(--mp-papier);
	--glas-kante: rgba(255, 255, 255, .38);
}

body.mp-liquid :is(a.mp-btn, button.mp-btn, a.mp-pille, .mp-paketwahl__btn, .mp-extra__menge button, .mp-filter__btn, .mp-tab, .mp-nav__toggle, .mp-mehr__pfeil, .mp-lightbox button, .mp-flip-btn, .wpcf7 input[type="submit"]) {
	--mx: 50%;
	--my: 0%;
	border: 1px solid var(--glas-kante);
	border-radius: 999px;
	color: var(--glas-text);
	background:
		radial-gradient(120% 160% at var(--mx) var(--my), rgba(255, 255, 255, var(--glas-glanz)), rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, rgba(var(--glas-farbe), calc(var(--glas-deckung) + .15)), rgba(var(--glas-farbe), var(--glas-deckung)));
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .85),
		inset 0 -1px 2px rgba(59, 48, 41, .14),
		0 0 0 1px var(--glas-linie),
		0 10px 26px -12px var(--glas-schatten),
		0 2px 6px -3px var(--glas-schatten);
	text-decoration: none;
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s var(--mp-ease), color .3s var(--mp-ease);
}
body.mp-liquid :is(a.mp-btn, button.mp-btn, a.mp-pille, .mp-paketwahl__btn, .mp-extra__menge button, .mp-filter__btn, .mp-tab, .mp-nav__toggle, .mp-mehr__pfeil, .mp-lightbox button, .mp-flip-btn, .wpcf7 input[type="submit"]):is(:hover, :focus-visible) {
	--glas-glanz: .8;
	color: var(--glas-text);
	transform: translateY(-1px) scale(1.035);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .95),
		inset 0 -1px 2px rgba(59, 48, 41, .14),
		0 0 0 1px var(--glas-linie),
		0 16px 34px -14px var(--glas-schatten),
		0 3px 8px -3px var(--glas-schatten);
}
/* Kurzes „Eindrücken“ beim Klicken – das Glas federt zurück */
body.mp-liquid :is(a.mp-btn, button.mp-btn, a.mp-pille, .mp-paketwahl__btn, .mp-extra__menge button, .mp-filter__btn, .mp-tab, .mp-nav__toggle, .mp-mehr__pfeil, .mp-lightbox button, .mp-flip-btn, .wpcf7 input[type="submit"]):active {
	transform: scale(.96);
	transition-duration: .12s;
}
/* Tastatur-Fokus bleibt deutlich sichtbar */
body.mp-liquid :is(a.mp-btn, button.mp-btn, a.mp-pille, .mp-paketwahl__btn, .mp-extra__menge button, .mp-filter__btn, .mp-tab, .mp-nav__toggle, .mp-mehr__pfeil, .mp-lightbox button, .mp-flip-btn, .wpcf7 input[type="submit"]):focus-visible {
	outline: 2px solid var(--glas-text);
	outline-offset: 3px;
}
/* Kleine Anpassungen einzelner Buttons an die Pillenform */
body.mp-liquid .mp-nav__toggle { padding: 0 18px; }
body.mp-liquid .mp-flip-btn { padding: 10px 18px; }
body.mp-liquid .mp-filter__btn[aria-pressed="true"] { border-color: var(--glas-kante); }

/* Ohne Unschärfe-Effekt (ältere Browser): Glas etwas deckender, damit Schrift lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.mp-liquid { --glas-deckung: .8; }
	body.mp-liquid :is(.mp-flip-hinten, [data-id="739d07b8"], .mp-reise, .mp-mehr, .mp-lightbox, .mp-footer, .mp-auswahl) { --glas-deckung: .22; }
}
@media (prefers-reduced-motion: reduce) {
	body.mp-liquid :is(a.mp-btn, button.mp-btn, a.mp-pille, .mp-paketwahl__btn, .mp-extra__menge button, .mp-filter__btn, .mp-tab, .mp-nav__toggle, .mp-mehr__pfeil, .mp-lightbox button, .mp-flip-btn, .wpcf7 input[type="submit"]):is(:hover, :focus-visible, :active) { transform: none; }
}

/* Einblenden beim Scrollen – nur mit JavaScript und ohne „Bewegung reduzieren“ */
.mp-js .mp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--mp-ease), transform .9s var(--mp-ease); }
.mp-js .mp-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.mp-js .mp-reveal { opacity: 1; transform: none; }
}