/* Vereins-Sitzplan — Ausgabe im Frontend.
   Alle Klassen mit vsp- vorangestellt, damit nichts mit dem Theme kollidiert. */

.vsp {
	--vsp-linie: #d9d9d6;
	--vsp-linie-zart: #efefec;
	--vsp-text: #1f2229;
	--vsp-leise: #6b6e76;
	--vsp-akzent: #3e4c7a;
	--vsp-knopf-text: #fff;
	--vsp-vergeben: #c4c4c0;
	--vsp-gesperrt: #d8d8d4;
	--vsp-warnung: #9a2f26;
	--vsp-warnung-grund: #fbeceb;
	--vsp-grund: #fff;
	--vsp-buehne-grund: #3e4c7a; --vsp-buehne-text: #fff;
	--vsp-technik-grund: #8d9098; --vsp-technik-text: #fff;

	color: var(--vsp-text);
	container-type: inline-size;
}

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

.vsp-spalten {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.vsp-plan {
	flex: 1 1 520px;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 6px;
}

.vsp-svg {
	width: 100%;
	height: auto;
	min-width: 480px;
	display: block;
}

.vsp-seite {
	flex: 0 0 240px;
	max-width: 100%;
}

.vsp-titel {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vsp-leise);
	font-weight: 600;
}

/* Legende */

.vsp-legende {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vsp-legende li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 15px;
}

.vsp-punkt {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	flex: 0 0 auto;
	border: 1px solid rgba(0, 0, 0, .22);
}

.vsp-punkt-vergeben { background: var(--vsp-vergeben); }
.vsp-kat-name { flex: 1 1 auto; }

.vsp-kat-preis {
	font-variant-numeric: tabular-nums;
	color: var(--vsp-leise);
}

.vsp-legende-rest { color: var(--vsp-leise); }

/* Auswahl */

.vsp-auswahl {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--vsp-linie);
}

.vsp-zaehler {
	margin: 0 0 10px;
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.vsp-zaehler b {
	font-size: 28px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--vsp-akzent);
}

.vsp-zaehler span {
	color: var(--vsp-leise);
	font-size: 14px;
}

.vsp-gewaehlt {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 210px;
	overflow: auto;
	font-size: 14px;
}

.vsp-gewaehlt li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px solid var(--vsp-linie-zart);
	font-variant-numeric: tabular-nums;
}

.vsp-gewaehlt li:last-child { border-bottom: 0; }
.vsp-gewaehlt .vsp-leer { color: var(--vsp-leise); border-bottom: 0; }

.vsp-weg {
	background: none;
	border: 0;
	padding: 2px 5px;
	cursor: pointer;
	color: var(--vsp-leise);
	font-size: 17px;
	line-height: 1;
	border-radius: 3px;
}

.vsp-weg:hover,
.vsp-weg:focus-visible { color: var(--vsp-warnung); background: var(--vsp-warnung-grund); }

.vsp-summe {
	margin: 12px 0 0;
	font-variant-numeric: tabular-nums;
}

.vsp-meldung {
	margin: 12px 0 0;
	padding: 9px 11px;
	font-size: 14px;
	line-height: 1.45;
	border-radius: 3px;
	background: var(--vsp-warnung-grund);
	border-left: 3px solid var(--vsp-warnung);
	color: var(--vsp-warnung);
}

.vsp-knopf {
	margin-top: 14px;
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: 4px;
	background: var(--vsp-akzent);
	color: var(--vsp-knopf-text);
}

.vsp-knopf[disabled] { opacity: .45; cursor: not-allowed; }
.vsp-knopf:not([disabled]):hover { filter: brightness(1.12); }

.vsp-frist {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--vsp-leise);
}

.vsp.vsp-laeuft { opacity: .6; pointer-events: none; }

/* Plan */

.vsp-tisch-rahmen { fill: none; stroke: var(--vsp-linie); stroke-width: 1; }

