/* ===========================================================================
   Startseite des Shops - dritte Gestaltung: Kassen-Look

   Liegt bewusst neben base.css: die wird von allen Veranstaltungen
   mitbenutzt. header.php bindet diese Datei nur ein, wenn es sie gibt.

   Diese Fassung holt die Startseite zu Warenkorb und Kasse
   (assets/css/kasse-v1.css): heller Seitengrund, weisse Karten mit weichen
   Schatten, Blau als Akzent. Vorher stand hier eine dunkle Buehne mit rotem
   Knopf - die erste Seite sah aus wie ein anderer Shop als die Seiten
   danach. Die Karten- und Titelbausteine (.kasse-karte, .kasse-titel,
   .kasse-haupt) kommen direkt aus kasse-v1.css, die auf jeder Seite
   geladen ist; hier stehen nur die Bausteine, die es ausschliesslich auf
   der Startseite gibt.

   Ruecknahme: design-backup/2026-09-01-startseite-kassen-look/zurueck.sh
   =========================================================================== */

:root {
	--ev-blau:      #0d6efd;
	--ev-blau-tief: #0b5ed7;
	/* Markierung der gewaehlten Show: ein blauer Rahmen auf hellem Grund.
	   Keine gefuellte Flaeche - eine Auswahl ist ein Zustand, kein
	   Aufruf zum Handeln; die einzige kraeftige Flaeche bleibt der
	   Ticketknopf. */
	--ev-gewaehlt:      var(--ev-blau);
	--ev-gewaehlt-flae: #f5f8ff;
	--ev-text:      #14181f;
	--ev-grau:      #6b7280;
	--ev-linie:     rgba(0, 0, 0, .09);
	--ev-radius:    16px;
	--ev-schatten:  0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}


/* ---------------------------------------------------------------------------
   Am Telefon: Luft zum Bildschirmrand

   Bootstrap gibt dem Container nur 12 px zur Seite - Text klebte damit fast
   an der Kante. Die Container der Startseite tragen .ev-shell und bekommen
   auf schmalen Schirmen 20 px. Bewusst nur hier und nicht global, damit die
   uebrigen Seiten unveraendert bleiben.
--------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	.ev-shell {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Sanftes Scrollen zum Ticket-Anker; im Bewegung-reduziert-Block unten
   wird es wieder abgeschaltet. */
html {
	scroll-behavior: smooth;
}


/* ---------------------------------------------------------------------------
   Buehne: eine weisse Karte wie in der Kasse - Flyer links, Text rechts
--------------------------------------------------------------------------- */

/* Die Buehne selbst ist nur noch der Rahmen: die weisse Karte traegt
   allein die RECHTE Spalte (.event-hero-text). Der Flyer links steht
   frei auf dem Seitengrund - nur mit seinem eigenen Schatten. */
.event-hero {
	margin-top: 24px;
}

.event-hero-inner {
	display: grid;
	gap: 22px;
}

/* Der Flyer - scharf und anklickbar.

   Am Telefon bewusst nicht in voller Breite: ein hochkantes Plakat fuellt
   dort sonst den ganzen ersten Bildschirm, und "Tickets sichern" laege
   darunter. Wer ihn lesen will, tippt darauf und bekommt ihn gross.

   Seit 2026-09-05 aber deutlich groesser als zuvor (44vw / 170px): so klein
   war vom Plakat nichts zu erkennen, und es wirkte wie ein Symbol statt wie
   das Bild der Veranstaltung. Bei 70vw bleibt auf einem 390er-Schirm der
   Titel darunter noch sichtbar - die Schaltflaeche ist ohnehin unten in der
   festen Leiste erreichbar. Weiter hinauf sollte es nicht gehen: ab etwa
   80vw fuellt das hochkante Plakat den ersten Bildschirm allein. */
.event-flyer {
	display: block;
	margin: 0 auto;
	width: 70vw;
	max-width: 280px;
	border-radius: 12px;
	overflow: hidden;
	/* nur Schatten, keine Kontur - der Flyer soll frei schweben */
	box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
	cursor: zoom-in;
	transition: transform .25s ease, box-shadow .25s ease;
}

.event-flyer img {
	display: block;
	width: 100%;
	height: auto;
}

.event-flyer:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 18px 44px rgba(16, 24, 40, .28);
}

/* Die rechte Spalte als rein weisse Karte. Bis 2026-10-07 lag hinter
   ihrem Kopf der Flyer als unscharfer Lichtschein (::before) - der hat
   den Grund je nach Bild eingefaerbt; die Karte soll aber immer weiss
   sein. clip statt hidden schneidet Ueberstehendes ab, ohne das Kleben
   des Flyers nebenan zu stoeren. */
