/**
 * 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;
}

/* Die Kopfzeile bekommt bewusst NICHT die Breite des Inhaltsrasters.
   `.mam-bahn` deckelt bei 1240px; abzüglich Rand blieben 1112px Innenraum —
   bei jeder Bildschirmbreite, auch auf einem 27-Zoll-Monitor. Logo, acht
   Navigationspunkte, Telefonnummer und Reservierungsknopf brauchen aber rund
   1400px. Die Zeile lief deshalb immer über, und bis etwa 1600px stand der
   Knopf rechts aus dem Fenster heraus. Hier zählt die tatsächliche
   Fensterbreite, der Rand bleibt derselbe wie im Inhalt. */
.mam-kopf__bahn {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2rem);
}

.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;
}

/* Acht Punkte in der Leiste. Der Umschaltpunkt ist nachgemessen und nicht
   geschätzt: unter 1280px passen sie mit Logo und Knopf nicht mehr nebeneinander,
   darunter übernimmt das Menü hinter dem Burger. */
@media (min-width: 1280px) {
	.mam-nav {
		display: flex;
		align-items: center;
		gap: clamp(0.85rem, 1.4vw, 1.5rem);
		min-width: 0;
	}
}

.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;
	}
}

/* Im Bereich, in dem die volle Navigation steht, aber noch nicht viel Platz
   ist, weicht die Telefonnummer. Sie ist dort nicht verloren: sie steht in der
   Fußzeile, im ausgeklappten Menü und auf dem Handy in der festen Leiste.
   Lieber die Nummer weg als acht Navigationspunkte hinter einem Burger. */
@media (min-width: 1280px) and (max-width: 1479px) {
	.mam-kopf__tel {
		display: none;
	}
}

.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;
}

/* Gleicher Umschaltpunkt wie .mam-nav — sonst stünden beide gleichzeitig da. */
@media (min-width: 1280px) {
	.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;
}

/* ============ Gästestimmen ============ */

/* Spalten statt Raster: die Bewertungen sind unterschiedlich lang, ein Raster
   würde jede Zeile auf die längste Karte aufziehen. */
.mam-stimmen {
	columns: 1;
	column-gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 720px) {
	.mam-stimmen {
		columns: 2;
	}
}

@media (min-width: 1040px) {
	.mam-stimmen {
		columns: 3;
	}
}

