/* Gemeinsame Buchungskomponenten für öffentliches und administratives
   Formular. Seitenbezogene Styles dürfen diese Basis anschließend gezielt
   überschreiben. */
.teilnehmer-liste {
	display: grid;
	gap: var(--space-m);
	min-width: 0;
}

/* Kulanzfrist abgelaufen (#past-lock): Zeilen bleiben lesbar, aber Bearbeiten/
   Entfernen ist gesperrt – die eigentliche Absicherung ist der Server-Guard
   PARTICIPANT_EDIT_WINDOW_CLOSED, das hier ist nur die UI-Konsequenz. */
.teilnehmer-liste.is-locked {
	pointer-events: none;
	opacity: 0.6;
}

.teilnehmer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m);
	min-width: 0;
	padding: var(--space-l);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface-050);
}

.teilnehmer-row-heading {
	display: block;
	flex: 1 0 100%;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	letter-spacing: normal;
	color: var(--petrol-900);
}

.teilnehmer-field {
	display: grid;
	flex: 1 1 0;
	gap: var(--space-2xs);
	min-width: 0;
	font-family: var(--font-mono);
	font-size: var(--font-size-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-600);
}

.teilnehmer-field input,
.teilnehmer-field select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.teilnehmer-row input,
.teilnehmer-row select {
	box-sizing: border-box;
	height: 46px;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--ink-900);
	background: var(--surface-050);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 0 var(--space-md);
	width: 100%;
}

.teilnehmer-entry-summary {
	display: block;
	min-width: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--petrol-900);
}

/* Bucher-Karte ohne vollständigen Namen: gedämpfter Platzhaltertext. */
.teilnehmer-entry-summary--placeholder {
	font-weight: 400;
	font-style: italic;
	color: var(--ink-600);
}

/* ------------------------------------------------------------------ *
 * Einheitliches Zeilen-Aktionsmuster (.list-row-action)
 * ------------------------------------------------------------------ *
 * Rechtsbuendige Gruppe quadratischer Outline-Icon-Buttons – genutzt von der
 * bestaetigten Teilnehmerzeile (hier) und den Terminvorlagen im Admin
 * (.admin-template-item, admin.css). Reihenfolge: Bearbeiten, dann
 * Entfernen/Loeschen. */
.list-row-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.list-row-action {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface-050);
	color: var(--petrol-900);
	cursor: pointer;
}

.list-row-action:hover,
.list-row-action:focus-visible {
	border-color: var(--petrol-700);
}

/* Semantische Farb-Modifier: Bearbeiten = Blau, Verschieben = Gold, Absagen/
   Löschen/Entfernen = Rot – schon im Ruhezustand (farbiger Rahmen + blasse
   Tönung + farbiges Glyph), kräftiger bei Hover. Setzt Inline-SVG-Glyphe mit
   fill/stroke="currentColor" voraus (kein <img>). Gilt für Admin und
   öffentliches Buchungsformular (beide laden common.css). */
.list-row-action--edit {
	color: var(--edit);
	border-color: var(--edit);
	background: var(--edit-100);
}
.list-row-action--edit:hover,
.list-row-action--edit:focus-visible {
	color: var(--edit-700);
	border-color: var(--edit-700);
	background: color-mix(in srgb, var(--edit) 16%, var(--surface-000));
}

.list-row-action--move {
	color: var(--move);
	border-color: var(--move);
	background: var(--move-100);
}
.list-row-action--move:hover,
.list-row-action--move:focus-visible {
	color: var(--move-700);
	border-color: var(--move-700);
	background: color-mix(in srgb, var(--move) 16%, var(--surface-000));
}

.list-row-action--danger {
	color: var(--danger);
	border-color: var(--danger);
	background: var(--danger-100);
}
.list-row-action--danger:hover,
.list-row-action--danger:focus-visible {
	color: var(--danger-700);
	border-color: var(--danger-700);
	background: color-mix(in srgb, var(--danger) 16%, var(--surface-000));
}

.list-row-action img,
.list-row-action svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Der oeffentliche Entfernen-Button traegt ein visuell verstecktes <span>
   als Text-Fallback/Zustandslabel. */