.event-hero-text {
	min-width: 0;
	position: relative;
	overflow: hidden;
	overflow: clip;
	background: #fff;
	border: 1px solid rgba(16, 24, 40, .06);
	border-radius: var(--ev-radius);
	box-shadow: var(--ev-schatten);
	padding: 26px 20px;
	/* Linksbuendig auf allen Breiten. Zentriert stand der Text bis
	   2026-09-05 nur am Telefon - bei mehreren Zeilen (Titel, Ort, Datum,
	   Angaben untereinander) laesst sich das schlecht lesen: jede Zeile
	   faengt woanders an. */
	text-align: left;
}

/* Titel und Ortszeile kommen als fertiges HTML aus der Konfiguration - die
   dortigen Klassen bestimmen die Groesse. Hier nur Farbe und Abstand. */
.event-hero-text h1,
.event-hero-text h2,
.event-hero-text h3 {
	color: var(--ev-text);
	margin: 0;
}

.event-hero-titel {
	letter-spacing: -.02em;
}

/* Der event-Block ist gewoehnlicher Text: dieselbe Farbe und Groesse wie
   die Beschreibung weiter unten. Frueher stand er grau und kleiner da -
   damals enthielt er nur Ort und Stadt als Unterzeile zum Titel. Seit er
   die vollstaendigen Angaben traegt (Datum, Ort, Adresse, Zeiten), waere
   Grau eine Zumutung: es sind die Angaben, wegen derer der Besucher
   gekommen ist. */
.event-hero-ort {
	margin-top: 12px;
	color: var(--ev-text);
	font-size: .95rem;
	line-height: 1.65;
}

/* Manche Veranstaltungen schreiben den Block noch mit einer Ueberschrift
   darin. Die soll sich an dieser Stelle nicht wie eine benehmen - der
   Titel darueber ist die Ueberschrift, nicht sie. */
.event-hero-ort h1,
.event-hero-ort h2,
.event-hero-ort h3 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* Trennzeichen zwischen Angaben in derselben Zeile (Einlass - Beginn -
   Ende). Derselbe Punkt und dieselbe Zurueckhaltung wie in den frueheren
   Zeitkacheln: er trennt, ohne selbst gelesen zu werden.

   Als Klasse und nicht als ::after, weil die Zeile aus content_html kommt -
   der Betreiber setzt das Zeichen dort, wo er es braucht:

       Einlass: {{event_doors}} <span class="ev-trenner">&middot;</span> ...

   Im Ticket-PDF faellt das <span> weg (eticket_zeilen entfernt Auszeichnung)
   und der Punkt bleibt stehen - dort ist er ohnehin richtig. */
.ev-trenner {
	padding: 0 6px;
	color: rgba(0, 0, 0, .26);
	font-weight: 400;
}

/* Symbole vor den Angaben (Datum, Ort, Adresse, Einlass, Beginn, Ende).

   Umriss-Stil aus Bootstrap Icons - gefuellte Zeichen wuerden neben dem
   Fliesstext wie Schaltflaechen wirken. Feste Breite, damit die
   Beschriftungen der untereinander stehenden Zeilen auf einer Flucht
   beginnen; ohne sie richtete sich der Zeilenanfang nach der Breite des
   jeweiligen Zeichens.

   Gesetzt wird das Symbol in content_html - der Betreiber entscheidet,
   welches wohin gehoert:

       <i class="bi bi-calendar-event ev-icon"></i> Datum: {{event_date_short}}

   Im Ticket-PDF faellt das Element weg (eticket_zeilen entfernt
   Auszeichnung); dort waere die Symbolschrift ohnehin nicht vorhanden. */
.ev-icon {
	display: inline-block;
	width: 1.35em;
	margin-right: .1em;
	color: var(--ev-blau);
	font-size: .95em;
	line-height: 1;
	text-align: left;
	vertical-align: -.06em;
}


/* ---------------------------------------------------------------------------
   Angaben - ohne Kaesten

   Drei Ebenen statt sechs gleich aussehender Kacheln: das Datum traegt die
   Zeile, Zeiten und Alter stehen mit Trennpunkten darunter, die Adresse
   zurueckgenommen darunter. Was wichtig ist, sieht man an der Groesse.
--------------------------------------------------------------------------- */

.event-daten {
	max-width: 640px;
	margin: 20px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--ev-linie);
}

@media (min-width: 768px) {
	.event-hero-titel,
	.event-hero-untertitel,
	.event-hero-datum,
	.event-hero-ort {
		max-width: 640px;
	}
}

