/* Booking form. Inherits the theme font; accent colour comes from the settings. */
.spr-app {
	--spr-accent: #1f4e79;
	--spr-border: #dcd7d0;
	--spr-muted: #6b6560;
	--spr-bg: #fff;
	width: 100%;
	min-width: 0;
	max-width: 1100px;
	margin: 0 auto;
	font: inherit;
	font-family: var(--spr-font, inherit);
	font-size: calc(var(--spr-scale, 1) * 1em);
	color: var(--spr-text, inherit);
	background: var(--spr-area, transparent);
}
.spr-card { min-width: 0; }
/* Themes widen .alignwide with negative margins; on phones that pushes the page sideways. */
@media (max-width: 782px) {
	.spr-app.alignwide { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
}
.spr-app *, .spr-app *::before, .spr-app *::after { box-sizing: border-box; }
.spr-app [hidden] { display: none !important; }
.spr-heading { margin: 0 0 16px; }

.spr-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: var(--spr-radius, 10px);
	background: color-mix(in srgb, var(--spr-accent) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--spr-accent) 30%, #fff);
	color: #2a2a2a;
}
.spr-banner-pct { font-size: 1.6em; color: var(--spr-accent); white-space: nowrap; }

.spr-card {
	background: var(--spr-bg);
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius-lg, 12px);
	padding: 20px;
	margin: 0 0 16px;
	scroll-margin-top: 140px;
}
.spr-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px !important;
	font-size: 1.2em;
	line-height: 1.3;
}
.spr-num {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: var(--spr-accent);
	color: var(--spr-on-accent, #fff);
	font-size: .8em;
}

.spr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.spr-field { display: block; margin: 0 0 14px; }
.spr-label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .92em; }
.spr-hint { display: block; margin-top: 4px; font-size: .82em; color: var(--spr-muted); }
.spr-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius-sm, 8px);
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
}
.spr-input:focus { outline: 2px solid var(--spr-accent); outline-offset: 1px; border-color: var(--spr-accent); }
textarea.spr-input { min-height: 80px; resize: vertical; }

