/*
 * Leadwerk Booking: Buchungsseite. Schrift und Farben erbt sie von der Website; Akzent über --lwb-akzent
 * (Einstellung), alles andere bewusst schlicht, damit es in jedes Theme passt.
 *
 * Seit 1.2.1 hat jedes Bedienelement eigene Gestaltung (Felder, Auswahl, Haken, Knöpfe, Bildlaufleisten, Fokus), nichts
 * bleibt beim Aussehen des Browsers. Alle Werte kommen aus den Variablen unten, die das Plugin aus den Einstellungen setzt.
 * Die Regeln hängen an .lwb oder .lwb-dialog, damit allgemeine Regeln eines Themes (etwa button:focus-visible) sie nicht
 * überstimmen.
 */
.lwb,
.lwb-dialog {
	--lwb-akzent: #1d4ed8;
	--lwb-text: inherit;
	--lwb-rand: rgba(0, 0, 0, 0.14);
	--lwb-flaeche: rgba(0, 0, 0, 0.035);
	--lwb-fehler: #b42318;
	--lwb-radius: 8px;
	/* Feldrand und Fokusring rechnet das Plugin aus Hintergrund, Text und Akzent (mindestens 3:1, LWB_Darstellung).
	   Steht der Hintergrund nicht fest („erben“), gelten diese Vorgaben. */
	--lwb-feldrand: color-mix(in srgb, currentColor 50%, transparent);
	--lwb-ring: var(--lwb-akzent);
}

/* Seit 1.1.0: Voreinstellungen für „hell“ und „dunkel“ (wp lwb einstellungen setzen --darstellung). :where() hält sie so
   schwach wie die Grundwerte oben, damit einzelne Farben aus den Einstellungen (Inline-Stil danach) gewinnen. */
.lwb:where(.lwb-hell),
.lwb-dialog:where(.lwb-hell),
.lwb-seite-koerper:where(.lwb-hell) {
	--lwb-fenster: #fff;
	--lwb-fenster-text: #111;
	--lwb-text: #111;
	color-scheme: light;
}

.lwb:where(.lwb-dunkel),
.lwb-dialog:where(.lwb-dunkel),
.lwb-seite-koerper:where(.lwb-dunkel) {
	--lwb-fenster: #15151c;
	--lwb-fenster-text: #f4f4f6;
	--lwb-text: #f4f4f6;
	--lwb-rand: rgba(255, 255, 255, 0.16);
	--lwb-flaeche: rgba(255, 255, 255, 0.05);
	--lwb-fehler: #ff8a80;
	color-scheme: dark;
}

.lwb {
	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	color: var(--lwb-text);
	font: inherit;
	font-family: var(--lwb-schrift, inherit);
	line-height: 1.5;
}

.lwb *,
.lwb *::before,
.lwb *::after {
	box-sizing: inherit;
}

.lwb[aria-busy="true"] .lwb-inhalt {
	opacity: 0.6;
	transition: opacity 0.2s;
}

.lwb button {
	font: inherit;
	cursor: pointer;
}

.lwb button:disabled {
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ Fokus und Bildlaufleisten (seit 1.2.1)

   Ein Ring, nur bei Tastatur (:focus-visible), in der Ringfarbe. Kein zweiter Ring aus Rand oder Schatten. */
.lwb :focus,
.lwb-dialog :focus {
	outline: none;
}

.lwb :focus-visible,
.lwb-dialog :focus-visible,
:root .lwb-knopf:focus-visible {
	outline: 2px solid var(--lwb-ring);
	outline-offset: 2px;
	box-shadow: none;
}

.lwb a:focus-visible,
.lwb .lwb-link:focus-visible {
	border-radius: 2px;
}

/* Überschriften, auf die das Skript nach einem Schritt den Fokus setzt (tabindex -1, damit Screenreader sie vorlesen),
   sind keine Bedienelemente und bekommen keinen Ring. */
.lwb .lwb-titel[tabindex="-1"]:focus-visible {
	outline: none;
}

/* Bildlaufleisten wie die vieler Seiten (seit 1.2.2 in der Akzentfarbe, bei Leadwerk genau wie die Seite):
   dünn, Griff mit 30 % Akzent, beim Darüberfahren 50 %, Spur im Grund des Fensters. */
.lwb,
.lwb *,
.lwb-dialog {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--lwb-akzent) 30%, transparent) var(--lwb-fenster, transparent);
}

