/*
Theme Name:  Karli Comedy
Theme URI:   https://karlicomedy.de
Author:      Karli Comedy Club
Description: Eigenes, handcodiertes WordPress-Theme fuer karlicomedy.de (Ersatz fuer WordPress + Elementor). Verwaltet Termine ueber den Custom-Post-Type "Show". Design nach den verbindlichen Vorgaben des Grafikdesigners (Farben, Schriften, Abstaende).
Version:     0.88.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: karli-comedy
*/

/* ==========================================================================
   Custom Fonts (von karlicomedy.de uebernommen)
   ========================================================================== */

@font-face {
	font-family: 'Tallica-VF';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/Tallica-VF.ttf') format('truetype');
}

@font-face {
	font-family: 'Stackyard';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('assets/fonts/Stackyard_PERSONAL_USE.ttf') format('truetype');
}

/* ==========================================================================
   Design-Tokens (verbindliche Vorgaben des Grafikdesigners)
   ========================================================================== */

:root {
	--color-bg: #F6EEE3;
	--color-dark: #2E3D44;
	--color-accent: #A5272B;
	--color-yellow: #FED635;
	--color-orange: #E7AF2A;
	--color-white: #ffffff;

	--font-display: 'Tallica-VF', Sans-serif;
	--font-heading: 'Stackyard', Sans-serif;
	--font-body: 'Open Sans', Sans-serif;
	--font-nav: 'Open Sans', Sans-serif;

	/* Schriftgroessen laut Grafikdesigner (Desktop-Basis) */
	--font-size-h1: 120px;
	--font-size-h2: 70px;
	--font-size-body: 30px;
	--font-size-nav: 15px;

	/* Bausteine (Abstaende/Groessen) laut Grafikdesigner */
	--nav-height: 125px;
	--topbar-height: 45px;
	--header-overlap: -146px;
	--logo-size: 90px;
	--footer-logo-size: 160px;
	--divider-width: 115px;
	--divider-height: 5px;
	--gap-heading-lines: 55px;
	--gap-divider-to-text: 65px;
	--gap-text-to-tiles: 105px;
	--tile-size: 340px;

	--container-width: 1140px;

	/* Comedy-Shows-Terminliste: Werbebanner/Filterleiste/Ticket-Karten (Vorlage Grafikdesigner) */
	--list-width: 1130px;
	--filter-height: 65px;
	--filter-gap: 65px;
	--banner-height: 250px;
	--ticket-card-height: 250px;
	--ticket-card-image-width: 250px;
	--ticket-card-location-height: 44px;

	/* Breakpoints (wie auf der Live-Seite): Mobile <=767px, Tablet <=1024px */
}

/* ==========================================================================
   Reset & Basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Verhindert, dass der Browser die Scroll-Position automatisch
	   ausgleicht, wenn sich Inhalte oberhalb des sichtbaren Bereichs in der
	   Groesse aendern (Scroll Anchoring) - genau das passiert aber bewusst
	   bei der scroll-gekoppelten Hoehenanimation von .header-main
	   (Hamburger-Kontext, main.js) und wuerde sonst zusaetzliche,
	   unerwuenschte scroll-Events und ein leichtes "Nachziehen" der Werte
	   erzeugen. */
	overflow-anchor: none;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--font-size-body);
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

/* body.wp-theme-karli-comedy statt bloss "h1"/"h2": Elementor bleibt auf
   test.karlicomedy.de als Plugin aktiv (auch wenn unser Theme aktiv ist)
   und injiziert ueber .elementor-kit-260 h1/h2 eigene, globale
   Kit-Typografie-Regeln mit Spezifitaet (0,0,1,1) auf JEDES h1/h2 der
   Seite - bei gleicher Spezifitaet und spaeterem Ladezeitpunkt gewinnt
   Elementor gegen ein bloss unqualifiziertes "h1 {}" (0,0,0,1) klar. Die
   von WordPress automatisch gesetzte Body-Klasse .wp-theme-karli-comedy
   (kombiniert mit dem Typ-Selektor body) hebt unsere Spezifitaet auf
   (0,0,1,2) an und gewinnt damit zuverlaessig, unabhaengig davon ob/wann
   Elementor auf dem jeweiligen Server deaktiviert wird. */
body.wp-theme-karli-comedy h1 {
	font-family: var(--font-display);
	font-size: var(--font-size-h1);
	font-weight: bold;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--color-dark);
}

body.wp-theme-karli-comedy h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: 400;
	color: var(--color-dark);
}

h3 {
	font-family: var(--font-display);
	font-size: 70px;
	font-weight: bold;
	color: var(--color-bg);
}

h4 {
	font-family: var(--font-heading);
	font-size: 50px;
	font-weight: normal;
	color: var(--color-bg);
}

/* ==========================================================================
   Ueberschriften duerfen mobil niemals umbrechen - stattdessen verkleinert
   assets/js/heading-autofit.js die Schriftgroesse dynamisch, GENAU soweit
   wie fuer eine Zeile noetig (siehe dortige Kommentare). white-space:nowrap
   ist hier die Voraussetzung dafuer: erst dadurch entsteht ueberhaupt ein
   messbarer Overflow (scrollWidth > clientWidth) statt eines automatischen
   Zeilenumbruchs, den das Skript auswerten kann.
   .ticket-card-title bewusst ausgenommen (:not()) - hat bereits ein eigenes,
   unabhaengiges Kuerzungssystem (2-zeiliges line-clamp mobil, Ellipsis
   Desktop, siehe .page-comedy-shows/.page-open-air/etc.), das NICHT durch
   dieses allgemeine Skript ueberschrieben werden soll. Gleiche
   Breakpoint-Bedingung wie ueberall sonst im Theme fuer "mobil" (De-Morgan-
   Muster: Breite ODER Handy-Querformat). */
@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	h1:not(.ticket-card-title),
	h2:not(.ticket-card-title),
	h3:not(.ticket-card-title),
	h4:not(.ticket-card-title) {
		white-space: nowrap;
	}
}

p {
	margin: 0 0 1em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-dark);
	color: var(--color-bg);
	padding: 10px 16px;
	z-index: 10000;
}

.skip-link:focus {
	left: 10px;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.button,
.wp-block-button__link,
a.button {
	/* Werte 1:1 aus der Live-CSS uebernommen (identisch fuer alle CTA-Buttons
	   auf Home und Gutschein, z. B. .elementor-element-4b1bc35 .elementor-button
	   in post-84.css): font-size, font-weight, padding, border-radius, kompakte
	   Breite. Bewusste gestalterische Abweichung vom Original: letter-spacing
	   ist im Original "normal" (0), hier fuer einen luftigeren, moderneren
	   Eindruck bewusst vergroessert. */
	display: inline-block;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-display);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 25px 10px 20px 7px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.button:hover {
	opacity: 0.85;
}

/* Divider-Baustein: 115px breit, 5px hoch, unter Ueberschriften */
.divider {
	width: var(--divider-width);
	height: var(--divider-height);
	background: var(--color-accent);
	margin: 30px auto var(--gap-divider-to-text);
}

/* ==========================================================================
   Header
   ========================================================================== */

#site-header {
	background: var(--color-bg);
}

.header-topbar {
	position: relative;
	z-index: 101;
	height: var(--topbar-height);
	background: var(--color-dark);
}

.header-topbar .container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.social-icons {
	display: flex;
	gap: 14px;
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-dark);
}

.social-icons svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.header-main {
	/* Eigenstaendiges, durchgehend transparentes Overlay-Element ueber dem
	   Hero-Bild - bleibt beim Scrollen sticky oben und behaelt dabei immer
	   dieselbe Transparenz, kein Hintergrundwechsel, keine JS-Scroll-Erkennung. */
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-height);
	background: rgba(105, 101, 98, 0.7);
}

.header-main .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.site-branding {
	/* Verhindert, dass der Flex-Layout das Logo bei knappem Platz unkontrolliert
	   staucht (Ursache fuer das ovale/verzerrte Logo bei mittleren Breiten -
	   das war nur moeglich, weil weder Logo noch Nav vor dem Zusammenquetschen
	   geschuetzt waren). */
	flex-shrink: 0;
}

.site-branding img {
	width: var(--logo-size);
	height: var(--logo-size);
	/* Sicherheitsnetz: bleibt immer rund/proportional, selbst falls die
	   Breite durch eine kuenftige Layoutaenderung doch einmal reduziert wird. */
	aspect-ratio: 1 / 1;
}

#primary-navigation .elementor-nav-menu,
#primary-navigation ul {
	display: flex;
	align-items: center;
	gap: 28px;
}

#primary-navigation a,
#primary-navigation .menu-more-toggle {
	font-family: var(--font-nav);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-bg);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

/* .menu-more-toggle ist bewusst ein <button> statt <a href="#"> (siehe
   functions.php) - kein Link-Sprung an den Seitenanfang beim Klick, oeffnet
   ausschliesslich per Hover (Desktop, siehe .menu-item-has-children unten).
   Browser-Standardoptik eines <button> zurueckgesetzt, damit es optisch
   nicht von den echten <a>-Menuepunkten zu unterscheiden ist. */
#primary-navigation .menu-more-toggle {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

#primary-navigation .menu-more-toggle::after {
	/* Kleiner Abwaerts-Pfeil statt Icon-Grafik - erbt automatisch die
	   aktuelle Textfarbe (currentColor), kein zusaetzliches Asset noetig. */
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

#primary-navigation a:hover,
#primary-navigation a[aria-current="page"],
.menu-item-has-children:hover > .menu-more-toggle,
.menu-item-has-children:focus-within > .menu-more-toggle,
#primary-navigation .menu-more-toggle[aria-current="page"] {
	border-bottom-color: var(--color-accent);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--color-bg);
	cursor: pointer;
	padding: 8px;
}

.menu-toggle svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.menu-toggle .icon-close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
	display: block;
}

/* ==========================================================================
   "Mehr"-Dropdown im Hauptmenue (Solos, Workshops, Ueber uns) - NUR Desktop
   ==========================================================================
   Neu gebautes, einfaches CSS-Dropdown (kein bereits vorhandener Dropdown-/
   Mega-Menue-Mechanismus im Theme gefunden - die "Icons" unter den
   Menuepunkten sind nur der bereits bestehende rote Hover-/Aktiv-
   Unterstrich, siehe #primary-navigation a oben). Oeffnet per Hover
   (:hover) bzw. Tastatur-Fokus (:focus-within) auf dem <li>, ohne JavaScript.
   Ab 1201px aktiv - direkt oberhalb des bestehenden 1200px-Hamburger-
   Breakpoints, damit hier keinerlei Ueberschneidung entstehen kann. Auf
   Mobile (<=1200px) wird die Gruppierung bewusst wieder aufgeloest, siehe
   eigener @media-Block weiter unten.
   ========================================================================== */

@media (min-width: 1201px) {
	.menu-item-has-children {
		position: relative;
	}

	.sub-menu {
		/* Ueberschreibt die geerbte #primary-navigation ul-Regel (display:flex;
		   gap:28px), die sonst auch fuer dieses verschachtelte <ul> gelten
		   wuerde - hier stattdessen eine vertikale Dropdown-Liste ohne Gap
		   (Abstand kommt stattdessen ueber das Padding der einzelnen Links). */
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 8px;
		min-width: 200px;
		/* Heller Creme-Ton statt dunklem Hintergrund (passend zum Farbschema
		   der Website, z. B. gleiche Variable wie der helle Seitenhintergrund) -
		   Schrift dafuer dunkel (.sub-menu a unten), damit der Kontrast erhalten
		   bleibt. */
		background: var(--color-bg);
		border-radius: 4px;
		padding: 8px 0;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
		z-index: 101;
	}

	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* #primary-navigation-Praefix noetig, obwohl .sub-menu bereits darin
	   verschachtelt ist: die geerbte Regel "#primary-navigation a" (ID-
	   Selektor) haette sonst hoehere Spezifitaet als ein reiner
	   Klassen-Selektor wie ".sub-menu a" und wuerde die helle Textfarbe
	   (var(--color-bg)) immer weiter erzwingen, unabhaengig von der
	   Reihenfolge im Stylesheet. */
	#primary-navigation .sub-menu a {
		display: block;
		padding: 10px 20px;
		white-space: nowrap;
		/* Dunkle Schrift statt der geerbten hellen Farbe (#primary-navigation a
		   setzt color:var(--color-bg), das waere auf dem jetzt ebenfalls
		   hellen --color-bg-Hintergrund unsichtbar). */
		color: var(--color-dark);
		/* Kein Unterstrich-Hover wie in der horizontalen Leiste (border-bottom
		   waere hier optisch unpassend) - stattdessen Akzentfarbe direkt auf
		   dem Text, im selben Rot wie ueberall sonst im Menue. */
		border-bottom: none !important;
	}

	#primary-navigation .sub-menu a:hover,
	#primary-navigation .sub-menu a[aria-current="page"] {
		color: var(--color-accent);
	}
}

/* ==========================================================================
   "Mehr"-Dropdown im Hamburger-Menue (<=1200px): KEINE Gruppierung
   ==========================================================================
   Solos, Workshops und Ueber uns sollen auf Mobile weiterhin als eigene,
   flache Zeilen erscheinen statt unter "Mehr" gruppiert zu sein. Der Toggle
   wird ausgeblendet, .menu-item-has-children und .sub-menu werden per
   display:contents aus dem Layout "aufgeloest" - dadurch werden ihre <li>-
   Kindelemente direkte Geschwister der uebrigen Menuepunkte, ganz ohne
   JavaScript oder doppelt gepflegte Markup-Listen.
   ========================================================================== */

@media (max-width: 1200px) {
	#primary-navigation .menu-more-toggle {
		display: none;
	}

	.menu-item-has-children,
	.sub-menu {
		display: contents;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

#site-footer {
	background: var(--color-dark);
	color: var(--color-bg);
	padding: 60px 0 30px;
	text-align: center;
}

.footer-branding img {
	width: var(--footer-logo-size);
	height: var(--footer-logo-size);
	margin: 0 auto 20px;
	/* Rund zugeschnitten, unabhaengig vom Seitenverhaeltnis der Quelldatei. */
	border-radius: 50%;
	object-fit: cover;
}

#footer-navigation ul {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 24px;
	flex-wrap: wrap;
}

#footer-navigation a {
	font-family: var(--font-nav);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-bg);
	opacity: 0.8;
}

#footer-navigation a:hover {
	opacity: 1;
}

.footer-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-dark);
}

.footer-social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ==========================================================================
   Hero (Home)
   ========================================================================== */

.hero-carousel {
	position: relative;
	overflow: hidden;
	line-height: 0;
	/* Zieht das Hero-Bild unter den transparenten Header (siehe .header-main) */
	margin-top: var(--header-overlap);
	/* Durchgehender roter Strich direkt unter dem Headerbild, volle Breite.
	   Als border-bottom auf dem Bild-Element selbst statt als eigenes
	   Element, damit er unabhaengig von der jeweiligen Bildhoehe automatisch
	   immer exakt am unteren Bildrand sitzt (siehe .page-hero fuer die
	   Unterseiten-Variante, gleiches Prinzip). Staerke auf 8px siehe
	   Hamburger-Breakpoint weiter unten. */
	border-bottom: 14px solid var(--color-accent);
}

.hero-carousel .hero-slide {
	display: none;
	width: 100%;
	max-height: 640px;
	object-fit: cover;
}

.hero-carousel .hero-slide.is-active {
	display: block;
}

.hero-intro {
	text-align: center;
	padding: 80px 0 0;
}

body .hero-intro h2 {
	/* Verdoppelt auf Wunsch (40px -> 80px) - betrifft ausschliesslich die
	   "Willkommen bei"-Zeile, nicht den darunterstehenden "KARLI COMEDY"-
	   Schriftzug (.hero-intro h1, unveraendert). */
	font-size: 80px;
}

body .hero-intro h1 {
	font-size: 90px;
}

body .hero-intro h2:first-of-type {
	margin-bottom: var(--gap-heading-lines);
}

.hero-claim {
	text-align: center;
	/* max-width, margin-left/right und font-size kommen jetzt aus der
	   vereinheitlichten Regel weiter unten (siehe dort). */
	margin-top: 0;
	margin-bottom: 0;
}

/* ==========================================================================
   Einleitungstext direkt unter dem Titelbild, vor dem ersten Block
   (Startseite: .hero-claim: Unterseiten: die Absaetze in .listing-intro).
   Vereinheitlicht: gleiche feste Zeilenbreite und dieselbe fliessende
   Schriftgroesse ueberall - unabhaengig vom jeweiligen Seiteninhalt.
   .gutschein-cta p ist bewusst mit aufgenommen, obwohl dort aktuell kein
   solcher Text existiert: taucht dort spaeter ein <p> auf, uebernimmt es
   automatisch dieselben Eigenschaften, ohne dass diese Regel angefasst
   werden muss - und ohne leere Box, solange kein <p> vorhanden ist.
   Ist-Wert vor der ersten Vereinheitlichung: 30px (--font-size-body,
   ungestuft). Eigene, deutlich breitere Fliessspanne als die Block-Absaetze
   (16-30px ueber 375-1200px): hier 18-30px ueber 320-1600px, damit der
   groessere Spielraum spuerbar wird.
   ========================================================================== */

.hero-claim,
.listing-intro p,
.gutschein-cta p {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	/* Auf Wunsch NUR Desktop um 2 Schriftgroessen-Stufen kleiner
	   (Projekt-Konvention: 1 Stufe = 2px): 18px/28px -> 14px/24px, gleiche
	   Steigung (0.78125vw) wie zuvor. Mobile bleibt bewusst unangetastet -
	   siehe die separate @media(max-width:767px)-Regel weiter unten, die
	   dort explizit den bisherigen Wert (18px/28px) wiederherstellt, da es
	   fuer diese Regel bislang keine eigene mobile Ueberschreibung gab. */
	font-size: clamp(14px, 11.5px + 0.78125vw, 24px);
}

@media (max-width: 767px) {
	.hero-claim,
	.listing-intro p,
	.gutschein-cta p {
		font-size: clamp(18px, 15.5px + 0.78125vw, 28px);
	}
}

.hero-cta-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/* Eigene, groessere max-width statt der geteilten --container-width
	   (1140px): 3 Kacheln x 340px + 2 x 48px Abstand = 1116px, das haette in
	   1140px minus der 40px eigenen Innenabstand (padding) nicht mehr
	   gepasst und die dritte Kachel waere umgebrochen. */
	max-width: 1200px;
	margin: var(--gap-text-to-tiles) auto 60px;
	padding: 0 20px;
	/* Deutlich mehr Luft zwischen den Kacheln statt der bisherigen 2px
	   (wirkten fast aneinandergeklebt). */
	gap: 48px;
}