/* Das Datum steht zwischen Titel und Ort, nicht in der Liste darunter -
   dort faengt der Blick es nach dem Namen der Veranstaltung auf. Gross
   genug, um sich vom Ort abzusetzen, kleiner als der Titel. */
.event-hero-datum {
	margin-top: 10px;
	color: var(--ev-text);
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
}

/* Das Datum mit demselben Symbol-Plaettchen wie die Kartentitel der Kasse
   (.kasse-titel > .bi) - ein wiederkehrendes Zeichen, keine neue Form.
   Wird von der Startseite seit 2026-09-04 nicht mehr benutzt; die Regeln
   bleiben, weil andere Veranstaltungen dieselbe Datei laden. */
.event-daten-datum {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--ev-text);
}

.event-daten-datum > .bi {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: rgba(13, 110, 253, .09);
	color: var(--ev-blau);
	font-size: 1.05rem;
}

/* Bewusst kein Flex: der Trennpunkt haengt sonst beim Umbruch am Anfang der
   naechsten Zeile. Als ::after am vorangehenden Eintrag bleibt er dort
   kleben, wo er hingehoert - wie ein Komma. */
.event-daten-zeiten {
	margin-top: 8px;
	color: #374151;
	font-size: .95rem;
	line-height: 1.7;
}

.event-daten-zeiten > span {
	display: inline;
	white-space: nowrap;
}

.event-daten-zeiten > span:not(:last-child)::after {
	content: " · ";
	color: rgba(0, 0, 0, .3);
	white-space: normal;
}

.event-daten-zeiten b {
	font-weight: 600;
}

.event-daten-ort {
	margin-top: 10px;
	color: var(--ev-grau);
	font-size: .88rem;
	line-height: 1.5;
}

.event-daten-ort > .bi {
	margin-right: 4px;
	color: var(--ev-grau);
}

/* Der Weg zum Veranstaltungsort - eine eigene Zeile, damit der Link nicht
   hinter der Adresse untergeht. */
/* Der Link steht seit 2026-09-05 fuer sich, nicht mehr in .event-daten -
   dessen Trennlinie zog eine Kante quer unter die Angaben, die dort
   nichts mehr zu trennen hatte. Der Abstand, den die Umhuellung mitbrachte,
   steht deshalb jetzt hier. */
.event-daten-weg {
	margin-top: 14px;
	font-size: .88rem;
	line-height: 1.5;
}

.event-daten-weg a,
.event-daten-weg a:visited {
	color: var(--ev-blau);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.event-daten-weg a:hover {
	color: var(--ev-blau-tief);
}

.event-daten-weg .bi {
	margin-right: 3px;
}

.event-daten-ort a,
.event-daten-ort a:visited {
	color: var(--ev-blau);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.event-daten-ort a:hover {
	color: var(--ev-blau-tief);
}


/* ---------------------------------------------------------------------------
   Handgriffe

   Der Hauptknopf sieht aus wie .kasse-haupt in der Kasse - gleiche Rundung,
   gleiches Blau, gleicher Schatten. Er bleibt eine eigene Klasse, weil er
   als <a> im Bootstrap-Knopfsystem steckt (btn btn-ev btn-lg).
--------------------------------------------------------------------------- */

.event-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
	margin-top: 22px;
}

.event-hero-actions .btn {
	--bs-btn-padding-y: .72rem;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 600;
	--bs-btn-border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-ev {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--ev-blau);
	--bs-btn-border-color: var(--ev-blau);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--ev-blau-tief);
	--bs-btn-hover-border-color: var(--ev-blau-tief);
	--bs-btn-active-bg: var(--ev-blau-tief);
	--bs-btn-font-weight: 700;
	box-shadow: 0 4px 14px rgba(13, 110, 253, .3);
}

.btn-ev-still {
	--bs-btn-color: var(--ev-blau);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--ev-blau-tief);
	--bs-btn-hover-bg: rgba(13, 110, 253, .08);
	--bs-btn-hover-border-color: transparent;
}

/* Auch die Knoepfe sind Links - besucht duerfen sie nicht lila werden. */
a.btn-ev:visited {
	color: #fff;
	text-decoration: none;
}

a.btn-ev-still:visited {
	color: var(--ev-blau);
	text-decoration: none;
}


/* ---------------------------------------------------------------------------
   Fliesstext des Veranstalters - in einer Karte wie alles andere.
   Die Breite des Textes ist begrenzt: 90 Zeichen pro Zeile liest niemand
   gern, auch wenn die Karte breiter ist.
--------------------------------------------------------------------------- */

