/* ════════════════════════════════════════════════════════════
   Megamenue "Der Vorhang" (inc/megamenue.php, js/megamenue.js)

   Desktop: Ein helles Band in Papierweiss faellt unter dem Kopf herunter
   wie ein Vorhang. Links gross in Garamond, rechts der naechste Abend als
   Eintrittskarte oder ein Foto. Am Saum ein Hauch Buehnenlicht.
   Mobil (bis 980 px): eigene Ebene in Papier, Gruppen als <details>.

   Alles haengt an #main-header, damit Divis Regeln fuer #top-menu und
   .nav li ul (Spezifitaet bis 1,1,2) sicher ueberstimmt werden.
   Ohne JS: Band per :hover und :focus-within, mobil per <details>.
   ════════════════════════════════════════════════════════════ */

:root {
	--ehc-mm-oben: 67px;                       /* Unterkante Kopf, setzt das JS */
	--ehc-mm-weich: cubic-bezier(.22, .8, .24, 1);
	--ehc-mm-aus: cubic-bezier(.23, 1, .32, 1);   /* starker Ease-out fuer alles, was erscheint */
	--ehc-mm-text-2: #5e5650;                  /* Beschreibung, 6,7:1 auf Papier */
	--ehc-mm-linie: #e2d9cb;
	--ehc-mm-licht-glanz: rgba(242, 182, 48, .12);
}

/* ── Knopf in der Leiste ("Ihr Besuch", "Verein") ── */

#main-header #top-menu li.ehc-mm-gruppe { position: relative; }
/* Gleiche Hoehe wie Divis Links, damit die Maus ohne Luecke ins Band faehrt */
.et_header_style_left #main-header #et-top-navigation nav > ul > li.ehc-mm-gruppe { padding-bottom: 33px; }
.et_header_style_left #main-header.et-fixed-header #et-top-navigation nav > ul > li.ehc-mm-gruppe { padding-bottom: 20px; }

#main-header .ehc-mm-knopf {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -15px -15px -15px -15px;
	padding: 15px 15px 15px 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--gh-text);
	font-family: var(--gh-schrift-text);
	font-size: 16px;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
#main-header .ehc-mm-knopf:hover { background: rgba(130, 0, 0, .06); }
#main-header .ehc-mm-knopf[data-aktiv] { color: var(--gh-akzent); }
#main-header .ehc-mm-knopf .ehc-mm-symbol {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .2s ease-out;
}
#main-header .ehc-mm-knopf[aria-expanded="true"],
html:not(.ehc-mm-js) #main-header .ehc-mm-gruppe:hover > .ehc-mm-knopf,
html:not(.ehc-mm-js) #main-header .ehc-mm-gruppe:focus-within > .ehc-mm-knopf {
	background: var(--gh-grund-hell);
	color: var(--gh-akzent);
	box-shadow: none;
}
#main-header .ehc-mm-knopf[aria-expanded="true"] .ehc-mm-symbol {
	color: var(--gh-akzent);
	transform: rotate(180deg);
}

/* ── Das Band ── */

#main-header .ehc-mm-panel {
	position: fixed;
	z-index: 2;
	left: 0;
	right: 0;
	top: calc(var(--ehc-mm-oben) - 1px);   /* deckt die Linie unter dem Kopf */
	display: none;
	max-height: calc(100vh - var(--ehc-mm-oben));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Ruhiges Papier, ohne Schein und ohne Schatten (Jens, 03.10.2026) */
	background: var(--gh-grund);
	color: var(--gh-text);
	font-family: var(--gh-schrift-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	border-bottom: 1px solid var(--gh-linie);
}
/* Lichtkante am Saum, wie die Rampe vor der Buehne */
#main-header .ehc-mm-panel::after {
	content: none;
	position: sticky;
	display: block;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(242, 182, 48, .5) 25%, rgba(242, 182, 48, .5) 75%, transparent);
}

/* Ohne JS: Hover und Tastatur oeffnen sofort */
html:not(.ehc-mm-js) #main-header .ehc-mm-gruppe:hover > .ehc-mm-panel,
html:not(.ehc-mm-js) #main-header .ehc-mm-gruppe:focus-within > .ehc-mm-panel { display: block; }