.hero-cta {
	/* Ab 900px (3-Spalten-Zustand, siehe Breakpoints weiter unten): Breite
	   fliessend berechnet (Zeilenbreite minus 2 Abstaende, gedrittelt), nach
	   oben gedeckelt bei der bisherigen Desktop-Groesse (340px) - dadurch
	   bleibt "3 nebeneinander" durchgehend von 900px bis zu beliebig breiten
	   Fenstern erhalten, ohne bei genau 900px umzubrechen. flex-basis:auto
	   waere hier falsch (siehe fruehere Notiz) - flex-shrink/grow bleiben
	   bewusst 0, die Groesse kommt ausschliesslich aus flex-basis+max-width. */
	flex: 0 0 calc((100% - 2 * 48px) / 3);
	max-width: var(--tile-size);
	/* aspect-ratio ist der EINZIGE Mechanismus, der die Hoehe bestimmt -
	   dadurch ist die Kachel bei jeder denkbaren, auch fliessend berechneten
	   Breite garantiert quadratisch, unabhaengig davon wie die Breite gerade
	   zustande kommt (fester Wert, calc(), Breakpoint-Override). */
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	/* Container Query statt Fensterbreite: die Schriftgroesse der Kachel
	   (h4/h3, in cqw) orientiert sich dadurch an der tatsaechlichen Groesse
	   dieser einzelnen Kachel, nicht am Viewport. */
	container-type: inline-size;
	background: var(--color-dark);
	color: var(--color-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hero-cta img {
	/* Pures Foto ohne Abdunklung/Overlay, liegt hinter dem Text. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-cta h4,
.hero-cta h3 {
	position: relative;
	z-index: 1;
}

.hero-cta h4 {
	/* Auf Wunsch (Desktop) nochmal um 30% GROESSER als der zuletzt
	   reduzierte Stand (9.75cqw -> 12.675cqw), zusaetzlich zur vorherigen
	   +30%-Anpassung (7.5cqw -> 9.75cqw). */
	font-size: 12.675cqw;
	margin-bottom: 6px;
}

.hero-cta h3 {
	/* Auf Wunsch (Desktop) nochmal um 30% GROESSER als der zuletzt
	   reduzierte Stand (14.95cqw -> 19.435cqw), zusaetzlich zur vorherigen
	   +30%-Anpassung (11.5cqw -> 14.95cqw). */
	font-size: 19.435cqw;
}

/* ==========================================================================
   Kachel-Breakpoints (eigenstaendig, wie beim Hamburger-Breakpoint bewusst
   nicht an die allgemeinen Tablet/Mobile-Breakpoints unten gekoppelt): drei
   klar getrennte Zustaende - 3 Kacheln nebeneinander ab 900px, 2+1 zwischen
   600 und 900px (die dritte Kachel rutscht dank flex-wrap + dem bereits auf
   .hero-cta-row gesetzten justify-content:center automatisch zentriert in
   eine neue Zeile - keine zusaetzliche Regel dafuer noetig), darunter voll
   gestapelt. In allen drei Zustaenden bestimmt ausschliesslich aspect-ratio
   die Hoehe (siehe .hero-cta Basisregel) - die Kachel ist dadurch garantiert
   quadratisch, unabhaengig von der jeweils berechneten Breite.
   ========================================================================== */

@media (max-width: 899px) {
	.hero-cta {
		/* 2 Kacheln pro Zeile: Zeilenbreite minus 1 Abstand, halbiert. Gleicher
		   340px-Deckel wie im 3-Spalten-Zustand, damit die Kacheln beim
		   Unterschreiten von 900px nicht ploetzlich groesser als bisher
		   wirken. */
		flex-basis: calc((100% - 48px) / 2);
	}
}

@media (max-width: 599px) {
	.hero-cta-row {
		flex-direction: column;
		align-items: center;
	}

	.hero-cta {
		/* Volle Spaltenbreite im gestapelten Zustand, kein 340px-Deckel mehr. */
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	/* Mobil betrifft die Groessenanpassung NUR die Schriftgroesse (nicht die
	   Kachel selbst) - hier reichen 40% kleiner gegenueber dem
	   urspruenglichen Ausgangswert (18cqw/28cqw), unabhaengig von der
	   staerkeren Desktop-Reduktion oben. */
	.hero-cta h4 {
		font-size: 10.8cqw;
	}

	.hero-cta h3 {
		font-size: 16.8cqw;
	}
}

/* ==========================================================================
   Teaser-Zeilen (Home)
   ========================================================================== */

.teaser-row {
	display: flex;
	align-items: stretch;
	min-height: 480px;
}

.teaser-row.is-reverse {
	flex-direction: row-reverse;
}

.teaser-image {
	flex: 1 1 50%;
	/* Zentrales Muster fuer alle zweispaltigen Bild-Text-Bloecke (siehe auch
	   .info-block-image): der Container behaelt sein pro Block individuell
	   festgelegtes Seitenverhaeltnis (aspect-ratio wird inline je Vorkommen
	   gesetzt, siehe Markup - frei waehlbar, kein einheitliches Format).
	   Innerhalb dieses Containers fuellt das Bild per object-fit:cover immer
	   luecken- und randlos die komplette Flaeche, minimaler Zuschnitt statt
	   Raendern (siehe .teaser-image img weiter unten). overflow:hidden faengt
	   Rundungs-Subpixel beim Cover-Zuschnitt ab. Dieser Wrapper wird durch
	   align-items:stretch am Elternrow weiterhin auf die volle Zeilenhoehe
	   gestreckt; background fuellt die Freiflaeche, falls der Text laenger
	   ist als das (durch aspect-ratio begrenzte) Bild - Grundfarbe passend
	   zum Block-Thema (hell per Default, dunkel siehe .teaser-row--dark
	   weiter unten). */
	overflow: hidden;
	background: var(--color-bg);
}

.teaser-image img {
	/* Seitenverhaeltnis kommt ueber die Custom Property --block-ratio, die
	   inline je Bild gesetzt wird (siehe Markup) - bewusst am <img> selbst
	   statt am Wrapper, da align-items:stretch am Elternrow (.teaser-row)
	   sonst jede Hoehenvorgabe des Wrappers ueberschreiben wuerde. Das <img>
	   ist kein Flex-Kind (nur der Wrapper ist es), bleibt also unberuehrt und
	   behaelt sein festgelegtes Seitenverhaeltnis exakt. Der Umweg ueber die
	   Custom Property (statt aspect-ratio direkt inline zu setzen) ist
	   noetig, damit die Mobile-Breakpoint-Regel (16:9, siehe weiter unten)
	   das Seitenverhaeltnis ueberschreiben kann - ein direkter Inline-Wert
	   liesse sich von keiner externen CSS-Regel mehr ueberschreiben. */
	display: block;
	width: 100%;
	aspect-ratio: var(--block-ratio);
	object-fit: cover;
}

.teaser-content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	/* Text bleibt oben ausgerichtet statt vertikal zentriert - ist das Bild
	   in der Nachbarspalte hoeher als der Text, bleibt darunter Freiflaeche
	   statt den Text mittig zu verschieben. */
	justify-content: flex-start;
	/* Verhindert, dass der (eigentlich inline-block-grosse) Button per
	   Flex-Stretch auf die volle Spaltenbreite gezogen wird - im Original
	   sitzt er kompakt/linksbuendig. */
	align-items: flex-start;
	padding: 60px;
	/* Heller Grundzustand (Live-Vorbild: Open Air/XXL-Show ohne Hintergrund-
	   Override zeigen die Seiten-Cremefarbe, dunkle Schrift per Standard-h1/h2). */
	background: var(--color-bg);
}

body .teaser-content h2 {
	/* Auf Wunsch um 2 Schriftgroessen-Stufen reduziert (Projekt-Konvention:
	   1 Stufe = 2px): 44px -> 40px. */
	font-size: 40px;
	/* Eigener, engerer Wert statt der globalen --gap-heading-lines (55px) -
	   gleiche Verengung wie bei den Unterseiten-Headern (.listing-intro),
	   nur angepasst an die kleinere Schriftgroesse dieser Komponente. */
	margin-bottom: 15px;
}

body .teaser-content h1 {
	/* Auf Wunsch um 2 Schriftgroessen-Stufen reduziert: 70px -> 66px. */
	font-size: 66px;
	margin-bottom: 20px;
}

.teaser-content p {
	max-width: 480px;
	margin-bottom: 24px;
	/* Zentrales, dauerhaftes Muster fuer den Fliesstext aller zweispaltigen
	   Bild-Text-Bloecke (siehe auch .info-block-content p): fliessend statt
	   in festen Stufen an einzelnen Breakpoints, NUR Desktop (ab 768px) -
	   siehe die separate @media(max-width:767px)-Regel weiter unten fuer
	   Mobile, die von dieser Aenderung bewusst unberuehrt bleibt. Auf
	   Wunsch um 2 Schriftgroessen-Stufen wieder GROESSER als der zuletzt
	   reduzierte Stand (Projekt-Konvention: 1 Stufe = 2px): 4px/18px ->
	   8px/22px. Delta zwischen Ober-/Untergrenze bleibt bei 14px, daher
	   identische Steigung (1.697vw) wie zuvor - nur der Achsenabschnitt
	   wurde fuer die neuen Endwerte an denselben zwei Kalibrierpunkten
	   (375px/1200px Fensterbreite) neu hergeleitet. Obergrenze 22px wird
	   nie ueberschritten, Untergrenze 8px nie unterschritten. */
	font-size: clamp(8px, 1.6364px + 1.697vw, 22px);
	/* Zeilenabstand bleibt unveraendert bei der zuletzt reduzierten Stufe
	   (1.6 -> 1.5). */
	line-height: 1.5;
}

.teaser-row.is-reverse .teaser-content {
	/* Text-links/Bild-rechts: align-items bleibt flex-start (wie bei der
	   Text-rechts-Variante), damit Headline, Fliesstext und Button eine
	   gemeinsame linke Kante teilen (kein "flex-end" mehr - das haette jedes
	   Element einzeln an der Trennlinie verankert und dadurch die Kanten
	   ausgefranst, je nach Elementbreite). Stattdessen wird die Innenbreite
	   der Spalte per padding-left auf dieselben 480px begrenzt wie bei der
	   Text-rechts-Variante (.teaser-content p max-width), und zwar responsiv:
	   Spaltenbreite (50vw) - 60px Rand zur Trennlinie - 480px Textbreite.
	   Der rechte Rand des Textblocks landet dadurch bei jeder Fensterbreite
	   exakt an derselben Stelle wie zuvor mit flex-end. max() als Untergrenze,
	   damit der Wert bei schmalen Desktop-Breiten (knapp oberhalb des
	   1024px-Breakpoints, wo calc() sonst auf 0 faellt) nie unter die 60px
	   der Text-rechts-Variante sinkt. */
	padding-left: max(60px, calc(50vw - 540px));
}

.teaser-row--dark .teaser-content {
	background: var(--color-dark);
}

.teaser-row--dark .teaser-content h1,
.teaser-row--dark .teaser-content h2,
.teaser-row--dark .teaser-content p {
	color: var(--color-bg);
}

.teaser-row--dark .teaser-image {
	background: var(--color-dark);
}

.partners {
	text-align: center;
	padding: 80px 0;
}

body .partners h2 {
	font-size: 40px;
}

body .partners h1 {
	font-size: 60px;
	margin-bottom: 40px;
}

/* ==========================================================================
   Terminlisten / Show-Karten
   ========================================================================== */

.page-hero {
	/* Echtes <img> statt background-image: zeigt das Bild immer vollstaendig
	   im nativen Seitenverhaeltnis (kein background-size:cover mehr, das bei
	   schmaleren Fensterbreiten seitlich beschnitten haette). Die Hoehe des
	   Streifens ergibt sich automatisch aus Breite x Seitenverhaeltnis, ganz
	   ohne Mindesthoehe - bei schmalen Breiten wird der Streifen entsprechend
	   niedriger. Das transparente .header-main schwebt unveraendert per
	   margin-top:var(--header-overlap) darueber. */
	display: block;
	width: 100%;
	height: auto;
	margin-top: var(--header-overlap);
	/* Durchgehender roter Strich direkt unter dem Headerbild, volle Breite -
	   siehe .hero-carousel fuer dieselbe Regel auf der Startseite. */
	border-bottom: 14px solid var(--color-accent);
}

.listing-intro {
	text-align: center;
	/* +70% gegenueber vorher (760px), damit pro Zeile deutlich mehr Platz ist. */
	max-width: 1300px;
	margin: 0 auto;
	padding: 60px 20px 20px;
}

body .listing-intro h2 {
	/* +~18% gegenueber Original (44px), dann nochmal +20% (52px -> 62px). */
	font-size: 62px;
}

body .listing-intro h1 {
	/* +~17% gegenueber Original (60px), dann nochmal +20% (70px -> 84px). */
	font-size: 84px;
}

body .listing-intro h2:first-of-type {
	/* Eigener, kleinerer Wert statt der global geteilten --gap-heading-lines
	   (55px) - die wird an anderen Stellen (Hero, Teaser, Gutschein) weiter
	   gebraucht und soll dort unveraendert bleiben. */
	margin-bottom: 18px;
}

.listing-intro p {
	/* Spuerbar enger als die globale Basis (1.6). */
	line-height: 1.3;
	/* Nur top/bottom, bewusst NICHT das margin-Shorthand: das wuerde auch
	   margin-left/right auf 0 setzen und damit die zentrierende
	   margin-left/right:auto-Regel weiter oben ueberschreiben (gleiche
	   Selektor-Spezifitaet, spaetere Regel im Stylesheet gewinnt sonst). */
	margin-top: 0;
	/* Abstand zwischen den Absaetzen kleiner als die globale Basis (1em),
	   damit er im Verhaeltnis zum engeren Zeilenabstand passt. */
	margin-bottom: 12px;
}

/* ==========================================================================
   Finale, einheitliche Regel fuer den Einleitungstext unter der
   Seitenueberschrift (.listing-intro p bzw. .hero-claim auf der
   Startseite, NICHT die Infotexte in den .info-block-/Kachel-Bloecken
   weiter unten) - ersetzt saemtliche zuvor getesteten A/B-Varianten
   (Trichter, Rahmenlinien, Zwei-Stufen-Trichter, Gewichts-Trichter,
   Farbverlaufs-Trichter, Vertikale Akzentlinie, Small-Caps-Statement etc.)
   vollstaendig und gilt einheitlich auf ALLEN Seiten - Desktop UND
   Mobile. Alle Saetze bleiben in derselben Schriftgroesse (unveraendert
   aus der gemeinsamen Basis-Regel oben, .hero-claim/.listing-intro p/
   .gutschein-cta p); einzig der erste Satz ist fett, alle weiteren
   normal. Keine seitenspezifischen Ausnahmen/Wrapper mehr noetig. Fuer
   .hero-claim (Startseite) steckt der erste Satz nicht in einem eigenen
   <p>, sondern per <strong> direkt im Markup (siehe front-page.php), da
   dort beide Saetze innerhalb eines einzelnen <p> per <br> getrennt sind.
   ========================================================================== */
.listing-intro p:first-of-type {
	font-weight: 700;
}

.listing-intro p:not(:first-of-type) {
	font-weight: 400;
}

.show-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	height: var(--filter-height);
	background: var(--color-dark);
	max-width: var(--list-width);
	margin: var(--filter-gap) auto;
	padding: 0 20px;
	border-radius: 4px;
}

.show-filter-item {
	position: relative;
	padding: 6px 6px 6px 30px;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.show-filter-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-bg);
}

.show-filter-item[aria-pressed="true"]::after {
	content: "x";
	position: absolute;
	left: -2px;
	top: 45%;
	transform: translateY(-50%);
	color: var(--color-accent);
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
}

/* Werbebanner (comedy-shows) */
.ad-banner {
	max-width: var(--list-width);
	height: var(--banner-height);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(46, 61, 68, 0.08),
		rgba(46, 61, 68, 0.08) 10px,
		rgba(46, 61, 68, 0.02) 10px,
		rgba(46, 61, 68, 0.02) 20px
	);
	border: 2px dashed var(--color-dark);
	border-radius: 4px;
	color: var(--color-dark);
	font-size: 16px;
	text-align: center;
}

/* Ticket-Karten (comedy-shows): 1130x250px Desktop-Basis */
.ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	/* Verhindert, dass ein grosses Bild die Karte ueber die feste Hoehe
	   hinaus aufdrueckt (Flexbox-Items haben sonst per Default eine
	   automatische Mindestgroesse, die sich am Inhalt orientiert). */
	min-height: 0;
	background: var(--color-dark);
	/* Im Original (ticket_container) ist die Karte selbst eckig - nur der
	   TICKETS-Button hat einen border-radius. */
	border-radius: 0;
	overflow: hidden;
}

.ticket-card.is-hidden {
	display: none;
}

.ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	/* Selbe Absicherung wie oben, zusaetzlich fuer die Breite: das Bild darf
	   den Container unabhaengig vom Seitenverhaeltnis nicht sprengen. */
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	/* Sichtbarer Rand bei object-fit:contain (Bild passt nicht exakt ins
	   Seitenverhaeltnis) zeigt die Kartenfarbe statt eines leeren/weissen Randes. */
	background: var(--color-dark);
}

.ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	/* Basis/Mobile: object-fit:contain (unveraendert). Ab 768px (Desktop,
	   siehe Media Query) auf cover umgestellt - Referenz-Screenshots zeigen
	   ein vollflaechig gefuelltes Bild ohne Rand. */
	object-fit: contain;
	object-position: center;
	display: block;
}

.ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

.ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* Original (Container 20eb973a im loop-416-Template): --justify-content:flex-start -
	   der Inhalt beginnt oben (nach dem padding-top), keine vertikale Zentrierung. */
	justify-content: flex-start;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.ticket-card-date,
.ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.ticket-card-date img,
.ticket-card-time img {
	filter: brightness(0) invert(1);
}

.ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	/* Auf maximal 3 Zeilen begrenzen, Rest mit "..." abschneiden - funktioniert
	   unabhaengig von Zeichenanzahl/Wortlaenge, kein Kuerzen in PHP. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.ticket-card-action {
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.ticket-card-location {
	/* Beginnt exakt dort, wo die Bildspalte endet (Live-Vorbild: die Leiste
	   liegt nur in der rechten Textspalte, nicht unter dem Bild) und ist am
	   unteren Kartenrand ausgerichtet - auf gleicher Hoehe wie die Bildspalte. */
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	/* Original (ticket_adressleiste): nur links Padding am Container, der
	   Abstand zwischen den einzelnen Zeilen kommt ueber padding-right je Element. */
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.ticket-card-location strong,
.ticket-card-location span {
	padding-right: 15px;
}

.ticket-card-location strong {
	font-weight: 700;
}

.ticket-card-soldout {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-display);
	font-size: 34px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 5;
}

.show-card-empty {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 40px 20px 100px;
	text-align: center;
}

/* ==========================================================================
   Generische Seiten (Impressum / Datenschutz / AGB)
   ========================================================================== */

.legal-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 100px 20px 120px;
}

body .legal-content h1 {
	/* Auf Wunsch um 4 Schriftgroessen-Stufen kleiner (Projekt-Konvention:
	   1 Stufe = 2px): 70px -> 62px. */
	font-size: 62px;
	margin-bottom: 40px;
}

.legal-content-body {
	/* Eigene, kleinere Groesse statt der geerbten globalen body-Groesse -
	   auf Wunsch um 4 Schriftgroessen-Stufen kleiner (Projekt-Konvention:
	   1 Stufe = 2px): 30px -> 22px (Desktop-Basis, --font-size-body). */
	font-size: 22px;
}

.legal-content-body p {
	margin: 0 0 1.2em;
}

.legal-content-body strong,
.legal-content-body b {
	font-weight: 700;
}

/* ==========================================================================
   Infoseiten (Dein Event / Gutschein)
   ========================================================================== */

.info-block {
	display: flex;
	align-items: stretch;
	min-height: 480px;
}

.info-block.is-reverse {
	flex-direction: row-reverse;
}