/* Show-Auswahl und Veranstaltertext leben im selben Bereich wie Titel und
   Knoepfe (rechte Spalte der Buehne) - getrennt durch feine Linien. */
.event-hero-shows {
	margin-top: 25px; padding-top: 25px;
}

.event-hero-shows,
.event-hero-beschreibung {
	border-top: 1px solid var(--ev-linie);
}

.event-hero-beschreibung {
	margin-top: 25px;
	padding-top: 25px;
	color: var(--ev-text);
	font-size: .95rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}

/* Der erste gepflegte Block bringt mt-20 aus base.css mit (!important) -
   direkt unter der Trennlinie riesse das ein Loch. */
.event-hero-beschreibung > *:first-child {
	margin-top: 0 !important;
}

/* In der weissen Karte brauchen die Show-Kacheln keinen eigenen
   Schatten - der Rahmen genuegt. */
.event-hero .show-wahl-karte {
	box-shadow: none;
}

/* Ausverkauft-Hinweis (_ausverkauft.php) - tritt an die Stelle der
   Ticket-Sektion, Inhalt aus message_soldout in config/event.php. */
.ausverkauft-karte {
	padding: 40px 24px;
	text-align: center;
}

.ausverkauft-karte > *:last-child {
	margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   Show-Auswahl - fuer Touren mit mehreren Shows

   Eine Kachel je Show. Die eigene Show ist blau gefuellt und nicht
   anklickbar, die uebrigen sind weisse Kacheln mit Rahmen und fuehren zu
   ihrer Veranstaltung. Die Liste selbst kommt aus der gemeinsamen Datei
   (show_selection_file in config/event.php).
--------------------------------------------------------------------------- */

/* Schmale Kacheln (140 px), mittig gesetzt: auto-fit laesst leere Spuren
   weg, justify-content zentriert jede Reihe - auch dann, wenn die Kacheln
   auf zwei oder mehr Reihen umbrechen. */
.show-wahl-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, 140px);
	justify-content: center;
	gap: 10px;
}

/* Die Kachel: alles untereinander und zentriert - Name, Datum, Uhrzeit,
   Info, zuletzt der Verkaufsstand. Sie steht frei auf dem Seitengrund und
   traegt deshalb selbst den weichen Kartenschatten. */
.show-wahl-karte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 10px 14px;
	border: 1px solid var(--ev-linie);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--ev-schatten);
	color: var(--ev-text);
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* base.css faerbt besuchte Links lila und unterstreicht sie (a:visited).
   Fuer die Kacheln gilt das nicht - einmal angeklickt saehe die Liste
   sonst wie ein Flickenteppich aus. Deshalb hier ausdruecklich. */
a.show-wahl-karte:visited {
	color: var(--ev-text);
	text-decoration: none;
}

a.show-wahl-karte:hover {
	transform: translateY(-2px);
	border-color: rgba(13, 110, 253, .45);
	box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
	color: var(--ev-text);
}

a.show-wahl-karte:focus-visible {
	outline: 2px solid var(--ev-blau);
	outline-offset: 2px;
}

.show-wahl-name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ev-grau);
	margin-bottom: 3px;
}

.show-wahl-datum {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.35;
}

.show-wahl-zeit {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ev-text);
}

.show-wahl-info {
	font-size: .78rem;
	line-height: 1.35;
	color: var(--ev-grau);
}

.show-wahl-karte .show-status {
	margin-top: 7px;
}

/* Verkaufsstand als Pille. Stand und Aufschrift kommen aus der gemeinsamen
   Datei (show_selection_file); die Datei nennt nur die Farbe - gruen, gelb,
   orange, rot oder grau -, die Gestaltung steht hier. */
.show-status {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.4;
	white-space: nowrap;
}

