/*
 * tab-roda.de: Spielplan, Startseite und Spielseiten nach dem Update des Event-Plugins (Event Manager 5.7.12)
 * Datei: Avada-Child-Theme/css/spielplan.css, eingebunden über functions.php (tabroda_spielplan_css).
 * Stand: 10.11.2026 (Handy und Tablet: Abschnitt 4). Protokoll und Erklärung: tab-roda-layout/AENDERUNGEN.md, Plan: tab-roda-layout/PLAN.md (Stufe C).
 *
 * Grundsatz: Was das Backend kann, kommt aus dem Backend (Farben des Plugins, Texte über Loco,
 * Ein- und Ausblenden). Diese Datei regelt nur das Aussehen, für das es kein Backend-Feld gibt,
 * und ersetzt keine Backend-Einstellung. Der Kaufknopf der Spielseite behält die Grundfarbe aus
 * dem Backend (Spielplan > Einstellungen > Style & Icon).
 *
 * Alle Maße sind am 08.11.2026 auf live gemessen (Browser, berechnete Werte der alten Seiten)
 * und stehen jeweils im Kommentar. Farben, die das Backend nicht kennt, stehen oben als Variablen.
 *
 * Die alten Regeln in style.css bleiben vorerst stehen. Sie greifen auf der Spielseite weiter
 * (Spalten, Trenner) und laufen bei den alten Listen ins Leere. Aufräumen erst nach dem Wechsel auf live.
 */
:root {
	--tabroda-kasten: #f6c200;       /* gelber Kasten der Spielseite und Karten im Spielplan (live rgb 246,194,0) */
	--tabroda-kasten-hell: #f7c200;  /* Hintergrund der Beschreibung auf der Spielseite (live rgb 247,194,0) */
	--tabroda-linie: #d6ae00;        /* Linien und Trenner */
	--tabroda-kopf: #ffbe30;         /* Kopfzeile der Kartentabelle */
	--tabroda-rot: #b92b22;          /* Titel im Spielplan, Bänder, Hinweise */
	--tabroda-knopf-liste: #e80707;  /* Knopf "Tickets kaufen" im Spielplan (Avada-Knopf bisher) */
	--tabroda-text: #303030;         /* Fließtext */
	--tabroda-dunkel: #24201d;       /* Titel, Beschreibung und Tabelle der Spielseite */
	--tabroda-preis: #1d242d;        /* "Preis ab:" im Spielplan */
}

/* =========================================================================
 * 1. Spielseite (mage-event/themes/royal.php)
 * Live: gelber Kasten 20 px Innenabstand, zwei gleich breite Spalten, rechts 15 px Innenabstand.
 * ========================================================================= */

/* Kasten: auch oben 20 px Innenabstand (das Plugin setzt oben 0) */
#main .mpwem_wrapper.mep-events-wrapper {
	padding-top: 20px;
}
/* volle Breite für beide Spalten. Das Plugin reserviert für sein Standard-Template 300 px Seitenleiste. */
#main .royal_theme .mep-default-content {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}
/* rechte Spalte: 15 px Innenabstand */
#main .royal_theme .mep-royal-header-col-2 {
	padding: 15px;
}

/* Titel: Epilogue 25 px, 700, Zeilenhöhe 32,5 px, ohne Außenabstand */
#main .royal_theme .mep-default-title .mpwem_tile {
	font-size: 25px;
	font-weight: 700;
	line-height: 32.5px;
	color: var(--tabroda-dunkel);
	margin: 0;
}

/* "Datum:" und "Ort:": Epilogue 32 px, 600, 32 px Abstand oben und unten */
#main .royal_theme .mep-default-feature-date h3,
#main .royal_theme .mep-default-feature-location h3 {
	font-size: 32px;
	font-weight: 600;
	line-height: 41.6px;
	color: #333;
	margin: 32px 0;
}
/* darunter Arial 14 px, Zeilenhöhe 1,2, ohne Abstand */
#main .royal_theme .mep-default-feature-date p,
#main .royal_theme .mep-default-feature-location p {
	font-size: 14px;
	line-height: 1.2;
	color: var(--tabroda-text);
	margin: 0;
}

/* Bild über die ganze linke Spalte */
#main .royal_theme .mep-event-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

/* Beschreibung: Kasten 15 px Innenabstand, Absätze Arial 16 px / 22 px, linksbündig,
 * 15 px Innenabstand und 15 px Abstand oben und unten (so war es live) */