.info-block-image {
	flex: 1 1 50%;
	/* Gleiches zentrales Muster wie .teaser-image: Container behaelt sein pro
	   Block individuell festgelegtes Seitenverhaeltnis (aspect-ratio inline
	   je Vorkommen, frei waehlbar), Bild fuellt es per object-fit:cover
	   luecken- und randlos aus. overflow:hidden faengt Rundungs-Subpixel ab.
	   Wrapper wird per align-items:stretch weiterhin auf die volle
	   Zeilenhoehe gestreckt; background fuellt die Freiflaeche, falls der
	   Text laenger ist als das (durch aspect-ratio begrenzte) Bild.
	   .info-block-content ist standardmaessig dunkel, also ist auch die
	   Bildspalte standardmaessig dunkel (siehe .info-block--light weiter
	   unten fuer die helle Ausnahme). */
	overflow: hidden;
	background: var(--color-dark);
}

.info-block-image img {
	/* Gleiches Prinzip wie .teaser-image img: Seitenverhaeltnis ueber die
	   Custom Property --block-ratio, inline je Bild am <img> selbst gesetzt
	   (siehe Markup), nicht am Wrapper - align-items:stretch am Elternrow
	   (.info-block) wuerde eine Hoehenvorgabe am Wrapper sonst
	   ueberschreiben. Umweg ueber die Custom Property, damit die
	   Mobile-Breakpoint-Regel (16:9, siehe weiter unten) das
	   Seitenverhaeltnis ueberschreiben kann. */
	display: block;
	width: 100%;
	aspect-ratio: var(--block-ratio);
	object-fit: cover;
}

.info-block-content {
	flex: 1 1 50%;
	background: var(--color-dark);
	color: var(--color-bg);
	display: flex;
	flex-direction: column;
	/* Text bleibt oben ausgerichtet statt vertikal zentriert, siehe
	   .teaser-content. */
	justify-content: flex-start;
	align-items: flex-start;
	padding: 60px;
}

body .info-block-content h2 {
	/* Auf Wunsch um 2 Schriftgroessen-Stufen reduziert (Projekt-Konvention:
	   1 Stufe = 2px): 40px -> 36px. */
	font-size: 36px;
	color: var(--color-bg);
	/* Eigener, engerer Wert statt der globalen --gap-heading-lines (55px) -
	   gleiche Verengung wie bei den Unterseiten-Headern (.listing-intro),
	   nur angepasst an die kleinere Schriftgroesse dieser Komponente. */
	margin-bottom: 15px;
}

body .info-block-content h1 {
	/* Auf Wunsch um 2 Schriftgroessen-Stufen reduziert: 70px -> 66px. */
	font-size: 66px;
	color: var(--color-bg);
	margin-bottom: 20px;
}

.info-block-content p {
	max-width: 480px;
	/* Gleiches zentrales Muster wie .teaser-content p, NUR Desktop (ab
	   768px, siehe separate @media(max-width:767px)-Regel weiter unten fuer
	   Mobile). Auf Wunsch um 2 Schriftgroessen-Stufen wieder GROESSER als
	   der zuletzt reduzierte Stand (Projekt-Konvention: 1 Stufe = 2px):
	   4px/18px -> 8px/22px, gleiche Herleitung wie bei .teaser-content p.
	   Zeilenabstand bleibt unveraendert bei 1.5. */
	font-size: clamp(8px, 1.6364px + 1.697vw, 22px);
	line-height: 1.5;
}

.info-block.is-reverse .info-block-content {
	/* Gleiches Prinzip wie bei .teaser-row.is-reverse .teaser-content:
	   gemeinsame linke Kante fuer alle Elemente, Spalten-Innenbreite
	   responsiv auf dieselben 480px begrenzt wie bei der Text-rechts-
	   Variante (.info-block-content p max-width), mit 60px als Untergrenze. */
	padding-left: max(60px, calc(50vw - 540px));
}

.info-block--light .info-block-content {
	/* Hell-Dunkel-Wechsel wie bei den Startseiten-Teasern (.teaser-row--dark):
	   heller Grundton statt dem sonst festen dunklen Hintergrund von
	   .info-block-content, mit entsprechend dunkler statt heller Schrift. */
	background: var(--color-bg);
	color: var(--color-dark);
}

.info-block--light .info-block-content h1,
.info-block--light .info-block-content h2,
.info-block--light .info-block-content p {
	color: var(--color-dark);
}

.info-block--light .info-block-image {
	background: var(--color-bg);
}

/* ==========================================================================
   Infotext der zweispaltigen Text-Bild-Bloecke: insgesamt +5 Schriftgroessen-
   Stufen NUR mobil (<=767px, derselbe Breakpoint wie ueberall sonst im
   Theme) - vorher +6 Stufen (20px/26.6524px), jetzt -1 Stufe (-2px)
   ==========================================================================
   Die Basis-Regeln (.teaser-content p / .info-block-content p weiter oben)
   bleiben weiterhin bewusst UNVERAENDERT - Desktop (ab 768px) rechnet nach
   wie vor exakt mit der urspruenglichen Formel. Hier stattdessen erneut
   eine reine Parallelverschiebung der bereits mobil ueberschriebenen Werte
   (dieselbe Steigung 1.697vw bleibt dadurch automatisch erhalten): -2px auf
   beide Endwerte - 20px wird zu 18px, ~26.65px wird zu ~24.65px.
   Zeilenabstand (line-height:1.5, aus der Basis-Regel geerbt) bleibt
   unangetastet, wirkt weiterhin automatisch proportional auf die neue,
   kleinere Schrift. */
@media (max-width: 767px) {
	.teaser-content p,
	.info-block-content p {
		font-size: clamp(18px, 11.6364px + 1.697vw, 24.6524px);
	}
}

.info-contact {
	text-align: center;
	padding: 80px 20px;
	/* +6 Schriftgroessen-Stufen (Projekt-Konvention: 1 Stufe = 2px): 18px -> 30px. */
	font-size: 30px;
}

.info-contact strong {
	display: block;
	/* Von der kursiven Schreibschrift (--font-heading, "Stackyard") auf die
	   reguläre Fließtext-Schriftart (--font-body, "Open Sans") umgestellt,
	   dazu fett (font-weight explizit statt nur auf den Browser-Standard
	   von <strong> zu vertrauen). */
	font-family: var(--font-body);
	font-weight: 700;
	/* +6 Schriftgroessen-Stufen: 28px -> 40px. */
	font-size: 40px;
	margin-top: 10px;
	/* Ohne das hier wuerde die feste 40px-Schriftgroesse die E-Mail-Adresse
	   auf schmalen mobilen Viewports (~390px) ueber den Seitenrand hinaus
	   schieben statt umzubrechen - Ursache des mobilen horizontalen
	   Scrollens auf /dein-event/ und /ueber-uns/ (beide nutzen .info-contact). */
	overflow-wrap: break-word;
}

.gutschein-cta {
	text-align: center;
	padding: 80px 20px;
}

body .gutschein-cta h2 {
	/* Gleicher Wert wie .listing-intro h2 (+~18%, dann nochmal +20%: 44px -> 62px),
	   damit die Ueberschrift konsistent zu den anderen Unterseiten ist. */
	font-size: 62px;
}

body .gutschein-cta h1 {
	/* Gleicher Wert wie .listing-intro h1 (+~17%, dann nochmal +20%: 60px -> 84px). */
	font-size: 84px;
}

body .gutschein-cta h2:first-of-type {
	/* Gleicher, engerer Wert wie bei .listing-intro statt der globalen
	   --gap-heading-lines (55px), passend zur groesseren Schrift. */
	margin-bottom: 18px;
}

.gutschein-cta .button {
	margin-top: 20px;
}

.gutschein-block {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 100px;
	text-align: center;
}

body .gutschein-block h2 {
	font-size: 40px;
	/* Standard-Ueberschriften-Schriftart (--font-display, wie bei den
	   uebrigen H1/H2 sitewide) statt der geerbten Schreibschrift
	   (--font-heading/Stackyard, wie bei "Willkommen bei"). */
	font-family: var(--font-display);
}

.gutschein-block p {
	text-align: left;
	/* Auf Wunsch um 3 Schriftgroessen-Stufen kleiner (Projekt-Konvention:
	   1 Stufe = 2px) als der zuvor von body geerbte Wert (30px -> 24px). */
	font-size: 24px;
}

.gutschein-block a {
	text-decoration: underline;
	color: var(--color-accent);
}

/* ==========================================================================
   Hamburger-Breakpoint (eigenstaendig, bewusst hoeher als die uebrigen
   Breakpoints unten): Bei 8 Menuepunkten + Logo bricht die ausgeschriebene
   Navigation schon deutlich vor dem normalen Tablet-Breakpoint (1024px) um
   bzw. quetscht das Logo oval (gemessen: erste Umbrueche/Stauchung bereits
   ab ~1110px). 1200px liegt mit Sicherheitsabstand darueber, sodass im
   ausgeschriebenen Zustand nie zu wenig Platz ist. Bewusst eine reine
   Breitenabfrage (kein Geraete-Unterschied) - ein querformatiges Handy
   unterhalb von 1200px bekommt automatisch dasselbe Hamburger-Menue.
   ========================================================================== */

@media (max-width: 1200px) {
	.menu-toggle {
		display: block;
		position: relative;
		z-index: 100;
	}

	.hero-carousel,
	.page-hero {
		border-bottom-width: 8px;
	}

	/* Kompakte Leiste beim Scrollen: Hoehe (.header-main) und Logo-Transparenz
	   (.site-branding) werden direkt per Inline-Style aus main.js gesetzt,
	   kontinuierlich an die Scroll-Position gekoppelt - bewusst KEINE
	   CSS-Transition hier, das wuerde der Scroll-Position hinterherlaufen
	   statt ihr exakt zu folgen. Bewusst nur in diesem Breakpoint relevant
	   (main.js prueft denselben 1200px-Media-Query), die normale
	   Desktop-Navigation bleibt unberuehrt. */

	#primary-navigation {
		/* Positionierungskontext ist .header-main (position:sticky) - dadurch
		   spannt sich das Dropdown ueber die volle Fensterbreite, obwohl
		   #primary-navigation selbst innerhalb von .container (mit
		   max-width) verschachtelt ist. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* Heller Creme-Ton statt Grau, gleiche Variable wie der helle
		   Seiten-Hintergrund. */
		background: var(--color-bg);
		/* Aufklapp-Animation ohne bekannte Zielhoehe: max-height von 0 auf
		   einen Wert, der komfortabel ueber der tatsaechlich benoetigten
		   Hoehe aller Menuepunkte liegt - overflow:hidden sorgt dafuer, dass
		   die sichtbare Box trotzdem nur so hoch wie der Inhalt wird, nicht
		   auf die volle 600px gestreckt. */
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
		z-index: 99;
	}

	#primary-navigation.is-open {
		max-height: 600px;
	}

	#primary-navigation .elementor-nav-menu,
	#primary-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* Halbiert gegenueber vorher (12px 0). */
		padding: 6px 0;
	}

	#primary-navigation a {
		display: block;
		/* Dunkle statt helle Schrift, da der Menue-Hintergrund jetzt selbst
		   hell (Creme) ist - hell auf hell waere unlesbar. */
		color: var(--color-dark);
		/* Menuegroesse (Innenabstand) etwa halbiert gegenueber vorher (22px /
		   14px 20px), zusaetzlich normale statt fette Schrift (die globale
		   Nav-Basisregel setzt font-weight:700). Schriftgroesse auf 14px
		   angehoben (von zunaechst 12px) fuer bessere Lesbarkeit. */
		font-size: 14px;
		font-weight: 400;
		text-align: center;
		padding: 7px 20px;
	}

	/* Aktive Seite UND Hover NUR im aufgeklappten Hamburger-Menue: statt der
	   roten Unterstreichung/des roten Hover-Balkens (Desktop-Basisregel,
	   bleibt dort unveraendert) eine flaechige Einfaerbung ueber den
	   kompletten Menuepunkt-Bereich - kein Rot/Akzent. Eigener, weisserer Ton
	   (--color-white) statt --color-bg, da der Menue-Hintergrund selbst
	   inzwischen Creme (--color-bg) ist und beide sonst verschmelzen wuerden.
	   Beide Zustaende sind unabhaengig (Selektorliste), schliessen sich also
	   nicht gegenseitig aus. */
	#primary-navigation a:hover,
	#primary-navigation a[aria-current="page"] {
		border-bottom-color: transparent;
		background: var(--color-white);
		color: var(--color-dark);
	}
}

/* ==========================================================================
   Responsive (Breakpoints wie auf karlicomedy.de: Tablet <=1024px, Mobile <=767px)
   ========================================================================== */

@media (max-width: 1024px) {
	body.wp-theme-karli-comedy h1 { font-size: 90px; }
	body.wp-theme-karli-comedy h2 { font-size: 54px; }
	body { font-size: 22px; }

	/* Auf Wunsch um 3 Schriftgroessen-Stufen kleiner als der an dieser
	   Breite geerbte Wert (22px -> 16px), analog zur Desktop-Anpassung. */
	.gutschein-block p { font-size: 16px; }

	/* Auf Wunsch um 4 Schriftgroessen-Stufen kleiner als der an dieser
	   Breite geerbte Wert (Projekt-Konvention: 1 Stufe = 2px). */
	body .legal-content h1 { font-size: 46px; }
	.legal-content-body { font-size: 14px; }

	.teaser-row,
	.info-block {
		flex-direction: column;
	}

	.teaser-row.is-reverse,
	.info-block.is-reverse {
		flex-direction: column;
	}

	/* flex:1 1 50% ist auf Zeilenbreite ausgelegt - bei flex-direction:column
	   (gestapeltes Layout) wuerde derselbe Wert stattdessen als Hoehen-Basis
	   interpretiert und unvorhersehbare Hoehen erzeugen. Zurueck auf
	   inhaltsbasierte Hoehe: Bild behaelt sein natives Seitenverhaeltnis,
	   Textblock seine natuerliche Hoehe. */
	.teaser-image,
	.info-block-image,
	.teaser-content,
	.info-block-content {
		flex: 0 1 auto;
	}

	/* Einheitliches 4:3-Format fuer die Block-Bilder auf Startseite und
	   Dein-Event-Seite in der gestapelten Ansicht, unabhaengig vom
	   individuellen Desktop-Seitenverhaeltnis. Ueber die Markup-Klasse
	   .mobile-fixed-ratio bewusst NICHT auf Gutschein angewendet (dort per
	   Anforderung unveraendert) - eine zuverlaessige Seiten-Erkennung ueber
	   body-Klassen war nicht verfuegbar (WordPress liefert hier fuer alle
	   drei Unterseiten-Templates identisch "page-template-default", keine
	   slug-spezifische Klasse). Bilder, die bereits nativ 16:9 sind (Dein
	   Event/XXL-Show auf der Startseite), tragen die Klasse bewusst NICHT -
	   sie behalten ihr eigenes --block-ratio unveraendert, auch mobil.
	   object-position:35% zeigt den Ausschnitt etwas oberhalb der
	   Bildmitte statt exakt zentriert. */
	.mobile-fixed-ratio img {
		aspect-ratio: 4 / 3;
		object-position: center 35%;
	}

	/* Die calc(50vw - 540px)-Einrueckung setzt eine 50%-breite Desktop-Spalte
	   voraus (siehe .teaser-row.is-reverse .teaser-content weiter oben) - bei
	   gestapeltem Ein-Spalten-Layout auf Tablet/Mobile gilt vorerst wieder
	   das normale 60px-Padding wie bei allen anderen Bloecken. */
	.teaser-row.is-reverse .teaser-content,
	.info-block.is-reverse .info-block-content {
		padding-left: 60px;
	}
}