.show-status-gruen  { background: rgba(25, 135, 84, .12);   color: #198754; }
.show-status-gelb   { background: rgba(255, 193, 7, .2);    color: #8a6d00; }
.show-status-orange { background: rgba(253, 126, 20, .14);  color: #c05600; }
.show-status-rot    { background: rgba(220, 53, 69, .12);   color: #dc3545; }
.show-status-grau   { background: rgba(107, 114, 128, .14); color: #6b7280; }

/* Die eigene Show */
.show-wahl-karte.is-diese {
	background: var(--ev-gewaehlt-flae);
	border-color: var(--ev-gewaehlt);
	/* Der Rahmen traegt die Markierung, deshalb eine Spur kraeftiger -
	   ohne dass die Kachel dadurch springt (der Innenabstand gleicht
	   das eine Pixel wieder aus). */
	border-width: 2px;
	padding: 11px 9px 13px;
	box-shadow: 0 2px 10px rgba(13, 110, 253, .12);
	color: var(--ev-text);
}

/* Die Schrift bleibt wie auf den uebrigen Kacheln - hervorgehoben wird
   nur das Datum, damit der gewaehlte Termin sofort ins Auge faellt. */
.show-wahl-karte.is-diese .show-wahl-datum {
	color: var(--ev-gewaehlt);
}

/* Der Rahmen allein koennte man uebersehen: ein kleiner Punkt oben
   rechts sagt zusaetzlich "das ist die gerade gezeigte Show". */
.show-wahl-karte.is-diese {
	position: relative;
}

.show-wahl-karte.is-diese::after {
	content: "";
	position: absolute;
	top: 9px;
	right: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ev-gewaehlt);
}


/* ---------------------------------------------------------------------------
   Ticketliste - eine Liste in einer Karte, wie die Posten im Warenkorb

   Die Farbpunkte und die Preise geben die Struktur; getrennt wird mit einer
   feinen Linie. Die gewaehlte Zeile bekommt einen blauen Streifen an der
   Seite statt eines Rahmens ringsum.
--------------------------------------------------------------------------- */

.ticket-section {
	padding: 30px 0 0;
	scroll-margin-top: 64px;
}

.ticket-untertitel {
	margin: -12px 0 0;
	color: var(--ev-grau);
	font-size: .9rem;
}

.ticket-liste {
	margin-top: 16px;
	border-top: 1px solid var(--ev-linie);
}

.ticket-zeile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 14px 16px 12px;
	border-bottom: 1px solid var(--ev-linie);
	border-left: 3px solid transparent;
	transition: background .15s, border-color .15s;
}

.ticket-zeile.is-chosen {
	background: rgba(13, 110, 253, .05);
	border-left-color: var(--ev-blau);
}

.ticket-zeile.is-locked {
	opacity: .55;
}

.ticket-zeile-kopf {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.ticket-farbe {
	flex: 0 0 auto;
	margin-top: 3px;
}

.ticket-zeile-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ticket-name {
	color: var(--ev-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.ticket-beschreibung {
	margin-top: 2px;
	color: var(--ev-grau);
	font-size: .86rem;
	line-height: 1.45;
}

.ticket-beschreibung p:last-child {
	margin-bottom: 0;
}

.ticket-zeile-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-left: 46px;   /* auf Hoehe des Namens, am Farbpunkt vorbei */
}

.ticket-preis {
	color: var(--ev-text);
	font-size: 1.16rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.ticket-preis .ticket-preis-alt {
	margin-right: .4em;
	color: var(--ev-grau);
	font-size: .78em;
	font-weight: 500;
	text-decoration: line-through;
}

/* Mengenwahl: am Telefon gross genug zum Treffen */
.ticket-stepper {
	display: inline-flex;
	align-items: center;
	background: #f2f4f7;
	border-radius: 999px;
	overflow: hidden;
}

.ticket-stepper-btn {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ev-text);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s;
}

.ticket-stepper-btn:hover:not(:disabled) {
	background: rgba(0, 0, 0, .06);
}

.ticket-stepper-btn:disabled {
	opacity: .28;
	cursor: default;
}

.ticket-stepper-value {
	display: inline-block;
	min-width: 30px;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	-webkit-user-select: none;
	user-select: none;
}


/* ---------------------------------------------------------------------------
   Sitzplan

   Der Plan und die Auswahl daneben stecken in derselben Karte; die Auswahl
   bekommt denselben ruhigen Rahmen wie die Posten im Warenkorb.
--------------------------------------------------------------------------- */

.seat-plan-rahmen {
	border: 1px solid var(--ev-linie);
	border-radius: 12px;
	overflow: hidden;
}

.seat-auswahl {
	border: 1px solid var(--ev-linie);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

/* Kopf nach dem Muster der Kassen-Titel: Symbol-Plaettchen, Titel links,
   rechts ein Zaehler der gewaehlten Plaetze (blau wie die Marke am
   Warenkorb im Seitenkopf; bei 0 verborgen). */
.seat-auswahl-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	/* Blassblau statt neutralgrau - hebt den Kopf sichtbar von den Zeilen
	   darunter ab, ohne zu schreien. */
	background: rgba(13, 110, 253, .14);
	border-bottom: 1px solid rgba(13, 110, 253, .2);
	text-align: left;
}

.seat-auswahl-kopf h4 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--ev-text);
}

.seat-auswahl-kopf-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(13, 110, 253, .12);
	color: var(--ev-blau);
	font-size: 1rem;
}

.seat-auswahl-anzahl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--ev-blau);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.seat-auswahl-fuss {
	padding: 14px 12px;
	border-top: 1px solid var(--ev-linie);
	background: #f7f9fc;
}

/* Der Kaufen-Knopf in der schmalen Seitenleiste: etwas kleinere Schrift,
   wenig Seitenpolster und kein Umbruch - "In den Warenkorb" bleibt so in
   jeder Spaltenbreite einzeilig. */
.seat-auswahl-fuss .kasse-haupt {
	width: 100%;
	padding: .78rem .6rem;
	font-size: .95rem;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Optionen eines Tickets in "Ihre Auswahl"
   (themes/postticket/views/product_seat_template.php - Seitenleiste des
   Sitzplans UND Fenster der Kategorieauswahl)

   Vorher trugen Radios und Checkboxen die Bootstrap-2-Klassen .radio und
   .checkbox, die es in Bootstrap 5 nicht mehr gibt - die Eingaben klebten
   unformatiert am Text. Jetzt ist jede Wahl eine eigene Zeile mit Rahmen;
   die gewaehlte bekommt einen blauen Rand.
--------------------------------------------------------------------------- */

/* Der Ticketblock traegt sein Seitenpolster selbst - vorher hing der
   Abstand an einer Kette verschachtelter Bootstrap-Spalten, die sich
   gegenseitig fast aufhoben: die Optionen klebten am Rand der Box. Die
   Gutter der Spalten im Block sind abgeschaltet, damit alles buendig auf
   derselben Linie steht. */
.myItems > [data-pid],
#ticket_selection_list > [data-pid] {
	padding-left: 5px;
	padding-right: 5px;
}

.myItems > [data-pid] .row,
#ticket_selection_list > [data-pid] .row {
	--bs-gutter-x: 0;
}

