/**
 * smartEngin MeetMix — die Buchungsstrecke im Frontend.
 *
 * DIE eine Stilquelle fürs Frontend, nach der verbindlichen Vorlage
 * _design/frontend-buchung.html. Wer eine Seite mit eigenem CSS baut,
 * macht es falsch.
 *
 * Zwei Abweichungen von der Vorlage, beide notwendig:
 *
 * 1. JEDE Klasse trägt das Präfix seca- (die Vorlage nutzt .tag, .zeit,
 *    .meta, .knopf — solche Namen kollidieren mit jedem Theme). Die Optik
 *    ist unverändert, nur die Namen.
 * 2. Ein Zurücksetzen ganz oben: Themes bringen eigene Regeln für Knöpfe,
 *    Auswahlfelder und Listen mit. Ohne das Zurücksetzen werden aus den
 *    quadratischen Tageskacheln der Vorlage hohe Kästen (genau so von
 *    Pierre am 11.08.2026 im Browser gefunden).
 *
 * WICHTIG zur Reihenfolge: Das Zurücksetzen unten wiegt 0-1-1. Jede eigene
 * Regel für einen Knopf muss deshalb mit ".seca-buchung " beginnen (0-2-0),
 * sonst gewinnt das Zurücksetzen gegen die eigene Gestaltung.
 * Der Zusatz ":where(:not(…))" hält es von FREMDEN Knöpfen fern, OHNE das
 * Gewicht zu verändern — ":where()" zählt nichts. Genau darauf kommt es an,
 * siehe die Begründung am Block selbst.
 *
 * Geladen wird die Datei NUR auf Seiten mit einer Kalenderfunktion
 * (Konzept §9.9).
 */