#main .royal_theme .mep-default-feature-content {
	padding: 15px;
	background: var(--tabroda-kasten-hell);
}
#main .royal_theme .mep-default-feature-content .mpwem_details,
#main .royal_theme .mep-default-feature-content .mpwem_details_content {
	margin: 0;
	padding: 0;
}
#main .royal_theme .mep-default-feature-content .mpwem_details_content p {
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	color: var(--tabroda-dunkel);
	margin: 15px 0;
	padding: 15px;
}

/* ----- Kartenbereich ----- */
/* direkt unter dem Trenner, ohne zusätzlichen Abstand */
#main .royal_theme .mep-default-feature-cart-sec,
#main .royal_theme .mep-default-feature-cart-sec .mpwem_style,
#main .royal_theme #mpwem_registration,
#main .royal_theme .mpwem_registration_area,
#main .royal_theme .mpwem_booking_panel {
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}
/* Überschrift (Text aus Loco: "Tickets kaufen"): Epilogue 14 px, 600, ohne roten Balken */
#main .royal_theme .mpwem_registration_area .date-time-header {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
#main .royal_theme .mpwem_registration_area .ticket-title {
	font-family: Epilogue, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	color: var(--tabroda-dunkel);
}
/* Kopfzeile (aus royal.php): Hintergrund #ffbe30, drei gleich breite Spalten,
 * Epilogue 14 px, 600, mittig, 47 px hoch */
#main .royal_theme .tabroda-ticket-kopf {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--tabroda-kopf);
}
#main .royal_theme .tabroda-ticket-kopf span {
	font-family: Epilogue, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	color: var(--tabroda-dunkel);
	text-align: center;
	padding: 15px 15px 13px;
}
#main .royal_theme .tabroda-ticket-kopf span:first-child {
	text-align: left;  /* "Ticket type:" stand live links */
}
/* Kartenarten: auf dem Gelb, ohne Linien zwischen den Zeilen, 15 px Abstand nach unten */
#main .royal_theme .mpwem_ticket_type {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0 0 15px;
}
#main .royal_theme .mpwem_ticket_type .card-body {
	padding: 0 !important;  /* das Plugin setzt 15 / 20 / 20 px */
}
#main .royal_theme .mpwem_ticket_type .mep_ticket_item {
	border: 0;
	padding: 0;
	margin: 0;
}
/* jede Zeile in drei gleich breiten Spalten wie die Kopfzeile: Name links, Menge und Preis mittig */
#main .royal_theme .mpwem_ticket_type .ticket-data {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	min-height: 55px;
	gap: 0;
	padding: 0 !important;  /* das Plugin setzt 12 px oben und unten */
	border: 0 !important;   /* und eine hellgraue Linie unter jeder Zeile, live gab es keine */
}
#main .royal_theme .mpwem_ticket_type .ticket-info {
	padding: 10px;
	text-align: left;
}
#main .royal_theme .mpwem_ticket_type .quantity-control,
#main .royal_theme .mpwem_ticket_type .ticket-price {
	justify-self: center;
	text-align: center;
	padding: 10px;
}
/* Name der Kartenart: Arial 16 px fett */
#main .royal_theme .mpwem_ticket_type .ticket-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 28.8px;
	color: var(--tabroda-dunkel);
}
/* Mengenauswahl: weiß, 100 × 30 px, Rahmen #eee, Radius 6 px, Arial 12 px.
 * Innenabstand oben und unten 0 wie live. Das Plugin erzwingt 10 px rundum und 35 px rechts mit !important
 * (mpwem_global.css, div.mpwem_style select.formControl), dann bleiben bei 30 px Höhe nur 8 px für die
 * Schrift und die "0" wird unten abgeschnitten. Rechts 28 px Platz für den Pfeil des Plugins. */
#main .royal_theme .mpwem_ticket_type select.formControl {
	width: 100px;
	height: 30px;
	min-height: 30px;
	margin: 5px 0 0;
	padding: 0 28px 0 8px !important;
	line-height: normal;
	font-size: 12px;
	color: #aaa9a9;
	background-color: #fff;
	border: 0.8px solid #eee;
	border-radius: 6px;
	box-shadow: none;
}
/* Preis: Arial 16 px, 600 (am 09.11. auf live nachgemessen) */
#main .royal_theme .mpwem_ticket_type .ticket-price,
#main .royal_theme .mpwem_ticket_type .ticket-price .amount {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--tabroda-dunkel);
}
/* Hinweis "Nur noch 2 Plätze frei" (Text und Schwelle im Backend): rote Zeile unter dem Namen */
#main .royal_theme .mep-low-stock-warning {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border: 0;
	animation: none;
	color: var(--tabroda-rot);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