@media (max-width: 767px) {
	body.wp-theme-karli-comedy h1 { font-size: 48px; }
	body.wp-theme-karli-comedy h2 { font-size: 32px; }
	h3 { font-size: 40px; }
	h4 { font-size: 28px; }
	body { font-size: 18px; }

	/* Auf Wunsch um 3 Schriftgroessen-Stufen kleiner als der an dieser
	   Breite geerbte Wert (18px -> 12px), analog zur Desktop-Anpassung. */
	.gutschein-block p { font-size: 12px; }

	/* Seitlicher Innenabstand des Textfelds in den zweispaltigen Text-Bild-
	   Bloecken NUR mobil leicht verringert (60px -> 53px links/rechts,
	   oben/unten unveraendert), damit die effektive Textspaltenbreite um
	   ca. 5% zunimmt (bei einer repraesentativen mobilen Breite von 390px:
	   270px -> 284px nutzbare Breite = +5.2%). Alle vier Selektor-Varianten
	   noetig (nicht nur .teaser-content/.info-block-content) - die
	   .is-reverse-Variante hat mit "3 Klassen" eine hoehere Spezifitaet als
	   ein einzelner Klassen-Selektor und wuerde diese Regel sonst trotz
	   spaeterer Position im Stylesheet ignorieren. */
	.teaser-content,
	.info-block-content,
	.teaser-row.is-reverse .teaser-content,
	.info-block.is-reverse .info-block-content {
		/* Zusaetzliche, diesmal einseitige Verbreiterung NUR nach links (der
		   gesamte Textblock - Ueberschrift, Infotext UND Button - haengt am
		   selben Innenabstand, wird also automatisch als Ganzes verschoben):
		   53px -> 39px. Die DOM-Box selbst ist mobil bereits randlos ueber
		   die volle Zeilenbreite gestreckt (kein Container-Versatz mehr
		   vorhanden, der die linke Kante haette "verschieben" koennen) -
		   die einzige wirksame Stellschraube dafuer ist daher der linke
		   Innenabstand, ueber den der sichtbare Beginn des Textinhalts
		   gesteuert wird. -14px entspricht bei 390px Referenzbreite +4.93%
		   zusaetzlicher effektiver Breite (284px -> 298px) - rechts
		   bewusst unveraendert bei 53px. */
		padding-left: 39px;
		padding-right: 53px;
	}

	/* Auf Wunsch um 4 Schriftgroessen-Stufen kleiner als der an dieser
	   Breite geerbte Wert (Projekt-Konvention: 1 Stufe = 2px). */
	body .legal-content h1 { font-size: 28px; }
	.legal-content-body { font-size: 10px; }
	.legal-content { padding: 60px 20px 80px; }

	.header-topbar .container {
		justify-content: center;
	}

	body .hero-intro h1 { font-size: 48px; }
	body .hero-intro h2 { font-size: 48px; } /* verdoppelt (24px -> 48px), analog zur Desktop-Anpassung */

	/* .page-hero behaelt die Ueberlappung mit dem transparenten Header
	   (margin-top:var(--header-overlap), Basisregel) bei jeder Fensterbreite
	   bei - vorher wurde sie hier auf mobilen Breiten deaktiviert, wodurch
	   das Titelbild nicht bis zur oberen Kante reichte und stattdessen ein
	   grauer Streifen (die undurchsichtig wirkende .header-main-Leiste ohne
	   Bild dahinter) sichtbar war. */

	/* Ueberlappung mit dem transparenten Header ist im Original nur Desktop/Tablet (@media max-width:767px -> margin-top:0) */
	.hero-carousel {
		margin-top: 0;
	}

	/* Werbebanner/Filterleiste (comedy-shows): responsiv statt fester 1130px-Breite */
	.ad-banner {
		height: auto;
		aspect-ratio: 1130 / 250;
		margin: 0 20px;
	}


	.show-filter {
		height: auto;
		padding: 15px 20px;
	}

	/*
	 * Ticket-Karte (comedy-shows/open-air/solo-shows/dating-shows) auf
	 * Mobile: kein sichtbarer TICKETS-Button - die komplette Karte ist
	 * stattdessen per Klick-Handler (main.js) mit dem Ticketlink verlinkt.
	 * Bewusst kein <a>-Wrap um die ganze Karte im Markup: der TICKETS-Button
	 * ist strukturell weiterhin Teil derselben, am Desktop unveraendert
	 * genutzten Vorlage - ein echtes <a> um die Karte wuerde dort eine
	 * ungueltige verschachtelte Verlinkung erzeugen (<a> in <a>). Der
	 * bestehende Klick-Handler erreicht denselben Effekt (ganze Karte
	 * klickbar) ohne dieses Problem.
	 * Bild links (37%), rechts Datum/Uhrzeit + Titel, darunter (als eigene,
	 * umgebrochene Zeile) die Location-Leiste ueber die volle Breite. Auf
	 * Mobile gilt keine feste 250px-Kartenhoehe (die ist Desktop-Basis) -
	 * die Karte waechst hier wieder mit dem Inhalt.
	 * Weitere Kompaktierung (94px-Zielhoehe, engere Abstaende/Schrift,
	 * ueberlagerte Location-Leiste) wurde zurueckgenommen und findet
	 * stattdessen ausschliesslich auf der isolierten /testtickets/-Seite
	 * statt (eigene, komplett unabhaengige CSS-Kopie unter .page-testtickets,
	 * siehe eigener Abschnitt weiter unten) - diese Basis-Regel hier bleibt
	 * bis auf Weiteres unangetastet.
	 */
	.ticket-list {
		/* Randlos ueber die volle Breite statt der 20px seitlichen
		   Listen-Innenabstaende (bleibt bestehen). */
		padding-left: 0;
		padding-right: 0;
	}

	.ticket-card {
		height: auto;
		flex-wrap: wrap;
		cursor: pointer;
	}

	.ticket-card-image {
		flex: 0 0 37%;
		width: auto;
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde die Basisregel (height:100%) bei einem auto-hohen Wrapper
		   (siehe .ticket-card-image oben) zirkulaer auf die eigene, native
		   Bildhoehe zurueckfallen und ueber align-items:stretch die ganze
		   Karte mit in die Hoehe ziehen, statt sich der Texthoehe
		   anzupassen (struktureller Bugfix, unabhaengig von der weiter
		   unten zurueckgenommenen Kompaktierung - bewusst behalten). */
		position: absolute;
		inset: 0;
		/* Bild fuellt die Flaeche komplett, minimaler Beschnitt statt Rand -
		   bislang war hier (Basisregel) object-fit:contain, cover galt nur
		   ab 768px. */
		object-fit: cover;
	}

	.ticket-card-main {
		flex: 1 1 63%;
		padding: 16px;
	}

	.ticket-card-action {
		display: none;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. */
	.ticket-card-date img,
	.ticket-card-time img {
		display: none;
	}

	.ticket-card-location {
		position: static;
		flex: 0 0 100%;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.ticket-card-location span,
	.ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	/* Infotext ist in der Live-Vorlage auf der Karte mobil ausgeblendet (elementor-hidden-mobile) */
	.ticket-card-info {
		display: none;
	}
}

/*
 * Ticket-Karte (comedy-shows/open-air/solo-shows) auf Desktop (ab 768px):
 * Feinabgleich an zwei Referenz-Screenshots echter Show-Tickets. Bewusst nur
 * hier (nicht in der Basis-Regel) - Mobile bleibt unveraendert bei den
 * bisherigen Werten (object-fit:contain, 16px/28px Schrift, gap:10px).
 */
@media (min-width: 768px) {
	.ticket-card-image img {
		/* Bild fuellt die Flaeche komplett, minimaler Beschnitt statt Rand. */
		object-fit: cover;
	}

	.ticket-card-main {
		/* Oben knapper als zuvor, damit die Datum/Uhrzeit-Zeile naeher am
		   Kartenrand sitzt. */
		padding: 18px 24px;
		padding-bottom: var(--ticket-card-location-height);
		/* Abstaende jetzt einzeln je Element statt einheitlichem gap. */
		gap: 0;
	}

	.ticket-card-meta {
		margin-bottom: 14px;
	}

	.ticket-card-date,
	.ticket-card-time {
		/* Von 18px auf 24px (~3 Groessenstufen) - deutlich groesser, bleibt aber
		   klar unter der Titelgroesse (32px). */
		font-size: 24px;
	}

	.ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   Testseite Testtickets (/testtickets/) - vollstaendig isolierte Kopie
   ==========================================================================
   Alle Filterleisten- und Karten-Regeln 1:1 dupliziert und unter .page-testtickets
   gescoped (hoehere Spezifitaet als die ungescopten Basis-Regeln oben, daher
   wirkungslos fuer die echten Seiten). Kuenftige Experimente auf der Testseite
   aendern ausschliesslich diese Regeln, niemals die echten .show-filter/.ticket-*-
   Regeln weiter oben - und umgekehrt bleiben Aenderungen an den echten Regeln
   ohne Wirkung auf diese Testseite.
   ========================================================================== */

.page-testtickets .show-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	height: var(--filter-height);
	background: var(--color-dark);
	max-width: var(--list-width);
	/* Unten kein Abstand mehr (statt var(--filter-gap) auf beiden Seiten) -
	   die Monatszeile direkt darunter (.month-nav) schliesst jetzt
	   nahtlos an, siehe dortige Regel (identischer Ansatz wie bereits auf
	   /testshows/ umgesetzt). Oben unveraendert bei var(--filter-gap)
	   (Abstand zum Werbebanner darueber). */
	margin: var(--filter-gap) auto 0;
	padding: 0 20px;
	/* Nur oben abgerundet - unten schliesst die Monatszeile direkt an,
	   zusammen ergibt das einen durchgehend abgerundeten Block. */
	border-radius: 4px 4px 0 0;
}

.page-testtickets .show-filter-item {
	position: relative;
	padding: 6px 6px 6px 30px;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.page-testtickets .show-filter-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-bg);
}

.page-testtickets .show-filter-item[aria-pressed="true"]::after {
	content: "x";
	position: absolute;
	left: -2px;
	top: 45%;
	transform: translateY(-50%);
	color: var(--color-accent);
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
}

.page-testtickets .ad-banner {
	/* Feste aspect-ratio statt fixer Hoehe - dadurch bleibt das Verhaeltnis
	   1130:250 bei JEDER Breite oberhalb 768px exakt gleich (vorher: feste
	   Hoehe 250px + variable Breite zwischen 768-1130px liess das Verhaeltnis
	   je nach Fensterbreite driften, dadurch wirkte das Bild unterschiedlich
	   zugeschnitten).
	   WICHTIG fuer Wartung: 1130px unten ist die vom Nutzer angekuendigte
	   native Breite der ERSETZTEN banner-comedyshow.png (Ziel-Seitenverhaeltnis
	   1130:250, exakt passend). Die Datei konnte zum Zeitpunkt dieser Aenderung
	   auf diesem Dateisystem NICHT verifiziert werden (sips zeigte weiterhin
	   die alte Version bei 2172x724px/3:1) - falls die tatsaechliche Datei
	   spaeter doch eine andere native Breite hat, hier den echten, per
	   `sips -g pixelWidth banner-comedyshow.png` ermittelten Wert eintragen,
	   sonst kann es bei sehr breiten Fenstern zu Unschaerfe (Hochskalieren
	   ueber die Originalaufloesung) oder wieder sichtbaren Raendern kommen. */
	max-width: min(var(--list-width), 1130px);
	aspect-ratio: 1130 / 250;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	/* Setzt die Platzhalter-Optik der unscoped Basisregel (gestrichelter
	   Rahmen + gestreifter Hintergrund) explizit zurueck - Weglassen der
	   Eigenschaften allein wuerde sie NICHT deaktivieren, da die weniger
	   spezifische .ad-banner-Basisregel sonst weiterhin durchschlaegt. */
	border: none;
	background: none;
}

.page-testtickets .ad-banner-link {
	display: block;
	width: 100%;
	height: 100%;
}

.page-testtickets .ad-banner-link img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain statt cover - Bild wird als Ganzes proportional skaliert statt
	   beschnitten. Bei exakt passendem nativen Seitenverhaeltnis (1130:250)
	   hat das denselben sichtbaren Effekt wie cover (kein Beschnitt UND keine
	   Raender); faellt aber automatisch wieder auf sichtbare Raender statt
	   Beschnitt zurueck, sollte die Datei doch von 1130:250 abweichen. */
	object-fit: contain;
	object-position: center center;
}

.page-testtickets .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-testtickets .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-testtickets .ticket-card.is-hidden {
	display: none;
}

.page-testtickets .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-testtickets .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-testtickets .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-testtickets .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-testtickets .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-testtickets .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-testtickets .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-testtickets .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-testtickets .ticket-card-date,
.page-testtickets .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-testtickets .ticket-card-date img,
.page-testtickets .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-testtickets .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-testtickets .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-testtickets .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-testtickets .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-testtickets .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-testtickets .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-testtickets .ticket-card-location strong,
.page-testtickets .ticket-card-location span {
	padding-right: 15px;
}

.page-testtickets .ticket-card-location strong {
	font-weight: 700;
}

.page-testtickets .ticket-card-soldout {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-display);
	font-size: 34px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 5;
}

@media (max-width: 767px) {
	.page-testtickets .ad-banner {
		/* Randlos: volle Viewport-Breite statt der Content-Raender/
		   Native-Aufloesungs-Obergrenze aus dem Desktop-Block - unterhalb
		   767px ist der Viewport ohnehin immer weit kleiner als die native
		   Bildbreite (2172px), die Grenze wuerde hier nie greifen. */
		max-width: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1130 / 250;
		margin: 0;
	}

	.page-testtickets .show-filter {
		height: auto;
		padding: 15px 20px;
	}

	/*
	 * Kompakte Zeilenkarte (per Web-Inspector von karlicomedy.de gemessen:
	 * min-height 94px, row-gap 30px zwischen den Karten, Karte selbst
	 * randlos ueber die volle Breite). Bild links (37%, ueber die volle
	 * Kartenhoehe quergeschnitten), rechts Datum/Uhrzeit + Titel; die
	 * Location-Leiste liegt wie am Desktop ueberlagert am unteren Rand
	 * statt eine eigene Zeile zu beanspruchen. Nur auf dieser isolierten
	 * Testseite - die echten Show-Listen-Seiten bleiben unangetastet.
	 */
}

/* ==========================================================================
   Testtickets: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-testtickets .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-testtickets .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--tt-card-height: 136px;
		min-height: var(--tt-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --tt-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-testtickets .ticket-card-image {
		flex: 0 0 auto;
		width: var(--tt-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-testtickets .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-testtickets .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-testtickets .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-testtickets .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-testtickets .ticket-card-action {
		display: none;
	}

	.page-testtickets .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
		/* Datum und Uhrzeit sollen niemals als zwei Zeilen untereinander
		   umbrechen - stattdessen greift bei zu wenig Platz die Schriftgroessen-
		   Verkleinerung weiter unten (clamp()), bevor es zu einem Umbruch
		   kommen wuerde. */
		flex-wrap: nowrap;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +2 Stufen gegenueber vorher
	   (13px, je Stufe +2px -> 17px). clamp() haelt die Zeile bei sehr
	   schmalen Displays einzeilig: faellt der verfuegbare Platz unter eine
	   physikalische Grenze, wird die Schrift automatisch verkleinert (analog
	   zur bereits auf Desktop umgesetzten Loesung). Werte empirisch per
	   Playwright kalibriert (Bisektion des tatsaechlich noch passenden
	   Schriftgrads bei 320px/430px Breite, mit Sicherheitsabstand): bei 430px
	   passen 17px bereits exakt, bei 320px bleiben mit 9.5px ca. 8px Puffer
	   zum Kartenrand. Unterhalb von 320px wird nicht weiter reduziert, weil
	   es dort ohnehin keine relevanten Geraete mehr gibt. */
	.page-testtickets .ticket-card-date,
	.page-testtickets .ticket-card-time {
		font-size: clamp(9.5px, -12.3182px + 6.8182vw, 17px);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-testtickets .ticket-card-date img,
	.page-testtickets .ticket-card-time img {
		display: none;
	}

	.page-testtickets .ticket-card-title {
		/* +3 Stufen gegenueber vorher (19px, je Stufe +2px -> 25px). Feste
		   px-Zeilenhoehe (statt relativ) fuer eine deterministische
		   2-Zeilen-Maximalhoehe (2 x 28px = 56px), die zusammen mit den
		   uebrigen Zonen sicher innerhalb der fixen 136px-Kartenhoehe bleibt.
		   -webkit-line-clamp begrenzt auf maximal 2 Zeilen inkl. Ellipsis am
		   Ende der 2. Zeile, sobald der Titel laenger ist - eine 3. Zeile kann
		   dadurch nie entstehen. */
		font-size: 25px;
		line-height: 28px;
		padding-left: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-testtickets .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --tt-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--tt-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-testtickets .ticket-card-location span,
	.page-testtickets .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-testtickets .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */
@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-testtickets im Desktop-Bereich)
	   - betrifft weder /testshows/ noch die echten Seiten (die weiterhin
	   die :root-Werte nutzen) noch die mobile Kompakt-Ansicht dieser Seite
	   (die ueber die komplett eigene --tt-card-height-Variable laeuft und
	   diese drei Variablen gar nicht konsumiert). Schriftgroessen und
	   Icon-Groessen sind bewusst NICHT an diese Variablen gekoppelt und
	   bleiben dadurch automatisch unveraendert. */
	.page-testtickets {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-testtickets .ticket-card-image img {
		object-fit: cover;
	}

	.page-testtickets .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-testtickets .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-testtickets .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-testtickets .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-testtickets .ticket-card-date,
	.page-testtickets .ticket-card-time {
		/* +1 Schriftgroessen-Stufe (Projekt-Konvention: 1 Stufe = 2px):
		   24px -> 26px. line-height EXPLIZIT auf den bisherigen, natuerlich
		   gerenderten Wert (38.4px = 24px * 1.6 Standard-line-height)
		   fixiert, statt sie mit der Schrift mitwachsen zu lassen (waere bei
		   26px * 1.6 = 41.6px geworden) - dadurch bleibt die Hoehe der
		   oberen Zone (.ticket-card-meta) exakt unveraendert bei 38.4px und
		   der neue, groessere Text zentriert sich automatisch (per
		   Zeilenbox-Zentrierung) innerhalb dieser gleichbleibenden Hoehe.
		   Titel-Position bleibt dadurch garantiert unveraendert (haengt
		   direkt von der Meta-Hoehe ab, siehe .ticket-card-content/
		   .ticket-card-meta weiter oben). */
		font-size: 26px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-testtickets .ticket-card-date img,
	.page-testtickets .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   wie bisher (Kalender war 24px bei 24px Schrift = Faktor 1.0,
		   Uhr war 22px bei 24px Schrift = Faktor 0.917): Kalender
		   24px -> 26px, Uhr 22px -> 24px (22 * 26/24 = 23.83, gerundet). */
		width: 26px;
		height: 26px;
	}

	.page-testtickets .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 26/24). */
		width: 24px;
		height: 24px;
	}

	.page-testtickets .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-testtickets .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-testtickets .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/testtickets-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-testtickets .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-testtickets .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-testtickets .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-testtickets .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-testtickets .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-testtickets .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-testtickets .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-testtickets .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-testtickets .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-testtickets .ticket-card-location strong,
	.page-testtickets .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}

/* Rein physikalische Grenze, unabhaengig vom Ticketbutton - neu kalibriert
   fuer die um eine Stufe vergroesserte Basisschrift (26px statt 24px, dazu
   groesssere Icons 26px/24px statt 24px/22px): bei durchgehend 26px passt
   der Text erst ab ca. 805px Fensterbreite sicher (>=10px Marge) - darunter
   waere er bei 768px sonst um 23px in den Button hineingelaufen (empirisch
   gemessen). Deshalb hier eine auf genau diesen schmalen Rest kalibrierte
   Verkleinerung (26px -> 23px zwischen 768-805px, >=14px Marge an jedem
   getesteten Punkt). Ab 805px identisch zum festen 26px oben - keine
   Ueberschneidung mit dem Ticketbutton beteiligt (weiterhin strukturell
   unabhaengig). Gleiche Handy-Querformat-Ausnahme wie oben
   (De-Morgan-Muster). */
@media (min-width: 768px) and (max-width: 805px) and (orientation: portrait),
	(min-width: 768px) and (max-width: 805px) and (min-height: 500px) {
	.page-testtickets .ticket-card-date,
	.page-testtickets .ticket-card-time {
		font-size: clamp(23px, -39.27px + 8.1081vw, 26px);
	}
}

/*
 * Monats-Navigation (nur Testseite /testtickets/, siehe
 * assets/js/testtickets.js) - komplett neue Komponente, existiert nirgends
 * sonst im Theme, daher direkt unter .page-testtickets statt dupliziert.
 */
.page-testtickets .month-nav {
	/* Rueckt direkt an die Filterzeile heran und wirkt mit ihr als ein
	   zusammenhaengender Block: gleicher dunkler Farbton (Dunkel-Petrol
	   #2E3D44), aber sichtbar heller abgestuft (~25% heller gemischt mit
	   Weiss), damit sich beide Bereiche allein durch den Farbunterschied
	   als "Kopfzeile (Filter) + Unterzeile (Monat)" lesen - bewusst OHNE
	   Trennlinie/Rahmen. Identischer Ansatz und identischer Farbwert wie
	   bereits auf /testshows/ umgesetzt. Kein eigener Custom-Property-Token
	   in :root angelegt, da dies eine reine Testtickets-Experimentalfarbe
	   ist. */
	--month-nav-bg: #626d73;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: var(--list-width);
	/* Oben kein Abstand mehr (statt -20px) - schliesst direkt an
	   .show-filter an (dessen margin-bottom jetzt ebenfalls 0 ist).
	   Unten unveraendert bei 40px Abstand zur Ticketliste. */
	margin: 0 auto 40px;
	background: var(--month-nav-bg);
	padding: 15px 20px;
	/* Nur unten abgerundet - oben schliesst die Filterzeile direkt an. */
	border-radius: 0 0 4px 4px;
}

.page-testtickets .month-nav-prev,
.page-testtickets .month-nav-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-dark);
	color: var(--color-bg);
	border: none;
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.page-testtickets .month-nav-prev:hover,
.page-testtickets .month-nav-next:hover {
	opacity: 0.8;
}

.page-testtickets .month-nav-prev:disabled,
.page-testtickets .month-nav-next:disabled {
	visibility: hidden;
}

.page-testtickets .month-nav-label {
	min-width: 220px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	/* War bisher var(--color-dark) (dunkler Text), passend zum vorherigen
	   HELLEN Seitenhintergrund hinter .month-nav. Jetzt wo .month-nav
	   selbst einen dunklen Hintergrund hat, muss der Text hell sein, um
	   lesbar zu bleiben - matcht damit auch .show-filter-item direkt
	   darueber, das aus demselben Grund bereits var(--color-bg) nutzt
	   (identischer Ansatz wie bereits auf /testshows/ umgesetzt). */
	color: var(--color-bg);
}