/* Mit JS: erst beim ersten Oeffnen gerendert (Bild laedt dann), danach
   faellt der Vorhang per clip-path und rollt beim Schliessen schneller hoch. */
#main-header .ehc-mm-gruppe[data-bereit] > .ehc-mm-panel {
	display: block;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: visibility 0s linear .2s;
}
/* Schliessen als Animation: startet bei 0 statt bei -140 px (Schattenrand),
   sonst laeuft die erste Strecke ins Leere. */
#main-header .ehc-mm-gruppe[data-bereit]:not([data-offen]) > .ehc-mm-panel {
	animation: ehc-mm-zu .2s var(--ehc-mm-aus) both;
}
#main-header .ehc-mm-gruppe[data-offen] > .ehc-mm-panel {
	visibility: visible;
	clip-path: inset(0 0 -140px 0);        /* unten offen fuer den Schatten */
	animation: none;
	transition: clip-path .45s var(--ehc-mm-aus), visibility 0s;
}
/* Wechsel zwischen zwei Gruppen: Der Vorhang bleibt unten, nur der Inhalt wechselt */
#main-header.ehc-mm-wechsel .ehc-mm-gruppe > .ehc-mm-panel { transition: none; animation: none; }

/* ── Inhalt des Bands ── */

#main-header .ehc-mm-innen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
	gap: clamp(2.5rem, 5vw, 5.5rem);
	align-items: start;
	width: 90%;
	max-width: 1180px;   /* wie Divis .container (90 %, 1180 px) */
	margin: 0 auto;
	padding: 36px 0 44px;
}

/* Divis Regeln fuer Untermenues (.nav li ul, #top-menu li li a) neutralisieren */
#main-header .ehc-mm-panel ul {
	position: static;
	z-index: auto;
	visibility: inherit;   /* nie "visible": sonst bleibt die Liste im geschlossenen Band per Tab erreichbar */
	opacity: 1;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
	list-style: none;
	text-align: left;
}
#main-header .ehc-mm-panel li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	word-wrap: normal;
}

#main-header .ehc-mm-liste {
	display: grid;
	border-top: 1px solid var(--ehc-mm-linie);
}
#main-header .ehc-mm-punkt { border-bottom: 1px solid var(--ehc-mm-linie); }

#main-header .ehc-mm-link {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 24px;
	align-items: center;
	width: auto;
	padding: 18px 4px 18px 0;
	color: var(--gh-text);
	font-family: var(--gh-schrift-text);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	opacity: 1;
	background: none;
	transition: color .2s ease;
}
/* Lichtkegel hinter dem Eintrag unter Zeiger oder Fokus */
#main-header .ehc-mm-link::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -1px -20px -1px -24px;
	border-radius: 10px;
	background:
		radial-gradient(42% 75% at 24% 50%, var(--ehc-mm-licht-glanz), transparent 72%),
		var(--gh-grund-hell);
	opacity: 0;
	transition: opacity .18s ease-out;
	pointer-events: none;
}
#main-header .ehc-mm-link__titel {
	grid-column: 1;
	font-family: var(--gh-schrift-titel);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.95rem, 2.35vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--gh-text);
	transition: color .2s ease;
}
#main-header .ehc-mm-link__text {
	grid-column: 1;
	margin-top: 6px;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--ehc-mm-text-2);
}
#main-header .ehc-mm-link .ehc-mm-symbol {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 26px;
	height: 26px;
	color: var(--gh-akzent);
	opacity: .45;
	transform: translateX(-8px);
	transition: opacity .18s ease-out, transform .18s ease-out;
}
#main-header .ehc-mm-link:hover,
#main-header .ehc-mm-link:focus-visible { color: var(--gh-text); background: none; opacity: 1; }
#main-header .ehc-mm-link:hover::before,
#main-header .ehc-mm-link:focus-visible::before { opacity: 1; }
#main-header .ehc-mm-link:hover .ehc-mm-link__titel,
#main-header .ehc-mm-link:focus-visible .ehc-mm-link__titel,
#main-header .ehc-mm-link[aria-current="page"] .ehc-mm-link__titel { color: var(--gh-akzent); }
#main-header .ehc-mm-link:focus-visible .ehc-mm-symbol { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
	#main-header .ehc-mm-link:hover .ehc-mm-symbol { opacity: 1; transform: none; }
}
#main-header .ehc-mm-link[aria-current="page"] .ehc-mm-link__titel {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