.lwb ::-webkit-scrollbar,
.lwb-dialog::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.lwb ::-webkit-scrollbar-track,
.lwb-dialog::-webkit-scrollbar-track {
	background: var(--lwb-fenster, transparent);
}

.lwb ::-webkit-scrollbar-thumb,
.lwb-dialog::-webkit-scrollbar-thumb {
	border: 2px solid var(--lwb-fenster, transparent);
	border-radius: 5px;
	background: color-mix(in srgb, var(--lwb-akzent) 30%, transparent);
}

.lwb ::-webkit-scrollbar-thumb:hover,
.lwb-dialog::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--lwb-akzent) 50%, transparent);
}

/* ------------------------------------------------------------------ Kopf */
.lwb-titel {
	margin: 0 0 0.25em;
	font-size: 1.4em;
	line-height: 1.25;
}

.lwb-kopf {
	border-left: 4px solid var(--lwb-farbe, var(--lwb-akzent));
	padding-left: 14px;
	margin-bottom: 20px;
}

.lwb-meta,
.lwb-hilfe,
.lwb-hinweis {
	opacity: 0.8;
	font-size: 0.92em;
}

.lwb-meta {
	margin: 0 0 0.5em;
}

.lwb-beschreibung {
	margin: 0.5em 0 0;
	white-space: pre-line;
}

/* ------------------------------------------------------------------ Auswahl der Terminarten */
.lwb-arten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.lwb .lwb-art-karte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	height: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--lwb-rand);
	border-top: 4px solid var(--lwb-farbe, var(--lwb-akzent));
	border-radius: var(--lwb-radius);
	background: transparent;
	color: inherit;
	transition: background-color 0.15s, border-color 0.15s;
}

.lwb .lwb-art-karte:hover {
	background: var(--lwb-flaeche);
}

.lwb-art-name {
	font-weight: 700;
}

.lwb-art-meta,
.lwb-art-text {
	font-size: 0.92em;
	opacity: 0.8;
}

/* ------------------------------------------------------------------ Kalender und Zeiten */
.lwb-raster {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 640px) {
	.lwb-raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lwb-monat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.lwb-monat-name {
	margin: 0;
	font-size: 1.05em;
}

.lwb .lwb-pfeil {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--lwb-rand);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	transition: background-color 0.15s, border-color 0.15s;
}

.lwb .lwb-pfeil:hover:not(:disabled) {
	background: var(--lwb-flaeche);
	border-color: color-mix(in srgb, var(--lwb-akzent) 45%, transparent);
}

.lwb .lwb-pfeil:disabled {
	opacity: 0.3;
}

.lwb-tabelle {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	border: 0;
}

.lwb-tabelle th,
.lwb-tabelle td {
	border: 0;
	padding: 3px;
	text-align: center;
	background: none;
}

.lwb-tabelle th {
	font-size: 0.8em;
	font-weight: 600;
	opacity: 0.7;
	padding-bottom: 6px;
}

.lwb .lwb-tag {
	width: 100%;
	max-width: 44px;
	aspect-ratio: 1;
	min-height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: 0.4;
	transition: background-color 0.15s, color 0.15s;
}

.lwb .lwb-tag-frei {
	opacity: 1;
	font-weight: 700;
	color: var(--lwb-akzent);
	background: color-mix(in srgb, var(--lwb-akzent) 12%, transparent);
}

.lwb .lwb-tag-frei:hover {
	background: color-mix(in srgb, var(--lwb-akzent) 22%, transparent);
}

