/* =========================================================================
   Kassen-Design v1  -  Warenkorb + Checkout Schritt 1-3
   -------------------------------------------------------------------------
   Eigene Datei statt Aenderungen in base.css: die wird von allen
   Veranstaltungen mitbenutzt. Alle Klassen beginnen mit .kasse- und
   stoeren daher nirgendwo sonst. Ruecknahme: Datei loeschen
   (siehe design-backup/2026-08-30-kassen-design/).

   Grundsatz: die Hintergrundfarbe der Seite bleibt; darauf liegen weisse
   Karten mit weichen Schatten. Auf dem Smartphone klebt die Hauptaktion
   als Leiste am unteren Rand.
   ========================================================================= */

/* --- Karten ------------------------------------------------------------- */

.kasse-karte {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
	padding: 22px 18px;
	margin-bottom: 18px;
}

@media (min-width: 992px) {
	.kasse-karte { padding: 30px 34px; }
}

/* Sanfter Auftritt beim Laden - dezent, und abschaltbar fuer alle, die
   Bewegung reduziert haben moechten. */
.kasse-auftritt { animation: kasse-auf .5s cubic-bezier(.16, 1, .3, 1) both; }
.kasse-auftritt:nth-of-type(2) { animation-delay: .07s; }
.kasse-auftritt:nth-of-type(3) { animation-delay: .14s; }

@keyframes kasse-auf {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kasse-auftritt { animation: none; }
}

/* --- Abschnitts-Titel ---------------------------------------------------- */

.kasse-titel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 1.2rem;
	font-weight: 700;
}

.kasse-titel > .bi {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(13, 110, 253, .09);
	color: #0d6efd;
	font-size: 1.15rem;
}

.kasse-titel .kasse-titel-neben {
	margin-left: auto;
	font-size: .85rem;
	font-weight: 400;
}

/* Die kompakte Eventzeile hatte hier eigene Klassen (.kasse-eventzeile,
   .kasse-event-haupt, -neben, -stadt). Sie sind am 2026-09-05 entfallen:
   der Block in content_html['checkout_text'] wird jetzt allein mit
   Bootstrap-Hilfsklassen gebaut. Wer das Aussehen aendern will, aendert
   dort die Klassen und braucht diese Datei nicht anzufassen. */

/* --- Schrittanzeige ------------------------------------------------------
   Runde 2026-08-30-kasse-schritte: gefuellte Punkte statt duenner Ringe,
   die Verbindung endet mit Luft VOR den Punkten statt darunter
   durchzulaufen, kommende Strecken sind gestrichelt ("noch offen"),
   erledigte durchgehend gruen. Der aktuelle Schritt atmet einen ruhigen
   Ring; der Haken erledigter Schritte springt kurz auf. */

.kasse-schrittkarte { padding: 18px 10px 14px; }

@media (min-width: 992px) {
	.kasse-schrittkarte { padding: 22px 18px 16px; }
}