.seca-buchung {
	/* Hausfarben (Vorlage). Bewusst hier und nicht als Inline-Stil:
	   zusammengesetzte Werte überleben den WordPress-Filter nicht. */
	--seca-b-dunkel: #11314A;
	--seca-b-gruen: #37B971;
	--seca-b-gruen-dunkel: #2fa563;
	--seca-b-hellgruen: #4ED66F;
	--seca-b-hellblau: #8FD3FF;
	--seca-b-karte: #f3f8f5;
	--seca-b-rahmen: #d9e6de;
	--seca-b-rot: #D64545;
	--seca-b-grau: #6b7c88;
	--seca-b-radius: 16px;

	margin-left: auto;
	margin-right: auto;
	color: var(--seca-b-dunkel);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

/* Die Breite kommt aus Einstellungen → Design (wp_add_inline_style).
 *
 * Der Klassenname steht ABSICHTLICH zweimal da: Block-Themes setzen auf
 * denselben Bereich eine eigene Höchstbreite (bei smartengin.de 1240 px)
 * mit demselben Gewicht wie eine einfache Klasse — dann entscheidet die
 * Reihenfolge der Dateien, und das Theme gewinnt. Der Kalender war dadurch
 * 1240 statt 980 Pixel breit und wirkte viel zu groß (Pierre, 11.08.2026).
 * Zweimal derselbe Name wiegt schwerer und beendet den Streit.
 */
.seca-buchung.seca-buchung {
	max-width: var(--seca-b-breite, 980px);
}

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

/* ---------- Zurücksetzen: das Theme soll hier nicht hineinregieren ----------

   ABER: Es darf auch nicht in ein FREMDES Plugin hineinregieren.

   Pierres Fund vom 15.08.2026: Auf der Terminseite steht der Kaufkasten von
   „smartEngin buy". Dessen Knöpfe heißen `.sels-btn` (Gewicht 0-1-0), das
   Zurücksetzen hier `.seca-buchung button` (Gewicht 0-1-1) — also gewann das
   Zurücksetzen, und aus den Bezahlknöpfen wurde nackter Text. Genau davor
   warnt der Kopf dieser Datei, nur eben für die EIGENEN Knöpfe.

   Gegenmittel: Alles, was eine `sels-`-Klasse trägt, bleibt unangetastet.

   **Und zwar mit `:where(:not(…))`, nicht mit `:not(…)` allein** — das ist
   der springende Punkt und hat am 15.08.2026 einen zweiten Anlauf gekostet:
   Ein blankes `:not([class*="sels-"])` hebt das Gewicht auf 0-2-1. Damit
   schlug das Zurücksetzen plötzlich die EIGENEN Knopf-Regeln
   (`.seca-buchung .seca-b-knopf`, `.seca-buchung .seca-b-zeit` — beide
   0-2-0): Die Uhrzeit-Kacheln verloren ihren Rahmen und aus „Termin
   verbindlich buchen" wurde eine Textzeile (Pierres Fund). `:where()` zählt
   beim Gewicht NICHTS — die Ausnahme greift, das Gewicht bleibt bei 0-1-1
   wie seit 0.3.3. Genau davor warnt der Kopf dieser Datei.
   ------------------------------------------------------------------------- */

.seca-buchung button:where(:not([class*="sels-"])) {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.seca-buchung select:where(:not([class*="sels-"])) {
	margin: 0;
	max-width: 100%;
	min-height: 0;
	height: auto;
	box-shadow: none;
	font: inherit;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
}

.seca-buchung ul:where(:not([class*="sels-"])) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Überschrift und Einleitung ---------- */

.seca-b-titel {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.3;
	color: var(--seca-b-dunkel);
}

.seca-b-intro {
	margin: 0 0 18px;
	color: #33505f;
	font-size: 14.5px;
}

.seca-b-intro p:last-child {
	margin-bottom: 0;
}

/* ---------- Die Karte ---------- */

.seca-b-karte {
	background-color: #fff;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: var(--seca-b-radius);
	box-shadow: 0 10px 30px rgba(17, 49, 74, 0.08);
	overflow: hidden;
}

/*
 * Die linke Spalte bleibt bei 300 Pixeln — und wird nur dann breiter, wenn
 * es wirklich nicht anders geht.
 *
 * **Die Reihenfolge ist Pierres Vorgabe vom 21.08.2026, und sie war beim
 * ersten Versuch falsch herum:** Damals stand hier `minmax(300px, 360px)`.
 * Ein `minmax` mit fester Obergrenze nimmt aber IMMER die 360, solange Platz
 * da ist — die Spalte wurde also breiter, egal wie kurz der Titel war, und
 * die Schrift kam nie an die Reihe. Pierre hat genau das gesehen.
 *
 * Richtig ist die umgekehrte Reihenfolge, weil der Kalender in der Mitte das
 * Wichtigere ist:
 *
 *   1. **Zuerst die Schrift.** `seca-frontend.js` verkleinert sie gemessen
 *      von 14 auf 13, 12 oder 11 Pixel, solange die Spalte 300 breit bleibt.
 *   2. **Erst wenn auch 11 Pixel nicht reichen**, setzt das Skript
 *      `--seca-b-linksbreite` — und zwar auf so viel, wie WIRKLICH gebraucht
 *      wird, höchstens 360.
 *
 * Deshalb steht hier eine Variable mit dem Rückfallwert 300 und kein
 * `minmax`: Die Entscheidung, ob überhaupt breiter, kann nur der treffen,
 * der den Text gemessen hat — und das ist das Skript, nicht das Stylesheet.
 * Läuft kein JavaScript, bleibt es bei den 300 Pixeln von früher.
 */
.seca-b-gitter {
	display: grid;
	grid-template-columns: var(--seca-b-linksbreite, 300px) 1fr 220px;
	min-height: 430px;
}

.seca-b-links {
	padding: 24px;
	border-right: 1px solid var(--seca-b-rahmen);
	background-color: var(--seca-b-karte);
}

.seca-b-mitte {
	padding: 24px;
}

.seca-b-rechts {
	padding: 24px 18px;
	border-left: 1px solid var(--seca-b-rahmen);
}

.seca-b-leer {
	padding: 28px 24px;
	margin: 0;
	text-align: center;
	color: var(--seca-b-grau);
}

/* Während neue Zeiten geladen werden, bleibt das Bisherige stehen und wird
   nur blasser — sonst klappt die Karte für einen Moment zusammen und wirkt
   kaputt (von Pierre am 11.08.2026 gemeldet). */
.seca-b-arbeitet {
	opacity: 0.45;
	transition: opacity 0.15s linear;
	pointer-events: none;
}

/* ---------- links: Anbieter, Auswahl, Angaben ---------- */

.seca-b-anbieter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

/* Das Logo ist ein KREIS, und sein Durchmesser ist je Buchungsansicht
   einstellbar (Pierres Wunsch vom 16.08.2026: mit 34 Pixeln und abgerundeten
   Ecken war das Bild kaum zu erkennen).

   Die Zahl selbst setzt das Frontend als `width`/`height` am Element (die
   Begruendung steht dort im Quelltext). Hier stehen nur die FORM und der
   Rueckfallwert 56 — er gilt, wenn eine Ansicht die Angabe noch nicht hat. */
.seca-b-logo {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	background-color: var(--seca-b-dunkel);
	color: #fff;
	display: grid;
	place-items: center;
	/* Die Anfangsbuchstaben wachsen mit dem Kreis mit — sonst stuenden zwei
	   winzige Zeichen in einem grossen Kreis. */
	font-size: 21px; /* 0.38 der Vorgabegroesse; das Frontend rechnet mit. */
	font-weight: 600;
	letter-spacing: 0.5px;
	overflow: hidden;
}

/* Das Bild fuellt den Kreis IMMER ganz aus — mit 100 % statt einer eigenen
   Zahl. So muss die Groesse nur an einer Stelle stehen (am Kreis), und die
   beiden koennen nie auseinanderlaufen. */
.seca-b-logobild {
	width: 100%;
	height: 100%;
	/* `cover` schneidet mittig zu — ein Bild, das nicht quadratisch ist, wird
	   dadurch beschnitten statt verzerrt. Der eigene Rundschnitt am Bild ist
	   noetig, weil `overflow:hidden` am Rahmen bei manchen Browsern an einem
	   Bild mit eigenem Rand vorbeigeht. */
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* ---------- Das Bild kurz gross sehen ----------

   Pierres Wunsch vom 22.08.2026: Der Kreis bleibt klein, aber ein Klick zeigt
   das Bild zwei Sekunden lang dreimal so gross — lang genug, um zu sehen, wer
   einem gegenuebersitzt, kurz genug, um niemanden aufzuhalten.

   **Warum `left top` und nicht die Mitte:** Der Kreis sitzt oben links in der
   Karte, und die Karte schneidet ab (`.seca-b-karte` hat `overflow: hidden`).
   Von der Mitte aus gewachsen waere das Bild oben abgeschnitten; von der
   linken oberen Ecke aus waechst es nach rechts und unten in die Karte hinein.
   168 Pixel (3 x 56) passen in die 300 Pixel breite Spalte.

   Dass es dabei den Text darunter verdeckt, ist gewollt und dauert zwei
   Sekunden. */
.seca-b-logo--zoom {
	/* Ein `button` bringt eigene Randlinien, Innenabstaende und Schrift mit —
	   ohne diesen Rueckbau saehe der Kreis in jedem Browser anders aus. */
	padding: 0;
	border: 0;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	cursor: zoom-in;
	transition: transform 0.25s ease-out;
	transform-origin: left top;
}

.seca-b-logo--zoom.is-gross {
	transform: scale(3);
	cursor: zoom-out;
	/* Ueber allem, was darunter steht — sonst schoebe sich der Text der
	   linken Spalte durch das vergroesserte Bild. */
	position: relative;
	z-index: 5;
}

/* Wer Bewegung im System abgestellt hat, bekommt die Vergroesserung trotzdem
   — nur ohne den Uebergang. Die Funktion ist der Zweck, die Animation ist
   die Zugabe. */
@media (prefers-reduced-motion: reduce) {
	.seca-b-logo--zoom {
		transition: none;
	}
}

.seca-b-name {
	font-size: 13.5px;
	font-weight: 600;
}

.seca-b-feldname {
	display: block;
	font-size: 12px;
	color: var(--seca-b-grau);
	margin: 0 0 6px;
}

.seca-buchung .seca-b-typwahl {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 10px;
	background-color: #fff;
	font-size: 14px;
	font-family: inherit;
	font-weight: 600;
	color: var(--seca-b-dunkel);
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2311314A' stroke-width='1.6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.seca-b-beschreibung {
	font-size: 13.5px;
	line-height: 1.55;
	color: #33505f;
	margin: 16px 0 18px;
}

.seca-b-beschreibung p {
	margin: 0 0 10px;
}

.seca-b-beschreibung p:last-child {
	margin-bottom: 0;
}

.seca-buchung .seca-b-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.seca-b-meta li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
}

.seca-b-meta .seca-b-zeichen {
	width: 18px;
	flex: none;
	text-align: center;
	color: var(--seca-b-gruen);
}

.seca-b-fuss {
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid var(--seca-b-rahmen);
	font-size: 11.5px;
	color: var(--seca-b-grau);
}

.seca-b-fuss a {
	color: var(--seca-b-grau);
	margin-right: 12px;
}

/* Die Marke ganz unten in der linken Spalte (Einstellungen → Design).
   Rechtsbündig und 94 Pixel breit (Pierre, 12.08.2026 — vorher mittig und
   118 Pixel: zu groß und zu dominant unter den Fußzeilen-Links).
   max-width neben der festen Breite: Das Logo darf in einer schmalen Spalte
   mitschrumpfen, aber nie über sie hinauswachsen. height: auto hält das
   Seitenverhältnis auch dann, wenn ein Theme img { height } vorgibt. */
.seca-b-marke {
	margin-top: 26px;
	text-align: right;
}

.seca-b-marke img {
	width: 94px;
	max-width: 100%;
	height: auto;
	opacity: 0.85;
}

/* ---------- Mitte: der Monat ---------- */

.seca-b-monatskopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.seca-b-monatstitel {
	font-size: 17px;
	font-weight: 600;
}

.seca-b-pfeile {
	display: flex;
	gap: 4px;
}

.seca-buchung .seca-b-pfeile button {
	width: 30px;
	height: 30px;
	flex: none;
	border: 1px solid var(--seca-b-rahmen);
	background-color: #fff;
	border-radius: 8px;
	color: var(--seca-b-dunkel);
	font-size: 14px;
	line-height: 1;
	padding: 0;
}

.seca-buchung .seca-b-pfeile button[disabled] {
	opacity: 0.4;
	cursor: default;
}

.seca-b-wochentage,
.seca-b-tage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.seca-b-wochentage div {
	text-align: center;
	font-size: 11px;
	color: var(--seca-b-grau);
	padding-bottom: 6px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* Die Kachel ist quadratisch — genau wie in der Vorlage. Höhe, Polsterung
   und Schriftgröße stehen ausdrücklich hier, damit kein Theme sie aufbläht. */
.seca-buchung .seca-b-tag {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	background-color: transparent;
	color: #b8c4cc;
	position: relative;
	cursor: default;
}

.seca-buchung .seca-b-tag.seca-b-leerfeld {
	visibility: hidden;
}

.seca-buchung .seca-b-tag.seca-b-frei {
	background-color: var(--seca-b-karte);
	border-color: var(--seca-b-rahmen);
	color: var(--seca-b-dunkel);
	cursor: pointer;
	font-weight: 600;
}

.seca-buchung .seca-b-tag.seca-b-frei:hover,
.seca-buchung .seca-b-tag.seca-b-frei:focus-visible {
	border-color: var(--seca-b-gruen);
}

.seca-buchung .seca-b-tag.seca-b-frei::after {
	content: "";
	position: absolute;
	bottom: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--seca-b-gruen);
}

.seca-buchung .seca-b-tag.seca-b-gewaehlt {
	background-color: var(--seca-b-dunkel);
	color: #fff;
	border-color: var(--seca-b-dunkel);
}

.seca-buchung .seca-b-tag.seca-b-gewaehlt::after {
	background-color: var(--seca-b-hellgruen);
}

.seca-buchung .seca-b-tag.seca-b-heute {
	box-shadow: inset 0 0 0 1.5px var(--seca-b-hellblau);
}

.seca-buchung .seca-b-naechster {
	margin-top: 16px;
	width: 100%;
	padding: 9px;
	border: 1px solid var(--seca-b-rahmen);
	background-color: #fff;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--seca-b-dunkel);
}

.seca-buchung .seca-b-naechster:hover {
	border-color: var(--seca-b-gruen);
}

/* ---------- rechts: die Uhrzeiten ---------- */

.seca-b-zeitkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 14px;
}

.seca-b-tagname {
	font-size: 14px;
	font-weight: 600;
}

.seca-b-umschalter {
	display: flex;
	flex: none;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 8px;
	overflow: hidden;
}

.seca-buchung .seca-b-umschalter button {
	border: 0;
	background-color: #fff;
	padding: 5px 9px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--seca-b-grau);
	border-radius: 0;
}

.seca-buchung .seca-b-umschalter button.an {
	background-color: var(--seca-b-dunkel);
	color: #fff;
}

.seca-b-zeiten {
	display: grid;
	gap: 8px;
	max-height: 330px;
	overflow-y: auto;
	padding-right: 4px;
}

.seca-buchung .seca-b-zeit {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.4;
	background-color: #fff;
	color: var(--seca-b-dunkel);
}

.seca-buchung .seca-b-zeit:hover,
.seca-buchung .seca-b-zeit:focus-visible {
	border-color: var(--seca-b-gruen);
	color: var(--seca-b-gruen);
	font-weight: 600;
}

.seca-buchung .seca-b-zeit.seca-b-gewaehlt {
	background-color: var(--seca-b-gruen);
	border-color: var(--seca-b-gruen);
	color: var(--seca-b-akzent-schrift, #fff);
	font-weight: 600;
}

.seca-b-hinweis {
	font-size: 13px;
	color: var(--seca-b-grau);
	margin: 0;
}

.seca-b-zone {
	margin-top: 14px;
	font-size: 11.5px;
	color: var(--seca-b-grau);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.seca-buchung .seca-b-zone select {
	max-width: 100%;
	font-size: 11.5px;
	font-family: inherit;
	padding: 4px 6px;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 8px;
	background-color: #fff;
	color: var(--seca-b-grau);
}

.seca-b-zonenname {
	display: block;
}

/* ---------- Schrittführung auf dem Handy (Vorlage, Ansicht 5) ---------- */

.seca-b-schrittkopf {
	padding: 14px 16px;
	border-bottom: 1px solid var(--seca-b-rahmen);
	background-color: var(--seca-b-karte);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.seca-b-schritttitel {
	font-size: 13px;
	font-weight: 600;
}

.seca-b-fortschritt {
	display: flex;
	gap: 5px;
	width: 100%;
}

.seca-b-fortschritt i {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	background-color: var(--seca-b-rahmen);
}

.seca-b-fortschritt i.an {
	background-color: var(--seca-b-gruen);
}

.seca-buchung .seca-b-weiter {
	width: 100%;
	margin-top: 16px;
}

/* Im Schrittmodus ist immer nur eine der drei Spalten zu sehen. */
.seca-b-schritte[data-schritt="1"] .seca-b-mitte,
.seca-b-schritte[data-schritt="1"] .seca-b-rechts,
.seca-b-schritte[data-schritt="2"] .seca-b-links,
.seca-b-schritte[data-schritt="2"] .seca-b-rechts,
.seca-b-schritte[data-schritt="3"] .seca-b-links,
.seca-b-schritte[data-schritt="3"] .seca-b-mitte {
	display: none;
}

.seca-b-schritte .seca-b-links,
.seca-b-schritte .seca-b-rechts {
	border: 0;
}

/* ---------- Das Formular (Vorlage, Ansicht 2) ---------- */

.seca-b-formkopf {
	padding: 18px 24px;
	border-bottom: 1px solid var(--seca-b-rahmen);
	background-color: var(--seca-b-karte);
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.seca-buchung .seca-b-zurueck {
	border: 1px solid var(--seca-b-rahmen);
	background-color: #fff;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--seca-b-dunkel);
}

.seca-b-gewaehlt-info {
	font-size: 14px;
}

.seca-b-formkoerper {
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.seca-b-formkoerper .seca-b-voll {
	grid-column: 1 / -1;
}

.seca-b-fzeile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.seca-buchung .seca-b-eingabe {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 10px;
	background-color: #fff;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--seca-b-dunkel);
}

.seca-buchung .seca-b-eingabe:focus-visible {
	outline: 2px solid var(--seca-b-gruen);
	outline-offset: 1px;
}

.seca-b-anschrift {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 10px;
}

.seca-b-anschrift .seca-b-voll {
	grid-column: 1 / -1;
}

.seca-b-pflicht {
	color: var(--seca-b-rot);
}

.seca-b-leise {
	color: var(--seca-b-grau);
	font-weight: 400;
}

.seca-b-hilfe {
	font-size: 12px;
	color: var(--seca-b-grau);
}

.seca-b-feldfehler {
	font-size: 12.5px;
	color: var(--seca-b-rot);
}

.seca-b-fehlerhaft .seca-b-eingabe {
	border-color: var(--seca-b-rot);
}

.seca-b-gebiet {
	border: 1px solid #f0d9a8;
	background-color: #fdf6e7;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 12.5px;
	color: #7a5a12;
}

/* Hinweis zu Online-Terminen (Einstellungen → Datenschutz). Bewusst ruhiger
   als der gelbe Gebiets-Hinweis: Er warnt nicht, er erklärt.
   white-space: pre-line, weil der Text aus einem mehrzeiligen Feld kommt und
   im Skript über textContent gesetzt wird — ohne diese Zeile stünde alles in
   einem einzigen Absatz, obwohl im Backend Absätze eingegeben wurden. */
.seca-b-online {
	border: 1px solid #cfe6f7;
	background-color: #f2f9fe;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 12.5px;
	color: #235676;
	white-space: pre-line;
}

.seca-b-haken,
.seca-b-zustimmung {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	flex-wrap: wrap;
}

.seca-b-zustimmung input {
	margin-top: 3px;
}

.seca-b-zustimmung .seca-b-feldfehler {
	width: 100%;
}

/* Das versteckte Feld für den Spamschutz: für Menschen unsichtbar, für ein
   automatisches Programm ein verlockendes leeres Feld. */
.seca-b-falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.seca-b-formfuss {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.seca-buchung .seca-b-knopf {
	background-color: var(--seca-b-gruen);
	color: var(--seca-b-akzent-schrift, #fff);
	border: 0;
	border-radius: 10px;
	padding: 13px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.seca-buchung .seca-b-knopf:hover {
	background-color: var(--seca-b-gruen-dunkel);
}

.seca-buchung .seca-b-knopf[disabled] {
	opacity: 0.6;
}

/* Ein Knopf, der in Wahrheit ein Link ist (z. B. „Nein, behalten"): Er darf
   nicht unterstrichen sein und braucht dieselbe Fläche wie ein echter Knopf. */
.seca-buchung a.seca-b-knopf {
	display: inline-block;
	text-decoration: none;
}

/* Leiser Knopf (Vorlage: .knopf.leise) — für alles, was der Kunde eher selten
   will: Absagen, Verschieben, Abbrechen. Er MUSS mit .seca-buchung beginnen,
   sonst gewinnt das Zurücksetzen für Knöpfe (Merksatz aus 0.3.3). */
.seca-buchung .seca-b-knopf.seca-b-leiser {
	background-color: #fff;
	color: var(--seca-b-dunkel);
	border: 1px solid var(--seca-b-rahmen);
	font-weight: 500;
}

.seca-buchung .seca-b-knopf.seca-b-leiser:hover {
	background-color: var(--seca-b-karte);
}

/* Der Knopf, der wirklich absagt: rot, damit er sich vom Abbrechen
   unterscheidet. Er steht erst im zweiten Schritt, nie im ersten. */
.seca-buchung .seca-b-knopf.seca-b-gefahr {
	background-color: var(--seca-b-rot);
}

.seca-buchung .seca-b-knopf.seca-b-gefahr:hover {
	background-color: #b83a3a;
}

/* Zwei Knöpfe nebeneinander, auf dem Handy untereinander. */
.seca-b-wahl {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* Der Kasten für die Rückfrage vor dem Absagen. */
.seca-b-rueckfrage {
	max-width: 440px;
	margin: 0 auto 4px;
	text-align: left;
}

.seca-b-rueckfrage label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--seca-b-dunkel);
}

.seca-b-formfehler {
	font-size: 13px;
	color: var(--seca-b-rot);
}

/* ---------- Die Bestätigung (Vorlage, Ansicht 3) ---------- */

.seca-b-fertig {
	padding: 36px 24px;
	text-align: center;
}

.seca-b-haken-kreis {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--seca-b-gruen);
	color: var(--seca-b-akzent-schrift, #fff);
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
	font-size: 28px;
}

/* Wartet die Buchung noch auf ihre Bestätigung, ist der Kreis gelb statt
   grün — grün hieße "steht", und das wäre gelogen. */
.seca-b-haken-kreis.seca-b-wartet {
	background-color: #D89000;
}

.seca-b-fertig-aktionen {
	margin-top: 20px;
}

.seca-b-fertig-titel {
	margin: 0 0 6px;
	font-size: 20px;
}

.seca-b-fertig-sub {
	margin: 0 0 22px;
	color: var(--seca-b-grau);
	font-size: 14px;
}

.seca-b-fertig-karte {
	max-width: 440px;
	margin: 0 auto;
	text-align: left;
	border: 1px solid var(--seca-b-rahmen);
	border-radius: 12px;
	padding: 18px;
	background-color: var(--seca-b-karte);
}

.seca-b-fzeile-info {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: 14px;
}

.seca-b-fzeile-info + .seca-b-fzeile-info {
	border-top: 1px dashed var(--seca-b-rahmen);
}

.seca-b-fzeile-info .seca-b-wert {
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

.seca-b-warnung {
	max-width: 440px;
	margin: 16px auto 0;
	border: 1px solid #f0d9a8;
	background-color: #fdf6e7;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 12.5px;
	color: #7a5a12;
	text-align: left;
}

/* ---------- Ladezustand und Fehler ---------- */

.seca-b-laedt {
	color: var(--seca-b-grau);
	font-size: 13px;
	padding: 8px 0;
	margin: 0;
}

.seca-b-fehler {
	color: var(--seca-b-rot);
	font-size: 13px;
	padding: 8px 0;
	margin: 0;
}

/* ---------- Tastaturbedienung sichtbar machen ---------- */

.seca-buchung button:focus-visible,
.seca-buchung select:focus-visible {
	outline: 2px solid var(--seca-b-gruen);
	outline-offset: 2px;
}

/* ---------- Schmale Ansicht: die drei Spalten stapeln ----------
 *
 * Die Klasse seca-b-schmal setzt das Skript, sobald der KALENDER schmaler
 * ist als der Wert aus Einstellungen → Design. Bewusst nicht über eine
 * Medienabfrage: Die misst das Fenster, nicht den Kalender — und der steht
 * meist in einer Spalte, die viel schmaler ist. Genau daran sah der Monat
 * auf Tablet-Breite zerdrückt aus (Pierre, 11.08.2026).
 *
 * Die Medienabfrage darunter ist nur die Rückfallebene für den Fall, dass
 * kein JavaScript läuft.
 */

.seca-buchung.seca-b-schmal .seca-b-gitter {
	grid-template-columns: 1fr;
	min-height: 0;
}

.seca-buchung.seca-b-schmal .seca-b-links {
	border-right: 0;
	border-bottom: 1px solid var(--seca-b-rahmen);
}

.seca-buchung.seca-b-schmal .seca-b-rechts {
	border-left: 0;
	border-top: 1px solid var(--seca-b-rahmen);
}

.seca-buchung.seca-b-schmal .seca-b-zeiten {
	max-height: none;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.seca-buchung.seca-b-schmal .seca-b-formkoerper {
	grid-template-columns: 1fr;
}

/* Rückfallebene ohne JavaScript. */
@media (max-width: 600px) {
	.seca-b-gitter {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.seca-b-links {
		border-right: 0;
		border-bottom: 1px solid var(--seca-b-rahmen);
	}

	.seca-b-rechts {
		border-left: 0;
		border-top: 1px solid var(--seca-b-rahmen);
	}

	.seca-b-zeiten {
		max-height: none;
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	.seca-b-formkoerper {
		grid-template-columns: 1fr;
	}
}

/* ---------- Weniger Bewegung, wenn das System es wünscht ---------- */

@media (prefers-reduced-motion: reduce) {
	.seca-b-arbeitet {
		transition: none;
	}
}

/* ==========================================================================
   Veranstaltungen (Etappe 1.1) — eine LISTE, kein Kalender (Konzept §4.2).
   Knoepfe, Eingabefelder, Hinweise und die Spamschutz-Falle kommen aus dem
   vorhandenen Baukasten (.seca-b-*); hier steht nur, was die Liste selbst
   ausmacht.
   ========================================================================== */
.seca-ev-liste {
	display: grid;
	gap: 18px;
}

.seca-ev-karte {
	background: var(--seca-b-karte);
	border: 1px solid var(--seca-b-rahmen);
	border-radius: var(--seca-b-radius);
	padding: 20px 22px;
}

.seca-ev-titel {
	margin: 0 0 6px;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--seca-b-dunkel);
}

.seca-ev-wann {
	margin: 0 0 2px;
	color: var(--seca-b-dunkel);
}

.seca-ev-dauer,
.seca-ev-ort {
	color: var(--seca-b-grau);
}

.seca-ev-ort {
	margin: 0 0 10px;
}

/*
 * Der Preis — bei der Veranstaltung und bei der Terminart.
 *
 * Er steht VOR der Anmeldung (Pierres Fund vom 17.08.2026): Bis dahin wurde er
 * nur benutzt, um zu entscheiden, OB bezahlt werden muss, und nirgends
 * angezeigt. Der Originalpreis steht durchgestrichen DAVOR — so herum liest
 * man einen Rabatt.
 */
.seca-ev-preis {
	margin: 0 0 10px;
	font-size: 1.05em;
}

.seca-ev-preis-alt,
.seca-b-preis-alt {
	color: var(--seca-b-grau);
	margin-right: 4px;
	font-weight: 400;
}

.seca-ev-text {
	margin: 10px 0;
}

.seca-ev-plaetze {
	margin: 10px 0 0;
	font-weight: 600;
	color: var(--seca-b-gruen-dunkel);
}

/* „Ausgebucht" und „Anmeldung geschlossen" stehen ruhig da, nicht in Rot:
   Es ist kein Fehler des Besuchers. */
.seca-ev-zu,
.seca-ev-leer {
	margin: 12px 0 0;
	color: var(--seca-b-grau);
	font-style: italic;
}

.seca-ev-formular {
	margin-top: 16px;
	display: grid;
	gap: 10px;
}

.seca-ev-feld {
	margin: 0;
	display: grid;
	gap: 4px;
}

.seca-ev-einwilligung {
	margin: 4px 0 0;
	font-size: 0.92rem;
	line-height: 1.45;
}

.seca-ev-einwilligung input {
	margin-right: 6px;
}

.seca-ev-knopf {
	justify-self: start;
}

/* Nur fuer Vorleseprogramme. Eine EIGENE Klasse, nicht die des Themes
   (.screen-reader-text): Fehlt sie dort, stuende der Zusatztext plotzlich
   sichtbar mitten im Knopf. */
.seca-buchung .seca-b-nurvorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Zugeklapptes Anmeldeformular in der Liste (Pierre, 14.08.2026). Der
   <summary> sieht aus wie ein Knopf; der eigene Pfeil ersetzt das Dreieck,
   das jeder Browser anders zeichnet. */
.seca-buchung .seca-ev-aufklapp {
	margin-top: 14px;
}

.seca-buchung .seca-ev-aufklapp-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--seca-b-gruen);
	color: var(--seca-b-akzent-schrift, #fff);
	border-radius: 10px;
	padding: 13px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.seca-buchung .seca-ev-aufklapp-knopf::-webkit-details-marker {
	display: none;
}

.seca-buchung .seca-ev-aufklapp-knopf:hover {
	background-color: var(--seca-b-gruen-dunkel);
}

/* Sichtbarer Fokus fuer die Tastatur: ohne ihn weiss niemand, wo er steht. */
.seca-buchung .seca-ev-aufklapp-knopf:focus-visible {
	outline: 2px solid var(--seca-b-dunkel);
	outline-offset: 2px;
}

.seca-buchung .seca-ev-aufklapp-wort::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	border: 5px solid transparent;
	border-top-color: #fff;
	transform: translateY(2px);
}

.seca-buchung .seca-ev-aufklapp[open] .seca-ev-aufklapp-wort::after {
	transform: translateY(-3px) rotate(180deg);
}

/* Allein auf einer Landingpage: mehr Luft, groessere Ueberschrift. */
.seca-ev-liste--eine .seca-ev-karte {
	padding: 26px 28px;
}

.seca-ev-liste--eine .seca-ev-titel {
	font-size: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Bezahlte Termine (Etappe 1.2): der Schritt vor der Kasse.

   Pierres Fund vom 15.08.2026: Kästchen, Satz und Knopf liefen ineinander —
   der grüne Knopf stand mitten im Satz. Grund: Ein <label> ist von Haus aus
   inline, und der Knopf steht im selben Formular daneben. Deshalb hier:
   der Satz als eigener Block, links ausgerichtet (ein umbrechender Satz auf
   Mitte ist schwer zu lesen), der Knopf darunter auf eigener Zeile.
   --------------------------------------------------------------------------- */
.seca-buchung .seca-b-widerruf {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 30rem;
	margin: 0 auto 18px;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	color: var(--seca-b-grau);
	cursor: pointer;
}

/* Das Kästchen darf beim Umbrechen des Satzes nicht mitschrumpfen und soll
   auf der ersten Textzeile sitzen, nicht darüber. */
.seca-buchung .seca-b-widerruf input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
}

/* Der Betrag über der Kasse — er ist die wichtigste Zahl auf dieser Seite. */
.seca-buchung .seca-b-betrag {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--seca-b-dunkel);
}

/* Die Kasse von „smartEngin buy". Sie bringt ihr eigenes Stylesheet mit;
   hier steht nur, wie sie in dieser Karte sitzt. Bewusst NICHTS an ihren
   Knöpfen selbst — sonst sähe die Kasse hier anders aus als im Shop. */
.seca-buchung .seca-b-kasse {
	max-width: 30rem;
	margin: 0 auto;
	text-align: left;
}