.lwb .lwb-tag-gewaehlt,
.lwb .lwb-tag-gewaehlt:hover {
	background: var(--lwb-akzent);
	color: var(--lwb-akzent-text, #fff);
}

.lwb-tag-heute {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lwb-zeiten-titel {
	margin: 0 0 10px;
	font-size: 1em;
}

/* Die Liste scrollt in sich und ist genau sieben Zeilen hoch (44 px Knopf, 8 px Abstand), damit keine Zeile halb
   angeschnitten am Rand steht. Der Innenabstand hält Platz für den Fokusring. Folgt noch etwas, blendet der untere Rand
   weich aus; am Ende der Liste verschwindet die Blende. Auf schmalen Flächen scrollt nur das Fenster. */
.lwb .lwb-zeitliste {
	list-style: none;
	margin: 0 -6px;
	padding: 4px 6px 8px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	max-height: calc(7 * 44px + 6 * 8px + 12px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

@supports (animation-timeline: scroll()) {
	.lwb .lwb-zeitliste {
		animation: lwb-liste-ende linear both;
		animation-timeline: scroll(self);
	}
}

@keyframes lwb-liste-ende {
	0%,
	96% {
		-webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
	}

	100% {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 640px) {
	.lwb .lwb-zeitliste {
		max-height: none;
		overflow: visible;
		animation: none;
	}
}

.lwb .lwb-zeitliste li {
	margin: 0;
	padding: 0;
}

.lwb .lwb-zeit {
	width: 100%;
	min-height: 44px;
	padding: 10px 8px;
	border: 1px solid var(--lwb-akzent);
	border-radius: var(--lwb-radius-knopf, var(--lwb-radius));
	background: transparent;
	color: var(--lwb-akzent);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.15s, color 0.15s;
}

/* Fokus füllt den Knopf wie Hover; der Ring kommt dazu, ein zweiter Ring aus dem Rand entsteht so nicht. */
.lwb .lwb-zeit:hover,
.lwb .lwb-zeit:focus-visible {
	background: var(--lwb-akzent);
	color: var(--lwb-akzent-text, #fff);
}

/* Gruppentermin (seit 1.2.0): freie Plätze unter der Zeit. */
.lwb-zeit-plaetze {
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	opacity: 0.85;
}

.lwb-leer {
	margin: 0 0 12px;
	opacity: 0.8;
}

.lwb .lwb-zone {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 340px;
	margin: 18px 0 0;
}

.lwb .lwb-zone label {
	font-size: 0.85em;
	font-weight: 500;
	color: color-mix(in srgb, currentColor 75%, transparent);
}

.lwb .lwb-zone select {
	min-height: 44px;
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: 0.95em;
}

/* ------------------------------------------------------------------ Formular */
.lwb .lwb-gewaehlt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 14px;
	margin-bottom: 16px;
	border-radius: var(--lwb-radius);
	background: var(--lwb-flaeche);
}

.lwb-gewaehlt p {
	margin: 0;
}

.lwb-formular {
	max-width: 560px;
}

.lwb .lwb-feld {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Beschriftung und Pflichtmarke wie im Kontaktformular der Seite: etwas kleiner, gedämpft, Sternchen in der Ringfarbe. */
.lwb .lwb-feld > label {
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.4;
	color: color-mix(in srgb, currentColor 75%, transparent);
}

.lwb .lwb-pflicht {
	color: var(--lwb-ring);
}

.lwb .lwb-hilfe {
	font-size: 0.85em;
}

/* Eingabefelder, Textfeld und Auswahl: gleiche Höhe, gleicher Rand, gleiche Ecken. */
.lwb input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="date"], [type="time"], :not([type])),
.lwb textarea,
.lwb select {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid var(--lwb-feldrand);
	border-radius: var(--lwb-radius);
	background-color: var(--lwb-flaeche);
	background-clip: padding-box;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: max(1em, 16px);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.lwb input::placeholder,
.lwb textarea::placeholder {
	color: color-mix(in srgb, currentColor 60%, transparent);
	opacity: 1;
}

.lwb input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], :not([type])):hover:not(:disabled):not(:focus):not([aria-invalid="true"]),
.lwb textarea:hover:not(:disabled):not(:focus):not([aria-invalid="true"]),
.lwb select:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) {
	border-color: color-mix(in srgb, var(--lwb-feldrand) 55%, currentColor);
}

/* Felder zeigen Fokus auch nach einem Klick (der Browser setzt dort :focus-visible); Ring eng am Feld statt mit Abstand. */
.lwb input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="date"], [type="time"], :not([type])):focus-visible,
.lwb textarea:focus-visible,
.lwb select:focus-visible {
	outline: none;
	border-color: var(--lwb-ring);
	box-shadow: 0 0 0 1px var(--lwb-ring);
}

/* Fehler: Rand in der Fehlerfarbe, bei Feldern wie bei Haken (seit 1.2.2 gleich stark wie die Regel der Felder oben,
   vorher blieb der Rand grau). */
