/* Rahmen des Buchungsfensters.
   Nur, was der Saalplan ohne Theme drumherum braucht — der Plan selbst kommt
   unveraendert aus sitzplan.css. Bewusst schlank gehalten: Diese Seite ist der
   Ort, an dem beim Vorverkaufsstart alle gleichzeitig ankommen. */

:root {
	--vsp-f-grund: #f7f7f5;
	--vsp-f-flaeche: #fff;
	--vsp-f-linie: #e2e2de;
	--vsp-f-text: #1f2229;
	--vsp-f-leise: #6b6e76;
}

* { box-sizing: border-box; }

body.vsp-fenster {
	margin: 0;
	background: var(--vsp-f-grund);
	color: var(--vsp-f-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	/* Platz fuer die feste Leiste am unteren Rand auf schmalen Geraeten. */
	padding-bottom: 96px;
}

.vsp-fkopf {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 20px;
	background: var(--vsp-f-flaeche);
	border-bottom: 1px solid var(--vsp-f-linie);
	position: sticky;
	top: 0;
	z-index: 20;
}

.vsp-fzurueck {
	color: var(--vsp-f-leise);
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
	padding: 6px 4px;
}

.vsp-fzurueck:hover,
.vsp-fzurueck:focus-visible { color: var(--vsp-f-text); text-decoration: underline; }

.vsp-ftitel { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vsp-ftitel b { font-size: 17px; }
.vsp-ftitel span { font-size: 14px; color: var(--vsp-f-leise); }

.vsp-finhalt {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 40px;
}

@media (max-width: 640px) {
	.vsp-fkopf { padding: 10px 14px; gap: 12px; }
	.vsp-ftitel b { font-size: 16px; }
	.vsp-finhalt { padding: 16px 14px 32px; }
}

/* Wer gerade eingeloest hat — steht im Kopf, damit auf dem Handy sichtbar
   bleibt, unter wessen Code gebucht wird. */
.vsp-fwer {
	margin-left: auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eef0f4;
	color: var(--vsp-f-leise);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40%;
}

/* Die beiden schmalen Seiten: Countdown und Codeeingabe. */
.vsp-fschmal { max-width: 560px; }

.vsp-tor {
	background: var(--vsp-f-flaeche);
	border: 1px solid var(--vsp-f-linie);
	border-radius: 8px;
	padding: 32px 28px;
	text-align: center;
}

.vsp-tor-vor {
	margin: 0;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vsp-f-leise);
}

.vsp-tor-wann {
	margin: 6px 0 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.vsp-uhr {
	margin: 18px 0 0;
	font-size: 38px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.vsp-tor-hinweis {
	margin: 18px auto 0;
	max-width: 42ch;
	color: var(--vsp-f-leise);
	font-size: 15px;
}

.vsp-tor-fuss {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--vsp-f-leise);
}

.vsp-fehler {
	margin: 18px 0 0;
	padding: 10px 12px;
	border-radius: 4px;
	border-left: 3px solid #b3261e;
	background: #fdeceb;
	color: #7a1c17;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

/* Wartemeldung — der Code stimmt, seine Phase laeuft nur noch nicht.
   Bewusst nicht in der Fehlerfarbe: gleiche Form wie `.vsp-fehler`, damit sie
   an derselben Stelle sitzt, aber im ruhigen Ton. */
.vsp-warten {
	margin: 18px 0 0;
	padding: 10px 12px;
	border-radius: 4px;
	border-left: 3px solid #3e4c7a;
	background: #eef1f8;
	color: #2a3454;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

.vsp-codeform {
	margin: 22px 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.vsp-codeform label {
	font-size: 13px;
	font-weight: 600;
	color: var(--vsp-f-leise);
}

.vsp-codeform input {
	width: 100%;
	padding: 14px 16px;
	font-size: 24px;
	font-weight: 700;
	/* Ziffern und Buchstaben gleich breit — sonst wandert der Bindestrich beim
	   Tippen hin und her. */
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	border: 2px solid var(--vsp-f-linie);
	border-radius: 6px;
	background: #fff;
	color: var(--vsp-f-text);
}

.vsp-codeform input:focus-visible {
	outline: none;
	border-color: #3e4c7a;
}

.vsp-codeform button {
	padding: 13px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	background: #3e4c7a;
	color: #fff;
}

.vsp-codeform button:hover { filter: brightness(1.12); }

@media (max-width: 640px) {
	.vsp-tor { padding: 26px 18px; }
	.vsp-uhr { font-size: 32px; }
	.vsp-fwer { display: none; }
}

/* Agenturnennung am Fuss des Buchungsfensters.
   Klein und gedaempft: Sie soll da sein, nicht ablenken — wer hier steht, will
   Karten kaufen. Farbe aus dem Fenster statt aus dem Agenturbild, das Logo
   leicht zurueckgenommen, damit es neben dem Vereinsnamen nicht lauter ist als
   der. Logo und Text sind EIN Verweis; die Unterstreichung liegt deshalb auf
   dem Text, nicht auf dem Bild. */
.vsp-agentur {
	margin: 36px 0 0;
	padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--vsp-f-linie);
	text-align: center;
}

.vsp-agentur a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--vsp-f-leise);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
}

.vsp-agentur img {
	width: 80px;
	height: auto;
	opacity: .7;
}

.vsp-agentur a:hover span,
.vsp-agentur a:focus-visible span {
	text-decoration: underline;
}

.vsp-agentur a:hover img,
.vsp-agentur a:focus-visible img {
	opacity: 1;
}

/* Freikarten der Vereine im offenen Verkauf. Zurueckhaltend ueber dem Plan:
   Die meisten Besucher haben keinen Code und sollen nicht darueber stolpern. */
.vsp-freikarten {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--vsp-f-flaeche);
	border: 1px solid var(--vsp-f-linie);
	border-left: 3px solid #3e4c7a;
	border-radius: 6px;
	font-size: 15px;
}

.vsp-freikarten summary {
	cursor: pointer;
	font-weight: 600;
	color: #3e4c7a;
}

.vsp-fk-kopf { margin: 0; font-weight: 700; }

.vsp-fk-text { margin: 6px 0 0; font-size: 14px; color: var(--vsp-f-leise); }

.vsp-fk-form { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }

.vsp-fk-form label { font-size: 13px; font-weight: 600; color: var(--vsp-f-leise); }

.vsp-fk-zeile { display: flex; gap: 8px; flex-wrap: wrap; }

.vsp-fk-zeile input {
	flex: 1 1 12ch;
	min-width: 0;
	padding: 10px 12px;
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 2px solid var(--vsp-f-linie);
	border-radius: 6px;
	background: #fff;
	color: var(--vsp-f-text);
}

.vsp-fk-zeile input:focus-visible { outline: none; border-color: #3e4c7a; }

.vsp-fk-zeile button {
	padding: 10px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	background: #3e4c7a;
	color: #fff;
}

.vsp-fk-zeile button:hover { filter: brightness(1.12); }

.vsp-freikarten .vsp-fehler { margin-top: 12px; }