/* =========================================================================
   Tresörchen Kegelbahn-Buchung – helles Design im CI
   Hut-Rot #9a2e30 + Schwarz, Schrift Figtree (vom Theme)
   ========================================================================= */

.tb-widget,
.tb-app {
	--tb-red: #9a2e30;
	--tb-red-dark: #7d2426;
	--tb-ink: #000;
	--tb-text: #1a1a1a;
	--tb-muted: #6b6b6b;
	--tb-line: #e4e4e4;
	--tb-soft: #f6f6f6;
	--tb-radius: 4px;
	--tb-bar: 64px;
}

/* ---------- Vollbild-Rahmen ---------- */
body.tb-app { margin: 0; background: #fff; color: var(--tb-text); font-family: Figtree, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.tb-app-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: var(--tb-bar);
	padding: 0 clamp(16px, 4vw, 40px);
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--tb-line);
	backdrop-filter: blur(8px);
}
.admin-bar .tb-app-bar { top: 32px; }
.tb-app-logo img { display: block; width: auto; height: 30px; }
.tb-app-close { grid-column: -2 / -1; justify-self: end; /* immer letzte Spalte, auch ohne Schrittanzeige */ display: inline-flex; align-items: center; gap: 8px; color: var(--tb-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.tb-app-close:hover { color: var(--tb-red); }
.tb-app-main { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px) 64px; }

.tb-progress { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: tbstep; }
.tb-progress li { counter-increment: tbstep; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--tb-muted); font-size: 13px; font-weight: 500; }
.tb-progress li:not(:last-child)::after { content: ""; width: 28px; height: 1px; margin: 0 4px 0 6px; background: var(--tb-line); }
.tb-progress li::before { content: counter(tbstep); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--tb-line); border-radius: 50%; font-size: 12px; }
.tb-progress li.is-done { color: var(--tb-ink); }
.tb-progress li.is-done::before { content: "✓"; border-color: var(--tb-ink); background: var(--tb-ink); color: #fff; }
.tb-progress li.is-current { color: var(--tb-ink); }
.tb-progress li.is-current::before { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }

@media (max-width: 860px) {
	.tb-app { --tb-bar: 56px; }
	.tb-app-bar { grid-template-columns: 1fr auto; row-gap: 0; padding-top: 10px; }
	.tb-app-logo img { height: 24px; }
	.tb-app-close span:first-child { display: none; }
	.tb-app-close { font-size: 20px; }
	.tb-app-bar .tb-progress { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding: 8px 0 10px; }
	.tb-progress li { font-size: 12px; }
	.tb-progress li:not(:last-child)::after { width: 14px; }
	.tb-progress li:not(.is-current) span { display: none; }
	.tb-app-main { padding-bottom: 120px; }
}
@media (max-width: 782px) { .admin-bar .tb-app-bar { top: 46px; } }

/* ---------- Grundlayout ---------- */
.tb-widget { max-width: 1120px; margin: 0 auto; color: var(--tb-text); font-size: 15px; line-height: 1.55; text-align: left; }
.tb-widget *,
.tb-widget *::before,
.tb-widget *::after { box-sizing: border-box; }
.tb-widget.tb-narrow { max-width: 640px; text-align: center; }
.tb-widget p { margin: 0 0 12px; color: var(--tb-text); }
.tb-widget a:not(.tb-btn) { color: var(--tb-ink); text-decoration: underline; text-decoration-color: var(--tb-red); text-underline-offset: 3px; }
.tb-widget a:not(.tb-btn):hover { color: var(--tb-red); }

.tb-intro { margin: 0 0 24px; }
.tb-widget .tb-kicker { margin: 0 0 4px; color: var(--tb-red); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.tb-widget .tb-title { margin: 0 0 8px; color: var(--tb-ink); font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.tb-widget .tb-timer { margin: 0; color: var(--tb-muted); font-size: 14px; }
.tb-widget .tb-timer strong { color: var(--tb-red); font-variant-numeric: tabular-nums; }

.tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tb-grid-checkout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.tb-col { display: grid; gap: 24px; min-width: 0; }
@media (max-width: 860px) {
	.tb-grid,
	.tb-grid-checkout { grid-template-columns: 1fr; gap: 16px; }
	.tb-col { gap: 16px; }
}

.tb-card { padding: clamp(20px, 3vw, 28px); background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); }
.tb-card-hero { padding: clamp(24px, 4vw, 40px); }
.tb-summary-card { background: var(--tb-soft); border-color: var(--tb-soft); border-top: 3px solid var(--tb-red); }
/* Desktop: rechte Spalte (Zusammenfassung + Buchen-Leiste) bleibt als Ganzes stehen – nichts schiebt sich übereinander */
@media (min-width: 861px) {
	.tb-grid-checkout > .tb-col:last-child { position: sticky; top: calc(var(--tb-bar) + 24px); align-self: start; }
	.tb-grid-checkout .tb-actionbar { position: static; }
}

.tb-widget .tb-step { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--tb-ink); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; }
.tb-step-no { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tb-ink); color: #fff; font-size: 12px; letter-spacing: 0; }

/* ---------- Formularfelder ---------- */
.tb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-field-wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .tb-grid-checkout .tb-fields { grid-template-columns: 1fr; } }
.tb-widget label.tb-field { display: block; margin: 0; color: var(--tb-text); font-size: 15px; letter-spacing: normal; text-transform: none; }
.tb-field > span { display: block; margin-bottom: 6px; color: var(--tb-muted); font-size: 13px; font-weight: 500; }
.tb-widget .tb-field select,
.tb-widget .tb-field input,
.tb-widget .tb-field textarea {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #cfcfcf;
	border-radius: var(--tb-radius);
	background: #fff;
	color: var(--tb-ink);
	font: inherit;
	font-size: 16px; /* verhindert Zoom auf iOS */
	box-shadow: none;
}
.tb-widget .tb-field textarea { min-height: 96px; resize: vertical; }
.tb-widget .tb-field select:focus,
.tb-widget .tb-field input:focus,
.tb-widget .tb-field textarea:focus { outline: none; border-color: var(--tb-ink); box-shadow: 0 0 0 3px rgba(154, 46, 48, 0.18); }