/* Summe und Knopf wie live: zwei Hälften, Linien oben und unten, beides mittig.
 * Summe und Knopf stecken beim Plugin gemeinsam in .mpwem_summery. */
#main .royal_theme .mpwem_form_submit_area {
	display: block;
	background: none;
	box-shadow: none;
	border: 0;
	border-top: 0.8px solid var(--tabroda-linie);
	border-bottom: 0.8px solid var(--tabroda-linie);
	border-radius: 0;
	margin: 0 0 15px;
	padding: 0;
}
#main .royal_theme .mpwem_form_submit_area .mpwem_summery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}
#main .royal_theme .mpwem_summery .total {
	justify-self: center;
	text-align: center;
	padding: 10px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--tabroda-dunkel);
}
#main .royal_theme .mpwem_summery .total .mpwem_total {
	font-weight: 700;
}
/* Kaufknopf: Epilogue 16 px, 700, 15 px Innenabstand, Radius 35 px, 10 px Abstand oben und unten.
 * Die Farbe kommt aus dem Backend (Grundfarbe). Volle Farbe auch vor der Auswahl, wie live. */
#main .royal_theme .mpwem_book_now {
	justify-self: center;
	margin: 10px 0;
	padding: 15px;
	border-radius: 35px;
	text-transform: none;
	font-family: Epilogue, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 19.2px;
	opacity: 1;
}

/* "Event abgelaufen" und "Veranstaltung entfällt" wie live: kleiner Kasten mit hellem Rahmen
 * (am 09.11. auf live gemessen: Arial 14 px, Zeilenhöhe 25,2 px, 20 px Innenabstand, Rahmen #f5f5f5, 151 × 67 px) */
#main .royal_theme .event-expire-btn {
	display: inline-block;
	margin: 10px 0;
	padding: 20px;
	border: 0.8px solid #f5f5f5;
	font-size: 14px;
	line-height: 25.2px;
	color: var(--tabroda-text);
}

/* =========================================================================
 * 2. Spielplan (Seite "Spielplan", Shortcode [event-list style='list'], Vorlage mage-event/list/default.php)
 * Live: Liste höchstens 1270 px breit und linksbündig, Karte 20 px Innenabstand,
 * Bild 25 %, Inhalt 55 % (20 px Abstand links), rechts 20 % mit Preis und Knopf.
 * ========================================================================= */

