/* Automatisch gebaut aus style.css, css/kacheln.css, css/kartenweg.css, css/fusszeile.css, css/fehlerseite.css, css/knoepfe.css, css/megamenue.css. Nicht von Hand aendern: werkzeuge/css-buendeln.py */

/* ── style.css ── */
/* ── Schriften: lokal gehostet (DSGVO), kein Google-CDN ──
   EB Garamond (Ueberschriften, verwandt mit der Wortmarke im Logo) und
   Source Sans 3 (Text und Bedienung). Beide SIL Open Font License 1.1. */

@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/eb-garamond-latin-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/eb-garamond-italic-latin-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/source-sans-3-latin-variable.woff2') format('woff2');
}

/* ── Tokens: Rot, Nacht und Licht ────────────────────────
   Logo-Rot exakt aus der Logodatei. Nacht fuer dunkle Baender (Licht aus,
   20 Uhr), Licht nur auf dunklem Grund (Belegung, Hinweise), Papierweiss
   als Grund. Dieselben Werte in werkzeuge/divi-grundlage.php. */
:root {
	--gh-akzent:        #820000;  /* Logo-Rot: Knoepfe, Links */
	--gh-akzent-dunkel: #a3160f;  /* Hover */
	--gh-titel:         #1b1714;
	--gh-text:          #1b1714;
	--gh-grund:         #faf6ef;  /* Papierweiss */
	--gh-auf-akzent:    #ffffff;
	--gh-grund-hell:    #f1ebe0;  /* Papier, abgesetzt */
	--gh-nacht:         #16131c;
	--gh-nacht-2:       #2a2533;
	--gh-licht:         #f2b630;  /* nur auf Nacht */
	--gh-grau:          #5e5650;
	--gh-linie:         #e2d9cb;
	--gh-schatten:      rgba(130, 0, 0, 0.14);
	--gh-radius:        14px;

	--gh-schrift-text:  'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
	--gh-schrift-titel: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

/* ── Grundregeln ────────────────────────────────────── */
body {
	color: var(--gh-text);
	background: var(--gh-grund);
}
body,
.entry-content,
#main-content {
	font-family: var(--gh-schrift-text);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.et_pb_post .entry-title {
	font-family: var(--gh-schrift-titel);
	color: var(--gh-titel);
	font-weight: 500;
	letter-spacing: -0.01em;
}
a { color: var(--gh-akzent); }
a:hover { color: var(--gh-akzent-dunkel); }
:focus-visible {
	outline: 3px solid var(--gh-akzent);
	outline-offset: 2px;
}

/* width/height im HTML verhindern das Springen. Ohne height:auto wird
   die Attributhoehe zur festen Hoehe und aspect-ratio wirkungslos. */
img,
video { height: auto; }
.entry-content img { max-width: 100%; }

.entry-content p { line-height: 1.7; }
.entry-content h2,
.entry-content h3 { margin: 1.4em 0 0.5em; }
/* Ueberschrift-Module (Divi) beginnen oben buendig mit ihrer Spalte. Der
   Abstand oben gilt nur fuer Ueberschriften mitten im Fliesstext, sonst
   steht die Ueberschrift tiefer als der Text daneben (Jens 04.10.). */
.entry-content .et_pb_heading .et_pb_module_header { margin-top: 0; }

/* Einzelbilder im Inhalt: begrenzt, damit beim Oeffnen noch Kontext
   sichtbar bleibt und nicht nur Foto */
.entry-content figure:not(.wp-block-gallery figure) {
	margin: 1.5em auto;
	max-width: 720px;
	text-align: center;
}
.entry-content figure:not(.wp-block-gallery figure) img {
	max-height: 62vh;
	width: auto;
	max-width: 100%;
	border-radius: var(--gh-radius);
}

/* Footer: Copyright links, Signatur rechts */
#footer-info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5em 2em;
	width: 100%;
}

/* Von divi5.mjs gesetzt: gekappte Module mittig */
.gh-mitte,
.gh-mitte .et_pb_text_inner p,
.gh-mitte .et_pb_text_inner ul,
.gh-mitte .et_pb_text_inner ol {
	margin-left: auto;
	margin-right: auto;
}

/* ── Tabellen ───────────────────────────────────────────
   inc/tabellen.php setzt data-label je Zelle und die ARIA-Rollen.
   Zweispalter (Merkmal/Wert) bekommen die Klasse gh-zweispalter und
   bleiben auch mobil Tabelle. */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	border: 0;
	margin: 1.5em 0 2em;
}
.entry-content th,
.entry-content td {
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--gh-linie);
	text-align: left;
	white-space: normal;
}
.entry-content thead th {
	background: var(--gh-akzent);
	color: var(--gh-auf-akzent);
	font-weight: 700;
}
.entry-content tbody tr:nth-child(even) td { background: var(--gh-grund-hell); }

table.gh-zweispalter {
	table-layout: fixed;
	max-width: 100%;
}
table.gh-zweispalter td {
	min-width: 0;
	overflow-wrap: anywhere;
}
table.gh-zweispalter td:first-child,
table.gh-zweispalter th[scope="row"] {
	font-weight: 700;
	color: var(--gh-titel);
	white-space: normal;
	width: 38%;
}

/* ── Media-Queries: immer hinter die Grundregeln ──────── */

/* Datentabellen mobil: jede Zeile ein Block, Spaltenname an der
   Zelle. Kein seitliches Wischen. */
@media (max-width: 767px) {
	.entry-content table:not(.gh-zweispalter),
	.entry-content table:not(.gh-zweispalter) tbody,
	.entry-content table:not(.gh-zweispalter) tr,
	.entry-content table:not(.gh-zweispalter) td,
	.entry-content table:not(.gh-zweispalter) th {
		display: block;
		width: 100%;
	}
	.entry-content table:not(.gh-zweispalter) thead,
	.entry-content table:not(.gh-zweispalter) tr.gh-kopfzeile { display: none; }
	.entry-content table:not(.gh-zweispalter) tr {
		margin-bottom: 14px;
		border: 1px solid var(--gh-linie);
		border-radius: 10px;
		padding: 10px 14px;
		background: var(--gh-grund);
	}
	.entry-content table:not(.gh-zweispalter) td {
		display: grid;
		grid-template-columns: minmax(6em, 40%) 1fr;
		gap: 0 12px;
		padding: 5px 0;
		border: 0;
		min-width: 0;
		background: transparent;
	}
	.entry-content table:not(.gh-zweispalter) td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--gh-titel);
		white-space: normal;
	}
	.entry-content table:not(.gh-zweispalter) td:not([data-label]) { grid-template-columns: 1fr; }
	.entry-content table:not(.gh-zweispalter) td:not([data-label])::before { content: none; }
	.entry-content table:not(.gh-zweispalter) td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Weniger Bewegung heisst nicht keine: Ueberblendungen bleiben kurz,
	   alles, was sich bewegt oder waechst, springt sofort an sein Ziel. */
	*, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .15s !important; }
}

/* ════════════════════════════════════════════════════════════
   Bausteine der Seiten (Rot, Nacht und Licht)
   Jede Klasse haengt an einem Divi-Modul (Erweitert > CSS-Klasse).
   Ohne diese Datei sind die Module trotzdem lesbar.
   ════════════════════════════════════════════════════════════ */

/* ── Kopf ── */
#main-header{ background:var(--gh-grund); box-shadow:none; border-bottom:1px solid var(--gh-linie); }
#top-menu li a{ font-family:var(--gh-schrift-text); font-weight:600; font-size:16px; color:var(--gh-text); }
#top-menu li.current-menu-item > a, #top-menu li a:hover{ color:var(--gh-akzent); opacity:1; }
#top-menu li.ehc-menue-karten > a{ background:var(--gh-akzent); color:#fff !important; border-radius:999px; padding:10px 22px !important; }
#top-menu li.ehc-menue-karten > a:hover{ background:var(--gh-akzent-dunkel); }
#top-menu li.ehc-menue-karten{ padding-right:0; }
#main-header .container{ width:90%; max-width:1180px; }
#logo{ max-height:76px; }
#main-header.et-fixed-header #logo{ max-height:46px !important; }
#logo{ transition:max-height .3s ease; }
/* Divi setzt ein Leerzeichen vor den Logo-Link, das 3,4 px Platz nimmt: Logo sonst nicht auf der Inhaltskante */
#main-header .logo_container{ font-size:0; }
#et_top_search, #et_search_icon, .et-cart-info{ display:none !important; }

/* ── Ueberschriften: Garamond kursiv, gross und eng ── */
.ehc-titel h1, .ehc-h2 h2, .ehc-h2 .et_pb_module_header{ font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; letter-spacing:-0.015em; }
.ehc-titel h1{ font-size:clamp(2.6rem,5vw,4.75rem) !important; line-height:.9 !important; }
.ehc-h2 h2, .ehc-h2 .et_pb_module_header{ font-size:clamp(2.3rem,5vw,4rem) !important; line-height:1 !important; }

/* ── Kennzeile ueber Titeln: klein, rot, gesperrt ── */
.ehc-marke p, .ehc-marke .et_pb_text_inner{ font-size:.8rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gh-akzent) !important; margin:0 !important; }
.ehc-marke--hell p{ color:var(--gh-licht) !important; }

/* ── Knoepfe ──
   Divi 5 legt den Knopf als Flex-Element in einen Block-Wrapper, dadurch
   fuellt er die ganze Breite. :where() haelt das Gewicht auf null, damit
   die Ausrichtung im Builder weiterhin gewinnt. */
:where(.et_pb_button_module_wrapper) > :where(.et_pb_button){ display:inline-flex; width:auto; }
.et_pb_button{ min-height:52px; align-items:center; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease-out; }
.et_pb_button:active, .ehc-abendliste__link:active, #place_order:active, .single_add_to_cart_button:active{ transform:scale(.97); }

/* ── Belegungsbalken: gefuellt ist verkauft ── */
.ehc-balken{ display:block; height:8px; border-radius:999px; background:var(--gh-linie); overflow:hidden; }
.ehc-balken i{ display:block; height:100%; width:100%; transform:scaleX(var(--voll-faktor,0)); transform-origin:left center; background:var(--gh-nacht); border-radius:999px; }
/* Belegung ohne Skript: inc/abende.php setzt data-stufe in 5er-Schritten */
.ehc-balken[data-stufe="0"]{ --voll-faktor:0; }
.ehc-balken[data-stufe="5"]{ --voll-faktor:0.05; }
.ehc-balken[data-stufe="10"]{ --voll-faktor:0.1; }
.ehc-balken[data-stufe="15"]{ --voll-faktor:0.15; }
.ehc-balken[data-stufe="20"]{ --voll-faktor:0.2; }
.ehc-balken[data-stufe="25"]{ --voll-faktor:0.25; }
.ehc-balken[data-stufe="30"]{ --voll-faktor:0.3; }
.ehc-balken[data-stufe="35"]{ --voll-faktor:0.35; }
.ehc-balken[data-stufe="40"]{ --voll-faktor:0.4; }
.ehc-balken[data-stufe="45"]{ --voll-faktor:0.45; }
.ehc-balken[data-stufe="50"]{ --voll-faktor:0.5; }
.ehc-balken[data-stufe="55"]{ --voll-faktor:0.55; }
.ehc-balken[data-stufe="60"]{ --voll-faktor:0.6; }
.ehc-balken[data-stufe="65"]{ --voll-faktor:0.65; }
.ehc-balken[data-stufe="70"]{ --voll-faktor:0.7; }
.ehc-balken[data-stufe="75"]{ --voll-faktor:0.75; }
.ehc-balken[data-stufe="80"]{ --voll-faktor:0.8; }
.ehc-balken[data-stufe="85"]{ --voll-faktor:0.85; }
.ehc-balken[data-stufe="90"]{ --voll-faktor:0.9; }
.ehc-balken[data-stufe="95"]{ --voll-faktor:0.95; }
.ehc-balken[data-stufe="100"]{ --voll-faktor:1; }
.ehc-balken--hell{ background:var(--gh-nacht-2); }
.ehc-balken--hell i{ background:var(--gh-licht); }

/* ── Held ── */
.ehc-held__bild img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--gh-radius); }
/* Held: helle, warme Buehne, das Plakat in einem zarten weinroten Schein */
.ehc-held--buehne{ position:relative; overflow:hidden; }
.ehc-held--buehne::before{ content:""; position:absolute; left:50%; top:-10%; width:70%; height:120%; pointer-events:none;
	background:radial-gradient(ellipse 45% 55% at 62% 42%, rgba(130,0,0,.10), rgba(130,0,0,.04) 45%, transparent 72%); }