.mam-stimme {
	break-inside: avoid;
	background: var(--creme);
	border-radius: var(--radius-karte);
	border-top: 3px solid var(--gold);
	box-shadow: var(--schatten);
	padding: clamp(1.35rem, 2.5vw, 1.85rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.mam-stimme blockquote {
	margin: 0;
	font-size: var(--t-klein);
	line-height: 1.7;
	color: var(--text);
}

.mam-stimme figcaption {
	margin-top: 1rem;
	font-size: var(--t-mini);
	color: var(--text-leise);
}

.mam-stimme figcaption strong {
	display: block;
	font-family: var(--serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--navy);
}

/* Sterne. Gold auf Creme ist als Fläche zulässig — der Wert steht zusätzlich
   im aria-label, damit er nicht allein an der Farbe hängt. */
.mam-sterne {
	display: block;
	color: var(--gold);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	margin-bottom: 0.6rem;
}

/* Teilweise gefüllte Sternreihe für den Schnitt. Der Anteil kommt als
   --anteil (Prozent) aus dem Template; der Wert steht zusätzlich als Zahl
   daneben, das Bild ist also nur Schmuck. */
.mam-sterne--anteil {
	background: linear-gradient(90deg, var(--gold) var(--anteil), rgba(160, 128, 56, 0.3) var(--anteil));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mam-stimmen__schnitt {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin-top: 0.75rem;
}

.mam-stimmen__note {
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	color: var(--navy);
}

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

/* ============ 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;
}

/* ============ Einwilligung ============ */

/* Ohne das greift `hidden` nicht — display:grid weiter unten würde gewinnen. */
.mam-einwilligung[hidden] {
	display: none;
}

.mam-einwilligung {
	position: fixed;
	inset: auto 0 0;
	z-index: 120;
	background: rgba(16, 40, 56, 0.98);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid rgba(201, 169, 106, 0.28);
	box-shadow: 0 -12px 40px rgba(10, 27, 38, 0.28);
	color: var(--creme);
	padding: clamp(1.25rem, 3vw, 1.75rem) var(--rand);
	padding-bottom: calc(clamp(1.25rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
}

/* Über der Mobilleiste, nicht dahinter. Auf der stillen Seite gibt es sie nicht. */
@media (max-width: 699px) {
	.mam-einwilligung {
		bottom: calc(3.75rem + env(safe-area-inset-bottom));
		padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
		max-height: 70vh;
		overflow-y: auto;
	}

	.ist-still .mam-einwilligung {
		bottom: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mam-einwilligung.ist-sichtbar {
		animation: mam-einwilligung-herein 0.45s var(--kurve) both;
	}
}

@keyframes mam-einwilligung-herein {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.mam-einwilligung:focus {
	outline: none;
}

.mam-einwilligung__bahn {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	max-width: var(--breite);
	margin-inline: auto;
}

@media (min-width: 900px) {
	.mam-einwilligung__bahn {
		grid-template-columns: 1fr auto;
		gap: 2.5rem;
	}
}

.mam-einwilligung__titel {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--gold-hell);
	margin: 0 0 0.4rem;
}

.mam-einwilligung__text {
	font-size: var(--t-klein);
	line-height: 1.6;
	color: rgba(250, 246, 240, 0.88);
	max-width: 68ch;
	margin: 0;
}

.mam-einwilligung__rechtliches {
	font-size: var(--t-mini);
	margin: 0.6rem 0 0;
	color: rgba(250, 246, 240, 0.6);
}

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

/* Annehmen und Ablehnen sind gleich groß. Ein kleinerer Ablehnen-Knopf wäre
   keine freie Entscheidung — und damit keine wirksame Einwilligung. */
.mam-einwilligung__knoepfe {
	display: grid;
	gap: 0.75rem;
	align-items: center;
}

@media (min-width: 560px) {
	.mam-einwilligung__knoepfe {
		grid-auto-flow: column;
	}
}

.mam-einwilligung__knoepfe .mam-btn {
	width: 100%;
	white-space: nowrap;
}

@media (min-width: 560px) {
	.mam-einwilligung__knoepfe .mam-btn {
		width: auto;
	}
}

.mam-einwilligung__mehr {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	font-family: var(--sans);
	font-size: var(--t-mini);
	letter-spacing: 0.04em;
	color: var(--gold-hell);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.mam-einwilligung__mehr:hover {
	color: var(--creme);
}

/* Der Widerruf steht mitten im Fließtext einer Fußnote. Ein Knopf bringt von
   Haus aus eigene Schrift, eigene Zeilenhöhe und ein Innenpolster mit — damit
   reißt er die Zeile auseinander. Hier wird er zu dem, was er für den Lesenden
   ohnehin ist: ein Link. */
.mam-einwilligung-link {
	display: inline;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: var(--gold-tief);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	vertical-align: baseline;
	cursor: pointer;
}

.mam-einwilligung-link:hover {
	color: var(--text);
}

/* In der Fußzeile steht er zwischen Impressum und Datenschutz und muss
   aussehen wie sie — auf Navy trägt Gold-tief zu wenig Kontrast. */
.mam-fuss__unten .mam-einwilligung-link {
	color: inherit;
	text-decoration: none;
}

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

/* ---------- Einstellungen ---------- */

.mam-einwilligung-dialog:not([open]) {
	display: none;
}

.mam-einwilligung-dialog {
	width: min(680px, calc(100vw - 2rem));
	max-height: min(85vh, 900px);
	padding: 0;
	border: 1px solid var(--linie);
	border-radius: var(--radius-karte);
	background: var(--creme);
	color: var(--text);
	box-shadow: var(--schatten-hoch);
}

.mam-einwilligung-dialog::backdrop {
	background: rgba(10, 27, 38, 0.72);
}

.mam-einwilligung-dialog__form {
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-height: inherit;
}

.mam-einwilligung-dialog__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem clamp(1.25rem, 4vw, 2rem);
	border-bottom: 1px solid var(--linie);
}

.mam-einwilligung-dialog__kopf h2 {
	font-size: var(--t-h3);
	margin: 0;
}

.mam-einwilligung-dialog__zu {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	color: var(--text-leise);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.mam-einwilligung-dialog__zu:hover {
	background: var(--creme-warm);
	color: var(--text);
}

.mam-einwilligung-dialog__koerper {
	overflow-y: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	display: grid;
	gap: 1.5rem;
}

.mam-einwilligung-dialog__fuss {
	display: grid;
	gap: 0.75rem;
	padding: 1.25rem clamp(1.25rem, 4vw, 2rem);
	border-top: 1px solid var(--linie);
	background: var(--creme-warm);
}

@media (min-width: 560px) {
	.mam-einwilligung-dialog__fuss {
		grid-auto-flow: column;
		justify-content: end;
	}
}

.mam-einwilligung-posten {
	padding: 1.25rem;
	border: 1px solid var(--linie);
	border-radius: var(--radius-karte);
	background: #fff;
}

.mam-einwilligung-posten__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.mam-einwilligung-posten__kopf h3 {
	font-family: var(--sans);
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	margin: 0;
}

.mam-einwilligung-posten__fest {
	font-size: var(--t-mini);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-leise);
}

.mam-einwilligung-posten p {
	font-size: var(--t-klein);
	line-height: 1.6;
	color: var(--text-leise);
	margin: 0;
}

.mam-einwilligung-posten__daten {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 1rem 0 0;
	font-size: var(--t-mini);
	line-height: 1.55;
}

.mam-einwilligung-posten__daten dt {
	color: var(--text-leise);
	white-space: nowrap;
}

.mam-einwilligung-posten__daten dd {
	margin: 0;
	color: var(--text);
}

/* ---------- Schalter ---------- */

.mam-schalter {
	flex: none;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.mam-schalter input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mam-schalter__bahn {
	position: relative;
	width: 3.25rem;
	height: 1.75rem;
	flex: none;
	border-radius: 1rem;
	background: rgba(42, 33, 25, 0.22);
	transition: background-color 0.25s ease;
}

.mam-schalter__bahn::after {
	content: "";
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 40, 56, 0.3);
	transition: transform 0.25s var(--kurve);
}

.mam-schalter input:checked + .mam-schalter__bahn {
	background: var(--gold-tief);
}

.mam-schalter input:checked + .mam-schalter__bahn::after {
	transform: translateX(1.5rem);
}

.mam-schalter input:focus-visible + .mam-schalter__bahn {
	outline: 2px solid var(--gold-tief);
	outline-offset: 3px;
}

/* Der Name steht schon in der Überschrift daneben — hier nur für Vorlesesoftware. */
.mam-schalter__wort {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.mam-schalter__bahn,
	.mam-schalter__bahn::after {
		transition: none;
	}
}

/* ---------- Einbettungen mit Vorschaltung ---------- */

.mam-einbettung {
	position: relative;
	border-radius: var(--radius-karte);
	overflow: hidden;
}

.mam-einbettung__hinweis {
	background: var(--creme-warm);
	border: 1px solid var(--linie);
	border-radius: var(--radius-karte);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.mam-einbettung__text {
	max-width: 46ch;
	margin-inline: auto;
	font-size: var(--t-klein);
	line-height: 1.6;
	color: var(--text-leise);
}

.mam-einbettung__hinweis .mam-btn {
	margin-top: 1.25rem;
}

.mam-einbettung__fussnote {
	max-width: 46ch;
	margin: 1.25rem auto 0;
	font-size: var(--t-mini);
	line-height: 1.55;
	color: var(--text-leise);
}

.mam-einbettung__rahmen {
	display: block;
	width: 100%;
	height: var(--einbettung-hoehe, 380px);
	border: 0;
	border-radius: var(--radius-karte);
}

/* Steht unter den Diensten und beantwortet, was dort bewusst fehlt. */
.mam-einwilligung-fussnote {
	margin: 0;
	font-size: var(--t-mini);
	line-height: 1.6;
	color: var(--text-leise);
}

.mam-einwilligung-fussnote a {
	color: var(--gold-tief);
}

.mam-einwilligung-posten__daten code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	padding: 0.1em 0.35em;
	background: var(--creme-warm);
	border-radius: 2px;
}