/* Breite wie live: höchstens 1270 px, linksbündig (die neue Version zentriert schmaler) */
#main .list_with_filter_section.mep_event_list {
	max-width: 1270px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px;  /* live 20 px unter der Liste (Spielplan und Startseite), das Plugin setzt 0 */
}
body:not(.home) #main .mep_event_list .mage_grid_box {
	margin: 0 -7px 20px;
	gap: 0;
}
#main .mep_event_list .mep-event-list-loop.mep_event_card {
	flex: 0 0 calc(100% - 14px) !important;  /* das Plugin setzt die Breite fest auf 100 % */
	width: calc(100% - 14px) !important;
	max-width: calc(100% - 14px);
	margin: 0 0 18px !important;             /* 18 px Abstand zwischen den Karten wie live */
	background: none;
	border: 0;
	box-shadow: none;
}
#main .mep_event_list .mep-event-list-loop .mep_event_card__surface {
	display: flex;
	align-items: stretch;
	background: var(--tabroda-kasten);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 20px;
}
/* Bild: 25 % */
#main .mep_event_list .mep-event-list-loop .mep_event_card__media {
	position: relative;
	flex: 0 0 25%;
	max-width: 25%;
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	overflow: hidden;
}
/* ganzes Bild wie bisher, nicht beschnitten */
#main .mep_event_list .mep-event-list-loop .mep_list_thumb,
#main .mep_event_list .mep-event-list-loop .mep_list_thumb_img {
	position: static;
	width: 100%;
	height: auto;
	min-height: 0;
	object-fit: contain;
	border-radius: 0;
	transform: none;
}
/* Rest: Inhalt (55 % der Karte = 73,3 % hiervon) und rechte Spalte (20 % = 26,7 %) */
#main .mep_event_list .mep-event-list-loop .mep_event_card__body {
	display: flex;
	flex-direction: row !important;  /* das Plugin stellt Inhalt und Preis untereinander */
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 0;
	padding: 0;
	background: none;
}
#main .mep_event_list .mep-event-list-loop .event_details_link {
	flex: 0 0 73.333%;
	max-width: 73.333%;
	box-sizing: border-box;
	display: block;
	padding: 0 0 20px 20px;
	margin: 0 0 20px !important;  /* das Plugin setzt 0 */
	border-bottom: 0.8px solid var(--tabroda-linie);  /* zweite Linie unter dem Ort wie live */
}
/* Titel: Epilogue 24 px, 600, rot, Linie darunter, Abstand 10 / 20 / 20 px wie live */
#main .mep_event_list .mep-event-list-loop .mep_list_title {
	display: block;
	overflow: visible;
	white-space: normal;
	-webkit-line-clamp: unset;
	text-overflow: clip;
	color: var(--tabroda-rot);
	font-size: 24px;
	font-weight: 600 !important;  /* das Plugin setzt 700 */
	letter-spacing: normal !important;  /* und -0,24 px, dann bricht der Titel anders um als live */
	line-height: 31.2px;
	margin: 10px 20px 20px 0;
	padding: 0 0 10px;
	border-bottom: 0.8px solid var(--tabroda-linie);
}
/* "Datum:" und "Ort:": Arial 17 px, Zeilenhöhe 30,6 px */
#main .mep_event_list .mep-event-list-loop .list_content.tabroda-datum,
#main .mep_event_list .mep-event-list-loop .list_content.tabroda-ort {
	display: block;
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 30.6px;
	color: var(--tabroda-text);
}
#main .mep_event_list .mep-event-list-loop .tabroda-label {
	margin: 0;
	font-weight: 400;
	color: inherit;
}
/* rechte Spalte: Preis über dem Knopf, senkrecht und waagrecht mittig */
#main .mep_event_list .mep-event-list-loop .mep_event_card__footer {
	flex: 0 0 26.667%;
	max-width: 26.667%;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
/* "Preis ab: 10,00 €": Arial 17 px, Betrag fett, 20 px Abstand nach unten */
#main .mep_event_list .mep-event-list-loop .list_price {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 5px;
	margin: 0 0 20px;
	line-height: 30.6px;
}
#main .mep_event_list .mep-event-list-loop .list_price_label {
	text-transform: none;
	letter-spacing: normal;
	font-size: 17px;
	font-weight: 400;
	line-height: 30.6px;
	color: var(--tabroda-preis);
}
#main .mep_event_list .mep-event-list-loop .list_price_value,
#main .mep_event_list .mep-event-list-loop .list_price_value .amount {
	font-size: 17px;
	font-weight: 600;
	line-height: 30.6px;
	color: var(--tabroda-preis);
}
/* Knopf "Tickets kaufen" wie der Avada-Knopf bisher: Epilogue 14 px, 500, 13 / 29 px Innenabstand */
#main .mep_event_list .mep-event-list-loop .mep_event_card__book {
	display: inline-block;
	margin: 10px 0 0;
	padding: 13px 29px;
	background: var(--tabroda-knopf-liste);
	border: 0;
	border-radius: 35px;
	color: #fff;
	font-family: Epilogue, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-transform: none;
	white-space: nowrap;
}
#main .mep_event_list .mep-event-list-loop .mep_event_card__book:hover {
	filter: brightness(0.92);
}
/* "Veranstaltung entfällt" / "Veranstaltung ist ausverkauft" statt des Knopfs */
#main .mep_event_list .mep-event-list-loop .tabroda-hinweis {
	margin: 0;
	text-align: center;
	font-size: 17px;
	line-height: 1.4;
	color: var(--tabroda-text);
}

/* Band "Ausverkauft" (Plugin, Backend: Show Sold Out Ribbon) und "Veranstaltung entfällt" (Vorlage):
 * schräg über die obere rechte Ecke des Bildes wie bisher, rot, Großbuchstaben */
#main .mep_event_list .mep-event-list-loop .mepev-ribbons {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	left: auto !important;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	display: block;
}
#main .mep_event_list .mep-event-list-loop .mepev-ribbon.sold-out,
#main .mep_event_list .mep-event-list-loop .mepev-ribbon.tabroda-ribbon-entfaellt {
	position: absolute;
	display: block;           /* das Plugin setzt Flex, dann stünde die Schrift am linken Ende */
	justify-content: center;
	top: 55px;
	right: -50px;
	left: auto;
	width: 240px;
	transform: rotate(45deg);
	background: var(--tabroda-rot);
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	padding: 5px 0;
	border-radius: 0;
	box-shadow: none;
}