/* ==========================================================================
   Testseite Testshows (/testshows/) - vollstaendig isolierte Kopie
   ==========================================================================
   Vollstaendige 1:1-Kopie des gesamten ".page-testtickets"-Abschnitts
   (Stand nach der Datum/Uhrzeit-Strukturtrennung, Titel-/Infotext-Fixes,
   Location-Kuerzung), 1:1 auf ".page-testshows" umgestellt - zweite,
   unabhaengige Sandbox fuer weiteren Feinschliff an der Ticket-Optik, ohne
   den bestaetigt funktionierenden Stand von /testtickets/ zu gefaehrden.
   Alle Filterleisten- und Karten-Regeln unter .page-testshows gescoped
   (hoehere Spezifitaet als die ungescopten Basis-Regeln oben, daher
   wirkungslos fuer die echten Seiten). Kuenftige Experimente auf dieser
   Testseite aendern ausschliesslich diese Regeln, niemals die echten
   .show-filter/.ticket-*-Regeln weiter oben oder die .page-testtickets-Regeln
   - und umgekehrt bleiben Aenderungen an jenen ohne Wirkung auf diese
   Testseite.
   ========================================================================== */

.page-testshows .show-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	height: var(--filter-height);
	background: var(--color-dark);
	max-width: var(--list-width);
	/* Unten kein Abstand mehr (statt var(--filter-gap) auf beiden Seiten) -
	   die Monatszeile direkt darunter (.month-nav) schliesst jetzt
	   nahtlos an, siehe dortige Regel. Oben unveraendert bei
	   var(--filter-gap) (Abstand zum Werbebanner darueber). */
	margin: var(--filter-gap) auto 0;
	padding: 0 20px;
	/* Nur oben abgerundet - unten schliesst die Monatszeile direkt an,
	   zusammen ergibt das einen durchgehend abgerundeten Block. */
	border-radius: 4px 4px 0 0;
}

.page-testshows .show-filter-item {
	position: relative;
	padding: 6px 6px 6px 30px;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.page-testshows .show-filter-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-bg);
}

.page-testshows .show-filter-item[aria-pressed="true"]::after {
	content: "x";
	position: absolute;
	left: -2px;
	top: 45%;
	transform: translateY(-50%);
	color: var(--color-accent);
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
}

.page-testshows .ad-banner {
	max-width: var(--list-width);
	height: var(--banner-height);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(46, 61, 68, 0.08),
		rgba(46, 61, 68, 0.08) 10px,
		rgba(46, 61, 68, 0.02) 10px,
		rgba(46, 61, 68, 0.02) 20px
	);
	border: 2px dashed var(--color-dark);
	border-radius: 4px;
	color: var(--color-dark);
	font-size: 16px;
	text-align: center;
}

.page-testshows .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-testshows .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-testshows .ticket-card.is-hidden {
	display: none;
}

.page-testshows .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-testshows .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-testshows .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-testshows .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-testshows .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-testshows .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-testshows .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-testshows .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-testshows .ticket-card-date,
.page-testshows .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-testshows .ticket-card-date img,
.page-testshows .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-testshows .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-testshows .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-testshows .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-testshows .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-testshows .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-testshows .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-testshows .ticket-card-location strong,
.page-testshows .ticket-card-location span {
	padding-right: 15px;
}

.page-testshows .ticket-card-location strong {
	font-weight: 700;
}

.page-testshows .ticket-card-soldout {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-display);
	font-size: 34px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 5;
}

@media (max-width: 767px) {
	.page-testshows .ad-banner {
		height: auto;
		aspect-ratio: 1130 / 250;
		margin: 0 20px;
	}

	.page-testshows .show-filter {
		height: auto;
		padding: 15px 20px;
	}

	/*
	 * Kompakte Zeilenkarte (per Web-Inspector von karlicomedy.de gemessen:
	 * min-height 94px, row-gap 30px zwischen den Karten, Karte selbst
	 * randlos ueber die volle Breite). Bild links (37%, ueber die volle
	 * Kartenhoehe quergeschnitten), rechts Datum/Uhrzeit + Titel; die
	 * Location-Leiste liegt wie am Desktop ueberlagert am unteren Rand
	 * statt eine eigene Zeile zu beanspruchen. Nur auf dieser isolierten
	 * Testseite - die echten Show-Listen-Seiten bleiben unangetastet.
	 */
}

/* ==========================================================================
   Testshows: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-testshows .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-testshows .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--ts-card-height: 136px;
		min-height: var(--ts-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --ts-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-testshows .ticket-card-image {
		flex: 0 0 auto;
		width: var(--ts-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-testshows .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-testshows .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-testshows .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-testshows .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-testshows .ticket-card-action {
		display: none;
	}

	.page-testshows .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +1 Stufe gegenueber vorher
	   (11px -> 13px). */
	.page-testshows .ticket-card-date,
	.page-testshows .ticket-card-time {
		font-size: 13px;
	}

	.page-testshows .ticket-card-date img,
	.page-testshows .ticket-card-time img {
		display: none;
	}

	.page-testshows .ticket-card-title {
		/* +2 Stufen gegenueber vorher (15px, je Stufe +2px -> 19px). */
		font-size: 19px;
		line-height: 1.15;
		padding-left: 0;
	}

	.page-testshows .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --ts-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--ts-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-testshows .ticket-card-location span,
	.page-testshows .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-testshows .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */
@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-testshows im Desktop-Bereich)
	   - betrifft weder /testshows/ noch die echten Seiten (die weiterhin
	   die :root-Werte nutzen) noch die mobile Kompakt-Ansicht dieser Seite
	   (die ueber die komplett eigene --ts-card-height-Variable laeuft und
	   diese drei Variablen gar nicht konsumiert). Schriftgroessen und
	   Icon-Groessen sind bewusst NICHT an diese Variablen gekoppelt und
	   bleiben dadurch automatisch unveraendert. */
	.page-testshows {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-testshows .ticket-card-image img {
		object-fit: cover;
	}

	.page-testshows .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-testshows .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-testshows .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-testshows .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-testshows .ticket-card-date,
	.page-testshows .ticket-card-time {
		/* +1 Schriftgroessen-Stufe (Projekt-Konvention: 1 Stufe = 2px):
		   24px -> 26px. line-height EXPLIZIT auf den bisherigen, natuerlich
		   gerenderten Wert (38.4px = 24px * 1.6 Standard-line-height)
		   fixiert, statt sie mit der Schrift mitwachsen zu lassen (waere bei
		   26px * 1.6 = 41.6px geworden) - dadurch bleibt die Hoehe der
		   oberen Zone (.ticket-card-meta) exakt unveraendert bei 38.4px und
		   der neue, groessere Text zentriert sich automatisch (per
		   Zeilenbox-Zentrierung) innerhalb dieser gleichbleibenden Hoehe.
		   Titel-Position bleibt dadurch garantiert unveraendert (haengt
		   direkt von der Meta-Hoehe ab, siehe .ticket-card-content/
		   .ticket-card-meta weiter oben). */
		font-size: 26px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-testshows .ticket-card-date img,
	.page-testshows .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   wie bisher (Kalender war 24px bei 24px Schrift = Faktor 1.0,
		   Uhr war 22px bei 24px Schrift = Faktor 0.917): Kalender
		   24px -> 26px, Uhr 22px -> 24px (22 * 26/24 = 23.83, gerundet). */
		width: 26px;
		height: 26px;
	}

	.page-testshows .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 26/24). */
		width: 24px;
		height: 24px;
	}

	.page-testshows .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-testshows .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-testshows .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/testshows-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-testshows .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-testshows .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-testshows .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-testshows .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-testshows .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-testshows .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-testshows .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-testshows .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-testshows .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-testshows .ticket-card-location strong,
	.page-testshows .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}

/* Rein physikalische Grenze, unabhaengig vom Ticketbutton - neu kalibriert
   fuer die um eine Stufe vergroesserte Basisschrift (26px statt 24px, dazu
   groesssere Icons 26px/24px statt 24px/22px): bei durchgehend 26px passt
   der Text erst ab ca. 805px Fensterbreite sicher (>=10px Marge) - darunter
   waere er bei 768px sonst um 23px in den Button hineingelaufen (empirisch
   gemessen). Deshalb hier eine auf genau diesen schmalen Rest kalibrierte
   Verkleinerung (26px -> 23px zwischen 768-805px, >=14px Marge an jedem
   getesteten Punkt). Ab 805px identisch zum festen 26px oben - keine
   Ueberschneidung mit dem Ticketbutton beteiligt (weiterhin strukturell
   unabhaengig). Gleiche Handy-Querformat-Ausnahme wie oben
   (De-Morgan-Muster). */
@media (min-width: 768px) and (max-width: 805px) and (orientation: portrait),
	(min-width: 768px) and (max-width: 805px) and (min-height: 500px) {
	.page-testshows .ticket-card-date,
	.page-testshows .ticket-card-time {
		font-size: clamp(23px, -39.27px + 8.1081vw, 26px);
	}
}

/*
 * Monats-Navigation (nur Testseite /testshows/, siehe
 * assets/js/testshows.js) - komplett neue Komponente, existiert nirgends
 * sonst im Theme, daher direkt unter .page-testshows statt dupliziert.
 */
.page-testshows .month-nav {
	/* Rueckt direkt an die Filterzeile heran und wirkt mit ihr als ein
	   zusammenhaengender Block: gleicher dunkler Farbton (Dunkel-Petrol
	   #2E3D44), aber sichtbar heller abgestuft (~25% heller gemischt mit
	   Weiss), damit sich beide Bereiche allein durch den Farbunterschied
	   als "Kopfzeile (Filter) + Unterzeile (Monat)" lesen - bewusst OHNE
	   Trennlinie/Rahmen. Kein eigener Custom-Property-Token in :root
	   angelegt, da dies eine reine Testshows-Experimentalfarbe ist. */
	--month-nav-bg: #626d73;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: var(--list-width);
	/* Oben kein Abstand mehr (statt -20px) - schliesst direkt an
	   .show-filter an (dessen margin-bottom jetzt ebenfalls 0 ist).
	   Unten unveraendert bei 40px Abstand zur Ticketliste. */
	margin: 0 auto 40px;
	background: var(--month-nav-bg);
	padding: 15px 20px;
	/* Nur unten abgerundet - oben schliesst die Filterzeile direkt an. */
	border-radius: 0 0 4px 4px;
}

.page-testshows .month-nav-prev,
.page-testshows .month-nav-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-dark);
	color: var(--color-bg);
	border: none;
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.page-testshows .month-nav-prev:hover,
.page-testshows .month-nav-next:hover {
	opacity: 0.8;
}

.page-testshows .month-nav-prev:disabled,
.page-testshows .month-nav-next:disabled {
	visibility: hidden;
}

.page-testshows .month-nav-label {
	min-width: 220px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	/* War bisher var(--color-dark) (dunkler Text), passend zum vorherigen
	   HELLEN Seitenhintergrund hinter .month-nav. Jetzt wo .month-nav
	   selbst einen dunklen Hintergrund hat, muss der Text hell sein, um
	   lesbar zu bleiben - matcht damit auch .show-filter-item direkt
	   darueber, das aus demselben Grund bereits var(--color-bg) nutzt. */
	color: var(--color-bg);
}

/* ==========================================================================
   Comedy Shows (echte Seite, /comedy-shows/) - vollstaendig eigenstaendige
   Kopie des auf /testtickets/ erarbeiteten und bestaetigten Stands
   ==========================================================================
   Alle Filterleisten- und Karten-Regeln 1:1 uebernommen von /testtickets/ und
   unter .page-comedy-shows gescoped (hoehere Spezifitaet als die ungescopten
   Basis-Regeln weiter oben, die weiterhin von /open-air-2/, /solo-shows/ und
   /dating-shows/ genutzt werden). Kuenftige Experimente bleiben auf
   /testtickets/ - Aenderungen dort wirken sich NICHT auf diese Regeln aus,
   und umgekehrt bleiben Aenderungen hier ohne Wirkung auf /testtickets/.
   ========================================================================== */

.page-comedy-shows .show-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	height: var(--filter-height);
	background: var(--color-dark);
	max-width: var(--list-width);
	/* Unten kein Abstand mehr (statt var(--filter-gap) auf beiden Seiten) -
	   die Monatszeile direkt darunter (.month-nav) schliesst jetzt
	   nahtlos an, siehe dortige Regel (identischer Ansatz wie bereits auf
	   /testshows/ umgesetzt). Oben unveraendert bei var(--filter-gap)
	   (Abstand zum Werbebanner darueber). */
	margin: var(--filter-gap) auto 0;
	padding: 0 20px;
	/* Nur oben abgerundet - unten schliesst die Monatszeile direkt an,
	   zusammen ergibt das einen durchgehend abgerundeten Block. */
	border-radius: 4px 4px 0 0;
}

.page-comedy-shows .show-filter-item {
	position: relative;
	padding: 6px 6px 6px 30px;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.page-comedy-shows .show-filter-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-bg);
}

.page-comedy-shows .show-filter-item[aria-pressed="true"]::after {
	content: "x";
	position: absolute;
	left: -2px;
	top: 45%;
	transform: translateY(-50%);
	color: var(--color-accent);
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
}

.page-comedy-shows .ad-banner {
	/* Feste aspect-ratio statt fixer Hoehe - dadurch bleibt das Verhaeltnis
	   1130:250 bei JEDER Breite oberhalb 768px exakt gleich (vorher: feste
	   Hoehe 250px + variable Breite zwischen 768-1130px liess das Verhaeltnis
	   je nach Fensterbreite driften, dadurch wirkte das Bild unterschiedlich
	   zugeschnitten).
	   WICHTIG fuer Wartung: 1130px unten ist die vom Nutzer angekuendigte
	   native Breite der ERSETZTEN banner-comedyshow.png (Ziel-Seitenverhaeltnis
	   1130:250, exakt passend). Die Datei konnte zum Zeitpunkt dieser Aenderung
	   auf diesem Dateisystem NICHT verifiziert werden (sips zeigte weiterhin
	   die alte Version bei 2172x724px/3:1) - falls die tatsaechliche Datei
	   spaeter doch eine andere native Breite hat, hier den echten, per
	   `sips -g pixelWidth banner-comedyshow.png` ermittelten Wert eintragen,
	   sonst kann es bei sehr breiten Fenstern zu Unschaerfe (Hochskalieren
	   ueber die Originalaufloesung) oder wieder sichtbaren Raendern kommen. */
	max-width: min(var(--list-width), 1130px);
	aspect-ratio: 1130 / 250;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	/* Setzt die Platzhalter-Optik der unscoped Basisregel (gestrichelter
	   Rahmen + gestreifter Hintergrund) explizit zurueck - Weglassen der
	   Eigenschaften allein wuerde sie NICHT deaktivieren, da die weniger
	   spezifische .ad-banner-Basisregel sonst weiterhin durchschlaegt. */
	border: none;
	background: none;
}

.page-comedy-shows .ad-banner-link {
	display: block;
	width: 100%;
	height: 100%;
}

.page-comedy-shows .ad-banner-link img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain statt cover - Bild wird als Ganzes proportional skaliert statt
	   beschnitten. Bei exakt passendem nativen Seitenverhaeltnis (1130:250)
	   hat das denselben sichtbaren Effekt wie cover (kein Beschnitt UND keine
	   Raender); faellt aber automatisch wieder auf sichtbare Raender statt
	   Beschnitt zurueck, sollte die Datei doch von 1130:250 abweichen. */
	object-fit: contain;
	object-position: center center;
}

.page-comedy-shows .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-comedy-shows .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-comedy-shows .ticket-card.is-hidden {
	display: none;
}

.page-comedy-shows .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-comedy-shows .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-comedy-shows .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-comedy-shows .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-comedy-shows .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-comedy-shows .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-comedy-shows .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-comedy-shows .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-comedy-shows .ticket-card-date,
.page-comedy-shows .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-comedy-shows .ticket-card-date img,
.page-comedy-shows .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-comedy-shows .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-comedy-shows .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-comedy-shows .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-comedy-shows .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-comedy-shows .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-comedy-shows .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-comedy-shows .ticket-card-location strong,
.page-comedy-shows .ticket-card-location span {
	padding-right: 15px;
}

.page-comedy-shows .ticket-card-location strong {
	font-weight: 700;
}

/* --- "Ausverkauft": schraeges Eckbanner ueber dem Bild (NICHT mehr ueber
   die gesamte Karte) + separate, nur auf das Bild begrenzte Abdunkelung.
   Titel, Datum, Ticketbutton und Kartenhintergrund bleiben dadurch
   unveraendert normal/farbig - nur Bild + Banner zeigen den Status an.
   .ticket-card-image ist bereits position:relative + overflow:hidden
   (Basisregel), das Banner wird an der linken oberen Ecke ueberstehend
   platziert und dort sauber abgeschnitten. */
.page-comedy-shows .ticket-card-image.is-sold-out::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 4;
	pointer-events: none;
}

.page-comedy-shows .ticket-card-soldout-ribbon {
	position: absolute;
	top: 20px;
	left: -46px;
	width: 170px;
	padding: 6px 0;
	background: var(--color-accent);
	color: var(--color-bg);
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

@media (max-width: 767px) {
	.page-comedy-shows .ad-banner {
		/* Randlos: volle Viewport-Breite statt der Content-Raender/
		   Native-Aufloesungs-Obergrenze aus dem Desktop-Block - unterhalb
		   767px ist der Viewport ohnehin immer weit kleiner als die native
		   Bildbreite (2172px), die Grenze wuerde hier nie greifen. */
		max-width: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1130 / 250;
		margin: 0;
	}

	.page-comedy-shows .show-filter {
		height: auto;
		padding: 15px 20px;
	}

	/*
	 * Kompakte Zeilenkarte (per Web-Inspector von karlicomedy.de gemessen:
	 * min-height 94px, row-gap 30px zwischen den Karten, Karte selbst
	 * randlos ueber die volle Breite). Bild links (37%, ueber die volle
	 * Kartenhoehe quergeschnitten), rechts Datum/Uhrzeit + Titel; die
	 * Location-Leiste liegt wie am Desktop ueberlagert am unteren Rand
	 * statt eine eigene Zeile zu beanspruchen. Nur unter .page-comedy-shows
	 * gescoped - die anderen echten Show-Listen-Seiten (open-air-2,
	 * solo-shows, dating-shows) nutzen weiterhin die ungescopte Basisregel
	 * und bleiben unangetastet.
	 */
}

/* ==========================================================================
   Comedy Shows: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-comedy-shows .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-comedy-shows .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--cs-card-height: 136px;
		min-height: var(--cs-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --cs-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-comedy-shows .ticket-card-image {
		flex: 0 0 auto;
		width: var(--cs-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-comedy-shows .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-comedy-shows .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-comedy-shows .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-comedy-shows .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-comedy-shows .ticket-card-action {
		display: none;
	}

	.page-comedy-shows .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
		/* Datum und Uhrzeit sollen niemals als zwei Zeilen untereinander
		   umbrechen - stattdessen greift bei zu wenig Platz die Schriftgroessen-
		   Verkleinerung weiter unten (clamp()), bevor es zu einem Umbruch
		   kommen wuerde. */
		flex-wrap: nowrap;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +2 Stufen gegenueber vorher
	   (13px, je Stufe +2px -> 17px). clamp() haelt die Zeile bei sehr
	   schmalen Displays einzeilig: faellt der verfuegbare Platz unter eine
	   physikalische Grenze, wird die Schrift automatisch verkleinert (analog
	   zur bereits auf Desktop umgesetzten Loesung). Werte empirisch per
	   Playwright kalibriert (Bisektion des tatsaechlich noch passenden
	   Schriftgrads bei 320px/430px Breite, mit Sicherheitsabstand): bei 430px
	   passen 17px bereits exakt, bei 320px bleiben mit 9.5px ca. 8px Puffer
	   zum Kartenrand. Unterhalb von 320px wird nicht weiter reduziert, weil
	   es dort ohnehin keine relevanten Geraete mehr gibt. */
	.page-comedy-shows .ticket-card-date,
	.page-comedy-shows .ticket-card-time {
		font-size: clamp(9.5px, -12.3182px + 6.8182vw, 17px);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-comedy-shows .ticket-card-date img,
	.page-comedy-shows .ticket-card-time img {
		display: none;
	}

	.page-comedy-shows .ticket-card-title {
		/* +3 Stufen gegenueber vorher (19px, je Stufe +2px -> 25px). Feste
		   px-Zeilenhoehe (statt relativ) fuer eine deterministische
		   2-Zeilen-Maximalhoehe (2 x 28px = 56px), die zusammen mit den
		   uebrigen Zonen sicher innerhalb der fixen 136px-Kartenhoehe bleibt.
		   -webkit-line-clamp begrenzt auf maximal 2 Zeilen inkl. Ellipsis am
		   Ende der 2. Zeile, sobald der Titel laenger ist - eine 3. Zeile kann
		   dadurch nie entstehen. */
		font-size: 17px;
		line-height: 28px;
		padding-left: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-comedy-shows .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --cs-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--cs-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-comedy-shows .ticket-card-location span,
	.page-comedy-shows .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-comedy-shows .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */
@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-comedy-shows im Desktop-Bereich)
	   - betrifft weder /testshows/ noch die echten Seiten (die weiterhin
	   die :root-Werte nutzen) noch die mobile Kompakt-Ansicht dieser Seite
	   (die ueber die komplett eigene --cs-card-height-Variable laeuft und
	   diese drei Variablen gar nicht konsumiert). Schriftgroessen und
	   Icon-Groessen sind bewusst NICHT an diese Variablen gekoppelt und
	   bleiben dadurch automatisch unveraendert. */
	.page-comedy-shows {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-comedy-shows .ticket-card-image img {
		object-fit: cover;
	}

	.page-comedy-shows .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-comedy-shows .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-comedy-shows .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-comedy-shows .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-comedy-shows .ticket-card-date,
	.page-comedy-shows .ticket-card-time {
		/* -2 Schriftgroessen-Stufen (Projekt-Konvention: 1 Stufe = 2px),
		   NUR auf dieser echten Seite (Desktop) - Testtickets bleibt bewusst
		   bei 26px: 26px -> 22px. line-height weiterhin EXPLIZIT auf den
		   unveraenderten Wert 38.4px fixiert (nicht mitschrumpfen lassen),
		   damit die Hoehe der oberen Zone (.ticket-card-meta) exakt
		   unveraendert bleibt und sich der jetzt kleinere Text weiterhin
		   automatisch (per Zeilenbox-Zentrierung) darin zentriert.
		   Titel-Position bleibt dadurch garantiert unveraendert. */
		font-size: 22px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-comedy-shows .ticket-card-date img,
	.page-comedy-shows .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   verkleinert (Faktor 22/26 = 0.8462): Kalender 26px -> 22px, Uhr
		   24px -> 20px (24 * 22/26 = 20.31, gerundet). */
		width: 22px;
		height: 22px;
	}

	.page-comedy-shows .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 22/24, vorher 24/26). */
		width: 20px;
		height: 20px;
	}

	.page-comedy-shows .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-comedy-shows .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-comedy-shows .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/comedy-shows-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-comedy-shows .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-comedy-shows .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-comedy-shows .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-comedy-shows .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-comedy-shows .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-comedy-shows .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-comedy-shows .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-comedy-shows .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-comedy-shows .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-comedy-shows .ticket-card-location strong,
	.page-comedy-shows .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}

/* Ehemals eine physikalische Verkleinerung fuer 768-805px noetig (bei der
   vorherigen 26px-Basisschrift lief der Text unterhalb 805px sonst in den
   Button hinein). Seit der Verkleinerung auf 22px (-2 Schriftgroessen-
   Stufen, NUR auf dieser echten Seite) entfaellt dieser schmale Sonderfall
   komplett: empirisch per Bisektion gemessen passt bei 768px (schmalste
   Desktop-Breite) noch bis 25.04px verlustfrei - 22px hat dort also bereits
   von sich aus reichlich Marge, ganz ohne clamp(). Deshalb hier ersatzlos
   entfernt statt neu kalibriert (die alte, fuer 26px berechnete Regel wuerde
   sonst weiterhin 23-26px erzwingen und die neue 22px-Vorgabe in genau
   diesem Breitenbereich wieder aufheben). */

/*
 * Monats-Navigation (echte Seite /comedy-shows/, siehe
 * assets/js/comedy-shows.js) - existiert nirgends sonst im Theme fuer echte
 * Seiten (nur bei den Testseiten /testtickets/ und /testshows/), daher
 * direkt unter .page-comedy-shows statt dupliziert.
 */
.page-comedy-shows .month-nav {
	/* Rueckt direkt an die Filterzeile heran und wirkt mit ihr als ein
	   zusammenhaengender Block: gleicher dunkler Farbton (Dunkel-Petrol
	   #2E3D44), aber sichtbar heller abgestuft (~25% heller gemischt mit
	   Weiss), damit sich beide Bereiche allein durch den Farbunterschied
	   als "Kopfzeile (Filter) + Unterzeile (Monat)" lesen - bewusst OHNE
	   Trennlinie/Rahmen. Identischer Ansatz und identischer Farbwert wie
	   bereits auf /testtickets/ und /testshows/ umgesetzt. Kein eigener
	   Custom-Property-Token in :root angelegt, da dies eine reine
	   Experimentalfarbe fuer diesen Filter/Monatsnav-Block ist. */
	--month-nav-bg: #626d73;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: var(--list-width);
	/* Oben kein Abstand mehr (statt -20px) - schliesst direkt an
	   .show-filter an (dessen margin-bottom jetzt ebenfalls 0 ist).
	   Unten unveraendert bei 40px Abstand zur Ticketliste. */
	margin: 0 auto 40px;
	background: var(--month-nav-bg);
	padding: 15px 20px;
	/* Nur unten abgerundet - oben schliesst die Filterzeile direkt an. */
	border-radius: 0 0 4px 4px;
}

.page-comedy-shows .month-nav-prev,
.page-comedy-shows .month-nav-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-dark);
	color: var(--color-bg);
	border: none;
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.page-comedy-shows .month-nav-prev:hover,
.page-comedy-shows .month-nav-next:hover {
	opacity: 0.8;
}

.page-comedy-shows .month-nav-prev:disabled,
.page-comedy-shows .month-nav-next:disabled {
	visibility: hidden;
}

.page-comedy-shows .month-nav-label {
	min-width: 220px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	/* War bisher var(--color-dark) (dunkler Text), passend zum vorherigen
	   HELLEN Seitenhintergrund hinter .month-nav. Jetzt wo .month-nav
	   selbst einen dunklen Hintergrund hat, muss der Text hell sein, um
	   lesbar zu bleiben - matcht damit auch .show-filter-item direkt
	   darueber, das aus demselben Grund bereits var(--color-bg) nutzt
	   (identischer Ansatz wie bereits auf /testshows/ umgesetzt). */
	color: var(--color-bg);
}

.page-comedy-shows .month-nav--bottom {
	/* Zweite, untere Instanz direkt unter der Ticketliste (siehe
	   page-comedy-shows.php) - anders als die obere Instanz schliesst sie
	   NICHT an .show-filter an, daher eigener Abstand nach oben/unten statt
	   0 und rundum abgerundete statt nur unten abgerundeter Ecken.
	   Abstand nach oben zum letzten Ticket kommt bereits vollstaendig aus
	   .ticket-list (padding-bottom: 80px) - margin-top hier bewusst 0, statt
	   zusaetzlich draufzuaddieren. margin-bottom auf denselben 80px-Wert
	   gesetzt, damit der Abstand nach oben (zum letzten Ticket) und nach
	   unten (zum Footer-Kasten) gleich gross ausfaellt - der Umschalter
	   sitzt dadurch mittig zwischen beiden. */
	margin: 0 auto 80px;
	border-radius: 4px;
}


/* ==========================================================================
   Open Air (echte Seite, /open-air-2/) - NUR Ticket-Karten-Design/-Verhalten
   uebernommen von /comedy-shows/ (das seinerseits von /testtickets/ stammt)
   ==========================================================================
   Bewusst OHNE .show-filter-/.month-nav-Regeln (Open Air behaelt sein
   bisheriges Filtermenue-Erscheinungsbild unveraendert) und OHNE
   .ad-banner-Regeln (kein Werbebanner auf dieser Seite). Alle Ticket-Karten-
   Regeln 1:1 uebernommen von /comedy-shows/ und unter .page-open-air gescoped
   (hoehere Spezifitaet als die ungescopten Basis-Regeln weiter oben, die
   weiterhin von /solo-shows/ genutzt werden).
   ========================================================================== */

.page-open-air .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-open-air .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-open-air .ticket-card.is-hidden {
	display: none;
}

.page-open-air .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-open-air .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-open-air .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-open-air .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-open-air .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-open-air .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-open-air .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-open-air .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-open-air .ticket-card-date,
.page-open-air .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-open-air .ticket-card-date img,
.page-open-air .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-open-air .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-open-air .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-open-air .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-open-air .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-open-air .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-open-air .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-open-air .ticket-card-location strong,
.page-open-air .ticket-card-location span {
	padding-right: 15px;
}

.page-open-air .ticket-card-location strong {
	font-weight: 700;
}

/* --- "Ausverkauft": schraeges Eckbanner ueber dem Bild (NICHT mehr ueber
   die gesamte Karte) + separate, nur auf das Bild begrenzte Abdunkelung.
   Titel, Datum, Ticketbutton und Kartenhintergrund bleiben dadurch
   unveraendert normal/farbig - nur Bild + Banner zeigen den Status an.
   .ticket-card-image ist bereits position:relative + overflow:hidden
   (Basisregel), das Banner wird an der linken oberen Ecke ueberstehend
   platziert und dort sauber abgeschnitten. */
.page-open-air .ticket-card-image.is-sold-out::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 4;
	pointer-events: none;
}

.page-open-air .ticket-card-soldout-ribbon {
	position: absolute;
	top: 20px;
	left: -46px;
	width: 170px;
	padding: 6px 0;
	background: var(--color-accent);
	color: var(--color-bg);
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

/* ==========================================================================
   Open Air: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-open-air .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-open-air .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--oa-card-height: 136px;
		min-height: var(--oa-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --oa-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-open-air .ticket-card-image {
		flex: 0 0 auto;
		width: var(--oa-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-open-air .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-open-air .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-open-air .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-open-air .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-open-air .ticket-card-action {
		display: none;
	}

	.page-open-air .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
		/* Datum und Uhrzeit sollen niemals als zwei Zeilen untereinander
		   umbrechen - stattdessen greift bei zu wenig Platz die Schriftgroessen-
		   Verkleinerung weiter unten (clamp()), bevor es zu einem Umbruch
		   kommen wuerde. */
		flex-wrap: nowrap;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +2 Stufen gegenueber vorher
	   (13px, je Stufe +2px -> 17px). clamp() haelt die Zeile bei sehr
	   schmalen Displays einzeilig: faellt der verfuegbare Platz unter eine
	   physikalische Grenze, wird die Schrift automatisch verkleinert (analog
	   zur bereits auf Desktop umgesetzten Loesung). Werte empirisch per
	   Playwright kalibriert (Bisektion des tatsaechlich noch passenden
	   Schriftgrads bei 320px/430px Breite, mit Sicherheitsabstand): bei 430px
	   passen 17px bereits exakt, bei 320px bleiben mit 9.5px ca. 8px Puffer
	   zum Kartenrand. Unterhalb von 320px wird nicht weiter reduziert, weil
	   es dort ohnehin keine relevanten Geraete mehr gibt. */
	.page-open-air .ticket-card-date,
	.page-open-air .ticket-card-time {
		font-size: clamp(9.5px, -12.3182px + 6.8182vw, 17px);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-open-air .ticket-card-date img,
	.page-open-air .ticket-card-time img {
		display: none;
	}

	.page-open-air .ticket-card-title {
		/* +3 Stufen gegenueber vorher (19px, je Stufe +2px -> 25px). Feste
		   px-Zeilenhoehe (statt relativ) fuer eine deterministische
		   2-Zeilen-Maximalhoehe (2 x 28px = 56px), die zusammen mit den
		   uebrigen Zonen sicher innerhalb der fixen 136px-Kartenhoehe bleibt.
		   -webkit-line-clamp begrenzt auf maximal 2 Zeilen inkl. Ellipsis am
		   Ende der 2. Zeile, sobald der Titel laenger ist - eine 3. Zeile kann
		   dadurch nie entstehen. */
		font-size: 17px;
		line-height: 28px;
		padding-left: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-open-air .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --oa-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--oa-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-open-air .ticket-card-location span,
	.page-open-air .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-open-air .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */

@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-open-air im Desktop-Bereich)
	   - betrifft weder /testtickets/, /testshows/, /comedy-shows/ noch die
	   uebrigen echten Seiten (solo-shows, dating-shows, die weiterhin die
	   :root-Werte nutzen) noch die mobile Kompakt-Ansicht dieser Seite (die
	   ueber die komplett eigene --oa-card-height-Variable laeuft und diese
	   drei Variablen gar nicht konsumiert). Schriftgroessen und
	   Icon-Groessen sind bewusst NICHT an diese Variablen gekoppelt und
	   bleiben dadurch automatisch unveraendert. */
	.page-open-air {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-open-air .ticket-card-image img {
		object-fit: cover;
	}

	.page-open-air .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-open-air .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-open-air .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-open-air .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-open-air .ticket-card-date,
	.page-open-air .ticket-card-time {
		/* -2 Schriftgroessen-Stufen (Projekt-Konvention: 1 Stufe = 2px),
		   NUR auf dieser echten Seite (Desktop) - Testtickets bleibt bewusst
		   bei 26px: 26px -> 22px. line-height weiterhin EXPLIZIT auf den
		   unveraenderten Wert 38.4px fixiert (nicht mitschrumpfen lassen),
		   damit die Hoehe der oberen Zone (.ticket-card-meta) exakt
		   unveraendert bleibt und sich der jetzt kleinere Text weiterhin
		   automatisch (per Zeilenbox-Zentrierung) darin zentriert.
		   Titel-Position bleibt dadurch garantiert unveraendert. */
		font-size: 22px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-open-air .ticket-card-date img,
	.page-open-air .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   verkleinert (Faktor 22/26 = 0.8462): Kalender 26px -> 22px, Uhr
		   24px -> 20px (24 * 22/26 = 20.31, gerundet). */
		width: 22px;
		height: 22px;
	}

	.page-open-air .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 22/24, vorher 24/26). */
		width: 20px;
		height: 20px;
	}

	.page-open-air .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-open-air .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-open-air .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/open-air-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-open-air .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-open-air .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-open-air .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-open-air .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-open-air .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-open-air .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-open-air .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-open-air .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-open-air .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-open-air .ticket-card-location strong,
	.page-open-air .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}


/* ==========================================================================
   Dating Shows (echte Seite, /dating-shows/) - NUR Ticket-Karten-Design/-
   Verhalten uebernommen von /comedy-shows/ und /open-air-2/
   ==========================================================================
   Bewusst OHNE .show-filter-/.month-nav-Regeln (Dating Shows behaelt sein
   bisheriges Filtermenue-Erscheinungsbild unveraendert) und OHNE
   .ad-banner-Regeln (kein Werbebanner auf dieser Seite). Alle Ticket-Karten-
   Regeln 1:1 uebernommen von /open-air-2/ und unter .page-dating-shows
   gescoped (hoehere Spezifitaet als die ungescopten Basis-Regeln weiter
   oben).
   ========================================================================== */

.page-dating-shows .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-dating-shows .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-dating-shows .ticket-card.is-hidden {
	display: none;
}

.page-dating-shows .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-dating-shows .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-dating-shows .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-dating-shows .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-dating-shows .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-dating-shows .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-dating-shows .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-dating-shows .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-dating-shows .ticket-card-date,
.page-dating-shows .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-dating-shows .ticket-card-date img,
.page-dating-shows .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-dating-shows .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-dating-shows .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-dating-shows .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-dating-shows .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-dating-shows .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-dating-shows .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-dating-shows .ticket-card-location strong,
.page-dating-shows .ticket-card-location span {
	padding-right: 15px;
}

.page-dating-shows .ticket-card-location strong {
	font-weight: 700;
}

/* --- "Ausverkauft": schraeges Eckbanner ueber dem Bild (NICHT mehr ueber
   die gesamte Karte) + separate, nur auf das Bild begrenzte Abdunkelung.
   Titel, Datum, Ticketbutton und Kartenhintergrund bleiben dadurch
   unveraendert normal/farbig - nur Bild + Banner zeigen den Status an.
   .ticket-card-image ist bereits position:relative + overflow:hidden
   (Basisregel), das Banner wird an der linken oberen Ecke ueberstehend
   platziert und dort sauber abgeschnitten. */
.page-dating-shows .ticket-card-image.is-sold-out::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 4;
	pointer-events: none;
}

.page-dating-shows .ticket-card-soldout-ribbon {
	position: absolute;
	top: 20px;
	left: -46px;
	width: 170px;
	padding: 6px 0;
	background: var(--color-accent);
	color: var(--color-bg);
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

/* ==========================================================================
   Dating Shows: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-dating-shows .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-dating-shows .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--ds-card-height: 136px;
		min-height: var(--ds-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --ds-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-dating-shows .ticket-card-image {
		flex: 0 0 auto;
		width: var(--ds-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-dating-shows .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-dating-shows .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-dating-shows .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-dating-shows .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-dating-shows .ticket-card-action {
		display: none;
	}

	.page-dating-shows .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
		/* Datum und Uhrzeit sollen niemals als zwei Zeilen untereinander
		   umbrechen - stattdessen greift bei zu wenig Platz die Schriftgroessen-
		   Verkleinerung weiter unten (clamp()), bevor es zu einem Umbruch
		   kommen wuerde. */
		flex-wrap: nowrap;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +2 Stufen gegenueber vorher
	   (13px, je Stufe +2px -> 17px). clamp() haelt die Zeile bei sehr
	   schmalen Displays einzeilig: faellt der verfuegbare Platz unter eine
	   physikalische Grenze, wird die Schrift automatisch verkleinert (analog
	   zur bereits auf Desktop umgesetzten Loesung). Werte empirisch per
	   Playwright kalibriert (Bisektion des tatsaechlich noch passenden
	   Schriftgrads bei 320px/430px Breite, mit Sicherheitsabstand): bei 430px
	   passen 17px bereits exakt, bei 320px bleiben mit 9.5px ca. 8px Puffer
	   zum Kartenrand. Unterhalb von 320px wird nicht weiter reduziert, weil
	   es dort ohnehin keine relevanten Geraete mehr gibt. */
	.page-dating-shows .ticket-card-date,
	.page-dating-shows .ticket-card-time {
		font-size: clamp(9.5px, -12.3182px + 6.8182vw, 17px);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-dating-shows .ticket-card-date img,
	.page-dating-shows .ticket-card-time img {
		display: none;
	}

	.page-dating-shows .ticket-card-title {
		/* +3 Stufen gegenueber vorher (19px, je Stufe +2px -> 25px). Feste
		   px-Zeilenhoehe (statt relativ) fuer eine deterministische
		   2-Zeilen-Maximalhoehe (2 x 28px = 56px), die zusammen mit den
		   uebrigen Zonen sicher innerhalb der fixen 136px-Kartenhoehe bleibt.
		   -webkit-line-clamp begrenzt auf maximal 2 Zeilen inkl. Ellipsis am
		   Ende der 2. Zeile, sobald der Titel laenger ist - eine 3. Zeile kann
		   dadurch nie entstehen. */
		font-size: 17px;
		line-height: 28px;
		padding-left: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-dating-shows .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --ds-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--ds-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-dating-shows .ticket-card-location span,
	.page-dating-shows .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-dating-shows .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */

@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-dating-shows im Desktop-Bereich)
	   - betrifft weder /testtickets/, /testshows/, /comedy-shows/, /open-air-2/
	   noch die uebrige echte Seite (solo-shows, die weiterhin die :root-Werte
	   nutzt) noch die mobile Kompakt-Ansicht dieser Seite (die ueber die
	   komplett eigene --ds-card-height-Variable laeuft und diese drei
	   Variablen gar nicht konsumiert). Schriftgroessen und Icon-Groessen
	   sind bewusst NICHT an diese Variablen gekoppelt und bleiben dadurch
	   automatisch unveraendert. */
	.page-dating-shows {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-dating-shows .ticket-card-image img {
		object-fit: cover;
	}

	.page-dating-shows .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-dating-shows .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-dating-shows .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-dating-shows .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-dating-shows .ticket-card-date,
	.page-dating-shows .ticket-card-time {
		/* -2 Schriftgroessen-Stufen (Projekt-Konvention: 1 Stufe = 2px),
		   NUR auf dieser echten Seite (Desktop) - Testtickets bleibt bewusst
		   bei 26px: 26px -> 22px. line-height weiterhin EXPLIZIT auf den
		   unveraenderten Wert 38.4px fixiert (nicht mitschrumpfen lassen),
		   damit die Hoehe der oberen Zone (.ticket-card-meta) exakt
		   unveraendert bleibt und sich der jetzt kleinere Text weiterhin
		   automatisch (per Zeilenbox-Zentrierung) darin zentriert.
		   Titel-Position bleibt dadurch garantiert unveraendert. */
		font-size: 22px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-dating-shows .ticket-card-date img,
	.page-dating-shows .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   verkleinert (Faktor 22/26 = 0.8462): Kalender 26px -> 22px, Uhr
		   24px -> 20px (24 * 22/26 = 20.31, gerundet). */
		width: 22px;
		height: 22px;
	}

	.page-dating-shows .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 22/24, vorher 24/26). */
		width: 20px;
		height: 20px;
	}

	.page-dating-shows .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-dating-shows .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-dating-shows .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/dating-shows-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-dating-shows .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-dating-shows .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-dating-shows .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-dating-shows .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-dating-shows .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-dating-shows .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-dating-shows .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-dating-shows .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-dating-shows .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-dating-shows .ticket-card-location strong,
	.page-dating-shows .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}


/* ==========================================================================
   Solo (echte Seite, /solo-shows/) - NUR Ticket-Karten-Design/-Verhalten
   uebernommen von /comedy-shows/, /open-air-2/ und /dating-shows/
   ==========================================================================
   Bewusst OHNE .show-filter-/.month-nav-Regeln (Solo behaelt sein bisheriges
   Filtermenue-Erscheinungsbild unveraendert) und OHNE .ad-banner-Regeln (kein
   Werbebanner auf dieser Seite). Alle Ticket-Karten-Regeln 1:1 uebernommen von
   /dating-shows/ und unter .page-solo-shows gescoped (hoehere Spezifitaet als
   die ungescopten Basis-Regeln weiter oben).
   ========================================================================== */

.page-solo-shows .ticket-list {
	max-width: var(--list-width);
	margin: 0 auto;
	padding: 0 20px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-solo-shows .ticket-card {
	position: relative;
	display: flex;
	height: var(--ticket-card-height);
	min-height: 0;
	background: var(--color-dark);
	border-radius: 0;
	overflow: hidden;
}

.page-solo-shows .ticket-card.is-hidden {
	display: none;
}

.page-solo-shows .ticket-card-image {
	flex: 0 0 var(--ticket-card-image-width);
	width: var(--ticket-card-image-width);
	height: var(--ticket-card-height);
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
}

.page-solo-shows .ticket-card-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

.page-solo-shows .ticket-card-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(246, 238, 227, 0.08),
		rgba(246, 238, 227, 0.08) 10px,
		rgba(246, 238, 227, 0.02) 10px,
		rgba(246, 238, 227, 0.02) 20px
	);
}

.page-solo-shows .ticket-card-image-icon {
	width: 56px;
	height: 56px;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/*
 * Struktur: .ticket-card-content ist der Flex:1-Nachbar von .ticket-card-image
 * (uebernimmt diese Rolle von .ticket-card-main) und enthaelt zwei eigene,
 * vollstaendig unabhaengige Zeilen: .ticket-card-meta (Datum/Uhrzeit, ueber
 * die volle Breite neben dem Bild) und .ticket-card-lower (Titel/Infotext +
 * Ticketbutton). Der Button teilt sich dadurch nur noch mit Titel/Infotext
 * einen Flex-Container - mit der Datum/Uhrzeit-Zeile gar keinen mehr.
 */
.page-solo-shows .ticket-card-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	padding-bottom: var(--ticket-card-location-height);
}

.page-solo-shows .ticket-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.page-solo-shows .ticket-card-lower {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	gap: 24px;
}

.page-solo-shows .ticket-card-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
}

.page-solo-shows .ticket-card-date,
.page-solo-shows .ticket-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-bg);
}

.page-solo-shows .ticket-card-date img,
.page-solo-shows .ticket-card-time img {
	filter: brightness(0) invert(1);
}

.page-solo-shows .ticket-card-title {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 40px;
	padding-left: 11px;
	margin: 0;
}

.page-solo-shows .ticket-card-info {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	padding-left: 12px;
	color: var(--color-bg);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.page-solo-shows .ticket-card-action {
	/* padding-bottom fuer die Location-Leiste liegt jetzt einmalig auf
	   .ticket-card-content (deckt Meta- und Lower-Zeile zusammen ab), nicht
	   mehr zusaetzlich hier. */
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.page-solo-shows .ticket-card-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-yellow);
	color: var(--color-dark);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: 10px;
}

.page-solo-shows .ticket-card-button svg {
	width: 20px;
	height: 20px;
}

.page-solo-shows .ticket-card-location {
	position: absolute;
	left: var(--ticket-card-image-width);
	right: 0;
	bottom: 0;
	min-height: var(--ticket-card-location-height);
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	align-items: center;
	background: var(--color-orange);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 20px;
	padding: 10px 0 10px 20px;
	z-index: 2;
}

.page-solo-shows .ticket-card-location strong,
.page-solo-shows .ticket-card-location span {
	padding-right: 15px;
}

.page-solo-shows .ticket-card-location strong {
	font-weight: 700;
}

/* --- "Ausverkauft": schraeges Eckbanner ueber dem Bild (NICHT mehr ueber
   die gesamte Karte) + separate, nur auf das Bild begrenzte Abdunkelung.
   Titel, Datum, Ticketbutton und Kartenhintergrund bleiben dadurch
   unveraendert normal/farbig - nur Bild + Banner zeigen den Status an.
   .ticket-card-image ist bereits position:relative + overflow:hidden
   (Basisregel), das Banner wird an der linken oberen Ecke ueberstehend
   platziert und dort sauber abgeschnitten. */
.page-solo-shows .ticket-card-image.is-sold-out::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 4;
	pointer-events: none;
}

.page-solo-shows .ticket-card-soldout-ribbon {
	position: absolute;
	top: 20px;
	left: -46px;
	width: 170px;
	padding: 6px 0;
	background: var(--color-accent);
	color: var(--color-bg);
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-45deg);
	transform-origin: center;
	z-index: 5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

/* ==========================================================================
   Solo: kompakte Ticket-Darstellung ab 767px, ZUSAETZLICH bei
   Handy-Querformat
   ==========================================================================
   Der Versuch, diesen Umbruchpunkt auf 1024px anzuheben (synchron zum
   Stapel-Breakpoint der zweispaltigen Bild-Text-Bloecke), wurde wieder
   zurueckgenommen - der bestaetigt funktionierende 767px-Stand ist wieder
   hergestellt. Die 1024px-Erweiterung wird bei Bedarf separat neu angegangen.
   Zweite, mit Komma verknuepfte Bedingung (OR-Verknuepfung in CSS Media
   Queries): (orientation: landscape) and (max-height: 499px) - greift
   zusaetzlich bei breiten, aber niedrigen Fenstern wie einem Handy im
   Querformat (z.B. iPhone 15 Pro quer ~852x393px, damit oberhalb von 767px
   Breite aber weiterhin klar unterhalb typischer Tablet-/Desktop-Hoehen in
   diesem Breitenbereich). Bewusst zusaetzlich zur Breitenbedingung statt
   diese zu ersetzen - Hochformat-Handys unterhalb 767px greifen weiterhin
   wie bisher ueber die reine Breitenbedingung.
   ========================================================================== */