.list-row-action span {
	display: none;
}

/* .list-row-action setzt display: – das UA-[hidden] verliert dagegen. */
.list-row-action[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.list-row-action {
		width: 44px;
		height: 44px;
	}
}

/* Bestaetigte Teilnehmerzeile: [Name … …] [✏️][×] auf EINER Zeile. Der Name
   waechst und bricht bei Bedarf mehrzeilig um, die Icon-Buttons bleiben rechts
   (nicht umbrechen, nicht linksbuendig auf eine zweite Zeile rutschen). */
.teilnehmer-actions {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-m);
	min-width: 0;
}

.teilnehmer-actions .teilnehmer-entry-summary {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.teilnehmer-actions .list-row-actions {
	flex: 0 0 auto;
}

.teilnehmer-row.is-draft .teilnehmer-entry-summary {
	display: none;
}

.teilnehmer-row:not(.is-draft) .teilnehmer-field {
	display: none;
}

/* Entwurfszeile: Vorname/Nachname teilen sich den Platz gleichmäßig; ab
   Smartphone stapeln beide. */
.teilnehmer-row.is-draft .teilnehmer-field {
	flex: 1 1 0;
}

.teilnehmer-add-row,
.teilnehmer-add {
	white-space: nowrap;
}

/* Zeilen-Aktion „Hinzufügen"/„Übernehmen" ist sekundär – kompakter als der
   finale Absende-Button, damit pro Ansicht genau ein Button optisch führt.
   (.teilnehmer-add = eigenständiger Button; .teilnehmer-add-row = Entwurfs-
   „Übernehmen" im öffentlichen Formular.) */
.teilnehmer-add,
.teilnehmer-add-row {
	padding: var(--space-s) var(--space-l);
	font-size: var(--font-size-small);
}

/* Deaktiviert-Zustand (öffentliches Formular: #bf-add-participant bei vollem
   Kurs): gedämpft, keine Interaktion, kein Hover. Geteilt statt je Seite
   doppelt (früher style.css / admin.css). Der Entwurfs-„Übernehmen"-Button
   selbst wird nie deaktiviert – er validiert beim Klick. */
.teilnehmer-add[disabled],
.teilnehmer-add-row[disabled] {
	border-color: var(--line);
	background: var(--surface-050);
	color: var(--ink-600);
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Als sekundärer Button füllt er sich NIE komplett (der .btn-outline-Default
   kippt sonst auf Hover/Fokus auf petrol-800 mit weißer Schrift und sieht dann
   aus wie der Primär-Button) – nur ein dunklerer Rahmen, kein Flächenwechsel,
   und nur im aktiven Zustand. Gilt für Admin und öffentliches Formular. */
.teilnehmer-add:not([disabled]):hover,
.teilnehmer-add:not([disabled]):focus-visible,
.teilnehmer-add-row:not([disabled]):hover,
.teilnehmer-add-row:not([disabled]):focus-visible {
	background: transparent;
	color: var(--petrol-900);
	border-color: var(--petrol-900);
}

.teilnehmer-row--booker .teilnehmer-actions {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Teilnehmerkarten im zweispaltigen Raster (#bf-form / #mb-form)
 * ------------------------------------------------------------------ */

.admin-form-grid .teilnehmer-field[hidden],
.admin-form-grid .teilnehmer-entry-summary[hidden],
.admin-form-grid .teilnehmer-add-row[hidden],
.admin-form-grid .teilnehmer-add[hidden] {
	display: none;
}

/* Entwurfszeile: [Hinzufügen] [×] als kompaktes, rechtsbündiges Paar unter den
   Feldern – dieselbe Anordnung wie [✏️][×] auf den fertigen Karten. */
/* Entwurfszeile: der geteilte „Übernehmen"-Button + [✏️][×] rechtsbündig
   unter den Feldern – gilt für beide Formulare (öffentlich + Admin), seit
   participant-list.js den Button in .teilnehmer-actions einhängt (#150). */
.teilnehmer-row.is-draft .teilnehmer-actions {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-s);
	margin-top: var(--space-2xs);
}

.teilnehmer-row.is-draft .list-row-actions {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.teilnehmer-row.is-draft .teilnehmer-field {
		flex: 1 0 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Gemeinsames Buchungsformular-Grundgerüst
 * ------------------------------------------------------------------ *
 * Feldraster, Feldstil, Kurstermin-Picker, Kapazitätshinweis,
 * Aktions-/Fehlerzeile und Abschnittsüberschriften – identisch genutzt
 * vom Admin-Panel „Buchung anlegen" (#mb-form) und vom öffentlichen
 * Buchungsformular (#bf-form). admin.css ergänzt darauf nur noch
 * #mb-* / #be-*-spezifische Feinjustierung. */

.admin-field {
	margin-top: var(--space-l);
}

.admin-field label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-600);
	margin-bottom: var(--space-xs);
}

.admin-field .optional-tag {
	text-transform: none;
	font-family: var(--font-body);
	letter-spacing: normal;
}

.admin-field input,
.admin-field textarea,
.admin-field select {
	width: 100%;
	padding: var(--space-m) var(--space-md);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	background: var(--surface-050);
	color: var(--ink-900);
}

.admin-field textarea {
	min-height: 220px;
	resize: vertical;
}

.admin-field input:focus-visible,
.admin-field textarea:focus-visible,
.admin-field select:focus-visible {
	border-color: var(--amber-600);
}

.admin-actions {
	display: flex;
	gap: var(--space-m);
	flex-wrap: wrap;
	margin-top: var(--space-xl);
}

.admin-error {
	color: var(--danger);
	margin-top: var(--space-md);
	font-size: var(--font-size-small);
}

.admin-field-error {
	display: block;
	margin-top: var(--space-2xs);
	color: var(--danger);
	font-size: var(--font-size-small);
}

.teilnehmer-field .admin-field-error {
	margin-top: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.admin-field [aria-invalid="true"],
.admin-booking-picker-host [aria-invalid="true"],
.kontakt-checkbox [aria-invalid="true"] {
	border-color: var(--danger);
}

/* Feldraster: zwei Spalten wie kontakt-form-card */
.admin-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-xl);
	min-width: 0;
}

/* Die beiden Buchungsformulare (öffentlich #bf-form, Admin #mb-form) bekommen
   ein fluides Raster statt des harten 2-→1-Spalten-Sprungs bei 640px: die
   Personenfelder brechen stufenlos um, unter ~16rem bleibt eine Spalte. Die
   übrigen .admin-form-grid-Formulare (Kurstermin anlegen o. Ä.) bleiben beim
   festen Zweispalter.
   min(16rem, 100%) statt 16rem: auf Screens schmaler als 16rem darf die Spur
   auf Containerbreite schrumpfen, sonst läuft das Raster horizontal über.
   Öffentlich sitzt das Raster je Abschnitts-Karte (.buchung-section-grid). */
#bf-form .buchung-section-grid,
#mb-form,
.admin-booking-edit .admin-form-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.admin-form-grid > .admin-field,
.admin-form-grid > .admin-field-checkbox {
	min-width: 0;
}

.admin-form-grid .admin-field--full {
	grid-column: 1 / -1;
}

/* Schmale Auswahlfelder (z. B. Land): nur so breit wie die längste Option. */
.admin-field--narrow select {
	width: auto;
	min-width: 150px;
}

/* B2B/B2C-Auswahl im Buchungsformular (§33): beschrifteter Switch statt zweier
   Radios. Switch aus = "Unternehmen / Behörde" (Default), an = "Privatperson".
   <fieldset> ohne Eigenrahmen; die Legende ist das Feld-Label. */
.buchung-bookertype {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.buchung-bookertype-legend {
	padding: 0;
	font-size: var(--font-size-body);
	font-weight: 700;
	color: var(--petrol-900);
}

.buchung-bookertype-sub {
	margin: var(--space-3xs) 0 var(--space-l);
	font-size: var(--font-size-small);
	color: var(--ink-600);
}

.buchung-bookertype-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.buchung-bookertype-side {
	font-size: var(--font-size-body);
	font-weight: 500;
	color: var(--ink-600);
	cursor: pointer;
	user-select: none;
	transition: color 0.18s ease;
}

.buchung-bookertype-side.is-active {
	font-weight: 700;
	color: var(--petrol-900);
}

/* Der Button ist nur die ≥44px hohe Hit-Area; die sichtbare Spur ist innen. */
.buchung-bookertype-switch {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.buchung-bookertype-track {
	box-sizing: border-box;
	width: 62px;
	height: 34px;
	padding: var(--space-3xs);
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface-050);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.buchung-bookertype-switch[aria-checked="true"] .buchung-bookertype-track {
	background: var(--amber-600);
	border-color: var(--amber-600);
}

.buchung-bookertype-knob {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--surface-000);
	box-shadow: 0 1px 3px rgba(18, 38, 47, 0.28);
	transform: translateX(0);
	transition: transform 0.2s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.buchung-bookertype-switch[aria-checked="true"] .buchung-bookertype-knob {
	transform: translateX(28px);
}

.buchung-bookertype-switch:focus-visible {
	outline: none;
}

.buchung-bookertype-switch:focus-visible .buchung-bookertype-track {
	box-shadow: 0 0 0 3px rgba(193, 101, 46, 0.25);
}

.buchung-bookertype-hint {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-s);
	margin: var(--space-md) 0 0;
	padding: var(--space-s) var(--space-m);
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface-050);
	font-size: var(--font-size-small);
	color: var(--ink-900);
}

.buchung-bookertype-hint-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber-600);
}

@media (prefers-reduced-motion: reduce) {
	.buchung-bookertype-knob,
	.buchung-bookertype-track,
	.buchung-bookertype-side {
		transition: none;
	}
}

.admin-form-grid .kontakt-checkbox {
	flex-wrap: wrap;
}

/* Der Beschriftungstext bleibt beim Fehler-Umbruch neben dem Häkchen
   (flex:1 + min-width:0) – sonst drückt seine breite Eigengröße ihn komplett
   unter die Box und das Häkchen wirkt „verschoben". Gleiche Regel wie im
   öffentlichen Formular (#bf-form). */
.admin-form-grid .kontakt-checkbox:has(.admin-field-error) > span:not(.admin-field-error) {
	flex: 1;
	min-width: 0;
}

.admin-form-grid .kontakt-checkbox .admin-field-error {
	flex-basis: 100%;
	margin-top: 0;
	margin-left: var(--space-2xl);
	margin-bottom: 0;
}

.admin-form-grid .kontakt-checkbox:has(.admin-field-error) {
	margin-bottom: var(--space-sm);
}

/* „Ich nehme selbst teil" ist keine Einwilligung, sondern eine Entscheidung
   (steuert Teilnehmerliste, Kapazität, Preis) – daher als EINE umrahmte Karte
   am Anfang des Teilnehmer-Abschnitts statt im Stil der Häkchen. Die Karte
   umschließt die Kopfzeile (.buchung-role-toggle) UND die Bucher-Teilnehmer-
   zeile (#…-booker-participant): ist das Häkchen gesetzt, "erweitert" sie sich
   nach unten und gibt die Teilnehmerdaten frei, sonst bleibt nur die Kopfzeile.
   .kontakt-checkbox bleibt Basisklasse der Kopfzeile (Locked-/Fehler-Regeln). */
.buchung-self-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	background: var(--surface-000);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.admin-form-grid .buchung-self-card {
	grid-column: 1 / -1;
}

.buchung-self-card:has(input:checked) {
	border-color: var(--amber-600);
}

.buchung-self-card .buchung-role-toggle {
	align-items: center;
	margin: 0;
	padding: var(--space-md) var(--space-l);
	transition: background 0.15s ease;
}

.buchung-self-card:has(input:checked) .buchung-role-toggle {
	background: var(--amber-100);
}

.buchung-self-card .buchung-role-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	min-width: 0;
}