.lwb input[aria-invalid="true"],
.lwb textarea[aria-invalid="true"],
.lwb select[aria-invalid="true"] {
	border-color: var(--lwb-fehler);
}

.lwb input[aria-invalid="true"]:focus-visible,
.lwb textarea[aria-invalid="true"]:focus-visible,
.lwb select[aria-invalid="true"]:focus-visible {
	box-shadow: 0 0 0 1px var(--lwb-fehler);
	border-color: var(--lwb-fehler);
}

.lwb input:disabled,
.lwb textarea:disabled,
.lwb select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Vom Browser ausgefüllte Felder behalten Farbe und Hintergrund des Fensters. */
.lwb input:-webkit-autofill,
.lwb input:-webkit-autofill:hover,
.lwb input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lwb-fenster-text, currentColor);
	-webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--lwb-fenster, Canvas) 95%, var(--lwb-fenster-text, CanvasText)) inset;
	caret-color: currentColor;
	transition: background-color 9999s ease-out 0s;
}

.lwb input:-webkit-autofill:focus-visible {
	-webkit-box-shadow: 0 0 0 1px var(--lwb-ring), 0 0 0 1000px color-mix(in srgb, var(--lwb-fenster, Canvas) 95%, var(--lwb-fenster-text, CanvasText)) inset;
}

/* Textfeld wächst mit dem Inhalt, wo der Browser das kann; sonst Griff zum Ziehen in den Farben des Fensters. */
.lwb textarea {
	min-height: 120px;
	resize: vertical;
}

@supports (field-sizing: content) {
	.lwb textarea {
		field-sizing: content;
		max-height: 320px;
		resize: none;
	}
}

.lwb textarea::-webkit-resizer {
	border-bottom-right-radius: var(--lwb-radius);
	background:
		linear-gradient(135deg, transparent 0 56%, var(--lwb-feldrand) 56% 63%, transparent 63% 74%, var(--lwb-feldrand) 74% 81%, transparent 81%);
}

/* Auswahl: eigener Pfeil aus der Textfarbe. */
.lwb select {
	padding-right: 44px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 23px) 52%, calc(100% - 17px) 52%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
	text-overflow: ellipsis;
}

.lwb select option {
	background-color: var(--lwb-fenster, Canvas);
	color: var(--lwb-fenster-text, CanvasText);
}

/* Wo der Browser es kann (Chrome seit 135), auch die aufgeklappte Liste gestalten. */
@supports (appearance: base-select) {
	.lwb select,
	.lwb select::picker(select) {
		appearance: base-select;
	}

	.lwb select {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-right: 16px;
		background-image: none;
	}

	.lwb select::picker-icon {
		content: "";
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		margin-left: auto;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: rotate 0.2s;
	}

	.lwb select:open::picker-icon {
		rotate: 180deg;
	}

	.lwb select::picker(select) {
		max-height: min(320px, 50vh);
		margin-block: 6px;
		padding: 4px;
		border: 1px solid var(--lwb-feldrand);
		border-radius: var(--lwb-radius);
		background: var(--lwb-fenster, Canvas);
		color: var(--lwb-fenster-text, CanvasText);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--lwb-akzent) 30%, transparent) var(--lwb-fenster, transparent);
	}

	.lwb select option {
		padding: 8px 12px;
		border-radius: calc(var(--lwb-radius) / 2);
		background: transparent;
		color: inherit;
		font-size: 0.95em;
	}

	.lwb select option:hover,
	.lwb select option:focus-visible {
		outline: none;
		background: var(--lwb-flaeche);
	}

	.lwb select option:checked {
		color: var(--lwb-ring);
		font-weight: 600;
	}

	.lwb select option::checkmark {
		display: none;
	}
}

/* Haken und Auswahlpunkte: Kästchen wie im Kontaktformular der Seite, Haken in der Schrift auf Akzent. */
.lwb input[type="checkbox"],
.lwb input[type="radio"] {
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	padding: 0;
	border: 2px solid var(--lwb-feldrand);
	border-radius: calc(var(--lwb-radius) / 2);
	background: var(--lwb-flaeche);
	color: var(--lwb-akzent-text, #fff);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.lwb input[type="radio"] {
	border-radius: 50%;
}

.lwb input[type="checkbox"]::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: scale(0);
	transition: transform 0.12s;
}