.kasse-schritte {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kasse-schritt {
	position: relative;
	flex: 1;
	max-width: 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Verbindung zum vorigen Schritt */
.kasse-schritt::before {
	content: "";
	position: absolute;
	top: 16px;
	right: calc(50% + 24px);
	width: calc(100% - 48px);
	height: 2px;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, #d5dee8 0 6px, transparent 6px 12px);
	z-index: 0;
}

.kasse-schritt:first-child::before { display: none; }

/* Rechts-nach-links-Sprachen: der vorige Schritt steht rechts */
[dir="rtl"] .kasse-schritt::before {
	right: auto;
	left: calc(50% + 24px);
}

.kasse-punkt {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eef2f7;
	color: #8a94a0;
	font-weight: 700;
	font-size: .88rem;
	transition: background .25s, color .25s, transform .25s;
}

/* Nicht breiter als die eigene Spalte: als Flex-Kind waere der Text sonst
   so breit wie sein Inhalt, und lange Woerter ("Zahlungsmethoden") liefen
   auf dem Smartphone in die Nachbarschritte hinein. Lange Woerter brechen
   mit Trennstrich um (html traegt lang=".."). */
.kasse-schritt-text {
	margin-top: 8px;
	max-width: 100%;
	padding: 0 3px;
	font-size: .74rem;
	font-weight: 600;
	color: #98a2b0;
	text-align: center;
	line-height: 1.2;
	hyphens: auto;
	overflow-wrap: break-word;
	transition: color .25s;
}

/* erledigt */
.step-success .kasse-punkt {
	background: linear-gradient(135deg, #2eb26a, #198754);
	color: #fff;
}

.step-success::before,
.step-active::before { background: #2eb26a; }

.step-success .kasse-schritt-text { color: #198754; }

.step-success .kasse-punkt > .bi {
	animation: kasse-haken .35s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes kasse-haken {
	from { transform: scale(.3); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* aktuell: konstanter weicher Halo, darueber eine duenne Ringwelle, die
   vom Punktrand nach aussen waechst und dabei verblasst (Sonar). Die
   Welle laeuft ueber transform statt box-shadow - das rendert der
   Browser fluessig, und der Puls wirkt weich statt stufig. Nach jeder
   Welle eine kurze Ruhepause (Halt bei 60-100%). */
.step-active .kasse-punkt {
	background: linear-gradient(135deg, #3d8bfd, #0d6efd);
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(13, 110, 253, .3), 0 0 0 5px rgba(13, 110, 253, .12);
}

.step-active .kasse-punkt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(13, 110, 253, .5);
	animation: kasse-ring 2.6s cubic-bezier(.25, .5, .4, 1) infinite;
	pointer-events: none;
}

@keyframes kasse-ring {
	0%   { transform: scale(1);    opacity: .7; }
	60%  { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}

.step-active .kasse-schritt-text { color: #0d6efd; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.step-active .kasse-punkt::after { animation: none; display: none; }
	.step-success .kasse-punkt > .bi { animation: none; }
}

/* Smartphone: eine Stufe kleiner, die Beschriftungen bleiben sichtbar */
@media (max-width: 575.98px) {

	.kasse-schritt::before {
		top: 14px;
		right: calc(50% + 21px);
		width: calc(100% - 42px);
	}

	[dir="rtl"] .kasse-schritt::before {
		right: auto;
		left: calc(50% + 21px);
	}

	.kasse-punkt {
		width: 30px;
		height: 30px;
		font-size: .8rem;
	}

	.kasse-schritt-text { font-size: .68rem; }
}

/* --- Posten-Tabelle (summary) ------------------------------------------- */

.kasse-tabelle table { margin: 0; }
.kasse-tabelle thead { display: none; }

.kasse-tabelle td,
.kasse-tabelle th {
	border: 0;
	background: transparent;
	padding-top: .7rem;
	padding-bottom: .7rem;
	vertical-align: middle;
}

.kasse-tabelle tbody tr { border-bottom: 1px solid #eef1f5; }
.kasse-tabelle tbody tr:last-child { border-bottom: 0; }

/* --- Hinweise ------------------------------------------------------------ */

.kasse-hinweis {
	background: #f6f9fc;
	border-left: 4px solid #0d6efd;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 18px;
}

.kasse-hinweis-warnung {
	background: #fff9ec;
	border-left-color: #f0ad4e;
}

/* Anzeige-Kaestchen (E-Mail, Telefon zum Pruefen) */
.kasse-pruefwert {
	background: #f2f6fa;
	border-radius: 12px;
	padding: 16px 12px;
	margin: 14px 0 20px;
	text-align: center;
}

/* --- Zustimmungen -------------------------------------------------------- */

.kasse-zustimmung {
	background: #f6f9fc;
	border-radius: 12px;
	padding: 20px 18px;
	margin-top: 26px;
}

.kasse-zustimmung .form-check { padding-left: 2.1em; }

.kasse-zustimmung .form-check-input {
	width: 1.35em;
	height: 1.35em;
	margin-top: .12em;
	margin-left: -2.1em;
}

/* Der (seit der Zusammenlegung laengere) Zustimmungstext eine Stufe
   kleiner - Rechtstext, kein Blickfang. */
.kasse-zustimmung .form-check-label {
	font-size: .88rem;
	line-height: 1.45;
}

/* --- Aktionsbereich ------------------------------------------------------ */

.kasse-aktion {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.kasse-zurueck {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #5b6572;
	text-decoration: none;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 12px;
	transition: background .15s, color .15s;
}

.kasse-zurueck:hover { background: #eef2f6; color: #1f2937; }

.kasse-summe {
	margin-left: auto;
	text-align: right;
	line-height: 1.15;
}

.kasse-summe small {
	display: block;
	font-size: .72rem;
	color: #6b7280;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.kasse-summe strong { font-size: 1.25rem; }

.kasse-haupt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 12px;
	background: #0d6efd;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: .85rem 2.2rem;
	transition: transform .15s, box-shadow .15s, background .15s;
	box-shadow: 0 4px 14px rgba(13, 110, 253, .3);
}

/* Hover nur fuer echte Zeiger (Maus). Auf Touch-Geraeten wuerde der
   erste Tipp sonst nur den Hover-Zustand schalten statt zu klicken -
   der Grund, warum der Kasse-Knopf auf iOS mehrere Tipper brauchte. */
@media (hover: hover) {
	.kasse-haupt:hover {
		background: #0b5ed7;
		color: #fff;
		transform: translateY(-1px);
		box-shadow: 0 6px 18px rgba(13, 110, 253, .38);
	}
}

.kasse-haupt:active { transform: none; }

/* Touch: sofort klicken, ohne Doppel-Tipp-Wartezeit und Grau-Blitz */
.kasse-haupt,
.kasse-zurueck {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.kasse-haupt:disabled {
	background: #9db8dd;
	box-shadow: none;
	transform: none;
}

/* Auf dem Smartphone wird der Aktionsbereich zur festen Leiste unten.
   .kasse-seite schafft dafuer unten Platz, damit die Leiste keinen
   Inhalt verdeckt. */
@media (max-width: 767.98px) {

	.kasse-seite { padding-bottom: 96px; }

	.kasse-aktion {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		margin: 0;
		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);
		/* Eigene Zeichenebene: iOS klebt die Leiste dann wirklich fest,
		   statt sie beim Ein-/Ausfahren der Adressleiste jeden
		   Bildstrich neu zu setzen (sichtbares Flattern). */
		transform: translateZ(0);
		will-change: transform;
	}

	.kasse-zurueck { padding: 10px; }
	.kasse-zurueck .kasse-zurueck-text { display: none; }

	.kasse-summe { margin-left: 0; }

	.kasse-haupt {
		flex: 1;
		padding: .85rem 1rem;
	}
}

/* --- Kleinkram ----------------------------------------------------------- */

/* Nebenknoepfe (Anmelden/Registrieren) als ruhige Textknoepfe */
.kasse-nebenknopf {
	background: none;
	border: 0;
	color: #0d6efd;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 8px;
	transition: background .15s;
}

.kasse-nebenknopf:hover { background: rgba(13, 110, 253, .08); }

/* Loeschen-Link im Kartentitel */
a.kasse-leeren {
	/* Rot: die Aktion loescht den ganzen Korb, das darf man ihr ansehen.
	   !important, weil die Linkfarbe des Themes (Purpur) sonst gewinnt. */
	color: #dc3545 !important;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s;
}

a.kasse-leeren:hover { color: #b02a37 !important; }

/* Seitenleiste rechts (Desktop): bleibt beim Scrollen stehen - unter der
   klebenden Kopfleiste (--kl-hoehe aus kopfleiste.css, seit 02.10.2026) */
@media (min-width: 992px) {
	.kasse-seitenleiste {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--kl-hoehe, 0px) + 20px);
	}
}

/* Karten, in denen die mobile Aktionsleiste steckt, duerfen beim Auftritt
   nicht verschoben werden: ein transform macht das Element zum Bezugsrahmen,
   und "position: fixed" klebte dann an der Karte statt am Bildschirmrand.
   Diese Karten blenden nur weich ein. */
.kasse-auftritt-weich { animation: kasse-auf-weich .5s ease-out both; animation-delay: .07s; }

@keyframes kasse-auf-weich {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.kasse-auftritt-weich { animation: none; }
}

/* Der Bezahlknopf traegt den rechtlich vorgeschriebenen Text samt Betrag -
   auf schmalen Bildschirmen darf die Schrift dafuer leicht schrumpfen. */
@media (max-width: 767.98px) {
	.kasse-haupt { font-size: .95rem; }
}

/* Das versteckte thead nimmt seine Spaltenbreiten mit - die erste Spalte
   (Farbpunkt) bekommt sie deshalb hier zurueck. */
.kasse-tabelle tbody > tr > th[scope="row"] { width: 56px; }

/* --- Postenliste: Namen, Optionen, Zusatzleistungen ---------------------- */

.kasse-posten-name {
	font-weight: 600;
	line-height: 1.35;
}

/* Gewaehlte Optionen (z.B. "Typ: Student/in") - ruhig und klein unter dem
   Namen, mit feiner Fuehrungslinie statt lauter Schrift. */
.kasse-option {
	position: relative;
	margin-top: 4px;
	padding-left: 14px;
	font-size: .82rem;
	color: #6b7280;
	line-height: 1.4;
}

.kasse-option::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .35em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #cfd9e2;
}

.kasse-option .fw-bold { color: #374151; }

.kasse-option-addon::before { background: #198754; }

/* Zusatzleistungen: getoenter Kasten mit Schaltern */
.kasse-addons {
	margin-top: 12px;
	/* Weiss auf der getoenten Karte - vorher fiel der Kasten mit fast
	   gleicher Toenung in ihr zusammen. */
	background: #fff;
	border: 1px solid #e8eef4;
	border-radius: 12px;
	padding: 12px 14px;
	max-width: 480px;
}

.kasse-addons-titel {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a94a0;
	margin-bottom: 8px;
}

.kasse-addon {
	padding: 6px 0 6px 2.6em;
	border-top: 1px solid #eef2f6;
}

.kasse-addon:first-of-type { border-top: 0; }

.kasse-addon .form-check-input {
	width: 2.1em;
	height: 1.15em;
	margin-top: .2em;
	margin-left: -2.6em;
	cursor: pointer;
}

.kasse-addon-zeile {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	cursor: pointer;
}

.kasse-addon-name { line-height: 1.35; }

.kasse-addon-preis {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

.kasse-addon-an .kasse-addon-preis { color: #198754; }

.kasse-addon-dabei {
	display: inline-block;
	margin-left: 6px;
	font-size: .78rem;
	font-weight: 700;
	color: #198754;
}

.kasse-addon-rest {
	display: inline-block;
	margin-left: 6px;
	font-size: .78rem;
	color: #8a94a0;
}

.kasse-addon-knapp { color: #b02a37; font-weight: 600; }

/* Endsummen-Zeile deutlich abgesetzt */
.kasse-tabelle tfoot td { padding-top: .45rem; padding-bottom: .45rem; }

.kasse-tabelle .kasse-gesamt td {
	border-top: 2px solid #e2e8ee;
	padding-top: .8rem;
	font-size: 1.06rem;
}

/* Waehrend der Neuberechnung: Liste gedimmt, Eingaben gesperrt und ein
   Kreisel mittig darueber - nur das Dimmen war bei schnellen Antworten
   leicht zu uebersehen, die Aktualisierung soll aber auffallen. */
.kasse-laedt {
	position: relative;
	pointer-events: none;
}

.kasse-laedt > * {
	opacity: .45;
	transition: opacity .15s;
}

/* Der Kreisel haengt fest in der Mitte des Bildschirms, nicht der Liste:
   bei einer langen Liste waere die Listenmitte sonst ausserhalb des
   sichtbaren Bereichs, sobald der Nutzer oben oder unten steht. */
.kasse-laedt::after {
	content: "";
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 1050;
	width: 2.2rem;
	height: 2.2rem;
	border: .25rem solid #e2e8ee;
	border-top-color: #1a2733;
	border-radius: 50%;
	animation: kasse-laedt-drehung .7s linear infinite;
}

@keyframes kasse-laedt-drehung {
	to { transform: rotate(360deg); }
}

/* Farbpunkt und Preis oben an der Namenszeile ausrichten - sonst schweben
   sie bei Posten mit Zusatzleistungen mittig in der hohen Zeile. */
.kasse-tabelle tbody th[scope="row"],
.kasse-tabelle tbody td { vertical-align: top; }

.kasse-tabelle tbody td:last-child { padding-top: .85rem; }

/* Schmale Bildschirme: der Zusatzleistungs-Kasten ruecken unter dem Namen
   ueber die volle Zeilenbreite (auch unter den Farbpunkt), sonst zwaengt
   sein Mindestmass die Tabelle ins horizontale Scrollen und das Waehrungs-
   zeichen faellt aus dem Bild. */
@media (max-width: 767.98px) {

	.kasse-tabelle tbody > tr > th[scope="row"] { width: 46px; }

	.kasse-addons {
		margin-left: -52px;
		margin-right: -66px;   /* auch unter die Preisspalte - dort steht in
		                          dieser Hoehe ohnehin nichts mehr */
		max-width: none;
		padding: 10px 12px;
	}

	.kasse-addon-preis { font-size: .9rem; }
}

/* --- Feinschliff Warenkorb (30.08.) -------------------------------------- */

/* Einheitlicher Abstand: Kopfleiste -> Eventzeile -> erste Karte.
   Die Eventzeile hat 18px nach unten; dieselben 18px stehen jetzt auch
   ueber ihr, statt je Seite eigener mt-Klassen. */
.kasse-seite { padding-top: 18px; }

/* Trennlinien in der Ticketkarte: unter dem Titel und ueber den Summen -
   Titel | Linie | Tickets | Linie | Summen. */
.kasse-tabelle table { border-top: 1px solid #e2e8ee; }

.kasse-tabelle tfoot tr:first-child td {
	border-top: 1px solid #e2e8ee;
	padding-top: .9rem;
}

/* Posten brauchen Luft und eine sichtbare Trennung - auf dem Smartphone
   klebten sie ineinander. */
.kasse-tabelle tbody th[scope="row"],
.kasse-tabelle tbody td {
	padding-top: .95rem;
	padding-bottom: .95rem;
}

.kasse-tabelle tbody tr { border-bottom: 1px solid #eef1f5; }
.kasse-tabelle tbody tr:last-child { border-bottom: 0; }

@media (max-width: 767.98px) {

	.kasse-tabelle tbody th[scope="row"],
	.kasse-tabelle tbody td {
		padding-top: 1.05rem;
		padding-bottom: 1.05rem;
	}

	.kasse-posten-name { font-size: .98rem; }
}

/* Einloese-Feld im Warenkorb: Feld und Knopf in der Groesse der uebrigen
   Eingaben, der Knopf als vollwertiger Hauptknopf statt duennem Rahmen. */
.kasse-einloesen .form-control {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	font-size: 1rem;
}

.kasse-einloesen-knopf {
	background: #0d6efd;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding-left: 1.6rem;
	padding-right: 1.6rem;
	border: 0;
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
	transition: background .15s;
}

.kasse-einloesen-knopf:hover,
.kasse-einloesen-knopf:focus {
	background: #0b5ed7;
	color: #fff;
}

/* --- Ticketkarten (Runde 2026-09-03-warenkorb-karten) --------------------
   Eine Karte je Ticket, wie beim grossen Vorbild: oben Zeichen in der
   Ticketfarbe, Name und Preis, darunter beschriftete Platz-Spalten mit
   Trennlinien. Schrift und Seitenhintergrund bleiben unangetastet. */

/* Abstand nach unten, damit die Ticketliste nicht am Summenblock klebt */
.kasse-tickets { display: flex; flex-direction: column; gap: 13px; margin-bottom: 14px; }

.kasse-ticket {
	/* Leicht getoent statt weiss: hebt jedes Ticket vom weissen
	   Warenkorb-Kasten ab, ohne unruhig zu werden. */
	background: #f7f9fb;
	border: 1px solid #e7ebf0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	overflow: hidden;
}

.kasse-ticket-kopf {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 12px;
}

.kasse-ticket-zeichen {
	flex-shrink: 0;
	font-size: 1.35rem;
	line-height: 1;
	margin-top: 1px;
}

.kasse-ticket-titel { flex: 1 1 auto; min-width: 0; }

.kasse-ticket-name { font-weight: 700; }

.kasse-ticket-hinweis {
	font-size: .8rem;
	color: #6b7280;
	margin-top: 2px;
}

.kasse-ticket-hinweis p { margin: 0; }

.kasse-ticket-preis {
	flex-shrink: 0;
	font-weight: 700;
	white-space: nowrap;
}

/* Gruen zeigt auf einen Blick: hier steckt eine Zusatzleistung im Preis */
.kasse-ticket-preis-addon { color: #146c43; }

/* Zusatzleistungen in der Karte: eine schlanke Zeile statt eines
   grossen Kastens - Schalter, Name, Preis, fertig. */
.kasse-ticket > .kasse-option { margin: 0; padding: 2px 12px; }
.kasse-ticket > .kasse-option:last-child { padding-bottom: 10px; }
.kasse-ticket > .kasse-addons {
	margin: 6px 12px 9px;
	padding: 3px 12px;
	border-radius: 10px;
}
.kasse-ticket .kasse-addon { padding-top: 5px; padding-bottom: 5px; }

/* Gebuchte Zusatzleistung als Lesezeile (kasse-option-addon, z.B.
   "+ Meet & greet") in der Ticketkarte: Luft zum Rand. Vorher klebte die
   Zeile mit 2px am Rahmen - besonders im Zusammenfassungs-Modal der
   Kasse (12.09.2026). Der Punkt rueckt mit nach innen. */
.kasse-ticket > .kasse-option-addon { padding: 5px 12px 5px 28px; }
/* Der Punkt haengt an der Zeilenmitte, nicht am oberen Rand: die Zeile
   hat oben und unten Luft, ein fester Abstand von oben liesse ihn ueber
   dem Text schweben (6px hoch, deshalb -3px). */
.kasse-ticket > .kasse-option-addon::before { left: 14px; top: 50%; margin-top: -3px; }
.kasse-ticket > :not(.kasse-option-addon) + .kasse-option-addon { padding-top: 8px; }
.kasse-ticket > .kasse-option-addon:last-child { padding-bottom: 10px; }

/* Beschriftete Platz-Spalten: Trennlinie oben, senkrechte Linien
   zwischen den Feldern - wie im Vorbild */
.kasse-ticket-felder {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #e2e8ef;
	/* Abschlusslinie unten, damit die Platz-/Optionsleiste von den
	   Zusatzleistungen darunter getrennt ist ... */
	border-bottom: 1px solid #e2e8ef;
	margin-top: 0;
}

/* ... ausser es folgt nichts mehr - dann laege die Linie direkt am
   Kartenrand und ergaebe eine Doppellinie. */
.kasse-ticket-felder:last-child { border-bottom: 0; }

.kasse-ticket > .kasse-option + .kasse-ticket-felder { margin-top: 0; }

.kasse-ticket-feld {
	flex: 1 1 auto;
	padding: 7px 12px;
	border-left: 1px solid #e2e8ef;
	min-width: 0;
}

.kasse-ticket-feld:first-child { border-left: 0; }

.kasse-ticket-feldname {
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #8a94a6;
	margin-bottom: 1px;
	white-space: nowrap;
}

.kasse-ticket-feldwert {
	font-size: .9rem;
	overflow-wrap: anywhere;
}

/* Beschreibung eines gewaehlten Eintrags, z.B. der Studierenden-Hinweis */
.kasse-ticket-feldextra {
	font-size: .72rem;
	color: #8a94a6;
	margin-top: 1px;
}

/* Reihe/Platz/Eingang sind kurz - diese Spalten nicht breit ziehen */
.kasse-ticket-feld-schmal { flex: 0 1 auto; min-width: 64px; }

.kasse-ticket-merkmal {
	padding: 6px 14px 10px;
	font-size: .8rem;
	color: #6b7280;
}

/* Kompakte Spielart fuer die schmale Checkout-Seitenleiste */
.kasse-tickets-kompakt { gap: 8px; margin-bottom: 12px; }
.kasse-tickets-kompakt .kasse-ticket-kopf { padding: 8px 10px; gap: 8px; }
.kasse-tickets-kompakt .kasse-ticket-zeichen { font-size: 1.1rem; }
.kasse-tickets-kompakt .kasse-ticket-name,
.kasse-tickets-kompakt .kasse-ticket-preis { font-size: .85rem; }
.kasse-tickets-kompakt .kasse-ticket-hinweis { display: none; }
.kasse-tickets-kompakt > .kasse-ticket > .kasse-option { padding: 0 10px 2px; font-size: .75rem; }
/* ... und dieselbe Luft in der kompakten Spielart (Seitenleiste, Modal) -
   die Regel darueber wuerde sie sonst wieder wegnehmen. */
.kasse-tickets-kompakt > .kasse-ticket > .kasse-option-addon { padding: 4px 10px 4px 24px; }
.kasse-tickets-kompakt > .kasse-ticket > .kasse-option-addon::before { left: 11px; top: 50%; margin-top: -3px; }
.kasse-tickets-kompakt > .kasse-ticket > :not(.kasse-option-addon) + .kasse-option-addon { padding-top: 7px; }
.kasse-tickets-kompakt > .kasse-ticket > .kasse-option-addon:last-child { padding-bottom: 9px; }
.kasse-tickets-kompakt .kasse-ticket-feld { padding: 6px 10px; }
.kasse-tickets-kompakt .kasse-ticket-feldname { font-size: .6rem; }
.kasse-tickets-kompakt .kasse-ticket-feldwert { font-size: .8rem; }
.kasse-tickets-kompakt .kasse-ticket-merkmal { padding: 4px 10px 8px; font-size: .72rem; }

/* Auf schmalen Schirmen ein festes Zweispalten-Raster: so fluchten die
   senkrechten Linien ueber alle Zeilen, und zwischen den Zeilen laeuft
   eine durchgehende waagerechte Linie. */
@media (max-width: 575px) {
	.kasse-ticket-felder {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.kasse-ticket-feld,
	.kasse-ticket-feld-schmal { border-left: 0; min-width: 0; }

	.kasse-ticket-feld:nth-child(even) { border-left: 1px solid #e2e8ef; }
	.kasse-ticket-feld:nth-child(n+3)  { border-top: 1px solid #e2e8ef; }
}

/* Bleibt bei ungerader Anzahl (z.B. Ebene + Bereich + Reihe + Platz +
   Typ) das letzte Feld allein, nimmt es die ganze Zeile ein - sonst
   endete seine Trennlinie auf halber Breite neben einer leeren Ecke.
   Wirkt nur im Raster; im einzeiligen Flex-Verlauf ohne Bedeutung. */
.kasse-ticket-feld:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Die schmale Checkout-Seitenleiste bekommt dasselbe Raster unabhaengig
   von der Schirmbreite - dort ist der Platz immer knapp und die Felder
   braechen sonst versetzt um. */
.kasse-tickets-kompakt .kasse-ticket-felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.kasse-tickets-kompakt .kasse-ticket-feld,
.kasse-tickets-kompakt .kasse-ticket-feld-schmal { border-left: 0; min-width: 0; }

.kasse-tickets-kompakt .kasse-ticket-feld:nth-child(even) { border-left: 1px solid #e2e8ef; }
.kasse-tickets-kompakt .kasse-ticket-feld:nth-child(n+3)  { border-top: 1px solid #e2e8ef; }

/* --- Summenblock unter den Ticketkarten ---------------------------------
   Bootstrap gibt jeder Tabellenzelle eine Unterkante - zusammen mit den
   Kartenraendern standen dadurch doppelte Linien uebereinander. Hier
   zeichnet nur noch der Block selbst: eine feine Linie oben, eine
   kraeftige vor der Endsumme. */
/* Keine eigene Linie oben: die Unterkante der letzten Ticketkarte
   schliesst die Liste bereits ab, zwei Linien uebereinander waeren ein
   Gestaltungsfehler. */
.kasse-summen { margin-top: 10px; border-top: 0; }

/* Je nach Bootstrap-Fassung bringt der Tabellen-Umschlag oder die erste
   Zeile eine eigene Oberkante mit - ueber dem Summenblock hat keine
   davon etwas verloren. */
.kasse-tickets + .table-responsive,
.kasse-tickets + .table-responsive > .table,
.kasse-summen > tfoot,
.kasse-summen > tfoot > tr:first-child > td {
	border-top: 0 !important;
}

.kasse-summen td,
.kasse-tabelle .kasse-summen td {
	border: 0;
	padding: .28rem 0 .28rem .5rem;
	background: transparent;
}

.kasse-summen tfoot,
.kasse-summen tr { border: 0; }

.kasse-tabelle .kasse-summen .kasse-gesamt td {
	border-top: 2px solid #e2e8ee;
	padding-top: .7rem;
}

/* Ticketanzahl neben der Warenkorb-Ueberschrift */
/* Wie viele Tickets im Korb liegen. Bis 2026-09-05 grau auf hellgrau
   (#5b6675 auf #eef2f7, Kontrast 4,8:1) - lesbar, aber als Zahl, auf die
   es ankommt, zu leise. Jetzt dunkle Schrift auf etwas kraeftigerem
   Grund; die Form bleibt zurueckhaltend, nur der Wert tritt hervor. */
.kasse-titel-anzahl {
	font-size: .78rem;
	font-weight: 700;
	color: #1f2937;
	background: #dde5ef;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* Optionen (Typ usw.): untereinander, jede als volle Zeile im Stil der
   Platz-Spalten. Direkt nach der Feldleiste uebernimmt deren
   Abschlusslinie die Trennung; ohne Leiste zeichnet der Block selbst
   eine Oberkante. */
.kasse-ticket-optionen { border-top: 1px solid #e2e8ef; border-bottom: 1px solid #e2e8ef; }
.kasse-ticket-felder + .kasse-ticket-optionen { border-top: 0; }
.kasse-ticket-optionen:last-child { border-bottom: 0; }

.kasse-ticket-optionen > .kasse-ticket-feld { border-left: 0; border-top: 1px solid #e2e8ef; }
.kasse-ticket-optionen > .kasse-ticket-feld:first-child { border-top: 0; }


/* --- Ticket-Optionen im Warenkorb --------------------------------------
   Hier waehlt der Kunde Typ, Essen und Beilagen - die Angaben, die spaeter
   auf dem Ticket stehen. Der Warenkorb uebernahm dafuer die .topt-Bausteine
   aus dem Sitzplan-Fenster unveraendert. Dort sitzen sie in einem eigenen
   Fenster mit eigenem Rand; in der Ticketkarte hatten sie keinen -
   Beschriftungen und Auswahlfelder klebten am Kartenrand, waehrend die
   Zusatzleistung darunter ordentlich eingerueckt war.

   Alles hier ist auf .kasse-optionen-waehlen eingegrenzt. Dieselben
   .topt-Klassen benutzt product_seat_template.php im Sitzplan; der bleibt
   unberuehrt.
   ---------------------------------------------------------------------- */

.kasse-optionen-waehlen {
	display: flex;
	flex-direction: column;
	gap: 14px;

	/* Weiss auf der getoenten Karte: hier wird gehandelt, nicht gelesen. */
	background: #fff;
	padding: 14px 12px;
	border-top: 1px solid #e2e8ef;
	border-bottom: 1px solid #e2e8ef;
}

.kasse-optionen-waehlen:last-child { border-bottom: 0; }

/* Der Abstand kommt aus dem gap - der eigene Rand der Bausteine wuerde
   ihn beim ersten Eintrag verdoppeln. */
.kasse-optionen-waehlen .topt { margin: 0; }

/* Beschriftung wie bei den Platzangaben darueber (EBENE, REIHE, PLATZ) -
   dieselbe Karte, dieselbe Sprache. */
.kasse-optionen-waehlen .topt-label {
	display: block;
	margin: 0 0 7px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #64748b;
}

.kasse-optionen-waehlen .topt-pflicht {
	margin-left: 3px;
	font-size: .85rem;
	line-height: 0;
	vertical-align: middle;
	color: #dc3545;
}

.kasse-optionen-waehlen .option-hint {
	margin: -3px 0 8px;
	font-size: .82rem;
	line-height: 1.45;
	color: #6b7280;
}

/* --- Auswahlzeilen ----------------------------------------------------- */

.kasse-optionen-waehlen .topt-wahlliste { gap: 8px; }

.kasse-optionen-waehlen .topt-wahl {
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border: 1px solid #e2e8ef;
	border-radius: 11px;
	background: #fff;
	font-size: .92rem;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.kasse-optionen-waehlen .topt-wahl:hover {
	border-color: #b9d3ff;
	background: #fbfdff;
}

/* Die getroffene Wahl traegt einen Ring statt nur einer Randfarbe: ein
   Pixel Rand geht auf dem Telefon unter.

   Bewusst in gedaempftem Blau. Volles #0d6efd sprang aus der Karte heraus -
   die getroffene Wahl ist eine Bestaetigung, kein Alarm. Der Ring in
   derselben weichen Farbe verdoppelt die Randstaerke, ohne laut zu werden;
   dass eine Zeile gewaehlt ist, sagt ohnehin schon der blaue Punkt im
   Auswahlfeld selbst (accent-color). */
.kasse-optionen-waehlen .topt-wahl:has(input:checked) {
	border-color: #d2e2f6;
	background: #f9fcff;
	box-shadow: inset 0 0 0 1px #d2e2f6;
}

.kasse-optionen-waehlen .topt-wahl input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.kasse-optionen-waehlen .topt-wahl-text { line-height: 1.35; }

.kasse-optionen-waehlen .topt-wahl-text .option-hint {
	margin: 2px 0 0;
	font-size: .78rem;
}

/* Der Aufpreis als eigenes Feld - gleiche Ziffernbreite, damit die Betraege
   untereinander stehen. */
.kasse-optionen-waehlen .topt-wahl-preis {
	padding: 2px 8px;
	border-radius: 7px;
	background: #eef2f7;
	color: #374151;
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Das Preisplaettchen wechselt bei getroffener Wahl bewusst NICHT die
   Farbe. Der Aufpreis ist derselbe, ob angehakt oder nicht - ihn beim
   Anhaken einzufaerben hiess, zweimal dasselbe zu sagen und dabei den
   lautesten Punkt der Karte auf eine Nebensache zu setzen. Dass die Zeile
   gewaehlt ist, sagen ihr Rand und der Punkt im Auswahlfeld. */

/* --- Eingabefelder ------------------------------------------------------ */

.kasse-optionen-waehlen .form-control,
.kasse-optionen-waehlen .form-select {
	padding: 10px 13px;
	border: 1px solid #e2e8ef;
	border-radius: 11px;
	font-size: .92rem;
	background-color: #fff;
}

.kasse-optionen-waehlen .form-control:focus,
.kasse-optionen-waehlen .form-select:focus {
	border-color: #0d6efd;
	box-shadow: 0 0 0 3px rgba(13, 110, 253, .13);
}

/* --- Offene Pflichtangabe ----------------------------------------------- */

.kasse-optionen-waehlen .topt.is-fehlt .topt-label { color: #dc3545; }

.kasse-optionen-waehlen .topt.is-fehlt .form-control,
.kasse-optionen-waehlen .topt.is-fehlt .form-select {
	border-color: #dc3545;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .11);
}

.kasse-optionen-waehlen .topt.is-fehlt .topt-wahl { border-color: #f0b6bc; }

@media (min-width: 576px) {
	.kasse-optionen-waehlen { padding: 16px 14px; }
}

/* --- iOS: echtes Fenster-Scrollen wiederherstellen -----------------------
   base.css setzt body{overflow-x:hidden}. Damit wird overflow-y zu
   'auto' und der BODY selbst zum Scroll-Container - auf iOS zerbricht
   daran position:fixed: die Kassen-Leiste wird beim Rollen erst
   nachtraeglich umgesetzt (Flattern), und Tipper treffen die alte
   Position (mehrfach klicken noetig). 'clip' schneidet seitlichen
   Ueberstand genauso ab, erzeugt aber KEINEN Scroll-Container - das
   Fenster scrollt wieder selbst. Aeltere Browser ohne clip behalten
   ueber die erste Zeile das bisherige Verhalten. */
body {
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

/* Aufklapp-Zeile fuer die Code-Eingabe - dezent zwischen den Karten */
.kasse-code-aufklapp {
	text-align: center;
	margin: 0 0 18px;
}

/* Point of Sale als Hauptknopf des Verkaeufers: gruen statt blau,
   damit er nicht mit der normalen Kasse verwechselt wird. */
.kasse-haupt-pos {
	background: #198754;
	box-shadow: 0 4px 14px rgba(25, 135, 84, .3);
}

@media (hover: hover) {
	.kasse-haupt-pos:hover {
		background: #157347;
		box-shadow: 0 6px 18px rgba(25, 135, 84, .38);
	}
}

/* Titelzeile auf dem Smartphone: alles bleibt in EINER Zeile.
   Ueberschrift und Zeichen etwas kleiner, die Anzahl-Pille kompakt,
   und "Warenkorb leeren" schrumpft auf sein Zeichen (der volle Text
   steht im title-Attribut) - vorher brach alles wild um. */
@media (max-width: 575.98px) {
	.kasse-titel {
		gap: 8px;
		font-size: 1.02rem;
		flex-wrap: nowrap;
		white-space: nowrap;
		min-width: 0;
	}

	.kasse-titel > .bi {
		width: 30px;
		height: 30px;
		font-size: .95rem;
	}

	.kasse-titel-anzahl {
		font-size: .7rem;
		padding: 2px 8px;
	}

	/* In der engen Titelzeile hat der Leeren-Link keinen Platz -
	   er steht dort unten am Kartenende in voller Laenge. */
	.kasse-titel .kasse-leeren { display: none; }
}

/* "Warenkorb leeren" ganz oben unter der Titelzeile - nur auf schmalen
   Schirmen, dort ersetzt es den Link in der Titelzeile und darf voll
   ausschreiben. Rechtsbuendig, wie am Desktop oben rechts. */
.kasse-leeren-mobil { display: none; }

@media (max-width: 575.98px) {
	.kasse-leeren-mobil {
		display: block;
		text-align: right;
		margin: -8px 0 12px;
	}
}

/* --- Kompakte Seitenleiste (Runde 2026-08-30-seitenleiste-kompakt) -------
   Die Bestelluebersicht rechts im Checkout zeigt nur noch Anzahl,
   Zwischensumme, Gebuehren und Endsumme (summary-kurz.php); alles
   Weitere steckt im Details-Modal. Beschriftung und Betrag stehen als
   Flex-Paar in EINER Zeile - lange Namen werden mit Auslassungspunkten
   gekuerzt statt umzubrechen. */

@media (min-width: 992px) {
	/* Die grosse Kartenpolsterung (30/34px) frisst in der schmalen
	   Spalte nur Platz. */
	.kasse-seitenleiste { padding: 20px 22px; }
}

.kasse-kurz-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e2e8ee;
}

.kasse-kurz-anzahl { font-weight: 700; }

/* Der Details-Ausloeser: ein ruhiger Textknopf, kein zweiter Hauptknopf */
.kasse-kurz-details {
	background: none;
	border: 0;
	padding: 0;
	font-size: .8rem;
	font-weight: 600;
	color: #0d6efd;
	cursor: pointer;
	white-space: nowrap;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.kasse-kurz-details:hover { text-decoration: underline; }

.kasse-kurz-zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
	font-size: .88rem;
}

.kasse-kurz-name {
	color: #5b6572;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kasse-kurz-wert { font-weight: 600; white-space: nowrap; }

/* MwSt.-Zeile (falls eingeblendet) gedimmt wie in der grossen Tabelle */
.kasse-kurz-nebenzeile .kasse-kurz-name,
.kasse-kurz-nebenzeile .kasse-kurz-wert {
	color: #a3a3a3;
	font-weight: 400;
}

.kasse-kurz-gesamt {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 2px solid #e2e8ee;
	font-size: .98rem;
}

/* Folgt die Endsumme direkt auf den Kopf (Kurzfassung ohne Zwischenzeilen:
   nur Anzahl + Endsumme), truege sie ihre eigene Trennlinie direkt unter
   die des Kopfes - eine der beiden reicht. */
.kasse-kurz-kopf + .kasse-kurz-gesamt {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.kasse-kurz-gesamt .kasse-kurz-name,
.kasse-kurz-gesamt .kasse-kurz-wert {
	color: inherit;
	font-weight: 700;
}

.kasse-kurz-mwst {
	text-align: right;
	font-size: .68rem;
	color: #98a2b0;
	line-height: 1.1;
}

/* Smartphone: die Uebersichtskarte steht im Fluss UNTER dem Formular,
   die Aktionsleiste fest am unteren Rand. Die Auftritts-Animation
   (transform/opacity) gibt der Karte voruebergehend einen eigenen
   Stapelkontext - da sie im DOM nach der Formularkarte kommt, schob
   sie sich damit UEBER deren Leiste (deren z-index 1040 ist im
   Kontext der Formularkarte gefangen). Ohne Animation bleibt die
   Karte immer unter der Leiste. */
@media (max-width: 767.98px) {
	.kasse-seitenleiste.kasse-auftritt { animation: none; }
}

/* Kopf des Details-Modals: dezent statt grosser Ueberschrift - kleine
   gedeckte Kapitaelchen-Zeile, wenig Hoehe. */
.kasse-modal-kopf {
	padding: 14px 16px;
	border-bottom: 1px solid #eef1f5;
}

.kasse-modal-kopf .modal-title {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a94a0;
}

/* Schliessen unuebersehbar: dunkler Kreis mit weissem X (Bootstraps
   X-Pfad als eigenes Hintergrundbild in Weiss - das mitgelieferte ist
   dunkel und liesse sich auf dunklem Grund nicht erkennen), volle
   Deckkraft, beim Ueberfahren rot. */
.kasse-modal-kopf .btn-close {
	font-size: .75rem;
	padding: 9px;
	background: #1a2733 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/.85em auto no-repeat;
	border-radius: 50%;
	opacity: 1;
	box-shadow: 0 1px 4px rgba(16, 24, 40, .25);
	transition: background-color .15s;
}

.kasse-modal-kopf .btn-close:hover,
.kasse-modal-kopf .btn-close:focus {
	background-color: #dc3545;
	opacity: 1;
}

/* --- Zahlung wird verarbeitet (Runde 2026-08-31-zahlung-verarbeitung-box)
   Getoente Karte im Kassen-Design statt Bootstrap-alert: links ein
   weisser Kreis-Chip mit laufendem Kreisel, daneben der Hinweis.
   Dauert es laenger, toent -warnung den Kasten gelb - nur der Text
   wird getauscht, der Kreisel laeuft weiter. */

.kasse-verarbeitung {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding: 14px 16px;
	background: #eef5ff;
	border: 1px solid #d8e6fb;
	border-radius: 12px;
	color: #1f2937;
	font-size: .95rem;
	line-height: 1.5;
}

.kasse-verarbeitung-kreisel {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: #0d6efd;
	box-shadow: 0 1px 4px rgba(13, 110, 253, .2);
}

.kasse-verarbeitung-warnung {
	background: #fff9ec;
	border-color: #f0e2b6;
}

.kasse-verarbeitung-warnung .kasse-verarbeitung-kreisel {
	color: #997404;
	box-shadow: 0 1px 4px rgba(153, 116, 4, .2);
}

/* --- Bestellbestaetigung (Runde 2026-08-31-bestellbestaetigung) ----------
   Der Geschafft-Moment: gruener Haken springt auf, darunter Glueckwunsch
   und die Bestellnummer als ruhiger Chip. E-Tickets als Kacheln. */

.kasse-fertig {
	text-align: center;
	padding-top: 34px;
	padding-bottom: 30px;
}

.kasse-fertig-haken {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2eb26a, #198754);
	color: #fff;
	font-size: 2.1rem;
	box-shadow: 0 10px 26px rgba(25, 135, 84, .35);
	animation: kasse-fertig-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes kasse-fertig-pop {
	from { transform: scale(.3); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.kasse-fertig h2 {
	margin: 0 0 6px;
	font-size: 1.45rem;
	font-weight: 800;
}

.kasse-fertig-unter {
	margin: 0 0 20px;
	color: #5b6572;
}

.kasse-fertig-nummer {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 30px;
	background: #f2f6fa;
	border-radius: 12px;
}

.kasse-fertig-nummer small {
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a94a6;
}

.kasse-fertig-nummer strong {
	font-family: monospace;
	font-size: 1.15rem;
	letter-spacing: 1px;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.kasse-fertig-haken { animation: none; }
}

/* Weiches Rollen fuer Anker-Spruenge (z.B. "Tickets herunterladen" ->
   #etickets); scroll-margin haelt Abstand zum oberen Rand. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

#etickets { scroll-margin-top: 16px; }

/* E-Ticket-Kacheln zum Herunterladen */
.kasse-eticket-kachel {
	height: 100%;
	padding: 20px 14px 16px;
	background: #f7f9fb;
	border: 1px solid #e7ebf0;
	border-radius: 12px;
	text-align: center;
	transition: transform .15s, box-shadow .15s;
}

.kasse-eticket-kachel:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
}

.kasse-eticket-kachel img {
	width: 56px;
	margin-bottom: 10px;
}

.kasse-eticket-kachel h5 {
	margin: 0 0 12px;
	font-size: .95rem;
	font-weight: 700;
}

.kasse-eticket-kachel .btneticket {
	width: 100%;
	border-radius: 10px;
	font-weight: 600;
}

/* Kompakte Spielart der Summen-Tabelle (Bestellzusammenfassung):
   engere Zeilen und eine Stufe kleinere Schrift, die Endsumme bleibt
   abgesetzt. */
.kasse-tabelle.kasse-tabelle-kompakt tbody th[scope="row"],
.kasse-tabelle.kasse-tabelle-kompakt tbody td {
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-size: .88rem;
}

.kasse-tabelle.kasse-tabelle-kompakt tfoot td {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: .88rem;
}

.kasse-tabelle.kasse-tabelle-kompakt .kasse-gesamt td {
	padding-top: .6rem;
	font-size: .98rem;
}

/* Sektions-Titel in der Bestellzusammenfassung: klein und gedeckt wie
   die Feldnamen der Ticketkarten - vorher grosse blaue h8-Zeilen. */
.kasse-zsf-titel {
	margin-bottom: 4px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a94a6;
}

/* Auf-/Zuklapp-Kopf der Bestellzusammenfassung */
.kasse-zusammenfassung-kopf {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f2937;
	cursor: pointer;
	text-align: left;
}

/* Icon-Chip im Kopf - gleiche Bauart wie die Kartentitel (kasse-titel) */
.kasse-zusammenfassung-kopf .kasse-zsf-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(13, 110, 253, .09);
	color: #0d6efd;
	font-size: 1.15rem;
}

/* Endsumme rechts im Kopf - so sagt die Zeile auch zugeklappt etwas */
.kasse-zsf-kopf-summe {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

.kasse-zusammenfassung-kopf .kasse-zusammenfassung-pfeil {
	color: #8a94a6;
	transition: transform .2s;
}

/* Info-Kacheln: Konto, Adressen, Versand, Zahlung als ruhiges Raster */
.kasse-zsf-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.kasse-zsf-kachel {
	min-width: 0;
	padding: 12px 14px;
	background: #f7f9fb;
	border: 1px solid #e7ebf0;
	border-radius: 12px;
	font-size: .9rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.kasse-zusammenfassung-kopf[aria-expanded="true"] .kasse-zusammenfassung-pfeil {
	transform: rotate(180deg);
}

/* Sammelzeile "Gebuehren" (abbreviate-fees): kleiner Pfeil vor dem Wort,
   der beim Aufklappen nach unten dreht - dasselbe Muster wie der Pfeil am
   Kopf der Bestellzusammenfassung (kasse-zusammenfassung-pfeil). Das Wort
   selbst ist der Schalter (Bootstrap collapse, aria-expanded). */
.kasse-gebuehr-toggle .kasse-gebuehr-pfeil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05em;
	height: 1.05em;
	margin-right: .15em;
	border: 1px solid #b7c0cc;
	border-radius: 50%;
	font-size: .8em;
	line-height: 1;
	color: #8a94a6;
	/* Kreis auf die optische Mitte der Textzeile: middle sitzt bei
	   Grossbuchstaben etwas zu tief, deshalb ein Hauch nach oben. */
	vertical-align: middle;
	position: relative;
	top: -.08em;
	transition: transform .2s;
}

/* Das Chevron-Zeichen selbst noch kleiner als sein Kreis */
.kasse-gebuehr-toggle .kasse-gebuehr-pfeil::before {
	font-size: .6em;
}

.kasse-gebuehr-toggle[aria-expanded="true"] .kasse-gebuehr-pfeil {
	transform: rotate(90deg);
}

/* Die Aufteilung unter "Gebuehren" (verschachtelte Tabelle): keine
   Trennlinien und keine Zeilenluft aus den Tabellenregeln der Ticketkarte
   (.kasse-tabelle) - im Details-Modal bekam sie sonst eine Oberkante und
   Linien zwischen den Gebuehren, als waeren es eigene Posten. Die
   Selektoren sind bewusst so lang wie ".kasse-tabelle tfoot tr:first-child
   td": die Regel trifft die erste Zeile der verschachtelten Tabelle mit,
   weil sie im tfoot der aeusseren liegt, und muss hier unterliegen. */
.kasse-tabelle .kasse-gebuehr-aufteilung,
.kasse-gebuehr-aufteilung {
	border-top: 0;
	table-layout: auto;
}

/* Je Gebuehr eine feine Linie darunter - so liest sich der Block als
   Liste; nur die Oberkante der Tabelle bleibt weg, die Zeile "Gebuehren"
   darueber ist Ueberschrift genug. */
.kasse-tabelle .kasse-gebuehr-aufteilung tbody tr,
.kasse-gebuehr-aufteilung tbody tr {
	border: 0;
	border-bottom: 1px solid #eef1f5;
}

.kasse-tabelle .kasse-gebuehr-aufteilung tbody tr:first-child td,
.kasse-tabelle .kasse-gebuehr-aufteilung tbody td,
.kasse-gebuehr-aufteilung tbody td {
	border: 0;
	padding-top: .3rem;
	padding-bottom: .3rem;
	vertical-align: baseline;
	font-size: .92em;
	/* Schwaecher als die Summenzeilen - dasselbe Grau wie "inkl. MwSt.";
	   direkt an der Zelle, weil Zellregeln der Karte die vererbte
	   Farbe der Tabelle (text-body-tertiary) sonst ueberdecken. */
	color: #8a94a6;
}

/* i-Symbol neben einer Gebuehr (gebuehr_info): klein, grau, mit Zeiger -
   der Text kommt als Bootstrap-Tooltip. */
.kasse-gebuehr-info {
	font-size: .85em;
	color: #8a94a6;
	cursor: help;
	vertical-align: baseline;
}

/* Point-of-Sale-Formular: Schalter mit erklaerender Zeile darunter */
.kasse-pos-schalter { margin-bottom: 16px; }
.kasse-pos-schalter .form-check-input { cursor: pointer; }
.kasse-pos-schalter .form-check-label { font-weight: 600; cursor: pointer; }

.kasse-pos-hinweis {
	font-size: .8rem;
	color: #6b7280;
	margin-top: 2px;
}

/* --- Art der Bestellung (normal / Gast / Ehrengast) ---------------------
   Dieselben Wahlzeilen wie die Ticketoptionen im Shop (topt-wahlliste,
   topt-wahl aus shop-home-v2.css) - hier nur etwas grosszuegiger und mit
   einem Symbol je Zeile, damit die drei Moeglichkeiten am Tresen auf einen
   Blick auseinanderzuhalten sind. Die getroffene Wahl traegt denselben
   gedaempften blauen Ring wie die Optionen (siehe dort: Bestaetigung,
   kein Alarm). */

.kasse-gastwahl { margin-bottom: 4px; }

.kasse-gastwahl-titel {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 11px;
	font-size: .95rem;
	font-weight: 700;
}

.kasse-gastwahl-titel > .bi {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: rgba(13, 110, 253, .09);
	color: #0d6efd;
	font-size: .95rem;
}

.kasse-gastwahl .topt-wahlliste { gap: 8px; }

.kasse-gastwahl .topt-wahl {
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border-color: #e2e8ef;
	border-radius: 12px;
	font-size: .92rem;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.kasse-gastwahl .topt-wahl:hover {
	border-color: #b9d3ff;
	background: #fbfdff;
}

/* Die getroffene Wahl deutlich hervorheben - hier bewusst kraeftiger als bei
   den Ticketoptionen weiter oben: am Tresen entscheidet dieser Schalter, ob
   ein Ticket mit Preis, ohne Preis oder als Ehrengast herausgeht. Das muss
   auch im Vorbeigehen und auf einem hellen Bildschirm zu sehen sein.

   Der Rahmen ist an allen vier Seiten gleich stark: ein blauer Rand,
   verdoppelt durch einen Innenring. Ein Streifen nur an einer Seite sieht
   daneben wie ein Fehler aus. */
.kasse-gastwahl .topt-wahl:has(input:checked) {
	border-color: #0d6efd;
	background: rgba(13, 110, 253, .07);
	box-shadow: inset 0 0 0 1px #0d6efd, 0 4px 14px rgba(13, 110, 253, .16);
}

.kasse-gastwahl .topt-wahl:has(input:checked) .kasse-gastwahl-name {
	color: #0a58ca;
}

/* Auf der blauen Flaeche kaeme der graue Hinweis nur noch auf 4,3:1 - dort
   also eine Stufe dunkler (9,3:1). */
.kasse-gastwahl .topt-wahl:has(input:checked) .option-hint {
	color: #374151;
}

/* Tastaturbedienung: der Ring gehoert um die ganze Zeile, nicht um das
   kleine Auswahlfeld darin. */
.kasse-gastwahl .topt-wahl:has(input:focus-visible) {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

.kasse-gastwahl .topt-wahl input { margin: 0; }

.kasse-gastwahl-symbol {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #f1f4f8;
	color: #6b7280;
	font-size: 1rem;
	transition: background-color .15s ease, color .15s ease;
}

.kasse-gastwahl .topt-wahl:has(input:checked) .kasse-gastwahl-symbol {
	background: #0d6efd;
	color: #fff;
}

.kasse-gastwahl-name {
	display: block;
	font-weight: 600;
}

/* ==========================================================================
   Mein Konto (Runde 2026-09-01-mein-konto)
   ========================================================================== */

/* Status-Pillen im Bestellverlauf */
.kasse-pille {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	background: #eef1f4;
	color: #495057;
}
.kasse-pille-gruen { background: #e2f4e8; color: #198754; }
.kasse-pille-rot   { background: #fbe9eb; color: #c82333; }
.kasse-pille-gelb  { background: #fff3cd; color: #8a6d1a; }
.kasse-pille-blau  { background: #e7f1ff; color: #0d6efd; }

.kasse-ticketzahl { font-size: .85rem; font-weight: 600; color: #343a40; white-space: nowrap; }
.kasse-ticketzahl .bi { color: #0d6efd; margin-right: 2px; }

/* Adresskarten */
.kasse-adresse {
	border: 1px solid #e6ecf2;
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
}
.kasse-adresse + .kasse-adresse { margin-top: 14px; }
.kasse-adresse-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kasse-adresse-text { font-size: .9rem; line-height: 1.55; color: #343a40; }
.kasse-adresse-aktionen { display: flex; gap: 6px; flex-shrink: 0; }
.kasse-adresse-standard {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e3e9ef;
	font-size: .82rem;
	color: #495057;
}

/* Kleine runde Icon-Knoepfe (bearbeiten/loeschen) */
.kasse-icon-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid #dee5ec;
	background: #f7fafc;
	color: #495057;
	transition: background .15s ease, color .15s ease;
}
.kasse-icon-knopf:hover { background: #e7f1ff; color: #0d6efd; }
.kasse-icon-knopf-rot:hover { background: #fbe9eb; color: #c82333; }

/* ---------------------------------------------------------------------------
   Besuchte Links auf Kassen-Knoepfen (2026-09-02)

   base.css faerbt a:visited purpur und unterstreicht - fuer Knoepfe, die
   als <a> gebaut sind (z.B. "Tickets herunterladen" auf der
   Bestellbestaetigung, der Zurueck-Pfeil der Kassenleiste), gilt das
   nicht: sie behalten ihre Farbe.
--------------------------------------------------------------------------- */
a.kasse-haupt:visited { color: #fff; text-decoration: none; }

a.kasse-zurueck:visited { color: #5b6572; text-decoration: none; }
a.kasse-zurueck:visited:hover { color: #1f2937; }

a.kasse-nebenknopf:visited { color: #0d6efd; text-decoration: none; }


/* Anmelde-Modal: seit 28.09.2026 in assets/css/anmeldung.css (Praefix anm-),
   gemeinsam mit /login und /registrieren der Base-App. */