.buchung-self-card .buchung-role-label {
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--ink-900);
}

.buchung-self-card .buchung-role-hint {
	font-size: var(--font-size-small);
	color: var(--ink-600);
}

/* Freigegebene Teilnehmerdaten sitzen ohne eigene Kachel im unteren Teil der
   Karte – nur eine Trennlinie, kein doppelter Rahmen, kein Abstand-Loch. */
.buchung-self-card .teilnehmer-liste:not(:empty) {
	padding: var(--space-md) var(--space-l);
	border-top: 1px solid var(--line);
}

.buchung-self-card:has(input:checked) .teilnehmer-liste:not(:empty) {
	border-top-color: var(--amber-600);
}

.buchung-self-card .teilnehmer-row--booker {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Teilnehmerlisten spannen im zweispaltigen Raster über beide Spalten. */
.admin-form-grid .teilnehmer-liste {
	grid-column: 1 / -1;
}

.admin-form-grid .teilnehmer-add-slot {
	grid-column: 1 / -1;
}

/* Abschnittsüberschriften mit Trennlinie zwischen den Eingabegruppen. */
.admin-form-grid .buchung-section-heading {
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-3xs);
	padding-top: var(--space-2xs);
	border-top: 1px solid var(--line);
}

.admin-form-grid .buchung-section-heading:first-child {
	margin-top: 0;
	border-top: 0;
}