/* Fokus auf Papier: Logo-Rot, 10:1 auf Papier */
#main-header .ehc-mm-panel :focus-visible,
#main-header .ehc-mobil-ebene :focus-visible {
	outline: 3px solid var(--gh-akzent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Gestaffelte Einblendung: Start 60 ms, je Punkt +30 ms, alles nach ~450 ms fertig */
#main-header .ehc-mm-gruppe[data-bereit] .ehc-mm-punkt,
#main-header .ehc-mm-gruppe[data-bereit] .ehc-mm-buehne {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .15s ease-out, transform .15s ease-out;
}
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt,
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-buehne {
	opacity: 1;
	transform: none;
	transition: opacity .2s var(--ehc-mm-aus) .06s, transform .28s var(--ehc-mm-aus) .06s;
}
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--2 { transition-delay: .09s; }
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--3 { transition-delay: .12s; }
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--4 { transition-delay: .15s; }
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--5,
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--6,
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--7,
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt--8 { transition-delay: .18s; }
#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-buehne { transition-delay: .12s; }

/* Wechsel zwischen Gruppen: keine Staffelung, nur ein kurzes Einblenden */
#main-header.ehc-mm-wechsel .ehc-mm-gruppe[data-bereit] .ehc-mm-punkt,
#main-header.ehc-mm-wechsel .ehc-mm-gruppe[data-bereit] .ehc-mm-buehne {
	transition: opacity .15s ease-out;
	transform: none;
	transition-delay: 0s;
}
/* Per Tastatur geoeffnet: alles sofort da, der Fokusrahmen darf nicht warten */
#main-header.ehc-mm-tastatur .ehc-mm-gruppe[data-bereit] .ehc-mm-punkt,
#main-header.ehc-mm-tastatur .ehc-mm-gruppe[data-bereit] .ehc-mm-buehne {
	opacity: 1;
	transform: none;
	transition: none;
}
#main-header.ehc-mm-tastatur .ehc-mm-gruppe[data-offen] > .ehc-mm-panel { transition: visibility 0s; }

/* ── Rechts: Foto ── */

#main-header .ehc-mm-foto { margin: 0; }
#main-header .ehc-mm-foto__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 0%;
	border-radius: var(--gh-radius);
}
#main-header .ehc-mm-foto__text {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--ehc-mm-text-2);
}

/* ── Rechts: Eintrittskarte "Naechster Abend" (Papier auf Nacht) ── */

#main-header .ehc-mm-abend {
	position: relative;
	padding: 24px 26px 20px;
	border-radius: var(--gh-radius);
	background: #fff;
	color: var(--gh-text);
	border: 1px solid var(--gh-linie);
	box-shadow: 0 18px 40px -22px rgba(130, 0, 0, .32);
}
#main-header .ehc-mm-abend p { margin: 0; padding: 0; }
#main-header .ehc-mm-abend .ehc-mm-abend__marke {
	margin-bottom: 10px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gh-akzent);
}
#main-header .ehc-mm-abend .ehc-mm-abend__tag {
	font-family: var(--gh-schrift-titel);
	font-style: italic;
	font-weight: 500;
	font-size: 2.15rem;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--gh-titel);
}
#main-header .ehc-mm-abend .ehc-mm-abend__ort {
	margin: 6px 0 18px;
	font-size: 1.0625rem;
	color: var(--gh-grau);
}
#main-header .ehc-mm-abend .ehc-mm-abend__frei {
	margin-top: 10px;
	font-size: 1.0625rem;
	line-height: 1.35;
}
#main-header .ehc-mm-abend.ist-knapp .ehc-mm-abend__frei strong { color: var(--gh-akzent); }
#main-header .ehc-mm-abend.ist-knapp .ehc-balken i { background: var(--gh-akzent); }
#main-header .ehc-mm-abend .ehc-mm-abend__hinweis {
	font-size: 1.0625rem;
	line-height: 1.45;
}
/* Balken fuellt sich nur beim ersten Oeffnen, ohne Verzoegerung */
#main-header .ehc-mm-abend .ehc-balken.ist-wachsend i { transition: transform .55s var(--ehc-mm-aus) 0s; }