/* ---------- Kalender ---------- */
.tb-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tb-widget .tb-cal-title { color: var(--tb-ink); font-size: 18px; font-weight: 600; }
.tb-widget .tb-cal-nav,
.tb-widget .tb-day,
.tb-widget .tb-slot { margin: 0; font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.tb-widget .tb-cal-nav { width: 40px; height: 40px; padding: 0; border: 1px solid var(--tb-line); border-radius: 50%; background: #fff; color: var(--tb-ink); font-size: 20px; line-height: 1; }
.tb-widget .tb-cal-nav:hover:not(:disabled) { border-color: var(--tb-ink); }
.tb-widget .tb-cal-nav:disabled { opacity: 0.3; cursor: default; }
.tb-cal-week,
.tb-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tb-cal-week span { padding: 4px 0; color: var(--tb-muted); font-size: 12px; font-weight: 500; text-align: center; }
.tb-cal-days { transition: opacity 0.2s; }
.tb-cal-days.is-loading { opacity: 0.4; }
.tb-widget .tb-day { aspect-ratio: 1; padding: 0; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; color: var(--tb-ink); font-size: 15px; font-weight: 500; }
.tb-widget .tb-day:hover:not(:disabled) { border-color: var(--tb-ink); }
.tb-widget .tb-day:disabled { border-color: transparent; background: transparent; color: #c4c4c4; font-weight: 400; cursor: default; }
.tb-widget .tb-day.is-today { box-shadow: inset 0 -2px 0 var(--tb-red); }
.tb-widget .tb-day.is-selected { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }

/* ---------- Zeitslots ---------- */
.tb-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.tb-widget .tb-slot { min-height: 46px; padding: 10px 8px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; color: var(--tb-ink); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tb-widget .tb-slot:hover { border-color: var(--tb-ink); }
.tb-widget .tb-slot.is-selected { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }
.tb-widget .tb-muted { margin: 0; color: var(--tb-muted); }
@media (max-width: 480px) { .tb-slot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Betrag / Zahlungsart ---------- */
.tb-widget label.tb-pay { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; color: var(--tb-text); font-size: 15px; letter-spacing: normal; text-transform: none; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.tb-widget label.tb-pay:has(input:checked) { border-color: var(--tb-red); box-shadow: 0 0 0 1px var(--tb-red); }
.tb-pay input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tb-red); }
.tb-pay > span { flex: 1; }
.tb-widget .tb-pay strong { color: var(--tb-ink); font-weight: 600; }
.tb-pay em { float: right; color: var(--tb-ink); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-pay small { display: block; margin-top: 2px; color: var(--tb-muted); font-size: 13px; }

.tb-legend { display: grid; gap: 4px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--tb-line); list-style: none; color: var(--tb-muted); font-size: 13px; }
.tb-legend li { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.tb-legend span { color: var(--tb-text); }

.tb-widget label.tb-check { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 10px; color: var(--tb-text); font-size: 14px; letter-spacing: normal; text-transform: none; cursor: pointer; }
.tb-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tb-red); }
.tb-widget .tb-small { margin: 8px 0 0; color: var(--tb-muted); font-size: 13px; }

/* ---------- Zusammenfassung ---------- */
.tb-dl { margin: 0 0 14px; }
.tb-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e2e2e2; }
.tb-dl dt { color: var(--tb-muted); }
.tb-dl dd { margin: 0; color: var(--tb-ink); text-align: right; font-variant-numeric: tabular-nums; }
.tb-dl-strong dd,
.tb-dl-strong dt { color: var(--tb-ink); font-weight: 600; }
.tb-widget .tb-link { display: inline-block; margin-top: 10px; font-size: 14px; }

/* ---------- Buttons ---------- */
.tb-widget .tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 14px 28px;
	border: 1px solid var(--tb-red);
	border-radius: var(--tb-radius);
	background: var(--tb-red);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}
.tb-widget .tb-btn:hover:not(:disabled) { border-color: var(--tb-red-dark); background: var(--tb-red-dark); color: #fff; }
.tb-widget .tb-btn:disabled { border-color: #d6d6d6; background: #d6d6d6; color: #fff; cursor: not-allowed; }
.tb-widget .tb-btn-ghost { border-color: var(--tb-ink); background: #fff; color: var(--tb-ink); }
.tb-widget .tb-btn-ghost:hover:not(:disabled) { border-color: var(--tb-ink); background: var(--tb-ink); color: #fff; }

/* ---------- Aktionsleiste (Desktop: in der Spalte, Handy: fest unten) ---------- */
.tb-actionbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--tb-radius); background: var(--tb-ink); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.tb-actionbar-info { display: grid; gap: 2px; min-width: 0; }
.tb-widget .tb-actionbar-info span { overflow: hidden; color: rgba(255, 255, 255, 0.75); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.tb-widget .tb-actionbar-info strong { color: #fff; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-widget .tb-actionbar-info .tb-sum-label { color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 400; }
.tb-actionbar .tb-btn { flex: none; }
.tb-widget .tb-actionbar .tb-btn:disabled { border-color: #444; background: #444; color: #aaa; }
.tb-widget .tb-hint { text-align: center; }
@media (max-width: 860px) {
	.tb-actionbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-radius: 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
	}
	.tb-widget .tb-actionbar .tb-btn { min-height: 48px; padding: 12px 20px; }
	.tb-widget .tb-hint { display: none; }
}

/* ---------- Hinweise ---------- */
.tb-widget .tb-alert { margin: 0 0 20px; padding: 14px 16px; border-left: 4px solid var(--tb-red); border-radius: var(--tb-radius); background: #fbeeee; color: var(--tb-ink); }
.tb-widget .tb-alert p { margin: 0 0 4px; }
.tb-widget .tb-alert p:last-child { margin: 0; }

/* ---------- Bestätigung ---------- */
.tb-bank { margin: 20px 0; padding: 4px 20px; border-left: 4px solid var(--tb-red); border-radius: var(--tb-radius); background: var(--tb-soft); }
.tb-widget .tb-bank p { margin: 14px 0; }
.tb-bank .tb-dl > div:last-child { border-bottom: 0; }
.tb-co-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.tb-narrow .tb-co-actions { justify-content: center; }

/* ---------- Danke-Seite (WooCommerce, Fallback) ---------- */
.tb-checkout-hint,
.tb-thankyou { margin: 0 0 24px; padding: 16px 20px; border-left: 4px solid #9a2e30; background: #f6f6f6; }
.tb-thankyou h2 { margin-top: 0; }
/* Schmale Handys: Aktionsleiste kompakt, Betrag immer vollständig sichtbar */
.tb-widget .tb-actionbar-info strong { white-space: nowrap; }
@media (max-width: 480px) {
	.tb-widget .tb-actionbar .tb-btn { padding: 12px 14px; font-size: 13px; letter-spacing: 0.6px; }
	.tb-grid-checkout .tb-actionbar-info > span { display: none; }
	.tb-widget .tb-actionbar-info strong { font-size: 17px; }
}

/* =========================================================================
   Schritt 1 – Überarbeitung 06.10.2026: Vertrauenszeile, Regler, Dauer-Buttons,
   Haken für erledigte Schritte, Zusammenfassung „Eure Buchung“ mit Bild
   ========================================================================= */
.tb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.tb-trust { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--tb-text); font-size: 14px; }
.tb-trust li { position: relative; margin: 0; padding-left: 22px; }
.tb-trust li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--tb-red); }
.tb-trust li::after { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* erledigte Schritte: Nummer wird zum roten Haken */
.tb-card.is-done .tb-step-no { background: var(--tb-red); font-size: 0; }
.tb-card.is-done .tb-step-no::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* Gruppe & Dauer */
.tb-group { display: grid; gap: 18px; }
.tb-group .tb-field > span { margin-bottom: 8px; }
.tb-stepper { display: inline-flex; align-items: stretch; border: 1px solid #cfcfcf; border-radius: var(--tb-radius); }
.tb-widget .tb-stepper-btn { width: 52px; min-height: 50px; margin: 0; padding: 0; border: 0; background: #fff; color: var(--tb-ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s; }
.tb-widget .tb-stepper-btn:hover:not(:disabled) { background: var(--tb-soft); color: var(--tb-red); }
.tb-widget .tb-stepper-btn:disabled { color: #c9c9c9; cursor: default; }
.tb-stepper-value { display: flex; align-items: center; justify-content: center; min-width: 140px; padding: 0 8px; border-left: 1px solid #e4e4e4; border-right: 1px solid #e4e4e4; color: var(--tb-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-widget .tb-chip { min-width: 72px; min-height: 46px; margin: 0; padding: 0 16px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; color: var(--tb-ink); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.tb-widget .tb-chip:hover { border-color: var(--tb-ink); }
.tb-widget .tb-chip[aria-checked="true"] { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }

/* Kalender: freie Tage deutlicher, Legende */
.tb-widget .tb-day:not(:disabled) { font-weight: 600; }
.tb-widget .tb-day:not(:disabled):not(.is-selected):hover { border-color: var(--tb-red); color: var(--tb-red); }
.tb-widget .tb-cal-legend { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--tb-muted); font-size: 12px; }
.tb-dot { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--tb-ink); border-radius: 2px; }
.tb-dot.is-off { margin-left: 10px; border-color: #d9d9d9; background: #f2f2f2; }
.tb-widget .tb-slot:not(.is-selected):hover { border-color: var(--tb-red); color: var(--tb-red); }

/* Zusammenfassung */
.tb-summary { padding: 0; overflow: hidden; border-color: var(--tb-ink); }
.tb-summary-head { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 20px 24px; background: #111 center / cover no-repeat; color: #fff; }
.tb-summary-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.75) 100%); }
.tb-summary-head > * { position: relative; }
.tb-widget .tb-summary-head .tb-kicker { margin: 0 0 2px; color: #fff; opacity: .85; }
.tb-summary-head strong { font-family: bebas_neuebold, "Bebas Neue", Figtree, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: 1px; line-height: 1; }
.tb-summary-body { padding: 18px 24px 22px; }
.tb-summary .tb-dl { margin: 0 0 18px; }
.tb-summary .tb-dl > div { padding: 9px 0; }
.tb-summary .tb-dl dd { font-weight: 600; }
.tb-widget .tb-pay-title { margin: 0 0 8px; color: var(--tb-muted); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.tb-prices { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tb-line); font-size: 13px; }
.tb-prices summary { color: var(--tb-ink); font-weight: 600; cursor: pointer; }
.tb-prices summary:hover { color: var(--tb-red); }
.tb-prices .tb-legend { margin-top: 10px; padding-top: 0; border-top: 0; }
.tb-summary .tb-hint { margin-top: 10px; text-align: left; }

@media (min-width: 861px) {
	.tb-col-summary { position: sticky; top: calc(var(--tb-bar) + 24px); align-self: start; }
	/* Aktionsleiste wird Teil der Zusammenfassung: Gesamtpreis groß, Button volle Breite */
	.tb-summary .tb-actionbar { position: static; display: grid; gap: 14px; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--tb-ink); border-radius: 0; background: none; color: var(--tb-ink); box-shadow: none; }
	.tb-widget .tb-summary .tb-actionbar-info .tb-sum-date { display: none; }
	.tb-widget .tb-summary .tb-actionbar-info strong { display: flex; justify-content: space-between; align-items: baseline; color: var(--tb-ink); font-size: 24px; }
	.tb-widget .tb-summary .tb-actionbar-info .tb-sum-label { color: var(--tb-ink); font-size: 14px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
	.tb-widget .tb-summary .tb-actionbar .tb-btn { width: 100%; }
	.tb-widget .tb-summary .tb-actionbar .tb-btn:disabled { border-color: #d6d6d6; background: #d6d6d6; color: #fff; }
}
@media (max-width: 860px) {
	.tb-summary-head { min-height: 110px; padding: 16px 18px; }
	.tb-summary-body { padding: 14px 18px 18px; }
	.tb-trust { gap: 4px 16px; font-size: 13px; }
}
@media (max-width: 400px) { .tb-stepper-value { min-width: 120px; } .tb-widget .tb-chip { min-width: 0; flex: 1 1 calc(33% - 8px); padding: 0 8px; } }
/* kompakter, damit die Zusammenfassung samt Button auch bei 800–900px Fensterhöhe ganz sichtbar stehen bleibt */
@media (min-width: 861px) {
	.tb-summary-head { min-height: 104px; padding: 16px 22px; }
	.tb-summary-head strong { font-size: 26px; }
	.tb-summary-body { padding: 12px 22px 18px; }
	.tb-summary .tb-dl { margin-bottom: 14px; font-size: 14px; }
	.tb-summary .tb-dl > div { padding: 6px 0; }
	.tb-summary .tb-pay { margin-bottom: 8px; padding: 10px 14px; font-size: 14px; }
	.tb-summary .tb-pay small { font-size: 12px; }
	.tb-summary .tb-actionbar { margin-top: 12px; padding-top: 12px; gap: 12px; }
	.tb-widget .tb-summary .tb-actionbar .tb-btn { min-height: 48px; padding: 12px 20px; }
	.tb-summary .tb-hint { margin-top: 8px; font-size: 12px; }
	.tb-prices { margin-top: 10px; padding-top: 10px; }
}
/* versteckte Auswahlfelder: Theme-/Widget-Regeln (width:100%, min-height) dürfen sie nicht aufziehen – sonst seitliches Scrollen */
.tb-widget .tb-field select.tb-sr { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); }
.tb-widget .tb-field { position: relative; }
@media (min-width: 861px) {
	.tb-widget .tb-summary .tb-actionbar .tb-btn { width: 100% !important; }
	.tb-widget .tb-summary .tb-actionbar-info .tb-sum-total { overflow: visible; color: var(--tb-ink); font-size: 24px; font-weight: 600; white-space: nowrap; }
}
@media (min-width: 861px) {
	.tb-summary .tb-actionbar { justify-content: stretch; align-items: stretch; grid-template-columns: minmax(0, 1fr); } /* Basis-Leiste nutzt space-between → Spalte würde auf Inhaltsbreite schrumpfen */
}
/* Schritt 2: Platzhalter klar als Hinweis erkennbar */
.tb-widget ::placeholder { color: #9b9b9b; opacity: 1; }
.tb-checkout .tb-timer + .tb-trust { margin-top: 10px; }
.tb-summary .tb-dl-strong { border-bottom: 0; }
/* Schritt 2 Handy: „Jetzt zu zahlen“ klein über dem Betrag, damit der Betrag neben dem Button ganz sichtbar bleibt */
@media (max-width: 860px) {
	.tb-widget.tb-checkout .tb-actionbar-info .tb-sum-label { display: block; font-size: 11px; letter-spacing: .5px; line-height: 1.2; }
	.tb-widget.tb-checkout .tb-actionbar-info .tb-sum-total { overflow: visible; color: #fff; font-size: 18px; }
}

/* =========================================================================
   Handy-Ablauf (06.10.2026): Weiter ohne Termin führt zum fehlenden Schritt,
   Felder nicht unter festen Leisten, Leiste unten beim Tippen ausblenden
   ========================================================================= */
.tb-widget .tb-btn.is-disabled { border-color: #d6d6d6; background: #d6d6d6; color: #fff; }
.tb-widget .tb-actionbar .tb-btn.is-disabled { border-color: #444; background: #444; color: #cfcfcf; }
@media (min-width: 861px) { .tb-widget .tb-summary .tb-actionbar .tb-btn.is-disabled { border-color: #d6d6d6; background: #d6d6d6; color: #fff; } }
.tb-card.is-attention { animation: tbAttention 1.6s ease-out; }
@keyframes tbAttention { 0%, 40% { box-shadow: 0 0 0 3px var(--tb-red); border-color: var(--tb-red); } 100% { box-shadow: 0 0 0 0 rgba(154,46,48,0); } }
.tb-app input, .tb-app select, .tb-app textarea, .tb-app .tb-card { scroll-margin-top: 110px; scroll-margin-bottom: 120px; }
@media (max-width: 860px) {
	body.tb-typing .tb-actionbar { display: none; }
	body.tb-typing .tb-app-main { padding-bottom: 40px; }
}
/* Touch-Geräte: kein „hängender“ Hover-Rahmen nach dem Antippen */
@media (hover: none) {
	.tb-widget .tb-slot:not(.is-selected):hover, .tb-widget .tb-day:not(:disabled):not(.is-selected):hover { border-color: var(--tb-line); color: var(--tb-ink); }
	.tb-widget .tb-chip:not([aria-checked="true"]):hover { border-color: var(--tb-line); }
	.tb-widget .tb-stepper-btn:hover:not(:disabled) { background: #fff; color: var(--tb-ink); }
}
/* Felder: Beschriftung über dem Feld soll beim Springen mit sichtbar bleiben */
.tb-app input, .tb-app select, .tb-app textarea { scroll-margin-top: 140px; }
/* „optional“ in der Schritt-Überschrift (z. B. Gutschein: „Für wen?“) */
.tb-widget .tb-step .tb-optional { margin-left: auto; color: var(--tb-muted); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: none; }

/* =========================================================================
   Kopfleiste (06.10.2026): Desktop rundes Original-Logo, Handy ohne Logo –
   dort stehen die Schritte links, die Leiste ist einzeilig
   ========================================================================= */
.tb-app { --tb-bar: 76px; }
.tb-app-logo img { width: auto; height: 56px; }
@media (max-width: 860px) {
	.tb-app { --tb-bar: 58px; }
	.tb-app-bar:has(.tb-progress) { grid-template-columns: 1fr auto; padding-top: 0; }
	.tb-app-bar:has(.tb-progress) .tb-app-logo { display: none; }
	.tb-app-bar .tb-progress { grid-column: 1; grid-row: 1; justify-content: flex-start; padding: 0; }
	.tb-app-logo img { height: 44px; }
}