/* ------------------------------------------------------------------ *
 * Info-Streifen (.info-strip)
 * ------------------------------------------------------------------ *
 * Eine Komponente für alle getönten Hinweis-/Status-/Fehler-Streifen im
 * Buchungsformular: einheitliches Padding, 3px-Akzentbalken links, Radius
 * und Schriftgröße. Semantische Varianten über Modifier-Klassen.
 * .admin-capacity-hint ist ein Alias (Admin-Panel "Buchung anlegen" hat
 * keine visuelle Test-Coverage – so bleibt admin.js unangetastet).
 * .info-strip--neutral == Basis (nur zur Lesbarkeit im Markup). */
.info-strip,
.admin-capacity-hint {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: var(--radius-s);
	background: var(--surface-050);
	color: var(--ink-700);
	font-size: var(--font-size-small);
	line-height: 1.5;
}

/* Der Admin-Kapazitätshinweis hängt weiter direkt am Feld darüber. */
.admin-capacity-hint {
	margin: calc(-1 * var(--space-2xs)) 0 var(--space-s);
}

.info-strip--accent {
	border-color: var(--petrol-700);
	background: var(--petrol-100);
	color: var(--petrol-900);
}

.info-strip--positive,
.admin-capacity-hint.is-positive {
	border-color: var(--success);
	background: var(--success-100);
	color: var(--success-700);
}

/* is-overbook = bewusste Admin-Überbelegung: gelbe Warnung, nicht blockierend.
   is-warning (rot, unten) bleibt für echte harte Fehler. */
.info-strip--warning,
.admin-capacity-hint.is-overbook {
	border-color: var(--amber-600);
	background: var(--amber-100);
	color: var(--amber-700);
}

.info-strip--danger,
.admin-capacity-hint.is-warning {
	border-color: var(--danger);
	background: var(--danger-100);
	color: var(--danger-700);
}

/* ------------------------------------------------------------------ *
 * Kurstermin-Picker (.admin-booking-picker)
 * ------------------------------------------------------------------ *
 * Custom-Listbox als Ersatz fürs native <select> – nur für die
 * Kurstermin-Auswahl, deren Optionen eine zweite Zeile ("Ort · noch X
 * frei") tragen, die ein <option> nicht darstellen kann. Auf allen
 * Breakpoints sichtbar. Tastatur/ARIA: enhanceBookingPicker() in
 * assets/js/admin.js bzw. assets/js/booking-form.js. */
.admin-template-picker {
	display: none;
}

.admin-booking-picker {
	display: block;
	position: relative;
}

/* <select> bleibt als Wertespeicher im DOM, aber unsichtbar. */
.admin-booking-picker-host > select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.admin-booking-picker .admin-template-picker-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	width: 100%;
	min-height: 48px;
	padding: var(--space-sm) var(--space-md);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface-050);
	color: var(--ink-900);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.admin-booking-picker .admin-template-picker-trigger::after {
	content: "";
	flex: none;
	width: 12px;
	height: 8px;
	background: var(--chevron-down) no-repeat center;
	background-size: 12px 8px;
	transition: transform 0.2s ease;
}