/* =========================================================================
 * 3. Startseite ("Vorschau der nächsten Veranstaltungen", Shortcode [event-list ... style="native" column=2 show=2],
 * Vorlage mage-event/list/native.php). Wie live: zwei gelbe Karten nebeneinander, Bild oben,
 * darunter Titel, Datum und Ort. Preis und Knopf lässt die Vorlage schon weg.
 * Am 09.11.2026 auf live gemessen: Raster 672 px (7 px über die Spalte hinaus), Karten 316 × 638 px,
 * 20 px Abstand rechts und unten, 20 px Innenabstand, Bild 276 × 180 px ganz sichtbar und 20 px darunter,
 * Text 20 px eingerückt, Titel 24 px schwarz, Datum und Ort Epilogue 19 px.
 * ========================================================================= */
.home #main .mep_event_list .mage_grid_box {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 -7px 20px;
}
.home #main .mep_event_list .mep_event_native_list {
	flex: 0 1 auto;
	width: calc(50% - 20px);
	max-width: calc(50% - 20px);
	margin: 0 20px 20px 0 !important;  /* das Plugin setzt 0 0 14px mit !important (mep-event-list-modern.css) */
	padding: 0;
	background: var(--tabroda-kasten);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.home #main .mep_event_list .mep_event_native_list__surface {
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 20px;
}
.home #main .mep_event_list .mep_event_native_list__media {
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	height: 180px;
	min-height: 0;
	margin: 0 0 20px;
	border-radius: 0;
	background: none;  /* das Plugin setzt Hellgrau (#f4f4f6), sichtbar wenn das Bild schmaler ist als der Rahmen; live war hier das Gelb der Karte (am 10.11. auf dem Handy gesehen) */
}
.home #main .mep_event_list .mep_event_native_list__media .mep_list_thumb,
.home #main .mep_event_list .mep_event_native_list__media .mep_list_thumb_img {
	width: 100%;
	height: 180px;
	min-height: 0;
	object-fit: contain;   /* ganzes Bild, mittig, wie live (Hintergrundbild "contain") */
	object-position: 50% 50%;
	border-radius: 0;
	background: none;
}
.home #main .mep_event_list .mep_event_native_list__body {
	padding: 0 0 0 20px;
	background: none;
}
.home #main .mep_event_list .mep_event_native_list__link {
	padding: 0;
	margin: 0;
	gap: 0;  /* das Plugin setzt 8 px zwischen Titel, Datum und Ort */
}
/* Titel wie live: schwarz, Epilogue 24 px, 600, Zeilenhöhe 31,2 px, 5 px Innenabstand und 36 px Abstand unten
 * (im Spielplan dagegen rot) */
.home #main .mep_event_list .mep_event_native_list .mep_list_title {
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 31.2px;
	letter-spacing: normal;
	margin: 0 0 36px;
	padding: 0 0 5px;
	border: 0;
	white-space: normal;
	overflow: visible;
	-webkit-line-clamp: unset;
	display: block;
}
/* Datum und Ort: Epilogue 19 px, Zeilenhöhe 24,7 px, 20 px Abstand unten */
.home #main .mep_event_list .mep_event_native_list .list_content.tabroda-datum,
.home #main .mep_event_list .mep_event_native_list .list_content.tabroda-ort {
	display: block;
	height: auto;
	max-height: none;
	margin: 0 0 20px;
	white-space: normal;   /* das Plugin begrenzt die Zeile, sonst fehlt "11:00 Uhr" */
	overflow: visible;
	text-overflow: clip;
	-webkit-line-clamp: unset;
	font-family: Epilogue, Arial, sans-serif;
	font-size: 19px;
	line-height: 24.7px;
	font-weight: 400;
	color: var(--tabroda-preis);  /* #1d242d */
}

/* =========================================================================
 * 4. Handy und Tablet (am 10.11.2026 auf live bei 393 px Breite gemessen, wie iPhone 16)
 * Live galten dafür die Handy-Regeln der alten Plugin-Version 4.2.6 (bis 991, 767 und 500 px) und zwei
 * Regeln aus style.css (bis 767 px Spielplan und Spielseite, unter 1024 px Startseite). Die neue Version
 * bringt eigene Handy-Regeln mit !important mit (mpwem_style.css). Wo sie greifen, steht hier ebenfalls
 * !important, sonst nicht.
 * ========================================================================= */