.topt {
	margin-top: 12px;
	text-align: left;
}

.topt-label {
	display: block;
	margin: 0 0 2px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ev-text);
}

.topt-pflicht {
	color: #dc3545;
}

/* Beschreibungen - auch von product.php mitbenutzt, dort stand die Regel
   frueher als <style>-Block in der Vorlage. */
.option-hint {
	display: block;
	margin: 2px 0 6px;
	font-size: .8rem;
	font-weight: 400;
	color: var(--ev-grau);
}

.topt .form-control,
.topt .form-select {
	border-radius: 10px;
	font-size: .95rem;
}

.topt .form-control:focus,
.topt .form-select:focus {
	border-color: var(--ev-blau);
	box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.topt-textarea {
	height: 100px;
}

/* Wahlzeilen (Radio und Checkbox) */
.topt-wahlliste {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.topt-wahl {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 8px 11px;
	border: 1px solid var(--ev-linie);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: .9rem;
	line-height: 1.4;
	transition: border-color .15s ease, background .15s ease;
}

.topt-wahl:hover {
	border-color: rgba(13, 110, 253, .35);
}

.topt-wahl input {
	flex: 0 0 auto;
	margin: 2px 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--ev-blau);
}

/* Die gewaehlte Zeile - :has() koennen alle aktuellen Browser; wo nicht,
   fehlt nur die Einfaerbung, die Wahl selbst funktioniert. */
.topt-wahl:has(input:checked) {
	border-color: var(--ev-blau);
	background: rgba(13, 110, 253, .05);
}

.topt-wahl.is-aus {
	opacity: .55;
	cursor: not-allowed;
}

.topt-wahl-text {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ev-text);
}

.topt-wahl-text .option-hint {
	margin: 1px 0 0;
}

.topt-wahl-preis {
	flex: 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ev-text);
}

/* Offene Pflichtoption im Warenkorb - gesetzt beim Klick auf "Zur Kasse"
   (view_cart.php) oder nach der Zurueckweisung durch den Checkout. */
.topt.is-fehlt .topt-label {
	color: #dc3545;
}

.topt.is-fehlt .form-control,
.topt.is-fehlt .form-select {
	border-color: #dc3545;
	box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .12);
}

.topt.is-fehlt .topt-wahl {
	border-color: rgba(220, 53, 69, .5);
}