/* Step 1 blocks */
.spr-block { margin: 0 0 22px; }
.spr-block:last-child { margin-bottom: 0; }
.spr-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.spr-block-head .spr-label { margin: 0; }
.spr-month { color: var(--spr-muted); font-size: .9em; }
.spr-navs { display: flex; gap: 6px; margin-left: auto; }
.spr-nav {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: 50%;
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.spr-nav:hover:not(:disabled) { border-color: var(--spr-accent); color: var(--spr-accent); }
.spr-nav:disabled { opacity: .35; cursor: default; }

/* Persons stepper */
.spr-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: 999px;
	background: var(--spr-surface, #fff);
}
.spr-step {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--spr-accent) 10%, #fff);
	color: var(--spr-accent);
	font: inherit;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.spr-step:hover:not(:disabled) { background: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-step:disabled { opacity: .35; cursor: default; }
.spr-step-value { min-width: 110px; text-align: center; font-weight: 700; }

/* Date strip */
.spr-days {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 2px 8px;
	scrollbar-width: none;
}
.spr-days::-webkit-scrollbar { display: none; }
.spr-day {
	display: flex;
	flex: 0 0 68px;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius-lg, 14px);
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	line-height: 1.15;
	cursor: pointer;
	scroll-snap-align: start;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.spr-day:hover:not(:disabled) { border-color: var(--spr-accent); transform: translateY(-1px); }
.spr-day-wd { font-size: .78em; color: var(--spr-muted); }
.spr-day-num { font-size: 1.35em; font-weight: 700; }
.spr-day-mon { font-size: .72em; color: var(--spr-muted); text-transform: uppercase; letter-spacing: .04em; }
.spr-day.is-active { background: var(--spr-accent); border-color: var(--spr-accent); color: var(--spr-on-accent, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--spr-accent) 35%, transparent); }
.spr-day.is-active .spr-day-wd, .spr-day.is-active .spr-day-mon { color: rgba(255, 255, 255, .85); }
.spr-day:disabled { background: #f6f4f1; border-style: dashed; color: #736d66; cursor: not-allowed; }
/* Geschlossene Tage bleiben lesbar: 4,7 : 1 statt 2,1 : 1 */
.spr-day:disabled .spr-day-wd, .spr-day:disabled .spr-day-num, .spr-day:disabled .spr-day-mon { color: #736d66; }

/* Time slots */
.spr-slots { display: grid; gap: 14px; }
.spr-slot-group-title { margin: 0 0 6px; font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--spr-muted); }
.spr-slot-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.spr-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 10px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius-lg, 12px);
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	font-weight: 600;
	line-height: 1.15;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.spr-slot:hover { border-color: var(--spr-accent); }
.spr-slot[aria-pressed="true"] { background: var(--spr-accent); border-color: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-slot-few { font-size: .68em; font-weight: 600; color: #b5531b; }
.spr-slot[aria-pressed="true"] .spr-slot-few { color: rgba(255, 255, 255, .9); }
.spr-slots[aria-busy="true"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.spr-skeleton {
	border-color: transparent;
	background: linear-gradient(90deg, #eeebe7 25%, #f7f5f2 50%, #eeebe7 75%);
	background-size: 200% 100%;
	animation: spr-shimmer 1.2s infinite linear;
	cursor: default;
}
@keyframes spr-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .spr-skeleton { animation: none; } .spr-day { transition: none; } }
.spr-empty { margin: 0; color: var(--spr-muted); }
.spr-error { color: #b22e2e; }

.spr-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: .88em; color: var(--spr-muted); }
/* Area tabs + zoomed plan */
.spr-area-tabs { display: flex; gap: 6px; margin: 0 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.spr-area-tabs::-webkit-scrollbar { display: none; }
.spr-area-tabs[hidden] { display: none; }
.spr-area-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: 999px;
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	cursor: pointer;
}
.spr-area-tab[aria-pressed="true"] { background: var(--spr-accent); border-color: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-area-count { min-width: 20px; padding: 1px 6px; border-radius: var(--spr-radius, 10px); background: color-mix(in srgb, var(--spr-accent) 12%, #fff); color: var(--spr-accent); font-size: .78em; text-align: center; }
.spr-area-tab[aria-pressed="true"] .spr-area-count { background: rgba(255, 255, 255, .22); color: #fff; }
.spr-app .spr-plan-zoom { position: relative; overflow: hidden; }
.spr-app .spr-plan-zoom .spr-plan { min-width: 0; transition: width .3s ease, left .3s ease, top .3s ease; }
@media (prefers-reduced-motion: reduce) { .spr-app .spr-plan-zoom .spr-plan { transition: none; } }

.spr-card > .spr-label { margin-top: 16px; }
.spr-table-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.spr-table-list .spr-empty { grid-column: 1 / -1; }
.spr-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	min-height: 44px;
	padding: 8px 10px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius, 10px);
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	font-size: .9em;
	text-align: left;
	cursor: pointer;
}
.spr-chip span { font-size: .85em; color: var(--spr-muted); }
.spr-chip:hover { border-color: var(--spr-accent); }
.spr-chip.is-selected { border-color: var(--spr-accent); box-shadow: inset 0 0 0 1px var(--spr-accent); background: color-mix(in srgb, var(--spr-accent) 8%, #fff); }

.spr-msg {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--spr-radius-sm, 8px);
	background: #fdecec;
	border: 1px solid #f1b5b5;
	color: #8a1f1f;
}

.spr-summary { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--spr-radius, 10px); background: var(--spr-soft, #f7f5f2); }
.spr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.spr-dl dt { color: var(--spr-muted); }
.spr-dl dd { margin: 0; font-weight: 600; }
.spr-link { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--spr-accent); font: inherit; text-decoration: underline; cursor: pointer; }

.spr-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: .9em; }
.spr-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }

.spr-btn {
	display: inline-block;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--spr-radius-sm, 8px);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.spr-btn-primary { background: var(--spr-accent); color: var(--spr-on-accent, #fff); width: 100%; }
.spr-btn-primary:hover { filter: brightness(1.1); }
.spr-btn:disabled { opacity: .6; cursor: wait; }

.spr-done { text-align: center; }
.spr-done .spr-card-title { justify-content: center; }
.spr-done .spr-dl { max-width: 360px; margin: 16px auto; text-align: left; }
.spr-done .spr-banner { justify-content: center; }
.spr-code { display: inline-block; margin: 8px auto; padding: 12px 24px; border: 2px dashed var(--spr-accent); border-radius: var(--spr-radius, 10px); }
.spr-code strong { font-size: 1.8em; letter-spacing: .12em; color: var(--spr-accent); }

@media (max-width: 480px) {
	.spr-card { padding: 16px; }
	.spr-banner { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Pre-order */
.spr-pre-intro { margin: 0 0 14px; color: var(--spr-muted); }
.spr-btn-outline { width: auto; min-height: 44px; padding: 10px 18px; border: 1px solid var(--spr-accent); background: var(--spr-surface, #fff); color: var(--spr-accent); }
.spr-btn-outline:hover, .spr-btn-outline[aria-expanded="true"] { background: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-pre-panel { margin-top: 16px; }
.spr-pre-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.spr-pre-tab { min-height: 40px; padding: 8px 18px; border: var(--spr-bw, 1px) solid var(--spr-border); border-radius: 999px; background: var(--spr-surface, #fff); color: var(--spr-text, #222); font: inherit; font-weight: 600; cursor: pointer; }
.spr-pre-tab[aria-pressed="true"] { background: var(--spr-accent); border-color: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-pre-list { max-height: 460px; overflow-y: auto; padding-right: 4px; border-top: 1px solid var(--spr-border); }
.spr-pre-cat-title { font-family: inherit; font-weight: 700; line-height: normal; position: sticky; top: 0; z-index: 1; margin: 0 !important; padding: 12px 0 6px; background: var(--spr-bg); font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--spr-muted); }
.spr-pre-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--spr-radius, 10px); }
.spr-pre-item + .spr-pre-item { border-top: 1px dashed var(--spr-border); }
.spr-pre-item.is-picked { background: color-mix(in srgb, var(--spr-accent) 7%, #fff); }
.spr-pre-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spr-pre-info span { color: var(--spr-muted); font-size: .85em; line-height: 1.4; }
.spr-pre-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spr-qty { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: var(--spr-bw, 1px) solid var(--spr-border); border-radius: 999px; background: var(--spr-surface, #fff); }
.spr-qty-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--spr-accent) 10%, #fff); color: var(--spr-accent); font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.spr-qty-btn:hover:not(:disabled) { background: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-qty-btn:disabled { opacity: .3; cursor: default; }
.spr-qty-val { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.spr-cart { margin-top: 16px; padding: 14px 16px; border-radius: var(--spr-radius-lg, 12px); background: var(--spr-soft, #f7f5f2); }
.spr-cart-title { margin-bottom: 8px; font-weight: 700; }
.spr-cart-lines { margin: 0 0 8px; padding: 0; list-style: none; }
.spr-cart-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.spr-cart-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--spr-border); font-variant-numeric: tabular-nums; }
.spr-cart-sums dd { margin: 0; text-align: right; }
.spr-cart-off { color: #1f6b3a; }
.spr-cart-total { font-weight: 700; }
.spr-cart-done { max-width: 420px; margin: 16px auto; text-align: left; }
.spr-pre-summary { margin: -6px 0 16px; padding: 10px 14px; border-radius: var(--spr-radius, 10px); background: color-mix(in srgb, var(--spr-accent) 8%, #fff); font-size: .92em; }

@media (max-width: 480px) {
	.spr-pre-item { grid-template-columns: minmax(0, 1fr) auto; }
	.spr-pre-price { grid-column: 1; grid-row: 2; font-size: .9em; }
	.spr-qty { grid-column: 2; grid-row: 1 / span 2; }
}
.spr-card-title:focus:not(:focus-visible) { outline: none; }

/* ---- Two columns: steps left, overview right (sticky); on phones the overview is a bar at the bottom ---- */
.spr-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 24px; align-items: start; }
.spr-steps { min-width: 0; }
.spr-aside {
	position: sticky;
	top: var(--spr-sticky-top, 24px);
	padding: 20px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: var(--spr-radius-lg, 12px);
	background: var(--spr-bg);
}
.spr-aside-title { margin: 0 0 12px; font-weight: 700; font-size: 1.05em; }
.spr-aside-list { display: grid; gap: 0; margin: 0 0 14px; }
.spr-aside-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--spr-border); }
.spr-aside-row dt { color: var(--spr-muted); }
.spr-aside-row dd { margin: 0; font-weight: 600; text-align: right; }
.spr-aside-row.is-open dd { font-weight: 400; color: var(--spr-muted); font-style: italic; }
.spr-aside-line { display: none; margin: 0; }
.spr-aside-perk { margin: 0 0 14px; font-size: .88em; color: var(--spr-muted); }
.spr-aside-cta { width: 100%; }

/* Finished steps fold into one line */
.spr-card-done { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.spr-card:not(.is-done) > .spr-card-done { display: none; }
.spr-card.is-done > :not(.spr-card-title):not(.spr-card-done) { display: none !important; }
.spr-card.is-done .spr-card-title { margin-bottom: 6px !important; }
.spr-card.is-done .spr-num { background: color-mix(in srgb, var(--spr-accent) 14%, #fff); color: var(--spr-accent); }
.spr-card-done-text { font-weight: 600; }
.spr-card-done .spr-link { margin: 0; }

/* Table step: legend and quick pick in one row */
.spr-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.spr-plan-head .spr-legend { margin: 0; }

/* Pre-order: one tab per menu, the list grows with the page instead of scrolling inside */
.spr-pre-tabs { flex-wrap: wrap; align-items: center; }
.spr-pre-sep { flex-basis: 100%; height: 0; overflow: hidden; }
.spr-pre-tab { display: inline-flex; align-items: center; gap: 8px; }
.spr-pre-tab-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--spr-accent) 14%, #fff); color: var(--spr-accent); font-size: .8em; text-align: center; }
.spr-pre-tab[aria-pressed="true"] .spr-pre-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }
.spr-app .spr-pre-list { max-height: none; overflow: visible; padding-right: 0; }
.spr-pre-next { margin-top: 18px; }

@media (max-width: 900px) {
	.spr-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.spr-aside {
		position: sticky;
		top: auto;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 calc(-1 * var(--spr-bleed, 0px));
		padding: 10px var(--spr-bleed, 12px) calc(10px + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 0;
		box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .35);
	}
	.spr-aside-title, .spr-aside-list, .spr-aside-perk { display: none; }
	.spr-aside-line { display: block; flex: 1 1 auto; min-width: 0; font-size: .9em; font-weight: 600; line-height: 1.3; }
	.spr-aside-cta { width: auto; flex: none; min-height: 46px; padding: 10px 16px; }
}

/* ---- Month calendar (opens from "Kalender" beside the day strip) ---- */
.spr-cal-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	border: var(--spr-bw, 1px) solid var(--spr-border);
	border-radius: 999px;
	background: var(--spr-surface, #fff);
	color: var(--spr-text, #222);
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	cursor: pointer;
}
.spr-cal-toggle:hover, .spr-cal-toggle.is-open { border-color: var(--spr-accent); color: var(--spr-accent); }
.spr-cal-toggle.is-open { background: color-mix(in srgb, var(--spr-accent) 8%, #fff); }
.spr-cal { max-width: 420px; padding: 4px 0 8px; }
.spr-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.spr-cal-title { font-weight: 700; }
.spr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.spr-cal-wd { padding: 4px 0; font-size: .75em; font-weight: 600; text-align: center; color: var(--spr-muted); text-transform: uppercase; letter-spacing: .06em; }
.spr-cal-day {
	aspect-ratio: 1;
	min-height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	color: var(--spr-text, #222);
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.spr-cal-day:hover:not([aria-disabled]) { border-color: var(--spr-accent); }
.spr-cal-day.is-today { border-color: var(--spr-border); }
.spr-cal-day.is-active { background: var(--spr-accent); border-color: var(--spr-accent); color: var(--spr-on-accent, #fff); }
.spr-cal-day.is-closed { color: #b3ada6; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); cursor: not-allowed; }
.spr-cal-day.is-out { color: #cfcac4; font-weight: 400; cursor: default; }

/* ---- Confirmation: one centred column, ticket with the code, next steps ---- */
.spr-done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.spr-done > * { width: 100%; max-width: 560px; }
.spr-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 14px; border-radius: 50%; background: color-mix(in srgb, var(--spr-free, #2c7a4b) 14%, #fff); color: var(--spr-free, #2c7a4b); }
.spr-done-mark svg { width: 28px; height: 28px; }
.spr-done.is-pending .spr-done-mark { background: color-mix(in srgb, var(--spr-accent) 12%, #fff); color: var(--spr-accent); }
.spr-done > .spr-done-mark { width: 56px; }
.spr-done-kicker { margin: 0 0 6px; font-size: .78em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--spr-free, #2c7a4b); }
.spr-done.is-pending .spr-done-kicker { color: var(--spr-accent); }
.spr-done .spr-card-title { justify-content: center; margin-bottom: 10px !important; }
.spr-done-lead { margin: 0 0 24px; color: var(--spr-muted); }
.spr-done-lead strong { color: var(--spr-text, inherit); overflow-wrap: anywhere; }

.spr-ticket { margin: 0 0 16px; border-radius: var(--spr-radius-lg, 12px); background: var(--spr-accent); color: var(--spr-on-accent, #fff); text-align: left; overflow: hidden; }
.spr-ticket-list { margin: 0; padding: 18px 22px 10px; }
.spr-ticket-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.spr-ticket-row dt { opacity: .75; }
.spr-ticket-row dd { margin: 0; font-weight: 700; text-align: right; }
/* Tear line between details and code */
.spr-ticket-code { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 22px 20px; border-top: 2px dashed rgba(255, 255, 255, .3); text-align: center; }
.spr-ticket-code::before, .spr-ticket-code::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--spr-bg, #fff); }
.spr-ticket-code::before { left: -10px; }
.spr-ticket-code::after { right: -10px; }
.spr-ticket-label { font-size: .72em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.spr-ticket-code strong { font-size: 2em; letter-spacing: .18em; line-height: 1.1; }
.spr-ticket-hint { font-size: .88em; opacity: .85; }

.spr-cart-done { margin: 0 0 20px; text-align: left; }
.spr-cart-note { margin: 10px 0 0; font-size: .85em; color: var(--spr-muted); }
.spr-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 18px; }
.spr-done-actions .spr-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; text-decoration: none; }
.spr-done-note { margin: 0; font-size: .88em; color: var(--spr-muted); }
@media (max-width: 480px) {
	.spr-done-actions .spr-btn { flex: 1 1 100%; justify-content: center; }
	.spr-ticket-code strong { font-size: 1.7em; }
}

/* ---- Weekly specials (theme days): dot on the day, quick picks below the strip, note for the chosen day ---- */
.spr-day { position: relative; }
.spr-day-hl { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; overflow: hidden; border-radius: 50%; background: var(--spr-highlight, #d98a1a); font-size: 0; }
.spr-cal-day { position: relative; }
.spr-cal-day.has-highlight::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--spr-highlight, #d98a1a); }
.spr-hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.spr-hl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 12px; border: var(--spr-bw, 1px) solid var(--spr-border); border-radius: 999px; background: var(--spr-surface, #fff); color: var(--spr-text, #222); font: inherit; font-size: .88em; cursor: pointer; }
.spr-hl-chip span:last-child { color: var(--spr-muted); }
.spr-hl-chip:hover, .spr-hl-chip[aria-pressed="true"] { border-color: var(--spr-highlight, #d98a1a); background: color-mix(in srgb, var(--spr-highlight, #d98a1a) 10%, #fff); }
.spr-hl-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--spr-highlight, #d98a1a); }
.spr-hl-note { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px; border-radius: var(--spr-radius, 10px); background: color-mix(in srgb, var(--spr-highlight, #d98a1a) 10%, #fff); }
.spr-hl-img { width: 72px; height: 72px; flex: none; border-radius: calc(var(--spr-radius, 10px) - 2px); object-fit: cover; object-position: 50% 85%; } /* Teller sitzt im unteren Bildteil */
.spr-hl-text { display: grid; gap: 2px; min-width: 0; }
.spr-hl-text > span:not(.spr-hl-kicker) { color: var(--spr-muted); font-size: .9em; }
/* Thementag mitbestellen */
.spr-hl-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; cursor: pointer; font-weight: 600; }
.spr-hl-opt input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--spr-accent); cursor: pointer; }
.spr-hl-text > .spr-hl-opt span { color: inherit; font-size: 1em; }
.spr-hl-kicker { font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--spr-highlight, #d98a1a) 70%, #000); }

/* Phones: the strip is swiped, so the ‹ › buttons give way to "Kalender" and the month label */
.spr-month { white-space: nowrap; }
@media (max-width: 560px) {
	.spr-navs .spr-nav { display: none; }
}

/* Nur für Screenreader */
.spr-app .spr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }