/**
 * Mamuschka — Komponenten
 * Kopfzeile, Hero, Kacheln, Speisekarte, Formulare, Fußzeile, Mobilleiste.
 */

/* ============ Kopfzeile ============ */

.mam-kopf {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background-color 0.4s var(--kurve), box-shadow 0.4s var(--kurve), padding 0.4s var(--kurve);
	padding-block: 1.15rem;
}

/* Über dem Hero transparent, beim Scrollen kompakt mit Glaseffekt. */
.mam-kopf.ist-kompakt {
	background: rgba(16, 40, 56, 0.9);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 rgba(201, 169, 106, 0.18);
	padding-block: 0.6rem;
}

/* Auf Unterseiten ohne Hero ist der Kopf von Anfang an gefüllt. */
.mam-kopf--fest {
	background: var(--navy);
	position: sticky;
}

.mam-kopf__bahn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.mam-marke {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	flex: none;
}

.mam-marke img {
	height: clamp(2.5rem, 5vw, 3.5rem);
	width: auto;
	transition: height 0.4s var(--kurve);
}

.ist-kompakt .mam-marke img {
	height: 2.25rem;
}

.mam-nav {
	display: none;
}

@media (min-width: 1060px) {
	.mam-nav {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 2vw, 2rem);
	}
}

.mam-nav a {
	color: var(--creme);
	text-decoration: none;
	font-size: var(--t-klein);
	font-weight: 400;
	letter-spacing: 0.03em;
	position: relative;
	padding-block: 0.35rem;
	white-space: nowrap;
}

.mam-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--gold-hell);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--kurve);
}

.mam-nav a:hover::after,
.mam-nav .ist-aktiv::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mam-nav .ist-aktiv {
	color: var(--gold-hell);
}

.mam-kopf__aktionen {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: none;
}

/* Telefonnummer im Kopf — laut Vorgabe immer sichtbar ab Tablet. */
.mam-kopf__tel {
	display: none;
	color: var(--gold-hell);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--t-klein);
	white-space: nowrap;
}

@media (min-width: 700px) {
	.mam-kopf__tel {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}
}

.mam-kopf .mam-btn {
	display: none;
}

@media (min-width: 700px) {
	.mam-kopf .mam-btn {
		display: inline-flex;
	}
}

/* Menüknopf */
.mam-menue-knopf {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: none;
	border: 1px solid rgba(201, 169, 106, 0.4);
	border-radius: var(--radius);
	cursor: pointer;
}

@media (min-width: 1060px) {
	.mam-menue-knopf {
		display: none;
	}
}

.mam-menue-knopf span {
	display: block;
	width: 1.15rem;
	height: 1.5px;
	margin-inline: auto;
	background: var(--gold-hell);
	transition: transform 0.35s var(--kurve), opacity 0.2s ease;
}

.mam-menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mam-menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mam-menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Ausgeklapptes Menü */
.mam-menue {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--navy);
	padding: 6rem var(--rand) 2rem;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--kurve), visibility 0.35s;
}

.mam-menue.ist-offen {
	opacity: 1;
	visibility: visible;
}

.mam-menue ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--breite-eng);
}

.mam-menue li + li {
	border-top: 1px solid rgba(201, 169, 106, 0.16);
}

.mam-menue a {
	display: block;
	padding: 1rem 0;
	color: var(--creme);
	text-decoration: none;
	font-family: var(--serif);
	font-size: 1.6rem;
	min-height: 48px;
}

.mam-menue a:hover {
	color: var(--gold-hell);
}

/* ============ Hero ============ */

.mam-hero {
	position: relative;
	min-height: min(94svh, 900px);
	display: flex;
	align-items: flex-end;
	color: var(--creme);
	overflow: hidden;
	isolation: isolate;
}

.mam-hero__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mam-hero__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zwei Verläufe: unten für die Textlesbarkeit, oben für die Navigation. */
.mam-hero__schleier {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(10, 27, 38, 0.95) 0%, rgba(10, 27, 38, 0.86) 38%, rgba(10, 27, 38, 0.5) 68%, rgba(10, 27, 38, 0.62) 100%);
}

/* Auf schmalen Geräten steht der Text höher im Bild und braucht mehr Deckung,
   sonst verschwindet der Öffnungsstatus auf hellen Bildstellen. */
@media (max-width: 699px) {
	.mam-hero__schleier {
		background:
			linear-gradient(to top, rgba(10, 27, 38, 0.96) 0%, rgba(10, 27, 38, 0.9) 55%, rgba(10, 27, 38, 0.72) 100%);
	}
}

.mam-hero__inhalt {
	padding-block: clamp(3rem, 10vh, 7rem);
	width: 100%;
}

/* Der Textblock begrenzt sich innen — die Bahn behält ihre volle Breite,
   sonst zentriert max-width den Block statt ihn links zu setzen. */
.mam-hero__text {
	max-width: 40ch;
}

/* Die Headline darf breiter brechen als der Fließtext darunter —
   sonst zerfällt der kurze Claim in vier Zeilen. */
.mam-hero h1 {
	font-size: var(--t-hero);
	color: var(--creme);
	margin-bottom: 1.25rem;
	font-weight: 500;
	max-width: 15ch;
}

/* Wort-für-Wort-Reveal des Claims */
@media (prefers-reduced-motion: no-preference) {
	.mam-hero h1 .wort {
		display: inline-block;
		opacity: 0;
		transform: translateY(0.5em);
		animation: wort-auf 0.8s var(--kurve) forwards;
		animation-delay: calc(var(--i) * 0.085s + 0.15s);
	}
}

@keyframes wort-auf {
	to {
		opacity: 1;
		transform: none;
	}
}

.mam-hero__lead {
	font-size: var(--t-lead);
	color: rgba(250, 246, 240, 0.88);
	margin-bottom: 2rem;
	max-width: 46ch;
}

.mam-hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* Öffnungsstatus als Live-Signal */
.mam-status {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-hell);
	margin-bottom: 1.25rem;
}

.mam-status__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6fbf73;
	box-shadow: 0 0 0 4px rgba(111, 191, 115, 0.2);
	flex: none;
}

.mam-status--zu .mam-status__punkt {
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(160, 128, 56, 0.2);
}

/* ============ Kacheln (Bereiche) ============ */

.mam-kacheln {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.mam-kacheln {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.mam-kacheln {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mam-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 20rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--creme);
	text-decoration: none;
	overflow: hidden;
	border-radius: var(--radius-karte);
	isolation: isolate;
	background: var(--navy);
}

.mam-kachel__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mam-kachel__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--kurve);
}

.mam-kachel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 27, 38, 0.92) 12%, rgba(10, 27, 38, 0.45) 55%, rgba(10, 27, 38, 0.2) 100%);
	transition: background 0.5s ease;
}

.mam-kachel:hover .mam-kachel__bild img {
	transform: scale(1.06);
}

.mam-kachel:hover::before {
	background: linear-gradient(to top, rgba(10, 27, 38, 0.95) 12%, rgba(10, 27, 38, 0.6) 60%, rgba(10, 27, 38, 0.3) 100%);
}

.mam-kachel h3 {
	font-size: clamp(1.5rem, 2vw, 2rem);
	color: var(--creme);
	margin-bottom: 0.35rem;
}

.mam-kachel p {
	font-size: var(--t-klein);
	color: rgba(250, 246, 240, 0.8);
	margin: 0 0 1rem;
}

.mam-kachel__mehr {
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-hell);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mam-kachel__mehr::after {
	content: "→";
	transition: transform 0.4s var(--kurve);
}

.mam-kachel:hover .mam-kachel__mehr::after {
	transform: translateX(5px);
}

/* ============ Signature-Gerichte ============ */