/* Entfernen-Knopf am Ticketblock: kleiner runder Papierkorb */
.ticket-block-x {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f3f6;
	color: #6b7280;
	font-size: .7rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.ticket-block-x:hover {
	background: rgba(220, 53, 69, .12);
	color: #dc3545;
}


/* Laden der Auswahl: blauer Ring auf mildem weissen Schleier
   (jQuery LoadingOverlay, eingerichtet in map.php). */
.lade-ring {
	display: inline-block;
	width: 38px;
	height: 38px;
	border: 3px solid rgba(13, 110, 253, .2);
	border-top-color: var(--ev-blau);
	border-radius: 50%;
	animation: lade-dreh .8s linear infinite;
}

@keyframes lade-dreh {
	to { transform: rotate(360deg); }
}

.lade-text {
	margin-top: 12px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ev-grau);
}

/* Abkuerzung zur Auswahl am Telefon - blau wie die Hauptknoepfe */
.seat-fab {
	background: var(--ev-blau);
	box-shadow: 0 4px 14px rgba(13, 110, 253, .35);
}

/* Restzeit der Reservierung - eine ruhige Timer-Zeile statt eines nackten
   Satzes: Stoppuhr-Plaettchen (dasselbe Zeichen wie die Kartentitel),
   Beschriftung links, die Zeit gross und mit festen Ziffernbreiten rechts,
   darunter ein Balken, der mit der Frist schrumpft. In der letzten Minute
   wechselt alles auf Rot. */
/* Eine Zeile: links Beschriftung und grosse Zeit uebereinander, rechts der
   Zaehler-Ring (Kreis mit Strahlen - Baustein _haltering.php). Weiss wie
   die Karten drumherum; erst in der letzten Phase faerbt sich die Flaeche
   zart rot. */
.halte-frist {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid var(--ev-linie);
	text-align: left;
}

.halte-frist-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.halte-frist-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ev-grau);
	line-height: 1.25;
}

.halte-frist-zeit {
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1.1;
	color: var(--ev-text);
}

/* Der Ring: ein Kreis, um den herum 40 Strahlen. "An" (blau) sind so
   viele, wie von der vollen Frist noch uebrig ist; der Rest bleibt blass
   stehen. */
.halte-ring {
	width: 66px;
	height: 66px;
	flex: 0 0 auto;
}

.halte-ring-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.halte-ring-kreis {
	fill: none;
	stroke: var(--ev-blau);
	stroke-width: 4.5;
}

.halte-tick {
	stroke: rgba(13, 110, 253, .16);
	stroke-width: 3.4;
	stroke-linecap: round;
	transition: stroke .3s ease;
}

.halte-tick.an {
	stroke: var(--ev-blau);
}

/* Als eigenstaendige Karte in Warenkorb und Checkout-Schritten
   (_haltefrist.php) - gleicher Inhalt, aber freistehend statt in der
   Auswahl-Box. */
.halte-frist-karte {
	border: 1px solid var(--ev-linie);
	border-radius: 12px;
	padding: 12px 16px 14px;
	margin-bottom: 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}

/* Zeilen der Platzauswahl (Sitzplan-Seitenleiste): Ticketfarbe wie an
   der Karte im Warenkorb, darunter die Platzangaben und die Kategorie. */
.seat-zeile {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ev-linie);
	text-align: left;
}

.seat-zeile-zeichen {
	flex: 0 0 auto;
	margin-top: 4px;
	margin-left: 5px;
	margin-right: 3px;
	font-size: 1.05rem;
	line-height: 1;
	transform: rotate(45deg);
}

.seat-zeile-text {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

.seat-zeile-platz {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: var(--ev-text);
	overflow-wrap: break-word;
}

.seat-zeile-cat {
	display: block;
	margin-top: 1px;
	font-size: .75rem;
	color: var(--ev-grau);
}

.seat-zeile .ticket-block-x {
	flex: 0 0 auto;
}

/* Die letzte Phase (Warnschwelle): alles wechselt auf Rot, die Zeit
   pulsiert ruhig. */
.halte-frist.is-knapp {
	background: rgba(220, 53, 69, .07);
}

.halte-frist.is-knapp .halte-frist-zeit {
	color: #dc3545;
	animation: halte-puls 1s ease-in-out infinite;
}

.halte-frist.is-knapp .halte-ring-kreis {
	stroke: #dc3545;
}

.halte-frist.is-knapp .halte-tick {
	stroke: rgba(220, 53, 69, .18);
}

.halte-frist.is-knapp .halte-tick.an {
	stroke: #dc3545;
}

@keyframes halte-puls {
	50% { opacity: .55; }
}


/* ---------------------------------------------------------------------------
   Mitlaufende Leiste am unteren Rand (nur am Telefon) - gleiche Bauart wie
   die feste Kassenleiste in kasse-v1.css
--------------------------------------------------------------------------- */

.ticket-leiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 28px rgba(16, 24, 40, .14);
	transform: translateY(120%);
	transition: transform .22s ease;
}