/* ----- Spielplan ----- */
@media only screen and (max-width: 767px) {
	/* Karte wie live an der linken Spaltenkante und 14 px schmaler als die Spalte
	 * (am Desktop steht die Liste 7 px über, auf dem Handy nicht) */
	body:not(.home) #main .mep_event_list .mage_grid_box {
		margin: 0 0 20px;
	}
	/* Bild, Inhalt, Preis und Knopf untereinander. Der Text bleibt wie live 20 px weiter eingerückt als das Bild. */
	#main .mep_event_list .mep-event-list-loop .mep_event_card__surface,
	#main .mep_event_list .mep-event-list-loop .mep_event_card__body {
		flex-direction: column !important;
		align-items: stretch;
	}
	#main .mep_event_list .mep-event-list-loop .mep_event_card__media,
	#main .mep_event_list .mep-event-list-loop .event_details_link,
	#main .mep_event_list .mep-event-list-loop .mep_event_card__footer {
		flex: 0 0 auto;
		max-width: 100%;
	}
}
@media only screen and (max-width: 991px) {
	/* Titel: Die neue Version setzt bis 991 px 15 px mit !important (h2.mep_list_title). Live wuchs der Titel
	 * mit Avadas Schrift auf Basis 24 px mit: bei 393 px Breite 20,8 px, Zeilenhöhe 27 px. */
	body:not(.home) #main .mep_event_list .mep-event-list-loop .mep_list_title {
		font-size: 20.8px !important;
		line-height: 27px !important;
	}
}

/* ----- Startseite ----- */
@media only screen and (max-width: 1023px) {
	/* wie live unter 1024 px eine Karte je Zeile in voller Spaltenbreite, ohne Überstand */
	.home #main .mep_event_list .mage_grid_box {
		margin: 0 0 20px;
	}
	.home #main .mep_event_list .mep_event_native_list {
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px !important;  /* sonst gilt 0 20px 20px 0 vom Desktop */
	}
}
@media only screen and (max-width: 991px) {
	/* Titel wie live 15 px, Zeilenhöhe 20 px (alte Plugin-Regel bis 991 px), Text links und rechts 15 px eingerückt */
	.home #main .mep_event_list .mep_event_native_list .mep_list_title {
		font-size: 15px !important;
		line-height: 20px !important;
	}
	.home #main .mep_event_list .mep_event_native_list__body {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* ----- Spielseite ----- */
@media only screen and (max-width: 991px) {
	/* Beschreibung wie die alte Version: bis 991 px 14 px, bis 500 px 12 px, Zeilenhöhe bleibt 22 px */
	#main .royal_theme .mep-default-feature-content .mpwem_details_content p {
		font-size: 14px;
	}
}
@media only screen and (max-width: 767px) {
	/* gelber Kasten wie live 20 px Innenabstand (die neue Version setzt auf dem Handy 10 px) */
	#main .mpwem_wrapper.mep-events-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* Titel: Grundgröße wie die alte Version (bis 767 px 20 px, bis 500 px 18 px), Zeilenhöhe 1,3.
	 * Avada verkleinert daraus mitwachsend, wie live (bei 393 px 17,5 px). */
	#main .royal_theme .mep-default-title .mpwem_tile {
		font-size: 20px;
		line-height: 1.3;
	}
	/* "Tickets kaufen" wie live links, 14 px, ohne Innenabstand (die neue Version: mittig, 15 bis 17 px, 10 bis 15 px Innenabstand) */
	#main .royal_theme .mpwem_registration_area .date-time-header {
		padding: 0 !important;
		align-items: flex-start !important;
	}
	#main .royal_theme .mpwem_registration_area .date-time-header .ticket-title {
		font-size: 14px !important;
		text-align: left !important;
	}
	/* Kopfzeile und Kartenzeilen: drei Spalten, die nicht über den Kasten hinauswachsen. Die Namensspalte
	 * ist etwas breiter (live drei gleiche), damit lange Wörter (Ticketmenge, ERWACHSENE) nur einmal mit
	 * Trennstrich umbrechen. Live liefen sie über oder wurden abgeschnitten ("ERWACHS"). */
	#main .royal_theme .tabroda-ticket-kopf,
	#main .royal_theme .mpwem_ticket_type .ticket-data {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
	}
	#main .royal_theme .tabroda-ticket-kopf span {
		padding: 15px 5px 13px;
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	#main .royal_theme .tabroda-ticket-kopf span:first-child {
		padding-left: 15px;
	}
	/* Zellen wie live 5 px Innenabstand */
	#main .royal_theme .mpwem_ticket_type .ticket-info,
	#main .royal_theme .mpwem_ticket_type .quantity-control,
	#main .royal_theme .mpwem_ticket_type .ticket-price {
		padding: 5px;
	}
	#main .royal_theme .mpwem_ticket_type .ticket-name {
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	/* Mengenauswahl wie live so breit wie die Spalte */
	#main .royal_theme .mpwem_ticket_type .quantity-control {
		justify-self: stretch;
	}
	#main .royal_theme .mpwem_ticket_type select.formControl {
		width: 100%;
		max-width: 100%;
	}
	/* Summe und Knopf wie live untereinander und mittig, Linie dazwischen, je 20 px Abstand */
	#main .royal_theme .mpwem_form_submit_area .mpwem_summery {
		grid-template-columns: 1fr;
	}
	#main .royal_theme .mpwem_summery .total {
		justify-self: stretch;
		padding: 20px;
		border-bottom: 0.8px solid var(--tabroda-linie);
	}
	#main .royal_theme .mpwem_book_now {
		margin: 20px 0;
	}
}
@media only screen and (max-width: 500px) {
	#main .royal_theme .mep-default-feature-content .mpwem_details_content p {
		font-size: 12px;
	}
	#main .royal_theme .mep-default-title .mpwem_tile {
		font-size: 18px;
		line-height: 1.3;
	}
}