.admin-booking-picker .admin-template-picker-trigger:hover {
	border-color: var(--ink-600);
}

.admin-booking-picker .admin-template-picker-trigger:focus-visible {
	outline: 2px solid var(--amber-600);
	outline-offset: 1px;
	border-color: var(--amber-600);
}

.admin-booking-picker .admin-template-picker-trigger[aria-expanded="true"] {
	border-color: var(--amber-600);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.admin-booking-picker
	.admin-template-picker-trigger[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.admin-booking-picker .admin-template-picker-trigger[aria-invalid="true"] {
	border-color: var(--danger);
}

.admin-booking-picker .admin-template-picker-options {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	max-height: min(300px, 60vh);
	margin: 0;
	overflow-y: auto;
	border: 1.5px solid var(--amber-600);
	border-top: 0;
	border-radius: 0 0 var(--radius-s) var(--radius-s);
	background: var(--surface-000);
	box-shadow: 0 12px 28px rgba(18, 38, 47, 0.16);
}

/* Nach oben aufgeklappt (kein Platz unterhalb) – von enhanceBookingPicker
   in assets/js/booking-form.js gesetzt. */
.admin-booking-picker .admin-template-picker-options--up {
	top: auto;
	bottom: 100%;
	border-top: 1.5px solid var(--amber-600);
	border-bottom: 0;
	border-radius: var(--radius-s) var(--radius-s) 0 0;
	box-shadow: 0 -12px 28px rgba(18, 38, 47, 0.16);
}

.admin-booking-picker
	.admin-template-picker-trigger--up[aria-expanded="true"] {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: var(--radius-s);
	border-bottom-right-radius: var(--radius-s);
}

.admin-booking-picker .admin-template-picker-option {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: var(--space-sm) var(--space-md);
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	color: var(--ink-900);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.admin-booking-picker .admin-template-picker-option strong {
	display: block;
	font-weight: 600;
}

.admin-booking-picker .admin-template-picker-option span {
	display: block;
	margin-top: var(--space-3xs);
	color: var(--ink-600);
	font-size: var(--font-size-small);
}

.admin-booking-picker .admin-template-picker-option:last-child {
	border-bottom: 0;
}

.admin-booking-picker .admin-template-picker-option:hover {
	background: var(--surface-050);
}

.admin-booking-picker .admin-template-picker-option:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--amber-600);
}

.admin-booking-picker .admin-template-picker-option[aria-selected="true"] {
	background: var(--amber-100);
	font-weight: 600;
}

.admin-booking-picker .admin-template-picker-option:disabled {
	color: var(--ink-600);
	background: var(--surface-050);
	cursor: not-allowed;
	opacity: 0.7;
}

.admin-booking-picker .admin-template-picker-empty {
	margin: 0;
	padding: var(--space-md);
	color: var(--ink-600);
	font-size: var(--font-size-small);
}

@media (min-width: 641px) {
	.admin-booking-picker .admin-template-picker-trigger {
		min-height: 46px;
	}

	.admin-booking-picker .admin-template-picker-option {
		min-height: 42px;
	}

	.admin-booking-picker .admin-template-picker-options {
		max-height: min(360px, 56vh);
	}
}

@media (min-width: 1024px) {
	.admin-booking-picker .admin-template-picker-options {
		max-height: 380px;
	}
}

@media (hover: none) {
	.admin-booking-picker .admin-template-picker-trigger {
		min-height: 52px;
	}

	.admin-booking-picker .admin-template-picker-option {
		min-height: 48px;
	}
}

@media (max-width: 640px) {
	.admin-form-grid {
		grid-template-columns: 1fr;
	}

	.admin-field--narrow select {
		width: 100%;
	}
}