/* Abriss: gestrichelte Linie mit zwei ausgestanzten Halbkreisen */
#main-header .ehc-mm-abend__abriss {
	position: relative;
	display: grid;
	gap: 6px;
	margin: 22px -27px 0;
	padding: 22px 27px 0;
	border-top: 2px dashed var(--gh-linie);
}
#main-header .ehc-mm-abend__abriss::before,
#main-header .ehc-mm-abend__abriss::after {
	content: "";
	position: absolute;
	top: -12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gh-grund);
	border: 1px solid var(--gh-linie);
	box-sizing: border-box;
}
#main-header .ehc-mm-abend__abriss::before { left: -11px; clip-path: inset(0 0 0 50%); }
#main-header .ehc-mm-abend__abriss::after { right: -11px; clip-path: inset(0 50% 0 0); }

#main-header .ehc-mm-abend .ehc-mm-abend__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--gh-akzent);
	color: var(--gh-auf-akzent);
	font-family: var(--gh-schrift-text);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	opacity: 1;
	transition: transform .12s ease-out, background-color .15s ease;
}
#main-header .ehc-mm-abend .ehc-mm-abend__knopf:hover { background: var(--gh-akzent-dunkel); color: var(--gh-auf-akzent); }
#main-header .ehc-mm-abend .ehc-mm-abend__knopf:active { transform: scale(.97); }
#main-header .ehc-mm-abend .ehc-mm-abend__alle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	color: var(--gh-akzent);
	font-family: var(--gh-schrift-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	opacity: 1;
	background: none;
}
#main-header .ehc-mm-abend .ehc-mm-abend__alle:hover { color: var(--gh-akzent-dunkel); }
#main-header .ehc-mm-abend .ehc-mm-symbol { width: 18px; height: 18px; flex: none; }
/* Fokus auf Papier: wieder Rot */
#main-header .ehc-mm-abend :focus-visible { outline-color: var(--gh-akzent); border-radius: 999px; }

/* ── Schleier ueber der Seite ── */

.ehc-mm-schleier {
	position: fixed;
	z-index: 99998;                         /* unter Divis Kopf (99999) */
	inset: 0;
	background: rgba(27, 23, 20, .18);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-out, visibility 0s linear .2s;
}
.ehc-mm-schleier.ist-sichtbar {
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease-out, visibility 0s;
}

/* ════════ Mobil ════════ */

#main-header .ehc-mobil { display: none; }