/* ----- Handy: Kästen so breit wie auf "Videos" (Wunsch des Nutzers vom 10.11.2026, bewusst anders als live) -----
 * "Videos" nutzt einen Avada-Container mit 100 % Breite: Er hebt die 30 px Innenabstand der Seite (#main) auf und
 * setzt selbst 20 px. Überschrift und gelbe Kästen stehen dort 20 px vom Rand. Dasselbe hier für die Seiten mit
 * gelben Kästen. Die Seitennummern sind in live und den Kopien gleich (Klon). */
@media only screen and (max-width: 767px) {
	/* Spielplan (Seite 4841) und Gästebuch (Seite 4699): Container wie mit 100 % Breite */
	.page-id-4841 #main .post-content > .fusion-fullwidth,
	.page-id-4699 #main .post-content > .fusion-fullwidth {
		margin-left: -30px !important;
		margin-right: -30px !important;
	}
	/* Spielplan: Karte so breit wie die Spalte (am Desktop wie live 14 px schmaler) */
	body:not(.home) #main .mep_event_list .mep-event-list-loop.mep_event_card {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100%;
	}
	/* Gäste (Seite 5487): Überschrift 20 px vom Rand, die gelben Kästen (je ein Container) ebenfalls */
	.page-id-5487 #main .post-content > .fusion-fullwidth:first-child {
		margin-left: -30px !important;
		margin-right: -30px !important;
	}
	.page-id-5487 #main .post-content > .fusion-fullwidth:not(:first-child) {
		margin-left: -10px !important;
		margin-right: -10px !important;
	}
	/* Spielseite: gelber Kasten 20 px vom Rand (der Kasten hat eine feste Breite, deshalb auch 20 px breiter) */
	.single-mep_events #main .mpwem_wrapper.mep-events-wrapper {
		margin-left: -10px;
		margin-right: -10px;
		width: calc(100% + 20px);
		max-width: none;
	}
	/* Beitrag: gelber Kasten 20 px vom Rand (der Container hat dort 30 px Innenabstand) */
	.single-post #main .post-content > .fusion-fullwidth {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* Startseite: Bereich "Vorschau der nächsten Veranstaltungen" in voller Breite (Avada setzt hier 117 px Innenabstand) */
	.home #main .post-content > .fusion-fullwidth:has(.mep_event_list) {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* Startseiten-Karte wie die Spielplan-Karte: Bild in voller Breite (dann sitzt das Band "Ausverkauft" auf der
	 * Bildecke statt frei über der Karte), Titel rot mit Linie, Datum und Ort wie im Spielplan, Text 20 px eingerückt */
	.home #main .mep_event_list .mep_event_native_list__media,
	.home #main .mep_event_list .mep_event_native_list__media .mep_list_thumb,
	.home #main .mep_event_list .mep_event_native_list__media .mep_list_thumb_img {
		height: auto;
	}
	.home #main .mep_event_list .mep_event_native_list__media {
		position: relative;
		overflow: hidden;
	}
	.home #main .mep_event_list .mep_event_native_list__body {
		padding-left: 20px;
		padding-right: 20px;
	}
	.home #main .mep_event_list .mep_event_native_list .mep_list_title {
		color: var(--tabroda-rot);
		font-size: 20.8px !important;
		line-height: 27px !important;
		margin: 10px 0 20px;
		padding: 0 0 10px;
		border-bottom: 0.8px solid var(--tabroda-linie);
	}
	.home #main .mep_event_list .mep_event_native_list .list_content.tabroda-datum,
	.home #main .mep_event_list .mep_event_native_list .list_content.tabroda-ort {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 17px;
		line-height: 30.6px;
		margin: 0;
		color: var(--tabroda-text);
	}
}
/* Avada-Karten (z. B. Repertoire): Überschrift auf dem Handy über dem Text statt an der Kartenkante.
 * Avada nimmt bis 576 px die Abstände der Überschrift "für kleine Bildschirme". In der Kartenvorlage ist nur der
 * Desktop-Wert eingetragen (20 px), für kleine Bildschirme nichts, dann gilt 0. Hier gelten bis dahin die Werte
 * aus der Vorlage. Wird in Avada ein eigener Wert für kleine Bildschirme eingetragen, hat der Vorrang (er steht
 * direkt am Element). Auf live war es genauso, gemeldet vom Nutzer am 10.11.2026. */