.ticket-leiste.is-open {
	transform: translateY(0);
}

.ticket-leiste-text {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;
}

.ticket-leiste-anzahl {
	display: block;
	color: var(--ev-grau);
	font-size: .78rem;
	font-weight: 600;
}

.ticket-leiste-summe {
	display: block;
	color: var(--ev-text);
	font-size: 1.15rem;
	font-weight: 800;
}

.ticket-leiste .btn {
	--bs-btn-padding-y: .7rem;
	--bs-btn-padding-x: 1.3rem;
	--bs-btn-font-weight: 700;
	--bs-btn-border-radius: 12px;
	flex: 0 0 auto;
}

body.hat-ticketleiste {
	padding-bottom: 78px;
}


/* ---------------------------------------------------------------------------
   Dezente Bewegung

   .ev-auf allein versteckt nichts. Verborgen wird erst, wenn das Skript
   .ev-bereit gesetzt hat - und das tut es nur, wenn es auch einblenden kann.
   Sonst waere bei einem Skriptfehler die halbe Seite unsichtbar. Eine
   Verzierung darf nie darueber entscheiden, ob Inhalt zu sehen ist.
--------------------------------------------------------------------------- */

.ev-bereit .ev-auf {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s ease;
}

.ev-bereit .ev-auf.is-da {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ev-bereit .ev-auf {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.event-flyer,
	.ticket-leiste {
		transition: none;
	}

	.halte-frist.is-knapp .halte-frist-zeit {
		animation: none;
	}

	html {
		scroll-behavior: auto !important;
	}
}


/* ---------------------------------------------------------------------------
   Ab Tablet: Flyer und Text nebeneinander
--------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.event-hero-text {
		padding: 36px 40px;
	}

	.event-hero-inner {
		grid-template-columns: minmax(200px, 280px) 1fr;
		/* stretch statt center: die Flyer-Spalte muss die volle Hoehe der
		   (jetzt langen) rechten Spalte fuellen, damit der Flyer darin
		   beim Scrollen kleben kann - bis zum Ende der Buehne, also bis
		   zur Ticket-Sektion. */
		align-items: stretch;
		gap: 42px;
	}

	.event-flyer-spalte {
		min-width: 0;
	}

	.event-flyer {
		position: sticky;
		top: calc(var(--kl-hoehe, 0px) + 20px);  /* unter der Kopfleiste (kopfleiste.css) */
		width: auto;
		max-width: none;
		margin: 0;
	}

	.event-daten {
		margin-left: 0;
		margin-right: 0;
	}

	.event-daten-zeiten,
	.event-daten-datum {
		justify-content: flex-start;
	}

	.event-daten-datum {
		font-size: 1.42rem;
	}

	/* Ticketzeile: alles in einer Reihe */
	.ticket-zeile {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 18px 16px 18px 14px;
	}

	.ticket-zeile-kopf {
		flex: 1 1 auto;
	}

	.ticket-zeile-fuss {
		flex: 0 0 auto;
		gap: 22px;
		padding-left: 0;
	}

	.ticket-preis {
		min-width: 118px;
		text-align: right;
	}

	/* Am grossen Bildschirm steht der Knopf unter der Liste - dort ist er
	   ohne Scrollen zu sehen, und eine feste Leiste waere nur im Weg. */
	.ticket-leiste {
		display: none;
	}

	body.hat-ticketleiste {
		padding-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.event-hero-inner {
		grid-template-columns: 300px 1fr;
		gap: 56px;
	}
}

/* --- Instagram des Veranstalters (Startseite) ---------------------------
   Bewusst leise: eine kleine graue Zeile am Fuss der Hero-Karte, abgesetzt
   durch dieselbe feine Linie wie die uebrigen Abschnitte. Farbe bekommt
   sie erst beim Ueberfahren. */

.event-hero-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--ev-linie);
}

.event-social-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .84rem;
	line-height: 1.4;
	color: #98a2b0;
	text-decoration: none;
	transition: color .15s ease;
}

/* base.css faerbt besuchte Verweise lila - hier bleibt es ruhig. */
.event-social-link:visited { color: #98a2b0; }

.event-social-link:hover,
.event-social-link:focus-visible {
	color: #e1306c;
	text-decoration: none;
}

.event-social-link .bi { font-size: 1rem; }

/* Beschriftung vor den Konten - gleiche leise Optik wie die Verweise
   selbst, nur ohne Zeigefinger-Verhalten. */
.event-social-label {
	font-size: .84rem;
	line-height: 1.4;
	color: #98a2b0;
}