.ehc-held__buehne{ position:relative; z-index:1; align-self:center; }
.ehc-held__plakat{ max-width:460px; margin:0 0 0 auto !important; }
.ehc-held__plakat img{ width:100%; height:auto; border-radius:6px; box-shadow:0 1px 2px rgba(130,0,0,.10), 0 34px 60px -26px rgba(130,0,0,.40); }
.ehc-lead.ehc-lead--hell p{ color:#ddd7e3 !important; }
/* Naechster Abend: weisse Karte wie eine Eintrittskarte */
.ehc-held .ehc-naechster{ background:#fff; color:var(--gh-text); box-shadow:0 1px 2px rgba(130,0,0,.06), 0 24px 50px -28px rgba(130,0,0,.32); }
.ehc-held .ehc-naechster .et_pb_text_inner, .ehc-held .ehc-naechster__kopf strong, .ehc-held .ehc-naechster__frei{ color:var(--gh-text); }
.ehc-held .ehc-naechster__kopf{ color:var(--gh-grau); }
.ehc-held .ehc-naechster__frei strong{ color:var(--gh-akzent); }
.ehc-held .ehc-balken--hell{ background:var(--gh-linie); }
.ehc-held .ehc-balken--hell i{ background:var(--gh-nacht); }
.ehc-knopf-pfeil.ehc-knopf-pfeil .et_pb_button{ min-height:44px; }
/* Der ganze Kasten fuehrt zum Abend (inc/abende.php) */
.ehc-naechster__link{ display:block; color:inherit !important; text-decoration:none; }
.ehc-naechster__weiter{ display:inline-flex; align-items:center; min-height:52px; margin-top:18px; padding:0 28px; border-radius:999px;
	background:var(--gh-akzent); color:#fff; font-weight:700; font-size:18px; transition:background-color .15s ease, transform .12s ease-out; }
.ehc-naechster__link:active .ehc-naechster__weiter{ transform:scale(.97); }
.ehc-naechster__link:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:4px; border-radius:var(--gh-radius); }
.ehc-lead p{ color:var(--gh-grau) !important; }
.ehc-naechster{ background:var(--gh-nacht); color:#fff; border-radius:var(--gh-radius); padding:22px 24px !important; max-width:460px; margin-bottom:18px !important; }
.ehc-naechster .et_pb_text_inner{ color:#fff; }
.ehc-naechster__kopf{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; color:#bdb6c6; margin-bottom:14px; }
.ehc-naechster__kopf strong{ color:#fff; }
.ehc-naechster__frei{ margin:14px 0 0 !important; padding-bottom:0 !important; color:#fff; }
.ehc-naechster__frei strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-size:1.8rem; font-weight:500; color:var(--gh-licht); }

/* ── Alle Abende ── */
.ehc-abendliste{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:10px; }
.ehc-abendliste li{ display:grid; grid-template-columns:170px 1fr 150px; gap:24px; align-items:center; background:var(--gh-grund-hell);
	border-radius:var(--gh-radius); padding:18px 22px !important; margin:0 !important; list-style:none !important; }
.ehc-abendliste__tag{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.5rem; }
.ehc-abendliste__frei{ font-weight:600; text-align:right; }
.ehc-abendliste li.ist-knapp .ehc-abendliste__frei{ color:var(--gh-akzent); }
.ehc-abendliste li.ist-aus{ background:transparent; box-shadow:inset 0 0 0 1px var(--gh-linie); }
.ehc-abendliste li.ist-aus span{ color:#6f675f; }
.ehc-abendliste li.ist-aus .ehc-balken i{ background:#c9c0b4; }
/* Mehr als 50 frei: keine Zahl, kein Balken (werkzeuge/divi/abende.mjs).
   Der Text nimmt den Platz des Balkens, sonst bricht er in der schmalen
   Spalte um. */
.ehc-balken-leer{ display:none; }
/* Jede Zeile fuehrt zum Kauf dieses Abends (inc/abende.php).
   Das Raster wandert vom Listenpunkt auf den Link. */
.ehc-abendliste li:has(> .ehc-abendliste__link){ display:block; padding:0 !important; }
.ehc-abendliste__link{ display:grid; grid-template-columns:170px 1fr 150px; gap:24px; align-items:center; padding:18px 22px;
	color:inherit !important; text-decoration:none; border-radius:var(--gh-radius); transition:background-color .15s ease; }
.ehc-abendliste__link:hover{ background:#e9e0d1; }
.ehc-abendliste__link:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; }

.ehc-abendliste li.ist-viel .ehc-abendliste__frei{ grid-column:2 / -1; }

/* ── Weg zum Platz (Nacht) ── */
.ehc-weg .et_pb_text_inner{ color:#ddd7e3; }
.ehc-w3w{ display:flex; flex-direction:column; gap:4px; }
.ehc-w3w span{ font-size:.82rem; color:#a59eb0; }
.ehc-w3w strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.9rem; color:var(--gh-licht); }
.ehc-schritt h3{ color:#fff !important; font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; font-size:1.8rem !important; margin:28px 0 8px !important; padding:0 !important; }
.ehc-karte, .ehc-karte .et_pb_image_wrap{ overflow:hidden; border-radius:var(--gh-radius); }
.ehc-karte img{ transition:transform .7s cubic-bezier(.65,0,.35,1); transform-origin:0 0; transform:translate(0,0) scale(1); }

/* ── Chronik ── */
.ehc-plakat .et_pb_image_wrap, .ehc-chronik-karte .ehc-chronik-karte__plakat .et_pb_image_wrap{ display:flex !important; width:100%; aspect-ratio:560/792; align-items:flex-end; justify-content:center; }
/* Jedes Plakat in seinem eigenen Format, unten auf einer Linie wie auf
   einem Regal. Kein Rahmen, keine leeren Streifen bei Quer- und
   Quadratformaten (2025 ist quadratisch). */
.ehc-plakat img, .ehc-chronik-karte .ehc-chronik-karte__plakat img{ width:100%; height:auto; max-height:100%; object-fit:contain; object-position:50% 100%; border-radius:var(--gh-radius);
	filter:drop-shadow(0 12px 18px rgba(130,0,0,.20)); transition:transform .3s cubic-bezier(.23,1,.32,1), filter .3s ease; }
/* width:100% statt auto: Ein noch nicht geladenes Bild haette sonst 0 px
   und wuerde mit loading=lazy nie geladen. drop-shadow folgt dem Plakat,
   nicht dem Rahmen, auch wenn ein sehr hohes Plakat seitlich Luft hat. */
/* Hover: Schatten im Weinrot des Logos, das Plakat hebt sich leicht */
@media (hover:hover) and (pointer:fine){
	.ehc-plakat a:hover img, .ehc-plakat a:focus-visible img{ transform:translateY(-6px); filter:drop-shadow(0 18px 26px rgba(130,0,0,.38)); }
}
.ehc-plakat__text p strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.5rem; color:var(--gh-akzent); }
.ehc-plakat__text{ color:var(--gh-grau); }

/* ── Mitmachen ── */
.ehc-mitmachen img{ aspect-ratio:4/3; object-fit:cover; }

/* ── Fuss ── */
#main-footer, #footer-bottom{ background:var(--gh-nacht); }
#footer-info, #footer-info a, #main-footer .footer-widget, #main-footer a{ color:#c9c3d1; }

/* ── Papierweiss als Grund aller Abschnitte ──
   Divi setzt jede Section ohne eigene Farbe auf Weiss. Abschnitte mit
   eigener Farbe (Nacht, Papier abgesetzt) behalten ihre, weil Divi sie
   ueber die Abschnittsklasse spezifischer setzt. */
#page-container, #main-content, .et_pb_section{ background-color:var(--gh-grund); }

/* ── Terminliste (Das Stueck, [ehc_termine]) ── */
.ehc-terminliste{ list-style:none !important; margin:0 !important; padding:0 !important; }
.ehc-terminliste li{ margin:0 !important; padding:12px 0 !important; border-top:1px solid var(--gh-nacht-2); list-style:none !important; }
.ehc-terminliste li:last-child{ border-bottom:1px solid var(--gh-nacht-2); }
.ehc-terminliste strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.5rem; color:var(--gh-licht); }
.ehc-terminliste__aus{ margin-left:.5em; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:#bdb6c6; }

/* ── Unterseiten (Karten, Spielort, Stück, Presse, Fragen, Verein, Kontakt) ── */

/* ── Kleine Ueberschrift in Karten und Spalten (h3), Garamond kursiv wie ehc-h2 ── */
.ehc-h3 h3, .ehc-h3 .et_pb_module_header{ font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; letter-spacing:-0.01em; line-height:1.05 !important; margin:0 0 12px !important; padding:0 !important; }

/* ── Bilder in den Koepfen: gleiche Form wie auf der Startseite ── */
.ehc-karten-kopf__bild img, .ehc-spielort-kopf__bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--gh-radius); }
.ehc-karten-kopf__bild img{ object-position:50% 70%; }

/* ── Preise: zwei grosse Zahlen, nebeneinander ── */
.ehc-preise{ margin-top:32px; }
.ehc-preis{ background:var(--gh-grund-hell); border-radius:var(--gh-radius); padding:28px 32px !important; }
.ehc-preis p{ margin:0 !important; padding:0 !important; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.ehc-preis strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:3rem; line-height:1; color:var(--gh-akzent); }
.ehc-preis span{ font-size:1.05rem; font-weight:600; }

/* ── Ablauf der Online-Bestellung: wirkliche Reihenfolge, deshalb Zaehler ── */
.ehc-karten-ablauf h3{ font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; font-size:1.8rem !important; margin:0 0 18px !important; padding:0 !important; }
.ehc-schritte{ list-style:none !important; counter-reset:schritt; margin:0 !important; padding:0 !important; display:grid; gap:12px; }
.ehc-schritte li{ counter-increment:schritt; display:block; position:relative; background:#fff; border-radius:var(--gh-radius); padding:18px 22px 18px 4rem !important; margin:0 !important; list-style:none !important; }
.ehc-schritte li::before{ content:counter(schritt); position:absolute; left:22px; top:14px; font-family:var(--gh-schrift-titel); font-style:italic; font-size:2rem; line-height:1; color:var(--gh-akzent); }

/* ── Auf einen Blick (Spielort): Angaben als Zeilen mit Linie ── */
.ehc-fakten{ margin:0 !important; padding:0 !important; display:grid; }
.ehc-fakten > div{ display:grid; grid-template-columns:9rem 1fr; gap:6px 24px; padding:16px 0; border-top:1px solid var(--gh-linie); }
.ehc-fakten > div:last-child{ border-bottom:1px solid var(--gh-linie); }
.ehc-fakten dt{ font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gh-grau); padding-top:.3em; }
.ehc-fakten dd{ margin:0 !important; font-size:1.1rem; }

/* ── Anfahrt (Nacht): Links in Licht, Lageplan in Bildform ── */
.ehc-anfahrt .et_pb_text_inner a{ color:var(--gh-licht); text-decoration:underline; text-underline-offset:3px; }
.ehc-anfahrt .et_pb_text_inner a:hover{ text-decoration-thickness:2px; }
.ehc-lageplan img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--gh-radius); }

/* Platzhalter fuer Dinge, die der Verein noch liefert. Muss vor dem Livegang
   leer sein; die Umrandung faellt beim Durchsehen auf. */
.ehc-todo, .ehc-todo p, p.ehc-todo{ margin:0 0 8px !important; padding:8px 12px !important; border-radius:8px; background:#fff4d6; color:#5a4300 !important; box-shadow:inset 0 0 0 1px #e0b84d; font-size:.95rem !important; line-height:1.5 !important; }
.ehc-todo p{ margin:0 !important; padding:0 !important; box-shadow:none; background:none; }

/* Bild im Seitenverhaeltnis 4:3, ohne Personenkoepfe zu beschneiden
   (nur Luftbilder und Tribuene): oben ausrichten, gekuerzt wird unten. */
.ehc-bild-4-3 img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 0%; border-radius:var(--gh-radius); }

/* Text auf Nacht (Das Stueck, Presse, Fragen) */
.ehc-nacht h3{ color:#fff !important; font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; font-size:1.8rem !important; margin:0 0 8px !important; padding:0 !important; }
.ehc-nacht-abschnitt .ehc-nacht + .ehc-nacht h3{ margin-top:20px !important; }
.ehc-nacht a{ color:var(--gh-licht); text-decoration:underline; text-underline-offset:3px; }
.ehc-nacht a:hover{ color:#fff; }

/* Terminliste Das Stueck */
.ehc-termine ul{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:0; }
.ehc-termine li{ margin:0 !important; padding:12px 0 !important; border-top:1px solid var(--gh-nacht-2); list-style:none !important; }
.ehc-termine li:last-child{ border-bottom:1px solid var(--gh-nacht-2); }
.ehc-termine strong{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.5rem; color:var(--gh-licht); }

/* Presse: ein Eintrag je Zeile, Trennlinie oben */
.ehc-presse-eintrag{ border-top:1px solid var(--gh-linie); padding-top:36px !important; margin-top:36px !important; }
.ehc-presse-eintrag:first-of-type{ margin-top:12px !important; }
.ehc-zitat p{ font-family:var(--gh-schrift-titel); font-style:italic; font-size:1.55rem !important; line-height:1.35 !important; color:var(--gh-titel); }

/* Haeufige Fragen: h3 als Frage, Abstand zwischen den Paaren */
.ehc-frage{ margin-bottom:28px !important; }
.ehc-frage h3{ font-size:1.5rem !important; line-height:1.25 !important; margin:0 0 8px !important; padding:0 !important; }
.ehc-frage p{ margin:0 0 8px !important; }

/* Kachel: ruhige Flaeche auf Papier, ohne Rahmen und Schatten */
.ehc-kachel{ height:100%; }
.ehc-kachel .et_pb_text_inner{ overflow-wrap:break-word; }

/* Links in Kachel-Texten und Listen: Logo-Rot, unterstrichen */
.ehc-kontakt a,
.ehc-liste a{ color:var(--gh-akzent); text-decoration:underline; text-underline-offset:.15em; }
.ehc-kontakt a:hover,
.ehc-liste a:hover{ color:var(--gh-akzent-dunkel); }

/* Aufzaehlung im Text-Modul */
.ehc-liste{ margin:0 0 1em; padding-left:1.2em; }
.ehc-liste li{ margin:0 0 .5em; }

/* Unterstuetzer-Logos: klein und in ihren eigenen Farben */
.ehc-sponsor img{ display:block; width:100%; height:auto !important; }

@media (max-width: 980px){
	.ehc-fakten > div{ grid-template-columns:1fr; }
	.ehc-preis strong{ font-size:2.4rem; }
	.ehc-presse-eintrag{ padding-top:28px !important; margin-top:28px !important; }
	.ehc-zitat p{ font-size:1.35rem !important; }
}

/* ── Rechtsseiten (Impressum, Datenschutz, Ticketbedingungen) ── */
/* Kopf: Titel kleiner als auf der Startseite. „Ticketbedingungen“ ist
   17 Zeichen lang und liefe mit der Startseitengroesse
   clamp(3.4rem, 8vw, 7.2rem) bei 390 px ueber den Rand
   (54 px x ca. 6,8 em = 370 px bei 351 px Platz). */
.ehc-recht-kopf .ehc-titel h1{ font-size:clamp(2.5rem, 7.5vw, 6rem) !important; line-height:.95 !important; }

/* Zwischenueberschriften der Rechtstexte: ehc-h2 waere bis 4rem gross,
   bei 15 Abschnitten zu laut. */
.ehc-recht .ehc-h2 h2{ font-size:clamp(1.7rem, 2.6vw, 2.2rem) !important; line-height:1.1 !important; }

/* Anker: Abstand fuer die feste Kopfzeile von Divi */
.ehc-recht [id]{ scroll-margin-top:120px; }

/* Lesespalte */
.ehc-recht .et_pb_text_inner h3{ font-size:1.25rem; font-weight:600; margin:1.4em 0 .4em; padding:0; }
.ehc-recht .et_pb_text_inner ol,
.ehc-recht .et_pb_text_inner ul{ padding-left:1.4em; margin:0 0 1em; }
.ehc-recht .et_pb_text_inner li{ margin:0 0 .5em; padding-left:.2em; }
.ehc-recht .et_pb_text_inner ol li::marker{ font-weight:700; color:var(--gh-grau); }

/* Verzeichnis in der Randspalte */
.ehc-recht__inhalt-titel{ margin:0 0 .6em !important; color:var(--gh-titel); }
.ehc-recht__inhalt ul{ list-style:none !important; padding:0 !important; margin:0 !important; border-top:1px solid var(--gh-linie); }
.ehc-recht__inhalt li{ margin:0 !important; padding:0 !important; border-bottom:1px solid var(--gh-linie); }
.ehc-recht__inhalt a{ display:block; padding:9px 0; color:var(--gh-text); text-decoration:none; }
.ehc-recht__inhalt a:hover{ color:var(--gh-akzent); text-decoration:underline; }

/* ── Media-Queries: hinter den Grundregeln ──────────────── */

/* Desktop: Randspalte schmal, Lesespalte breit, Verzeichnis laeuft mit */
@media (min-width: 981px){
	.ehc-recht .ehc-recht__rand{ flex:0 0 26% !important; width:26% !important; max-width:26% !important; }
	.ehc-recht .ehc-recht__haupt{ flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0; }
	.ehc-recht-kopf .ehc-recht__rand{ padding-top:1.1rem; }
	.ehc-recht__rand .ehc-recht__inhalt{ position:sticky; top:120px; }
}

/* Tablet und Handy: Spalten untereinander, Verzeichnis vor dem Text */
@media (max-width: 980px){
	.ehc-recht .ehc-recht__rand,
	.ehc-recht .ehc-recht__haupt{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
	.ehc-recht__inhalt{ background:var(--gh-grund-hell); border-radius:var(--gh-radius); padding:16px 20px !important; }
	.ehc-recht__inhalt ul{ border-top:0; }
	.ehc-recht__inhalt li:last-child{ border-bottom:0; }
}

/* ── Chronik: Plakatwand und Einzelseite (Theme Builder, werkzeuge/divi/chronik-vorlagen.mjs) ── */
/* Kopf: Einleitung unten an der Titelzeile ausrichten */
.ehc-chronik-kopf .ehc-chronik-kopf__lead{ align-self:flex-end; }

/* ── Karte: Plakat, Jahr, Titel, Vorlage ── */
.ehc-chronik-karte{ position:relative; }
.ehc-chronik-karte .et_pb_module{ margin-bottom:0 !important; }

/* Plakate stehen unbeschnitten in einem einheitlichen Rahmen 560:792.
   Quer- und Quadratformate (Piraten, Ich + Du) bekommen dunklen Rand statt
   abgeschnittener Kanten. */
.ehc-chronik-karte .ehc-chronik-karte__plakat{ margin-bottom:16px !important; }
.ehc-chronik-karte .ehc-chronik-karte__plakat img{
	display:block;
	transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){ .ehc-chronik-karte:hover .ehc-chronik-karte__plakat img{ transform:translateY(-6px); filter:drop-shadow(0 18px 26px rgba(130,0,0,.38)); } }

/* Jahr: gross, kursiv, Logo-Rot */
.ehc-chronik-karte__jahr p{ margin:0 !important; padding:0 !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.9rem; line-height:1; color:var(--gh-akzent); }

/* Kein Plakat erhalten: das Jahr wird selbst zur Tafel im Plakatformat,
   Nacht mit Licht. Titel und Vorlage stehen darunter wie bei allen Karten. */
.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .ehc-chronik-karte__jahr{
	display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; aspect-ratio:560/792;
	padding:20px 22px !important; background:var(--gh-grund-hell); border-radius:var(--gh-radius);
	box-shadow:inset 0 0 0 1px var(--gh-linie), 0 14px 30px -14px rgba(130,0,0,.30);
	transition:transform .25s ease;
}
.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .ehc-chronik-karte__jahr p{ font-size:clamp(2.6rem, 4.6vw, 4.2rem); color:var(--gh-akzent); }
.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)):hover .ehc-chronik-karte__jahr{ transform:translateY(-4px); }
/* Titel auf derselben Hoehe wie bei Karten mit Plakat (dort steht das Jahr dazwischen) */
.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .et_pb_button_module_wrapper{ margin-top:calc(16px + 1.9rem + 6px) !important; }

/* Titel: ein Knopf-Modul ohne Knopf. Der Link spannt sich ueber die ganze
   Karte, so gibt es einen Link und einen Tabstopp je Produktion. */
.ehc-chronik-karte .et_pb_button_module_wrapper{ position:static !important; margin:6px 0 4px !important; }
.ehc-chronik-karte .ehc-chronik-karte__titel{
	position:static !important; display:inline !important; padding:0 !important; border:0 !important; border-radius:0 !important;
	background:transparent !important; box-shadow:none !important;
	font-family:var(--gh-schrift-titel) !important; font-weight:500 !important; font-size:1.35rem !important; line-height:1.15 !important;
	color:var(--gh-text) !important; text-decoration:none;
}
.ehc-chronik-karte .ehc-chronik-karte__titel::after{
	content:"" !important; display:block !important; position:absolute !important; inset:0; z-index:1;
	margin:0 !important; opacity:1 !important; font-size:0 !important; border-radius:var(--gh-radius);
}
.ehc-chronik-karte .ehc-chronik-karte__titel:hover,
.ehc-chronik-karte:hover .ehc-chronik-karte__titel{ background:transparent !important; padding:0 !important; color:var(--gh-akzent) !important; text-decoration:underline; text-underline-offset:.15em; }
.ehc-chronik-karte .ehc-chronik-karte__titel:focus-visible{ outline:0; }
.ehc-chronik-karte .ehc-chronik-karte__titel:focus-visible::after{ outline:3px solid var(--gh-akzent); outline-offset:6px; }

/* Vorlage und Besonderes: klein, ruhig */
.ehc-chronik-karte__zeile p,
.ehc-chronik-karte__besonders p{ margin:0 !important; padding:0 !important; font-size:.95rem; line-height:1.4; color:var(--gh-grau); }
.ehc-chronik-karte__besonders p{ margin-top:4px !important; font-style:italic; }

/* ── Einzelseite ── */
.ehc-produktion__plakat .et_pb_image_wrap{ display:block; }
.ehc-produktion .ehc-produktion__plakat img{
	display:block; width:auto; max-width:100%; max-height:calc(100vh - 150px); margin:0 auto;
	aspect-ratio:auto; object-fit:contain; border-radius:var(--gh-radius);
	box-shadow:0 1px 2px rgba(130,0,0,.08), 0 22px 44px -18px rgba(130,0,0,.42);
}

/* Ohne Plakat: Tafel mit dem Jahr an seiner Stelle */
.ehc-produktion__ersatz{ display:none !important; }
.ehc-produktion__bild:not(:has(.ehc-produktion__plakat)) .ehc-produktion__ersatz{
	display:flex !important; flex-direction:column; justify-content:flex-end; align-items:flex-start; aspect-ratio:560/792; max-height:calc(100vh - 150px);
	padding:32px 34px !important; background:var(--gh-grund-hell); border-radius:var(--gh-radius);
	box-shadow:inset 0 0 0 1px var(--gh-linie);
}
.ehc-produktion__ersatz p{ margin:0 !important; padding:0 !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(4rem, 9vw, 8rem); line-height:.9; color:var(--gh-akzent); }

.ehc-produktion__jahr p{ margin:0 !important; padding:0 !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1; color:var(--gh-akzent); }

/* Titel kleiner als auf der Startseite: es gibt lange wie
   „Im Märchenhaft oder der Aufstand der Stiefmütter“. */
.ehc-produktion__titel.ehc-titel h1{ font-size:clamp(2.6rem, 5vw, 4.6rem) !important; line-height:.95 !important; overflow-wrap:break-word; }

/* Abgesagt, Hoerfassung, geplant */
.ehc-produktion__status p{ display:inline-block; margin:0 !important; padding:5px 14px !important; border-radius:999px; background:var(--gh-nacht); color:var(--gh-licht); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* Angaben: Zeilen mit Linie, wie .ehc-fakten auf der Spielort-Seite */
.ehc-produktion .ehc-angabe{ margin:0 !important; padding:14px 0 !important; border-bottom:1px solid var(--gh-linie); }
.ehc-produktion :not(.ehc-angabe) + .ehc-angabe{ border-top:1px solid var(--gh-linie); }
.ehc-angabe p{ display:grid; grid-template-columns:7.5rem 1fr; gap:4px 20px; margin:0 !important; padding:0 !important; font-size:1.05rem; line-height:1.5; }
.ehc-angabe__name{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gh-grau); padding-top:.3em; }

.ehc-produktion__inhalt{ margin:28px 0 32px !important; }
.ehc-produktion__inhalt p{ font-size:1.1rem; line-height:1.7; }
.ehc-produktion__inhalt p:last-child{ padding-bottom:0; }
.ehc-produktion__knoepfe .et_pb_module{ margin-bottom:0 !important; }

/* Weitere Jahre */
.ehc-weitere .ehc-chronik-raster{ margin-top:40px; }
.ehc-weitere .ehc-knopf-pfeil{ margin-top:40px !important; }

/* ── Media-Queries: hinter den Grundregeln ── */

/* Desktop: Plakat laeuft beim Lesen mit */
@media (min-width: 981px){
	.ehc-produktion .ehc-produktion__bild{ position:sticky; top:110px; align-self:flex-start; }
}

@media (max-width: 980px){
	.ehc-produktion__ersatz p{ font-size:clamp(3.4rem, 18vw, 6rem); }
	.ehc-produktion .ehc-produktion__plakat img{ max-height:70vh; }
	.ehc-produktion__bild:not(:has(.ehc-produktion__plakat)) .ehc-produktion__ersatz{ aspect-ratio:auto; min-height:220px; max-height:none; }
}

@media (max-width: 600px){
	.ehc-chronik-karte__jahr p{ font-size:1.55rem; }
	.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .ehc-chronik-karte__jahr{ padding:14px 14px !important; }
	.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .ehc-chronik-karte__jahr p{ font-size:2.2rem; }
	.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .et_pb_button_module_wrapper{ margin-top:calc(16px + 1.55rem + 6px) !important; }
	/* „Wirtschaftskriminalität“ muss bei 320 px in die halbe Breite passen */
	.ehc-chronik-karte .ehc-chronik-karte__titel{ font-size:max(1rem, min(1.12rem, 4.1vw)) !important; }
	.ehc-chronik-karte__zeile p,
	.ehc-chronik-karte__besonders p{ font-size:.86rem; }
	.ehc-produktion__titel.ehc-titel h1{ font-size:clamp(1.9rem, 8.4vw, 3rem) !important; }
	.ehc-angabe p{ grid-template-columns:1fr; gap:2px; }
}

/* Fokus auf dunklem Grund: Licht statt Rot (Rot auf Nacht hat nur 1,7:1) */
.ehc-weg :focus-visible, .ehc-nacht-abschnitt :focus-visible, #main-footer :focus-visible, #footer-bottom :focus-visible{ outline-color:var(--gh-licht) !important; }

/* Das Stueck: die drei Versprechen unter dem Inhalt */
.et_pb_row.ehc-versprechen{ margin-top:56px !important; }

/* ── Reiter "Vorschau Kartenkauf" (inc/vorschau-reiter.php, nur Vorfuehrung) ── */
.ehc-vorschau-reiter{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:9000; font-family:var(--gh-schrift-text); }
.ehc-vorschau-reiter summary{ list-style:none; cursor:pointer; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; gap:6px;
	padding:16px 10px; border-radius:0 12px 12px 0; background:var(--gh-nacht); color:#fff; font-weight:700; font-size:15px; box-shadow:0 10px 24px -12px rgba(130,0,0,.5); }
.ehc-vorschau-reiter summary::-webkit-details-marker{ display:none; }
.ehc-vorschau-reiter summary small{ font-weight:400; font-size:12px; color:#ddd7e3; }
.ehc-vorschau-reiter summary:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; }
.ehc-vorschau-reiter[open] summary{ background:var(--gh-akzent); }
.ehc-vorschau-reiter__inhalt{ position:absolute; right:100%; top:50%; transform:translateY(-50%); width:250px; margin-right:8px; padding:18px; border-radius:var(--gh-radius);
	background:#fff; box-shadow:0 1px 2px rgba(130,0,0,.08), 0 24px 48px -20px rgba(130,0,0,.35); }
.ehc-vorschau-reiter__inhalt p{ margin:0 0 12px !important; padding:0 !important; font-size:15px; color:var(--gh-grau); line-height:1.4; }
.ehc-vorschau-reiter__inhalt a{ display:flex; align-items:center; min-height:48px; padding:0 16px; margin-top:8px; border-radius:999px; background:var(--gh-grund-hell);
	color:var(--gh-text); font-weight:700; text-decoration:none; }
.ehc-vorschau-reiter__inhalt a:hover, .ehc-vorschau-reiter__inhalt a:focus-visible{ background:var(--gh-akzent); color:#fff; }
@media (max-width: 767px){
	/* Handy: kleine Pille unten rechts statt Reiter am Rand, verdeckt keinen Text */
	.ehc-vorschau-reiter{ top:auto; bottom:12px; right:12px; transform:none; }
	.ehc-vorschau-reiter summary{ writing-mode:horizontal-tb; transform:none; padding:10px 16px; border-radius:999px; font-size:14px; min-height:44px; }
	.ehc-vorschau-reiter summary small{ display:none; }
	.ehc-vorschau-reiter__inhalt{ top:auto; bottom:calc(100% + 8px); right:0; margin-right:0; transform:none; width:min(260px, calc(100vw - 24px)); }
}

/* ── Sprunglink (functions.php) ── */
.gh-sprunglink{ position:absolute; left:16px; top:-100px; z-index:100000; background:var(--gh-nacht); color:#fff; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none; }
.gh-sprunglink:focus{ top:16px; outline:3px solid var(--gh-licht); outline-offset:2px; }

/* ── Bewegung (js/balken.js, js/bewegung.js) ──
   Greift nur, wenn das Skript die Klassen setzt. Ohne Skript und bei
   "weniger Bewegung" steht alles still und vollstaendig da. */
.ehc-balken.ist-wachsend i{ transition:transform .6s cubic-bezier(.23,1,.32,1); }
.ehc-fuehren-an .ehc-weg__karte{ position:sticky; top:110px; align-self:flex-start; }
.ehc-fuehren-an .ehc-schritt{ opacity:.7; transition:opacity .4s ease; }
.ehc-fuehren-an .ehc-schritt.ist-aktiv{ opacity:1; }
/* Garten: Buchsgarten mit Heckenmuster (Mitte 45 % / 27 %), Zoom 2,2 */
.ehc-karte[data-ort="garten"] img{ transform:translate(-49%,-9.4%) scale(2.2); }
/* Buehne: die beiden Holzpodeste (Mitte 56 % / 68 %), Zoom 2,4 */
.ehc-karte[data-ort="buehne"] img{ transform:translate(-84.4%,-113.2%) scale(2.4); }
.ehc-karte[data-ort="tribuene"] img{ transform:translate(-84.4%,-113.2%) scale(2.4); }
/* Tribuene: zweites Foto liegt deckungsgleich ueber der Karte und zoomt
   auf die Sitzreihen. Ohne Skript steht es als eigenes Bild darunter. */
/* (sticky aus dem Block oben ist zugleich Bezugsrahmen fuer das Tribuenenfoto) */
.ehc-fuehren-an .ehc-karte-tribuene{ position:absolute !important; inset:0; margin:0 !important; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.ehc-fuehren-an .ehc-karte-tribuene, .ehc-fuehren-an .ehc-karte-tribuene .et_pb_image_wrap{ width:100%; height:100%; overflow:hidden; border-radius:var(--gh-radius); }
.ehc-fuehren-an .ehc-karte-tribuene img{ width:100%; height:100%; object-fit:cover; transform-origin:0 0; transform:translate(-51.9%,-73.9%) scale(2); transition:transform .9s cubic-bezier(.23,1,.32,1); }
.ehc-weg__karte[data-ort="tribuene"] .ehc-karte-tribuene{ opacity:1; }
.ehc-weg__karte[data-ort="tribuene"] .ehc-karte-tribuene img{ transform:translate(-62.3%,-88.7%) scale(2.2); }

@media (max-width: 980px){
	.ehc-held__bild img{ aspect-ratio:4/3; }
	.ehc-held__plakat{ max-width:340px; }
	.ehc-fuehren-an .ehc-weg__karte{ order:-1; position:sticky !important; top:0; z-index:3; background:var(--gh-nacht); padding:8px 0 12px; }
	.ehc-fuehren-an .ehc-weg__karte .ehc-karte img{ max-height:38vh; object-fit:cover; }
	.ehc-fuehren-an .ehc-weg__karte .ehc-karte-tribuene{ inset:8px 0 12px; height:auto; }
	.ehc-held--buehne::before{ left:0; width:100%; top:30%; }
	.ehc-abendliste li{ grid-template-columns:1fr auto; gap:10px 16px; padding:16px 18px !important; }
	.ehc-abendliste .ehc-balken{ grid-column:1 / -1; grid-row:2; }
	.ehc-abendliste li.ist-viel .ehc-abendliste__frei{ grid-column:auto; }
	.ehc-abendliste__link{ grid-template-columns:1fr auto; gap:10px 16px; padding:16px 18px; }
	.ehc-naechster{ max-width:none; }
}

/* Tablet: Zeilen mit Seitentitel (h1) einspaltig. In einer halben
   Spalte bricht der grosse Titel sonst nach einem Wort um. */
@media (max-width: 980px){
	.et_pb_row:has(.ehc-titel) > .et_pb_column{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
	.et_pb_row:has(.ehc-titel) > .et_pb_column + .et_pb_column{ margin-top:32px; }
}

/* Schmale Handys: lange Woerter wie "Edelhoftheater" oder
   "Ticketbedingungen" passen sonst bei 320 px nicht in die Zeile. */
@media (max-width: 600px){
	.ehc-titel h1, .ehc-recht-kopf .ehc-titel h1{ font-size:clamp(2.3rem, 12vw, 3.4rem) !important; }
}


/* ── Pruefrunde 3 (03.10.2026) ── */
/* Geschrumpfter Kopf: Linie statt grauem Divi-Schatten */
#main-header.et-fixed-header{ box-shadow:0 1px 0 var(--gh-linie) !important; }
/* Unsichtbare Divi-Suche ist kein Tabstopp */
.et_search_outer, .et_search_form_container{ display:none !important; }
@media (max-width: 980px){
	/* Logo und Menue auf der Inhaltskante wie die Divi-Zeilen (90 %) */
	#main-header .container{ width:90% !important; max-width:none; padding-left:0 !important; padding-right:0 !important; }
}
@media (max-width: 980px){
	/* Keine einzelne Karte allein in der letzten Reihe (39 Produktionen in
	   zwei Spalten): Die letzte Karte bei ungerader Zahl liegt quer ueber
	   beide Spalten, Plakat links, Angaben rechts. Gilt fuer jede Anzahl. */
	.ehc-chronik-raster > .ehc-chronik-karte:last-child:nth-child(odd){
		flex:0 0 100% !important; width:100% !important; max-width:100% !important;
		display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-content:start;
	}
	.ehc-chronik-raster > .ehc-chronik-karte:last-child:nth-child(odd) > :first-child{ grid-column:1; grid-row:1 / span 6; margin-bottom:0 !important; }
	.ehc-chronik-raster > .ehc-chronik-karte:last-child:nth-child(odd) > :not(:first-child){ grid-column:2; }
	.ehc-chronik-raster > .ehc-chronik-karte:last-child:nth-child(odd) .et_pb_button_module_wrapper{ margin-top:0 !important; }
}

/* Spielzeit-Tafel: steht an Stelle des Plakats, bis das Plakat der
   Spielzeit da ist (Startseite, Karten). Plakatformat, Logo-Rot. */
.ehc-spielzeit-tafel{ display:flex; flex-direction:column; justify-content:flex-end; gap:10px; aspect-ratio:560/792; width:100%;
	padding:clamp(24px,3.4vw,40px); border-radius:6px; background:var(--gh-akzent); color:#fff;
	background-image:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,.14), transparent 70%);
	box-shadow:0 1px 2px rgba(130,0,0,.10), 0 34px 60px -26px rgba(130,0,0,.45); }
.ehc-spielzeit-tafel__jahr{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(4rem,9vw,7.5rem); line-height:.85; letter-spacing:-.02em; }
.ehc-spielzeit-tafel__titel{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1; }
.ehc-spielzeit-tafel__zeile{ font-size:1rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.88); padding-top:14px; border-top:1px solid rgba(255,255,255,.35); }
.ehc-held__plakat .et_pb_text_inner, .ehc-karten-plakat .et_pb_text_inner{ width:100%; }

/* Termine und Angaben auf hellem Grund (frueher Nacht, Pruefrunde 3) */
.ehc-hell-abschnitt .ehc-termine strong, .ehc-hell-abschnitt .ehc-terminliste strong{ color:var(--gh-akzent); }
.ehc-hell-abschnitt .ehc-termine li, .ehc-hell-abschnitt .ehc-terminliste li{ border-color:var(--gh-linie); }
.ehc-hell-abschnitt .ehc-terminliste__aus{ color:var(--gh-grau); }
.ehc-hell-abschnitt .ehc-h3 h3{ font-size:1.8rem !important; margin:0 0 8px !important; }
.ehc-hell-abschnitt .ehc-h3 + .ehc-h3 h3{ margin-top:20px !important; }

@media (max-width: 767px){
	.ehc-spielzeit-tafel{ aspect-ratio:auto; min-height:0; padding:24px 22px; }
	.ehc-spielzeit-tafel__jahr{ font-size:3.6rem; }
	.ehc-held__plakat:has(.ehc-spielzeit-tafel){ max-width:none !important; }
}
@media (max-width: 480px){
	/* Chronik als Liste: Plakat links, Angaben rechts. Keine 2+1, Titel mit 16 px passen. */
	.ehc-chronik-raster > .ehc-chronik-karte{
		flex:0 0 100% !important; width:100% !important; max-width:100% !important;
		display:grid !important; grid-template-columns:34% minmax(0,1fr); column-gap:16px; align-content:start;
	}
	.ehc-chronik-raster > .ehc-chronik-karte > :first-child{ grid-column:1; grid-row:1 / span 6; margin-bottom:0 !important; }
	.ehc-chronik-raster > .ehc-chronik-karte > :not(:first-child){ grid-column:2; }
	.ehc-chronik-raster > .ehc-chronik-karte .et_pb_button_module_wrapper{ margin-top:0 !important; }
	.ehc-chronik-karte:not(:has(.ehc-chronik-karte__plakat)) .ehc-chronik-karte__jahr p{ font-size:1.6rem; }
}
/* Kontakt: Spielort hell (sonst Nacht direkt ueber der Nacht-Fusszeile) */
.ehc-hell-abschnitt .ehc-w3w span{ color:var(--gh-grau); }
.ehc-hell-abschnitt .ehc-w3w strong{ color:var(--gh-akzent); }

/* ── Pruefrunde 5 ── */
/* Plakate in einem sichtbaren, gleich grossen Rahmen: alle Oberkanten auf einer Linie,
   quadratische Plakate (2025) und Logos (Ich + Du) sitzen unten im Rahmen. */
.ehc-plakat .et_pb_image_wrap{ background:#fff; border-radius:var(--gh-radius); padding:clamp(6px,1.1vw,14px); box-shadow:inset 0 0 0 1px var(--gh-linie); }
.ehc-plakat img{ border-radius:6px; }
/* Drei Plakate bleiben drei nebeneinander (Das Stueck), auch auf Tablet und Handy */
.ehc-plakatreihe--3{ flex-wrap:nowrap !important; }
.ehc-plakatreihe--3 > .et_pb_column{ flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0; }
@media (max-width: 600px){ .ehc-plakatreihe--3{ column-gap:12px !important; gap:12px !important; } .ehc-plakatreihe--3 .ehc-plakat__text p strong{ font-size:1.2rem; } }
/* Zwei Knoepfe nebeneinander (Mitmachen-Kopf) */
.ehc-spalte-knoepfe{ flex-direction:row !important; flex-wrap:wrap !important; align-items:center; column-gap:16px; }
.ehc-spalte-knoepfe > :not(.et_pb_button_module_wrapper){ flex:0 0 100%; width:100%; }
.ehc-spalte-knoepfe > .et_pb_button_module_wrapper{ flex:0 0 auto; width:auto; margin-bottom:12px !important; }
/* Anfahrt: Lageplan laeuft neben dem langen Weg mit */
@media (min-width: 981px){ .ehc-anfahrt__bild{ position:sticky; top:110px; align-self:flex-start; } }
/* Chronik-Einzelseite ohne Plakat: rote Tafel wie die Spielzeit-Tafel */
.ehc-produktion__bild:not(:has(.ehc-produktion__plakat)) .ehc-produktion__ersatz{
	background:var(--gh-akzent) !important; box-shadow:0 1px 2px rgba(130,0,0,.10), 0 34px 60px -26px rgba(130,0,0,.45) !important;
	background-image:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,.14), transparent 70%) !important; }
.ehc-produktion__ersatz p{ color:#fff !important; }
.ehc-produktion__ersatz .et_pb_text_inner::after{ content:"Edelhoftheater Kirrweiler"; display:block; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.35);
	font-family:var(--gh-schrift-text); font-style:normal; font-size:1rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.88); }
.ehc-naechster__preis{ margin:6px 0 0 !important; padding:0 !important; font-size:1rem; color:var(--gh-grau); }
.ehc-held .ehc-naechster .ehc-naechster__preis{ color:var(--gh-grau); }

/* E-Mail-Adressen nicht am Bindestrich umbrechen (ich-will-auch@…), ab Tablet */
@media (min-width: 768px){ .et_pb_text_inner a[href^="mailto:"]{ white-space:nowrap; } }

/* ── Videos nach Klick (inc/einbettung.php) ── */
.ehc-video{ border-radius:var(--gh-radius); overflow:hidden; background:var(--gh-akzent); color:#fff; position:relative; }
/* Vor dem Klick so hoch wie der Inhalt (mind. 16:9), danach genau 16:9 fuer das Video */
.ehc-video:not([data-offen]) .ehc-video__tor{ min-height:min(240px, 56.25vw); }
.ehc-video[data-offen]{ aspect-ratio:16/9; }
.ehc-video__tor{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; padding:clamp(18px,2.4vw,28px);
	background-image:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.14), transparent 70%); }
.ehc-video__titel{ margin:0 !important; padding:0 !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.1; color:#fff; }
.ehc-video__knopf{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px 0 16px; border:0; border-radius:999px; background:#fff; color:var(--gh-akzent);
	font:700 1rem/1.2 var(--gh-schrift-text); cursor:pointer; transition:transform .12s ease-out; }
.ehc-video__knopf::before{ content:""; width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent currentColor; }
.ehc-video__knopf:active{ transform:scale(.97); }
.ehc-video__knopf:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.ehc-video__hinweis{ margin:0 !important; padding:0 !important; font-size:.9rem; line-height:1.4; color:rgba(255,255,255,.88); }
.ehc-video__hinweis a{ color:#fff; text-decoration:underline; text-underline-offset:.15em; }
.ehc-video__ziel, .ehc-video__ziel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ehc-video__ziel:focus{ outline:none; }

/* ── Kalenderblaetter (Das Stueck, [ehc_kalender]) ── */
.ehc-kalender{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:20px; grid-template-columns:repeat(var(--spalten,3), minmax(0,1fr)); }
.ehc-kalender[data-spalten="3"]{ --spalten:3; } .ehc-kalender[data-spalten="4"]{ --spalten:4; } .ehc-kalender[data-spalten="5"]{ --spalten:5; }
.ehc-kalender[data-spalten="2"]{ --spalten:2; } .ehc-kalender[data-spalten="1"]{ --spalten:1; }
.ehc-kalender__blatt{ margin:0 !important; padding:0 !important; list-style:none !important; }
.ehc-kalender__innen{ position:relative; display:flex; flex-direction:column; align-items:center; height:100%; overflow:hidden; border-radius:var(--gh-radius);
	background:#fff; color:var(--gh-text) !important; text-decoration:none; text-align:center;
	box-shadow:0 1px 2px rgba(130,0,0,.08), 0 18px 36px -22px rgba(130,0,0,.32);
	transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s cubic-bezier(.23,1,.32,1); }
/* Ringbindung: zwei Loecher oben, wie ein Abreisskalender */
.ehc-kalender__wochentag{ align-self:stretch; padding:18px 8px 10px; background:var(--gh-akzent); color:#fff; font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
	background-image:radial-gradient(circle at 30% 7px, var(--gh-grund-hell) 3.5px, transparent 4px), radial-gradient(circle at 70% 7px, var(--gh-grund-hell) 3.5px, transparent 4px); }
.ehc-kalender__tag{ padding-top:10px; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(4rem,7vw,5.6rem); line-height:.95; }
.ehc-kalender__monat{ font-family:var(--gh-schrift-titel); font-style:italic; font-size:1.6rem; line-height:1.1; }
.ehc-kalender__zeit{ margin-top:4px; font-size:1rem; font-weight:600; color:var(--gh-grau); }
.ehc-kalender__frei{ margin-top:auto; align-self:stretch; padding:12px 10px 14px; border-top:1px dashed var(--gh-linie); margin-top:16px; font-size:1rem; font-weight:600; color:var(--gh-grau); }
.ehc-kalender__blatt.ist-knapp .ehc-kalender__frei{ color:var(--gh-akzent); }
@media (hover:hover) and (pointer:fine){
	a.ehc-kalender__innen:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 2px 4px rgba(130,0,0,.10), 0 28px 50px -24px rgba(130,0,0,.45); }
	a.ehc-kalender__innen:hover .ehc-kalender__frei{ color:var(--gh-akzent); }
}
a.ehc-kalender__innen:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:4px; }
a.ehc-kalender__innen:active{ transform:scale(.98); }
/* Ausverkauft: blasser, mit Stempel quer ueber dem Blatt */
.ehc-kalender__blatt.ist-aus .ehc-kalender__innen{ background:var(--gh-grund); box-shadow:inset 0 0 0 1px var(--gh-linie); }
.ehc-kalender__blatt.ist-aus .ehc-kalender__wochentag{ background-color:#9c8f84; }
.ehc-kalender__blatt.ist-aus .ehc-kalender__tag, .ehc-kalender__blatt.ist-aus .ehc-kalender__monat{ color:#8a7f76; }
.ehc-kalender__stempel{ position:absolute; top:52%; left:50%; transform:translate(-50%,-50%) rotate(-14deg); padding:6px 14px; border:3px solid var(--gh-akzent); border-radius:6px;
	color:var(--gh-akzent); font-weight:800; font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(250,246,239,.85); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .ehc-kalender__innen{ transition:none; } a.ehc-kalender__innen:hover{ transform:none; } }
@media (max-width: 980px){ .ehc-kalender[data-spalten="4"], .ehc-kalender[data-spalten="5"]{ --spalten:3; } }
@media (max-width: 600px){
	.ehc-kalender{ gap:14px; }
	.ehc-kalender[data-anzahl]:not([data-anzahl="1"]){ --spalten:2; }
	.ehc-kalender[data-anzahl="3"], .ehc-kalender[data-anzahl="5"], .ehc-kalender[data-anzahl="7"]{ --spalten:1; }
	.ehc-kalender__tag{ font-size:3.6rem; }
	.ehc-kalender__monat{ font-size:1.35rem; }
}

/* Fakten unter dem Kalender: drei Karten mit grosser Angabe */
.ehc-fakt-karte{ height:100%; padding:28px 28px 26px !important; border-radius:var(--gh-radius); background:#fff; box-shadow:inset 0 0 0 1px var(--gh-linie); }
.ehc-fakt-karte .et_pb_text_inner > p:first-child{ margin:0 0 6px !important; font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gh-akzent); }
.ehc-fakt-karte .ehc-fakt-karte__wert{ margin:0 0 10px !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:2.3rem; line-height:1; color:var(--gh-text); }
.ehc-fakt-karte p{ margin:0 0 6px !important; padding:0 !important; }
.ehc-spalte-unten{ align-self:flex-end; }
.ehc-termine-abschnitt .et_pb_row{ padding-top:0 !important; padding-bottom:0 !important; }
.ehc-termine-abschnitt .et_pb_row + .et_pb_row{ margin-top:40px !important; }
.ehc-termine-abschnitt .et_pb_row:last-child{ margin-top:32px !important; }

/* Muster-Abende in der Vorschau */
.ehc-muster-marke{ display:inline-block; margin-right:8px; padding:3px 9px; border-radius:999px; background:#fff4d6; color:#5a4300; box-shadow:inset 0 0 0 1px #e0b84d;
	font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; line-height:1.3; vertical-align:middle; }
.ehc-muster-hinweis{ margin:0 0 20px !important; padding:0 !important; font-size:1rem; color:var(--gh-grau); }

/* Plakat der Spielzeit ([ehc_sz_bild]), sobald eines hinterlegt ist */
.ehc-spielzeit-plakat{ display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 1px 2px rgba(130,0,0,.10), 0 34px 60px -26px rgba(130,0,0,.45); }

/* ══ Spielplan mit mehreren Stuecken (Paket S, inc/spielplan.php) ══════
   Jede Karte eine ganze Zeile: Plakat links, Text rechts. So gibt es
   keine Reihe mit einer Karte allein, egal wie viele Stuecke es sind. */
.ehc-spielplan{ display:grid; gap:28px; margin-top:48px; }
.ehc-spielplan__stueck{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:44px; align-items:center;
	background:#fff; border-radius:20px; padding:28px; box-shadow:0 1px 2px rgba(130,0,0,.06), 0 24px 50px -32px rgba(130,0,0,.30); }
.ehc-spielplan__bild{ display:block; border-radius:12px; overflow:hidden; }
.ehc-spielplan__bild img{ display:block; width:100%; height:auto; }
.ehc-spielplan__bild .ehc-spielzeit-tafel{ aspect-ratio:560/792; }
.ehc-spielplan__marke{ font-size:.8rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gh-akzent) !important; margin:0 0 12px !important; padding:0 !important; }
.ehc-spielplan__titel{ font-family:var(--gh-schrift-titel); font-size:clamp(2.2rem, 3.6vw, 3.2rem) !important; line-height:1 !important; margin:0 0 14px !important; padding:0 !important; }
.ehc-spielplan__titel a{ color:var(--gh-titel) !important; text-decoration:none; }
.ehc-spielplan__titel a:hover{ color:var(--gh-akzent) !important; }
.ehc-spielplan__wann{ font-weight:700; font-size:1.1rem; margin:0 0 14px !important; padding:0 !important; }
.ehc-spielplan__kurz p{ color:var(--gh-grau); font-size:1.1rem; }
.ehc-spielplan__wege{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin:22px 0 0 !important; padding:0 !important; }
.ehc-spielplan__karten{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; line-height:1; border-radius:999px; background:var(--gh-akzent);
	color:#fff !important; font-weight:700; font-size:18px; text-decoration:none; transition:background-color .15s ease, transform .12s ease-out; }
.ehc-spielplan__karten:hover{ background:var(--gh-akzent-dunkel); }
.ehc-spielplan__karten:active{ transform:scale(.97); }
.ehc-spielplan__mehr{ font-weight:700; color:var(--gh-akzent) !important; min-height:44px; display:inline-flex; align-items:center; }
.ehc-spielplan__mehr::after{ content:"→"; margin-left:8px; transition:transform .15s ease; }
.ehc-spielplan__mehr:hover::after{ transform:translateX(3px); }
.ehc-spielplan__ueber{ font-size:56px !important; margin:0 !important; }
.ehc-spielplan__leer{ font-size:1.15rem; }
/* Startseite: "Ausserdem im Spielplan" nur, wenn es ein zweites Stueck gibt */
.ehc-weitere-abschnitt:not(:has(.ehc-spielplan)){ display:none !important; }
.ehc-weitere-abschnitt .ehc-spielplan{ margin-top:28px; }

/* Abende nach Stueck (Startseite, Kartenseite bei mehreren Stuecken) */
.ehc-abendgruppe + .ehc-abendgruppe{ margin-top:40px; }
.ehc-abendgruppe{ scroll-margin-top:140px; }
.ehc-abendgruppe__kopf{ margin-bottom:14px; }
.ehc-abendgruppe__marke{ font-size:.8rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gh-akzent) !important; margin:0 0 6px !important; padding:0 !important; }
.ehc-abendgruppe__titel{ font-family:var(--gh-schrift-titel); font-size:2rem !important; line-height:1.1 !important; margin:0 0 6px !important; padding:0 !important; }
.ehc-abendgruppe__titel a{ color:var(--gh-titel) !important; text-decoration:none; }
.ehc-abendgruppe__titel a:hover{ color:var(--gh-akzent) !important; }
.ehc-abendgruppe__fakten{ color:var(--gh-grau); margin:0 !important; padding:0 !important; }

/* Mitwirkende (Seite des Stuecks, Chronik) */
.ehc-mitwirkende dl{ margin:0 0 20px !important; padding:0 !important; display:grid; }
.ehc-mitwirkende dl > div{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:4px 24px; padding:12px 0; border-top:1px solid var(--gh-linie); }
.ehc-mitwirkende dl > div:last-child{ border-bottom:1px solid var(--gh-linie); }
.ehc-mitwirkende dt{ font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gh-grau); padding-top:.3em; }
.ehc-mitwirkende dd{ margin:0 !important; font-size:1.1rem; }
.ehc-mitwirkende__ueber{ font-size:1.5rem !important; margin:28px 0 10px !important; padding:0 !important; }
.ehc-mitwirkende--chronik{ margin-top:32px; }

/* Seite eines Stuecks: Plakat oder Tafel rechts im Kopf */
.ehc-stueck-kopf__plakat{ max-width:420px; margin:0 0 0 auto !important; }
.ehc-stueck-kopf__plakat img{ display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 30px 60px -30px rgba(22,19,28,.45); }

/* Spielort, "Karten fuer den Sommer": Text links, der naechste Abend rechts */
.ehc-spielort-karten .ehc-naechster{ margin:0 0 0 auto !important; }

@media (max-width:980px){
	.ehc-spielplan__stueck{ grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:28px; padding:22px; }
	.ehc-stueck-kopf__plakat{ max-width:340px; margin:0 !important; }
	.ehc-spielort-karten .ehc-naechster{ margin:0 !important; }
}
@media (max-width:600px){
	.ehc-spielplan__stueck{ grid-template-columns:minmax(0,1fr); }
	.ehc-spielplan__bild{ max-width:260px; }
	.ehc-spielplan__ueber{ font-size:40px !important; }
	.ehc-mitwirkende dl > div{ grid-template-columns:minmax(0,1fr); }
}
/* Ueberschrift und Text nebeneinander oben buendig (Spielplan "Was davor kam") */
.ehc-reihe-oben{ align-items:flex-start !important; }
.ehc-reihe-oben .ehc-h2{ margin-top:-.12em !important; }
/* Startseite: Abstand zwischen "Ausserdem im Spielplan" und "Alle Abende" */
.ehc-weitere-abschnitt + .ehc-abende-abschnitt{ padding-top:72px !important; }
/* Ueberschrift links, Text rechts: beide oben beginnen lassen, sonst steht die
   Ueberschrift mittig neben dem Text und wirkt nicht zugehoerig (Jens 04.10.,
   Spielort "Karten fuer den Sommer"). Gilt fuer jede solche Reihe, ausser
   wo der Text bewusst unten steht (.ehc-spalte-unten). */
.et_flex_row:has(> .et_pb_column:first-child > .ehc-h2:only-child):not(:has(.ehc-spalte-unten)){ align-items:flex-start !important; }
.et_flex_row:has(> .et_pb_column:first-child > .ehc-h2:only-child):not(:has(.ehc-spalte-unten)) > .et_pb_column{ justify-content:flex-start !important; }
/* Stueck ohne Angaben zu Mitwirkenden: Abschnitt "Wer mitwirkt" faellt weg */
.et_pb_section:has(.ehc-mitwirkende--leer){ display:none !important; }

/* Chronik nach Sparte filtern (js/chronik-filter.js) */
.ehc-chronik-karte[hidden]{ display:none !important; }
.ehc-chronik-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; width:90%; max-width:1180px; margin:0 auto 36px; }
.ehc-chronik-filter__knopf{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border:1.5px solid var(--gh-akzent); border-radius:999px;
	background:#fff; color:var(--gh-akzent); font:inherit; font-weight:700; font-size:1rem; line-height:1; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.ehc-chronik-filter__knopf span{ font-weight:400; opacity:.8; }
.ehc-chronik-filter__knopf:hover{ background:rgba(130,0,0,.06); }
.ehc-chronik-filter__knopf[aria-pressed="true"]{ background:var(--gh-akzent); color:#fff; }
.ehc-chronik-filter__knopf:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; }
.ehc-chronik-filter__status{ margin:0 0 0 auto !important; padding:0 !important; color:var(--gh-grau); }
@media (max-width:600px){
	.ehc-chronik-filter__status{ flex-basis:100%; margin:4px 0 0 !important; }
}

/* ── css/kacheln.css ── */
/* ════════════════════════════════════════════════════════════
   Kacheln: Divi-5-Blurb (blurb() + kacheln() in werkzeuge/divi/divi5.mjs)
   Flaeche, Innenabstand, Radius, Farben und Symbol stehen als Modulwerte
   im Builder. Hier nur, was Divi nicht als Feld hat:
   gleiche Hoehe je Reihe, Symbol im runden Feld, Titel-Schrift, Links.
   ════════════════════════════════════════════════════════════ */

/* Gleiche Hoehe: Spalten strecken sich in der Flex-Reihe, die Kachel
   fuellt ihre Spalte. Ohne das endet jede Flaeche dort, wo ihr Text endet. */
.gh-kacheln{ align-items:stretch !important; }
.gh-kacheln > .et_pb_column{ display:flex !important; flex-direction:column; }
.gh-kacheln > .et_pb_column > .gh-kachel{ flex:1 1 auto; height:100%; margin-bottom:0 !important; }

/* Inhalt linksbuendig, volle Breite (Divi zentriert das Symbol und kappt
   den Inhalt sonst auf 550 px). */
.gh-kachel .et_pb_blurb_content{ max-width:none !important; width:100%; height:100%; display:flex; flex-direction:column; gap:0 !important; align-items:flex-start; text-align:left; }
.gh-kachel .et_pb_blurb_container{ width:100%; padding:0 !important; }

/* Symbol: Logo-Rot in einem runden Feld, gleiche Groesse in jeder Kachel */
.gh-kachel .et_pb_main_blurb_image{ width:auto !important; max-width:none !important; margin:0 0 20px !important; text-align:left; line-height:0; }
/* !important: Divis eigene Regel (.et_pb_blurb .et_pb_image_wrap:not(...){display:block}) ist spezifischer */
.gh-kachel .et_pb_main_blurb_image .et_pb_image_wrap{ display:grid !important; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(130,0,0,.08); }
.gh-kachel .et_pb_main_blurb_image .et-pb-icon{ font-size:24px !important; line-height:1 !important; width:auto !important; margin:0 !important; color:var(--gh-akzent) !important; }
.gh-kachel .et_pb_main_blurb_image a{ display:inline-block; border-radius:50%; }

/* Titel: Garamond kursiv wie h2/h3 der Seiten. Groesse kommt aus dem Modul. */
.gh-kachel .et_pb_module_header{ font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; letter-spacing:-0.01em; margin:0 0 12px !important; padding:0 !important; hyphens:manual; }
.gh-kachel .et_pb_module_header a{ color:inherit; text-decoration:none; }
.gh-kachel .et_pb_module_header a:hover{ color:var(--gh-akzent); }

/* Text: keine automatische Trennung, lange Adressen duerfen umbrechen */
.gh-kachel .et_pb_blurb_description{ hyphens:manual; overflow-wrap:break-word; }
.gh-kachel .et_pb_blurb_description p{ margin:0 0 12px; padding:0; }
.gh-kachel .et_pb_blurb_description p:last-child{ margin-bottom:0; }
.gh-kachel .et_pb_blurb_description a{ color:var(--gh-akzent); text-decoration:underline; text-underline-offset:.15em; }
.gh-kachel .et_pb_blurb_description a:hover{ color:var(--gh-akzent-dunkel); }
.gh-kachel .et_pb_blurb_description .ehc-todo{ margin-top:4px !important; }

/* Hover und Fokus: leicht anheben, Schatten im Weinrot des Logos (wie die
   Plakate in style.css). Nur mit Maus, auf Touch bleibt die Kachel ruhig. */
@media (hover:hover) and (pointer:fine){
	.gh-kacheln > .et_pb_column > .gh-kachel{ transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s cubic-bezier(.23,1,.32,1); }
	.gh-kacheln > .et_pb_column > .gh-kachel:hover,
	.gh-kacheln > .et_pb_column > .gh-kachel:focus-within{ transform:translateY(-4px); box-shadow:0 18px 36px -18px rgba(130,0,0,.35); }
}
@media (prefers-reduced-motion:reduce){
	.gh-kacheln > .et_pb_column > .gh-kachel{ transition:none; }
	.gh-kacheln > .et_pb_column > .gh-kachel:hover,
	.gh-kacheln > .et_pb_column > .gh-kachel:focus-within{ transform:none; }
}

/* Telefon: etwas weniger Innenabstand, damit Titel und E-Mail-Adressen
   in eine Zeile passen */
@media (max-width: 767px){
	.gh-kacheln > .et_pb_column > .gh-kachel{ padding:24px !important; }
	.gh-kachel .et_pb_main_blurb_image .et_pb_image_wrap{ width:48px; height:48px; }
	.gh-kachel .et_pb_main_blurb_image .et-pb-icon{ font-size:21px !important; }
}

/* ── css/kartenweg.css ── */
/* ══ Kartenweg: Kartenseite, Produktseite eines Abends, Kasse ══════════
   Laedt nach style.css (functions.php). Aufbau nach den Vorbildern in
   werkzeuge/divi/VORBILDER-KARTENWEG.md. Rot, Nacht und Licht: Logo-Rot
   nur fuer Handlungen, kein Gold auf Hell, Schatten im Weinrot des Logos.
   Knopf-Effekte (Vorhang, Rampenlicht, Ticket-Symbol) stehen in
   css/knoepfe.css und werden hier nicht beruehrt. */

:root{
	--ehc-schatten-karte: 0 1px 2px rgba(130,0,0,.06), 0 24px 48px -30px rgba(130,0,0,.32);
	--ehc-schatten-hoch:  0 2px 4px rgba(130,0,0,.08), 0 30px 56px -28px rgba(130,0,0,.42);
	--ehc-stummel: 58px; /* Hoehe des Abrisses an der Eintrittskarte */
}

/* Fusszeile immer unten, auch auf kurzen Seiten (Produkt, Kasse) */
#page-container{ min-height:100vh; display:flex; flex-direction:column; }
#et-main-area{ flex:1 0 auto; display:flex; flex-direction:column; }
#main-content{ flex:1 0 auto; }

/* ════ 1. Kartenseite (/karten/, werkzeuge/divi/karten.mjs) ════ */

/* Kino-Muster: Plakat links schmal und mitlaufend, rechts Stueck und Abende.
   Die Spalten sind in Divi 1/2 + 1/2, hier 38 : 62. */
.ehc-karten-kopf{ position:relative; overflow:clip; }
/* Rampenlicht sitzt hinter dem mitlaufenden Plakat und laeuft mit */
.ehc-karten-kino__plakat::before{ content:""; position:absolute; inset:-18% -30% -10% -30%; z-index:-1; pointer-events:none;
	background:radial-gradient(ellipse 50% 50% at 50% 45%, rgba(130,0,0,.11), rgba(130,0,0,.04) 50%, transparent 74%); }
.ehc-karten-kopf .et_pb_row{ position:relative; z-index:1; }
.ehc-karten-kino{ align-items:flex-start; }
.ehc-karten-kino > .ehc-karten-kino__plakat{ flex:0 0 calc(38% - 32px) !important; width:calc(38% - 32px) !important; max-width:calc(38% - 32px) !important;
	position:sticky; top:118px; align-self:flex-start; }
.ehc-karten-kino > .ehc-karten-kino__inhalt{ flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0; }
.ehc-karten-plakat, .ehc-karten-plakat .et_pb_image_wrap{ display:block; width:100%; margin-bottom:18px !important; }
.ehc-karten-plakat img{ display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 1px 2px rgba(130,0,0,.10), 0 34px 60px -26px rgba(130,0,0,.45); }
.ehc-karten-kopf .ehc-titel h1{ font-size:clamp(3rem,5.4vw,4.75rem) !important; }
.ehc-karten-kino__h2 h2{ font-size:clamp(2.1rem,3.6vw,2.9rem) !important; }

/* Eckdaten: wie .ehc-fakten (Spielort), zweispaltig, Dauer ueber die ganze Breite */
.ehc-eckdaten.ehc-fakten{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px; }
.ehc-eckdaten.ehc-fakten > div{ display:block; padding:14px 0; border-top:1px solid var(--gh-linie); border-bottom:0; }
.ehc-eckdaten.ehc-fakten > div:last-child{ grid-column:1 / -1; border-bottom:1px solid var(--gh-linie); }
.ehc-eckdaten dt{ margin-bottom:4px; padding-top:0; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--gh-grau); }
.ehc-eckdaten dd{ font-size:1.08rem; line-height:1.45; }
.ehc-eckdaten dd a{ color:var(--gh-akzent); text-decoration:underline; text-underline-offset:.15em; }
.ehc-eckdaten dd .ehc-todo{ margin:0 !important; }

/* Abschnittskopf: Ueberschrift links, Einleitung rechts, unten buendig */
.ehc-karten-zeile{ align-items:flex-end; margin-bottom:44px !important; }

/* Bestellung: beide Spalten oben buendig */
.ehc-kartenbereich .et_pb_row{ align-items:flex-start; }

/* Tribuene in der Bestellung */
.ehc-karten-tribuene, .ehc-karten-tribuene .et_pb_image_wrap{ display:block; width:100%; margin-bottom:12px !important; }
.ehc-karten-tribuene img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 60%; border-radius:var(--gh-radius);
	box-shadow:0 2px 4px rgba(130,0,0,.08), 0 36px 64px -34px rgba(130,0,0,.40); }
.ehc-karten-tribuene__text a{ color:var(--gh-akzent); text-decoration:underline; text-underline-offset:.15em; }

/* Die Abende als Eintrittskarten: weisse Karte, unten ein Abriss mit
   Lochung links und rechts. Drei nebeneinander, Tablet zwei, Handy eine.
   Nur auf der Kartenseite, die Startseite behaelt ihre Liste. */
.ehc-karten-abende .ehc-abendliste{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.ehc-karten-abende .ehc-abendliste li,
.ehc-karten-abende .ehc-abendliste li:has(> .ehc-abendliste__link){ position:relative; display:flex; flex-direction:column; padding:0 !important;
	background:#fff; border-radius:var(--gh-radius); box-shadow:var(--ehc-schatten-karte); transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease; }
/* Lochung: zwei Halbkreise in der Farbe des Abschnitts auf Hoehe der Abrisslinie */
.ehc-karten-abende .ehc-abendliste li::before,
.ehc-karten-abende .ehc-abendliste li::after{ content:""; position:absolute; bottom:calc(var(--ehc-stummel) - 11px); width:22px; height:22px; border-radius:50%; background:var(--gh-grund-hell); z-index:1; }
.ehc-karten-abende .ehc-abendliste li::before{ left:-11px; }
.ehc-karten-abende .ehc-abendliste li::after{ right:-11px; }
.ehc-karten-abende .ehc-abendliste li{ align-items:stretch; }
.ehc-karten-abende .ehc-abendliste__link{ display:flex; flex-direction:column; align-items:stretch; flex:1 1 auto; padding:0; gap:0; border-radius:var(--gh-radius); }
.ehc-karten-abende .ehc-abendliste__link:hover{ background:transparent; }
.ehc-karten-abende .ehc-abendliste__link:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:3px; }
.ehc-karten-abende .ehc-abendliste__tag{ display:block; padding:26px 28px 0; font-size:2.1rem; line-height:1.1; color:var(--gh-text); }
.ehc-karten-abende .ehc-abendliste .ehc-balken{ margin:16px 28px 0; }
.ehc-karten-abende .ehc-abendliste__frei{ display:block; padding:12px 28px 24px; text-align:left; font-size:1.05rem; }
/* Abriss: gestrichelte Linie, darunter die Handlung */
.ehc-karten-abende .ehc-abendliste__link::after{ content:"Karten für diesen Abend"; display:flex; align-items:center; margin-top:auto; min-height:var(--ehc-stummel);
	padding:0 28px; border-top:2px dashed var(--gh-linie); color:var(--gh-akzent); font-weight:700; font-size:1.05rem; }
/* Ausverkauft: kein Link, der Abriss sagt es */
.ehc-karten-abende .ehc-abendliste li.ist-aus{ background:#fff; box-shadow:inset 0 0 0 1px var(--gh-linie); }
.ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-abendliste__tag{ color:#6f675f; }
.ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-abendliste__frei{ display:flex; align-items:center; margin-top:auto; min-height:var(--ehc-stummel); padding:0 28px;
	margin-top:auto; border-top:2px dashed var(--gh-linie); font-weight:700; text-transform:none; }
.ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-balken{ margin-bottom:22px; }
@media (hover:hover) and (pointer:fine){
	.ehc-karten-abende .ehc-abendliste li:has(> .ehc-abendliste__link:hover){ transform:translateY(-4px); box-shadow:var(--ehc-schatten-hoch); }
	.ehc-karten-abende .ehc-abendliste__link:hover::after{ text-decoration:underline; text-underline-offset:.18em; }
}
@media (prefers-reduced-motion: reduce){
	.ehc-karten-abende .ehc-abendliste li{ transition:none; }
	.ehc-karten-abende .ehc-abendliste li:has(> .ehc-abendliste__link:hover){ transform:none; }
}

/* Preise in der Bestellung: zwei Zeilen auf weisser Flaeche */
.ehc-preis.ehc-preis--liste{ background:#fff; padding:6px 28px !important; box-shadow:var(--ehc-schatten-karte); }
.ehc-preis.ehc-preis--liste p{ padding:16px 0 !important; border-bottom:1px solid var(--gh-linie); flex-wrap:nowrap; }
.ehc-preis.ehc-preis--liste p:last-child{ border-bottom:0; }
.ehc-preis.ehc-preis--liste strong{ flex:none; min-width:3.3em; font-size:2.6rem; }

/* Vor dem Kauf: zwei weisse Flaechen auf Papier */
.ehc-karten-hinweis{ background:#fff; border-radius:var(--gh-radius); padding:36px 36px 32px !important; box-shadow:var(--ehc-schatten-karte); }
.ehc-karten-hinweis .et_pb_text_inner a{ color:var(--gh-akzent); text-decoration:underline; text-underline-offset:.15em; }

/* ════ 2. Kasse und Produktseite (inc/kasse.php) ════
   Fuer Menschen, die selten online kaufen: grosse Schrift, grosse Felder,
   eine Spalte, ein deutlicher Knopf. */
.woocommerce-checkout #main-content, .single-product #main-content{ font-size:19px; }
.woocommerce form .form-row label{ font-size:1.05rem; font-weight:600; margin-bottom:6px; }
.woocommerce form .form-row input.input-text{ font-size:1.15rem; min-height:56px; padding:12px 16px !important; border:1.5px solid #8a7f70 !important; border-radius:10px; background:#fff !important; color:var(--gh-text) !important; }
.woocommerce form .form-row input.input-text:focus{ border-color:var(--gh-akzent) !important; outline:3px solid var(--gh-akzent); outline-offset:1px; }
.woocommerce form .form-row .description{ font-size:1rem; color:var(--gh-grau); margin-top:6px; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2{ width:100%; float:none; }
.woocommerce-checkout h3, #order_review_heading{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:2rem; margin:32px 0 16px; }
.woocommerce #payment #place_order, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button{ background:var(--gh-akzent) !important; color:#fff !important; font-size:1.2rem !important; font-weight:700; padding:18px 32px !important; border-radius:999px !important; width:100%; }
.woocommerce #payment #place_order:hover, .woocommerce .single_add_to_cart_button:hover{ background:var(--gh-akzent-dunkel) !important; }
.woocommerce #payment ul.payment_methods li{ font-size:1.1rem; padding:14px 0; }
.woocommerce .quantity .qty{ width:5.5em; min-height:56px; font-size:1.25rem; border-radius:10px; }
.woocommerce-checkout #left-area, .woocommerce-cart #left-area{ width:100%; max-width:none; margin:0; float:none; padding-right:0; }
.woocommerce-checkout #main-content .container{ width:90%; max-width:1180px; }
/* Desktop: links Angaben und Bezahlen, rechts "Ihre Karten" (laeuft mit).
   #order_review wird per display:contents aufgeloest, damit Tabelle und
   Zahlung eigene Rasterzellen bekommen; WooCommerce ersetzt beide weiter
   per Ajax ueber ihre Klassen. Erst ab 981 px, darunter eine Spalte. */
@media (min-width: 981px){
	.woocommerce-checkout form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:64px; align-items:start; }
	.woocommerce-checkout form.checkout > *{ grid-column:1; }
	.woocommerce-checkout form.checkout #order_review{ display:contents; }
	.woocommerce-checkout form.checkout #customer_details{ grid-column:1; grid-row:1; }
	.woocommerce-checkout form.checkout #order_review_heading{ grid-column:2; grid-row:1; margin-top:0; }
	.woocommerce-checkout form.checkout .woocommerce-checkout-review-order-table{ grid-column:2; grid-row:1 / span 2; margin-top:64px !important; position:sticky; top:118px; }
	.woocommerce-checkout form.checkout #payment{ grid-column:1; grid-row:2; margin-top:12px; }
	.woocommerce-checkout #customer_details h3{ margin-top:0; }
}
.woocommerce-checkout #main-content .container::before{ display:none; }
.woocommerce-checkout #main-content .container{ padding-top:56px; padding-bottom:96px; }
.woocommerce-checkout .entry-title, .woocommerce-checkout .main_title{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(2.6rem,5vw,4rem); }
.ehc-kasse-schritte{ list-style:none !important; counter-reset:k; display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px !important; padding:0 !important; }
.ehc-kasse-schritte li{ counter-increment:k; display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 18px 9px 9px !important; border-radius:999px; background:var(--gh-grund-hell); font-weight:600; font-size:1rem; line-height:1.2; color:var(--gh-grau); }
.ehc-kasse-schritte li::before{ content:counter(k); display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--gh-text); font-weight:700; line-height:1; }
.ehc-kasse-schritte li.ist-erledigt::before{ content:"✓"; background:var(--gh-akzent); color:#fff; }
.ehc-kasse-schritte li.ist-erledigt:has(a){ padding:0 !important; }
.ehc-kasse-schritte li.ist-erledigt:has(a)::before{ display:none; }
.ehc-kasse-schritte li a{ display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 18px 9px 9px; border-radius:inherit; color:inherit; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:background-color .2s ease, color .2s ease, text-decoration-color .2s ease; }
.ehc-kasse-schritte li a::before{ content:"✓"; display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--gh-akzent); color:#fff; font-weight:700; line-height:1; }
.ehc-kasse-schritte li a:hover, .ehc-kasse-schritte li a:focus-visible{ color:var(--gh-akzent); text-decoration-color:currentColor; }
.ehc-kasse-schritte li.ist-aktuell{ background:var(--gh-akzent); color:#fff; }
.ehc-kasse-schritte li.ist-aktuell::before{ background:#fff; color:var(--gh-akzent); }
.woocommerce table.shop_table{ border:0; border-radius:var(--gh-radius); overflow:hidden; background:#fff; font-size:1.05rem; box-shadow:var(--ehc-schatten-karte); }
.woocommerce table.shop_table th{ background:transparent !important; color:var(--gh-text) !important; font-weight:700; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ border-top:1px solid var(--gh-linie) !important; padding:14px 18px !important; color:var(--gh-text); }
.woocommerce table.shop_table thead th{ border-top:0 !important; font-size:1rem; font-weight:600; color:var(--gh-grau) !important; }
.woocommerce table.shop_table .product-name{ font-weight:600; }
.woocommerce table.shop_table .product-quantity{ font-weight:700; color:var(--gh-text); }
.woocommerce table.shop_table .order-total td, .woocommerce table.shop_table .order-total th{ font-size:1.25rem; }
.woocommerce-checkout #payment{ background:var(--gh-grund-hell) !important; border-radius:var(--gh-radius); }
.woocommerce-checkout #payment div.payment_box{ background:#fff !important; color:var(--gh-text) !important; font-size:1rem; border-radius:10px; }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:#fff !important; }
/* Meldungen in der Kasse: ruhig auf Papier, Rot nur als Rand */
.woocommerce-checkout #payment .woocommerce-info, .woocommerce-checkout #payment .woocommerce-notice{ background:#fff !important; color:var(--gh-text) !important; box-shadow:inset 0 0 0 1.5px var(--gh-akzent); border-radius:10px; padding:16px 20px !important; font-size:1.05rem; line-height:1.5; }
.woocommerce-checkout #payment .woocommerce-info::before{ display:none; }

/* Kasse: Haekchen gross genug, Aendern/Entfernen, Hinweis Widerruf */
.woocommerce-checkout input[type="checkbox"]{ width:24px; height:24px; margin-right:10px; vertical-align:middle; accent-color:var(--gh-akzent); }
.woocommerce-terms-and-conditions-wrapper label{ font-size:1.05rem; line-height:1.5; }
.ehc-kasse-aendern{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:10px; font-size:1rem; font-weight:400; }
.ehc-kasse-aendern a{ color:var(--gh-akzent); display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; }
.ehc-kasse-aendern__anzahl{ text-decoration:underline; text-underline-offset:.15em; }
/* Entfernen: deutlicher Umrissknopf, 44 px hoch */
.ehc-kasse-aendern a.ehc-kasse-aendern__weg{ white-space:nowrap; min-height:48px; padding:0 18px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--gh-akzent); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.ehc-kasse-aendern__weg span{ font-size:1.35em; line-height:1; }
.ehc-kasse-aendern a.ehc-kasse-aendern__weg:hover{ background:var(--gh-akzent); color:#fff; }
.ehc-kasse-aendern a:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; border-radius:999px; }
/* Hinweis auf der Kartenseite (leerer Warenkorb) */
.ehc-karten-meldung{ width:90%; max-width:1180px; margin:28px auto 0; }
.ehc-karten-meldung :is(.woocommerce-message, .woocommerce-info, .woocommerce-error){ margin:0 !important; padding:16px 20px !important; border-radius:10px; background:#fff !important; color:var(--gh-text) !important;
	box-shadow:inset 0 0 0 1.5px var(--gh-akzent); font-size:1.1rem; list-style:none; }
.ehc-karten-meldung :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before{ display:none; }
.ehc-kasse-hinweis{ font-size:1rem; color:var(--gh-grau); margin:0 0 14px !important; }

/* ════ 3. Produktseite eines Abends ════
   Bild und Kaufkasten nebeneinander, gleich hoch. Der Kasten ist eine
   weisse Karte; darin das Datum als Kalenderblatt. */
.single-product #main-content .container{ width:90%; max-width:1180px; padding-top:36px; padding-bottom:104px; }
.single-product #main-content .container::before{ display:none; }
.single-product #left-area{ width:100%; float:none; padding:0 !important; margin:0; }
.single-product .woocommerce-breadcrumb{ display:none; }
.ehc-produkt-zurueck{ margin:0 0 18px !important; padding:0 !important; }
.ehc-produkt-zurueck a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:600; font-size:1.05rem; color:var(--gh-akzent); text-decoration:none; }
.ehc-produkt-zurueck a::before{ content:"←"; font-size:1.2em; line-height:1; transition:transform .2s ease; }
.ehc-produkt-zurueck a:hover{ text-decoration:underline; text-underline-offset:.18em; }
@media (hover:hover){ .ehc-produkt-zurueck a:hover::before{ transform:translateX(-3px); } }

.single-product div.product > .clearfix{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:48px; align-items:start; }
.single-product div.product > .clearfix::before, .single-product div.product > .clearfix::after{ display:none; }
/* Bild: 4:5 oben buendig mit dem Kaufkasten, laeuft beim Scrollen mit. Kein Zoom, keine Lupe */
.single-product div.product div.images{ float:none !important; width:100% !important; margin:0 !important; opacity:1 !important; position:sticky !important; top:118px; }
.single-product div.product div.images .woocommerce-product-gallery__wrapper,
.single-product div.product div.images .woocommerce-product-gallery__image{ height:100%; margin:0; }
.single-product div.product div.images img{ display:block; width:100%; height:auto !important; aspect-ratio:4/5; object-fit:cover; object-position:50% 58%;
	border-radius:var(--gh-radius); box-shadow:0 2px 4px rgba(130,0,0,.08), 0 36px 64px -34px rgba(130,0,0,.42); }
.single-product .woocommerce-product-gallery__trigger, .single-product .flex-control-nav{ display:none !important; }

/* Kaufkasten */
.single-product div.product div.summary{ float:none; width:100%; margin:0 !important; padding:40px 44px 36px; background:#fff; border-radius:var(--gh-radius); box-shadow:var(--ehc-schatten-karte); }
.ehc-produkt-marke{ margin:0 0 8px !important; padding:0 !important; font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gh-akzent); }
.single-product .product_title{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:clamp(2.4rem,3.6vw,3.4rem); line-height:1; margin:0 0 26px !important; padding:0 !important; }

/* Datum als Kalenderblatt: Wochentag, grosse Zahl, Monat. Bricht nicht um. */
.ehc-produkt-termin{ display:flex; align-items:center; gap:24px; margin:0 0 22px; padding:0 0 24px; border-bottom:1px solid var(--gh-linie); }
.ehc-produkt-termin p{ margin:0 !important; padding:0 !important; }
.ehc-produkt-termin__blatt{ flex:none; display:flex; flex-direction:column; align-items:center; width:116px; border-radius:12px; overflow:hidden;
	background:var(--gh-grund-hell); box-shadow:inset 0 0 0 1px var(--gh-linie); text-align:center; }
.ehc-produkt-termin__wochentag{ align-self:stretch; padding:7px 4px 6px; background:var(--gh-nacht); color:#fff; font-size:1rem; font-weight:700; letter-spacing:.02em; line-height:1.2; }
.ehc-produkt-termin__tag{ padding-top:8px; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:3.7rem; line-height:1; color:var(--gh-text); }
.ehc-produkt-termin__monat{ padding:2px 6px 11px; font-size:1rem; font-weight:600; line-height:1.2; color:var(--gh-grau); white-space:nowrap; }
.ehc-produkt-termin__mehr{ min-width:0; font-size:1.08rem; line-height:1.45; color:var(--gh-grau); }
.ehc-produkt-termin__mehr .ehc-produkt-termin__zeit{ margin-bottom:6px !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:2.3rem; line-height:1; color:var(--gh-text); }

/* Preise: beide Kartenarten als Zeilen */
.ehc-produkt-preise{ margin:0 0 18px; }
.ehc-produkt-preise__zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 20px; flex-wrap:wrap; margin:0 !important; padding:11px 0 !important; border-bottom:1px solid var(--gh-linie); font-size:1.08rem; line-height:1.35; }
.ehc-produkt-preise__zeile > span{ flex:1 1 14em; font-weight:600; min-width:0; }
.ehc-produkt-preise__zeile strong{ white-space:nowrap; font-weight:700; }
.ehc-produkt-preise__zeile .woocommerce-Price-amount{ font-size:1.3rem; font-weight:700; color:var(--gh-text); }
.ehc-produkt-preise__zeile small{ font-size:1rem; font-weight:400; color:var(--gh-grau); }
.ehc-produkt-preise .ehc-todo{ margin:12px 0 0 !important; }

.single-product .stock{ margin:0 !important; font-size:1.1rem; font-weight:700; color:var(--gh-text) !important; }
.single-product .stock.out-of-stock{ color:var(--gh-akzent) !important; }

/* Anzahl und Summe in einer Zeile, darunter der Knopf mit Abstand */
.single-product form.cart:not(.variations_form), .single-product .woocommerce-variation-add-to-cart{ display:grid !important; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:20px; margin:0 !important; }
.single-product form.cart:not(.variations_form) > *, .single-product .woocommerce-variation-add-to-cart > *{ grid-column:1 / -1; }
.single-product form.cart:not(.variations_form) > .quantity, .single-product .woocommerce-variation-add-to-cart > .quantity{ grid-column:1; }
.single-product form.cart:not(.variations_form) > .ehc-anzahl-summe, .single-product .woocommerce-variation-add-to-cart > .ehc-anzahl-summe{ grid-column:2; justify-self:end; text-align:right; }
.ehc-anzahl-titel{ margin:20px 0 10px !important; padding:0 !important; font-weight:700; font-size:1.05rem; }
.ehc-anzahl-summe{ margin:0 !important; padding:0 !important; line-height:1.2; }
.ehc-anzahl-summe span{ display:block; font-size:1rem; color:var(--gh-grau); }
.ehc-anzahl-summe strong, .ehc-anzahl-summe .woocommerce-Price-amount{ font-size:1.6rem; font-weight:700; color:var(--gh-text); }
.woocommerce .quantity.ehc-anzahl{ display:inline-flex; align-items:center; gap:10px; margin:0 !important; float:none; }
.woocommerce .quantity.ehc-anzahl .qty{ width:3.2em; min-height:56px; height:56px; padding:0 !important; font-size:1.5rem; font-weight:700; text-align:center;
	color:var(--gh-text) !important; -webkit-text-fill-color:var(--gh-text); opacity:1; border:1.5px solid #8a7f70; border-radius:12px; background:#fff; -moz-appearance:textfield; appearance:textfield; }
.woocommerce .quantity.ehc-anzahl .qty::-webkit-inner-spin-button, .woocommerce .quantity.ehc-anzahl .qty::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.woocommerce .quantity.ehc-anzahl .qty:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; }
.ehc-anzahl-knopf{ display:grid; place-items:center; flex:none; width:56px; height:56px; padding:0; border-radius:50%; border:1.5px solid var(--gh-akzent); background:#fff; color:var(--gh-akzent);
	font-family:var(--gh-schrift-text); font-size:1.75rem; font-weight:600; line-height:1; cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease-out; }
.ehc-anzahl-knopf span{ display:block; line-height:1; }
.ehc-anzahl-knopf:hover:not(:disabled){ background:var(--gh-akzent); color:#fff; }
.ehc-anzahl-knopf:active:not(:disabled){ transform:scale(.95); }
/* Am Rand angekommen: ruhig, aber erkennbar (kein blasses Rosa) */
.ehc-anzahl-knopf:disabled{ border-color:#d8cfc2; color:#b5aca2; background:var(--gh-grund); cursor:default; opacity:1; }
.ehc-anzahl-knopf:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; }
.single-product form.cart .single_add_to_cart_button{ float:none; display:flex; justify-content:center; width:100%; margin:24px 0 0 !important; }
.ehc-produkt-weiter{ margin:14px 0 0 !important; padding:0 !important; font-size:1rem; line-height:1.5; color:var(--gh-grau); }
/* Variantenformular von WooCommerce: Kartenart als grosse Auswahl */
.single-product form.variations_form{ display:block !important; }
.single-product table.variations{ width:100%; margin:20px 0 0 !important; border:0 !important; border-collapse:collapse; }
.single-product table.variations tr, .single-product table.variations th, .single-product table.variations td{ display:block; width:100%; padding:0 !important; border:0 !important; background:none !important; text-align:left; }
.single-product table.variations th.label label{ display:block; margin:0 0 10px; font-size:1.05rem; font-weight:700; color:var(--gh-text); }
.single-product.woocommerce div.product form.cart table.variations td select{ width:100%; min-height:56px; padding:12px 44px 12px 16px; border:1.5px solid #8a7f70; border-radius:12px; background-color:#fff; color:var(--gh-text);
	font-family:var(--gh-schrift-text); font-size:18px; font-weight:600; line-height:1.3; cursor:pointer; }
.single-product.woocommerce div.product form.cart table.variations td select:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:2px; border-color:var(--gh-akzent); }
.single-product .reset_variations{ display:none !important; }
/* Preis und Bestand je Variante stehen schon oben im Kasten */
.single-product .woocommerce-variation-price, .single-product .woocommerce-variation-availability, .single-product .woocommerce-variation-description{ display:none !important; }
.single-product .single_variation_wrap .woocommerce-variation{ margin:0; }
.single-product .single_add_to_cart_button.disabled{ opacity:.5; cursor:not-allowed; }
.ehc-produkt-weiter--art{ font-weight:600; color:var(--gh-text) !important; }
.ehc-produkt-preise__zeile span small{ display:block; margin-top:2px; font-size:1rem; font-weight:400; color:var(--gh-grau); }
.single-product .woocommerce-notices-wrapper .woocommerce-message, .single-product .woocommerce-notices-wrapper .woocommerce-info, .single-product .woocommerce-notices-wrapper .woocommerce-error{
	margin:0 0 24px !important; padding:16px 20px !important; border-radius:10px; background:#fff !important; color:var(--gh-text) !important; box-shadow:inset 0 0 0 1.5px var(--gh-akzent); font-size:1.08rem; list-style:none; }
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before{ display:none; }
/* Kasse: Kartenart gross, der Abend darunter */
.ehc-kasse-art{ display:block; font-size:1.15rem; font-weight:700; }
.ehc-kasse-menge{ font-weight:700; white-space:nowrap; }
/* Merkmal "Kartenart: ..." steht schon als Zeilentitel */
.woocommerce-checkout .shop_table dl.variation{ display:none; }
.woocommerce table.shop_table tbody tr, .woocommerce table.shop_table tbody td, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{ background:#fff !important; }
.woocommerce table.shop_table td.product-total{ vertical-align:top; padding-top:18px !important; white-space:nowrap; }
.ehc-kasse-abend{ display:block; font-size:1rem; font-weight:400; color:var(--gh-grau); }

/* PayPal-Knoepfe des Plugins hier nicht: ein Kaufknopf, die Zahlung kommt in der Kasse */
.single-product .ppc-button-wrapper{ display:none !important; }

/* Gut zu wissen: vier Rubriken unter dem Kauf */
.ehc-produkt-h2{ font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; font-size:clamp(2.1rem,3.6vw,3rem) !important; line-height:1.05 !important; margin:0 0 28px !important; padding:0 !important; }
.ehc-produkt-wissen{ margin-top:88px; }
.ehc-produkt-infos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.ehc-produkt-info{ padding:28px 26px 22px; border-radius:var(--gh-radius); background:var(--gh-grund-hell); }
.ehc-produkt-info h3{ margin:0 0 10px !important; padding:0 !important; font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.75rem; line-height:1.1; }
.ehc-produkt-info p{ margin:0 0 10px !important; padding:0 !important; font-size:1.05rem; line-height:1.6; }
.ehc-produkt-info p:last-child{ margin-bottom:0 !important; }
.ehc-produkt-info a{ color:var(--gh-akzent); font-weight:600; text-decoration:underline; text-underline-offset:.15em; display:inline-flex; align-items:center; min-height:44px; }

/* Die anderen Abende: eine Reihe, je Abend ein Feld */
.ehc-produkt-andere{ margin-top:72px; }
.ehc-andere{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:14px; }
.ehc-andere--1{ grid-template-columns:minmax(0,1fr); max-width:380px; }
.ehc-andere--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ehc-andere--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.ehc-andere--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.ehc-andere--5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.ehc-andere--6{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.ehc-andere li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.ehc-andere__eintrag{ display:flex; flex-direction:column; gap:4px; height:100%; padding:18px 20px; border-radius:12px; background:#fff; color:var(--gh-text) !important;
	text-decoration:none; box-shadow:var(--ehc-schatten-karte); transition:box-shadow .2s ease, transform .2s cubic-bezier(.23,1,.32,1); }
a.ehc-andere__eintrag:focus-visible{ outline:3px solid var(--gh-akzent); outline-offset:3px; }
.ehc-andere__tag{ font-family:var(--gh-schrift-titel); font-style:italic; font-weight:500; font-size:1.55rem; line-height:1.1; }
.ehc-andere__frei{ font-size:1rem; font-weight:600; color:var(--gh-grau); }
.ehc-andere li.ist-knapp .ehc-andere__frei{ color:var(--gh-akzent); }
.ehc-andere li.ist-aus .ehc-andere__eintrag{ background:transparent; box-shadow:inset 0 0 0 1px var(--gh-linie); color:#6f675f !important; }
@media (hover:hover) and (pointer:fine){
	a.ehc-andere__eintrag:hover{ transform:translateY(-3px); box-shadow:var(--ehc-schatten-hoch); }
	a.ehc-andere__eintrag:hover .ehc-andere__tag{ color:var(--gh-akzent); }
}
@media (prefers-reduced-motion: reduce){
	a.ehc-andere__eintrag, a.ehc-andere__eintrag:hover{ transition:none; transform:none; }
}

/* ════ 4. Media-Queries: hinter den Grundregeln ════ */
@media (max-width: 980px){
	.ehc-karten-zeile{ margin-bottom:32px !important; }
	/* Plakat oben, kleiner, laeuft nicht mit */
	.ehc-karten-kino > .ehc-karten-kino__plakat{ position:relative; flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
	.ehc-karten-plakat{ max-width:300px; }
	.ehc-karten-plakat__todo{ max-width:420px; }
	.ehc-karten-kino > .ehc-karten-kino__inhalt{ flex:0 0 100% !important; width:100% !important; margin-top:8px !important; }
	.ehc-karten-kino{ row-gap:28px !important; }
	/* Handy und Tablet: die Abende frueh, die Eckdaten danach */
	.ehc-karten-kino__inhalt > .ehc-karten-kino__h2{ order:4; }
	.ehc-karten-kino__inhalt > .ehc-karten-kino__h2 + .et_pb_text{ order:5; }
	.ehc-karten-kino__inhalt > .ehc-karten-tickets{ order:6; }
	.ehc-karten-kino__inhalt > .ehc-karten-kino__fakten{ order:7; margin-top:24px !important; }
	.ehc-karten-kino__inhalt > .ehc-karten-kino__todo{ order:8; margin-bottom:24px !important; }
	.ehc-karten-kino__inhalt > .et_pb_button_module_wrapper{ order:9; }

	.single-product div.product > .clearfix{ grid-template-columns:minmax(0,1fr); gap:28px; }
	.single-product div.product div.images{ position:relative !important; top:auto; }
	.single-product div.product div.images img{ height:auto !important; min-height:0; aspect-ratio:16/10; }
	.ehc-produkt-infos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
	.ehc-andere[class*="ehc-andere--"]{ grid-template-columns:minmax(0,1fr); max-width:none; gap:10px; }
	.ehc-andere__eintrag{ flex-direction:row; justify-content:space-between; align-items:center; gap:16px; padding:14px 20px; min-height:60px; }
	.ehc-andere__frei{ text-align:right; }
}
/* Kasse mobil: die Tabelle "Ihre Karten" hat nur zwei Spalten (Abend, Preis)
   und passt auch bei 320 px. Sie bleibt Tabelle, die allgemeine Regel
   "jede Zeile ein Block" (style.css, Datentabellen mobil) gilt hier nicht. */
@media (max-width: 767px){
	.woocommerce-checkout .entry-content table.shop_table{ display:table; width:100%; table-layout:auto; }
	.woocommerce-checkout .entry-content table.shop_table thead{ display:table-header-group; }
	.woocommerce-checkout .entry-content table.shop_table tbody{ display:table-row-group; }
	.woocommerce-checkout .entry-content table.shop_table tfoot{ display:table-footer-group; }
	.woocommerce-checkout .entry-content table.shop_table tr{ display:table-row; margin:0; border:0; border-radius:0; padding:0; background:#fff; }
	.woocommerce-checkout .entry-content table.shop_table td, .woocommerce-checkout .entry-content table.shop_table th{ display:table-cell; width:auto; padding:14px 14px !important; }
	.woocommerce-checkout .entry-content table.shop_table td::before{ content:none !important; }
	.woocommerce-checkout .entry-content table.shop_table td.product-total, .woocommerce-checkout .entry-content table.shop_table tfoot td{ text-align:right; }
	.woocommerce-checkout .entry-content table.shop_table thead th:last-child{ text-align:right; }
}
@media (max-width: 600px){
	.ehc-karten-abende .ehc-abendliste{ grid-template-columns:minmax(0,1fr); gap:18px; }
	.ehc-karten-abende .ehc-abendliste__tag{ font-size:1.9rem; padding:22px 24px 0; }
	.ehc-karten-abende .ehc-abendliste .ehc-balken{ margin:14px 24px 0; }
	.ehc-karten-abende .ehc-abendliste__frei{ padding:10px 24px 20px; }
	.ehc-karten-abende .ehc-abendliste__link::after, .ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-abendliste__frei{ padding:0 24px; }
	.ehc-karten-plakat{ max-width:180px; }
	.ehc-karten-kopf .ehc-lead p{ font-size:18px !important; }
	.ehc-eckdaten.ehc-fakten{ grid-template-columns:minmax(0,1fr); }
	.ehc-preis.ehc-preis--liste{ padding:4px 22px !important; }
	.ehc-preis.ehc-preis--liste p{ flex-wrap:wrap; gap:4px 16px; }
	.ehc-preis.ehc-preis--liste strong{ font-size:2.3rem; }
	.ehc-karten-hinweis{ padding:28px 24px 24px !important; }

	.single-product #main-content .container{ padding-top:20px; padding-bottom:72px; }
	.single-product div.product div.images img{ aspect-ratio:4/3; }
	.single-product div.product div.summary{ padding:28px 22px 26px; }
	.ehc-produkt-termin{ gap:18px; }
	.ehc-produkt-termin__blatt{ width:100px; }
	.ehc-produkt-termin__tag{ font-size:3.2rem; }
	.ehc-produkt-termin__mehr .ehc-produkt-termin__zeit{ font-size:2rem; }
	.ehc-produkt-infos{ grid-template-columns:minmax(0,1fr); gap:16px; }
	.ehc-produkt-wissen{ margin-top:64px; }
	.ehc-produkt-andere{ margin-top:56px; }
	.ehc-kasse-schritte li{ font-size:1rem; padding-right:14px !important; }
}
@media (max-width: 360px){
	.single-product form.cart{ column-gap:12px; }
	.woocommerce .quantity.ehc-anzahl{ gap:6px; }
	.ehc-anzahl-knopf{ width:52px; height:52px; }
	.woocommerce .quantity.ehc-anzahl .qty{ width:2.6em; }
}

/* ── Pruefrunde 3 ── */
/* Ohne Zahlart kein leerer Streifen unter dem Hinweis */
.woocommerce-checkout #payment ul.payment_methods:has(> li.woocommerce-notice:only-child),
.woocommerce-checkout #payment ul.payment_methods:has(> li.woocommerce-info:only-child){ margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:0 !important; }
/* Bestelltabelle: nie breiter als die Spalte (320 px) */
@media (max-width: 480px){
	.woocommerce-checkout .woocommerce-checkout-review-order-table{ table-layout:fixed !important; width:100% !important; }
	.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child,
	.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child{ width:8.5em; text-align:right; }
	.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{ overflow-wrap:anywhere; }
	.ehc-kasse-aendern a.ehc-kasse-aendern__weg{ white-space:nowrap; overflow-wrap:normal; }
	.woocommerce table.shop_table td, .woocommerce table.shop_table th{ padding:12px 12px !important; }
	/* "Zahlungspflichtig bestellen" in einer Zeile */
	html body #page-container .woocommerce #payment #place_order{ padding-left:16px !important; padding-right:16px !important; font-size:1.05rem !important; letter-spacing:0; white-space:nowrap; }
}
@media (max-width: 360px){
	html body #page-container .woocommerce #payment #place_order{ padding-left:12px !important; padding-right:12px !important; font-size:1rem !important; }
}

/* Produkt bei schmalen Handys: "Zusammen" unter die Anzahl statt daneben */
@media (max-width: 400px){
	.single-product form.cart:not(.variations_form) > .ehc-anzahl-summe, .single-product .woocommerce-variation-add-to-cart > .ehc-anzahl-summe{ grid-column:1 / -1; justify-self:start; text-align:left; margin-top:12px !important; }
	.ehc-anzahl-summe span{ display:inline; margin-right:.4em; }
}
/* Spielzeit-Tafel mobil: quer statt Plakatformat, volle Breite, kein Sticky-Versatz */
@media (max-width: 980px){
	.ehc-karten-kino > .ehc-karten-kino__plakat{ top:auto !important; }
	.ehc-karten-plakat:has(.ehc-spielzeit-tafel){ max-width:none !important; }
}

/* Schrittanzeige der Kasse: auf dem Handy untereinander, nie 1 + 2 */
@media (max-width: 480px){
	.ehc-kasse-schritte{ flex-direction:column; align-items:flex-start; flex-wrap:nowrap; }
}

/* Kartenart: aufgeklappte Liste in den Farben der Seite statt Windows-Blau.
   Neue Browser (Chrome/Edge seit 2025) koennen das ueber appearance:base-select,
   aeltere zeigen die normale Liste. Die Auswahl bleibt das WooCommerce-Feld. */
@supports (appearance: base-select) {
	.single-product.woocommerce div.product form.cart table.variations td select,
	.single-product.woocommerce div.product form.cart table.variations td select::picker(select){ appearance:base-select; }
	.single-product.woocommerce div.product form.cart table.variations td select{ display:flex; align-items:center; background-image:none !important; padding-right:16px; }
	.single-product.woocommerce div.product form.cart table.variations td select::picker-icon{ color:var(--gh-akzent); transition:rotate .2s ease; }
	.single-product.woocommerce div.product form.cart table.variations td select:open::picker-icon{ rotate:180deg; }
	.single-product.woocommerce div.product form.cart table.variations td select::picker(select){
		margin-top:6px; padding:6px; border:1.5px solid var(--gh-linie); border-radius:12px; background:#fff;
		box-shadow:0 2px 4px rgba(130,0,0,.08), 0 24px 44px -20px rgba(130,0,0,.40); }
	.single-product.woocommerce div.product form.cart table.variations td select option{ padding:12px 14px; border-radius:8px; font-size:1.05rem; color:var(--gh-text); }
	.single-product.woocommerce div.product form.cart table.variations td select option::checkmark{ color:var(--gh-akzent); }
	.single-product.woocommerce div.product form.cart table.variations td select option:hover,
	.single-product.woocommerce div.product form.cart table.variations td select option:focus-visible{ background:var(--gh-grund-hell); color:var(--gh-akzent); outline:none; }
	.single-product.woocommerce div.product form.cart table.variations td select option:checked{ background:var(--gh-akzent); color:#fff; font-weight:700; }
	.single-product.woocommerce div.product form.cart table.variations td select option[value=""]{ color:var(--gh-grau); }
}

/* ══ Mehrere Kartenarten in einem Schritt (inc/kartenwahl.php) ══════
   Je Kartenart eine Zeile: links Name, Hinweis und Preis, rechts − Anzahl +.
   Darunter die Summe aller Karten und der Knopf. */
.ehc-kartenwahl{ margin:0 !important; }
.ehc-kartenwahl .ehc-anzahl-titel{ margin-top:8px !important; }
.ehc-kartenwahl__zeilen{ display:grid; border-top:1px solid var(--gh-linie); }
.ehc-kartenzeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 20px; padding:16px 0; border-bottom:1px solid var(--gh-linie); }
.ehc-kartenzeile__art{ display:grid; gap:2px; min-width:0; cursor:pointer; font-weight:400; margin:0 !important; }
.ehc-kartenzeile__art strong{ font-size:1.15rem; font-weight:700; line-height:1.3; color:var(--gh-text); }
.ehc-kartenzeile__art small{ font-size:1rem; color:var(--gh-grau); line-height:1.4; }
.ehc-kartenzeile__preis{ margin-top:4px; font-size:1.02rem; color:var(--gh-text); }
.ehc-kartenzeile__preis .woocommerce-Price-amount{ font-weight:700; }
.ehc-kartenzeile.ist-gewaehlt .ehc-kartenzeile__art strong{ color:var(--gh-akzent); }
.woocommerce .ehc-kartenzeile .quantity.ehc-anzahl{ display:inline-flex; }
.ehc-kartenwahl .ehc-anzahl-summe{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:18px 0 0 !important; }
.ehc-kartenwahl .ehc-anzahl-summe[hidden]{ display:none; }
.ehc-kartenwahl .ehc-anzahl-summe span{ display:inline; }
.ehc-kartenwahl__meldung{ margin:12px 0 0 !important; padding:0 !important; font-weight:600; color:var(--gh-akzent); }
.ehc-kartenwahl .single_add_to_cart_button{ display:flex; justify-content:center; width:100%; margin:24px 0 0 !important; float:none; }
.ehc-kartenwahl .ehc-produkt-weiter{ margin-top:16px !important; }
.ehc-kartenwahl__aus{ font-weight:700; font-size:1.1rem; }
/* WooCommerce begrenzt .quantity auf 100 px: hier braucht sie Platz fuer − Feld + */
.woocommerce .ehc-kartenzeile .quantity.ehc-anzahl{ width:auto !important; max-width:none !important; flex-wrap:nowrap; }
/* Schmaler Kaufkasten (Tablet, Handy): Mengenfeld unter die Kartenart */
.ehc-kartenwahl{ container-type:inline-size; }
@container (max-width:440px){
	.ehc-kartenzeile{ grid-template-columns:minmax(0,1fr); }
	.ehc-kartenzeile .quantity.ehc-anzahl{ justify-self:start; }
}
/* Ausverkaufte Karte: Satz an der Stelle, wo bei den anderen die freien Plaetze stehen
   (sonst bleibt dort ein Loch). Nur auf der Kartenseite, die Liste der Startseite braucht ihn nicht. */
.ehc-abendliste__voll{ display:none; }
.ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-abendliste__voll{ display:block; padding:12px 28px 24px; font-size:1.05rem; color:#6f675f; }
.ehc-karten-abende .ehc-abendliste li.ist-aus .ehc-balken{ margin-bottom:0; }
/* Dankeseite: "So geht es weiter" (inc/kasse.php) */
.ehc-danke{ margin:0 0 40px; padding:26px 28px; border-radius:var(--gh-radius); background:#fff; box-shadow:0 1px 2px rgba(130,0,0,.06), 0 24px 50px -32px rgba(130,0,0,.30); }
.ehc-danke .ehc-produkt-h2{ margin-top:0 !important; }
.ehc-danke__abende{ margin:12px 0 16px !important; padding-left:1.2em !important; }
.ehc-danke__abende li{ margin-bottom:6px; }
.woocommerce-order .ehc-kasse-abend{ display:block; font-weight:400; color:var(--gh-grau); }
/* Kasse: Feldbeschreibung ("Dorthin schicken wir Ihre Karten") als ruhiger Text unter
   dem Feld statt blauer Sprechblase (weiss auf Blau hatte nur 4,07:1) */
.woocommerce-checkout form .form-row .description{ display:block !important; position:static !important; margin:6px 0 0 !important; padding:0 !important;
	background:none !important; color:var(--gh-grau) !important; font-size:.95rem; line-height:1.4; border-radius:0; }
.woocommerce-checkout form .form-row .description::before{ display:none !important; }

/* ── css/fusszeile.css ── */
/* ════════════════════════════════════════════════════════════
   Fusszeile: globaler Theme-Builder-Footer "fusszeile"
   (werkzeuge/divi/fusszeile.mjs). Nacht-Band, vier Spalten, darunter
   Linie mit Copyright, Fussmenue und "Design by geh-online".
   Kontrast auf #16131c: Text #ddd7e3 (13,0:1), Weiss (18,4:1), Licht #f2b630 (10,1:1).
   Schrift mindestens 16 px, Links mit mindestens 44 px Klickhoehe.
   ════════════════════════════════════════════════════════════ */

.ehc-fuss{ background:var(--gh-nacht, #16131c); color:#ddd7e3; }
.ehc-fuss{ row-gap:0 !important; gap:0 !important; }
.ehc-fuss .et_pb_row{ padding:0; margin-top:0; margin-bottom:0; }

/* Spalten: keine Eigenabstaende, damit alles auf der Inhaltskante beginnt */
.ehc-fuss__spalte{ padding:0 !important; min-width:0; row-gap:0 !important; gap:0 !important; }
.ehc-fuss .et_pb_module{ margin-left:0; margin-right:0; }

/* Ueberschriften der Spalten */
.ehc-fuss .ehc-fuss__titel .et_pb_module_header,
.ehc-fuss .ehc-fuss__titel h2{
	font-size:1.5rem !important; line-height:1.15 !important; letter-spacing:0;
	color:#fff !important; margin:0 !important; padding:0 !important;
}

/* Text und Links */
.ehc-fuss .ehc-fuss__text, .ehc-fuss .ehc-fuss__text .et_pb_text_inner{
	color:#ddd7e3; font-size:1.0625rem; line-height:1.6;
}
.ehc-fuss .ehc-fuss__text p{ margin:0; padding:0; }
.ehc-fuss .ehc-fuss__titel{ margin-bottom:.75rem !important; }
.ehc-fuss .ehc-fuss__text p + p{ margin-top:.5rem; }
.ehc-fuss .ehc-fuss__text a,
.ehc-fuss .ehc-fuss__menue a{
	color:#fff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
	overflow-wrap:anywhere;
}
.ehc-fuss .ehc-fuss__text a:hover,
.ehc-fuss .ehc-fuss__menue a:hover{ color:#fff; text-decoration-thickness:2px; }
.ehc-fuss a:focus-visible{ outline:3px solid #f2b630 !important; outline-offset:3px; border-radius:3px; }

/* Klickflaeche: jeder Link mindestens 44 px hoch */
.ehc-fuss .ehc-fuss__text a{ display:inline-flex; align-items:center; min-height:44px; }
.ehc-fuss .ehc-fuss__etikett{ display:block; font-size:1rem; color:#ddd7e3; line-height:1.3; margin-bottom:-4px; }
.ehc-fuss .ehc-fuss__etikett + a{ min-height:44px; }

/* Aktionslinks in Licht, fett */
.ehc-fuss .ehc-fuss__text a.ehc-fuss__aktion{ color:#fff; font-weight:700; text-decoration-color:rgba(255,255,255,.6); }
.ehc-fuss .ehc-fuss__text a.ehc-fuss__aktion:hover{ color:#fff; text-decoration-color:#fff; }

/* Erste Zeile der Link-Spalte buendig mit den Textzeilen daneben (der Link ist 44 px hoch, der Text sitzt mittig) */
.ehc-fuss .ehc-fuss__links p:first-child{ margin-top:-9px; }
.ehc-fuss .ehc-fuss__links p + p{ margin-top:0; }

/* Soziale Links: kleines Symbol vor dem Text, per Maske in Textfarbe (kein Bild, kein Fremdskript) */
.ehc-fuss .ehc-fuss__facebook, .ehc-fuss .ehc-fuss__instagram{ gap:.6rem; }
.ehc-fuss .ehc-fuss__facebook::before, .ehc-fuss .ehc-fuss__instagram::before{
	content:""; flex:none; width:1.25rem; height:1.25rem; background:currentColor;
	-webkit-mask:var(--ehc-symbol) center/contain no-repeat; mask:var(--ehc-symbol) center/contain no-repeat;
}
.ehc-fuss .ehc-fuss__facebook{ --ehc-symbol:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 21v-8h2.7l.4-3.2h-3.1V7.8c0-.9.3-1.5 1.6-1.5h1.7V3.4c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V13h2.8v8z'/></svg>"); }
.ehc-fuss .ehc-fuss__instagram{ --ehc-symbol:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 3h9A4.5 4.5 0 0 1 21 7.5v9a4.5 4.5 0 0 1-4.5 4.5h-9A4.5 4.5 0 0 1 3 16.5v-9A4.5 4.5 0 0 1 7.5 3zm0 1.8a2.7 2.7 0 0 0-2.7 2.7v9a2.7 2.7 0 0 0 2.7 2.7h9a2.7 2.7 0 0 0 2.7-2.7v-9a2.7 2.7 0 0 0-2.7-2.7zM12 7.8a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4zm0 1.8a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8zm4.6-3.1a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>"); }

/* Untere Zeile: Linie, links Copyright + Menue, rechts Credit */
.ehc-fuss .ehc-fuss__unten{ margin-top:40px; border-top:1px solid rgba(221,215,227,.28); padding-top:12px; }
.ehc-fuss .ehc-fuss__unten-spalte{
	padding:0 !important; display:flex !important; flex-flow:row wrap; align-items:center;
	justify-content:flex-start; gap:0 32px;
}
.ehc-fuss .ehc-fuss__unten-spalte > .et_pb_module{ margin:0 !important; width:auto; flex:0 0 auto; }
.ehc-fuss .ehc-fuss__copy p{ white-space:nowrap; }
.ehc-fuss .ehc-fuss__unten-spalte > .ehc-fuss__credit{ margin-left:auto !important; }
.ehc-fuss .ehc-fuss__credit p{ white-space:nowrap; }

/* Fussmenue: Menue-Modul als schlichte Linkzeile, ohne Hamburger */
.ehc-fuss .ehc-fuss__menue.et_pb_menu{ background:none; padding:0; flex:1 1 auto; }
/* Auf Seiten mit Theme-Builder-Koerper (.et-db: Produkt, Chronik, 404) setzt Divi
   das Menue-Modul ueber eine ID-Regel auf Weiss und Links auf Logo-Rot. */
.et-db #et-boc .et-l .ehc-fuss__menue.et_pb_menu{ background:none !important; }
.et-db #et-boc .et-l .ehc-fuss .ehc-fuss__text a,
.et-db #et-boc .et-l .ehc-fuss .ehc-fuss__menue a{ color:#fff !important; }
.ehc-fuss .ehc-fuss__menue .et_pb_row, .ehc-fuss .ehc-fuss__menue .et_pb_menu_inner_container{ padding:0; width:auto; }
.ehc-fuss .ehc-fuss__menue .et_pb_menu__wrap{ display:block; }
.ehc-fuss .ehc-fuss__menue .et_pb_menu__menu{ display:block !important; }
.ehc-fuss .ehc-fuss__menue .et_mobile_nav_menu, .ehc-fuss .ehc-fuss__menue .mobile_nav{ display:none !important; }
.ehc-fuss .ehc-fuss__menue .et_pb_menu__search-container, .ehc-fuss .ehc-fuss__menue .et_pb_menu__icon{ display:none !important; }
.ehc-fuss .ehc-fuss__menue nav, .ehc-fuss .ehc-fuss__menue ul.et-menu{ display:flex !important; flex-wrap:wrap; align-items:center; gap:0 28px; }
.ehc-fuss .ehc-fuss__menue, .ehc-fuss .ehc-fuss__menue nav, .ehc-fuss .ehc-fuss__menue ul.et-menu{ margin:0 !important; padding:0 !important; }
.ehc-fuss .ehc-fuss__menue ul.et-menu > li{ margin:0 !important; padding:0 !important; }
.ehc-fuss .ehc-fuss__menue ul.et-menu > li > a{
	display:inline-flex !important; align-items:center; min-height:44px; padding:0 !important;
	font-size:1rem !important; font-weight:400; color:#fff !important; opacity:1 !important;
}
.ehc-fuss .ehc-fuss__menue ul.et-menu > li > a:hover{ color:#fff !important; text-decoration-thickness:2px; }
.ehc-fuss .ehc-fuss__menue ul.et-menu > li.current-menu-item > a{ text-decoration:underline; }

/* Sicherheitsgurt: der Standard-Footer des Themes darf neben dem Theme-Builder-Footer nie erscheinen */
body.et-tb-has-footer #main-footer{ display:none; }

/* Wird die Zeile zu eng: Copyright links und Credit rechts oben, die Menuezeile darunter */
@media (max-width: 1240px){
	.ehc-fuss .ehc-fuss__copy{ order:1; }
	.ehc-fuss .ehc-fuss__credit{ order:2; }
	.ehc-fuss .ehc-fuss__menue.et_pb_menu{ order:3; flex:0 0 100%; }
	.ehc-fuss .ehc-fuss__menue ul.et-menu{ gap:0 16px; }
}

/* Tablet: zwei mal zwei */
@media (max-width: 980px){
	.ehc-fuss{ padding-top:56px !important; }
	.ehc-fuss .ehc-fuss__unten{ margin-top:40px; }
}

/* Handy: eine Spalte, untere Zeile untereinander */
@media (max-width: 767px){
	.ehc-fuss{ padding-top:48px !important; padding-bottom:16px !important; }
	.ehc-fuss .ehc-fuss__unten-spalte{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:0; }
	.ehc-fuss .ehc-fuss__unten-spalte > .ehc-fuss__credit{ margin-left:0 !important; order:3; align-self:flex-end; }
	.ehc-fuss .ehc-fuss__menue.et_pb_menu{ order:2; flex:0 0 auto; width:100%; }
	.ehc-fuss .ehc-fuss__copy p{ white-space:normal; }
	.ehc-fuss .ehc-fuss__menue ul.et-menu{ gap:0 24px; }
}

/* ── css/fehlerseite.css ── */
/* ════════════════════════════════════════════════════════════
   Fehlerseite (404): Theme-Builder-Vorlage "fehlerseite"
   (werkzeuge/divi/fehlerseite.mjs). Wird nur auf 404 geladen.
   Hell (Papier), Kasten "Naechster Abend" als weisse Eintrittskarte.
   ════════════════════════════════════════════════════════════ */

/* Titel: etwas kleiner als auf Unterseiten, damit die Zeile in der halben
   Spalte in zwei bis drei Zeilen steht. */
.ehc-fehler .ehc-titel h1{ font-size:clamp(2.6rem, 4.8vw, 4.4rem) !important; line-height:.95 !important; }

/* Beide Spalten mittig zueinander */
.ehc-fehler .ehc-fehler__weg, .ehc-fehler .ehc-fehler__text{ align-self:center; }

/* Naechster Abend: weisse Karte wie eine Eintrittskarte (wie im Kopf der Startseite) */
.ehc-fehler .ehc-naechster{ background:#fff; color:var(--gh-text); max-width:460px;
	box-shadow:0 1px 2px rgba(130,0,0,.06), 0 24px 50px -28px rgba(130,0,0,.32); }
.ehc-fehler .ehc-naechster .et_pb_text_inner,
.ehc-fehler .ehc-naechster__kopf strong,
.ehc-fehler .ehc-naechster__frei{ color:var(--gh-text); }
.ehc-fehler .ehc-naechster__kopf{ color:var(--gh-grau); }
.ehc-fehler .ehc-naechster__frei strong{ color:var(--gh-akzent); }
.ehc-fehler .ehc-balken--hell{ background:var(--gh-linie); }
.ehc-fehler .ehc-balken--hell i{ background:var(--gh-nacht); }
.ehc-fehler .ehc-knopf-pfeil.ehc-knopf-pfeil .et_pb_button{ min-height:44px; }

/* Symbolfeld: Divis eigene Regel (.et_pb_blurb .et_pb_image_wrap:not(...) = block) schlaegt kacheln.css,
   das Symbol sass oben links im Kreis. Hier Raster erzwingen. */
.ehc-fehler-wege .gh-kachel .et_pb_main_blurb_image .et_pb_image_wrap{ display:grid !important; place-items:center; }


@media (max-width: 980px){
	.ehc-fehler .ehc-naechster{ max-width:none; }
}
@media (max-width: 600px){
	.ehc-fehler .ehc-titel h1{ font-size:clamp(2.3rem, 11vw, 3.2rem) !important; }
}

/* ── css/knoepfe.css ── */
/* ════════════════════════════════════════════════════════════
   Knoepfe: zwei Theater-Effekte

   1. "Vorhang auf" an allen Kartenknoepfen (Kopf, mobil, Abendkarte im
      Megamenue, naechster Abend, Divi-Knoepfe zu /karten/ und /product/,
      Produktseite, Kasse, Sitzplatz-Vorschau). Der rote Knopf ist ein
      Buehnenvorhang aus zwei Samthaelften: in Ruhe ruhiges Rot mit feinem
      Schimmer, keine Streifen, keine Linie oben. Beim Darueberfahren oder
      per Tastatur rafft sich jede Haelfte zu ihrer Aussenkante (scaleX),
      erst dabei werden die senkrechten Falten sichtbar; die untere
      Innenecke schwingt nach aussen wie mit einer Kordel zurueckgebunden. Dahinter die Buehne in tiefem
      Weinrot (#5c0a10) mit zartem Lichtkegel. Schrift und
      Ticket-Symbol bleiben weiss und liegen ueber allem (auf Samt
      mind. 8,9:1, auf Weinrot 14:1).
      Die zwei Haelften legt js/knoepfe.js als <span class="ehc-vorhang">
      an. Ohne JavaScript bleibt der Knopf schlicht rot.

   2. "Rampenlicht" an allen uebrigen Knoepfen: eine Fuellung steigt von
      unten auf wie Licht von der Buehnenrampe (::before, scaleY).
      Rote Knoepfe: Weinrot, Schrift weiss. Umrissknoepfe: Rot, Schrift
      weiss. Menue-Gruppenknoepfe und mobiler Menueknopf: Papier
      (#f1ebe0), Schrift bleibt. Pfeil-Textlinks: nur Unterstreichung.

   Fuer beide: Der Knopf bewegt sich nicht und aendert seine Groesse
   nicht (Divi verschiebt sonst beim Hover den Innenabstand), nur :active
   sinkt er auf .97. Fokus wie Hover. Weniger Bewegung: sofort.

   Spezifitaet: Divi schreibt Farben, Pseudo-Elemente und Hover-Abstaende
   je Knopf mit "body #page-container .et_pb_section .et_pb_button_N" und
   !important in spaet geladene Inline-Styles. Deshalb hier "html body"
   plus IDs im :is(), damit diese Regeln sicher gewinnen.
   Die Klassen ehc-knopf-zweit / ehc-knopf-pfeil sitzen in Divi 5 am
   Knopf selbst, in aelteren Layouts am Modul darum: beides abgedeckt.
   ════════════════════════════════════════════════════════════ */

:root{
	--ehc-rot:#820000;
	--ehc-weinrot:#5c0a10;
	--ehc-papier:#f1ebe0;
	/* Samt: hell / rot / dunkel / rot, Periode 8 px */
	--ehc-samt:repeating-linear-gradient(90deg, #9b0d12 0, #820000 2.5px, #5e0007 4.5px, #820000 6.5px, #9b0d12 8px);
	--ehc-buehnenlicht:radial-gradient(55% 85% at 50% 55%, rgba(255,255,255,.07), rgba(255,255,255,0) 72%); /* Lichtkegel mittig, beruehrt die Oberkante nicht */
	--ehc-auf:cubic-bezier(.23,1,.32,1);
	--ehc-zu:cubic-bezier(.65,0,.35,1);
}

/* ── Gemeinsam: Ebene fuer den Effekt ─────────────────────────── */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *),
	#page-container .woocommerce :is(a.button, button.button, input.button),
	#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
){
	position:relative; isolation:isolate; overflow:hidden; overflow:clip; /* clip: Grundlinie im Kopf bleibt */
	-webkit-tap-highlight-color:transparent;
}
/* Text mittig: Flex, symmetrischer Abstand, Zeilenhoehe 1.2 */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *),
	#page-container .woocommerce :is(a.button, button.button, input.button)
){
	display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
	align-items:center !important; justify-content:center !important; gap:8px;
	line-height:1.2 !important; text-align:center; text-decoration:none; border:0 !important;
}
/* Volle Breite, wo die Vorlage sie vorsieht (Produktseite, Kasse, Sitzplatz, Abendkarte) */
html body #page-container :is(.single_add_to_cart_button, #place_order, .ehc-sv .ehc-sv-weiter),
html body #main-header .ehc-mm-abend .ehc-mm-abend__knopf{ display:flex !important; }

/* Divi-Knoepfe: derselbe Innenabstand in Ruhe, bei Hover, Fokus und
   Druck. Divis Theme-CSS setzt fuer sein eigenes Pfeil-Symbol beim Hover
   padding .3em 2em .3em .7em und einen 2px-Rand, der Knopf aendert dann
   seine Groesse. 14px 30px ist der Wert aus werkzeuge/divi/divi5.mjs
   (button()), den Divi selbst nicht ausgibt. */
html body #page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *),
html body #page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):is(:hover, :focus, :focus-visible, :active),
/* Theme-Builder-Koerper (Chronik, Produkt, 404): Divi schreibt dort ueber #et-boc */
html body.et-db #page-container #et-boc .et-l .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *, .ehc-chronik-karte__titel),
html body.et-db #page-container #et-boc .et-l .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *, .ehc-chronik-karte__titel):is(:hover, :focus, :focus-visible, :active){
	padding:14px 30px !important; min-height:52px; border-width:0 !important;
}

/* Die Effekt-Ebene: ::before, unter Schrift und Symbol */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *),
	#page-container .woocommerce :is(a.button, button.button, input.button),
	#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
):is(*, :hover, :focus-visible)::before{
	content:"" !important; display:block !important; position:absolute !important; inset:-1px !important; z-index:-1 !important;
	width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important;
	font-size:0 !important; line-height:0 !important; opacity:1 !important; pointer-events:none;
	border-radius:inherit;
}

/* ════ 1. Vorhang auf (Kartenknoepfe) ════ */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:is([href*="/karten/"], [href*="/product/"]):not(.ehc-knopf-zweit, .ehc-knopf-pfeil, .ehc-knopf-zweit *, .ehc-knopf-pfeil *)
):is(*, :hover, :focus-visible){
	color:#fff !important;
	background:var(--ehc-rot) !important;   /* ohne JavaScript: schlicht rot */
	box-shadow:none !important;
}
/* Mit Vorhang: dahinter die Buehne */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:is([href*="/karten/"], [href*="/product/"]):not(.ehc-knopf-zweit, .ehc-knopf-pfeil, .ehc-knopf-zweit *, .ehc-knopf-pfeil *)
).ehc-vorhang-an:is(*, :hover, :focus-visible){ background:var(--ehc-buehnenlicht), var(--ehc-weinrot) !important; }

/* Die zwei Vorhanghaelften (js/knoepfe.js), unter Schrift und Symbol */
html body .ehc-vorhang-an > .ehc-vorhang{
	display:block; position:absolute; top:-1px; bottom:-1px; z-index:-1; margin:0; padding:0;
	pointer-events:none; will-change:transform;
	transition:transform .35s var(--ehc-zu), border-radius .35s var(--ehc-zu);
}
/* In Ruhe: ruhiges, sattes Rot mit ganz feinem Samtschimmer, keine Streifen */
html body .ehc-vorhang-an > :is(.ehc-vorhang--links, .ehc-vorhang--rechts){
	background:linear-gradient(180deg, #890307 0%, #820000 40%, #7a0000 100%);
}
html body .ehc-vorhang-an > .ehc-vorhang--links{ left:-1px; width:calc(50% + 2px); transform-origin:0 50%; }
html body .ehc-vorhang-an > .ehc-vorhang--rechts{ right:-1px; width:calc(50% + 2px); transform-origin:100% 50%; }
/* Falten: erst sichtbar, wenn sich der Stoff rafft (Deckkraft folgt dem
   Oeffnen), mit dunklerer Kante zur Mitte */
html body .ehc-vorhang-an > .ehc-vorhang::before{
	content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
	transition:opacity .25s var(--ehc-zu);
}
html body .ehc-vorhang-an > .ehc-vorhang--links::before{
	background:linear-gradient(90deg, rgba(40,0,6,0) 45%, rgba(40,0,6,.55) 100%), var(--ehc-samt);
}
html body .ehc-vorhang-an > .ehc-vorhang--rechts::before{
	background:linear-gradient(270deg, rgba(40,0,6,0) 45%, rgba(40,0,6,.55) 100%), var(--ehc-samt);
}
/* Vorhang auf: Tastatur immer, Zeiger nur, wo es Darueberfahren gibt.
   Stoff ist traege: ease-in-out, oeffnen .5s, schliessen .35s. */
html body .ehc-vorhang-an:not(:disabled):focus-visible > :is(.ehc-vorhang--links, .ehc-vorhang--rechts),
html body .ehc-naechster__link:focus-visible .ehc-vorhang-an > :is(.ehc-vorhang--links, .ehc-vorhang--rechts){
	transform:scaleX(.26); transition:transform .5s var(--ehc-zu), border-radius .5s var(--ehc-zu);
}
html body .ehc-vorhang-an:not(:disabled):focus-visible > .ehc-vorhang--links,
html body .ehc-naechster__link:focus-visible .ehc-vorhang-an > .ehc-vorhang--links{ border-bottom-right-radius:60% 100%; }
html body .ehc-vorhang-an:not(:disabled):focus-visible > .ehc-vorhang::before,
html body .ehc-naechster__link:focus-visible .ehc-vorhang-an > .ehc-vorhang::before{ opacity:1; transition:opacity .45s var(--ehc-zu); }
html body .ehc-vorhang-an:not(:disabled):focus-visible > .ehc-vorhang--rechts,
html body .ehc-naechster__link:focus-visible .ehc-vorhang-an > .ehc-vorhang--rechts{ border-bottom-left-radius:60% 100%; }
@media (hover:hover){
	html body .ehc-vorhang-an:not(:disabled):hover > :is(.ehc-vorhang--links, .ehc-vorhang--rechts),
	html body .ehc-naechster__link:hover .ehc-vorhang-an > :is(.ehc-vorhang--links, .ehc-vorhang--rechts){
		transform:scaleX(.26); transition:transform .5s var(--ehc-zu), border-radius .5s var(--ehc-zu);
	}
	html body .ehc-vorhang-an:not(:disabled):hover > .ehc-vorhang--links,
	html body .ehc-naechster__link:hover .ehc-vorhang-an > .ehc-vorhang--links{ border-bottom-right-radius:60% 100%; }
	html body .ehc-vorhang-an:not(:disabled):hover > .ehc-vorhang::before,
	html body .ehc-naechster__link:hover .ehc-vorhang-an > .ehc-vorhang::before{ opacity:1; transition:opacity .45s var(--ehc-zu); }
	html body .ehc-vorhang-an:not(:disabled):hover > .ehc-vorhang--rechts,
	html body .ehc-naechster__link:hover .ehc-vorhang-an > .ehc-vorhang--rechts{ border-bottom-left-radius:60% 100%; }
}

/* Ticket-Symbol an den Kartenknoepfen: img/ticket.svg als Maske, Farbe
   = Schrift. Echtes Flex-Kind links vom Text (order:-1), keine
   negativen Raender: Zeilenhoehe 1.2 > Symbol 1.15em. */
html body :is(
	#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
	#page-container .et_pb_button:is([href*="/karten/"], [href*="/product/"]):not(.ehc-knopf-zweit, .ehc-knopf-pfeil, .ehc-knopf-zweit *, .ehc-knopf-pfeil *)
):is(*, :hover, :focus-visible)::after{
	content:"" !important; order:-1; flex:none; align-self:center !important; position:static !important; inset:auto !important;
	display:block !important; width:1.15em !important; height:1.15em !important; margin:0 !important; padding:0 !important; border:0 !important;
	font-size:inherit !important; line-height:1 !important; opacity:1 !important; transform:none !important; transition:none !important;
	background:currentColor !important; text-shadow:none !important;
	-webkit-mask:url(img/ticket.svg) center / contain no-repeat; mask:url(img/ticket.svg) center / contain no-repeat;
}

/* ════ 2. Rampenlicht (alle uebrigen Knoepfe) ════ */
/* Divis eigenes Pfeil-Symbol aus */
html body #page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):not([href*="/karten/"], [href*="/product/"]):is(*, :hover, :focus-visible)::after,
html body #page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *):is(*, :hover, :focus-visible)::after{ display:none !important; }

html body :where(
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *, .ehc-knopf-zweit, .ehc-knopf-zweit *):not([href*="/karten/"], [href*="/product/"]),
	#page-container .woocommerce :is(a.button, button.button, input.button):not(.single_add_to_cart_button, #place_order),
	#page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *),
	#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
)::before{
	transform:scaleY(0) !important; transform-origin:50% 100% !important;
	clip-path:none !important;
	transition:transform .25s var(--ehc-zu) !important;
}
/* Fuellfarben */
html body :where(
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *, .ehc-knopf-zweit, .ehc-knopf-zweit *):not([href*="/karten/"], [href*="/product/"]),
	#page-container .woocommerce :is(a.button, button.button, input.button):not(.single_add_to_cart_button, #place_order)
)::before{ background:var(--ehc-weinrot) !important; }
html body :where(#page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *))::before{ background:var(--ehc-rot) !important; }
html body :where(#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf)::before{ background:var(--ehc-papier) !important; }

/* Grund: rote Knoepfe bleiben rot, Umriss und Menue durchsichtig */
html body :is(
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *, .ehc-knopf-zweit, .ehc-knopf-zweit *):not([href*="/karten/"], [href*="/product/"]),
	#page-container .woocommerce :is(a.button, button.button, input.button):not(.single_add_to_cart_button, #place_order)
):is(*, :hover, :focus-visible){ background:var(--ehc-rot) !important; color:#fff !important; box-shadow:none !important; }
html body #page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *):is(*, :hover, :focus-visible){
	background:transparent !important; box-shadow:inset 0 0 0 1.5px var(--gh-text) !important; color:var(--gh-text) !important;
	transition:color .2s ease, transform .12s ease-out !important;
}
html body :is(#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf):is(*, :hover, :focus-visible, [aria-expanded="true"]),
html:not(.ehc-mm-js) body #main-header .ehc-mm-gruppe:is(:hover, :focus-within) > .ehc-mm-knopf,
html body #main-header .ehc-mobil-menue[open] > .ehc-mobil-knopf{ background:transparent !important; box-shadow:none !important; }

/* Licht an: Tastatur, offenes Menue, Zeiger */
html body :is(
	#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):not([href*="/karten/"], [href*="/product/"]),
	#page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *),
	#page-container .woocommerce :is(a.button, button.button, input.button):not(.single_add_to_cart_button, #place_order),
	#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
):focus-visible::before,
html body #main-header .ehc-mm-knopf[aria-expanded="true"]::before,
html:not(.ehc-mm-js) body #main-header .ehc-mm-gruppe:is(:hover, :focus-within) > .ehc-mm-knopf::before,
html body #main-header .ehc-mobil-menue[open] > .ehc-mobil-knopf::before{
	transform:scaleY(1) !important; transition:transform .35s var(--ehc-auf) !important;
}
html body #page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *):focus-visible{ color:#fff !important; }
@media (hover:hover){
	html body :is(
		#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):not([href*="/karten/"], [href*="/product/"]),
		#page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *),
		#page-container .woocommerce :is(a.button, button.button, input.button):not(.single_add_to_cart_button, #place_order),
		#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
	):hover::before{
		transform:scaleY(1) !important; transition:transform .35s var(--ehc-auf) !important;
	}
	html body #page-container .et_pb_button:is(.ehc-knopf-zweit, .ehc-knopf-zweit *):hover{ color:#fff !important; transition:color .2s ease .06s, transform .12s ease-out !important; }
}

/* ════ 3. Pfeil-Textlinks: nur Unterstreichung, Farbe bleibt ════ */
html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *),
html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):is(:hover, :focus, :focus-visible){
	display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
	align-items:center !important; justify-content:flex-start !important; gap:0;
	padding:0 !important; line-height:1.2 !important; background:none !important; border:0 !important; box-shadow:none !important;
	text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1.5px; text-underline-offset:.22em;
	transition:text-decoration-color .2s ease, transform .12s ease-out !important;
}
html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):is(*, :hover, :focus-visible)::before{ display:none !important; }
html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):is(*, :hover, :focus-visible)::after{
	content:"\2192" !important; display:inline !important; position:static !important; opacity:1 !important;
	margin:0 0 0 .35em !important; font-family:inherit !important; font-size:inherit !important; line-height:inherit !important;
	transform:none !important; transition:none !important;
}
html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):focus-visible{ text-decoration-color:currentColor; }
@media (hover:hover){
	html body #page-container .et_pb_button:is(.ehc-knopf-pfeil, .ehc-knopf-pfeil *):hover{ text-decoration-color:currentColor; }
}

/* ── Druck: leichtes Einsinken, sonst steht der Knopf still ────── */
html body :is(#page-container .et_pb_button, #main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
	#main-header .ehc-mobil-knopf, #main-header .ehc-mm-knopf, #main-header .ehc-mm-abend .ehc-mm-abend__knopf,
	#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .woocommerce .button,
	#page-container .ehc-sv .ehc-sv-weiter):active,
html body #page-container .ehc-naechster__link:active .ehc-naechster__weiter{ transform:scale(.97) !important; }

/* ── Kopf: alle vier Eintraege in einer Flucht ──────────────────
   "Das Stueck" (Link), "Ihr Besuch", "Verein" (Gruppenknoepfe, 48 px
   Pille bei 14 px Zeile) und "Karten" stehen auf derselben Grundlinie.
   Die Kartenpille ist ebenfalls 48 px hoch (20 px Zeile + 2 x 14 px; gerade
   Differenz zur 22-px-Schrifthoehe, sonst rundet Chrome die Schrift 0,6 px
   aus der Mitte),
   der negative Rand haelt den Menuestreifen gleich hoch. Mit
   align-items:baseline bestimmt die Schrift (nicht das Symbol davor) die
   Grundlinie des Knopfes; das Symbol richtet sich selbst mittig aus. */
html body #main-header #top-menu li.ehc-menue-karten > a{
	align-items:baseline !important; min-height:0; padding:14px 22px !important; margin:-17px 0 !important; line-height:20px !important;
	font-size:16px !important; font-weight:600; border-radius:999px; opacity:1;
}
/* Gruppenknoepfe auf 48 px (Mindesthoehe fuer Knoepfe), Rand gleicht aus */
html body #main-header #top-menu .ehc-mm-knopf{ padding:16px 14px 16px 16px !important; margin:-16px -14px -16px -16px !important; }
html body #main-header .ehc-mobil-karten{ min-height:48px; }
html body #page-container .ehc-naechster__weiter{ min-height:52px; }
/* Zweizeilig auf schmalen Handys (320 px): Luft oben und unten statt 3 px */
html:not(#ehc-a) body #page-container .ehc-naechster__weiter{ padding:12px 28px !important; }
html:not(#ehc-a) body #page-container .ehc-sv .ehc-sv-weiter{ padding:12px 24px !important; }

/* Zeilenhoehe in ganzen Pixeln, deren Abstand zur Schrifthoehe gerade ist:
   Chrome rundet die Schrift sonst bis zu 1 px aus der Mitte (gemessen
   mit Range.getBoundingClientRect: oben = unten). Zwei :not(#..) heben
   die Spezifitaet ueber die Grundregel mit line-height 1.2. */
html:not(#ehc-a) body:not(#ehc-b) :is(#page-container .et_pb_button:not(.ehc-knopf-pfeil, .ehc-knopf-pfeil *), #main-header .ehc-mobil-karten,
	#main-header .ehc-mobil-knopf, #main-header .ehc-mm-abend .ehc-mm-abend__knopf){ line-height:20px !important; }        /* 17 px Schrift */
html:not(#ehc-a) body:not(#ehc-b) #page-container .ehc-naechster__weiter{ line-height:21px !important; }           /* 18 px */
html:not(#ehc-a) body:not(#ehc-b) #page-container :is(.single_add_to_cart_button, #place_order){ line-height:24px !important; } /* 19,2 px */

/* ── Weniger Bewegung: sofort offen bzw. zu, keine Fahrt ──────────
   Zwei :not(#..) heben die Regel ueber alle Zustandsregeln oben. */
@media (prefers-reduced-motion: reduce){
	html:not(#ehc-rm1):not(#ehc-rm2) body :is(
		#main-header #top-menu li.ehc-menue-karten > a, #main-header .ehc-mobil-karten,
		#main-header .ehc-mm-abend .ehc-mm-abend__knopf, #page-container .ehc-naechster__weiter,
		#page-container .single_add_to_cart_button, #page-container #place_order, #page-container .ehc-sv .ehc-sv-weiter,
		#page-container .et_pb_button, #page-container .woocommerce :is(a.button, button.button, input.button),
		#main-header .ehc-mm-knopf, #main-header .ehc-mobil-knopf
	):is(*, :hover, :focus-visible, [aria-expanded="true"])::before,
	html:not(#ehc-rm1):not(#ehc-rm2) body #main-header .ehc-mobil-menue[open] > .ehc-mobil-knopf::before,
	html:not(.ehc-mm-js):not(#ehc-rm1):not(#ehc-rm2) body #main-header .ehc-mm-gruppe:is(:hover, :focus-within) > .ehc-mm-knopf::before,
	html:not(#ehc-rm1):not(#ehc-rm2) body #page-container .ehc-naechster__link:is(:hover, :focus-visible) .ehc-naechster__weiter::before,
	html:not(#ehc-rm1):not(#ehc-rm2) body .ehc-vorhang-an > .ehc-vorhang,
	html:not(#ehc-rm1):not(#ehc-rm2) body .ehc-vorhang-an > .ehc-vorhang::before,
	html:not(#ehc-rm1):not(#ehc-rm2) body :is(.ehc-vorhang-an, .ehc-naechster__link):is(:hover, :focus-visible) .ehc-vorhang::before,
	html:not(#ehc-rm1):not(#ehc-rm2) body :is(.ehc-vorhang-an, .ehc-naechster__link):is(:hover, :focus-visible) .ehc-vorhang{ transition:none !important; }
}

/* ── Ausnahme: Titel der Chronik-Karten ──
   Technisch ein Divi-Knopf, gestaltet als schlichter Titel (style.css,
   Abschnitt Chronik). Die ganze Karte ist der Link, daher hier kein
   Knopf, kein Rampenlicht, kein Vorhang. */
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x),
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x):hover,
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x):focus,
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x):focus-visible{
	display:inline !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
	background:transparent !important; box-shadow:none !important; transform:none !important;
	font-family:var(--gh-schrift-titel) !important; font-style:italic; font-weight:500 !important; font-size:1.35rem !important; line-height:1.15 !important;
	color:var(--gh-text) !important; overflow:visible !important; isolation:auto !important;
}
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x)::before,
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x) .ehc-vorhang{ display:none !important; }
html body #page-container .ehc-chronik-karte:hover a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x),
html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x):focus-visible{ color:var(--gh-akzent) !important; text-decoration:underline; text-underline-offset:.15em; }
@media (max-width: 600px){
	html body #page-container .ehc-chronik-karte a.et_pb_button.ehc-chronik-karte__titel:not(#ehc-x){ font-size:max(1rem, min(1.2rem, 4.1vw)) !important; overflow-wrap:normal; }
}

/* Pfeil-Textlinks im Theme-Builder-Koerper (Chronik, Produkt, 404): Divi setzt
   dort beim Hover Innenabstand, der Link wuerde 34 px breiter. */
html body.et-db #page-container #et-boc .et-l .ehc-knopf-pfeil .et_pb_button,
html body.et-db #page-container #et-boc .et-l .ehc-knopf-pfeil .et_pb_button:is(:hover, :focus, :focus-visible, :active),
html body.et-db #page-container #et-boc .et-l .et_pb_button.ehc-knopf-pfeil,
html body.et-db #page-container #et-boc .et-l .et_pb_button.ehc-knopf-pfeil:is(:hover, :focus, :focus-visible, :active){ padding:0 !important; border-width:0 !important; }

/* Umriss-Knopf auf Nacht (Anfahrt): weiss statt dunkel */
html body #page-container .et_pb_button:is(.ehc-knopf-zweit--hell, .ehc-knopf-zweit--hell *):is(*, :hover, :focus-visible){
	box-shadow:inset 0 0 0 1.5px #fff !important; color:#fff !important; }

/* ── css/megamenue.css ── */
/* ════════════════════════════════════════════════════════════
   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; }
}

/* Kopf mit Luft um das Logo (Jens 04.10.: "zu arg gequetscht"): ab Desktop
   oben und unten je 11 px mehr, Logo bleibt 76 px, Menue bleibt mittig. */
@media (min-width: 981px) {
	.et_header_style_left #main-header:not(.et-fixed-header) #et-top-navigation { padding-top: 44px; }
	.et_header_style_left #main-header:not(.et-fixed-header) #et-top-navigation nav > ul > li.ehc-mm-gruppe { padding-bottom: 44px; }
	.et_header_style_left #main-header:not(.et-fixed-header) #et-top-navigation nav > ul > li:not(.ehc-mm-gruppe) { padding-bottom: 11px; }
}
@media (max-width: 980px) {
	/* Handy und Tablet: ebenfalls mind. 12 px Luft ueber und unter dem Logo */
	.et_header_style_left #main-header #et-top-navigation,
	.et_header_style_left #main-header.et-fixed-header #et-top-navigation { padding-top: 16px; padding-bottom: 16px; }
}