@media only screen and (max-width: 576px) {
	.fusion-post-cards .fusion-title {
		--awb-margin-left-small: var(--awb-margin-left);
		--awb-margin-right-small: var(--awb-margin-right);
	}
}

/* =========================================================================
 * 5. Warenkorb und Kasse (WooCommerce)
 * Die allgemeine CSS-Datei des Plugins (mpwem_global.css, div.woocommerce td.product-name) färbt den
 * Produktnamen in jeder WooCommerce-Tabelle in der Grundfarbe (rot) und setzt 18 px. Live: Textfarbe
 * und Größe wie der übrige Text (rgb 48,48,48, Arial 17 px). Die Angaben zum Spiel als Liste und das Bild
 * kommen aus functions.php (tabroda_warenkorb_angaben, tabroda_warenkorb_bild).
 * ========================================================================= */
#main div.woocommerce td.product-name {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;  /* das Plugin setzt 500, live 400 */
}
/* Warenkorb: das Plugin setzt um das Bild 10 px Innenabstand und mindestens 20 % Breite, die Zelle "Entfernen"
 * oben ausgerichtet mit 10 px Innenabstand. Live: Bild 90 px ohne Innenabstand (Name 25 px rechts davon),
 * "×" mittig, 25 px oben und unten. */
.woocommerce-cart #main table.cart .product-thumbnail {
	padding: 0;
	min-width: 0;
	vertical-align: baseline;
}
.woocommerce-cart #main table.cart td.product-remove {
	padding: 25px 0;
	vertical-align: middle;
}
/* Kasse, Land: Es ist nur Deutschland erlaubt. WooCommerce 11 zeigt dafür ein Auswahlfeld mit einem Eintrag
 * (50 px hoch), 10.4 zeigte "Deutschland" fett als Text. Hier sieht das Feld wieder aus wie Text, es bleibt ein
 * Formularfeld mit demselben Wert. */
#main select.country_to_state--single {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 19px;
	vertical-align: baseline;
	pointer-events: none;
}
/* =========================================================================
 * 6. Gästebuch (Gwolle 5.1.2, Vorlage gwolle_gb-entry.php im Child-Theme)
 * Zeile "aus ... schrieb am ... um ..." in Textfarbe wie live (Gwolle 5 färbt Datum und Uhrzeit grau, #666).
 * ========================================================================= */
body #main .gwolle-gb .gb-entry .gb-author-info .gb-datetime {
	color: inherit;
}

/* =========================================================================
 * 7. WordPress-Block "Tabelle" (z. B. "Technische Daten" bei den Repertoire-Stücken)
 * staging lädt zusätzlich die Theme-Stile des Blocks (wp-block-table-theme): Außenabstand 0 0 1em.
 * Live galt der Browser-Standard für figure: 1em oben und unten, 40 px links und rechts.
 * ========================================================================= */
#main figure.wp-block-table {
	margin: 1em 40px;
}