/*
 * Wartelisten-Formular — die mitgelieferte Optik.
 *
 * Schlicht und ueber Variablen steuerbar: ein Theme setzt die Tokens unten
 * und hat das Formular in seinem eigenen Gewand, ohne eine Regel zu
 * ueberschreiben. Wer eine ganz eigene Auszeichnung will, laesst den
 * Shortcode weg und baut das Formular selbst — die Feldnamen stehen im Kopf
 * von src/Frontend/WaitlistForm.php.
 *
 * Alle Regeln haengen unter `.bold-wl`. Ein Theme mit einer breiten
 * Reset-Regel — `:where(p, ul) { margin: 0 }` etwa — hat dieselbe
 * Spezifitaet wie eine einfache Klassenregel und laedt oft danach; dann
 * gewinnt der Reset und die Abstaende sind weg. Genau das ist bei der
 * Ticketverwaltung passiert.
 *
 * Alle Masse in px, nicht in rem: manche Themes setzen
 * `html { font-size: 62.5% }`, dort waere jede rem-Angabe 10/16 zu klein.
 */

.bold-wl {
	--bold-wl-accent: #1f5fbf;
	--bold-wl-text: #14293f;
	--bold-wl-bg: #ffffff;
	--bold-wl-line: rgba(20, 41, 63, 0.25);
	--bold-wl-font: inherit;
	--bold-wl-size: 16px;
	--bold-wl-radius: 8px;

	display: block;
	max-width: 460px;
	font-family: var(--bold-wl-font);
	font-size: var(--bold-wl-size);
	color: var(--bold-wl-text);
}

/*
 * „Ausverkauft" ist ein **Zustand**, kein Satz.
 *
 * Vorher trug der Kasten zwar die Klasse `--sold-out`, hatte aber keine
 * einzige eigene Regel: er erbte die schlichte Wartelisten-Gestaltung und las
 * sich wie ein gewöhnlicher Absatz. Wer auf die Seite kommt, überfliegt sie —
 * und übersieht dabei genau die eine Auskunft, wegen der er nicht weitersucht.
 *
 * Zurückhaltend genug, um in jedes Theme zu passen: keine Signalfarbe, nur
 * Fläche, Rahmen und Größe. Die beiden Farben stehen als eigene Variablen da,
 * damit ein Theme sie in einer Zeile überschreiben kann, ohne gegen
 * Spezifität zu kämpfen.
 *
 * Zwei Klassen im Selektor — eine einfache Klassenregel im Theme hätte
 * dieselbe Spezifität und lädt oft später (siehe Entscheidung 27).
 */
.bold-wl.bold-wl--sold-out {
	--bold-wl-out-bg: rgba(20, 41, 63, 0.06);
	--bold-wl-out-line: rgba(20, 41, 63, 0.3);

	max-width: 560px;
	padding: 20px 22px;
	background: var(--bold-wl-out-bg);
	border: 1px solid var(--bold-wl-out-line);
	border-left-width: 4px;
	border-radius: var(--bold-wl-radius);
}

.bold-wl.bold-wl--sold-out .bold-wl__titel {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.75em;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Ein Punkt, kein Emoji: Emoji sehen auf jedem System anders aus und werden
   von Screenreadern vorgelesen. */
.bold-wl.bold-wl--sold-out .bold-wl__titel::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.bold-wl.bold-wl--sold-out .bold-wl__text {
	margin-bottom: 0;
}

/* Der Zustand über der Warteliste — dort steht das Angebot im Vordergrund,
   der Zustand darf trotzdem nicht fehlen. Deshalb klein und darüber. */
.bold-wl .bold-wl__status {
	margin: 0 0 6px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}

.bold-wl .bold-wl__titel {
	margin: 0 0 8px;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.bold-wl .bold-wl__text {
	margin: 0 0 24px;
	line-height: 1.45;
}

.bold-wl .bold-wl__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--bold-wl-line);
	border-radius: var(--bold-wl-radius);
	line-height: 1.4;
}

.bold-wl .bold-wl__notice--error {
	border-color: var(--bold-wl-accent);
	background: rgba(0, 0, 0, 0.04);
}

.bold-wl .bold-wl__feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
}

.bold-wl .bold-wl__feld label {
	line-height: 1.2;
}

.bold-wl .bold-wl__feld input,
.bold-wl .bold-wl__feld select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--bold-wl-line);
	border-radius: var(--bold-wl-radius);
	background: var(--bold-wl-bg);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

.bold-wl .bold-wl__consent {
	margin: 0 0 20px;
}

.bold-wl .bold-wl__consent label {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	font-size: 0.875em;
	line-height: 1.4;
	cursor: pointer;
}

.bold-wl .bold-wl__consent input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.bold-wl .bold-wl__hinweis {
	margin: 0 0 16px;
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.8;
}

.bold-wl .bold-wl__submit {
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--bold-wl-accent);
	border-radius: var(--bold-wl-radius);
	background: var(--bold-wl-accent);
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

.bold-wl .bold-wl__submit:hover,
.bold-wl .bold-wl__submit:focus-visible {
	background: var(--bold-wl-text);
	border-color: var(--bold-wl-text);
}

/*
 * Honigtopf: aus dem Fluss genommen statt display:none. Manche Bots
 * ueberspringen Felder, die gar nicht gerendert werden — dieses hier wird
 * gerendert, ist aber weder zu sehen noch zu erreichen.
 */
.bold-wl .bold-wl__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
}

/*
 * „Nur noch x Plaetze frei“.
 *
 * Steht hier, weil es dieselbe Stelle auf der Seite betrifft wie das
 * Wartelistenformular: den Uebergang von „geht noch“ zu „ist weg“.
 * Absichtlich unauffaellig — es ist ein Hinweis, kein Alarm.
 */
.bold-seats-left {
	margin: 0 0 12px;
	font-size: 0.9375em;
	line-height: 1.4;
	font-weight: 500;
}