.mam-gerichte {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.mam-gerichte {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.mam-gerichte {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mam-gericht {
	background: var(--creme);
	border-radius: var(--radius-karte);
	overflow: hidden;
	box-shadow: var(--schatten);
	transition: transform 0.5s var(--kurve), box-shadow 0.5s var(--kurve);
}

.mam-gericht:hover {
	transform: translateY(-5px);
	box-shadow: var(--schatten-hoch);
}

.mam-gericht__bild {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mam-gericht__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--kurve);
}

.mam-gericht:hover .mam-gericht__bild img {
	transform: scale(1.07);
}

.mam-gericht__text {
	padding: 1.35rem 1.5rem 1.6rem;
}

.mam-gericht h3 {
	font-size: 1.5rem;
	margin-bottom: 0.35rem;
}

.mam-gericht p {
	font-size: var(--t-klein);
	color: var(--text-leise);
	margin: 0;
}

/* ============ Kennzahlen ============ */

.mam-zahlen {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

@media (min-width: 860px) {
	.mam-zahlen {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mam-zahl__wert {
	font-family: var(--serif);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gold-hell);
	display: block;
	font-variant-numeric: tabular-nums;
}

.mam-zahl__text {
	font-size: var(--t-klein);
	letter-spacing: 0.05em;
	color: rgba(250, 246, 240, 0.78);
	margin-top: 0.6rem;
	display: block;
}

/* ============ Speisekarte ============ */

.mam-karte__gruppe + .mam-karte__gruppe {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.mam-karte__kopf {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.mam-karte__kopf h2 {
	margin: 0;
	white-space: nowrap;
}

.mam-karte__kopf::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--linie);
}

.mam-karte__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mam-gang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.35rem 1.25rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--linie);
	align-items: baseline;
}

.mam-gang:last-child {
	border-bottom: 0;
}

.mam-gang__name {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.mam-gang__nr {
	font-family: var(--sans);
	font-size: var(--t-mini);
	font-weight: 700;
	color: var(--gold-tief);
	flex: none;
}

.mam-gang__zusatz {
	grid-column: 1 / -1;
	font-size: var(--t-klein);
	color: var(--text-leise);
	margin: 0;
	max-width: 62ch;
}

.mam-gang__preis {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.mam-gang__preis span {
	display: block;
	font-family: var(--sans);
	font-size: var(--t-mini);
	font-weight: 400;
	color: var(--text-leise);
	/* Der Zusatz unter dem Preis darf umbrechen — sonst schiebt ein langer
	   Text wie „pro verschmutzter Einheit“ die Seite mobil über den Rand. */
	white-space: normal;
	max-width: 14ch;
	margin-left: auto;
}

.mam-gang__preise {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: right;
}

/* Kennzeichnung vegan / vegetarisch */
.mam-kennz {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 2px;
	background: rgba(93, 122, 74, 0.14);
	color: #3f5a31;
	flex: none;
	white-space: nowrap;
}

.mam-allergene {
	font-size: var(--t-mini);
	color: var(--text-leise);
	letter-spacing: 0.04em;
}

/* ============ Öffnungszeiten ============ */

.mam-zeiten {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mam-zeiten li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--linie-dunkel);
	font-size: var(--t-klein);
}

.mam-zeiten li:last-child {
	border-bottom: 0;
}

.mam-zeiten .ist-heute {
	color: var(--gold-hell);
	font-weight: 700;
}

.mam-zeiten__tag {
	color: inherit;
}

.mam-zeiten__ruhe {
	opacity: 0.6;
}

/* ============ Formulare ============ */

.mam-formular {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.mam-formular {
		grid-template-columns: repeat(2, 1fr);
	}

	.mam-feld--breit {
		grid-column: 1 / -1;
	}
}

.mam-feld {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.mam-feld label {
	font-size: var(--t-klein);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mam-feld input,
.mam-feld select,
.mam-feld textarea {
	font-family: var(--sans);
	font-size: 1rem;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	background: #fff;
	color: var(--text);
	border: 1px solid rgba(16, 40, 56, 0.22);
	border-radius: var(--radius);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mam-feld textarea {
	min-height: 8rem;
	resize: vertical;
}

.mam-feld input:focus,
.mam-feld select:focus,
.mam-feld textarea:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(160, 128, 56, 0.16);
	outline: none;
}

.mam-feld__hinweis {
	font-size: var(--t-mini);
	color: var(--text-leise);
}

/* Honigtopf gegen Spam — für Menschen unsichtbar, ohne Captcha-Hürde. */
.mam-honig {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

.mam-formular__fuss {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	justify-content: space-between;
}

.mam-meldung {
	grid-column: 1 / -1;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	font-size: var(--t-klein);
	border-left: 3px solid var(--gold);
	background: var(--creme-warm);
}

.mam-meldung--fehler {
	border-left-color: #a33;
	background: rgba(170, 51, 51, 0.08);
}

/* ============ FAQ ============ */

.mam-faq {
	max-width: var(--breite-eng);
}

.mam-faq__punkt {
	border-bottom: 1px solid var(--linie);
}

.mam-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 1.25rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
}

.mam-faq__zeichen {
	position: relative;
	width: 1rem;
	height: 1rem;
	flex: none;
}

.mam-faq__zeichen::before,
.mam-faq__zeichen::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--gold-tief);
	transition: transform 0.35s var(--kurve);
}

.mam-faq__zeichen::after {
	transform: rotate(90deg);
}

.mam-faq__frage[aria-expanded="true"] .mam-faq__zeichen::after {
	transform: rotate(0);
}

.mam-faq__antwort {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--kurve);
}

.mam-faq__antwort > div {
	overflow: hidden;
}

.mam-faq__punkt.ist-offen .mam-faq__antwort {
	grid-template-rows: 1fr;
}

.mam-faq__antwort p {
	padding-bottom: 1.25rem;
	margin: 0;
	color: var(--text-leise);
	max-width: 64ch;
}

/* ============ Fußzeile ============ */

.mam-fuss {
	background: var(--navy-tief);
	color: rgba(250, 246, 240, 0.78);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	font-size: var(--t-klein);
}

.mam-fuss__raster {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.mam-fuss__raster {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.mam-fuss__raster {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	}
}

.mam-fuss h3 {
	font-family: var(--sans);
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-hell);
	margin-bottom: 1.15rem;
}

.mam-fuss ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mam-fuss li {
	margin-bottom: 0.6rem;
}

.mam-fuss a {
	color: inherit;
	text-decoration: none;
}

.mam-fuss a:hover {
	color: var(--gold-hell);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.mam-fuss__unten {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(201, 169, 106, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	font-size: var(--t-mini);
}

/* ============ Mobilleiste ============ */

.mam-mobil {
	position: fixed;
	inset: auto 0 0;
	z-index: 95;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: rgba(16, 40, 56, 0.97);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid rgba(201, 169, 106, 0.22);
	padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 700px) {
	.mam-mobil {
		display: none;
	}
}

.mam-mobil a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 3.75rem;
	color: var(--creme);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mam-mobil a + a {
	border-left: 1px solid rgba(201, 169, 106, 0.16);
}

.mam-mobil .ist-primaer {
	background: var(--gold-hell);
	color: var(--navy);
}

.mam-mobil svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

/* Platz für die Leiste, damit sie nichts verdeckt. */
@media (max-width: 699px) {
	body {
		padding-bottom: 3.75rem;
	}
}

/* ============ Galerie / Lightbox ============ */

.mam-galerie {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 800px) {
	.mam-galerie {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mam-galerie button {
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 1;
}

.mam-galerie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--kurve);
}

.mam-galerie button:hover img {
	transform: scale(1.06);
}

/* Ohne [open] bleibt der Dialog unsichtbar — display:grid würde die
   Browser-Vorgabe display:none sonst aushebeln. */
.mam-leuchtkasten:not([open]) {
	display: none;
}

.mam-leuchtkasten[open] {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(10, 27, 38, 0.95);
	border: 0;
}

.mam-leuchtkasten::backdrop {
	background: rgba(10, 27, 38, 0.9);
}

.mam-leuchtkasten img {
	max-width: 100%;
	max-height: 85vh;
	object-fit: contain;
}

.mam-leuchtkasten__zu {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	background: none;
	border: 1px solid rgba(201, 169, 106, 0.4);
	border-radius: var(--radius);
	color: var(--gold-hell);
	font-size: 1.5rem;
	cursor: pointer;
}

/* ============ Ornamentmuster als Flächenhintergrund ============ */

.mam-muster {
	position: relative;
	isolation: isolate;
}

.mam-muster::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--muster-bild);
	background-size: 620px auto;
	opacity: 0.05;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.mam-sektion--dunkel.mam-muster::before {
	opacity: 0.06;
	mix-blend-mode: screen;
}

/* ============ Fließtextseiten (Impressum, Datenschutz, Aktuelles) ============ */

.mam-inhalt {
	max-width: 68ch;
}

.mam-inhalt h2 {
	font-size: var(--t-h3);
	margin-top: 2.5rem;
}

.mam-inhalt h2:first-child {
	margin-top: 0;
}

.mam-inhalt ul {
	padding-left: 1.25rem;
	margin-bottom: 1.15em;
}

.mam-inhalt li {
	margin-bottom: 0.4rem;
}

/* Noch zu liefernde Angaben in Rechtstexten sichtbar machen — sie dürfen
   nicht versehentlich live gehen. */
.mam-inhalt p:has(+ p) {
	margin-bottom: 1.15em;
}