.lwb input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	transform: scale(0);
	transition: transform 0.12s;
}

.lwb input:is([type="checkbox"], [type="radio"]):hover:not(:disabled):not(:checked) {
	border-color: color-mix(in srgb, var(--lwb-feldrand) 55%, currentColor);
}

.lwb input:is([type="checkbox"], [type="radio"]):checked {
	border-color: var(--lwb-akzent);
	background: var(--lwb-akzent);
}

.lwb input:is([type="checkbox"], [type="radio"]):checked::before {
	transform: scale(1);
}

.lwb input:is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
	border-color: var(--lwb-fehler);
}

.lwb input:is([type="checkbox"], [type="radio"]):disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (forced-colors: active) {
	.lwb input:is([type="checkbox"], [type="radio"])::before {
		background: CanvasText;
	}
}

.lwb .lwb-feld-box {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

.lwb .lwb-feld-box label {
	flex: 1;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.5;
	color: color-mix(in srgb, currentColor 75%, transparent);
	cursor: pointer;
}

.lwb .lwb-feld-box label a {
	color: var(--lwb-akzent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lwb .lwb-feld-box .lwb-feldfehler {
	flex-basis: 100%;
	padding-left: 34px;
}

.lwb-feldfehler {
	color: var(--lwb-fehler);
	font-size: 0.9em;
}

.lwb-feldfehler:empty {
	display: none;
}

.lwb-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ Knöpfe

   Ecken aus ecken_knopf (pille = ganz rund wie die Knöpfe vieler Seiten), Fläche als Verlauf vom Akzent zum zweiten
   Akzent (ohne zweiten Akzent einfarbig). :root davor, weil der Knopf aus dem Kurzbefehl auch außerhalb von .lwb steht. */
:root .lwb-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	margin: 0;
	padding: 0.75em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--lwb-radius-knopf, var(--lwb-radius, 8px));
	background: linear-gradient(135deg, var(--lwb-akzent, #1d4ed8) 0%, var(--lwb-akzent-2, var(--lwb-akzent, #1d4ed8)) 100%);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--lwb-akzent, #1d4ed8) 25%, transparent);
	color: var(--lwb-akzent-text, #fff);
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.2, 1, 0.3, 1), background-color 0.15s, border-color 0.15s;
}

:root .lwb-knopf:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px color-mix(in srgb, var(--lwb-akzent, #1d4ed8) 40%, transparent);
	color: var(--lwb-akzent-text, #fff);
}

:root .lwb-knopf:active:not(:disabled) {
	transform: translateY(0);
}

:root .lwb-knopf:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

:root .lwb-knopf-zweit {
	border-color: var(--lwb-rand);
	background: var(--lwb-flaeche);
	box-shadow: none;
	color: var(--lwb-text);
}

/* Wie die Nebenknöpfe der Seite: Schrift im zweiten Akzent, Rand mit 30 % Akzent, Grund etwas heller. */
:root .lwb-knopf-zweit:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--lwb-akzent) 30%, transparent);
	background: color-mix(in srgb, var(--lwb-fenster-text, currentColor) 8%, transparent);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	color: var(--lwb-akzent-2, var(--lwb-akzent));
}

/* Absagen (seit 1.2.2): dunkler Knopf mit Rand und Schrift in der Fehlerfarbe, klar als Abbruch zu erkennen, ohne
   farbige Fläche. Beim Darüberfahren ein Hauch der Fehlerfarbe im Grund. */
:root .lwb-knopf-gefahr {
	border-color: var(--lwb-fehler);
	background: transparent;
	box-shadow: none;
	color: var(--lwb-fehler);
}

:root .lwb-knopf-gefahr:hover:not(:disabled) {
	border-color: var(--lwb-fehler);
	background: color-mix(in srgb, var(--lwb-fehler) 12%, transparent);
	box-shadow: none;
	color: var(--lwb-fehler);
}

.lwb .lwb-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--lwb-akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
	font: inherit;
}

.lwb .lwb-link:hover {
	text-decoration-thickness: 2px;
}

.lwb-aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.lwb-absenden {
	margin: 8px 0 0;
}

.lwb-status {
	margin-top: 12px;
	min-height: 1.5em;
}

.lwb-status:empty {
	min-height: 0;
	margin: 0;
}

.lwb-status-fehler {
	color: var(--lwb-fehler);
	font-weight: 600;
}

/* ------------------------------------------------------------------ Bestätigung und Verwalten */
.lwb-fertig {
	text-align: center;
	padding: 12px 0;
}

.lwb-fertig .lwb-aktionen {
	justify-content: center;
	margin-top: 20px;
}

.lwb-haken {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--lwb-akzent);
	color: var(--lwb-akzent-text, #fff);
	font-size: 30px;
	line-height: 56px;
}

.lwb .lwb-karte {
	padding: 14px 16px;
	margin: 12px 0;
	border: 1px solid var(--lwb-rand);
	border-radius: var(--lwb-radius);
}

.lwb-karte p {
	margin: 0 0 6px;
}

.lwb-karte-abgesagt {
	opacity: 0.7;
	text-decoration: line-through;
}

/* ------------------------------------------------------------------ Popup */
.lwb-dialog {
	width: min(920px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	padding: 28px 24px 20px;
	border: 1px solid var(--lwb-rand);
	border-radius: calc(var(--lwb-radius) + 4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	background: var(--lwb-fenster, #fff);
	color: var(--lwb-fenster-text, #111);
	font-family: var(--lwb-schrift, inherit);
	overscroll-behavior: contain;
}

.lwb-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
	.lwb-dialog {
		padding: 24px 16px 16px;
	}
}

.lwb-dialog .lwb-schliessen {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.lwb-dialog .lwb-schliessen:hover {
	border-color: var(--lwb-rand);
	background: var(--lwb-flaeche);
}

/* ------------------------------------------------------------------ Eigene Seite zum Verwalten */
.lwb-seite-koerper {
	margin: 0;
	font-family: var(--lwb-schrift, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	background: #f6f7f9;
	color: var(--lwb-fenster-text, #111);
}

.lwb-seite-koerper:where(.lwb-dunkel) {
	background: color-mix(in srgb, var(--lwb-fenster, #15151c) 70%, #000);
}

.lwb-seite {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.lwb-seite .lwb {
	max-width: none;
	padding: 24px;
	border: 1px solid var(--lwb-rand);
	border-radius: calc(var(--lwb-radius) + 4px);
	background: var(--lwb-fenster, #fff);
	color: var(--lwb-fenster-text, inherit);
}

.lwb-seite-kopf a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.lwb-seite-kopf .lwb-logo {
	display: block;
	max-height: 40px;
	width: auto;
}

/* Seit 1.1.0: Seite links im Fenster mit Logo und Gastgeber (nur wenn Logo oder Bild eingestellt sind). Auf breiten
   Flächen zwei Spalten wie bei Calendly, auf schmalen steht sie über Kalender und Formular. */
.lwb-logo {
	display: block;
	max-width: 180px;
	max-height: 44px;
	width: auto;
	height: auto;
	margin: 0 0 18px;
}

.lwb-person {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.lwb-person-bild {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--lwb-flaeche);
}

.lwb-person-name {
	font-weight: 600;
	opacity: 0.85;
}

.lwb-kopf.lwb-kopf-seite {
	border-left: 0;
	padding-left: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--lwb-rand);
}

.lwb:has(.lwb-kopf-seite) {
	container-type: inline-size;
}

@container (min-width: 700px) {
	.lwb-inhalt:has(> .lwb-kopf-seite) {
		display: grid;
		grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}

	.lwb-inhalt:has(> .lwb-kopf-seite) > .lwb-kopf-seite {
		grid-column: 1;
		grid-row: 1 / span 9;
		align-self: stretch;
		margin: 0;
		padding: 0 24px 0 0;
		border-bottom: 0;
		border-right: 1px solid var(--lwb-rand);
	}

	.lwb-inhalt:has(> .lwb-kopf-seite) > :not(.lwb-kopf-seite) {
		grid-column: 2;
	}

	/* Meldungen (seit 1.2.2) stehen unter der rechten Spalte, bündig mit dem Formular, nicht unter der Seite links. */
	.lwb:has(> .lwb-inhalt > .lwb-kopf-seite) > .lwb-status {
		margin-left: calc(30% + 28px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lwb *,
	.lwb-dialog *,
	:root .lwb-knopf {
		transition: none !important;
	}

	:root .lwb-knopf:hover:not(:disabled) {
		transform: none;
	}
}