@media (max-width: 980px) {
	#main-header .container.et_menu_container { width: calc(100% - 32px); }
	.et_header_style_left #main-header #et-top-navigation,
	.et_header_style_left #main-header.et-fixed-header #et-top-navigation { padding-top: 12px; padding-bottom: 12px; }

	#main-header .ehc-mobil {
		position: relative;
		z-index: 2;            /* ueber Divis .logo_container (absolut, volle Breite) */
		display: flex;
		align-items: center;
		gap: 8px;
	}
	#main-header .ehc-mobil-karten,
	#main-header .ehc-mobil-knopf {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 0 20px;
		border-radius: 999px;
		font-family: var(--gh-schrift-text);
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}
	#main-header .ehc-mobil-karten { background: var(--gh-akzent); color: var(--gh-auf-akzent); }
	#main-header .ehc-mobil-karten:hover { background: var(--gh-akzent-dunkel); color: var(--gh-auf-akzent); }
	#main-header .ehc-mobil-knopf {
		list-style: none;
		padding: 0 16px 0 18px;
		border: 1.5px solid var(--gh-text);
		color: var(--gh-text);
		background: transparent;
		transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	}
	#main-header .ehc-mobil-knopf::-webkit-details-marker { display: none; }
	#main-header .ehc-mobil-knopf::marker { content: ""; }
	/* Beide Woerter in einer Zelle: Der Knopf behaelt seine Breite, der
	   Kartenknopf daneben springt beim Oeffnen nicht. Unsichtbares Wort
	   zaehlt nicht zum Namen fuer Screenreader. */
	#main-header .ehc-mobil-knopf__wort { display: inline-grid; justify-items: start; }
	#main-header .ehc-mobil-knopf__zu,
	#main-header .ehc-mobil-knopf__auf { grid-area: 1 / 1; }
	#main-header .ehc-mobil-knopf__auf { visibility: hidden; }
	#main-header .ehc-mobil-menue[open] > .ehc-mobil-knopf { background: var(--gh-grund-hell); border-color: var(--gh-akzent); color: var(--gh-text); }
	#main-header .ehc-mobil-menue[open] .ehc-mobil-knopf__zu { visibility: hidden; }
	#main-header .ehc-mobil-menue[open] .ehc-mobil-knopf__auf { visibility: visible; }

	/* Zwei Striche, die zum Kreuz werden */
	#main-header .ehc-mobil-striche { position: relative; display: block; width: 18px; height: 10px; }
	#main-header .ehc-mobil-striche i {
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .25s var(--ehc-mm-aus), top .25s var(--ehc-mm-aus);
	}
	#main-header .ehc-mobil-striche i:first-child { top: 0; }
	#main-header .ehc-mobil-striche i:last-child { top: 8px; }
	#main-header .ehc-mobil-menue[open] .ehc-mobil-striche i:first-child { top: 4px; transform: rotate(45deg); }
	#main-header .ehc-mobil-menue[open] .ehc-mobil-striche i:last-child { top: 4px; transform: rotate(-45deg); }

	/* Die Ebene */
	#main-header .ehc-mobil-ebene {
		position: fixed;
		z-index: 5;
		left: 0;
		right: 0;
		top: calc(var(--ehc-mm-oben) - 1px);
		bottom: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 16px 48px;
		background: var(--gh-grund);
		color: var(--gh-text);
		font-family: var(--gh-schrift-text);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.45;
		text-align: left;
		animation: ehc-mm-vorhang .3s var(--ehc-mm-aus) both;
	}
	#main-header .ehc-mobil-nav,
	#main-header .ehc-mm-abend--mobil { max-width: 640px; margin-inline: auto; }

	#main-header .ehc-mobil-liste { margin: 0; padding: 0; list-style: none; }
	#main-header .ehc-mobil-punkt {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--ehc-mm-linie);
		animation: ehc-mm-eintrag .25s var(--ehc-mm-aus) both .04s;
	}
	#main-header .ehc-mobil-punkt:nth-child(2) { animation-delay: .07s; }
	#main-header .ehc-mobil-punkt:nth-child(3) { animation-delay: .1s; }
	#main-header .ehc-mobil-punkt:nth-child(n+4) { animation-delay: .13s; }
	#main-header .ehc-mobil-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 68px;
		padding: 12px 2px;
		font-family: var(--gh-schrift-titel);
		font-style: italic;
		font-weight: 500;
		font-size: 2.1rem;
		line-height: 1.1;
		color: var(--gh-text);
		text-decoration: none;
		list-style: none;
		cursor: pointer;
	}
	#main-header .ehc-mobil-link::-webkit-details-marker { display: none; }
	#main-header .ehc-mobil-link::marker { content: ""; }
	#main-header .ehc-mobil-link[aria-current="page"] { color: var(--gh-akzent); }
	#main-header .ehc-mobil-link .ehc-mm-symbol {
		width: 26px;
		height: 26px;
		flex: none;
		color: var(--gh-akzent);
		transition: transform .25s var(--ehc-mm-aus);
	}
	#main-header .ehc-mobil-gruppe[open] > .ehc-mobil-link .ehc-mm-symbol { transform: rotate(180deg); }

	#main-header .ehc-mobil-unter {
		display: grid;
		gap: 6px;
		margin: 0 0 18px;
		padding: 0;
		list-style: none;
	}
	#main-header .ehc-mobil-unter li { margin: 0; padding: 0; }
	#main-header .ehc-mobil-unterlink {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 14px 16px;
		border-radius: 12px;
		background: var(--gh-grund-hell);
		color: var(--gh-text);
		text-decoration: none;
	}
	#main-header .ehc-mobil-unterlink:hover { background: #e9e1d3; color: var(--gh-text); }
	#main-header .ehc-mobil-unterlink__titel { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
	#main-header .ehc-mobil-unterlink__text { font-size: 1rem; line-height: 1.4; color: var(--ehc-mm-text-2); }
	#main-header .ehc-mobil-unterlink[aria-current="page"] .ehc-mobil-unterlink__titel { color: var(--gh-akzent); }

	#main-header .ehc-mm-abend--mobil { margin-top: 28px; animation: ehc-mm-eintrag .25s var(--ehc-mm-aus) both .12s; }
	#main-header .ehc-mm-abend--mobil .ehc-mm-abend__tag { font-size: 1.95rem; }

	html.ehc-mobil-offen { overflow: hidden; }
}