.vsp-tisch-label {
	font-size: 10px;
	fill: var(--vsp-leise);
	text-anchor: middle;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

.vsp-tisch.vsp-gesperrt .vsp-tisch-rahmen { stroke-dasharray: 3 2; }
.vsp-aufbau { fill: var(--vsp-technik-grund); }
.vsp-aufbau.vsp-buehne { fill: var(--vsp-buehne-grund); }

.vsp-aufbau-text {
	font-size: 11px;
	fill: var(--vsp-technik-text);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.vsp-platz {
	stroke: rgba(0, 0, 0, .3);
	stroke-width: .6;
	cursor: pointer;
}

.vsp-platz:hover { stroke: var(--vsp-text); stroke-width: 1.8; }

.vsp-platz.vsp-meins {
	fill: var(--vsp-akzent);
	stroke: var(--vsp-text);
	stroke-width: 1.8;
}

.vsp-platz.vsp-vergeben,
.vsp-platz.vsp-gesperrt { cursor: not-allowed; }
.vsp-platz.vsp-vergeben { fill: var(--vsp-vergeben); }
.vsp-platz.vsp-gesperrt { fill: var(--vsp-gesperrt); }

.vsp-platz.vsp-vergeben:hover,
.vsp-platz.vsp-gesperrt:hover { stroke: rgba(0, 0, 0, .3); stroke-width: .6; }

@media (prefers-color-scheme: dark) {
	.vsp {
		--vsp-linie: #3a3e46;
		--vsp-linie-zart: #2b2e35;
		--vsp-text: #e9e9e5;
		--vsp-leise: #9a9da5;
		--vsp-akzent: #8ea0d8;
		--vsp-knopf-text: #14161b;
		--vsp-vergeben: #4c505a;
		--vsp-gesperrt: #3f434b;
		--vsp-warnung: #e8938a;
		--vsp-warnung-grund: #33201d;
		--vsp-grund: #1b1e24;
		--vsp-buehne-grund: #7d8fc9; --vsp-buehne-text: #14161b;
		--vsp-technik-grund: #7e838c; --vsp-technik-text: #14161b;
	}
}

@container (max-width: 720px) {
	.vsp-seite { flex-basis: 100%; }
}

@media (max-width: 720px) {
	.vsp-seite { flex-basis: 100%; }
}

/* ------------------------------------------------------------------
   Schmale Bildschirme: erst Tisch, dann Platz.

   Ein Plan mit über 500 Sitzen ergäbe auf dem Handy Trefferflächen von
   wenigen Pixeln. Deshalb dort zwei Schritte statt Lupe und Schieben.
   ------------------------------------------------------------------ */

.vsp-mobil { display: none; flex: 1 1 100%; min-width: 0; }

.vsp-tischliste {
	display: grid;
	grid-template-columns: 18px repeat(var(--vsp-spalten, 4), minmax(58px, 1fr)) 18px;
	gap: 6px;
	align-items: stretch;
	overflow-x: auto;
	padding-bottom: 4px;
}

.vsp-mrail {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: var(--vsp-technik-grund);
}

.vsp-mrail.vsp-buehne { background: var(--vsp-buehne-grund); }

.vsp-mrail span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vsp-technik-text);
	white-space: nowrap;
}

.vsp-mrail.vsp-buehne span { color: var(--vsp-buehne-text); }

.vsp-tischkarte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 54px;
	padding: 5px 3px;
	background: transparent;
	border: 1px solid var(--vsp-linie);
	border-top: 3px solid var(--vsp-katfarbe, #ccc);
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.vsp-tischkarte:hover:not([disabled]) { border-color: var(--vsp-akzent); border-top-color: var(--vsp-katfarbe); }
.vsp-tischkarte:focus-visible { outline: 2px solid var(--vsp-akzent); outline-offset: 2px; }

.vsp-tischkarte[disabled] {
	cursor: not-allowed;
	opacity: .5;
	border-style: dashed;
	border-top-style: solid;
}

.vsp-tk-nr {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.vsp-tk-frei {
	font-size: 11px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--vsp-leise);
}

.vsp-tischkarte.vsp-voll .vsp-tk-frei { color: var(--vsp-warnung); }

.vsp-tischkarte.vsp-hat-auswahl {
	border-color: var(--vsp-akzent);
	box-shadow: inset 0 0 0 1px var(--vsp-akzent);
}

.vsp-tischkopf {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--vsp-leise);
}

.vsp-zurueck {
	background: none;
	border: 0;
	padding: 8px 0;
	margin-bottom: 6px;
	font: inherit;
	font-size: 15px;
	color: var(--vsp-akzent);
	cursor: pointer;
}

.vsp-zurueck:focus-visible { outline: 2px solid var(--vsp-akzent); outline-offset: 2px; }
.vsp-tischsitze h4 { margin: 0 0 4px; font-size: 18px; }

.vsp-buehnenhinweis {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--vsp-leise);
}

.vsp-reihen {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
}

.vsp-reihe { display: flex; gap: 6px; }