@media (max-width: 767px), (orientation: landscape) and (max-height: 499px) {
	.page-solo-shows .ticket-list {
		/* Randlos ueber die volle Breite; row-gap -20% gegenueber vorher
		   (30px -> 24px). */
		padding-left: 0;
		padding-right: 0;
		gap: 24px;
	}

	.page-solo-shows .ticket-card {
		/* Einzige Quelle fuer die Kartenhoehe, auch von der Location-Leiste
		   weiter unten wiederverwendet (per var()) - da die Bildbreite jetzt
		   IMMER der Kartenhoehe entspricht (siehe .ticket-card-image),
		   bleiben beide Stellen dadurch automatisch synchron statt zwei
		   unabhaengige Zahlen zu pflegen. +20% gegenueber vorher (113px x
		   1.2 = 135.6px, gerundet 136px). */
		--ss-card-height: 136px;
		min-height: var(--ss-card-height);
		height: auto;
		flex-wrap: nowrap;
		cursor: pointer;
	}

	/*
	 * Bildgroesse komplett neu aufgebaut (alte 37%-Breitenlogik entfernt,
	 * nicht nur ueberlagert): Bild ist immer quadratisch, Groesse (Breite
	 * UND Hoehe) ergibt sich ausschliesslich aus der aktuellen Tickethoehe -
	 * kein separater Breiten-Prozentsatz mehr.
	 * Technische Anmerkung: aspect-ratio:1/1 + width:auto + height:auto/100%
	 * (wie urspruenglich vorgeschlagen) wurde getestet, liefert in der Praxis
	 * aber zuverlaessig 0x0 - der Browser kann die Breite nicht aus einer
	 * erst per Stretch/Prozent aufgeloesten Hoehe in einer height:auto-
	 * Elternzeile ableiten (aspect-ratio + Flex-Stretch-Interaktion ist genau
	 * dafuer nicht robust genug). Stattdessen width direkt aus derselben
	 * --ss-card-height-Variable wie die Kartenhoehe (siehe .ticket-card
	 * weiter oben) - 100% zuverlaessig, da kein Ableitungs-Umweg mehr noetig.
	 */
	.page-solo-shows .ticket-card-image {
		flex: 0 0 auto;
		width: var(--ss-card-height);
		height: auto;
		min-width: 0;
		min-height: 0;
	}

	.page-solo-shows .ticket-card-image img {
		/* position:absolute nimmt das Bild aus dem normalen Fluss - sonst
		   wuerde der auto-hohe Wrapper (.ticket-card-image) zirkulaer auf
		   die eigene, native Bildhoehe zurueckfallen statt sich stretchen zu
		   lassen (in diesem Theme bereits mehrfach aufgetretenes Problem). */
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		/* Bild ist jetzt quadratisch dem (ebenfalls quadratischen) Container
		   angeglichen - object-fit:cover beschneidet dadurch nur noch, falls
		   das hochgeladene Quellbild selbst nicht quadratisch ist, und zwar
		   mittig statt verzerrt. */
		object-fit: cover;
		object-position: center center;
	}

	.page-solo-shows .ticket-card-content {
		/* Nimmt automatisch den verbleibenden Platz ein (Ticketbreite minus
		   der jetzt dynamischen Bildbreite) statt eines festen Prozentsatzes. */
		flex: 1 1 auto;
		min-width: 0;
		/* Unten mehr Reserve, damit Text nicht unter die ueberlagerte
		   Location-Leiste rutscht. */
		padding: 6px 10px 22px;
		/* +50% gegenueber vorher (2px -> 3px). */
		gap: 3px;
	}

	/* .ticket-card-lower (Titel/Infotext + Button, siehe Desktop-Struktur)
	   wird mobil komplett aus dem Layout genommen (display:contents) - der
	   Button ist ohnehin ausgeblendet (siehe unten), der Titel soll direkt
	   wie zuvor im 3px-Gap-Fluss von .ticket-card-content erscheinen, ohne
	   eine eigene Box/Zeile dazwischenzuschieben. */
	.page-solo-shows .ticket-card-lower {
		display: contents;
	}

	/* .ticket-card-main setzt hier frueher ueberhaupt kein eigenes Padding
	   mehr (das liegt jetzt auf .ticket-card-content), dadurch griff bei
	   Handy-Querformat (z.B. 852x393, ausserhalb der eigenen Desktop-Bloecke
	   dieser Testseite) die UNSCOPED Regel der echten Seiten
	   (".ticket-card-main{padding:18px 24px;padding-bottom:44px}" ab
	   min-width:768px OHNE Querformat-Ausnahme) durch und blaehte die Karte
	   auf bis zu 150px auf (empirisch gefunden). Hier explizit auf 0
	   zurueckgesetzt, damit ausschliesslich .ticket-card-content (6px 10px
	   22px) wirkt, wie bei Hochformat auch. */
	.page-solo-shows .ticket-card-main {
		flex: 0 0 auto;
		padding: 0;
	}

	.page-solo-shows .ticket-card-action {
		display: none;
	}

	.page-solo-shows .ticket-card-meta {
		/* Abstand INNERHALB der Datum/Uhrzeit-Zeile (zwischen den beiden
		   Elementen nebeneinander) - nicht zu verwechseln mit dem
		   Zeilenabstand zwischen dieser Zeile und dem Titel (siehe
		   .ticket-card-main gap weiter unten, davon unberuehrt).
		   +30% gegenueber vorher (10px -> 13px). */
		gap: 13px;
		/* Datum und Uhrzeit sollen niemals als zwei Zeilen untereinander
		   umbrechen - stattdessen greift bei zu wenig Platz die Schriftgroessen-
		   Verkleinerung weiter unten (clamp()), bevor es zu einem Umbruch
		   kommen wuerde. */
		flex-wrap: nowrap;
	}

	/* Datum/Uhrzeit als reiner Text ohne Icon. +2 Stufen gegenueber vorher
	   (13px, je Stufe +2px -> 17px). clamp() haelt die Zeile bei sehr
	   schmalen Displays einzeilig: faellt der verfuegbare Platz unter eine
	   physikalische Grenze, wird die Schrift automatisch verkleinert (analog
	   zur bereits auf Desktop umgesetzten Loesung). Werte empirisch per
	   Playwright kalibriert (Bisektion des tatsaechlich noch passenden
	   Schriftgrads bei 320px/430px Breite, mit Sicherheitsabstand): bei 430px
	   passen 17px bereits exakt, bei 320px bleiben mit 9.5px ca. 8px Puffer
	   zum Kartenrand. Unterhalb von 320px wird nicht weiter reduziert, weil
	   es dort ohnehin keine relevanten Geraete mehr gibt. */
	.page-solo-shows .ticket-card-date,
	.page-solo-shows .ticket-card-time {
		font-size: clamp(9.5px, -12.3182px + 6.8182vw, 17px);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-solo-shows .ticket-card-date img,
	.page-solo-shows .ticket-card-time img {
		display: none;
	}

	.page-solo-shows .ticket-card-title {
		/* +3 Stufen gegenueber vorher (19px, je Stufe +2px -> 25px). Feste
		   px-Zeilenhoehe (statt relativ) fuer eine deterministische
		   2-Zeilen-Maximalhoehe (2 x 28px = 56px), die zusammen mit den
		   uebrigen Zonen sicher innerhalb der fixen 136px-Kartenhoehe bleibt.
		   -webkit-line-clamp begrenzt auf maximal 2 Zeilen inkl. Ellipsis am
		   Ende der 2. Zeile, sobald der Titel laenger ist - eine 3. Zeile kann
		   dadurch nie entstehen. */
		font-size: 17px;
		line-height: 28px;
		padding-left: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-solo-shows .ticket-card-location {
		/* Ueberlagert/absolut wie am Desktop statt eigener, umgebrochener
		   Zeile - beginnt jetzt bei --ss-card-height (von .ticket-card
		   geerbt) statt einem festen Prozentwert, weil die Bildbreite genau
		   dieser Kartenhoehe entspricht (quadratisches Bild, siehe
		   .ticket-card-image). Bleibt dadurch automatisch mit der
		   tatsaechlichen Bildbreite synchron. */
		left: var(--ss-card-height);
		min-height: 20px;
		/* +1 Stufe gegenueber vorher (11px -> 13px). */
		font-size: 13px;
		padding: 3px 0 3px 10px;
	}

	/* Nur Location 1 (erstes <strong>, siehe Template) - Adresse (<span>)
	   und Location 2 (zweites <strong>) werden mobil nicht mit angezeigt. */
	.page-solo-shows .ticket-card-location span,
	.page-solo-shows .ticket-card-location strong:nth-of-type(2) {
		display: none;
	}

	.page-solo-shows .ticket-card-info {
		display: none;
	}
}

/* Gegenstueck zum kompakten Block oben, jetzt um dieselbe Handy-Querformat-
   Ausnahme ergaenzt (De-Morgan-Umkehrung von "orientation:landscape and
   max-height:499px"): greift nur noch bei min-width:768px UND (Hochformat
   ODER Hoehe mindestens 500px) - ein breites, aber niedriges Fenster wie ein
   Handy im Querformat faellt dadurch weiterhin unter den kompakten Block
   oben, auch wenn es breiter als 768px ist. */

@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 500px) {
	/* Feinschliff-Sandbox: Tickethoehe (und damit Bildgroesse + Location-
	   Leisten-Hoehe) um 10% reduziert (250px -> 225px / 44px -> 39.6px).
	   Ausschliesslich hier neu deklariert (ueberschreibt die global in :root
	   definierten Werte NUR innerhalb von .page-solo-shows im Desktop-Bereich)
	   - betrifft weder /testtickets/, /testshows/, /comedy-shows/,
	   /open-air-2/ noch /dating-shows/ (alle mit eigener, unabhaengiger
	   Kopie dieser Werte) noch die mobile Kompakt-Ansicht dieser Seite (die
	   ueber die komplett eigene --ss-card-height-Variable laeuft und diese
	   drei Variablen gar nicht konsumiert). Schriftgroessen und
	   Icon-Groessen sind bewusst NICHT an diese Variablen gekoppelt und
	   bleiben dadurch automatisch unveraendert. */
	.page-solo-shows {
		--ticket-card-height: 225px;
		--ticket-card-image-width: 225px;
		/* WICHTIG: 44px war schon vorher nie die tatsaechlich gerenderte
		   Location-Leisten-Hoehe (min-height wurde vom Inhalt ueberstimmt) -
		   die echte Hoehe ergab sich aus Padding + line-height und lag
		   urspruenglich bei 10px+10px+32px=52px. Erste Reduktion (-10%):
		   46.8px (7.4px+7.4px+32px). Zweite, hier umgesetzte Reduktion
		   (weitere -10% auf 46.8px = 42.12px): da die Schriftgroesse der
		   Zeile jetzt zusaetzlich um eine Stufe verkleinert wurde (20px ->
		   18px, siehe .ticket-card-location weiter unten), sinkt auch die
		   line-height mit (Verhaeltnis 1.6 aus der globalen body-Regel:
		   18px * 1.6 = 28.8px), wodurch weniger Padding-Reduktion noetig ist
		   als bei gleichbleibender Schrift: 6.66px+6.66px+28.8px=42.12px.
		   Dieser Wert hier muss exakt dazu passen, da .ticket-card-content
		   ihn als padding-bottom-Reservierung nutzt, damit Titel/Infotext
		   nicht unter die Leiste rutschen. */
		--ticket-card-location-height: 42.12px;
	}

	.page-solo-shows .ticket-card-image img {
		object-fit: cover;
	}

	.page-solo-shows .ticket-card-image-icon {
		/* Platzhalter-Icon (nur ohne Beitragsbild) proportional mitverkleinert
		   (-10%: 56px -> 50.4px), analog zum echten Kartenbild. */
		width: 50.4px;
		height: 50.4px;
	}

	.page-solo-shows .ticket-card-content {
		/* Oben/seitlich enger als eine reine -10% Rechnung (16.2px/21.6px)
		   ergeben wuerde: bei 3-zeiligem Infotext (Standard-line-height,
		   -webkit-line-clamp:3) reichte der Platz bis zur Location-Leiste bei
		   schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Infotext um 14px in die Leiste hineinlaufend). Seitlich bleibt es
		   bei -10% (24px -> 21.6px), oben zusaetzlich reduziert (16.2px ->
		   13px), siehe auch .ticket-card-main-Gap und .ticket-card-info
		   line-height weiter unten fuer die weiteren, gemeinsam dafuer
		   noetigen Anpassungen. */
		padding: 13px 21.6px;
		padding-bottom: var(--ticket-card-location-height);
		/* Gemeinsame linke Fluchtlinie fuer Kalender-Icon/Titel/Infotext/
		   Location-Text (21px) - siehe .ticket-card-title, .ticket-card-info
		   und .ticket-card-location weiter unten, deren eigenes
		   padding-left dafuer auf 0 (Titel/Infotext, da dieses Padding hier
		   bereits die Ausrichtung liefert) bzw. auf denselben 21px-Wert
		   (Location-Text) gesetzt wurde. Rechts unveraendert bei 21.6px. */
		padding-left: 21px;
		gap: 0;
	}

	.page-solo-shows .ticket-card-main {
		/* Wie schon bei der mobilen Kompakt-Ansicht: .ticket-card-main hat
		   hier bewusst KEIN eigenes Padding mehr (das liegt jetzt auf
		   .ticket-card-content) - ohne diese explizite Nullung griff die
		   UNSCOPED Regel der echten Seiten (".ticket-card-main{padding:18px
		   24px}" ab min-width:768px) durch und fuegte 18px zusaetzliches
		   padding-top hinzu, wodurch der Abstand zur Datum/Uhrzeit-Zeile
		   trotz reduziertem margin-bottom auf .ticket-card-meta (siehe
		   unten) weiterhin bei 24px statt der gewuenschten 6px lag. */
		padding: 0;
		/* Abstand Titel-zu-Infotext enger gezogen (10px -> 5px, Basisregel
		   ueberschrieben) - Teil derselben Anpassung wie .ticket-card-content
		   oben, um bei 3-zeiligem Infotext genug Platz vor der Location-
		   Leiste zu erhalten. */
		gap: 5px;
	}

	.page-solo-shows .ticket-card-meta {
		/* Auf Wunsch enger gezogen gegenueber v0.29.1 (14px -> 6px, ca.
		   -57%) - Wert ggf. bei Bedarf weiter feinjustieren. Zusaetzlich
		   fuer die kompaktere Tickethoehe weiter reduziert (6px -> 4px, Teil
		   derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-info, um bei 3-zeiligem Infotext genug Platz vor der
		   Location-Leiste zu erhalten). */
		margin-bottom: 4px;
		/* Bricht nie um: die Zeile teilt sich strukturell (nicht nur per CSS)
		   keinen Flex-Container mehr mit dem Ticketbutton (siehe
		   .ticket-card-content/.ticket-card-lower weiter oben), daher gibt es
		   hier keine Konkurrenz um Breite mehr mit dem Button - die
		   Schriftgroesse bleibt deshalb ab 800px Fensterbreite immer fest bei
		   24px. Nur im sehr schmalen Restbereich 768-800px reicht der Platz
		   neben dem Bild rein physikalisch (voellig unabhaengig vom Button)
		   nicht ganz fuer den vollen Text bei 24px - siehe eigener,
		   entsprechend minimaler Block weiter unten. */
		flex-wrap: nowrap;
	}

	.page-solo-shows .ticket-card-date,
	.page-solo-shows .ticket-card-time {
		/* -2 Schriftgroessen-Stufen (Projekt-Konvention: 1 Stufe = 2px),
		   NUR auf dieser echten Seite (Desktop) - Testtickets bleibt bewusst
		   bei 26px: 26px -> 22px. line-height weiterhin EXPLIZIT auf den
		   unveraenderten Wert 38.4px fixiert (nicht mitschrumpfen lassen),
		   damit die Hoehe der oberen Zone (.ticket-card-meta) exakt
		   unveraendert bleibt und sich der jetzt kleinere Text weiterhin
		   automatisch (per Zeilenbox-Zentrierung) darin zentriert.
		   Titel-Position bleibt dadurch garantiert unveraendert. */
		font-size: 22px;
		line-height: 38.4px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.page-solo-shows .ticket-card-date img,
	.page-solo-shows .ticket-card-time img {
		/* Icons proportional im selben Verhaeltnis zur neuen Schriftgroesse
		   verkleinert (Faktor 22/26 = 0.8462): Kalender 26px -> 22px, Uhr
		   24px -> 20px (24 * 22/26 = 20.31, gerundet). */
		width: 22px;
		height: 22px;
	}

	.page-solo-shows .ticket-card-time img {
		/* Uhr-Icon war schon immer etwas schmaler als das Kalender-Icon -
		   Seitenverhaeltnis beibehalten (Faktor 22/24, vorher 24/26). */
		width: 20px;
		height: 20px;
	}

	.page-solo-shows .ticket-card-lower {
		/* .ticket-card-action ist jetzt position:absolute (siehe dortige
		   Regel) und dadurch kein Flex-Geschwister von .ticket-card-main mehr
		   - das bisherige "gap" zwischen beiden faellt damit weg. Damit
		   Titel/Infotext trotzdem exakt denselben Platz wie zuvor zur
		   Verfuegung haben (der Button soll weiterhin Einfluss auf deren
		   Zeilenumbruch/Kuerzung haben, bewusst unveraendertes Verhalten,
		   und keinesfalls mit ihnen ueberlappen), reserviert dieses
		   padding-right jetzt manuell exakt dieselbe Breite, die vorher durch
		   Button-Box (220px) + Gap (21.6px) beansprucht wurde. */
		padding-right: 241.6px;
	}

	.page-solo-shows .ticket-card-title {
		font-size: 32px;
		line-height: 1.2;
		/* Eigenes padding-left (Basisregel: 11px) auf 0 zurueckgesetzt - die
		   linke Fluchtlinie zu Kalender-Icon/Infotext/Location-Text kommt
		   jetzt ausschliesslich von .ticket-card-content{padding-left:21px}
		   (siehe dortiger Kommentar). */
		padding-left: 0;
		/* -10% gegenueber vorher (8px -> 7.2px) - Schriftgroesse/line-height
		   bleiben bewusst unveraendert. */
		margin-bottom: 7.2px;
		/* Bricht nie mehr um - bei zu wenig Platz (Button draengt weiterhin,
		   bewusst unveraendertes Verhalten) wird stattdessen am Zeichenende
		   mit "..." gekuerzt, kurz bevor der Text den Button beruehren wuerde.
		   .ticket-card-main hat bereits min-width:0 (Basis-Regel), damit der
		   Flex-Item ueberhaupt unter seine Inhaltsbreite schrumpfen kann -
		   sonst wuerde text-overflow:ellipsis wirkungslos bleiben. Keine
		   Schriftverkleinerung, keine Mindestbreite - rein die Kuerzung passt
		   sich der tatsaechlich verfuegbaren Breite an. */
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Empirisch gefunden: als Flex-Item einer Spalte (.ticket-card-main,
		   flex-direction:column) wurde die Titel-Box trotz reichlich freiem
		   Platz vertikal unter ihre eigene line-height (38.4px) zusammen-
		   geschrumpft (z. B. auf 18.5px statt 38.4px) - mit einem normalen
		   "overflow:hidden" (statt overflow-x) waere dadurch der untere Teil
		   der Zeile inkl. der "..."-Punkte (die nah an der Grundlinie sitzen)
		   unsichtbar mit abgeschnitten worden, obwohl der Text selbst noch
		   lesbar aussah. flex-shrink:0 verhindert dieses Zusammenschrumpfen
		   zuverlaessig; overflow-x statt overflow stellt zusaetzlich sicher,
		   dass nur horizontal (nie vertikal) geclippt wird. */
		flex-shrink: 0;
	}

	.page-solo-shows .ticket-card-info {
		/* Derselbe Zusammenschrumpf-Effekt wie beim Titel (siehe dortiger
		   Kommentar) betraf auch den Infotext: als Flex-Item derselben Spalte
		   (.ticket-card-main) wurde er trotz reichlich freiem Platz
		   unterhalb seiner eigenen Inhaltsgroesse zusammengedrueckt (auf
		   17.2px statt der fuer 2 Zeilen noetigen ca. 51px) - dadurch war nur
		   noch eine (teils sogar angeschnittene) Zeile sichtbar statt der
		   von -webkit-line-clamp:3 eigentlich erlaubten mehreren Zeilen.
		   Keine Ursache in den Abstaenden (Meta-zu-Lower-Abstand war bereits
		   korrekt bei 14px, siehe .ticket-card-meta oben). */
		flex-shrink: 0;
		/* Zeilenabstand (nicht Schriftgroesse - die bleibt bei 16px
		   unveraendert) enger gezogen (Standard-line-height ~25.6px -> 21px),
		   Teil derselben Anpassung wie .ticket-card-content/.ticket-card-main/
		   .ticket-card-meta oben: bei vollen 3 Zeilen (-webkit-line-clamp:3)
		   und Standard-line-height reichte der Platz vor der Location-Leiste
		   bei schmaleren Breiten sonst nicht mehr aus (empirisch bei 900px:
		   Text lief um 14px in die Leiste hinein). */
		line-height: 21px;
		/* Eigenes padding-left (Basisregel: 12px) auf 0 zurueckgesetzt -
		   linke Fluchtlinie kommt jetzt ausschliesslich von
		   .ticket-card-content{padding-left:21px} (siehe dortiger Kommentar,
		   analog zu .ticket-card-title). */
		padding-left: 0;
	}

	/* Location-Leiste: nie mehr umbrechen (statt bisher flex-wrap:wrap, das
	   bei schmalen Breiten zur bereits gemeldeten Ueberlappung mit dem
	   Button fuehrte). Die dynamische Kuerzung (Location 2 zuerst
	   vollstaendig ausblenden, erst danach Ort per Ellipsis kuerzen) wird
	   von assets/js/solo-shows-location.js uebernommen - reines CSS reicht
	   nicht, da vorher per JS gemessen werden muss, ob und wie stark
	   gekuerzt werden muss. Nur hier (Desktop-Block), NICHT in der mobilen
	   Kompakt-Ansicht - dort sind Ort/Location 2 ohnehin schon fest
	   ausgeblendet (siehe eigener Block weiter oben), unberuehrt von alldem. */
	.page-solo-shows .ticket-card-location {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	/* Location 1: Prioritaet 1 - immer vollstaendig sichtbar, schrumpft nie. */
	.page-solo-shows .ticket-card-location strong:nth-of-type(1) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Location 2: Prioritaet 2 - wird von JS bei Bedarf komplett per
	   display:none entfernt (inkl. seines eigenen padding-right als
	   Trenner, dadurch bleibt keine Luecke zurueck). Bis dahin ebenfalls
	   fix, kein Schrumpfen. */
	.page-solo-shows .ticket-card-location strong:nth-of-type(2) {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Ort (Adresse): standardmaessig ebenfalls fix/vollstaendig (Prioritaet-
	   1-und-2-Fall - alles passt bereits oder nur Location 2 wurde entfernt).
	   Erst wenn JS via .is-truncating signalisiert, dass selbst ohne
	   Location 2 nicht genug Platz ist (Prioritaet 3), wird hier per
	   Ellipsis gekuerzt. */
	.page-solo-shows .ticket-card-location span {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.page-solo-shows .ticket-card-location span.is-truncating {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ab hier: reine Groessen-/Abstands-Overrides fuer die um 10% reduzierte
	   Tickethoehe. Alle vier Regeln existierten bisher nur in der (mit
	   /testtickets/ geteilten Herkunfts-)Basisregel weiter oben, die auf
	   Mobile durch eigene Werte bzw. display:none vollstaendig ersetzt wird -
	   hier trotzdem bewusst als EIGENE, nur hier (Desktop) geltende
	   Ueberschreibung angelegt statt die Basisregel selbst zu aendern, damit
	   unmissverstaendlich bleibt, dass dies eine reine Desktop-Anpassung ist
	   und die Basisregel unangetastet bleibt. */
	.page-solo-shows .ticket-card-action {
		/* KORRIGIERT: "mittig" bezieht sich NICHT auf die gesamte
		   Tickethoehe (die schliesst die gelbe Location-Zeile mit ein),
		   sondern ausschliesslich auf die dunkle/graue Flaeche darueber
		   (Datum/Uhrzeit + Titel + Infotext-Bereich), also die Kartenhoehe
		   OHNE die Location-Leiste: (var(--ticket-card-height) -
		   var(--ticket-card-location-height)) / 2 = (225px - 42.12px) / 2 =
		   91.44px, gemessen von der Kartenoberkante. Ueber calc() direkt an
		   die beiden Variablen gekoppelt (nicht hartkodiert), damit der Wert
		   automatisch mitwandert, falls Kartenhoehe oder Location-Hoehe sich
		   je wieder aendern sollten. position:absolute relativ zu
		   .ticket-card (das bereits position:relative hat), aus dem
		   Flex-Fluss von .ticket-card-lower herausgenommen. Breite (220px)
		   und rechter Randabstand (21.6px, identisch zum rechten
		   Content-Padding) bleiben exakt wie zuvor, damit sich an der
		   sichtbaren horizontalen Position/Breite nichts aendert - nur die
		   Vertikale. .ticket-card-lower reserviert dafuer weiterhin per
		   padding-right denselben Platz (siehe dortige Regel), damit
		   Titel/Infotext nicht in den jetzt "freien" Bereich hineinlaufen. */
		position: absolute;
		top: calc((var(--ticket-card-height) - var(--ticket-card-location-height)) / 2);
		right: 21.6px;
		transform: translateY(-50%);
		width: 220px;
		/* padding-right gezielt auf 39px erhoeht (statt einheitlich 18px):
		   Mit dem neuen justify-content:flex-end (siehe unten) landet der
		   rechte Button-Rand exakt bei box-right(21.6px) + padding-right -
		   39px reproduziert damit exakt den bisherigen Abstand zum
		   Kartenrand (60.6px), den der Button vorher durch Zentrierung des
		   142px breiten Buttons in dieser 220px-Box hatte
		   (21.6px + (220px-142px)/2 = 60.6px). Ohne diese gezielte
		   Anpassung haette flex-end den Button stattdessen naeher an den
		   Kartenrand ruecken lassen (nur 21.6px+18px=39.6px), was die
		   Vorgabe "gleicher Abstand wie bisher" verletzt haette. Oben/
		   unten/links unveraendert bei 18px. */
		padding: 18px 39px 18px 18px;
		/* justify-content von der Basisregel (center) auf flex-end
		   umgestellt: bei "center" innerhalb der unveraenderten 220px-Box
		   haette ein kleinerer Button automatisch mehr Luft auf BEIDEN
		   Seiten bekommen, wodurch sein rechter Rand beim Verkleinern nach
		   LINKS (weg vom Kartenrand) gewandert waere - mit flex-end bleibt
		   der rechte Button-Rand dagegen immer buendig mit dem rechten Rand
		   dieser Box (right:21.6px, unveraendert), unabhaengig von der
		   Buttongroesse. Vertikale Zentrierung (top:50%/translateY(-50%))
		   bleibt unberuehrt, da sie an dieser Box haengt, nicht an
		   align-items. */
		justify-content: flex-end;
	}

	.page-solo-shows .ticket-card-button {
		/* Weitere -10% gegenueber dem letzten Schritt - alle Werte
		   konsequent proportional mitskaliert (inkl. Schriftgroesse und
		   Pfeil-Icon, wie schon beim letzten Mal):
		   Padding: 13.77px 24.3px -> 12.39px 21.87px
		   Eckenradius: 8.1px -> 7.29px
		   Schriftgroesse: 18px -> 16.2px
		   Abstand Text-zu-Pfeil: 9px -> 8.1px (siehe gap unten)
		   Pfeil-Icon: 18px -> 16.2px (siehe .ticket-card-button svg unten) */
		padding: 12.39px 21.87px;
		border-radius: 7.29px;
		font-size: 16.2px;
		gap: 8.1px;
	}

	.page-solo-shows .ticket-card-button svg {
		/* -10% gegenueber dem letzten Schritt (18px -> 16.2px), passend zur
		   verkleinerten Schrift. */
		width: 16.2px;
		height: 16.2px;
	}

	.page-solo-shows .ticket-card-location {
		/* Schriftgroesse aller drei Texte (Location 1 / Ort / Location 2,
		   alle erben von hier, kein eigenes font-size auf strong/span) um
		   eine Stufe verkleinert (20px -> 18px, Projekt-Konvention: 1 Stufe =
		   2px) - Font-Weight bleibt dabei unangetastet (strong bleibt 700,
		   span bleibt normal). Oben/unten-Padding NICHT einfach anteilig
		   verkleinert, sondern rechnerisch passend zur (durch die kleinere
		   Schrift jetzt ebenfalls kleineren) line-height von 28.8px
		   (18px * 1.6, globale body-Regel), damit die Gesamthoehe exakt die
		   gewuenschten weiteren -10% erreicht: 6.66px + 6.66px + 28.8px =
		   42.12px (siehe --ticket-card-location-height oben, die exakt dazu
		   passt). Links jetzt 21px (vorher 18px) - matcht die gemeinsame
		   linke Fluchtlinie mit Kalender-Icon/Titel/Infotext (siehe
		   .ticket-card-content{padding-left:21px}: die gelbe Flaeche selbst
		   (.ticket-card-location, position/Breite/Hoehe) bleibt dabei
		   komplett unveraendert - es aendert sich ausschliesslich dieses
		   Innen-Padding des Texts). */
		font-size: 18px;
		padding: 6.66px 0 6.66px 21px;
	}

	.page-solo-shows .ticket-card-location strong,
	.page-solo-shows .ticket-card-location span {
		/* -10% gegenueber vorher (15px -> 13.5px). */
		padding-right: 13.5px;
	}
}