@media (max-width: 380px) {
	#main-header .ehc-mobil { gap: 6px; }
	#main-header .ehc-mobil-karten { padding: 0 14px; }
	#main-header .ehc-mobil-knopf { padding: 0 12px 0 14px; gap: 8px; }
	/* Schmale Handys: "Menü" bleibt stehen, das Kreuz zeigt den Zustand */
	#main-header .ehc-mobil-knopf__auf { display: none; }
	#main-header .ehc-mobil-menue[open] .ehc-mobil-knopf__zu { visibility: visible; }
}

@keyframes ehc-mm-vorhang {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes ehc-mm-zu {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(0 0 100% 0); }
}
@keyframes ehc-mm-eintrag {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

/* ── Weniger Bewegung: nichts faellt oder gleitet, Ein- und Ausblenden
   bleibt als kurzes Ueberblenden (150 ms) erhalten ── */
@media (prefers-reduced-motion: reduce) {
	#main-header .ehc-mm-gruppe[data-bereit]:not([data-offen]) > .ehc-mm-panel {
		animation: none;
		clip-path: none;
		opacity: 0;
		transition: opacity .15s ease-out, visibility 0s linear .15s;
	}
	#main-header .ehc-mm-gruppe[data-offen] > .ehc-mm-panel {
		opacity: 1;
		transition: opacity .15s ease-out, visibility 0s;
	}
	#main-header.ehc-mm-wechsel .ehc-mm-gruppe > .ehc-mm-panel { transition: none; }
	#main-header .ehc-mm-gruppe[data-bereit] .ehc-mm-punkt,
	#main-header .ehc-mm-gruppe[data-bereit] .ehc-mm-buehne,
	#main-header.ehc-mm-wechsel .ehc-mm-gruppe[data-bereit] .ehc-mm-punkt,
	#main-header.ehc-mm-wechsel .ehc-mm-gruppe[data-bereit] .ehc-mm-buehne {
		transform: none;
		transition: opacity .15s ease-out;
		transition-delay: 0s;
	}
	#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-punkt,
	#main-header .ehc-mm-gruppe[data-offen] .ehc-mm-buehne { transition-delay: 0s; }
	#main-header .ehc-mm-knopf .ehc-mm-symbol,
	#main-header .ehc-mm-knopf[aria-expanded="true"] .ehc-mm-symbol,
	#main-header .ehc-mm-link .ehc-mm-symbol { transition: opacity .15s ease-out; transform: none; }
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf:active { transform: none; }
	.ehc-mm-schleier,
	.ehc-mm-schleier.ist-sichtbar { transition-duration: .15s, 0s; }
	#main-header .ehc-mobil-ebene,
	#main-header .ehc-mobil-punkt,
	#main-header .ehc-mm-abend--mobil { animation: ehc-mm-blende .15s ease-out both; animation-delay: 0s; }
	#main-header .ehc-mobil-punkt:nth-child(n) { animation-delay: 0s; }
	#main-header .ehc-mobil-striche i,
	#main-header .ehc-mobil-link .ehc-mm-symbol { transition: none; }
}
@keyframes ehc-mm-blende { from { opacity: 0; } to { opacity: 1; } }

/* Handy-Kopf (Abnahme 03.10.2026): Logo darf die Knoepfe nicht ueberlappen,
   die geschlossene Ebene darf nicht ueber den rechten Rand ragen. */
@media (max-width: 980px) {
	#main-header #logo { max-height: 46px !important; width: auto; }
	#main-header .ehc-mobil-karten, #main-header .ehc-mobil-knopf { padding: 0 14px; }
	#main-header .ehc-mobil-menue:not([open]) .ehc-mobil-ebene { display: none; }
	#main-header .ehc-mobil-ebene { max-width: 100vw; overflow-x: hidden; }
}
@media (max-width: 420px) {
	#main-header #logo { max-height: 40px !important; }
}
@media (max-width: 360px) {
	#main-header #logo { max-height: 40px !important; }
	#main-header .ehc-mobil-knopf__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}