.vsp-msitz {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, .28);
	background: var(--vsp-sitzfarbe, #ccc);
	color: #1a1a1a;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.vsp-msitz:focus-visible { outline: 2px solid var(--vsp-akzent); outline-offset: 2px; }

.vsp-msitz.vsp-meins {
	background: var(--vsp-akzent);
	color: #fff;
	border-color: var(--vsp-text);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

.vsp-msitz.vsp-vergeben,
.vsp-msitz.vsp-gesperrt {
	background: var(--vsp-vergeben);
	color: var(--vsp-leise);
	cursor: not-allowed;
}

/* Klebeleiste am unteren Rand */

.vsp-leiste {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 20;
	align-items: center;
	gap: 12px;
	margin: 16px -14px -14px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--vsp-grund);
	border-top: 1px solid var(--vsp-linie);
}

.vsp-leiste-zahl { font-size: 14px; color: var(--vsp-leise); }
.vsp-leiste-zahl b { font-size: 19px; color: var(--vsp-akzent); font-variant-numeric: tabular-nums; }

.vsp-leiste-summe {
	flex: 1 1 auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vsp-knopf-leiste { margin-top: 0; width: auto; padding: 11px 18px; }

@media (max-width: 720px) {
	.vsp-plan { display: none; }
	.vsp-mobil { display: block; }

	.vsp-spalten { gap: 20px; }
	.vsp-seite { order: 2; }

	/* Auf dem Handy trägt die Klebeleiste den Abschluss — der Knopf
	   in der Seitenspalte wäre doppelt. */
	.vsp-auswahl > .vsp-knopf,
	.vsp-auswahl > .vsp-frist { display: none; }

	.vsp-leiste { display: flex; }
	.vsp-gewaehlt { max-height: none; }
}

@media (max-width: 380px) {
	.vsp-tischliste { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
	.vsp-msitz { width: 38px; height: 38px; }
}

/* Standanzeige und Restzeit */

.vsp-stand {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--vsp-linie);
}

.vsp-stand-frei {
	font-size: 26px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--vsp-akzent);
}

.vsp-stand-text { color: var(--vsp-leise); font-size: 15px; }
.vsp-stand-gesamt { font-variant-numeric: tabular-nums; }

.vsp-kat-frei {
	grid-column: 2 / -1;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--vsp-leise);
}

.vsp-kat-frei.vsp-voll { color: var(--vsp-warnung); }
.vsp-legende li { align-items: baseline; }
.vsp-punkt { align-self: center; }

.vsp-frist.vsp-knapp {
	color: var(--vsp-warnung);
	font-weight: 600;
}

@media (max-width: 720px) {
	/* Der Zähler bleibt sichtbar — nur der doppelte Knopf verschwindet. */
	.vsp-auswahl > .vsp-frist { display: block; }
}

/* Einstiegsknopf auf der Veranstaltungsseite (Modus "knopf").
   Fuehrt ins Buchungsfenster; die Seite selbst bleibt dadurch eine
   gewoehnliche Inhaltsseite ohne Sitzung und ohne Platzabfrage. */
.vsp-knopf-einstieg { display: inline-block; }

/* Mit `.vsp` davor wiederholt, weil dieser Knopf als einziges Element des
   Plugins mitten im Inhalt eines fremden Themes steht. Themes faerben Links
   ueber `.entry-content a` (0,1,1) und `.entry-content a:hover` (0,2,1) und
   gewaennen sonst gegen `.vsp-knopf` (0,1,0). Mit dem Rahmen davor stehen wir
   bei 0,2,0 bzw. 0,3,0 und behalten die Oberhand — ohne `!important`. */
.vsp .vsp-knopf-einstieg,
.vsp .vsp-knopf-einstieg:link,
.vsp .vsp-knopf-einstieg:visited,
.vsp .vsp-knopf-einstieg:hover,
.vsp .vsp-knopf-einstieg:focus {
	width: auto;
	margin-top: 0;
	text-decoration: none;
	background: var(--vsp-akzent);
	color: var(--vsp-knopf-text);
}

.vsp .vsp-knopf-einstieg:hover { filter: brightness(1.12); }

.vsp .vsp-knopf-einstieg:focus-visible {
	outline: 2px solid var(--vsp-akzent);
	outline-offset: 2px;
}

/* Einstieg mit Zeitschloss: Uhr vor dem Start, Knopf danach.
   Beides steht im Markup, sichtbar ist immer nur eines — welches, entscheidet
   das Skript im Browser. Serverseitig zu entscheiden ginge auch, aber diese
   Seite darf zwischengespeichert werden, und ein Zwischenspeicher weiss nichts
   davon, dass es inzwischen 11:11 Uhr ist. */
.vsp-einstieg { margin: 18px 0; }

.vsp-einstieg-uhr {
	margin: 0 0 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vsp-einstieg-vor {
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vsp-leise, #6b6e76);
}

.vsp-einstieg-wann { font-size: 18px; }

.vsp-einstieg-uhr .vsp-uhr-zahl {
	font-size: 30px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.vsp-einstieg-hinweis {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--vsp-leise, #6b6e76);
}